@igne-agency/react-web-ui 0.4.0 → 0.5.0

package/dist/base.css

@@ -112,6 +112,9 @@
       transition: background-color var(--sys-motion-medium) var(--sys-motion-standard), color var(--sys-motion-medium) var(--sys-motion-standard);
     }
   }
+  [data-theme] {
+    color: var(--sys-color-text);
+  }
   button,
   select,
   summary,

package/dist/terrazzo/index.d.ts

@@ -26,9 +26,10 @@ export declare const variableNameOf: (id: string) => string;
 export declare const fontFamilyPropertyOf: (id: string) => string;
 /**
  * A Terrazzo plugin that builds a resolver's tokens into the custom properties
- * the kit's components read: `--ref-*` and `--sys-*`, the `light` theme on
- * `:root` and the `dark` theme's `sys` roles on `html[data-theme="dark"]`, and
- * under `prefers-color-scheme: dark` unless `data-theme="light"`, all in the
+ * the kit's components read: the `ref` ramps on `:root`, the `light` theme's
+ * `sys` roles on `:root` and any `[data-theme="light"]` element, and the `dark`
+ * theme's on any `[data-theme="dark"]` element and on `<html>` under
+ * `prefers-color-scheme: dark` unless `data-theme="light"`, all in the
  * `kit.base` cascade layer after the kit's layer order. A shadow
  * tagged `$extensions["nl.igne.css"].property: "filter"` is written as
  * `drop-shadow()` filters.

package/dist/terrazzo/index.js

@@ -120,15 +120,17 @@ const dropShadows = (token, { tokensSet, transformAlias }) => {
     })
         .join(" ");
 };
-const light = (contents) => `:root {\n\tcolor-scheme: light;\n${families}${contents}\n}`;
+const ramps = (contents) => `:root {\n${families}${contents}\n}`;
+const light = (contents) => `:root,\n[data-theme="light"] {\n\tcolor-scheme: light;\n${contents}\n}`;
 const LAYER_ORDER = "@layer kit.reset, kit.base, kit.components;";
 const layered = (contents) => `${LAYER_ORDER}\n\n@layer kit.base {\n${contents.trimEnd()}\n}\n`;
-const dark = (contents) => `html[data-theme="dark"] {\n\tcolor-scheme: dark;\n${contents}\n}\n\n@media (prefers-color-scheme: dark) {\n\thtml:not([data-theme="light"]) {\n\t\tcolor-scheme: dark;\n${contents}\n\t}\n}`;
+const dark = (contents) => `[data-theme="dark"] {\n\tcolor-scheme: dark;\n${contents}\n}\n\n@media (prefers-color-scheme: dark) {\n\thtml:not([data-theme="light"]) {\n\t\tcolor-scheme: dark;\n${contents}\n\t}\n}`;
 /**
  * A Terrazzo plugin that builds a resolver's tokens into the custom properties
- * the kit's components read: `--ref-*` and `--sys-*`, the `light` theme on
- * `:root` and the `dark` theme's `sys` roles on `html[data-theme="dark"]`, and
- * under `prefers-color-scheme: dark` unless `data-theme="light"`, all in the
+ * the kit's components read: the `ref` ramps on `:root`, the `light` theme's
+ * `sys` roles on `:root` and any `[data-theme="light"]` element, and the `dark`
+ * theme's on any `[data-theme="dark"]` element and on `<html>` under
+ * `prefers-color-scheme: dark` unless `data-theme="light"`, all in the
  * `kit.base` cascade layer after the kit's layer order. A shadow
  * tagged `$extensions["nl.igne.css"].property: "filter"` is written as
  * `drop-shadow()` filters.
@@ -158,7 +160,16 @@ const kitTokens = (options = {}) => {
         transform: (token, transformOptions) => typography(token, transformOptions) ??
             dropShadows(token, transformOptions),
         permutations: [
-            { input: { theme: "light" }, prepare: light },
+            {
+                input: { theme: "light" },
+                include: ["ref.**"],
+                prepare: ramps,
+            },
+            {
+                input: { theme: "light" },
+                include: ["sys.**"],
+                prepare: light,
+            },
             {
                 input: { theme: "dark" },
                 include: ["sys.**"],

package/dist/tokens.css

@@ -6,7 +6,6 @@
  * ------------------------------------------- */
 
 :root {
-	color-scheme: light;
 	--sys-font-family-body: system-ui, sans-serif;
 	--sys-font-family-heading: var(--sys-font-family-body);
 --ref-blue-0: oklch(100% 0 234.03);
@@ -339,14 +338,24 @@
   --ref-sand-975: oklch(2.83% 0.0012 17.89);
   --ref-sand-990: oklch(1.13% 0.0005 17.89);
   --ref-sand-1000: oklch(0% 0 17.89);
+}
+
+:root,
+[data-theme="light"] {
+	color-scheme: light;
+/* The page behind everything */
   --sys-color-bg: var(--ref-neutral-25);
+  /* The quiet hairline that separation rations */
   --sys-color-border: var(--ref-neutral-150);
+  /* The fill of a control or button that cannot be used */
   --sys-color-disabled-bg: var(--ref-neutral-100);
+  /* The ink of a control that cannot be used: its text, icons and the marks of its choice */
   --sys-color-disabled-fg: var(--ref-neutral-300);
   --sys-color-error-bg: var(--ref-red-50);
   --sys-color-error-border: var(--ref-red-200);
   --sys-color-error-fg: var(--ref-red-700);
   --sys-color-error-outline: var(--ref-red-250);
+  /* Keyboard focus, on every focusable element */
   --sys-color-focus-ring: var(--sys-color-primary);
   --sys-color-identity-1-bg: oklch(96.02% 0.0119 84);
   --sys-color-identity-1-fg: oklch(24.08% 0.0472 84);
@@ -364,23 +373,35 @@
   --sys-color-neutral-fg: var(--ref-neutral-700);
   --sys-color-on-primary: var(--ref-neutral-0);
   --sys-color-on-primary-container: var(--ref-neutral-800);
+  /* A mark that has to be found: grab bars, scroll thumbs, control outlines */
   --sys-color-outline: var(--ref-neutral-200);
+  /* Primary buttons and links */
   --sys-color-primary: var(--ref-neutral-750);
+  /* Avatar fallbacks, mention pills, brand tints */
   --sys-color-primary-container: var(--ref-neutral-50);
   --sys-color-selection-bg: var(--ref-neutral-100);
   --sys-color-selection-fg: var(--ref-neutral-800);
   --sys-color-success-bg: var(--ref-green-50);
   --sys-color-success-border: var(--ref-green-200);
   --sys-color-success-fg: var(--ref-green-700);
+  /* The default card */
   --sys-color-surface: var(--ref-neutral-0);
+  /* A fill nested in a card */
   --sys-color-surface-high: var(--ref-neutral-50);
+  /* The deepest recess: fields, placeholders */
   --sys-color-surface-highest: var(--ref-neutral-100);
+  /* The dimmest card: a table's sub-rows */
   --sys-color-surface-lowest: var(--ref-neutral-10);
+  /* Popups and tooltips */
   --sys-color-surface-overlay: var(--ref-neutral-0);
+  /* Toasts */
   --sys-color-surface-overlay-high: var(--ref-neutral-0);
+  /* Body copy and headings */
   --sys-color-text: var(--ref-neutral-500);
   --sys-color-text-inverse: var(--ref-neutral-0);
+  /* Captions, help text and anything passive */
   --sys-color-text-muted: var(--ref-neutral-450);
+  /* The hint text an empty field shows */
   --sys-color-text-placeholder: var(--ref-neutral-400);
   --sys-color-warning-bg: var(--ref-orange-50);
   --sys-color-warning-border: var(--ref-orange-200);
@@ -580,7 +601,7 @@
   --sys-unit-64: 8rem;
 }
 
-html[data-theme="dark"] {
+[data-theme="dark"] {
 	color-scheme: dark;
 /* The page behind everything */
   --sys-color-bg: var(--ref-neutral-800);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@igne-agency/react-web-ui",
-	"version": "0.4.0",
+	"version": "0.5.0",
 	"description": "IGNE's React web component kit: primitives and the presets over them, form controls in three tiers with a TanStack Form bridge, and DTCG tokens themed per app.",
 	"license": "MIT",
 	"repository": {
@@ -330,7 +330,7 @@
 	},
 	"scripts": {
 		"fix": "bun run tokens && oxfmt . && oxlint --fix .",
-		"check": "bun run tokens && oxfmt --check . && oxlint .",
+		"check": "bun run tokens && oxfmt --check . && oxlint . && bun tools/check-docs-tokens.ts",
 		"tokens": "tz build",
 		"build": "bun run tokens && vite build && tsc -p tsconfig.build.json && tsc -p tsconfig.terrazzo.json",
 		"check:exports": "bun tools/check-exports.ts",