@kupcad/ui 0.1.1 → 0.1.2

package/README.md

@@ -256,6 +256,10 @@ webview and the desktop app to the language server.
   `--kc-focus` its focus ring, `--kc-accent-subtle` what is chosen in a list. `tokens.test.js`
   holds every pair to WCAG's 4.5:1 for text and 3:1 for a control's edge, in both schemes, and
   every colour token to a mapping in `vscode.css`.
+  Each colour is `light-dark()` of its two values, so the scheme decides: the system's
+  (`color-scheme: light dark`), until the page chooses one with `data-theme="light"` or
+  `"dark"` on its root (Starlight's convention, so a site's switch and the docs' agree) or a
+  `color-scheme` of its own. The viewer's own colours and the editor's follow the same scheme.
   A host sets its own, as `vscode.css` maps VS Code's theme over them: the webview follows the
   editor's theme, never the brand.
   `--kc-viewer-*` theme the viewer (`themeFromTokens`, which reads each as the page draws it,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kupcad/ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "KupCAD's UI: a three.js viewer of a model the core made, for any host (@kupcad/ui/viewer), and the Svelte panels around it (the viewer's pane, parameters, console, a language server's preview), styled by --kc-* tokens.",
   "license": "AGPL-3.0-only",
   "repository": {
@@ -36,11 +36,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@kupcad/protocol": "0.1.1",
+    "@kupcad/protocol": "0.1.2",
     "three": "^0.186.1"
   },
   "devDependencies": {
-    "@kupcad/wasm": "0.1.1",
+    "@kupcad/wasm": "0.1.2",
     "@playwright/test": "^1.64.1",
     "@sveltejs/vite-plugin-svelte": "^7.3.1",
     "@testing-library/svelte": "^5.4.2",

package/src/theme.js

@@ -1,7 +1,8 @@
 // The viewer's theme from the --kc-viewer-* tokens of the page around it: a host themes the
 // viewer as it themes the panels, and changes it while it shows (VS Code's theme switch). A
 // token left unset, or set to no colour the page reads, takes the viewer's own colour, LIGHT or
-// DARK as the page's colour scheme is.
+// DARK as the page's colour scheme is: the one it chose (tokens.css's data-theme, a color-scheme
+// of its own), else the system's.
 
 import { DARK, LIGHT } from './viewer/index.js';
 
@@ -25,8 +26,9 @@ const HEX_WITH_ALPHA = /^(#[\da-f]{3})[\da-f]$|^(#[\da-f]{6})[\da-f]{2}$/i;
 const RGBA = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*[\d.]+\)$/;
 /** Two fills a colour the browser can't read leaves as they were: it reads as neither. */
 const UNREAD = /** @type {const} */ (['#000000', '#ffffff']);
-/** The attributes of the page's root and body a host themes it by (VS Code: a class, a style). */
-const THEMED_BY = ['class', 'style'];
+/** The attributes of the page's root and body a host themes it by (VS Code: a class, a style; a
+ * site's switch: data-theme). */
+const THEMED_BY = ['class', 'style', 'data-theme'];
 
 /** colorReader's, once made (null where the page has no 2D context). @type {ColorReader | null | undefined} */
 let reader;
@@ -43,8 +45,7 @@ let reader;
  */
 export function themeFromTokens(element) {
   const style = getComputedStyle(element);
-  const dark = globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
-  const fallback = dark ? DARK : LIGHT;
+  const fallback = isDark(style) ? DARK : LIGHT;
   /** @type {Theme} */
   const theme = { ...fallback };
   const context = colorReader();
@@ -54,6 +55,18 @@ export function themeFromTokens(element) {
   return theme;
 }
 
+/**
+ * Whether an element is drawn dark: its colour scheme where the page chose one alone (`dark`,
+ * `only light`), else the system's (`light dark`, or none said).
+ * @param {CSSStyleDeclaration} style its computed style
+ */
+export function isDark(style) {
+  const scheme = (style.colorScheme ?? '').split(/\s+/);
+  const light = scheme.includes('light');
+  if (scheme.includes('dark') !== light) return !light;
+  return globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false;
+}
+
 /**
  * `color` as the viewer can draw it: #rrggbb, the sRGB of a pixel `context` draws in it, so any
  * CSS colour the browser reads (three.js reads hex, rgb() and a name alone: a color-mix() or an
@@ -92,7 +105,7 @@ function colorReader() {
 
 /**
  * Gives `changed` the theme of `element`'s tokens now, and again whenever it changes: with the
- * page's colour scheme, or a class or style of its root or body.
+ * system's colour scheme, or a class, style or data-theme of the page's root or body.
  * @param {Element} element
  * @param {(theme: Theme) => void} changed
  * @returns {() => void} stops watching

package/src/tokens.css

@@ -6,6 +6,11 @@
   brand's too. A control of a host's own takes the panels' look by the class .kc-control
   (controls.css); a range input by .kc-range, a checkbox by .kc-check.
 
+  Each colour is light-dark() of its light and its dark value, picked by the colour scheme, which
+  is the system's (`color-scheme: light dark`) until the page chooses: data-theme="light" or
+  "dark" on its root (the docs' convention, Starlight's), or a color-scheme of its own. The
+  viewer and the editor follow the same scheme.
+
   The accent is a fill where there is one of a kind (the primary button, a slider, a checked
   box); a toggle while on, or what is chosen in a list, is --kc-accent-subtle edged in it, as
   several are on at once. The text on the fill is --kc-accent-fg, the brand black: white on the
@@ -16,55 +21,41 @@
 @import './controls.css';
 
 :root {
+  color-scheme: light dark;
   --kc-font: system-ui, -apple-system, 'Segoe UI', sans-serif;
   --kc-font-size: 13px;
-  --kc-bg: #ffffff;
-  --kc-fg: #1a1b1c;
-  --kc-muted: #5a5d65;
+  --kc-bg: light-dark(#ffffff, #1a1b1c);
+  --kc-fg: light-dark(#1a1b1c, #e3e7eb);
+  --kc-muted: light-dark(#5a5d65, #9a9da3);
   /* A divider between panes and rows */
-  --kc-border: #d5dae0;
+  --kc-border: light-dark(#d5dae0, #333436);
   /* The edge of a field, a select or a checkbox, which tells it from the background */
-  --kc-control-border: #8a9099;
-  --kc-input-bg: #ffffff;
+  --kc-control-border: light-dark(#8a9099, #73767c);
+  --kc-input-bg: light-dark(#ffffff, #282829);
   /* A row or a button under the pointer */
-  --kc-hover: rgba(26, 27, 28, 0.06);
+  --kc-hover: light-dark(rgba(26, 27, 28, 0.06), rgba(227, 231, 235, 0.07));
   --kc-accent: #ff5f14;
   --kc-accent-fg: #1a1b1c;
-  --kc-accent-hover: #f0540c;
-  --kc-accent-text: #c5480d;
+  --kc-accent-hover: light-dark(#f0540c, #ff7a3d);
+  --kc-accent-text: light-dark(#c5480d, #ff6a24);
   /* What is chosen in a list (the tree's open script), its text --kc-fg */
-  --kc-accent-subtle: #ffe9de;
-  --kc-focus: #c5480d;
+  --kc-accent-subtle: light-dark(#ffe9de, #43271b);
+  --kc-focus: light-dark(#c5480d, #ff6a24);
   /* A slider's track beyond its thumb */
-  --kc-track: #d5dae0;
-  --kc-error: #c8102e;
-  --kc-warning: #8a5a00;
+  --kc-track: light-dark(#d5dae0, #3a3b3e);
+  --kc-error: light-dark(#c8102e, #ff6b81);
+  --kc-warning: light-dark(#8a5a00, #e3b341);
   /* A section's header: a group of parameters' */
-  --kc-section-bg: #e3e7eb;
-  --kc-section-fg: #1a1b1c;
+  --kc-section-bg: light-dark(#e3e7eb, #282829);
+  --kc-section-fg: light-dark(#1a1b1c, #e3e7eb);
   --kc-radius: 4px;
   --kc-gap: 8px;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --kc-bg: #1a1b1c;
-    --kc-fg: #e3e7eb;
-    --kc-muted: #9a9da3;
-    --kc-border: #333436;
-    --kc-control-border: #73767c;
-    --kc-input-bg: #282829;
-    --kc-hover: rgba(227, 231, 235, 0.07);
-    --kc-accent: #ff5f14;
-    --kc-accent-fg: #1a1b1c;
-    --kc-accent-hover: #ff7a3d;
-    --kc-accent-text: #ff6a24;
-    --kc-accent-subtle: #43271b;
-    --kc-focus: #ff6a24;
-    --kc-track: #3a3b3e;
-    --kc-error: #ff6b81;
-    --kc-warning: #e3b341;
-    --kc-section-bg: #282829;
-    --kc-section-fg: #e3e7eb;
-  }
+/* The scheme the page chose: the system's no longer decides */
+:root[data-theme='light'] {
+  color-scheme: light;
+}
+:root[data-theme='dark'] {
+  color-scheme: dark;
 }