@arun-dev/tokens 0.32.0 → 0.33.0

package/dist/createBrand.cjs

@@ -185,6 +185,8 @@ var CONTRAST_REQUIREMENTS = [
   { foreground: "--color-text-secondary", background: "--color-bg-primary", min: 7 },
   { foreground: "--color-text-muted", background: "--color-bg-primary", min: 4.5 },
   { foreground: "--color-text-inverse", background: "--color-bg-inverse", min: 7 },
+  // A selected row: a TreeView Item's text on its tint.
+  { foreground: "--color-text-primary", background: "--color-bg-accent", min: 7 },
   // The accent as text: links, accent chips, focus outlines.
   { foreground: "--color-text-accent", background: "--color-bg-primary", min: 7 },
   { foreground: "--color-text-accent", background: "--color-bg-secondary", min: 4.5 },

package/dist/createBrand.js

@@ -157,6 +157,8 @@ var CONTRAST_REQUIREMENTS = [
   { foreground: "--color-text-secondary", background: "--color-bg-primary", min: 7 },
   { foreground: "--color-text-muted", background: "--color-bg-primary", min: 4.5 },
   { foreground: "--color-text-inverse", background: "--color-bg-inverse", min: 7 },
+  // A selected row: a TreeView Item's text on its tint.
+  { foreground: "--color-text-primary", background: "--color-bg-accent", min: 7 },
   // The accent as text: links, accent chips, focus outlines.
   { foreground: "--color-text-accent", background: "--color-bg-primary", min: 7 },
   { foreground: "--color-text-accent", background: "--color-bg-secondary", min: 4.5 },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arun-dev/tokens",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "description": "Pure-CSS design tokens with white-label brand generation — primitives, brand palettes, semantic layers, and the createBrand() generator",
   "license": "MIT",
   "type": "module",

package/src/components/tree-view.css

@@ -0,0 +1,23 @@
+/* TreeView component tokens — nested Items, each a row with a chevron and its label.
+   Override any of these to restyle trees without moving other components. */
+:root {
+  --tree-view-font-size: var(--text-sm);
+  --tree-view-color: var(--color-text-primary);
+  --tree-view-item-padding-block: var(--space-3xs);
+  --tree-view-item-padding-inline: var(--space-2xs);
+  --tree-view-item-gap: var(--space-3xs);
+  --tree-view-item-radius: var(--radius-sm);
+  --tree-view-item-bg-hover: var(--color-bg-secondary);
+  --tree-view-item-bg-selected: var(--color-bg-accent);
+  --tree-view-item-color-selected: var(--color-text-primary);
+  /* A bar on the selected row's leading edge, so selection is not shown by colour alone. */
+  --tree-view-selected-bar-width: var(--space-2px);
+  --tree-view-selected-bar-color: var(--color-text-accent);
+  --tree-view-chevron-size: 1rem;
+  --tree-view-chevron-color: var(--color-text-secondary);
+  /* Each level in by a chevron and a gap, so a child's chevron sits under its parent's label. */
+  --tree-view-indent: calc(var(--tree-view-chevron-size) + var(--tree-view-item-gap));
+  --tree-view-focus-color: var(--color-text-accent);
+  --tree-view-disabled-opacity: 0.5;
+  --tree-view-duration: var(--duration-fast);
+}

package/src/components.css

@@ -42,3 +42,4 @@
 @import './components/drawer.css';
 @import './components/hover-card.css';
 @import './components/stepper.css';
+@import './components/tree-view.css';

package/src/createBrand.ts

@@ -270,6 +270,8 @@ export const CONTRAST_REQUIREMENTS: readonly {
   { foreground: '--color-text-secondary', background: '--color-bg-primary', min: 7 },
   { foreground: '--color-text-muted', background: '--color-bg-primary', min: 4.5 },
   { foreground: '--color-text-inverse', background: '--color-bg-inverse', min: 7 },
+  // A selected row: a TreeView Item's text on its tint.
+  { foreground: '--color-text-primary', background: '--color-bg-accent', min: 7 },
   // The accent as text: links, accent chips, focus outlines.
   { foreground: '--color-text-accent', background: '--color-bg-primary', min: 7 },
   { foreground: '--color-text-accent', background: '--color-bg-secondary', min: 4.5 },