Commit
Author: Adam Argyle [argyle@google.com]
Hash: f13794b2b01154a9572fcf315ac26409ec7a0856
Timestamp: Wed, 13 Oct 2021 21:32:06 +0000 (3 years ago)

+272 -272 +/-8 browse
rename reset to normalize
1diff --git a/docsite/index.css b/docsite/index.css
2index e471f6a..6c00774 100644
3--- a/docsite/index.css
4+++ b/docsite/index.css
5 @@ -1,5 +1,5 @@
6 @import "../src/index.css";
7- @import "../src/extra/reset.css";
8+ @import "../src/extra/normalize.css";
9
10 :root {
11 --max-inline-body: calc(100vw - (var(--size-8) * 2));
12 diff --git a/docsite/index.html b/docsite/index.html
13index 7ca3b56..4111265 100644
14--- a/docsite/index.html
15+++ b/docsite/index.html
16 @@ -73,7 +73,7 @@
17 <svg viewBox="0 0 24 24">
18 <path d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7" />
19 </svg>
20- <span>props starter <a href="#">reset.css</a></span>
21+ <span>themed <a href="#">normalize.css</a> using the props</span>
22 </blockquote>
23 <small>
24 v0.0.22<br>
25 @@ -190,7 +190,7 @@
26
27 <div class="size"><strong>1</strong>kB</div>
28 <div class="file">
29- <a href="https://unpkg.com/open-props/reset.css">reset.css</a> <small class="green-badge">optional</small>
30+ <a href="https://unpkg.com/open-props/normalize.css">normalize.css</a> <small class="green-badge">optional</small>
31 <br>
32 <small>
33 <a href="https://github.com/argyleink/open-props/blob/main/src/extra/brand.css">brand.css</a>
34 @@ -325,19 +325,19 @@
35 <pre class="language-css"><code>
36 /* index.css */
37 @import "https://unpkg.com/open-props";
38- @import "https://unpkg.com/open-props/reset.css";
39+ @import "https://unpkg.com/open-props/normalize.css";
40 </code></pre>
41
42 <pre class="language-html"><code>
43 &#60;!-- index.html --&#62;
44 &#60;link rel="stylesheet" href="https://unpkg.com/open-props"/&#62;
45- &#60;link rel="stylesheet" href="https://unpkg.com/open-props/reset.css"/&#62;
46+ &#60;link rel="stylesheet" href="https://unpkg.com/open-props/normalize.css"/&#62;
47 </code></pre>
48
49 <pre class="language-js"><code>
50 // index.js
51 import 'https://unpkg.com/open-props';
52- import 'https://unpkg.com/open-props/reset.css';
53+ import 'https://unpkg.com/open-props/normalize.css';
54 </code></pre>
55 </div>
56 </div>
57 @@ -359,7 +359,7 @@
58 <pre class="language-css"><code>
59 /* index.pcss */
60 @import "https://unpkg.com/open-props/src/index.css";
61- @import "https://unpkg.com/open-props/src/extra/reset.css";
62+ @import "https://unpkg.com/open-props/src/extra/normalize.css";
63 </code></pre>
64 </div>
65
66 @@ -433,13 +433,13 @@
67 <pre class="language-css"><code>
68 /* index.pcss */
69 @import "open-props";
70- @import "open-props/reset.css";
71+ @import "open-props/normalize.css";
72 </code></pre>
73
74 <pre class="language-js"><code>
75 // index.js
76 import 'open-props';
77- import 'open-props/reset.css';
78+ import 'open-props/normalize.css';
79 </code></pre>
80 </div>
81 </div>
82 @@ -473,7 +473,7 @@
83 <pre class="language-css"><code>
84 /* index.pcss */
85 @import "open-props/src/index.css";
86- @import "open-props/src/extra/reset.css";
87+ @import "open-props/src/extra/normalize.css";
88 </code></pre>
89 </div>
90
91 diff --git a/normalize.css b/normalize.css
92new file mode 100644
93index 0000000..d27ac85
94--- /dev/null
95+++ b/normalize.css
96 @@ -0,0 +1 @@
97+ :where(html){--brand:var(--pink-6);--link:var(--indigo-7);--link-visited:var(--grape-7);--text-1:var(--gray-9);--text-2:var(--gray-7);--surface-1:var(--gray-0);--surface-2:var(--gray-2);--surface-3:var(--gray-3);--surface-4:var(--gray-4);accent-color:var(--brand);background-color:var(--surface-1);block-size:100%;color:var(--text-2);color-scheme:light;font-family:var(--font-sans);line-height:var(--font-lineheight-3);scrollbar-color:var(--brand) Canvas}@media (dynamic-range:high){:where(html){--link:color(display-p3 0 .5 1);--link-visited:color(display-p3 .6 .2 1)}}@media (prefers-color-scheme:dark){:where(html){--brand:var(--pink-4);--link:var(--indigo-3);--link-visited:var(--grape-3);--text-1:var(--gray-1);--text-2:var(--gray-2);--surface-1:var(--gray-9);--surface-2:var(--gray-8);--surface-3:var(--gray-7);--surface-4:var(--gray-6);color-scheme:dark}}:where(h1,h2,h3,h4,h5,h6,dt){color:var(--text-1)}:where(a[href]){color:var(--link)}:where(a[href]):visited{color:var(--link-visited)}:focus-visible{outline-color:var(--brand)}*,:after,:before{box-sizing:border-box}*{background-origin:border-box;background-repeat:no-repeat;margin:0}:where(:not(fieldset)){border-style:solid;border-width:0}@media (prefers-reduced-motion:no-preference){:where(html){scroll-behavior:smooth}}@media (prefers-reduced-motion:no-preference){:focus-visible{outline-offset:5px;transition:outline-offset .25s var(--ease-2)}}:where(body){scrollbar-gutter:stable both-edges;min-block-size:100%}:where(h1,h2,h3,h4,h5,h6){font-weight:var(--font-weight-9);line-height:var(--font-relative-lineheight-2)}:where(h1){font-size:var(--font-size-8);max-inline-size:var(--size-header-1)}:where(h2){font-size:var(--font-size-6);max-inline-size:var(--size-header-2)}:where(h3){font-size:var(--font-size-5)}:where(h4){font-size:var(--font-size-4)}:where(h5){font-size:var(--font-size-3)}:where(h3,h4,h5,h6,dt){max-inline-size:var(--size-header-3)}:where(p,ul,ol,dl,h6){font-size:var(--font-size-2)}:where(a,u,ins,abbr){text-underline-offset:1px}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]){cursor:pointer;touch-action:manipulation}:where(a){margin-block:calc(var(--size-1)*-1);margin-inline:calc(var(--size-1)*-1);padding-block:var(--size-1);padding-inline:var(--size-1)}:where(a):where([href]){text-decoration-color:var(--indigo-2)}:where(a):where([href]):where(:visited){text-decoration-color:var(--grape-2)}:where(a):where(:not(:hover)){text-decoration:inherit}:where(button){-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block;vertical-align:middle}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(input,button,textarea,select){color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit}:where(input){padding-block:var(--size-1);padding-inline:var(--size-2)}:where(select){padding-block:var(--size-1);padding-inline:var(--size-2)}:where(textarea){resize:block}:where(input[type=checkbox],input[type=radio]){block-size:var(--size-3);inline-size:var(--size-3)}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:var(--size-10)}:where(code,kbd,samp,pre){font-family:var(--font-mono)}:where(:not(pre)>code,kbd){white-space:nowrap}:where(pre){max-inline-size:max-content;min-inline-size:0;white-space:pre}:where(:not(pre)>code){background:var(--surface-2);border-radius:var(--radius-2);padding:var(--size-1) var(--size-2)}:where(kbd,var){border-color:var(--surface-4);border-radius:var(--radius-2);border-width:var(--border-size-1);padding:var(--size-1) var(--size-2)}:where(mark){border-radius:var(--radius-2);padding-inline:var(--size-1)}:where(ol,ul){padding-inline-start:var(--size-8)}:where(li){padding-inline-start:var(--size-2)}:where(li,dd,figcaption){max-inline-size:var(--size-content-2)}:where(p){max-inline-size:var(--size-content-3)}:where(dt,summary){font-weight:var(--font-weight-7)}:where(dt:not(:first-of-type)){margin-block-start:var(--size-5)}:where(small){font-size:max(.5em,var(--font-size-0));max-inline-size:var(--size-content-1)}:where(hr){background-color:var(--surface-3);height:var(--border-size-2);margin-block:var(--size-fluid-5)}:where(figure){display:grid;gap:var(--size-2);place-items:center}:where(figure)>:where(figcaption){font-size:var(--font-size-1)}:where(blockquote,:not>cite){border-inline-start-width:var(--border-size-3)}:where(blockquote){display:grid;gap:var(--size-3);max-inline-size:var(--size-content-2);padding-block:var(--size-3);padding-inline:var(--size-4)}:where(:not(blockquote)>cite){padding-inline-start:var(--size-2)}:where(summary){background:var(--surface-3);border-radius:var(--radius-2);margin:calc(var(--size-2)*-1) calc(var(--size-3)*-1);padding:var(--size-2) var(--size-3)}:where(details){background:var(--surface-2);border-radius:var(--radius-2);padding-block:var(--size-2);padding-inline:var(--size-3)}:where(details[open]>summary){border-end-end-radius:0;border-end-start-radius:0;margin-bottom:var(--size-2)}:where(fieldset){border-radius:var(--radius-2)}:where(del){background:var(--red-9);color:var(--red-2)}:where(ins){background:var(--green-9);color:var(--green-1)}:where(abbr){text-decoration-color:var(--blue-5)}
98\ No newline at end of file
99 diff --git a/package.json b/package.json
100index 442b46d..c7e2c43 100644
101--- a/package.json
102+++ b/package.json
103 @@ -30,6 +30,7 @@
104 "gen:prefixed": "cd src && node _create-props.js 'op'",
105 "lib:js": "microbundle",
106 "lib:all": "postcss src/index.css -o props.css",
107+ "lib:normalize": "postcss src/extra/normalize.css -o normalize.css",
108 "lib:animations": "postcss src/props.animations.css -o animations.css",
109 "lib:aspects": "postcss src/props.aspects.css -o aspects.css",
110 "lib:borders": "postcss src/props.borders.css -o borders.css",
111 @@ -41,7 +42,6 @@
112 "lib:sizes": "postcss src/props.sizes.css -o sizes.css",
113 "lib:supports": "postcss src/props.supports.css -o supports.css",
114 "lib:zindex": "postcss src/props.zindex.css -o zindex.css",
115- "lib:reset": "postcss src/extra/reset.css -o reset.css",
116 "lib:colors": "postcss src/props.colors.css -o colors.css",
117 "lib:colors:gray": "postcss src/props.gray.css -o gray.css",
118 "lib:colors:red": "postcss src/props.red.css -o red.css",
119 diff --git a/reset.css b/reset.css
120deleted file mode 100644
121index ae3e74c..0000000
122--- a/reset.css
123+++ /dev/null
124 @@ -1 +0,0 @@
125- :where(html){--brand:var(--pink-6);--link:var(--indigo-7);--link-visited:var(--grape-7);--text-1:var(--gray-9);--text-2:var(--gray-8);--surface-1:var(--gray-0);--surface-2:var(--gray-2);--surface-3:var(--gray-3);--surface-4:var(--gray-4);accent-color:var(--brand);background-color:var(--surface-1);block-size:100%;color:var(--text-2);color-scheme:light;font-family:var(--font-sans);line-height:var(--font-lineheight-3);scrollbar-color:var(--brand) Canvas}@media (dynamic-range:high){:where(html){--link:color(display-p3 0 .5 1);--link-visited:color(display-p3 .6 .2 1)}}@media (prefers-color-scheme:dark){:where(html){--brand:var(--pink-4);--link:var(--indigo-3);--link-visited:var(--grape-3);--text-1:var(--gray-1);--text-2:var(--gray-2);--surface-1:var(--gray-9);--surface-2:var(--gray-8);--surface-3:var(--gray-7);--surface-4:var(--gray-6);color-scheme:dark}}:where(h1,h2,h3,h4,h5,h6,dt){color:var(--text-1)}:where(a[href]){color:var(--link)}:where(a[href]):visited{color:var(--link-visited)}:focus-visible{outline-color:var(--brand)}*,:after,:before{box-sizing:border-box}*{background-origin:border-box;background-repeat:no-repeat;margin:0}:where(:not(fieldset)){border-style:solid;border-width:0}@media (prefers-reduced-motion:no-preference){:where(html){scroll-behavior:smooth}}@media (prefers-reduced-motion:no-preference){:focus-visible{outline-offset:5px;transition:outline-offset .25s var(--ease-2)}}:where(body){scrollbar-gutter:stable both-edges;min-block-size:100%}:where(h1,h2,h3,h4,h5,h6){font-weight:var(--font-weight-9);line-height:var(--font-relative-lineheight-2)}:where(h1){font-size:var(--font-size-8);max-inline-size:var(--size-header-1)}:where(h2){font-size:var(--font-size-6);max-inline-size:var(--size-header-2)}:where(h3){font-size:var(--font-size-5)}:where(h4){font-size:var(--font-size-4)}:where(h5){font-size:var(--font-size-3)}:where(h3,h4,h5,h6,dt){max-inline-size:var(--size-header-3)}:where(p,ul,ol,dl,h6){font-size:var(--font-size-2)}:where(a,u,ins,abbr){text-underline-offset:1px}:where(a[href],area,button,input,label[for],select,summary,textarea,[tabindex]){cursor:pointer;touch-action:manipulation}:where(a){margin-block:calc(var(--size-1)*-1);margin-inline:calc(var(--size-1)*-1);padding-block:var(--size-1);padding-inline:var(--size-1)}:where(a):where([href]){text-decoration-color:var(--text-1)}:where(a):where(:not(:hover)){text-decoration:inherit}:where(button){-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;user-select:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block;vertical-align:middle}:where(img,svg,video){block-size:auto;max-inline-size:100%}:where(input,button,textarea,select){color:inherit;font:inherit;font-size:inherit;letter-spacing:inherit}:where(input){padding-block:var(--size-1);padding-inline:var(--size-2)}:where(select){padding-block:var(--size-1);padding-inline:var(--size-2)}:where(textarea){resize:block}:where(input[type=checkbox],input[type=radio]){block-size:var(--size-3);inline-size:var(--size-3)}:where(svg){stroke:none;fill:currentColor}:where(svg):where(:not([fill])){stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round}:where(svg):where(:not([width])){inline-size:var(--size-10)}:where(code,kbd,samp,pre){font-family:var(--font-mono)}:where(:not(pre)>code,kbd){white-space:nowrap}:where(pre){max-inline-size:max-content;min-inline-size:0;white-space:pre}:where(:not(pre)>code){background:var(--surface-2);border-radius:var(--radius-2);padding:var(--size-1) var(--size-2)}:where(kbd,var){border-color:var(--surface-4);border-radius:var(--radius-2);border-width:var(--border-size-1);padding:var(--size-1) var(--size-2)}:where(mark){border-radius:var(--radius-2);padding-inline:var(--size-1)}:where(ol,ul){padding-inline-start:var(--size-8)}:where(li){padding-inline-start:var(--size-2)}:where(li,dd,figcaption){max-inline-size:var(--size-content-2)}:where(p){max-inline-size:var(--size-content-3)}:where(dt,summary){font-weight:var(--font-weight-7)}:where(dt:not(:first-of-type)){margin-block-start:var(--size-5)}:where(small){font-size:max(.5em,var(--font-size-0));max-inline-size:var(--size-content-1)}:where(hr){background-color:var(--surface-3);height:var(--border-size-2);margin-block:var(--size-fluid-5)}:where(figure){display:grid;gap:var(--size-2);place-items:center}:where(figure)>:where(figcaption){font-size:var(--font-size-1)}:where(blockquote,:not>cite){border-inline-start-width:var(--border-size-3)}:where(blockquote){display:grid;gap:var(--size-3);max-inline-size:var(--size-content-2);padding-block:var(--size-3);padding-inline:var(--size-4)}:where(:not(blockquote)>cite){padding-inline-start:var(--size-2)}:where(summary){background:var(--surface-3);border-radius:var(--radius-2);margin:calc(var(--size-2)*-1) calc(var(--size-3)*-1);padding:var(--size-2) var(--size-3)}:where(details){background:var(--surface-2);border-radius:var(--radius-2);padding-block:var(--size-2);padding-inline:var(--size-3)}:where(details[open]>summary){border-end-end-radius:0;border-end-start-radius:0;margin-bottom:var(--size-2)}:where(fieldset){border-radius:var(--radius-2)}:where(del){background:var(--red-9);color:var(--red-2)}:where(ins){background:var(--green-9);color:var(--green-1)}:where(abbr){text-decoration-color:var(--blue-5)}
126\ No newline at end of file
127 diff --git a/src/extra/normalize.css b/src/extra/normalize.css
128new file mode 100644
129index 0000000..107f122
130--- /dev/null
131+++ b/src/extra/normalize.css
132 @@ -0,0 +1,259 @@
133+ @import "brand.css";
134+
135+ *, ::before, ::after { box-sizing: border-box; }
136+
137+ * {
138+ background-origin: border-box;
139+ background-repeat: no-repeat;
140+ margin: 0;
141+
142+ &:where(:not(fieldset)) {
143+ border-width: 0;
144+ border-style: solid;
145+ }
146+ }
147+
148+ :where(html) {
149+ block-size: 100%;
150+ font-family: var(--font-sans);
151+ line-height: var(--font-lineheight-3);
152+
153+ @media (--motionOK) {
154+ scroll-behavior: smooth;
155+ }
156+ }
157+
158+ @media (--motionOK) {
159+ :focus-visible {
160+ transition: outline-offset .25s var(--ease-2);
161+ outline-offset: 5px;
162+ }
163+ }
164+
165+ :where(body) {
166+ min-block-size: 100%;
167+ scrollbar-gutter: stable both-edges;
168+ }
169+
170+ :where(h1, h2, h3, h4, h5, h6) {
171+ line-height: var(--font-relative-lineheight-2);
172+ font-weight: var(--font-weight-9);
173+ }
174+
175+ :where(h1) {
176+ font-size: var(--font-size-8);
177+ max-inline-size: var(--size-header-1);
178+ }
179+
180+ :where(h2) {
181+ font-size: var(--font-size-6);
182+ max-inline-size: var(--size-header-2);
183+ }
184+
185+ :where(h3) { font-size: var(--font-size-5) }
186+ :where(h4) { font-size: var(--font-size-4) }
187+ :where(h5) { font-size: var(--font-size-3) }
188+
189+ :where(h3, h4, h5, h6, dt) {
190+ max-inline-size: var(--size-header-3);
191+ }
192+
193+ :where(p, ul, ol, dl, h6) {
194+ font-size: var(--font-size-2);
195+ }
196+
197+ :where(a, u, ins, abbr) {
198+ text-underline-offset: 1px;
199+ }
200+
201+ :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]) {
202+ cursor: pointer;
203+ touch-action: manipulation;
204+ }
205+
206+ :where(a) {
207+ padding-inline: var(--size-1);
208+ margin-inline: calc(var(--size-1) * -1);
209+ padding-block: var(--size-1);
210+ margin-block: calc(var(--size-1) * -1);
211+
212+ &:where([href]) {
213+ text-decoration-color: var(--indigo-2);
214+
215+ &:where(:visited) {
216+ text-decoration-color: var(--grape-2);
217+ }
218+ }
219+
220+ &:where(:not(:hover)) {
221+ text-decoration: inherit;
222+ }
223+ }
224+
225+ :where(button) {
226+ user-select: none;
227+ -webkit-tap-highlight-color: transparent;
228+ -webkit-touch-callout: none;
229+ }
230+
231+ :where(img, svg, video, canvas, audio, iframe, embed, object) {
232+ display: block;
233+ vertical-align: middle;
234+ }
235+
236+ :where(img, svg, video) {
237+ max-inline-size: 100%;
238+ block-size: auto;
239+ }
240+
241+ :where(input, button, textarea, select) {
242+ font: inherit;
243+ font-size: inherit;
244+ color: inherit;
245+ letter-spacing: inherit;
246+ }
247+
248+ :where(input) {
249+ padding-inline: var(--size-2);
250+ padding-block: var(--size-1);
251+ }
252+
253+ :where(select) {
254+ padding-inline: var(--size-2);
255+ padding-block: var(--size-1);
256+ }
257+
258+ :where(textarea) { resize: block }
259+
260+ :where(input[type="checkbox"], input[type="radio"]) {
261+ block-size: var(--size-3);
262+ inline-size: var(--size-3);
263+ }
264+
265+ :where(svg) {
266+ stroke: none;
267+ fill: currentColor;
268+
269+ &:where(:not([fill])) {
270+ stroke: currentColor;
271+ fill: none;
272+ stroke-linecap: round;
273+ stroke-linejoin: round;
274+ }
275+
276+ &:where(:not([width])) {
277+ inline-size: var(--size-10);
278+ }
279+ }
280+
281+ :where(code, kbd, samp, pre) { font-family: var(--font-mono) }
282+ :where(:not(pre) > code, kbd) { white-space: nowrap }
283+
284+ :where(pre) {
285+ white-space: pre;
286+ min-inline-size: 0;
287+ max-inline-size: max-content;
288+ }
289+
290+ :where(:not(pre) > code) {
291+ padding: var(--size-1) var(--size-2);
292+ background: var(--surface-2);
293+ border-radius: var(--radius-2);
294+ }
295+
296+ :where(kbd, var) {
297+ padding: var(--size-1) var(--size-2);
298+ border-width: var(--border-size-1);
299+ border-color: var(--surface-4);
300+ border-radius: var(--radius-2);
301+ }
302+
303+ :where(mark) {
304+ border-radius: var(--radius-2);
305+ padding-inline: var(--size-1);
306+ }
307+
308+ :where(ol, ul) { padding-inline-start: var(--size-8) }
309+ :where(li) { padding-inline-start: var(--size-2) }
310+ :where(li, dd, figcaption) { max-inline-size: var(--size-content-2) }
311+ :where(p) { max-inline-size: var(--size-content-3) }
312+ :where(dt, summary) { font-weight: var(--font-weight-7) }
313+
314+ :where(dt:not(:first-of-type)) {
315+ margin-block-start: var(--size-5);
316+ }
317+
318+ :where(small) {
319+ font-size: max(.5em, var(--font-size-0));
320+ max-inline-size: var(--size-content-1);
321+ }
322+
323+ :where(hr) {
324+ margin-block: var(--size-fluid-5);
325+ height: var(--border-size-2);
326+ background-color: var(--surface-3);
327+ }
328+
329+ :where(figure) {
330+ display: grid;
331+ gap: var(--size-2);
332+ place-items: center;
333+
334+ & > :where(figcaption) {
335+ font-size: var(--font-size-1);
336+ }
337+ }
338+
339+ :where(blockquote, :not(blockquote) > cite) {
340+ border-inline-start-width: var(--border-size-3);
341+ }
342+
343+ :where(blockquote) {
344+ display: grid;
345+ gap: var(--size-3);
346+ padding-block: var(--size-3);
347+ padding-inline: var(--size-4);
348+ max-inline-size: var(--size-content-2);
349+ }
350+
351+ :where(:not(blockquote) > cite) {
352+ padding-inline-start: var(--size-2);
353+ }
354+
355+ :where(summary) {
356+ background: var(--surface-3);
357+ padding: var(--size-2) var(--size-3);
358+ margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1);
359+ border-radius: var(--radius-2);
360+ }
361+
362+ :where(details) {
363+ padding-inline: var(--size-3);
364+ padding-block: var(--size-2);
365+ background: var(--surface-2);
366+ border-radius: var(--radius-2);
367+ }
368+
369+ :where(details[open] > summary) {
370+ margin-bottom: var(--size-2);
371+ border-end-start-radius: 0;
372+ border-end-end-radius: 0;
373+ }
374+
375+ :where(fieldset) {
376+ border-radius: var(--radius-2);
377+ }
378+
379+ :where(del) {
380+ background: var(--red-9);
381+ color: var(--red-2);
382+ }
383+
384+ :where(ins) {
385+ background: var(--green-9);
386+ color: var(--green-1);
387+ }
388+
389+ :where(abbr) {
390+ text-decoration-color: var(--blue-5);
391+ }
392 diff --git a/src/extra/reset.css b/src/extra/reset.css
393deleted file mode 100644
394index 107f122..0000000
395--- a/src/extra/reset.css
396+++ /dev/null
397 @@ -1,259 +0,0 @@
398- @import "brand.css";
399-
400- *, ::before, ::after { box-sizing: border-box; }
401-
402- * {
403- background-origin: border-box;
404- background-repeat: no-repeat;
405- margin: 0;
406-
407- &:where(:not(fieldset)) {
408- border-width: 0;
409- border-style: solid;
410- }
411- }
412-
413- :where(html) {
414- block-size: 100%;
415- font-family: var(--font-sans);
416- line-height: var(--font-lineheight-3);
417-
418- @media (--motionOK) {
419- scroll-behavior: smooth;
420- }
421- }
422-
423- @media (--motionOK) {
424- :focus-visible {
425- transition: outline-offset .25s var(--ease-2);
426- outline-offset: 5px;
427- }
428- }
429-
430- :where(body) {
431- min-block-size: 100%;
432- scrollbar-gutter: stable both-edges;
433- }
434-
435- :where(h1, h2, h3, h4, h5, h6) {
436- line-height: var(--font-relative-lineheight-2);
437- font-weight: var(--font-weight-9);
438- }
439-
440- :where(h1) {
441- font-size: var(--font-size-8);
442- max-inline-size: var(--size-header-1);
443- }
444-
445- :where(h2) {
446- font-size: var(--font-size-6);
447- max-inline-size: var(--size-header-2);
448- }
449-
450- :where(h3) { font-size: var(--font-size-5) }
451- :where(h4) { font-size: var(--font-size-4) }
452- :where(h5) { font-size: var(--font-size-3) }
453-
454- :where(h3, h4, h5, h6, dt) {
455- max-inline-size: var(--size-header-3);
456- }
457-
458- :where(p, ul, ol, dl, h6) {
459- font-size: var(--font-size-2);
460- }
461-
462- :where(a, u, ins, abbr) {
463- text-underline-offset: 1px;
464- }
465-
466- :where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]) {
467- cursor: pointer;
468- touch-action: manipulation;
469- }
470-
471- :where(a) {
472- padding-inline: var(--size-1);
473- margin-inline: calc(var(--size-1) * -1);
474- padding-block: var(--size-1);
475- margin-block: calc(var(--size-1) * -1);
476-
477- &:where([href]) {
478- text-decoration-color: var(--indigo-2);
479-
480- &:where(:visited) {
481- text-decoration-color: var(--grape-2);
482- }
483- }
484-
485- &:where(:not(:hover)) {
486- text-decoration: inherit;
487- }
488- }
489-
490- :where(button) {
491- user-select: none;
492- -webkit-tap-highlight-color: transparent;
493- -webkit-touch-callout: none;
494- }
495-
496- :where(img, svg, video, canvas, audio, iframe, embed, object) {
497- display: block;
498- vertical-align: middle;
499- }
500-
501- :where(img, svg, video) {
502- max-inline-size: 100%;
503- block-size: auto;
504- }
505-
506- :where(input, button, textarea, select) {
507- font: inherit;
508- font-size: inherit;
509- color: inherit;
510- letter-spacing: inherit;
511- }
512-
513- :where(input) {
514- padding-inline: var(--size-2);
515- padding-block: var(--size-1);
516- }
517-
518- :where(select) {
519- padding-inline: var(--size-2);
520- padding-block: var(--size-1);
521- }
522-
523- :where(textarea) { resize: block }
524-
525- :where(input[type="checkbox"], input[type="radio"]) {
526- block-size: var(--size-3);
527- inline-size: var(--size-3);
528- }
529-
530- :where(svg) {
531- stroke: none;
532- fill: currentColor;
533-
534- &:where(:not([fill])) {
535- stroke: currentColor;
536- fill: none;
537- stroke-linecap: round;
538- stroke-linejoin: round;
539- }
540-
541- &:where(:not([width])) {
542- inline-size: var(--size-10);
543- }
544- }
545-
546- :where(code, kbd, samp, pre) { font-family: var(--font-mono) }
547- :where(:not(pre) > code, kbd) { white-space: nowrap }
548-
549- :where(pre) {
550- white-space: pre;
551- min-inline-size: 0;
552- max-inline-size: max-content;
553- }
554-
555- :where(:not(pre) > code) {
556- padding: var(--size-1) var(--size-2);
557- background: var(--surface-2);
558- border-radius: var(--radius-2);
559- }
560-
561- :where(kbd, var) {
562- padding: var(--size-1) var(--size-2);
563- border-width: var(--border-size-1);
564- border-color: var(--surface-4);
565- border-radius: var(--radius-2);
566- }
567-
568- :where(mark) {
569- border-radius: var(--radius-2);
570- padding-inline: var(--size-1);
571- }
572-
573- :where(ol, ul) { padding-inline-start: var(--size-8) }
574- :where(li) { padding-inline-start: var(--size-2) }
575- :where(li, dd, figcaption) { max-inline-size: var(--size-content-2) }
576- :where(p) { max-inline-size: var(--size-content-3) }
577- :where(dt, summary) { font-weight: var(--font-weight-7) }
578-
579- :where(dt:not(:first-of-type)) {
580- margin-block-start: var(--size-5);
581- }
582-
583- :where(small) {
584- font-size: max(.5em, var(--font-size-0));
585- max-inline-size: var(--size-content-1);
586- }
587-
588- :where(hr) {
589- margin-block: var(--size-fluid-5);
590- height: var(--border-size-2);
591- background-color: var(--surface-3);
592- }
593-
594- :where(figure) {
595- display: grid;
596- gap: var(--size-2);
597- place-items: center;
598-
599- & > :where(figcaption) {
600- font-size: var(--font-size-1);
601- }
602- }
603-
604- :where(blockquote, :not(blockquote) > cite) {
605- border-inline-start-width: var(--border-size-3);
606- }
607-
608- :where(blockquote) {
609- display: grid;
610- gap: var(--size-3);
611- padding-block: var(--size-3);
612- padding-inline: var(--size-4);
613- max-inline-size: var(--size-content-2);
614- }
615-
616- :where(:not(blockquote) > cite) {
617- padding-inline-start: var(--size-2);
618- }
619-
620- :where(summary) {
621- background: var(--surface-3);
622- padding: var(--size-2) var(--size-3);
623- margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1);
624- border-radius: var(--radius-2);
625- }
626-
627- :where(details) {
628- padding-inline: var(--size-3);
629- padding-block: var(--size-2);
630- background: var(--surface-2);
631- border-radius: var(--radius-2);
632- }
633-
634- :where(details[open] > summary) {
635- margin-bottom: var(--size-2);
636- border-end-start-radius: 0;
637- border-end-end-radius: 0;
638- }
639-
640- :where(fieldset) {
641- border-radius: var(--radius-2);
642- }
643-
644- :where(del) {
645- background: var(--red-9);
646- color: var(--red-2);
647- }
648-
649- :where(ins) {
650- background: var(--green-9);
651- color: var(--green-1);
652- }
653-
654- :where(abbr) {
655- text-decoration-color: var(--blue-5);
656- }
657 diff --git a/test/index.html b/test/index.html
658index 2a40239..1e4ccbb 100644
659--- a/test/index.html
660+++ b/test/index.html
661 @@ -3,7 +3,7 @@
662 <meta name="viewport" content="width=device-width, initial-scale=1.0">
663 <title>HTML5 Test Page</title>
664 <link rel="stylesheet" href="../props.css">
665- <link rel="stylesheet" href="../reset.css">
666+ <link rel="stylesheet" href="../normalize.css">
667 </head>
668 <body>
669 <div id="top" class="page" role="document">