gridsmith-ui 0.26.0 → 0.28.0

package/dist-static/tokens.css

@@ -61,13 +61,11 @@
   --ds-glass-tint: 1;
   --ds-glass-saturate: 100%;
   --ds-glass-border-alpha: 0;
+  --ds-control-edge-strong: oklch(0.615 calc(0.010 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
   --ds-accent-primary: var(--ds-primary-700);
   --ds-accent-primary-hover: var(--ds-primary-800);
   --ds-accent-primary-active: var(--ds-primary-900);
-  --ds-border-focus: var(--ds-primary-700);
   --ds-ring-active: var(--ds-accent-soft);
-  --ds-input-focus-ring: var(--ds-ring-active);
-  --ds-shadow-focus: 0 0 0 2px var(--ds-primary-700);
   --ds-tint-strength: 0.15;
   --ds-gradient: linear-gradient(135deg, oklch(0.4 0.1320 250), oklch(0.550 0.1100 210));
   --ds-gradient-start: oklch(0.4 0.1320 250);
@@ -79,7 +77,7 @@
   --ds-accent-subtle: color-mix(in srgb, var(--ds-accent-primary) 10%, transparent);
   --ds-accent-muted: color-mix(in srgb, var(--ds-accent-primary) 20%, transparent);
   --ds-accent-soft: color-mix(in srgb, var(--ds-accent-primary) 30%, transparent);
-  --ds-accent-subtle-text: var(--ds-accent-primary);
+  --ds-accent-subtle-text: var(--ds-accent-text, var(--ds-accent-primary));
   --ds-accent-bg: oklch(0.92 0.0300 250);
   --ds-accent-text: oklch(0.35 0.1000 250);
   --ds-status-success: oklch(0.55 0.12 150);
@@ -154,7 +152,7 @@
   --ds-nav-h-track-gap: 0px;
   --ds-nav-h-badge-bg: var(--ds-accent-primary);
   --ds-nav-v-active-bg: var(--ds-tab-active-bg);
-  --ds-nav-v-active-text: var(--ds-accent-primary);
+  --ds-nav-v-active-text: var(--ds-accent-ink);
   --ds-nav-v-active-rail: var(--ds-border-width-thick);
   --ds-nav-v-item-radius: var(--ds-radius-sm);
   --ds-nav-v-track-border: 0px;
@@ -162,17 +160,17 @@
   --ds-nav-v-active-muted: var(--ds-text-secondary);
   --ds-nav-v-badge-bg: var(--ds-accent-primary);
   --ds-tree-active-bg: var(--ds-tab-active-bg);
-  --ds-tree-active-text: var(--ds-accent-primary);
+  --ds-tree-active-text: var(--ds-accent-ink);
   --ds-tree-active-muted: var(--ds-text-muted);
   --ds-tree-active-rail: var(--ds-border-width-thick);
   --ds-sidebar-active-bg: var(--ds-sidebar-accent-subtle);
-  --ds-sidebar-active-text: var(--ds-sidebar-accent);
-  --ds-sidebar-active-accent: var(--ds-sidebar-accent);
+  --ds-sidebar-active-text: var(--ds-sidebar-accent-ink);
+  --ds-sidebar-active-accent: var(--ds-sidebar-accent-ink);
   --ds-sidebar-active-rail: var(--ds-border-width-thick);
   --ds-sidebar-active-image: none;
   --ds-switch-off-fill: transparent;
-  --ds-switch-off-edge: var(--ds-input-border);
-  --ds-switch-off-knob: color-mix(in oklab, var(--ds-input-border) var(--ds-switch-knob-share, 100%), var(--ds-bg-surface));
+  --ds-switch-off-edge: var(--ds-control-edge-strong);
+  --ds-switch-off-knob: color-mix(in oklab, var(--ds-control-edge-strong) var(--ds-switch-knob-share, 100%), var(--ds-bg-surface));
 }
 
 /* Navigation active styles and the switch's off look — redeclared for nested mode wrappers and overlay portals */
@@ -187,7 +185,7 @@
   --ds-nav-h-track-gap: 0px;
   --ds-nav-h-badge-bg: var(--ds-accent-primary);
   --ds-nav-v-active-bg: var(--ds-tab-active-bg);
-  --ds-nav-v-active-text: var(--ds-accent-primary);
+  --ds-nav-v-active-text: var(--ds-accent-ink);
   --ds-nav-v-active-rail: var(--ds-border-width-thick);
   --ds-nav-v-item-radius: var(--ds-radius-sm);
   --ds-nav-v-track-border: 0px;
@@ -195,17 +193,17 @@
   --ds-nav-v-active-muted: var(--ds-text-secondary);
   --ds-nav-v-badge-bg: var(--ds-accent-primary);
   --ds-tree-active-bg: var(--ds-tab-active-bg);
-  --ds-tree-active-text: var(--ds-accent-primary);
+  --ds-tree-active-text: var(--ds-accent-ink);
   --ds-tree-active-muted: var(--ds-text-muted);
   --ds-tree-active-rail: var(--ds-border-width-thick);
   --ds-sidebar-active-bg: var(--ds-sidebar-accent-subtle);
-  --ds-sidebar-active-text: var(--ds-sidebar-accent);
-  --ds-sidebar-active-accent: var(--ds-sidebar-accent);
+  --ds-sidebar-active-text: var(--ds-sidebar-accent-ink);
+  --ds-sidebar-active-accent: var(--ds-sidebar-accent-ink);
   --ds-sidebar-active-rail: var(--ds-border-width-thick);
   --ds-sidebar-active-image: none;
   --ds-switch-off-fill: transparent;
-  --ds-switch-off-edge: var(--ds-input-border);
-  --ds-switch-off-knob: color-mix(in oklab, var(--ds-input-border) var(--ds-switch-knob-share, 100%), var(--ds-bg-surface));
+  --ds-switch-off-edge: var(--ds-control-edge-strong);
+  --ds-switch-off-knob: color-mix(in oklab, var(--ds-control-edge-strong) var(--ds-switch-knob-share, 100%), var(--ds-bg-surface));
 }
 
 /* Density — hold the configured value at every viewport */
@@ -228,6 +226,23 @@
   --ds-sidebar-item-active: var(--ds-neutral-200);
 }
 
+/* Readable colours — light mode: derived to reach their minimum contrast on this theme's grounds */
+:root:not([data-mode="dark"]), [data-mode="light"] {
+  --ds-focus: var(--ds-accent-primary);
+  --ds-accent-ink: var(--ds-accent-primary);
+  --ds-text-muted: oklch(0.52 calc(0.0067 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
+  --ds-text-secondary: var(--ds-neutral-600);
+  --ds-status-success-text: oklch(0.35 0.1000 150);
+  --ds-status-warning-text: oklch(0.35 0.1000 55);
+  --ds-status-error-text: oklch(0.35 0.1000 20);
+  --ds-status-info-text: oklch(0.35 0.1000 200);
+  --ds-text-on-primary-muted: var(--ds-text-on-primary);
+  --ds-sidebar-text-muted: var(--ds-text-muted);
+  --ds-sidebar-text-secondary: var(--ds-text-secondary);
+  --ds-sidebar-focus: var(--ds-focus);
+  --ds-sidebar-accent-ink: var(--ds-sidebar-accent);
+}
+
 /* Dark palette overrides — dark mode */
 /* This theme defaults to light. To offer a mode switch, set data-mode="dark" on <html>. No attribute renders the default. */
 [data-mode="dark"] {
@@ -235,13 +250,11 @@
   --ds-sat-primary: 0.65;
   --ds-hue-neutral: 260;
   --ds-sat-neutral: 0.5;
+  --ds-control-edge-strong: oklch(0.645 calc(0.008 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
   --ds-accent-primary: var(--ds-primary-500);
   --ds-accent-primary-hover: var(--ds-primary-400);
   --ds-accent-primary-active: var(--ds-primary-300);
-  --ds-border-focus: var(--ds-primary-500);
   --ds-ring-active: var(--ds-accent-soft);
-  --ds-input-focus-ring: var(--ds-ring-active);
-  --ds-shadow-focus: 0 0 0 2px var(--ds-primary-500);
   --ds-tint-strength: 0.15;
   --ds-gradient: linear-gradient(135deg, oklch(0.55 0.1300 223), oklch(0.330 0.0945 240));
   --ds-gradient-start: oklch(0.55 0.1300 223);
@@ -308,7 +321,7 @@
   --ds-status-success-bg: oklch(0.22 0.02 150);
   --ds-status-warning: oklch(0.75 0.12 55);
   --ds-status-warning-bg: oklch(0.22 0.025 55);
-  --ds-status-warning-text: oklch(0.75 0.12 55);
+  --ds-status-warning-text: oklch(0.92 0.0300 55);
   --ds-status-error: oklch(0.65 0.15 20);
   --ds-status-error-bg: oklch(0.22 0.02 20);
   --ds-status-info: oklch(0.65 0.10 200);
@@ -317,6 +330,77 @@
   --ds-text-on-warning: oklch(0.350 0.1000 55);
   --ds-text-on-error: oklch(0.220 0.1000 20);
   --ds-text-on-info: oklch(0.230 0.1000 200);
+  --ds-focus: oklch(0.67 calc(0.1773 * var(--ds-sat-primary)) var(--ds-hue-primary));
+  --ds-accent-ink: oklch(0.78 calc(0.145 * var(--ds-sat-primary)) var(--ds-hue-primary));
+  --ds-text-muted: oklch(0.74 calc(0.0092 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
+  --ds-text-secondary: var(--ds-neutral-300);
+  --ds-status-success-text: oklch(0.92 0.0300 150);
+  --ds-status-error-text: oklch(0.92 0.0300 20);
+  --ds-status-info-text: oklch(0.92 0.0300 200);
+  --ds-text-on-primary-muted: var(--ds-text-on-primary);
+  --ds-sidebar-text-muted: var(--ds-text-muted);
+  --ds-sidebar-text-secondary: var(--ds-text-secondary);
+  --ds-sidebar-focus: var(--ds-focus);
+  --ds-sidebar-accent-ink: oklch(0.66 calc(0.18 * var(--ds-sat-primary)) var(--ds-hue-primary));
+}
+
+/* A wrapper in the light mode inside the page switched to dark (a component given its own mode) takes its own values back */
+[data-mode="light"] {
+  --ds-hue-primary: 250;
+  --ds-sat-primary: 0.8;
+  --ds-accent-primary: var(--ds-primary-700);
+  --ds-accent-primary-hover: var(--ds-primary-800);
+  --ds-accent-primary-active: var(--ds-primary-900);
+  --ds-gradient: linear-gradient(135deg, oklch(0.4 0.1320 250), oklch(0.550 0.1100 210));
+  --ds-gradient-start: oklch(0.4 0.1320 250);
+  --ds-gradient-end: oklch(0.550 0.1100 210);
+  --ds-text-muted-on-tint: var(--ds-neutral-600);
+  --ds-accent-bg: oklch(0.92 0.0300 250);
+  --ds-accent-text: oklch(0.35 0.1000 250);
+  --ds-check-bg: var(--ds-accent-primary);
+  --ds-check-fg: var(--ds-text-on-primary);
+  --ds-check-border: var(--ds-accent-primary);
+  --ds-palette-1-bold: oklch(0.55 0.1200 110);
+  --ds-palette-1-subtle: oklch(0.92 0.0300 110);
+  --ds-palette-1-dark: oklch(0.35 0.1000 110);
+  --ds-palette-1-bg: var(--ds-palette-1-subtle);
+  --ds-palette-1-text: var(--ds-palette-1-dark);
+  --ds-palette-1-chart: var(--ds-palette-1-bold);
+  --ds-palette-2-bold: oklch(0.54 0.1200 207.50800000000004);
+  --ds-palette-2-subtle: oklch(0.92 0.0300 207.50800000000004);
+  --ds-palette-2-dark: oklch(0.35 0.1000 207.50800000000004);
+  --ds-palette-2-bg: var(--ds-palette-2-subtle);
+  --ds-palette-2-text: var(--ds-palette-2-dark);
+  --ds-palette-2-chart: var(--ds-palette-2-bold);
+  --ds-palette-3-bold: oklch(0.55 0.1200 345.0160000000001);
+  --ds-palette-3-subtle: oklch(0.92 0.0300 345.0160000000001);
+  --ds-palette-3-dark: oklch(0.35 0.1000 345.0160000000001);
+  --ds-palette-3-bg: var(--ds-palette-3-subtle);
+  --ds-palette-3-text: var(--ds-palette-3-dark);
+  --ds-palette-3-chart: var(--ds-palette-3-bold);
+  --ds-palette-4-bold: oklch(0.55 0.1200 162.524);
+  --ds-palette-4-subtle: oklch(0.92 0.0300 162.524);
+  --ds-palette-4-dark: oklch(0.35 0.1000 162.524);
+  --ds-palette-4-bg: var(--ds-palette-4-subtle);
+  --ds-palette-4-text: var(--ds-palette-4-dark);
+  --ds-palette-4-chart: var(--ds-palette-4-bold);
+  --ds-palette-5-bold: oklch(0.55 0.1200 275.03200000000004);
+  --ds-palette-5-subtle: oklch(0.92 0.0300 275.03200000000004);
+  --ds-palette-5-dark: oklch(0.35 0.1000 275.03200000000004);
+  --ds-palette-5-bg: var(--ds-palette-5-subtle);
+  --ds-palette-5-text: var(--ds-palette-5-dark);
+  --ds-palette-5-chart: var(--ds-palette-5-bold);
+  --ds-chart-1: var(--ds-accent-primary);
+  --ds-chart-1-soft: color-mix(in oklch, var(--ds-accent-primary) 30%, transparent);
+  --ds-status-success: oklch(0.55 0.12 150);
+  --ds-status-success-bg: oklch(0.92 0.03 150);
+  --ds-status-warning: oklch(0.70 0.12 55);
+  --ds-status-warning-bg: oklch(0.92 0.035 55);
+  --ds-status-error: oklch(0.55 0.15 20);
+  --ds-status-error-bg: oklch(0.92 0.03 20);
+  --ds-status-info: oklch(0.55 0.10 200);
+  --ds-status-info-bg: oklch(0.92 0.025 200);
+  --ds-text-on-warning: oklch(0.300 0.1000 55);
 }
 
 /* Dark portals on a light page (a dark sidebar's tooltips and menus carry data-ds-overlay="dark") */
@@ -329,7 +413,7 @@
   --ds-bg-emphasis: var(--ds-neutral-600);
   --ds-text-primary: var(--ds-neutral-50);
   --ds-text-secondary: var(--ds-neutral-300);
-  --ds-text-muted: var(--ds-neutral-400);
+  --ds-text-muted: oklch(0.74 calc(0.0092 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
   --ds-text-on-success: oklch(0.240 0.1000 150);
   --ds-text-on-warning: oklch(0.350 0.1000 55);
   --ds-text-on-error: oklch(0.220 0.1000 20);
@@ -337,12 +421,11 @@
   --ds-border-default: var(--ds-neutral-600);
   --ds-border-subtle: var(--ds-neutral-700);
   --ds-border-strong: var(--ds-neutral-400);
-  --ds-border-focus: var(--ds-primary-500);
   --ds-status-success: oklch(0.65 0.12 150);
   --ds-status-success-bg: oklch(0.22 0.02 150);
   --ds-status-warning: oklch(0.75 0.12 55);
   --ds-status-warning-bg: oklch(0.22 0.025 55);
-  --ds-status-warning-text: oklch(0.75 0.12 55);
+  --ds-status-warning-text: oklch(0.92 0.0300 55);
   --ds-status-error: oklch(0.65 0.15 20);
   --ds-status-error-bg: oklch(0.22 0.02 20);
   --ds-status-info: oklch(0.65 0.10 200);
@@ -353,10 +436,9 @@
   --ds-tab-hover-bg: var(--ds-bg-muted);
   --ds-tab-active-bg: var(--ds-bg-surface);
   --ds-input-bg: var(--ds-neutral-800);
-  --ds-input-border: oklch(0.645 calc(0.008 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
-  --ds-input-border-hover: var(--ds-neutral-400);
-  --ds-input-focus-ring: var(--ds-ring-active);
-  --ds-shadow-focus: 0 0 0 2px var(--ds-primary-500);
+  --ds-input-border: var(--ds-neutral-600);
+  --ds-input-border-hover: var(--ds-neutral-500);
+  --ds-control-edge-strong: oklch(0.645 calc(0.008 * var(--ds-sat-neutral)) var(--ds-hue-neutral));
   --ds-accent-primary: var(--ds-primary-500);
   --ds-accent-primary-hover: var(--ds-primary-400);
   --ds-accent-primary-active: var(--ds-primary-300);
@@ -372,7 +454,7 @@
   --ds-accent-subtle: color-mix(in srgb, var(--ds-accent-primary) 10%, transparent);
   --ds-accent-muted: color-mix(in srgb, var(--ds-accent-primary) 20%, transparent);
   --ds-accent-soft: color-mix(in srgb, var(--ds-accent-primary) 30%, transparent);
-  --ds-accent-subtle-text: var(--ds-accent-primary);
+  --ds-accent-subtle-text: var(--ds-accent-text, var(--ds-accent-primary));
   --ds-accent-bg: oklch(0.35 0.1000 223);
   --ds-accent-text: oklch(0.92 0.0300 223);
   --ds-check-bg: var(--ds-primary-400);
@@ -388,7 +470,7 @@
   --ds-nav-h-track-gap: 0px;
   --ds-nav-h-badge-bg: var(--ds-accent-primary);
   --ds-nav-v-active-bg: var(--ds-tab-active-bg);
-  --ds-nav-v-active-text: var(--ds-accent-primary);
+  --ds-nav-v-active-text: var(--ds-accent-ink);
   --ds-nav-v-active-rail: var(--ds-border-width-thick);
   --ds-nav-v-item-radius: var(--ds-radius-sm);
   --ds-nav-v-track-border: 0px;
@@ -396,16 +478,22 @@
   --ds-nav-v-active-muted: var(--ds-text-secondary);
   --ds-nav-v-badge-bg: var(--ds-accent-primary);
   --ds-tree-active-bg: var(--ds-tab-active-bg);
-  --ds-tree-active-text: var(--ds-accent-primary);
+  --ds-tree-active-text: var(--ds-accent-ink);
   --ds-tree-active-muted: var(--ds-text-muted);
   --ds-tree-active-rail: var(--ds-border-width-thick);
   --ds-sidebar-active-bg: var(--ds-sidebar-accent-subtle);
-  --ds-sidebar-active-text: var(--ds-sidebar-accent);
-  --ds-sidebar-active-accent: var(--ds-sidebar-accent);
+  --ds-sidebar-active-text: var(--ds-sidebar-accent-ink);
+  --ds-sidebar-active-accent: var(--ds-sidebar-accent-ink);
   --ds-sidebar-active-rail: var(--ds-border-width-thick);
   --ds-sidebar-active-image: none;
   --ds-switch-off-fill: transparent;
-  --ds-switch-off-edge: var(--ds-input-border);
-  --ds-switch-off-knob: color-mix(in oklab, var(--ds-input-border) var(--ds-switch-knob-share, 100%), var(--ds-bg-surface));
+  --ds-switch-off-edge: var(--ds-control-edge-strong);
+  --ds-switch-off-knob: color-mix(in oklab, var(--ds-control-edge-strong) var(--ds-switch-knob-share, 100%), var(--ds-bg-surface));
   --ds-check-gradient: none;
+  --ds-focus: oklch(0.67 calc(0.1773 * var(--ds-sat-primary)) var(--ds-hue-primary));
+  --ds-accent-ink: oklch(0.78 calc(0.145 * var(--ds-sat-primary)) var(--ds-hue-primary));
+  --ds-status-success-text: oklch(0.92 0.0300 150);
+  --ds-status-error-text: oklch(0.92 0.0300 20);
+  --ds-status-info-text: oklch(0.92 0.0300 200);
+  --ds-text-on-primary-muted: var(--ds-text-on-primary);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gridsmith-ui",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "description": "Gridsmith component library — React components and charts with design tokens and a CSS custom property theming engine",
   "type": "module",
   "sideEffects": [
@@ -72,11 +72,13 @@
   "files": [
     "dist",
     "dist-static",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "build": "tsup && cp ../../showcase/src/styles/roots.css dist/roots.css && cp dist-static/tailwind.css dist/tailwind.css && cp dist-static/tokens.css dist/tokens.css",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "node ../../platform/scripts/check-ui-client-entries.mjs"
   },
   "dependencies": {
     "clsx": "^2.1.1",