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

Author: argyleink

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