Commit
Author: Brian Michael Poblete [brianmp.dev@gmail.com]
Committer: GitHub [noreply@github.com] Wed, 17 Apr 2024 22:50:29 +0000
Hash: 00e024220107eee8aeef05fc60a78f640b888828
Timestamp: Wed, 17 Apr 2024 22:50:29 +0000 (8 months ago)

+64 -5 +/-5 browse
add px-based sizes (#493) 
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
1diff --git a/docsite/index.html b/docsite/index.html
2index 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
46index 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
65index 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
93index 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
122index 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