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

@@ -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>

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);

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)',

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'))
 })