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

@@ -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 {

docsite/index.html

@@ -365,13 +365,13 @@ <h4>File Sizes</h4>
  <svg viewBox="0 0 24 24">
  <use href="#bent-arrow" />
  </svg>
- <a href="https://github.com/argyleink/open-props/blob/main/src/extra/brand.css">brand.css</a>
+ <a href="https://github.com/argyleink/open-props/blob/main/src/extra/normalize.light.css">normalize.light.css</a>
  </div>
  <div class="child-ref">
  <svg viewBox="0 0 24 24">
  <use href="#bent-arrow" />
  </svg>
- <a href="https://github.com/argyleink/open-props/blob/main/src/extra/theme.css">theme.css</a>
+ <a href="https://github.com/argyleink/open-props/blob/main/src/extra/normalize.dark.css">normalize.dark.css</a>
  </div>
  <div class="child-ref">
  <svg viewBox="0 0 24 24">

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",

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)); 
+}