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
argyleink · Apr 17, 2024 · 00e0242 · 00e0242
1 parent 1561667
commit 00e0242
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 5 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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'))
 })