gridsmith-ui 0.27.0 → 0.28.0

package/dist/virtualized.js

@@ -1,17 +1,19 @@
 "use client";
-import { useWholeListCheck, pagerPart, Pagination } from './chunk-2CKSSWYG.js';
-import './chunk-EKBWWA6P.js';
+import { useWholeListCheck, pagerPart, Pagination } from './chunk-YUTF2X6B.js';
+import './chunk-R4GXKH4U.js';
 import './chunk-OYNUU346.js';
+import './chunk-7RKC5C7G.js';
 import './chunk-XVB55M3N.js';
 import { useScrollsInside } from './chunk-QM4SJKWV.js';
+import { useRevealFocus } from './chunk-HTXP5BMM.js';
 import './chunk-ZI3OQDET.js';
-import './chunk-MD2EFMES.js';
+import './chunk-GXMTS3YD.js';
 import './chunk-7Q46JXSK.js';
 import './chunk-TJEV7YAY.js';
 import './chunk-HP7WUZPK.js';
 import { useLatest } from './chunk-WH2FUFAC.js';
-import { cn } from './chunk-M2QRNBDQ.js';
-import { useRef, useEffect } from 'react';
+import { cn } from './chunk-66JJCQU3.js';
+import { useRef, useState, useCallback, useEffect } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -28,6 +30,14 @@ function VirtualizedList({
   useScrollsInside();
   const parentRef = useRef(null);
   const endRef = useRef(null);
+  const [scroller, setScroller] = useState(null);
+  useRevealFocus(scroller);
+  const setList = useCallback((node) => {
+    parentRef.current = node;
+    setScroller(node);
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  }, [ref]);
   useWholeListCheck("VirtualizedList", allItems.length, pager);
   const items = pagerPart(allItems, pager);
   const offset = pager ? Math.max(0, pager.range[0] - 1) : 0;
@@ -68,14 +78,10 @@ function VirtualizedList({
   const list = /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: (node) => {
-        parentRef.current = node;
-        if (typeof ref === "function") ref(node);
-        else if (ref) ref.current = node;
-      },
+      ref: setList,
       "data-ds-list": pager ? "" : void 0,
       className: cn(
-        "overflow-auto",
+        "overflow-auto scroll-p-[4px]",
         "rounded-[var(--ds-radius-md)]",
         "border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
         "bg-[var(--ds-bg-surface)]",

package/dist/virtualized.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../showcase/src/components/VirtualizedList.tsx"],"names":[],"mappings":"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","file":"virtualized.js","sourcesContent":["import { useEffect, useRef, type ReactNode, type Ref } from \"react\";\nimport { useVirtualizer, type VirtualItem } from \"@tanstack/react-virtual\";\nimport { cn } from \"../lib/utils\";\nimport { useLatest } from \"../lib/use-latest\";\nimport { Pagination } from \"./Pagination\";\nimport { pagerPart, useWholeListCheck, type Pager } from \"../lib/use-pagination\";\nimport { useScrollsInside } from \"../lib/surface-context\";\n\nexport interface VirtualizedListProps<T> {\n  items: T[];\n  estimateSize: (index: number) => number;\n  /** An item, with its index in `items` (the whole list, when the list is paged). */\n  renderItem: (item: T, index: number, virtualItem: VirtualItem) => ReactNode;\n  overscan?: number;\n  height?: number | string;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * The list's pager (Sprint 25.13 A49): paging and drawing only the rows on screen combine. Pass every item and\n   * `usePagination(items)`'s pager: the list mounts only the rows on screen of the pager's part, and beneath it draws the\n   * control in the project's style. A new page starts at its top; with infinite scroll, scrolling inside the list loads\n   * more. For a long page (logs, feeds) the user asked to page differently, pass the size to the hook\n   * (`usePagination(rows, { pageSize: 100 })`) with its override note.\n   */\n  pager?: Pager<unknown>;\n}\n\nexport function VirtualizedList<T>({\n  items: allItems,\n  estimateSize,\n  renderItem,\n  overscan = 5,\n  height = 400,\n  className,\n  ref,\n  pager,\n}: VirtualizedListProps<T>) {\n  // Sprint 25.14 A44: a list with no frame of its own: a SplitView's list pane keeps its hairline around it\n  useScrollsInside();\n  const parentRef = useRef<HTMLDivElement>(null);\n  const endRef = useRef<HTMLDivElement>(null);\n  useWholeListCheck(\"VirtualizedList\", allItems.length, pager);\n  const items = pagerPart(allItems, pager);\n  const offset = pager ? Math.max(0, pager.range[0] - 1) : 0;\n\n  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Virtual is not compiler-compatible (informational; the project does not use the React Compiler)\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: (index) => estimateSize(offset + index),\n    // a row is known by its place in the whole list, so page 2's third row isn't page 1's (the review of 30 September:\n    // an entry opened on page 1 showed opened on page 2, and page 1's heights carried over)\n    getItemKey: (index) => offset + index,\n    overscan,\n  });\n\n  // A49: a new page starts at its top, and so does a growing list that starts again at its first page (a new order, a\n  // search): left scrolled to its end, it loaded the next page at once (the review of 30 September)\n  const page = pager ? pager.page : null;\n  const pageBefore = useRef(page);\n  const numbered = pager?.style === \"pagination\";\n  useEffect(() => {\n    const before = pageBefore.current;\n    pageBefore.current = page;\n    if (page === null || !parentRef.current) return;\n    if (numbered ? page !== before : before !== null && page < before) parentRef.current.scrollTop = 0;\n  }, [page, numbered]);\n\n  // A49: with infinite scroll, the trigger sits at the end of the list's own content and watches the list's scroller\n  // (it watched the viewport, so scrolling inside the list never loaded more); it loads once per growth of the list\n  const loadMore = useLatest(pager?.loadMore);\n  const growing = pager?.style === \"infinite-scroll\" && pager.hasMore;\n  const loadedAt = useRef(-1);\n  useEffect(() => {\n    const root = parentRef.current;\n    const end = endRef.current;\n    // the list's length changed since the last load (it grew, or started again at page 1): it may load again (the\n    // review of 30 September: after a reset to the first page it never loaded again)\n    if (loadedAt.current !== items.length) loadedAt.current = -1;\n    if (!growing || !root || !end || typeof IntersectionObserver === \"undefined\") return;\n    const observer = new IntersectionObserver((entries) => {\n      if (!entries.some((e) => e.isIntersecting) || loadedAt.current === items.length) return;\n      loadedAt.current = items.length;\n      loadMore.current?.();\n    }, { root, rootMargin: \"200px 0px\" });\n    observer.observe(end);\n    return () => observer.disconnect();\n  }, [growing, items.length, loadMore]);\n\n  const list = (\n    <div\n      ref={(node) => {\n        (parentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n        if (typeof ref === \"function\") ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n      }}\n      data-ds-list={pager ? \"\" : undefined}\n      className={cn(\n        \"overflow-auto\",\n        \"rounded-[var(--ds-radius-md)]\",\n        \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n        \"bg-[var(--ds-bg-surface)]\",\n        !pager && className,\n      )}\n      style={{ height }}\n    >\n      <div className=\"relative w-full\" style={{ height: virtualizer.getTotalSize() }}>\n        {virtualizer.getVirtualItems().map((virtualItem) => (\n          <div\n            key={virtualItem.key}\n            data-index={virtualItem.index}\n            ref={virtualizer.measureElement}\n            className=\"absolute top-0 left-0 w-full\"\n            style={{ transform: `translateY(${virtualItem.start}px)` }}\n          >\n            {renderItem(items[virtualItem.index], offset + virtualItem.index, virtualItem)}\n          </div>\n        ))}\n      </div>\n      {growing && <div ref={endRef} data-load-more-trigger=\"\" aria-hidden=\"true\" className=\"h-px w-full\" />}\n    </div>\n  );\n  // A3: the pager's control is the list's next sibling, as <Pagination {...pager.props} /> would be. With infinite\n  // scroll it is the Load more button alone, for keyboard users: the list's own trigger loads as it scrolls (A49). The\n  // two are one element, which takes the className, so in a grid or a flex row they stay one item, and the list keeps\n  // its element while its items come and go (the review of 30 September).\n  if (!pager) return list;\n  return (\n    <div data-gs-paged=\"\" className={cn(\"flex flex-col min-w-0\", className)}>\n      {list}\n      {allItems.length > 0 && <Pagination {...pager.props} mode={pager.style === \"infinite-scroll\" ? \"load-more\" : pager.props.mode} />}\n    </div>\n  );\n}\n"]}
+{"version":3,"sources":["../../../showcase/src/components/VirtualizedList.tsx"],"names":[],"mappings":"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","file":"virtualized.js","sourcesContent":["import { useCallback, useEffect, useRef, useState, type ReactNode, type Ref } from \"react\";\nimport { useVirtualizer, type VirtualItem } from \"@tanstack/react-virtual\";\nimport { cn } from \"../lib/utils\";\nimport { useLatest } from \"../lib/use-latest\";\nimport { Pagination } from \"./Pagination\";\nimport { pagerPart, useWholeListCheck, type Pager } from \"../lib/use-pagination\";\nimport { useScrollsInside } from \"../lib/surface-context\";\nimport { useRevealFocus } from \"../lib/reveal-focus\";\n\nexport interface VirtualizedListProps<T> {\n  items: T[];\n  estimateSize: (index: number) => number;\n  /** An item, with its index in `items` (the whole list, when the list is paged). */\n  renderItem: (item: T, index: number, virtualItem: VirtualItem) => ReactNode;\n  overscan?: number;\n  height?: number | string;\n  className?: string;\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * The list's pager (Sprint 25.13 A49): paging and drawing only the rows on screen combine. Pass every item and\n   * `usePagination(items)`'s pager: the list mounts only the rows on screen of the pager's part, and beneath it draws the\n   * control in the project's style. A new page starts at its top; with infinite scroll, scrolling inside the list loads\n   * more. For a long page (logs, feeds) the user asked to page differently, pass the size to the hook\n   * (`usePagination(rows, { pageSize: 100 })`) with its override note.\n   */\n  pager?: Pager<unknown>;\n}\n\nexport function VirtualizedList<T>({\n  items: allItems,\n  estimateSize,\n  renderItem,\n  overscan = 5,\n  height = 400,\n  className,\n  ref,\n  pager,\n}: VirtualizedListProps<T>) {\n  // Sprint 25.14 A44: a list with no frame of its own: a SplitView's list pane keeps its hairline around it\n  useScrollsInside();\n  const parentRef = useRef<HTMLDivElement>(null);\n  const endRef = useRef<HTMLDivElement>(null);\n  // what the keyboard reaches in a row comes into view whole, with its outline (Sprint 30, P3)\n  const [scroller, setScroller] = useState<HTMLDivElement | null>(null);\n  useRevealFocus(scroller);\n  const setList = useCallback((node: HTMLDivElement | null) => {\n    (parentRef as React.MutableRefObject<HTMLDivElement | null>).current = node;\n    setScroller(node);\n    if (typeof ref === \"function\") ref(node);\n    else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;\n  }, [ref]);\n  useWholeListCheck(\"VirtualizedList\", allItems.length, pager);\n  const items = pagerPart(allItems, pager);\n  const offset = pager ? Math.max(0, pager.range[0] - 1) : 0;\n\n  // eslint-disable-next-line react-hooks/incompatible-library -- TanStack Virtual is not compiler-compatible (informational; the project does not use the React Compiler)\n  const virtualizer = useVirtualizer({\n    count: items.length,\n    getScrollElement: () => parentRef.current,\n    estimateSize: (index) => estimateSize(offset + index),\n    // a row is known by its place in the whole list, so page 2's third row isn't page 1's (the review of 30 September:\n    // an entry opened on page 1 showed opened on page 2, and page 1's heights carried over)\n    getItemKey: (index) => offset + index,\n    overscan,\n  });\n\n  // A49: a new page starts at its top, and so does a growing list that starts again at its first page (a new order, a\n  // search): left scrolled to its end, it loaded the next page at once (the review of 30 September)\n  const page = pager ? pager.page : null;\n  const pageBefore = useRef(page);\n  const numbered = pager?.style === \"pagination\";\n  useEffect(() => {\n    const before = pageBefore.current;\n    pageBefore.current = page;\n    if (page === null || !parentRef.current) return;\n    if (numbered ? page !== before : before !== null && page < before) parentRef.current.scrollTop = 0;\n  }, [page, numbered]);\n\n  // A49: with infinite scroll, the trigger sits at the end of the list's own content and watches the list's scroller\n  // (it watched the viewport, so scrolling inside the list never loaded more); it loads once per growth of the list\n  const loadMore = useLatest(pager?.loadMore);\n  const growing = pager?.style === \"infinite-scroll\" && pager.hasMore;\n  const loadedAt = useRef(-1);\n  useEffect(() => {\n    const root = parentRef.current;\n    const end = endRef.current;\n    // the list's length changed since the last load (it grew, or started again at page 1): it may load again (the\n    // review of 30 September: after a reset to the first page it never loaded again)\n    if (loadedAt.current !== items.length) loadedAt.current = -1;\n    if (!growing || !root || !end || typeof IntersectionObserver === \"undefined\") return;\n    const observer = new IntersectionObserver((entries) => {\n      if (!entries.some((e) => e.isIntersecting) || loadedAt.current === items.length) return;\n      loadedAt.current = items.length;\n      loadMore.current?.();\n    }, { root, rootMargin: \"200px 0px\" });\n    observer.observe(end);\n    return () => observer.disconnect();\n  }, [growing, items.length, loadMore]);\n\n  const list = (\n    <div\n      ref={setList}\n      data-ds-list={pager ? \"\" : undefined}\n      className={cn(\n        \"overflow-auto scroll-p-[4px]\",\n        \"rounded-[var(--ds-radius-md)]\",\n        \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n        \"bg-[var(--ds-bg-surface)]\",\n        !pager && className,\n      )}\n      style={{ height }}\n    >\n      <div className=\"relative w-full\" style={{ height: virtualizer.getTotalSize() }}>\n        {virtualizer.getVirtualItems().map((virtualItem) => (\n          <div\n            key={virtualItem.key}\n            data-index={virtualItem.index}\n            ref={virtualizer.measureElement}\n            className=\"absolute top-0 left-0 w-full\"\n            style={{ transform: `translateY(${virtualItem.start}px)` }}\n          >\n            {renderItem(items[virtualItem.index], offset + virtualItem.index, virtualItem)}\n          </div>\n        ))}\n      </div>\n      {growing && <div ref={endRef} data-load-more-trigger=\"\" aria-hidden=\"true\" className=\"h-px w-full\" />}\n    </div>\n  );\n  // A3: the pager's control is the list's next sibling, as <Pagination {...pager.props} /> would be. With infinite\n  // scroll it is the Load more button alone, for keyboard users: the list's own trigger loads as it scrolls (A49). The\n  // two are one element, which takes the className, so in a grid or a flex row they stay one item, and the list keeps\n  // its element while its items come and go (the review of 30 September).\n  if (!pager) return list;\n  return (\n    <div data-gs-paged=\"\" className={cn(\"flex flex-col min-w-0\", className)}>\n      {list}\n      {allItems.length > 0 && <Pagination {...pager.props} mode={pager.style === \"infinite-scroll\" ? \"load-more\" : pager.props.mode} />}\n    </div>\n  );\n}\n"]}

package/dist-static/tokens.css

@@ -65,10 +65,7 @@
   --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);
@@ -80,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);
@@ -155,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;
@@ -163,12 +160,12 @@
   --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;
@@ -188,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;
@@ -196,12 +193,12 @@
   --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;
@@ -229,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"] {
@@ -240,10 +254,7 @@
   --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);
@@ -310,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);
@@ -319,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") */
@@ -331,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);
@@ -339,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);
@@ -358,8 +439,6 @@
   --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-input-focus-ring: var(--ds-ring-active);
-  --ds-shadow-focus: 0 0 0 2px var(--ds-primary-500);
   --ds-accent-primary: var(--ds-primary-500);
   --ds-accent-primary-hover: var(--ds-primary-400);
   --ds-accent-primary-active: var(--ds-primary-300);
@@ -375,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);
@@ -391,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;
@@ -399,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-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.27.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": [