Author: Paolo Giraudi [58827439+PaoloGiraudi@users.noreply.github.com]
Committer: GitHub [noreply@github.com] Wed, 14 Jun 2023 21:46:11 +0000
Hash: 110f45db092f7f3515486580c27a1827abf67252
Timestamp: Wed, 14 Jun 2023 21:46:11 +0000 (1 year ago)

+135 -17 +/-11 browse
add relative sizes to OP (#370) 
add relative sizes to OP (#370)

* add relative sizes to props

* add relative sizes demo to docsite

* use relative sizes in codebase

* fix op lenght in tests
1diff --git a/docsite/index.css b/docsite/index.css
2index 7b2b5d3..7fdcd8c 100644
3--- a/docsite/index.css
4+++ b/docsite/index.css
5 @@ -220,13 +220,13 @@ section.hero {
6
7 & > * {
8 background: var(--gradient-1) fixed;
9- background-size: 12ch 7ch;
10+ background-size: var(--size-relative-13) var(--size-relative-11);
11 -webkit-background-clip: text;
12 -webkit-text-fill-color: transparent;
13
14 @nest [data-theme="dark"] & {
15 background: var(--gradient-4) fixed;
16- background-size: 12ch 7ch;
17+ background-size: var(--size-relative-13) var(--size-relative-11);
18 -webkit-background-clip: text;
19 -webkit-text-fill-color: transparent;
20 }
21 @@ -587,7 +587,7 @@ pre[class*="language-"] {
22 color: var(--text-1);
23 box-shadow: var(--shadow-2);
24 text-shadow: 0 1px 0 hsl(0 0% 0% / 25%);
25- inline-size: 3ch;
26+ inline-size: var(--size-relative-8);
27 display: grid;
28 place-content: center;
29 margin: var(--size-3);
30 @@ -857,7 +857,7 @@ pre[class*="language-"] {
31
32 & > svg {
33 margin-block-start: -.25em;
34- inline-size: 2ch;
35+ inline-size: var(--size-relative-7);
36 stroke-width: 2px;
37 }
38 }
39 @@ -1216,6 +1216,12 @@ pre[class*="language-"] {
40 }
41 }
42
43+ .relative-sizes-demo {
44+ display: flex;
45+ gap: var(--size-2);
46+ flex-flow: column wrap;
47+ }
48+
49 .content-demo {
50 display: flex;
51 gap: var(--size-2);
52 diff --git a/docsite/index.html b/docsite/index.html
53index b97faa6..fd9a5d7 100644
54--- a/docsite/index.html
55+++ b/docsite/index.html
56 @@ -2794,13 +2794,14 @@
57 --size-fluid-{1-10}
58 --size-content-{1-3}
59 --size-header-{1-3}
60+ --size-relative-{000-15}
61 </code></pre>
62 </div>
63 </div>
64
65 <div class="block-wrap">
66 <div>
67- <h5>Relative Sizes</h5>
68+ <h5>Document Relative Sizes</h5>
69 <div class="var-examples">
70 <pre class="language-css"><code>
71 --size-000: -.5rem;
72 @@ -2974,6 +2975,62 @@
73 </div>
74 </div>
75
76+ <div class="block-wrap">
77+ <div>
78+ <h5>Relative Sizes</h5>
79+ <div class="var-examples">
80+ <pre class="language-css"><code>
81+ --size-relative-000: -.5ch;
82+ --size-relative-00: -.25ch;
83+ --size-relative-1: .25ch;
84+ --size-relative-2: .5ch;
85+ --size-relative-3: 1ch;
86+ --size-relative-4: 1.25ch;
87+ --size-relative-5: 1.5ch;
88+ --size-relative-6: 1.75ch;
89+ --size-relative-7: 2ch;
90+ --size-relative-8: 3ch;
91+ --size-relative-9: 4ch;
92+ --size-relative-10: 5ch;
93+ --size-relative-11: 7.5ch;
94+ --size-relative-12: 10ch;
95+ --size-relative-13: 15ch;
96+ --size-relative-14: 20ch;
97+ --size-relative-15: 30ch;
98+ </code></pre>
99+ </div>
100+ </div>
101+ <div class="relative-sizes-demo">
102+ <label>
103+ Pick a different base font size:
104+ <select>
105+ <optgroup label="Base Font Size">
106+ <option value="5">--font-size-5</option>
107+ <option value="6">--font-size-6</option>
108+ <option value="7">--font-size-7</option>
109+ <option value="8">--font-size-8</option>
110+ </optgroup>
111+ </select>
112+ </label>
113+ <div class="sizes-demo count-em scroll-x-overflow">
114+ <div style="inline-size: var(--size-relative-1)"></div>
115+ <div style="inline-size: var(--size-relative-2)"></div>
116+ <div style="inline-size: var(--size-relative-3)"></div>
117+ <div style="inline-size: var(--size-relative-4)"></div>
118+ <div style="inline-size: var(--size-relative-5)"></div>
119+ <div style="inline-size: var(--size-relative-6)"></div>
120+ <div style="inline-size: var(--size-relative-7)"></div>
121+ <div style="inline-size: var(--size-relative-8)"></div>
122+ <div style="inline-size: var(--size-relative-9)"></div>
123+ <div style="inline-size: var(--size-relative-10)"></div>
124+ <div style="inline-size: var(--size-relative-11)"></div>
125+ <div style="inline-size: var(--size-relative-12)"></div>
126+ <div style="inline-size: var(--size-relative-13)"></div>
127+ <div style="inline-size: var(--size-relative-14)"></div>
128+ <div style="inline-size: var(--size-relative-15)"></div>
129+ </div>
130+ </div>
131+ </div>
132 </section>
133
134 <section id="borders">
135 diff --git a/docsite/index.js b/docsite/index.js
136index 35455e8..2d02d1a 100644
137--- a/docsite/index.js
138+++ b/docsite/index.js
139 @@ -5,3 +5,4 @@ import '/js/easing.js'
140 import '/js/animations.js'
141 import '/js/slider.js'
142 import '/js/scrollspy.js'
143+ import '/js/select.js'
144 diff --git a/docsite/js/select.js b/docsite/js/select.js
145new file mode 100644
146index 0000000..2c371f7
147--- /dev/null
148+++ b/docsite/js/select.js
149 @@ -0,0 +1,19 @@
150+ const selects = document.querySelectorAll('select')
151+
152+ selects.forEach(select => {
153+ select.addEventListener('change', e => {
154+
155+ let value = e.target.value
156+
157+ let sizes = select
158+ .closest('.relative-sizes-demo')
159+ .querySelector('.sizes-demo')
160+ .children
161+
162+ for (let i = 0; i < sizes.length; i++) {
163+ let size = sizes[i];
164+ size.style.fontSize = `var(--font-size-${value})`;
165+ }
166+ })
167+ })
168+
169 diff --git a/src/extra/buttons.css b/src/extra/buttons.css
170index 7aea3fd..265b202 100644
171--- a/src/extra/buttons.css
172+++ b/src/extra/buttons.css
173 @@ -23,7 +23,7 @@
174 --_ink-shadow-dark: 0 1px 0 var(--surface-1);
175 --_ink-shadow: var(--_ink-shadow-light);
176
177- --_icon-size: 2ch;
178+ --_icon-size: var(--size-relative-7);
179 --_icon-color: var(--_accent, var(--link));
180
181 font-size: var(--_size);
182 @@ -46,7 +46,7 @@
183 font-weight: var(--font-weight-7);
184 border-radius: var(--radius-2);
185 padding-block: .75ch;
186- padding-inline: 1.75ch;
187+ padding-inline: var(--size-relative-6);
188
189 user-select: none;
190 -webkit-tap-highlight-color: transparent;
191 @@ -141,7 +141,7 @@
192
193 :where(input[type="file"])::-webkit-file-upload-button,
194 :where(input[type="file"])::file-selector-button {
195- margin-inline-end: 1.75ch;
196+ margin-inline-end: var(--size-relative-6);
197 cursor: pointer;
198 }
199
200 diff --git a/src/extra/buttons.dark.css b/src/extra/buttons.dark.css
201index 5a9880b..bae77a3 100644
202--- a/src/extra/buttons.dark.css
203+++ b/src/extra/buttons.dark.css
204 @@ -14,7 +14,7 @@
205 --_highlight: hsl(var(--gray-12-hsl) / 25%);
206 --_ink-shadow: 0 1px 0 var(--surface-1);
207
208- --_icon-size: 2ch;
209+ --_icon-size: var(--size-relative-7);
210 --_icon-color: var(--_accent, var(--link));
211
212 font-size: var(--_size);
213 @@ -37,7 +37,7 @@
214 font-weight: var(--font-weight-7);
215 border-radius: var(--radius-2);
216 padding-block: .75ch;
217- padding-inline: 1.75ch;
218+ padding-inline: var(--size-relative-6);
219
220 user-select: none;
221 -webkit-tap-highlight-color: transparent;
222 @@ -117,7 +117,7 @@
223
224 :where(input[type="file"])::-webkit-file-upload-button,
225 :where(input[type="file"])::file-selector-button {
226- margin-inline-end: 1.75ch;
227+ margin-inline-end: var(--size-relative-6);
228 cursor: pointer;
229 }
230
231 diff --git a/src/extra/buttons.light.css b/src/extra/buttons.light.css
232index 4f82beb..41a6cec 100644
233--- a/src/extra/buttons.light.css
234+++ b/src/extra/buttons.light.css
235 @@ -16,7 +16,7 @@
236
237 --_ink-shadow: 0 1px 0 var(--gray-3);
238
239- --_icon-size: 2ch;
240+ --_icon-size: var(--size-relative-7);
241 --_icon-color: var(--_accent, var(--link));
242
243 font-size: var(--_size);
244 @@ -39,7 +39,7 @@
245 font-weight: var(--font-weight-7);
246 border-radius: var(--radius-2);
247 padding-block: .75ch;
248- padding-inline: 1.75ch;
249+ padding-inline: var(--size-relative-6);
250
251 user-select: none;
252 -webkit-tap-highlight-color: transparent;
253 @@ -119,6 +119,6 @@
254
255 :where(input[type="file"])::-webkit-file-upload-button,
256 :where(input[type="file"])::file-selector-button {
257- margin-inline-end: 1.75ch;
258+ margin-inline-end: var(--size-relative-6);
259 cursor: pointer;
260 }
261 diff --git a/src/extra/normalize.src.css b/src/extra/normalize.src.css
262index 8cc4304..b5c9cc1 100644
263--- a/src/extra/normalize.src.css
264+++ b/src/extra/normalize.src.css
265 @@ -132,7 +132,7 @@
266 }
267
268 :where(select) {
269- padding-inline: 1.25ch 0;
270+ padding-inline: var(--size-relative-4) 0;
271 padding-block: .75ch;
272 }
273
274 diff --git a/src/props.sizes.css b/src/props.sizes.css
275index 697c284..e8b2a6e 100644
276--- a/src/props.sizes.css
277+++ b/src/props.sizes.css
278 @@ -39,4 +39,21 @@
279 --size-lg: 1024px;
280 --size-xl: 1440px;
281 --size-xxl: 1920px;
282+ --size-relative-000: -.5ch;
283+ --size-relative-00: -.25ch;
284+ --size-relative-1: .25ch;
285+ --size-relative-2: .5ch;
286+ --size-relative-3: 1ch;
287+ --size-relative-4: 1.25ch;
288+ --size-relative-5: 1.5ch;
289+ --size-relative-6: 1.75ch;
290+ --size-relative-7: 2ch;
291+ --size-relative-8: 3ch;
292+ --size-relative-9: 4ch;
293+ --size-relative-10: 5ch;
294+ --size-relative-11: 7.5ch;
295+ --size-relative-12: 10ch;
296+ --size-relative-13: 15ch;
297+ --size-relative-14: 20ch;
298+ --size-relative-15: 30ch;
299 }
300 diff --git a/src/props.sizes.js b/src/props.sizes.js
301index a9f4d8e..5bdcd33 100644
302--- a/src/props.sizes.js
303+++ b/src/props.sizes.js
304 @@ -43,4 +43,22 @@ export default {
305 '--size-lg': '1024px',
306 '--size-xl': '1440px',
307 '--size-xxl': '1920px',
308+
309+ '--size-relative-000': '-.5ch',
310+ '--size-relative-00': '-.25ch',
311+ '--size-relative-1': '.25ch',
312+ '--size-relative-2': '.5ch',
313+ '--size-relative-3': '1ch',
314+ '--size-relative-4': '1.25ch',
315+ '--size-relative-5': '1.5ch',
316+ '--size-relative-6': '1.75ch',
317+ '--size-relative-7': '2ch',
318+ '--size-relative-8': '3ch',
319+ '--size-relative-9': '4ch',
320+ '--size-relative-10': '5ch',
321+ '--size-relative-11': '7.5ch',
322+ '--size-relative-12': '10ch',
323+ '--size-relative-13': '15ch',
324+ '--size-relative-14': '20ch',
325+ '--size-relative-15': '30ch',
326 }
327 diff --git a/test/basic.test.cjs b/test/basic.test.cjs
328index 3501ff0..13e20ea 100644
329--- a/test/basic.test.cjs
330+++ b/test/basic.test.cjs
331 @@ -4,7 +4,7 @@ const OpenProps = require('../dist/open-props.cjs')
332 const OPtokens = require('../open-props.tokens.json')
333
334 test('Should have an all included import', t => {
335- t.is(Object.keys(OpenProps).length, 1566)
336+ t.is(Object.keys(OpenProps).length, 1600)
337 })
338
339 test('Import should have animations', async t => {
340 @@ -24,7 +24,7 @@ test('Import should have colors', async t => {
341 })
342
343 test('JSON Import should have colors', async t => {
344- t.is(Object.keys(OPtokens).length, 397)
345+ t.is(Object.keys(OPtokens).length, 414)
346 t.assert(Object.keys(OPtokens).includes('--orange-0'))
347 })
348