From 00e024220107eee8aeef05fc60a78f640b888828 Mon Sep 17 00:00:00 2001
From: Brian Michael Poblete <brianmp.dev@gmail.com>
Date: Wed, 17 Apr 2024 18:50:29 -0400
Subject: [PATCH] add px-based sizes (#493)

* add px-based sizes

* change heading capitalization to match others

* replace size-px with size-static

* revert to size-px instead of size-static
---
 docsite/index.html  | 26 +++++++++++++++++++++++++-
 package-lock.json   |  4 ++--
 src/props.sizes.css | 17 +++++++++++++++++
 src/props.sizes.js  | 18 ++++++++++++++++++
 test/basic.test.cjs |  4 ++--
 5 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/docsite/index.html b/docsite/index.html
index fd84a144..13678598 100644
--- a/docsite/index.html
+++ b/docsite/index.html
@@ -2935,7 +2935,7 @@ <h6>Push Out</h6>
     <section id="sizes">
       <header>
         <h2>Sizes</h2>
-        <p>No <code class="language-css">px</code> here, relative units all the way. <code>0</code>s are unsafe but common negative values, while 1-N are safe.</p>
+        <p>Sizes use relative units by default with <code class="language-css">rem</code> but static, <code class="language-css">px</code>-based units are also available. <code>0</code>s are unsafe but common negative values, while 1-N are safe.</p>
       </header>
       <div>
         <h5>The Props</h5>
@@ -2975,6 +2975,30 @@ <h5>Document Relative Sizes</h5>
             </code></pre>
           </div>
         </div>
+        <div>
+          <h5>Static Sizes</h5>
+          <div class="var-examples">
+            <pre class="language-css"><code>
+              --size-px-000: -8px;
+              --size-px-00: -4px;
+              --size-px-1: 4px;
+              --size-px-2: 8px;
+              --size-px-3: 16px;
+              --size-px-4: 20px;
+              --size-px-5: 24px;
+              --size-px-6: 28px;
+              --size-px-7: 32px;
+              --size-px-8: 48px;
+              --size-px-9: 64px;
+              --size-px-10: 80px;
+              --size-px-11: 120px;
+              --size-px-12: 160px;
+              --size-px-13: 240px;
+              --size-px-14: 320px;
+              --size-px-15: 480px;
+            </code></pre>
+          </div>
+        </div>
         <div>
           <h5>Usage Sample</h5>
           <pre class="language-css"><code>
diff --git a/package-lock.json b/package-lock.json
index 02ffb787..e37b76de 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "open-props",
-  "version": "1.6.19",
+  "version": "1.7.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "open-props",
-      "version": "1.6.19",
+      "version": "1.7.2",
       "license": "MIT",
       "devDependencies": {
         "ava": "^3.15.0",
diff --git a/src/props.sizes.css b/src/props.sizes.css
index e8b2a6e1..f41ec61d 100644
--- a/src/props.sizes.css
+++ b/src/props.sizes.css
@@ -16,6 +16,23 @@
   --size-13: 15rem;
   --size-14: 20rem;
   --size-15: 30rem;
+  --size-px-000: -8px;
+  --size-px-00: -4px;
+  --size-px-1: 4px;
+  --size-px-2: 8px;
+  --size-px-3: 16px;
+  --size-px-4: 20px;
+  --size-px-5: 24px;
+  --size-px-6: 28px;
+  --size-px-7: 32px;
+  --size-px-8: 48px;
+  --size-px-9: 64px;
+  --size-px-10: 80px;
+  --size-px-11: 120px;
+  --size-px-12: 160px;
+  --size-px-13: 240px;
+  --size-px-14: 320px;
+  --size-px-15: 480px;
   --size-fluid-1: clamp(.5rem, 1vw, 1rem);
   --size-fluid-2: clamp(1rem, 2vw, 1.5rem);
   --size-fluid-3: clamp(1.5rem, 3vw, 2rem);
diff --git a/src/props.sizes.js b/src/props.sizes.js
index 5bdcd335..a6c8d4ed 100644
--- a/src/props.sizes.js
+++ b/src/props.sizes.js
@@ -17,6 +17,24 @@ export default {
   '--size-14': '20rem',
   '--size-15': '30rem',
 
+  '--size-px-000': '-8px',
+  '--size-px-00': '-4px',
+  '--size-px-1': '4px',
+  '--size-px-2': '8px',
+  '--size-px-3': '16px',
+  '--size-px-4': '20px',
+  '--size-px-5': '24px',
+  '--size-px-6': '28px',
+  '--size-px-7': '32px',
+  '--size-px-8': '48px',
+  '--size-px-9': '64px',
+  '--size-px-10': '80px',
+  '--size-px-11': '120px',
+  '--size-px-12': '160px',
+  '--size-px-13': '240px',
+  '--size-px-14': '320px',
+  '--size-px-15': '480px',
+
   '--size-fluid-1': 'clamp(.5rem, 1vw, 1rem)',
   '--size-fluid-2': 'clamp(1rem, 2vw, 1.5rem)',
   '--size-fluid-3': 'clamp(1.5rem, 3vw, 2rem)',
diff --git a/test/basic.test.cjs b/test/basic.test.cjs
index 9ba5120b..9a80c1b8 100644
--- a/test/basic.test.cjs
+++ b/test/basic.test.cjs
@@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs')
 const OPtokens = require('../open-props.tokens.json')
 
 test('Should have an all included import', t => {
-  t.is(Object.keys(OpenProps).length, 1658)
+  t.is(Object.keys(OpenProps).length, 1692)
 })
 
 test('Import should have animations', async t => {
@@ -24,7 +24,7 @@ test('Import should have colors', async t => {
 })
 
 test('JSON Import should have colors', async t => {
-  t.is(Object.keys(OPtokens).length, 439)
+  t.is(Object.keys(OPtokens).length, 456)
   t.assert(Object.keys(OPtokens).includes('--orange-0'))
 })