@xeonr/platform-ui 1.5.1 → 1.6.1

package/dist/theme/tokens.js

@@ -7,6 +7,7 @@
 // colour literals (scripts/check-colour-literals.mjs enforces it). Light and dark
 // are both first-class: the ThemeProvider stamps data-theme on <html> and these
 // blocks re-map the same variable names.
+import { rootSelector } from "./scope.js";
 export const BRAND = {
     primary: "#A354A2",
     g1: "#9C4699",
@@ -16,10 +17,64 @@ export const BRAND = {
 };
 export const GRAD = `linear-gradient(135deg, ${BRAND.g1}, ${BRAND.g2} 34%, ${BRAND.g3} 68%, ${BRAND.g4})`;
 export const GRAD_90 = `linear-gradient(90deg, ${BRAND.g1}, ${BRAND.g2} 34%, ${BRAND.g3} 68%, ${BRAND.g4})`;
-// css() returns the full variable sheet injected by GlobalStyle.
-export function cssVariables() {
+// The light scheme, once: both the explicit `data-theme="light"` rule and the
+// prefers-color-scheme fallback below are written from it.
+const LIGHT = `
+  color-scheme: light;
+  --x-canvas: #f6f7f9;
+  --x-bg:
+    radial-gradient(560px 300px at 82% -100px, color-mix(in srgb, var(--x-g3) 7%, transparent), transparent 70%),
+    radial-gradient(640px 340px at 12% -140px, color-mix(in srgb, var(--x-brand) 6%, transparent), transparent 70%),
+    #f6f7f9;
+  --x-sidebar: #fdfdfe;
+  --x-surface: #ffffff;
+  --x-surface-2: #fafafb;
+  --x-surface-3: #f1f2f6;
+  --x-text: #1a1b22;
+  --x-muted: #565a68;
+  --x-faint: #6b7080;
+  --x-line: #e7e8ee;
+  --x-line-2: #ddd8e6;
+  --x-field: #ffffff;
+  --x-field-line: #e2dceb;
+  --x-hover: rgba(28, 20, 48, 0.035);
+  --x-elev: 0 1px 2px rgba(28, 20, 48, 0.05), 0 18px 44px -24px color-mix(in srgb, var(--x-g4) 18%, transparent);
+  --x-scrim: rgba(24, 18, 40, 0.38);
+  --x-danger: #c0362f;
+  --x-danger-bg: rgba(192, 54, 47, 0.08);
+  --x-success: #1f9d6b;
+  --x-success-bg: rgba(31, 157, 107, 0.10);
+  --x-warning: #b8740c;
+  --x-warning-bg: rgba(184, 116, 12, 0.10);
+  --x-info: #7a2bb8;
+  --x-info-bg: rgba(155, 62, 228, 0.10);
+  --x-running: #7a2bb8;
+  --x-running-bg: rgba(155, 62, 228, 0.10);
+  --x-data: #1d6bb8;
+  --x-data-bg: rgba(29, 107, 184, 0.10);
+  --x-cat-1: #1d6bb8;
+  --x-cat-2: #b5327c;
+  --x-cat-3: #1f8a5c;
+  --x-cat-4: #a6690a;
+  --x-cat-5: #6b3fd4;
+  --x-cat-6: #c25410;
+  --x-cat-7: #0f7f85;
+  --x-cat-8: #9b2fb0;
+  --x-cat-9: #5f7a16;
+  --x-cat-10: #c0362f;
+  --x-log-bg: #100d17;
+  --x-log-text: #c6bad8;
+  --x-log-dim: #6f6585;
+  --x-term-bg: #100d17;
+`;
+// css() returns the full variable sheet injected by GlobalStyle. With
+// `opts.scope` the same sheet hangs off `[data-x-scope="<scope>"]` instead of
+// `:root` (ThemeScope); `opts.systemScheme: false` drops the OS fallback.
+export function cssVariables(opts) {
+    const r = (q) => rootSelector(q, opts);
+    const system = opts?.systemScheme !== false;
     return `
-:root {
+${r("")} {
   --x-brand: ${BRAND.primary};
   --x-g1: ${BRAND.g1}; --x-g2: ${BRAND.g2}; --x-g3: ${BRAND.g3}; --x-g4: ${BRAND.g4};
   --x-grad: ${GRAD};
@@ -41,7 +96,7 @@ export function cssVariables() {
   --x-z-nav: 20; --x-z-pop: 30; --x-z-scrim: 40; --x-z-modal: 41; --x-z-palette: 50; --x-z-toast: 60;
 }
 
-:root, :root[data-theme="dark"] {
+${r("")}, ${r('[data-theme="dark"]')} {
   color-scheme: dark;
   --x-canvas: #16131f;
   --x-bg:
@@ -113,105 +168,15 @@ export function cssVariables() {
   --x-term-bg: #100d17;
 }
 
+${system ? `
 @media (prefers-color-scheme: light) {
-  :root:not([data-theme="dark"]) {
-    color-scheme: light;
-    --x-canvas: #f6f7f9;
-    --x-bg:
-      radial-gradient(560px 300px at 82% -100px, color-mix(in srgb, var(--x-g3) 7%, transparent), transparent 70%),
-      radial-gradient(640px 340px at 12% -140px, color-mix(in srgb, var(--x-brand) 6%, transparent), transparent 70%),
-      #f6f7f9;
-    --x-sidebar: #fdfdfe;
-    --x-surface: #ffffff;
-    --x-surface-2: #fafafb;
-    --x-surface-3: #f1f2f6;
-    --x-text: #1a1b22;
-    --x-muted: #565a68;
-    --x-faint: #6b7080;
-    --x-line: #e7e8ee;
-    --x-line-2: #ddd8e6;
-    --x-field: #ffffff;
-    --x-field-line: #e2dceb;
-    --x-hover: rgba(28, 20, 48, 0.035);
-    --x-elev: 0 1px 2px rgba(28, 20, 48, 0.05), 0 18px 44px -24px color-mix(in srgb, var(--x-g4) 18%, transparent);
-    --x-scrim: rgba(24, 18, 40, 0.38);
-    --x-danger: #c0362f;
-    --x-danger-bg: rgba(192, 54, 47, 0.08);
-    --x-success: #1f9d6b;
-    --x-success-bg: rgba(31, 157, 107, 0.10);
-    --x-warning: #b8740c;
-    --x-warning-bg: rgba(184, 116, 12, 0.10);
-    --x-info: #7a2bb8;
-    --x-info-bg: rgba(155, 62, 228, 0.10);
-    --x-running: #7a2bb8;
-    --x-running-bg: rgba(155, 62, 228, 0.10);
-    --x-data: #1d6bb8;
-    --x-data-bg: rgba(29, 107, 184, 0.10);
-    --x-cat-1: #1d6bb8;
-    --x-cat-2: #b5327c;
-    --x-cat-3: #1f8a5c;
-    --x-cat-4: #a6690a;
-    --x-cat-5: #6b3fd4;
-    --x-cat-6: #c25410;
-    --x-cat-7: #0f7f85;
-    --x-cat-8: #9b2fb0;
-    --x-cat-9: #5f7a16;
-    --x-cat-10: #c0362f;
-    --x-log-bg: #100d17;
-    --x-log-text: #c6bad8;
-    --x-log-dim: #6f6585;
-    --x-term-bg: #100d17;
-  }
+  ${r(':not([data-theme="dark"])')} {
+${LIGHT.replace(/^(?=.)/gm, "  ")}  }
 }
+` : ""}
 
-:root[data-theme="light"] {
-  color-scheme: light;
-  --x-canvas: #f6f7f9;
-  --x-bg:
-    radial-gradient(560px 300px at 82% -100px, color-mix(in srgb, var(--x-g3) 7%, transparent), transparent 70%),
-    radial-gradient(640px 340px at 12% -140px, color-mix(in srgb, var(--x-brand) 6%, transparent), transparent 70%),
-    #f6f7f9;
-  --x-sidebar: #fdfdfe;
-  --x-surface: #ffffff;
-  --x-surface-2: #fafafb;
-  --x-surface-3: #f1f2f6;
-  --x-text: #1a1b22;
-  --x-muted: #565a68;
-  --x-faint: #6b7080;
-  --x-line: #e7e8ee;
-  --x-line-2: #ddd8e6;
-  --x-field: #ffffff;
-  --x-field-line: #e2dceb;
-  --x-hover: rgba(28, 20, 48, 0.035);
-  --x-elev: 0 1px 2px rgba(28, 20, 48, 0.05), 0 18px 44px -24px color-mix(in srgb, var(--x-g4) 18%, transparent);
-  --x-scrim: rgba(24, 18, 40, 0.38);
-  --x-danger: #c0362f;
-  --x-danger-bg: rgba(192, 54, 47, 0.08);
-  --x-success: #1f9d6b;
-  --x-success-bg: rgba(31, 157, 107, 0.10);
-  --x-warning: #b8740c;
-  --x-warning-bg: rgba(184, 116, 12, 0.10);
-  --x-info: #7a2bb8;
-  --x-info-bg: rgba(155, 62, 228, 0.10);
-  --x-running: #7a2bb8;
-  --x-running-bg: rgba(155, 62, 228, 0.10);
-  --x-data: #1d6bb8;
-  --x-data-bg: rgba(29, 107, 184, 0.10);
-  --x-cat-1: #1d6bb8;
-  --x-cat-2: #b5327c;
-  --x-cat-3: #1f8a5c;
-  --x-cat-4: #a6690a;
-  --x-cat-5: #6b3fd4;
-  --x-cat-6: #c25410;
-  --x-cat-7: #0f7f85;
-  --x-cat-8: #9b2fb0;
-  --x-cat-9: #5f7a16;
-  --x-cat-10: #c0362f;
-  --x-log-bg: #100d17;
-  --x-log-text: #c6bad8;
-  --x-log-dim: #6f6585;
-  --x-term-bg: #100d17;
-}
+${r('[data-theme="light"]')} {
+${LIGHT}}
 `;
 }
 // v is a tiny typed helper so component styles read `${v.text}` instead of the

package/dist/theme/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/theme/tokens.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xeonr/platform-ui",
-  "version": "1.5.1",
+  "version": "1.6.1",
   "description": "Xeonr Platform Suite design language: the --x-* token sheet, theme provider and kit shared by every Xeonr console.",
   "license": "UNLICENSED",
   "type": "module",