+64 -5 +/-5 browse
| 1 | diff --git a/docsite/index.html b/docsite/index.html |
| 2 | index fd84a14..1367859 100644 |
| 3 | --- a/docsite/index.html |
| 4 | +++ b/docsite/index.html |
| 5 | @@ -2935,7 +2935,7 @@ |
| 6 | <section id="sizes"> |
| 7 | <header> |
| 8 | <h2>Sizes</h2> |
| 9 | - <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> |
| 10 | + <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> |
| 11 | </header> |
| 12 | <div> |
| 13 | <h5>The Props</h5> |
| 14 | @@ -2976,6 +2976,30 @@ |
| 15 | </div> |
| 16 | </div> |
| 17 | <div> |
| 18 | + <h5>Static Sizes</h5> |
| 19 | + <div class="var-examples"> |
| 20 | + <pre class="language-css"><code> |
| 21 | + --size-px-000: -8px; |
| 22 | + --size-px-00: -4px; |
| 23 | + --size-px-1: 4px; |
| 24 | + --size-px-2: 8px; |
| 25 | + --size-px-3: 16px; |
| 26 | + --size-px-4: 20px; |
| 27 | + --size-px-5: 24px; |
| 28 | + --size-px-6: 28px; |
| 29 | + --size-px-7: 32px; |
| 30 | + --size-px-8: 48px; |
| 31 | + --size-px-9: 64px; |
| 32 | + --size-px-10: 80px; |
| 33 | + --size-px-11: 120px; |
| 34 | + --size-px-12: 160px; |
| 35 | + --size-px-13: 240px; |
| 36 | + --size-px-14: 320px; |
| 37 | + --size-px-15: 480px; |
| 38 | + </code></pre> |
| 39 | + </div> |
| 40 | + </div> |
| 41 | + <div> |
| 42 | <h5>Usage Sample</h5> |
| 43 | <pre class="language-css"><code> |
| 44 | article { |
| 45 | diff --git a/package-lock.json b/package-lock.json |
| 46 | index 02ffb78..e37b76d 100644 |
| 47 | --- a/package-lock.json |
| 48 | +++ b/package-lock.json |
| 49 | @@ -1,12 +1,12 @@ |
| 50 | { |
| 51 | "name": "open-props", |
| 52 | - "version": "1.6.19", |
| 53 | + "version": "1.7.2", |
| 54 | "lockfileVersion": 2, |
| 55 | "requires": true, |
| 56 | "packages": { |
| 57 | "": { |
| 58 | "name": "open-props", |
| 59 | - "version": "1.6.19", |
| 60 | + "version": "1.7.2", |
| 61 | "license": "MIT", |
| 62 | "devDependencies": { |
| 63 | "ava": "^3.15.0", |
| 64 | diff --git a/src/props.sizes.css b/src/props.sizes.css |
| 65 | index e8b2a6e..f41ec61 100644 |
| 66 | --- a/src/props.sizes.css |
| 67 | +++ b/src/props.sizes.css |
| 68 | @@ -16,6 +16,23 @@ |
| 69 | --size-13: 15rem; |
| 70 | --size-14: 20rem; |
| 71 | --size-15: 30rem; |
| 72 | + --size-px-000: -8px; |
| 73 | + --size-px-00: -4px; |
| 74 | + --size-px-1: 4px; |
| 75 | + --size-px-2: 8px; |
| 76 | + --size-px-3: 16px; |
| 77 | + --size-px-4: 20px; |
| 78 | + --size-px-5: 24px; |
| 79 | + --size-px-6: 28px; |
| 80 | + --size-px-7: 32px; |
| 81 | + --size-px-8: 48px; |
| 82 | + --size-px-9: 64px; |
| 83 | + --size-px-10: 80px; |
| 84 | + --size-px-11: 120px; |
| 85 | + --size-px-12: 160px; |
| 86 | + --size-px-13: 240px; |
| 87 | + --size-px-14: 320px; |
| 88 | + --size-px-15: 480px; |
| 89 | --size-fluid-1: clamp(.5rem, 1vw, 1rem); |
| 90 | --size-fluid-2: clamp(1rem, 2vw, 1.5rem); |
| 91 | --size-fluid-3: clamp(1.5rem, 3vw, 2rem); |
| 92 | diff --git a/src/props.sizes.js b/src/props.sizes.js |
| 93 | index 5bdcd33..a6c8d4e 100644 |
| 94 | --- a/src/props.sizes.js |
| 95 | +++ b/src/props.sizes.js |
| 96 | @@ -17,6 +17,24 @@ export default { |
| 97 | '--size-14': '20rem', |
| 98 | '--size-15': '30rem', |
| 99 | |
| 100 | + '--size-px-000': '-8px', |
| 101 | + '--size-px-00': '-4px', |
| 102 | + '--size-px-1': '4px', |
| 103 | + '--size-px-2': '8px', |
| 104 | + '--size-px-3': '16px', |
| 105 | + '--size-px-4': '20px', |
| 106 | + '--size-px-5': '24px', |
| 107 | + '--size-px-6': '28px', |
| 108 | + '--size-px-7': '32px', |
| 109 | + '--size-px-8': '48px', |
| 110 | + '--size-px-9': '64px', |
| 111 | + '--size-px-10': '80px', |
| 112 | + '--size-px-11': '120px', |
| 113 | + '--size-px-12': '160px', |
| 114 | + '--size-px-13': '240px', |
| 115 | + '--size-px-14': '320px', |
| 116 | + '--size-px-15': '480px', |
| 117 | + |
| 118 | '--size-fluid-1': 'clamp(.5rem, 1vw, 1rem)', |
| 119 | '--size-fluid-2': 'clamp(1rem, 2vw, 1.5rem)', |
| 120 | '--size-fluid-3': 'clamp(1.5rem, 3vw, 2rem)', |
| 121 | diff --git a/test/basic.test.cjs b/test/basic.test.cjs |
| 122 | index 9ba5120..9a80c1b 100644 |
| 123 | --- a/test/basic.test.cjs |
| 124 | +++ b/test/basic.test.cjs |
| 125 | @@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs') |
| 126 | const OPtokens = require('../open-props.tokens.json') |
| 127 | |
| 128 | test('Should have an all included import', t => { |
| 129 | - t.is(Object.keys(OpenProps).length, 1658) |
| 130 | + t.is(Object.keys(OpenProps).length, 1692) |
| 131 | }) |
| 132 | |
| 133 | test('Import should have animations', async t => { |
| 134 | @@ -24,7 +24,7 @@ test('Import should have colors', async t => { |
| 135 | }) |
| 136 | |
| 137 | test('JSON Import should have colors', async t => { |
| 138 | - t.is(Object.keys(OPtokens).length, 439) |
| 139 | + t.is(Object.keys(OPtokens).length, 456) |
| 140 | t.assert(Object.keys(OPtokens).includes('--orange-0')) |
| 141 | }) |
| 142 |