@robr0/design-system 0.14.0 → 0.15.0

package/index.js

@@ -51,7 +51,6 @@ import { FieldContext, useField } from "./components/Field/FieldContext.js";
 import { Figure } from "./components/Figure/Figure.js";
 import { FileInput } from "./components/FileInput/FileInput.js";
 import { FilterBar } from "./components/FilterBar/FilterBar.js";
-import { FunnelChart } from "./components/FunnelChart/FunnelChart.js";
 import { Gauge } from "./components/Gauge/Gauge.js";
 import { Globe } from "./components/Globe/Globe.js";
 import { HoverCard } from "./components/HoverCard/HoverCard.js";
@@ -90,6 +89,7 @@ import { ShaderField } from "./components/ShaderField/ShaderField.js";
 import { Skeleton } from "./components/Skeleton/Skeleton.js";
 import { Slider } from "./components/Slider/Slider.js";
 import { SourceChip } from "./components/SourceChip/SourceChip.js";
+import { SourceTrail } from "./components/SourceTrail/SourceTrail.js";
 import { Sparkline } from "./components/Sparkline/Sparkline.js";
 import { Spinner } from "./components/Spinner/Spinner.js";
 import { SplitButton } from "./components/SplitButton/SplitButton.js";
@@ -110,6 +110,7 @@ import { ToggleSwitch } from "./components/ToggleSwitch/ToggleSwitch.js";
 import { ToolCall } from "./components/ToolCall/ToolCall.js";
 import { Tooltip } from "./components/Tooltip/Tooltip.js";
 import { TreeView } from "./components/TreeView/TreeView.js";
+import { UsageCard } from "./components/UsageCard/UsageCard.js";
 import { COMPONENT_COUNT, componentCategories, componentCategoryMetadata, componentMetadata, componentRegistry } from "./components/registry.js";
 import { TOKEN_COUNT, TOKEN_COUNTS, tokenRegistry } from "./tokens/registry.js";
 import { BLOB_COUNT } from "./components/ShaderField/field.glsl.js";
@@ -173,7 +174,6 @@ export {
   Figure,
   FileInput,
   FilterBar,
-  FunnelChart,
   Gauge,
   Globe,
   HoverCard,
@@ -214,6 +214,7 @@ export {
   Skeleton,
   Slider,
   SourceChip,
+  SourceTrail,
   Sparkline,
   Spinner,
   SplitButton,
@@ -237,6 +238,7 @@ export {
   ToolCall,
   Tooltip,
   TreeView,
+  UsageCard,
   agentStatusPatterns,
   componentCategories,
   componentCategoryMetadata,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robr0/design-system",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "An AI-ready React design system: accessible components on composable tokens, light/dark theming, and CSS-variable overrides.",
   "license": "MIT",
   "repository": {

package/tokens/registry.json

@@ -4,6 +4,10 @@
     "colour": [
       "--color-action-icon-active",
       "--color-action-icon-default",
+      "--color-action-neutral-bg",
+      "--color-action-neutral-bg-active",
+      "--color-action-neutral-bg-hover",
+      "--color-action-neutral-text",
       "--color-action-passive-bg",
       "--color-action-passive-bg-active",
       "--color-action-passive-bg-hover",

package/tokens/registry.json.d.ts

@@ -4,6 +4,10 @@ declare const _default: {
     "colour": [
       "--color-action-icon-active",
       "--color-action-icon-default",
+      "--color-action-neutral-bg",
+      "--color-action-neutral-bg-active",
+      "--color-action-neutral-bg-hover",
+      "--color-action-neutral-text",
       "--color-action-passive-bg",
       "--color-action-passive-bg-active",
       "--color-action-passive-bg-hover",

package/tokens/registry.json.js

@@ -1,4 +1,4 @@
-const categories = { "colour": ["--color-action-icon-active", "--color-action-icon-default", "--color-action-passive-bg", "--color-action-passive-bg-active", "--color-action-passive-bg-hover", "--color-action-passive-text", "--color-action-primary-bg", "--color-action-primary-bg-active", "--color-action-primary-bg-hover", "--color-action-primary-border", "--color-action-primary-border-secondary", "--color-action-primary-border-tertiary", "--color-action-primary-text", "--color-action-primary-text-active", "--color-action-primary-text-secondary", "--color-action-primary-text-tertiary", "--color-ai-gradient-end", "--color-ai-gradient-mid", "--color-ai-gradient-start", "--color-bg-container-border", "--color-bg-container-inverse", "--color-bg-container-primary", "--color-bg-container-primary-semi", "--color-bg-container-primary-transparent", "--color-bg-container-secondary", "--color-bg-container-tertiary", "--color-bg-glass", "--color-bg-page-inverse", "--color-bg-page-primary", "--color-chart-contribution-0", "--color-chart-contribution-1", "--color-chart-contribution-2", "--color-chart-contribution-3", "--color-chart-contribution-4", "--color-chart-series-1", "--color-chart-series-2", "--color-chart-series-3", "--color-chart-series-4", "--color-chart-series-5", "--color-chart-series-6", "--color-chart-series-7", "--color-chat-bubble-received-bg", "--color-chat-bubble-received-text", "--color-chat-bubble-sent-bg", "--color-chat-bubble-sent-text", "--color-control-thumb", "--color-core-accent-amber", "--color-core-accent-cobalt", "--color-core-accent-coral", "--color-core-accent-gold", "--color-core-accent-mint", "--color-core-accent-violet", "--color-core-ui-primary", "--color-core-ui-secondary", "--color-divider", "--color-icon-primary", "--color-icon-secondary", "--color-input-bg-disabled", "--color-input-bg-primary", "--color-input-border-disabled", "--color-input-border-hover", "--color-input-border-primary", "--color-input-border-selected", "--color-input-text-disabled", "--color-input-text-inverse", "--color-input-text-placeholder", "--color-input-text-primary", "--color-scrim", "--color-status-error-bg", "--color-status-error-border", "--color-status-error-text", "--color-status-info-bg", "--color-status-info-border", "--color-status-info-text", "--color-status-neutral-bg", "--color-status-neutral-border", "--color-status-neutral-text", "--color-status-positive-bg", "--color-status-positive-border", "--color-status-positive-text", "--color-status-warning-bg", "--color-status-warning-border", "--color-status-warning-text", "--color-text-inverse", "--color-text-on-inverse", "--color-text-primary", "--color-text-secondary", "--color-text-tertiary", "--color-trend-down", "--color-trend-up"], "typography": ["--font-caption-family", "--font-caption-letter-spacing", "--font-caption-line-height", "--font-caption-size", "--font-caption-weight", "--font-display-1-family", "--font-display-1-letter-spacing", "--font-display-1-line-height", "--font-display-1-size", "--font-display-1-weight", "--font-display-2-family", "--font-display-2-letter-spacing", "--font-display-2-line-height", "--font-display-2-size", "--font-display-2-weight", "--font-family-code", "--font-family-primary", "--font-heading-1-family", "--font-heading-1-letter-spacing", "--font-heading-1-line-height", "--font-heading-1-size", "--font-heading-1-weight", "--font-heading-2-family", "--font-heading-2-letter-spacing", "--font-heading-2-line-height", "--font-heading-2-size", "--font-heading-2-weight", "--font-heading-3-family", "--font-heading-3-letter-spacing", "--font-heading-3-line-height", "--font-heading-3-size", "--font-heading-3-weight", "--font-mega-1-family", "--font-mega-1-letter-spacing", "--font-mega-1-line-height", "--font-mega-1-size", "--font-mega-1-weight", "--font-mega-2-family", "--font-mega-2-letter-spacing", "--font-mega-2-line-height", "--font-mega-2-size", "--font-mega-2-weight", "--font-overline-family", "--font-overline-letter-spacing", "--font-overline-line-height", "--font-overline-size", "--font-overline-weight", "--font-paragraph-em-family", "--font-paragraph-em-letter-spacing", "--font-paragraph-em-line-height", "--font-paragraph-em-size", "--font-paragraph-em-weight", "--font-paragraph-family", "--font-paragraph-letter-spacing", "--font-paragraph-line-height", "--font-paragraph-size", "--font-paragraph-sm-em-family", "--font-paragraph-sm-em-letter-spacing", "--font-paragraph-sm-em-line-height", "--font-paragraph-sm-em-size", "--font-paragraph-sm-em-weight", "--font-paragraph-sm-family", "--font-paragraph-sm-letter-spacing", "--font-paragraph-sm-line-height", "--font-paragraph-sm-size", "--font-paragraph-sm-weight", "--font-paragraph-weight", "--font-sub-display-family", "--font-sub-display-letter-spacing", "--font-sub-display-line-height", "--font-sub-display-size", "--font-sub-display-weight", "--font-title-body-family", "--font-title-body-letter-spacing", "--font-title-body-line-height", "--font-title-body-size", "--font-title-body-weight"], "spacing": ["--gap-lg", "--gap-md", "--gap-sm", "--gap-sm-md", "--gap-xl", "--gap-xs", "--gap-xxl", "--gap-xxs", "--gap-xxxl", "--gap-xxxxl", "--padding-lg", "--padding-md", "--padding-sm", "--padding-sm-md", "--padding-xl", "--padding-xs", "--padding-xxl", "--padding-xxs", "--padding-xxxs"], "radius": ["--radius-composer", "--radius-full", "--radius-lg", "--radius-md", "--radius-sm", "--radius-xl", "--radius-xs", "--radius-xxl", "--radius-xxs"], "border": ["--border-md", "--border-xs"], "shadow": ["--shadow-floating", "--shadow-modal"], "icons": ["--icon-size-lg", "--icon-size-md", "--icon-size-sm", "--icon-size-xl"], "motion": ["--motion-duration-base", "--motion-duration-deliberate", "--motion-duration-fast", "--motion-duration-instant", "--motion-duration-loop-matrix", "--motion-duration-loop-shimmer", "--motion-duration-loop-spin", "--motion-duration-slow", "--motion-duration-slower", "--motion-ease-emphasized", "--motion-ease-entrance", "--motion-ease-linear", "--motion-ease-spring", "--motion-ease-standard"] };
+const categories = { "colour": ["--color-action-icon-active", "--color-action-icon-default", "--color-action-neutral-bg", "--color-action-neutral-bg-active", "--color-action-neutral-bg-hover", "--color-action-neutral-text", "--color-action-passive-bg", "--color-action-passive-bg-active", "--color-action-passive-bg-hover", "--color-action-passive-text", "--color-action-primary-bg", "--color-action-primary-bg-active", "--color-action-primary-bg-hover", "--color-action-primary-border", "--color-action-primary-border-secondary", "--color-action-primary-border-tertiary", "--color-action-primary-text", "--color-action-primary-text-active", "--color-action-primary-text-secondary", "--color-action-primary-text-tertiary", "--color-ai-gradient-end", "--color-ai-gradient-mid", "--color-ai-gradient-start", "--color-bg-container-border", "--color-bg-container-inverse", "--color-bg-container-primary", "--color-bg-container-primary-semi", "--color-bg-container-primary-transparent", "--color-bg-container-secondary", "--color-bg-container-tertiary", "--color-bg-glass", "--color-bg-page-inverse", "--color-bg-page-primary", "--color-chart-contribution-0", "--color-chart-contribution-1", "--color-chart-contribution-2", "--color-chart-contribution-3", "--color-chart-contribution-4", "--color-chart-series-1", "--color-chart-series-2", "--color-chart-series-3", "--color-chart-series-4", "--color-chart-series-5", "--color-chart-series-6", "--color-chart-series-7", "--color-chat-bubble-received-bg", "--color-chat-bubble-received-text", "--color-chat-bubble-sent-bg", "--color-chat-bubble-sent-text", "--color-control-thumb", "--color-core-accent-amber", "--color-core-accent-cobalt", "--color-core-accent-coral", "--color-core-accent-gold", "--color-core-accent-mint", "--color-core-accent-violet", "--color-core-ui-primary", "--color-core-ui-secondary", "--color-divider", "--color-icon-primary", "--color-icon-secondary", "--color-input-bg-disabled", "--color-input-bg-primary", "--color-input-border-disabled", "--color-input-border-hover", "--color-input-border-primary", "--color-input-border-selected", "--color-input-text-disabled", "--color-input-text-inverse", "--color-input-text-placeholder", "--color-input-text-primary", "--color-scrim", "--color-status-error-bg", "--color-status-error-border", "--color-status-error-text", "--color-status-info-bg", "--color-status-info-border", "--color-status-info-text", "--color-status-neutral-bg", "--color-status-neutral-border", "--color-status-neutral-text", "--color-status-positive-bg", "--color-status-positive-border", "--color-status-positive-text", "--color-status-warning-bg", "--color-status-warning-border", "--color-status-warning-text", "--color-text-inverse", "--color-text-on-inverse", "--color-text-primary", "--color-text-secondary", "--color-text-tertiary", "--color-trend-down", "--color-trend-up"], "typography": ["--font-caption-family", "--font-caption-letter-spacing", "--font-caption-line-height", "--font-caption-size", "--font-caption-weight", "--font-display-1-family", "--font-display-1-letter-spacing", "--font-display-1-line-height", "--font-display-1-size", "--font-display-1-weight", "--font-display-2-family", "--font-display-2-letter-spacing", "--font-display-2-line-height", "--font-display-2-size", "--font-display-2-weight", "--font-family-code", "--font-family-primary", "--font-heading-1-family", "--font-heading-1-letter-spacing", "--font-heading-1-line-height", "--font-heading-1-size", "--font-heading-1-weight", "--font-heading-2-family", "--font-heading-2-letter-spacing", "--font-heading-2-line-height", "--font-heading-2-size", "--font-heading-2-weight", "--font-heading-3-family", "--font-heading-3-letter-spacing", "--font-heading-3-line-height", "--font-heading-3-size", "--font-heading-3-weight", "--font-mega-1-family", "--font-mega-1-letter-spacing", "--font-mega-1-line-height", "--font-mega-1-size", "--font-mega-1-weight", "--font-mega-2-family", "--font-mega-2-letter-spacing", "--font-mega-2-line-height", "--font-mega-2-size", "--font-mega-2-weight", "--font-overline-family", "--font-overline-letter-spacing", "--font-overline-line-height", "--font-overline-size", "--font-overline-weight", "--font-paragraph-em-family", "--font-paragraph-em-letter-spacing", "--font-paragraph-em-line-height", "--font-paragraph-em-size", "--font-paragraph-em-weight", "--font-paragraph-family", "--font-paragraph-letter-spacing", "--font-paragraph-line-height", "--font-paragraph-size", "--font-paragraph-sm-em-family", "--font-paragraph-sm-em-letter-spacing", "--font-paragraph-sm-em-line-height", "--font-paragraph-sm-em-size", "--font-paragraph-sm-em-weight", "--font-paragraph-sm-family", "--font-paragraph-sm-letter-spacing", "--font-paragraph-sm-line-height", "--font-paragraph-sm-size", "--font-paragraph-sm-weight", "--font-paragraph-weight", "--font-sub-display-family", "--font-sub-display-letter-spacing", "--font-sub-display-line-height", "--font-sub-display-size", "--font-sub-display-weight", "--font-title-body-family", "--font-title-body-letter-spacing", "--font-title-body-line-height", "--font-title-body-size", "--font-title-body-weight"], "spacing": ["--gap-lg", "--gap-md", "--gap-sm", "--gap-sm-md", "--gap-xl", "--gap-xs", "--gap-xxl", "--gap-xxs", "--gap-xxxl", "--gap-xxxxl", "--padding-lg", "--padding-md", "--padding-sm", "--padding-sm-md", "--padding-xl", "--padding-xs", "--padding-xxl", "--padding-xxs", "--padding-xxxs"], "radius": ["--radius-composer", "--radius-full", "--radius-lg", "--radius-md", "--radius-sm", "--radius-xl", "--radius-xs", "--radius-xxl", "--radius-xxs"], "border": ["--border-md", "--border-xs"], "shadow": ["--shadow-floating", "--shadow-modal"], "icons": ["--icon-size-lg", "--icon-size-md", "--icon-size-sm", "--icon-size-xl"], "motion": ["--motion-duration-base", "--motion-duration-deliberate", "--motion-duration-fast", "--motion-duration-instant", "--motion-duration-loop-matrix", "--motion-duration-loop-shimmer", "--motion-duration-loop-spin", "--motion-duration-slow", "--motion-duration-slower", "--motion-ease-emphasized", "--motion-ease-entrance", "--motion-ease-linear", "--motion-ease-spring", "--motion-ease-standard"] };
 const registry = {
   categories
 };

package/tokens/tokens-dark.css

@@ -75,6 +75,14 @@
   --color-action-passive-bg-hover: var(--primitive-neutral-08-semi);
   --color-action-passive-bg-active: var(--primitive-neutral-07-semi);
 
+  /* Action - Neutral (grey filled buttons). The fill stays visible at
+     rest, one step above the container greys; hover and active brighten
+     toward the page's opposite, like the primary family. */
+  --color-action-neutral-bg: var(--primitive-neutral-08);
+  --color-action-neutral-bg-hover: var(--primitive-neutral-07);
+  --color-action-neutral-bg-active: var(--primitive-neutral-06);
+  --color-action-neutral-text: var(--primitive-neutral-01);
+
   /* Status - Positive */
   --color-status-positive-bg: var(--primitive-green-10);
   --color-status-positive-border: var(--primitive-green-07);
@@ -100,8 +108,9 @@
   --color-status-neutral-border: var(--primitive-neutral-06);
   --color-status-neutral-text: var(--primitive-neutral-01);
 
-  /* AI - The gradient accent, one step brighter than light mode so the ring
-     stays luminous on dark surfaces. */
+  /* AI - The gradient accent: the same luminous stops as light. One set
+     works on both floors, so the AI signature never shifts hue with the
+     theme. */
   --color-ai-gradient-start: var(--primitive-red-05);
   --color-ai-gradient-mid: var(--primitive-blue-05);
   --color-ai-gradient-end: var(--primitive-teal-07);

package/tokens/tokens-light.css

@@ -19,22 +19,25 @@
   --color-icon-secondary: var(--primitive-neutral-04);
 
   /* Background - Page */
-  --color-bg-page-primary: var(--primitive-neutral-00);
+  --color-bg-page-primary: var(--primitive-neutral-01);
   --color-bg-page-inverse: var(--primitive-neutral-10);
 
   /* Background - Container */
-  --color-bg-container-primary: var(--primitive-neutral-01);
-  --color-bg-container-primary-transparent: var(--primitive-neutral-01-transparent);
-  --color-bg-container-primary-semi: var(--primitive-neutral-01-semi);
-  --color-bg-container-secondary: var(--primitive-neutral-02);
-  --color-bg-container-tertiary: var(--primitive-neutral-03);
+  --color-bg-container-primary: var(--primitive-neutral-00);
+  --color-bg-container-primary-transparent: var(--primitive-neutral-00-transparent);
+  /* The semi surface rides the glass-strength white, not the 60% one: light
+     containers should read bright white, with the ambient background only
+     whispering through. */
+  --color-bg-container-primary-semi: var(--primitive-neutral-00-glass);
+  --color-bg-container-secondary: var(--primitive-neutral-01);
+  --color-bg-container-tertiary: var(--primitive-neutral-02);
   --color-bg-container-inverse: var(--primitive-neutral-09);
   --color-bg-container-border: var(--primitive-neutral-02);
 
   /* Glass: the translucent floating-surface fill (chat panel, floating
      sidebar). Deliberately translucent in both themes so the page's
      colours reach the surface; pair it with backdrop-filter: blur(24px). */
-  --color-bg-glass: var(--primitive-neutral-01-glass);
+  --color-bg-glass: var(--primitive-neutral-00-glass);
 
   /* Divider */
   --color-divider: var(--primitive-neutral-02-semi);
@@ -81,6 +84,15 @@
   --color-action-passive-bg-hover: var(--primitive-neutral-02-semi);
   --color-action-passive-bg-active: var(--primitive-neutral-03-semi);
 
+  /* Action - Neutral (grey filled buttons). Unlike passive, the fill is a
+     solid grey step that stays visible at rest — a filled button without
+     the action teal's "click here" weight. Hover and active deepen in
+     light mode and brighten in dark, like the primary family. */
+  --color-action-neutral-bg: var(--primitive-neutral-02);
+  --color-action-neutral-bg-hover: var(--primitive-neutral-03);
+  --color-action-neutral-bg-active: var(--primitive-neutral-04);
+  --color-action-neutral-text: var(--primitive-neutral-10);
+
   /* Core colours */
   --color-core-ui-primary: var(--primitive-teal-08);
   --color-core-ui-secondary: var(--primitive-teal-10);
@@ -125,10 +137,12 @@
   /* AI - The gradient accent reserved for AI entry points and surfaces.
      Red → blue → teal, so the AI affordance is its own signature and the
      flat action teal keeps meaning "click here". Used as gradient stops
-     (AiButton's ring and glow), never as fills for ordinary chrome. */
-  --color-ai-gradient-start: var(--primitive-red-06);
-  --color-ai-gradient-mid: var(--primitive-blue-06);
-  --color-ai-gradient-end: var(--primitive-teal-08);
+     (AiButton's ring and glow), never as fills for ordinary chrome.
+     One luminous set, shared with dark: the deeper inks read as a heavy
+     dark border on white surfaces. */
+  --color-ai-gradient-start: var(--primitive-red-05);
+  --color-ai-gradient-mid: var(--primitive-blue-05);
+  --color-ai-gradient-end: var(--primitive-teal-07);
 
   /* Chart - Contribution heatmap ramp (level 0 = none → level 4 = most) */
   --color-chart-contribution-0: var(--color-bg-container-primary);

package/tokens/tokens-primitives.css

@@ -11,6 +11,9 @@
 
   /* Neutral Scale */
   --primitive-neutral-00: #FFFFFF;
+  --primitive-neutral-00-transparent: rgba(255, 255, 255, 0.01);
+  --primitive-neutral-00-semi: rgba(255, 255, 255, 0.6);
+  --primitive-neutral-00-glass: rgba(255, 255, 255, 0.9);
   --primitive-neutral-01: #F1F1F1;
   --primitive-neutral-01-transparent: rgba(241, 241, 241, 0.01);
   --primitive-neutral-01-semi: rgba(241, 241, 241, 0.6);