Skip to content

Commit 0fff7d9

Browse files
saitheninjasaitheninja
authored
Merge branch 'argyleink:main' into main
2 parents 2b123d5 + 4a0b8c7 commit 0fff7d9

15 files changed

+166
-27
lines changed

‎docsite/index.css

+15-4
Original file line numberDiff line numberDiff line change
@@ -220,13 +220,13 @@ section.hero {
220220

221221
& > * {
222222
background: var(--gradient-1) fixed;
223-
background-size: 12ch 7ch;
223+
background-size: var(--size-relative-13) var(--size-relative-11);
224224
-webkit-background-clip: text;
225225
-webkit-text-fill-color: transparent;
226226

227227
@nest [data-theme="dark"] & {
228228
background: var(--gradient-4) fixed;
229-
background-size: 12ch 7ch;
229+
background-size: var(--size-relative-13) var(--size-relative-11);
230230
-webkit-background-clip: text;
231231
-webkit-text-fill-color: transparent;
232232
}
@@ -587,7 +587,7 @@ pre[class*="language-"] {
587587
color: var(--text-1);
588588
box-shadow: var(--shadow-2);
589589
text-shadow: 0 1px 0 hsl(0 0% 0% / 25%);
590-
inline-size: 3ch;
590+
inline-size: var(--size-relative-8);
591591
display: grid;
592592
place-content: center;
593593
margin: var(--size-3);
@@ -857,7 +857,7 @@ pre[class*="language-"] {
857857

858858
& > svg {
859859
margin-block-start: -.25em;
860-
inline-size: 2ch;
860+
inline-size: var(--size-relative-7);
861861
stroke-width: 2px;
862862
}
863863
}
@@ -1216,6 +1216,17 @@ pre[class*="language-"] {
12161216
}
12171217
}
12181218

1219+
.match-h5 > * {
1220+
font-size: var(--font-size-3);
1221+
font-weight: var(--font-weight-9);
1222+
}
1223+
1224+
.relative-sizes-demo {
1225+
display: flex;
1226+
gap: var(--size-2);
1227+
flex-flow: column wrap;
1228+
}
1229+
12191230
.content-demo {
12201231
display: flex;
12211232
gap: var(--size-2);

‎docsite/index.html

+62-5
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ <h1><span>CSS</span> <span>variables.</span></h1>
119119
</li>
120120
</ul>
121121
<small>
122-
v1.5.8
122+
v1.5.10
123123
<span class="license">
124124
<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16">
125125
<path fill-rule="evenodd" d="M8.75.75a.75.75 0 00-1.5 0V2h-.984c-.305 0-.604.08-.869.23l-1.288.737A.25.25 0 013.984 3H1.75a.75.75 0 000 1.5h.428L.066 9.192a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.514 3.514 0 00.686.45A4.492 4.492 0 003 11c.88 0 1.556-.22 2.023-.454a3.515 3.515 0 00.686-.45l.045-.04.016-.015.006-.006.002-.002.001-.002L5.25 9.5l.53.53a.75.75 0 00.154-.838L3.822 4.5h.162c.305 0 .604-.08.869-.23l1.289-.737a.25.25 0 01.124-.033h.984V13h-2.5a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-2.5V3.5h.984a.25.25 0 01.124.033l1.29.736c.264.152.563.231.868.231h.162l-2.112 4.692a.75.75 0 00.154.838l.53-.53-.53.53v.001l.002.002.002.002.006.006.016.015.045.04a3.517 3.517 0 00.686.45A4.492 4.492 0 0013 11c.88 0 1.556-.22 2.023-.454a3.512 3.512 0 00.686-.45l.045-.04.01-.01.006-.005.006-.006.002-.002.001-.002-.529-.531.53.53a.75.75 0 00.154-.838L13.823 4.5h.427a.75.75 0 000-1.5h-2.234a.25.25 0 01-.124-.033l-1.29-.736A1.75 1.75 0 009.735 2H8.75V.75zM1.695 9.227c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327l-1.305 2.9zm10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327l-1.305 2.9z"></path>
@@ -2796,13 +2796,14 @@ <h5>The Props</h5>
27962796
--size-fluid-{1-10}
27972797
--size-content-{1-3}
27982798
--size-header-{1-3}
2799+
--size-relative-{000-15}
27992800
</code></pre>
28002801
</div>
28012802
</div>
28022803

28032804
<div class="block-wrap">
28042805
<div>
2805-
<h5>Relative Sizes</h5>
2806+
<h5>Document Relative Sizes</h5>
28062807
<div class="var-examples">
28072808
<pre class="language-css"><code>
28082809
--size-000: -.5rem;
@@ -2964,7 +2965,7 @@ <h5>Usage Sample</h5>
29642965
}
29652966
</code></pre>
29662967
</div>
2967-
<div class="large-sizes sizes-demo count-em scroll-x-overflow">
2968+
<div class="large-sizes match-h5 sizes-demo count-em scroll-x-overflow">
29682969
<span style="inline-size: var(--size-header-1)"></span>
29692970
<span style="inline-size: var(--size-header-2)"></span>
29702971
<span style="inline-size: var(--size-header-3)"></span>
@@ -2976,6 +2977,62 @@ <h5 style="inline-size: var(--size-header-3)">Carrot cake gummi bears sweet cara
29762977
</div>
29772978
</div>
29782979

2980+
<div class="block-wrap">
2981+
<div>
2982+
<h5>Relative Sizes</h5>
2983+
<div class="var-examples">
2984+
<pre class="language-css"><code>
2985+
--size-relative-000: -.5ch;
2986+
--size-relative-00: -.25ch;
2987+
--size-relative-1: .25ch;
2988+
--size-relative-2: .5ch;
2989+
--size-relative-3: 1ch;
2990+
--size-relative-4: 1.25ch;
2991+
--size-relative-5: 1.5ch;
2992+
--size-relative-6: 1.75ch;
2993+
--size-relative-7: 2ch;
2994+
--size-relative-8: 3ch;
2995+
--size-relative-9: 4ch;
2996+
--size-relative-10: 5ch;
2997+
--size-relative-11: 7.5ch;
2998+
--size-relative-12: 10ch;
2999+
--size-relative-13: 15ch;
3000+
--size-relative-14: 20ch;
3001+
--size-relative-15: 30ch;
3002+
</code></pre>
3003+
</div>
3004+
</div>
3005+
<div class="relative-sizes-demo">
3006+
<label>
3007+
Pick a different base font size:
3008+
<select>
3009+
<optgroup label="Base Font Size">
3010+
<option value="5">--font-size-5</option>
3011+
<option value="6">--font-size-6</option>
3012+
<option value="7">--font-size-7</option>
3013+
<option value="8">--font-size-8</option>
3014+
</optgroup>
3015+
</select>
3016+
</label>
3017+
<div class="sizes-demo count-em scroll-x-overflow">
3018+
<div style="inline-size: var(--size-relative-1)"></div>
3019+
<div style="inline-size: var(--size-relative-2)"></div>
3020+
<div style="inline-size: var(--size-relative-3)"></div>
3021+
<div style="inline-size: var(--size-relative-4)"></div>
3022+
<div style="inline-size: var(--size-relative-5)"></div>
3023+
<div style="inline-size: var(--size-relative-6)"></div>
3024+
<div style="inline-size: var(--size-relative-7)"></div>
3025+
<div style="inline-size: var(--size-relative-8)"></div>
3026+
<div style="inline-size: var(--size-relative-9)"></div>
3027+
<div style="inline-size: var(--size-relative-10)"></div>
3028+
<div style="inline-size: var(--size-relative-11)"></div>
3029+
<div style="inline-size: var(--size-relative-12)"></div>
3030+
<div style="inline-size: var(--size-relative-13)"></div>
3031+
<div style="inline-size: var(--size-relative-14)"></div>
3032+
<div style="inline-size: var(--size-relative-15)"></div>
3033+
</div>
3034+
</div>
3035+
</div>
29793036
</section>
29803037

29813038
<section id="borders">
@@ -3215,8 +3272,8 @@ <h5>Preference Vars</h5>
32153272
<h5>Preference Vars Extended</h5>
32163273
<div class="var-examples">
32173274
<pre class="language-css"><code>
3218-
@custom-media --highContrast (prefers-contrast: high);
3219-
@custom-media --lowContrast (prefers-contrast: low);
3275+
@custom-media --highContrast (prefers-contrast: more);
3276+
@custom-media --lowContrast (prefers-contrast: less);
32203277

32213278
@custom-media --opacityOK (prefers-reduced-transparency: no-preference);
32223279
@custom-media --opacityNotOK (prefers-reduced-transparency: reduce);

‎docsite/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,4 @@ import '/js/easing.js'
55
import '/js/animations.js'
66
import '/js/slider.js'
77
import '/js/scrollspy.js'
8+
import '/js/select.js'

‎docsite/js/animations.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import {toggleIcons} from './easing.js'
1+
import {showPlayIcon} from './easing.js'
22

33
const cleanup = e => {
44
setTimeout(()=> {
55
e.target.style = ''
6-
toggleIcons(e.target.querySelector('button'))
6+
showPlayIcon(e.target.querySelector('button'))
77
}, 500)
88
}
99

‎docsite/js/easing.js

+12
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,18 @@ export const toggleIcons = button => {
1818
})
1919
}
2020

21+
export const showPlayIcon = button => {
22+
button
23+
.querySelectorAll('use')
24+
.forEach(icon => {
25+
if (icon.getAttribute('href') === '#play-icon') {
26+
icon.classList.remove('hidden')
27+
} else {
28+
icon.classList.add('hidden');
29+
}
30+
})
31+
}
32+
2133
// play buttons
2234
document
2335
.querySelectorAll('.play-button')

‎docsite/js/select.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const selects = document.querySelectorAll('select')
2+
3+
selects.forEach(select => {
4+
select.addEventListener('change', e => {
5+
6+
let value = e.target.value
7+
8+
let sizes = select
9+
.closest('.relative-sizes-demo')
10+
.querySelector('.sizes-demo')
11+
.children
12+
13+
for (let i = 0; i < sizes.length; i++) {
14+
let size = sizes[i];
15+
size.style.fontSize = `var(--font-size-${value})`;
16+
}
17+
})
18+
})
19+

‎docsite/js/slider.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ const rangeToPercent = slider => {
55
let val = slider.value
66
let max = slider.max
77

8-
if (slider.min === '-1' && (val === "-1" || val === "0"))
8+
if (slider.min === '-1' && (val === '-1' || val === '0'))
99
percent = (val+1) / max * 100
10-
else if (slider.min === '-1' && val === "1")
10+
else if (slider.min === '-1' && val === '1')
1111
percent = val / (max-2) * 100
1212
else
1313
percent = val / max * 100

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"name": "open-props",
44
"author": "Adam Argyle",
55
"license": "MIT",
6-
"version": "1.5.8",
6+
"version": "1.5.10",
77
"repository": {
88
"type": "git",
99
"url": "https://github.com/argyleink/open-props"

‎src/extra/buttons.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
--_ink-shadow-dark: 0 1px 0 var(--surface-1);
2424
--_ink-shadow: var(--_ink-shadow-light);
2525

26-
--_icon-size: 2ch;
26+
--_icon-size: var(--size-relative-7);
2727
--_icon-color: var(--_accent, var(--link));
2828

2929
font-size: var(--_size);
@@ -46,7 +46,7 @@
4646
font-weight: var(--font-weight-7);
4747
border-radius: var(--radius-2);
4848
padding-block: .75ch;
49-
padding-inline: 1.75ch;
49+
padding-inline: var(--size-relative-6);
5050

5151
user-select: none;
5252
-webkit-tap-highlight-color: transparent;
@@ -141,7 +141,7 @@
141141

142142
:where(input[type="file"])::-webkit-file-upload-button,
143143
:where(input[type="file"])::file-selector-button {
144-
margin-inline-end: 1.75ch;
144+
margin-inline-end: var(--size-relative-6);
145145
cursor: pointer;
146146
}
147147

‎src/extra/buttons.dark.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
--_highlight: hsl(var(--gray-12-hsl) / 25%);
1515
--_ink-shadow: 0 1px 0 var(--surface-1);
1616

17-
--_icon-size: 2ch;
17+
--_icon-size: var(--size-relative-7);
1818
--_icon-color: var(--_accent, var(--link));
1919

2020
font-size: var(--_size);
@@ -37,7 +37,7 @@
3737
font-weight: var(--font-weight-7);
3838
border-radius: var(--radius-2);
3939
padding-block: .75ch;
40-
padding-inline: 1.75ch;
40+
padding-inline: var(--size-relative-6);
4141

4242
user-select: none;
4343
-webkit-tap-highlight-color: transparent;
@@ -117,7 +117,7 @@
117117

118118
:where(input[type="file"])::-webkit-file-upload-button,
119119
:where(input[type="file"])::file-selector-button {
120-
margin-inline-end: 1.75ch;
120+
margin-inline-end: var(--size-relative-6);
121121
cursor: pointer;
122122
}
123123

‎src/extra/buttons.light.css

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
--_ink-shadow: 0 1px 0 var(--gray-3);
1818

19-
--_icon-size: 2ch;
19+
--_icon-size: var(--size-relative-7);
2020
--_icon-color: var(--_accent, var(--link));
2121

2222
font-size: var(--_size);
@@ -39,7 +39,7 @@
3939
font-weight: var(--font-weight-7);
4040
border-radius: var(--radius-2);
4141
padding-block: .75ch;
42-
padding-inline: 1.75ch;
42+
padding-inline: var(--size-relative-6);
4343

4444
user-select: none;
4545
-webkit-tap-highlight-color: transparent;
@@ -119,6 +119,6 @@
119119

120120
:where(input[type="file"])::-webkit-file-upload-button,
121121
:where(input[type="file"])::file-selector-button {
122-
margin-inline-end: 1.75ch;
122+
margin-inline-end: var(--size-relative-6);
123123
cursor: pointer;
124124
}

‎src/extra/normalize.src.css

+7-3
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
:where(h1, h2, h3, h4, h5, h6) {
4545
line-height: var(--font-lineheight-1);
4646
font-weight: var(--font-weight-9);
47+
text-wrap: balance;
4748
}
4849

4950
:where(h1) {
@@ -76,8 +77,11 @@
7677
}
7778
}
7879

79-
:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
80+
:where(a[href], area, button, input:not([type="text"], [type="email"], [type="number"], [type="password"], [type=""], [type="tel"], [type="url"]), label[for], select, summary, [tabindex]:not([tabindex*="-"])) {
8081
cursor: pointer;
82+
}
83+
84+
:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) {
8185
touch-action: manipulation;
8286
-webkit-tap-highlight-color: transparent;
8387
}
@@ -129,7 +133,7 @@
129133
}
130134

131135
:where(select) {
132-
padding-inline: 1.25ch 0;
136+
padding-inline: var(--size-relative-4) 0;
133137
padding-block: .75ch;
134138
}
135139

@@ -181,7 +185,7 @@
181185
:where(ol, ul) { padding-inline-start: var(--size-8) }
182186
:where(li) { padding-inline-start: var(--size-2) }
183187
:where(li, dd, figcaption) { max-inline-size: var(--size-content-2) }
184-
:where(p) { max-inline-size: var(--size-content-3) }
188+
:where(p) { max-inline-size: var(--size-content-3); text-wrap: pretty; }
185189
:where(dt, summary) { font-weight: var(--font-weight-7) }
186190

187191
:where(dt:not(:first-of-type)) {

‎src/props.sizes.css

+17
Original file line numberDiff line numberDiff line change
@@ -39,4 +39,21 @@
3939
--size-lg: 1024px;
4040
--size-xl: 1440px;
4141
--size-xxl: 1920px;
42+
--size-relative-000: -.5ch;
43+
--size-relative-00: -.25ch;
44+
--size-relative-1: .25ch;
45+
--size-relative-2: .5ch;
46+
--size-relative-3: 1ch;
47+
--size-relative-4: 1.25ch;
48+
--size-relative-5: 1.5ch;
49+
--size-relative-6: 1.75ch;
50+
--size-relative-7: 2ch;
51+
--size-relative-8: 3ch;
52+
--size-relative-9: 4ch;
53+
--size-relative-10: 5ch;
54+
--size-relative-11: 7.5ch;
55+
--size-relative-12: 10ch;
56+
--size-relative-13: 15ch;
57+
--size-relative-14: 20ch;
58+
--size-relative-15: 30ch;
4259
}

0 commit comments

Comments
 (0)