@keyfunc/keybricks-ds 1.0.1 → 1.0.2

package/INTEGRATION.md

@@ -346,7 +346,30 @@ the CSS.
 
 ## Dark mode
 
-Automatic via `prefers-color-scheme`, and overridable with `data-theme` on `<html>`.
+Three states, decided by the `data-theme` attribute on `<html>`:
+
+| `<html data-theme>` | Result |
+| --- | --- |
+| *(absent)* | light — or the OS preference, if `tokens/theme.js` is loaded |
+| `"dark"` | dark, regardless of the OS |
+| `"light"` | light, regardless of the OS |
+
+```js
+document.documentElement.dataset.theme = 'light'   // or 'dark'; delete it to follow the OS
+```
+
+The stylesheet reads only the attribute — there is deliberately no `@media (prefers-color-scheme)`
+in the tokens, because an OS media query on `:root` cannot be overridden by an attribute. To
+follow the OS, load the bootstrap in `<head>` **before** `styles.css`:
+
+```html
+<script src="@keyfunc/keybricks-ds/tokens/theme.js"></script>
+```
+
+It stamps `data-theme` from the OS only when nothing is set, tracks OS changes live, and steps
+aside the moment your app sets the attribute itself. Persist the user's choice yourself and
+apply it before this script runs to avoid a flash.
+
 If you build custom UI beside Keybricks components, reference the same semantic tokens and
 it will flip for free. Two things to watch:
 

package/_scripts/build-tokens.mjs

@@ -78,10 +78,10 @@ const q = s => JSON.stringify(s);
 
 const outJson = JSON.stringify({
   name: '@keyfunc/keybricks-ds', version, source: 'tokens/*.css',
-  note: 'Generated by scripts/build-tokens.mjs — CSS is the source of truth.', tokens
+  note: 'Generated by _scripts/build-tokens.mjs — CSS is the source of truth.', tokens
 }, null, 2) + '\n';
 
-const outJs = `/* Generated from tokens/*.css by scripts/build-tokens.mjs — do not edit by hand.
+const outJs = `/* Generated from tokens/*.css by _scripts/build-tokens.mjs — do not edit by hand.
    cssVar keeps theming live (preferred in components); light/dark are flattened
    literals for canvas, PDF, native and export pipelines. */
 
@@ -102,7 +102,7 @@ export const tokenNames = ${JSON.stringify(names)};
 export default { cssVar, light, dark, tokenNames };
 `;
 
-const outDts = `/* Generated from tokens/*.css by scripts/build-tokens.mjs — do not edit by hand. */
+const outDts = `/* Generated from tokens/*.css by _scripts/build-tokens.mjs — do not edit by hand. */
 export type TokenName =
   | ${names.map(q).join('\n  | ')};
 export type TokenKey =

package/components/_shared/frame-theme.js

@@ -10,6 +10,11 @@ window.addEventListener('message', function(e){
   var m = e.data;
   if (m && m.kb === 'theme') apply(m.theme);
 });
+/* Standalone (no host): follow the OS until the host answers. */
+if (!document.documentElement.hasAttribute('data-theme')) {
+  var mq = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
+  apply(mq && mq.matches ? 'dark' : 'light');
+}
 try {
   if (window.parent !== window) window.parent.postMessage({ kb: 'theme-ask' }, '*');
 } catch(e){}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Keybricks design system — 334 design tokens and 118 UI components in React and Vue 3, source-only.",
   "license": "UNLICENSED",
   "type": "module",

package/tokens/alpha.css

@@ -21,7 +21,3 @@
 --neutral-alpha-2:rgba(255,255,255,.02);--neutral-alpha-4:rgba(255,255,255,.04);--neutral-alpha-8:rgba(255,255,255,.08);--neutral-alpha-12:rgba(255,255,255,.12);--neutral-alpha-16:rgba(255,255,255,.16);--neutral-alpha-24:rgba(255,255,255,.24);--neutral-alpha-32:rgba(255,255,255,.32);--neutral-alpha-48:rgba(255,255,255,.48);--neutral-alpha-64:rgba(255,255,255,.64);--neutral-alpha-80:rgba(255,255,255,.8);
 --brand-alpha-8:rgba(43,127,255,.1);--brand-alpha-12:rgba(43,127,255,.14);--brand-alpha-16:rgba(43,127,255,.2);--brand-alpha-24:rgba(43,127,255,.28);--brand-alpha-32:rgba(43,127,255,.36);
 }
-@media (prefers-color-scheme: dark){:root{
---neutral-alpha-2:rgba(255,255,255,.02);--neutral-alpha-4:rgba(255,255,255,.04);--neutral-alpha-8:rgba(255,255,255,.08);--neutral-alpha-12:rgba(255,255,255,.12);--neutral-alpha-16:rgba(255,255,255,.16);--neutral-alpha-24:rgba(255,255,255,.24);--neutral-alpha-32:rgba(255,255,255,.32);--neutral-alpha-48:rgba(255,255,255,.48);--neutral-alpha-64:rgba(255,255,255,.64);--neutral-alpha-80:rgba(255,255,255,.8);
---brand-alpha-8:rgba(43,127,255,.1);--brand-alpha-12:rgba(43,127,255,.14);--brand-alpha-16:rgba(43,127,255,.2);--brand-alpha-24:rgba(43,127,255,.28);--brand-alpha-32:rgba(43,127,255,.36);
-}}

package/tokens/charts.css

@@ -47,9 +47,3 @@
 --chart-heat-1:#162456;--chart-heat-2:#193cb8;--chart-heat-3:#1447e6;--chart-heat-4:#51a2ff;--chart-heat-5:#bedbff;
 --chart-heat-ink:#0a0a0a;
 }
-@media (prefers-color-scheme: dark){:root{
---series-1:#51a2ff;--series-2:var(--teal-300);--series-3:var(--purple-300);--series-4:var(--orange-300);--series-5:var(--emerald-300);--series-6:var(--pink-300);--series-7:var(--cyan-300);--series-8:var(--amber-300);--series-9:var(--red-300);--series-10:var(--neutral-500);
---chart-grid:#1f1f1f;--chart-axis:#3f3f3f;--chart-label:#8f8f8f;--chart-pos:var(--emerald-400);--chart-neg:var(--red-400);--chart-total:var(--neutral-300);--chart-track:#1f1f1f;--chart-guide:#525252;--chart-area-alpha:.22; /* @kind other */
---chart-heat-1:#162456;--chart-heat-2:#193cb8;--chart-heat-3:#1447e6;--chart-heat-4:#51a2ff;--chart-heat-5:#bedbff;
---chart-heat-ink:#0a0a0a;
-}}

package/tokens/colors-extended.css

@@ -37,4 +37,3 @@
 }
 /* Dark theme: deep-tint bg + 300-step fg keeps pills readable on #0a0a0a */
 [data-theme="dark"]{--hue-gray-bg:#262626;--hue-gray-fg:#a1a1a1;--hue-blue-bg:#162456;--hue-blue-fg:#8ec5ff;--hue-green-bg:#00311d;--hue-green-fg:#8adeb3;--hue-orange-bg:#461700;--hue-orange-fg:#ffb798;--hue-amber-bg:#362400;--hue-amber-fg:#ffd280;--hue-teal-bg:#002f2a;--hue-teal-fg:#90d7cc;--hue-cyan-bg:#0b2d33;--hue-cyan-fg:#57daf3;--hue-purple-bg:#35085b;--hue-purple-fg:#d2b3ff;--hue-pink-bg:#460c33;--hue-pink-fg:#ffa4da;--hue-red-bg:#520006;--hue-red-fg:#ffa79f}
-@media (prefers-color-scheme: dark){:root{--hue-gray-bg:#262626;--hue-gray-fg:#a1a1a1;--hue-blue-bg:#162456;--hue-blue-fg:#8ec5ff;--hue-green-bg:#00311d;--hue-green-fg:#8adeb3;--hue-orange-bg:#461700;--hue-orange-fg:#ffb798;--hue-amber-bg:#362400;--hue-amber-fg:#ffd280;--hue-teal-bg:#002f2a;--hue-teal-fg:#90d7cc;--hue-cyan-bg:#0b2d33;--hue-cyan-fg:#57daf3;--hue-purple-bg:#35085b;--hue-purple-fg:#d2b3ff;--hue-pink-bg:#460c33;--hue-pink-fg:#ffa4da;--hue-red-bg:#520006;--hue-red-fg:#ffa79f}}

package/tokens/dark.css

@@ -1,4 +1,7 @@
-/* Keybricks dark theme — apply with <html data-theme="dark">.
+/* Keybricks dark theme — apply with <html data-theme="dark">. To follow the OS, run
+   tokens/theme.js in <head>: it stamps data-theme="dark" when the OS prefers dark and
+   nothing is set. data-theme="light" always forces light. No @media here on purpose —
+   an OS media query in :root cannot be overridden by an attribute.
    The source .fig ships a "Dark Mode" nav item but no dark frames, so these values
    are an original, contrast-tested derivation of the light palette (same hue families).
 
@@ -49,48 +52,3 @@ color-scheme:dark;
 }
 [data-theme="dark"] body{background:var(--bg-app);color:var(--text-primary)}
 [data-theme="dark"] img[src$="keybricks-logo.png"]{filter:none}
-
-@media (prefers-color-scheme: dark){
-:root{
-
-color-scheme:dark;
-/* Surfaces — 4 steps, each ~+6% luminance, so nesting reads without borders */
---bg-app:#0a0a0a;--bg-surface:#161616;--bg-raised:#1d1d1d;--bg-inset:#1f1f1f;--bg-hover:#262626;--bg-active:#2e2e2e;--bg-scrim:rgba(0,0,0,.6);
-/* Text */
---text-primary:#fafafa;--text-heading:#f5f5f5;--text-strong:#e5e5e5;--text-body:#d4d4d4;--text-secondary:#a1a1a1;--text-muted:#737373;--text-inverse:#0a0a0a;
---on-accent:#ffffff;--action-dark-fg:#0a0a0a;
-/* Borders */
---border-card:rgba(255,255,255,.09);--border-control:#333333;--border-subtle:#242424;--border-strong:#454545;
-/* Actions */
---action-primary:#1f6feb;--action-primary-hover:#2b7fff;--action-primary-active:#1a5ec9;--action-dark:#fafafa;--action-dark-hover:#e5e5e5;--action-dark-active:#d4d4d4;
-/* Press (active) fills — one step past the hover value in each family */
---bg-press:#3a3a3a;--soft-active:rgba(43,127,255,.32);--danger-active:#c10007;--danger-soft-active:rgba(251,44,54,.26);
---focus-ring:rgba(43,127,255,.32);--focus-border:#2b7fff;--selected-border:#51a2ff;
---soft-bg:rgba(43,127,255,.14);--soft-border:#2b7fff;--soft-hover:rgba(43,127,255,.24);
---info-bg:rgba(43,127,255,.14);--info-fg:#8ab8ff;
---link:#7cb0ff;--link-hover:#a8caff;
-/* Structure */
---track:#303030;--dot-neutral:#737373;--skeleton:#242424;--checkbox-border:#4a4a4a;
---port-border:#3f3f3f;--dropzone-border:#3a3a3a;--dropzone-border-hover:#525252;
---edge:#4b5563;--chart-blue:#4d93ff;--purple-500:#c07cff;
---tooltip-bg:#f5f5f5;--tooltip-fg:#0a0a0a;
-/* Category hues — glyph lifted for contrast, tile tint becomes a low-alpha wash */
---cat-source:#22c58f;--cat-source-bg:rgba(0,188,125,.16);
---cat-join:#5b9bff;--cat-join-bg:rgba(43,127,255,.16);
---cat-transform:#ff8b3d;--cat-transform-bg:rgba(255,105,0,.16);
---cat-merge:#c07cff;--cat-merge-bg:rgba(152,16,250,.18);
---cat-output:#22bfb2;--cat-output-bg:rgba(0,150,137,.18);
-/* Status — solid dots keep the brand hue; tints/text lift for legibility */
---success:#00bc7d;--success-strong:#22c58f;--success-bg:rgba(0,188,125,.14);--success-text:#4ade9f;
---danger:#fb2c36;--danger-bg:rgba(251,44,54,.14);--danger-text:#ff8085;
---warning:#ffb900;--warning-bg:rgba(255,185,0,.14);--warning-text:#ffc55c;
-/* Elevation reads as a deeper shadow plus a lighter surface, never a glow */
---shadow-node:0 1px 3px 0 rgba(0,0,0,.6),0 1px 2px -1px rgba(0,0,0,.5);
---shadow-selected:0 0 0 2px rgba(43,127,255,.32),0 1px 3px 0 rgba(0,0,0,.6);
---shadow-menu:0 4px 16px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4);
---shadow-modal:0 24px 64px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.5);
-
-}
-body{background:var(--bg-app);color:var(--text-primary)}
-img[src$="keybricks-logo.png"]{filter:none}
-}

package/tokens/interaction.css

@@ -14,7 +14,6 @@
    Reduced-motion users still get both states — neither is animated. */
 :root{--press-filter:brightness(.94);/* @kind other */--press-filter-strong:brightness(.88)/* @kind other */}
 [data-theme="dark"]{--press-filter:brightness(1.35);/* @kind other */--press-filter-strong:brightness(1.6)/* @kind other */}
-@media (prefers-color-scheme: dark){:root{--press-filter:brightness(1.35);/* @kind other */--press-filter-strong:brightness(1.6)/* @kind other */}}
 
 button:not(:disabled):not([data-press="own"]):active,
 a:active,

package/tokens/theme.js

@@ -0,0 +1,11 @@
+/* Keybricks theme bootstrap — include in <head> BEFORE styles.css to avoid a flash:
+     <script src="@keyfunc/keybricks-ds/tokens/theme.js"></script>
+   Rules: an existing data-theme on <html> always wins ("light" forces light, "dark" forces
+   dark); with none set, the OS preference is stamped as data-theme and tracked live.
+   Your app owns persistence — set data-theme yourself from saved settings before this runs. */
+(function () {
+  var html = document.documentElement, mq = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
+  function follow() { if (!html.hasAttribute('data-theme') || html.dataset.themeSource === 'os') { html.setAttribute('data-theme', mq && mq.matches ? 'dark' : 'light'); html.dataset.themeSource = 'os'; } }
+  follow();
+  if (mq && mq.addEventListener) mq.addEventListener('change', follow);
+})();

package/tokens/tokens.d.ts

@@ -1,4 +1,4 @@
-/* Generated from tokens/*.css by scripts/build-tokens.mjs — do not edit by hand. */
+/* Generated from tokens/*.css by _scripts/build-tokens.mjs — do not edit by hand. */
 export type TokenName =
   | "--action-dark"
   | "--action-dark-active"

package/tokens/tokens.js

@@ -1,4 +1,4 @@
-/* Generated from tokens/*.css by scripts/build-tokens.mjs — do not edit by hand.
+/* Generated from tokens/*.css by _scripts/build-tokens.mjs — do not edit by hand.
    cssVar keeps theming live (preferred in components); light/dark are flattened
    literals for canvas, PDF, native and export pipelines. */
 

package/tokens/tokens.json

@@ -1,8 +1,8 @@
 {
   "name": "@keyfunc/keybricks-ds",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "source": "tokens/*.css",
-  "note": "Generated by scripts/build-tokens.mjs — CSS is the source of truth.",
+  "note": "Generated by _scripts/build-tokens.mjs — CSS is the source of truth.",
   "tokens": {
     "--action-dark": {
       "group": "colors",