From 28ce8412eaa38dd8c129b38c9505c3eca4f71219 Mon Sep 17 00:00:00 2001 From: Adam Argyle Date: Thu, 27 Oct 2022 21:00:50 -0700 Subject: [PATCH] normalize light and dark imports (#285) * adds new exports * adds light and dark normalize src files * removes stray prop * adds a normalize build file test * adds postcss build commands * fixes export alias * fixes bugs in output * adds defenses against competing themes, adds data attribute versions * more defense * updates light theme hd colors to latest * fixes normalize cascade issues * fixes shadows when flipping preference * use :where() in switch files too * update docsite a little * adds 2 more ways to toggle the theme * use the new switch imports --- docsite/index.css | 43 +---- docsite/index.html | 4 +- package.json | 10 + src/extra/brand.css | 28 ++- src/extra/normalize.css | 304 +------------------------------ src/extra/normalize.dark.css | 8 + src/extra/normalize.light.css | 8 + src/extra/normalize.src.css | 303 ++++++++++++++++++++++++++++++ src/extra/theme.css | 31 ++-- src/extra/theme.dark.css | 52 ++++-- src/extra/theme.dark.switch.css | 54 ++++++ src/extra/theme.light.css | 27 +++ src/extra/theme.light.switch.css | 54 ++++++ test/basic.test.cjs | 6 + 14 files changed, 551 insertions(+), 381 deletions(-) create mode 100644 src/extra/normalize.dark.css create mode 100644 src/extra/normalize.light.css create mode 100644 src/extra/normalize.src.css create mode 100644 src/extra/theme.dark.switch.css create mode 100644 src/extra/theme.light.switch.css diff --git a/docsite/index.css b/docsite/index.css index df86b7b4..2495a885 100644 --- a/docsite/index.css +++ b/docsite/index.css @@ -1,5 +1,7 @@ @import "../src/index.css"; @import "../src/extra/normalize.css"; +@import "../src/extra/theme.light.switch.css"; +@import "../src/extra/theme.dark.switch.css"; @import "../src/props.gray-hsl.css"; @import "../src/props.masks.edges.css"; @import "../src/props.masks.corner-cuts.css"; @@ -1390,54 +1392,13 @@ input[type="range"] { /* no way out of this duplication afaik */ [data-theme="light"] { - color-scheme: light; - - --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); - --nav-icon: var(--gray-7); --nav-icon-hover: var(--gray-9); - - --shadow-color: 220 3% 15%; - --shadow-strength: 1%; - - @media (--HDcolor) { - --link: color(display-p3 0 .5 1); - --link-visited: color(display-p3 .6 .2 1); - } } [data-theme="dark"] { - color-scheme: dark; - - --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); - --nav-icon: var(--gray-5); --nav-icon-hover: var(--gray-2); - - --shadow-strength: 10%; - --shadow-color: 220 40% 2%; } .theme-toggle { diff --git a/docsite/index.html b/docsite/index.html index 92c9c2b5..0310c5d9 100644 --- a/docsite/index.html +++ b/docsite/index.html @@ -365,13 +365,13 @@

File Sizes

- brand.css + normalize.light.css
- theme.css + normalize.dark.css
diff --git a/package.json b/package.json index a271b736..e0e32548 100644 --- a/package.json +++ b/package.json @@ -42,7 +42,13 @@ "./style": "./open-props.min.css", "./postcss/style": "./src/index.css", "./normalize": "./normalize.min.css", + "./normalize/light": "./normalize.light.min.css", + "./normalize/dark": "./normalize.dark.min.css", + "./switch/light": "./theme.light.switch.min.css", + "./switch/dark": "./theme.dark.switch.min.css", "./postcss/normalize": "./src/extra/normalize.css", + "./postcss/normalize/light": "./src/extra/normalize.light.css", + "./postcss/normalize/dark": "./src/extra/normalize.dark.css", "./buttons": "./buttons.min.css", "./postcss/buttons": "./src/extra/buttons.css", "./animations": "./animations.min.css", @@ -150,6 +156,10 @@ "module:js": "npm run bundle:pre-edit && microbundle --no-sourcemap && npm run bundle:post-edit", "lib:all": "postcss src/index.css -o open-props.min.css", "lib:normalize": "postcss src/extra/normalize.css -o normalize.min.css && node ./build/extras.js", + "lib:normalize:light": "postcss src/extra/normalize.light.css -o normalize.light.min.css", + "lib:normalize:dark": "postcss src/extra/normalize.dark.css -o normalize.dark.min.css", + "lib:switch:light": "postcss src/extra/theme.light.switch.css -o theme.light.switch.min.css", + "lib:switch:dark": "postcss src/extra/theme.dark.switch.css -o theme.dark.switch.min.css", "lib:buttons": "postcss src/extra/buttons.css -o buttons.min.css", "lib:animations": "postcss src/props.animations.css -o animations.min.css", "lib:aspects": "postcss src/props.aspects.css -o aspects.min.css", diff --git a/src/extra/brand.css b/src/extra/brand.css index 29639c83..2d9ace69 100644 --- a/src/extra/brand.css +++ b/src/extra/brand.css @@ -1,13 +1,25 @@ -@import "theme.css"; - :where(html) { - --scrollthumb-color: var(--gray-6); - + /* --brand: your-brand-color-here; */ + scrollbar-color: var(--scrollthumb-color) transparent; - accent-color: var(--link); - caret-color: var(--link); + accent-color: var(--brand, var(--link)); + caret-color: var(--brand, var(--link)); + color: var(--text-2); + background-color: var(--surface-1); +} - @media (--OSlight) { - --scrollthumb-color: var(--gray-7); +:where(h1, h2, h3, h4, h5, h6, dt) { + color: var(--text-1); +} + +:where(a[href]) { + color: var(--brand, var(--link)); + + &:visited { + color: var(--link-visited); } } + +:focus-visible { + outline-color: var(--brand, var(--link)); +} diff --git a/src/extra/normalize.css b/src/extra/normalize.css index 6e36e1a9..3dee5f2f 100644 --- a/src/extra/normalize.css +++ b/src/extra/normalize.css @@ -1,303 +1,3 @@ +@import "theme.css"; @import "brand.css"; - -*, ::before, ::after { box-sizing: border-box; } - -:where(:not(dialog)) { - margin: 0; -} - -:where(:not(fieldset, progress, meter)) { - border-width: 0; - border-style: solid; - background-origin: border-box; - background-repeat: no-repeat; -} - -:where(html) { - block-size: 100%; - font-family: var(--font-sans); - line-height: var(--font-lineheight-3); - -webkit-text-size-adjust: none; /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */ - - @media (--motionOK) { - scroll-behavior: smooth; - } -} - -@media (--motionOK) { - :where(:focus-visible) { - transition: outline-offset 145ms var(--ease-2); - } - :where(:not(:active):focus-visible) { - transition-duration: .25s; - } -} - -:where(:not(:active):focus-visible) { - outline-offset: 5px; -} - -:where(body) { - min-block-size: 100%; -} - -:where(h1, h2, h3, h4, h5, h6) { - line-height: var(--font-lineheight-1); - font-weight: var(--font-weight-9); -} - -: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; - - @supports (-moz-appearance: none) { - text-underline-offset: 2px; - } -} - -:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) { - cursor: pointer; - touch-action: manipulation; - -webkit-tap-highlight-color: transparent; -} - -:where(a) { - padding-inline: var(--size-1); - margin-inline: calc(var(--size-1) * -1); - padding-block: var(--size-1); - margin-block: calc(var(--size-1) * -1); - - &:where([href]) { - text-decoration-color: var(--indigo-2); - - &:where(:visited) { - text-decoration-color: var(--grape-2); - } - } - - &:where(:not(:hover)) { - text-decoration: inherit; - } -} - -:where(img, svg, video, canvas, audio, iframe, embed, object) { - display: block; -} - -:where(img, svg, video) { - max-inline-size: 100%; - block-size: auto; -} - -:where(input, button, textarea, select), -:where(input[type="file"])::-webkit-file-upload-button { - font: inherit; - font-size: inherit; - color: inherit; - letter-spacing: inherit; -} - -:where(input, textarea) { - padding-inline: var(--size-2); - padding-block: var(--size-1); -} - -:where(select) { - padding-inline: 1.25ch 0; - padding-block: .75ch; -} - -:where(textarea, select, input:not(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])) { - background-color: var(--surface-2); - border-radius: var(--radius-2); - - @media (--OSdark) { - background-color: hsl(210deg 11% 10%); - } -} - -: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(:not([fill])) { - stroke: currentColor; - fill: none; - stroke-linecap: round; - stroke-linejoin: round; - } - - &: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) { - white-space: pre; - min-inline-size: 0; - max-inline-size: max-content; -} - -:where(:not(pre) > code) { - padding: var(--size-1) var(--size-2); - background: var(--surface-2); - border-radius: var(--radius-2); -} - -:where(kbd, var) { - padding: var(--size-1) var(--size-2); - border-width: var(--border-size-1); - border-color: var(--surface-4); - border-radius: var(--radius-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) { - margin-block: var(--size-fluid-5); - height: var(--border-size-2); - background-color: var(--surface-3); -} - -:where(figure) { - display: grid; - gap: var(--size-2); - place-items: center; - - & > :where(figcaption) { - font-size: var(--font-size-1); - } -} - -:where(blockquote, :not(blockquote) > cite) { - border-inline-start-width: var(--border-size-3); -} - -:where(blockquote) { - display: grid; - gap: var(--size-3); - padding-block: var(--size-3); - padding-inline: var(--size-4); - max-inline-size: var(--size-content-2); -} - -:where(:not(blockquote) > cite) { - padding-inline-start: var(--size-2); -} - -:where(summary) { - background: var(--surface-3); - padding: var(--size-2) var(--size-3); - margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1); - border-radius: var(--radius-2); -} - -:where(details) { - padding-inline: var(--size-3); - padding-block: var(--size-2); - background: var(--surface-2); - border-radius: var(--radius-2); -} - -:where(details[open] > summary) { - margin-bottom: var(--size-2); - border-end-start-radius: 0; - border-end-end-radius: 0; -} - -:where(fieldset) { - border-radius: var(--radius-2); - border: var(--border-size-1) solid var(--surface-4); -} - -: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); -} - -:where(dialog) { - background-color: var(--surface-1); - color: inherit; - border-radius: var(--radius-3); - box-shadow: var(--shadow-6); - - @media (--OSdark) { - background-color: var(--surface-2); - } - - &::backdrop { - backdrop-filter: blur(25px); - } -} - -:where(html:has(dialog[open])) { - overflow: hidden; -} - -:where(menu) { - padding-inline-start: 0; - display: flex; - gap: var(--size-3); -} - -:where(sup) { - font-size: .5em; -} +@import "normalize.src.css"; \ No newline at end of file diff --git a/src/extra/normalize.dark.css b/src/extra/normalize.dark.css new file mode 100644 index 00000000..7b4174b7 --- /dev/null +++ b/src/extra/normalize.dark.css @@ -0,0 +1,8 @@ +@import "theme.dark.css"; +@import "brand.css"; +@import "normalize.src.css"; + +:where(html) { + --shadow-strength: 10%; + --shadow-color: 220 40% 2%; +} \ No newline at end of file diff --git a/src/extra/normalize.light.css b/src/extra/normalize.light.css new file mode 100644 index 00000000..3c467950 --- /dev/null +++ b/src/extra/normalize.light.css @@ -0,0 +1,8 @@ +@import "theme.light.css"; +@import "brand.css"; +@import "normalize.src.css"; + +:where(html) { + --shadow-color: 220 3% 15%; + --shadow-strength: 1%; +} \ No newline at end of file diff --git a/src/extra/normalize.src.css b/src/extra/normalize.src.css new file mode 100644 index 00000000..f60970b0 --- /dev/null +++ b/src/extra/normalize.src.css @@ -0,0 +1,303 @@ +@import "../props.media.css"; + +*, ::before, ::after { box-sizing: border-box; } + +:where(:not(dialog)) { + margin: 0; +} + +:where(:not(fieldset, progress, meter)) { + border-width: 0; + border-style: solid; + background-origin: border-box; + background-repeat: no-repeat; +} + +:where(html) { + block-size: 100%; + font-family: var(--font-sans); + line-height: var(--font-lineheight-3); + -webkit-text-size-adjust: none; /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */ + + @media (--motionOK) { + scroll-behavior: smooth; + } +} + +@media (--motionOK) { + :where(:focus-visible) { + transition: outline-offset 145ms var(--ease-2); + } + :where(:not(:active):focus-visible) { + transition-duration: .25s; + } +} + +:where(:not(:active):focus-visible) { + outline-offset: 5px; +} + +:where(body) { + min-block-size: 100%; +} + +:where(h1, h2, h3, h4, h5, h6) { + line-height: var(--font-lineheight-1); + font-weight: var(--font-weight-9); +} + +: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; + + @supports (-moz-appearance: none) { + text-underline-offset: 2px; + } +} + +:where(a[href], area, button, input, label[for], select, summary, textarea, [tabindex]:not([tabindex*="-"])) { + cursor: pointer; + touch-action: manipulation; + -webkit-tap-highlight-color: transparent; +} + +:where(a) { + padding-inline: var(--size-1); + margin-inline: calc(var(--size-1) * -1); + padding-block: var(--size-1); + margin-block: calc(var(--size-1) * -1); + + &:where([href]) { + text-decoration-color: var(--indigo-2); + + &:where(:visited) { + text-decoration-color: var(--grape-2); + } + } + + &:where(:not(:hover)) { + text-decoration: inherit; + } +} + +:where(img, svg, video, canvas, audio, iframe, embed, object) { + display: block; +} + +:where(img, svg, video) { + max-inline-size: 100%; + block-size: auto; +} + +:where(input, button, textarea, select), +:where(input[type="file"])::-webkit-file-upload-button { + font: inherit; + font-size: inherit; + color: inherit; + letter-spacing: inherit; +} + +:where(input, textarea) { + padding-inline: var(--size-2); + padding-block: var(--size-1); +} + +:where(select) { + padding-inline: 1.25ch 0; + padding-block: .75ch; +} + +:where(textarea, select, input:not(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])) { + background-color: var(--surface-2); + border-radius: var(--radius-2); + + @media (--OSdark) { + background-color: hsl(210deg 11% 10%); + } +} + +: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(:not([fill])) { + stroke: currentColor; + fill: none; + stroke-linecap: round; + stroke-linejoin: round; + } + + &: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) { + white-space: pre; + min-inline-size: 0; + max-inline-size: max-content; +} + +:where(:not(pre) > code) { + padding: var(--size-1) var(--size-2); + background: var(--surface-2); + border-radius: var(--radius-2); +} + +:where(kbd, var) { + padding: var(--size-1) var(--size-2); + border-width: var(--border-size-1); + border-color: var(--surface-4); + border-radius: var(--radius-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) { + margin-block: var(--size-fluid-5); + height: var(--border-size-2); + background-color: var(--surface-3); +} + +:where(figure) { + display: grid; + gap: var(--size-2); + place-items: center; + + & > :where(figcaption) { + font-size: var(--font-size-1); + } +} + +:where(blockquote, :not(blockquote) > cite) { + border-inline-start-width: var(--border-size-3); +} + +:where(blockquote) { + display: grid; + gap: var(--size-3); + padding-block: var(--size-3); + padding-inline: var(--size-4); + max-inline-size: var(--size-content-2); +} + +:where(:not(blockquote) > cite) { + padding-inline-start: var(--size-2); +} + +:where(summary) { + background: var(--surface-3); + padding: var(--size-2) var(--size-3); + margin: calc(var(--size-2) * -1) calc(var(--size-3) * -1); + border-radius: var(--radius-2); +} + +:where(details) { + padding-inline: var(--size-3); + padding-block: var(--size-2); + background: var(--surface-2); + border-radius: var(--radius-2); +} + +:where(details[open] > summary) { + margin-bottom: var(--size-2); + border-end-start-radius: 0; + border-end-end-radius: 0; +} + +:where(fieldset) { + border-radius: var(--radius-2); + border: var(--border-size-1) solid var(--surface-4); +} + +: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); +} + +:where(dialog) { + background-color: var(--surface-1); + color: inherit; + border-radius: var(--radius-3); + box-shadow: var(--shadow-6); + + @media (--OSdark) { + background-color: var(--surface-2); + } + + &::backdrop { + backdrop-filter: blur(25px); + } +} + +:where(html:has(dialog[open])) { + overflow: hidden; +} + +:where(menu) { + padding-inline-start: 0; + display: flex; + gap: var(--size-3); +} + +:where(sup) { + font-size: .5em; +} diff --git a/src/extra/theme.css b/src/extra/theme.css index 7a187eea..2657637c 100644 --- a/src/extra/theme.css +++ b/src/extra/theme.css @@ -1,24 +1,21 @@ @import "../props.media.css"; @import "theme.light.css"; -@import "theme.dark.css"; -:where(html) { - color: var(--text-2); - background-color: var(--surface-1); -} +@media (--OSdark) { + :where(html) { + color-scheme: dark; -:where(h1, h2, h3, h4, h5, h6, dt) { - color: var(--text-1); -} + --link: var(--indigo-3); + --link-visited: var(--grape-3); -:where(a[href]) { - color: var(--link); - - &:visited { - color: var(--link-visited); - } -} + --text-1: var(--gray-1); + --text-2: var(--gray-4); + + --surface-1: var(--gray-9); + --surface-2: var(--gray-8); + --surface-3: var(--gray-7); + --surface-4: var(--gray-6); -:focus-visible { - outline-color: var(--link); + --scrollthumb-color: var(--gray-6); + } } \ No newline at end of file diff --git a/src/extra/theme.dark.css b/src/extra/theme.dark.css index 2a155697..659fcf88 100644 --- a/src/extra/theme.dark.css +++ b/src/extra/theme.dark.css @@ -1,16 +1,46 @@ -@media (--OSdark) { - :where(html) { - color-scheme: dark; +:where(html) { + color-scheme: dark; - --link: var(--indigo-3); - --link-visited: var(--grape-3); + --link: var(--indigo-3); + --link-visited: var(--grape-3); - --text-1: var(--gray-1); - --text-2: var(--gray-4); + --text-1: var(--gray-1); + --text-2: var(--gray-4); - --surface-1: var(--gray-9); - --surface-2: var(--gray-8); - --surface-3: var(--gray-7); - --surface-4: var(--gray-6); + --surface-1: var(--gray-9); + --surface-2: var(--gray-8); + --surface-3: var(--gray-7); + --surface-4: var(--gray-6); + + --scrollthumb-color: var(--gray-6); + + & :where(dialog) { + background-color: var(--surface-2); + } + + & :where(button) { + --_highlight: var(--_highlight-dark); + --_bg: var(--_bg-dark); + --_ink-shadow: var(--_ink-shadow-dark); + + &:where([type="reset"]) { + --_text: var(--red-2); + --_border: var(--surface-3); + } + } + + & :where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])[disabled] { + --_text: var(--gray-5); + } + + & :where(textarea, select, input:not(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])) { + background-color: hsl(210deg 11% 10%); + } + + & :where([type="submit"]), + & :where(form button:not([type="button"])), + & :where([type="reset"]), + & :where([disabled]) { + --_bg: var(--surface-1); } } \ No newline at end of file diff --git a/src/extra/theme.dark.switch.css b/src/extra/theme.dark.switch.css new file mode 100644 index 00000000..907be1bb --- /dev/null +++ b/src/extra/theme.dark.switch.css @@ -0,0 +1,54 @@ +@import "../props.media.css"; + +:where( + [data-theme="dark"], + .dark, + .dark-theme +) { + color-scheme: dark; + + --link: var(--indigo-3); + --link-visited: var(--grape-3); + + --text-1: var(--gray-1); + --text-2: var(--gray-4); + + --surface-1: var(--gray-9); + --surface-2: var(--gray-8); + --surface-3: var(--gray-7); + --surface-4: var(--gray-6); + + --scrollthumb-color: var(--gray-6); + --shadow-strength: 10%; + --shadow-color: 220 40% 2%; + + & :where(dialog) { + background-color: var(--surface-2); + } + + & :where(button) { + --_highlight: var(--_highlight-dark); + --_bg: var(--_bg-dark); + --_ink-shadow: var(--_ink-shadow-dark); + + &:where([type="reset"]) { + --_text: var(--red-2); + --_border: var(--surface-3); + } + } + + & :where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])[disabled] { + --_text: var(--gray-5); + } + + & :where(textarea, select, input:not(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])) { + background-color: hsl(210deg 11% 10%); + } + + & :where([type="submit"]), + & :where(form button:not([type="button"])), + & :where([type="reset"]), + & :where([disabled]) { + --_bg: var(--surface-1); + } +} diff --git a/src/extra/theme.light.css b/src/extra/theme.light.css index 99c44480..2412c670 100644 --- a/src/extra/theme.light.css +++ b/src/extra/theme.light.css @@ -1,3 +1,5 @@ +@import "../props.media.css"; + :where(html) { color-scheme: light; @@ -12,10 +14,35 @@ --surface-3: var(--gray-3); --surface-4: var(--gray-4); + --scrollthumb-color: var(--gray-7); + @media (--HDcolor) { @supports (color(display-p3 0 0 0)) { --link: color(display-p3 .1 .4 1); --link-visited: color(display-p3 .6 .2 1); } } + + & :where(dialog) { + background-color: var(--surface-1); + } + + & :where(button) { + --_highlight: var(--_highlight-light); + --_bg: var(--_bg-light); + --_ink-shadow: var(--_ink-shadow-light); + + & :where([type="reset"]) { + --_text: var(--red-6); + --_border: var(--red-3); + } + } + + & :where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])[disabled] { + --_text: var(--gray-6); + } + + & :where(textarea, select, input:not(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])) { + background-color: var(--surface-2); + } } diff --git a/src/extra/theme.light.switch.css b/src/extra/theme.light.switch.css new file mode 100644 index 00000000..5fd2fb8a --- /dev/null +++ b/src/extra/theme.light.switch.css @@ -0,0 +1,54 @@ +@import "../props.media.css"; + +:where( + [data-theme="light"], + .light, + .light-theme +) { + color-scheme: light; + + --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); + + --scrollthumb-color: var(--gray-7); + --shadow-color: 220 3% 15%; + --shadow-strength: 1%; + + @media (--HDcolor) { + @supports (color(display-p3 0 0 0)) { + --link: color(display-p3 .1 .4 1); + --link-visited: color(display-p3 .6 .2 1); + } + } + + & :where(dialog) { + background-color: var(--surface-1); + } + + & :where(button) { + --_highlight: var(--_highlight-light); + --_bg: var(--_bg-light); + --_ink-shadow: var(--_ink-shadow-light); + + &:where([type="reset"]) { + --_text: var(--red-6); + --_border: var(--red-3); + } + } + + & :where(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])[disabled] { + --_text: var(--gray-6); + } + + & :where(textarea, select, input:not(button,button[type],input[type="button"],input[type="submit"],input[type="reset"])) { + background-color: var(--surface-2); + } +} diff --git a/test/basic.test.cjs b/test/basic.test.cjs index 9cbb06d1..f01d621f 100644 --- a/test/basic.test.cjs +++ b/test/basic.test.cjs @@ -42,6 +42,12 @@ test('Should produce shadow :host props', async t => { t.assert(fs.existsSync('./shadows.shadow.min.css')) }) +test('Should produce normalize files', async t => { + t.assert(fs.existsSync('./normalize.min.css')) + t.assert(fs.existsSync('./normalize.light.min.css')) + t.assert(fs.existsSync('./normalize.dark.min.css')) +}) + test('Should produce optional mask props', async t => { t.assert(fs.existsSync('./masks.edges.min.css')) t.assert(fs.existsSync('./masks.corner-cuts.min.css'))