@eos-ui/tokens 0.5.3 → 0.5.4

package/dist/theme.js

@@ -159,9 +159,12 @@ function deriveGround(input, out, dark) {
         out["scrim"] = "rgb(0 0 0 / 0.75)";
     }
 }
+function isDark(input) {
+    return input.surface !== undefined && luminance(input.surface) < DARK_BELOW;
+}
 function derive(input) {
     const out = { ...defaults };
-    const dark = input.surface !== undefined && luminance(input.surface) < DARK_BELOW;
+    const dark = isDark(input);
     if (dark) {
         for (const t of ["on-primary", "on-secondary", "on-danger"])
             out[t] = BLACK;
@@ -275,6 +278,8 @@ const WASHES = [
 export function defineTheme(input = {}) {
     const name = input.name ?? "custom";
     const tokens = derive(input);
+    // Tells the browser which way the page leans, so its own controls (scrollbars, colour picker, autofill) match.
+    const scheme = isDark(input) ? "dark" : "light";
     const issues = checkContrast(tokens);
     if (input.strict && issues.length) {
         throw new Error("Theme fails contrast:\n" +
@@ -289,13 +294,14 @@ export function defineTheme(input = {}) {
                 .map(([k, v]) => `  --e-${k}: ${v};`)
                 .join("\n");
             const derived = `${selector}, [data-e-theme] {\n${WASHES.map((w) => "  " + w).join("\n")}\n}`;
-            const rules = `${selector} {\n${decls}\n}\n${derived}\n`;
+            const rules = `${selector} {\n  color-scheme: ${scheme};\n${decls}\n}\n${derived}\n`;
             const body = layer ? `@layer e.tokens {\n${rules}}\n` : rules;
             return (header ? `/* Generated from tokens.json. Theme: ${name}. */\n@layer ${LAYER_ORDER};\n` : "") + body;
         },
         apply(el = document.documentElement) {
             for (const [k, v] of Object.entries(tokens))
                 el.style.setProperty(`--e-${k}`, v);
+            el.style.colorScheme = scheme;
             el.setAttribute("data-e-theme", name);
         },
     };

package/dist/tokens.css

@@ -2,6 +2,7 @@
 @layer e.reset, e.tokens, e.base, e.primitives, e.blocks, e.controls, e.composites, e.containers, e.page;
 @layer e.tokens {
 :root {
+  color-scheme: light;
   --e-brand-blue: #2c95b4;
   --e-brand-green: #72c451;
   --e-primary: #17586d;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eos-ui/tokens",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "description": "Eos design tokens: CSS custom properties, typed values and a theme generator with contrast checks.",
   "type": "module",
   "license": "MIT",