@robr0/design-system 0.4.0 → 0.5.0

package/tokens/registry.json

@@ -18,6 +18,9 @@
       "--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",
@@ -32,6 +35,10 @@
       "--color-chart-contribution-2",
       "--color-chart-contribution-3",
       "--color-chart-contribution-4",
+      "--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",
@@ -87,6 +94,7 @@
       "--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",
@@ -151,13 +159,17 @@
       "--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"
     ],

package/tokens/registry.json.d.ts

@@ -18,6 +18,9 @@ declare const _default: {
       "--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",
@@ -32,6 +35,10 @@ declare const _default: {
       "--color-chart-contribution-2",
       "--color-chart-contribution-3",
       "--color-chart-contribution-4",
+      "--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",
@@ -87,6 +94,7 @@ declare const _default: {
       "--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",
@@ -151,13 +159,17 @@ declare const _default: {
       "--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"
     ],

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-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-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-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"], "typography": ["--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-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-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-xxs", "--padding-lg", "--padding-md", "--padding-sm", "--padding-sm-md", "--padding-xl", "--padding-xs", "--padding-xxs", "--padding-xxxs"], "radius": ["--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-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-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-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-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"], "typography": ["--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-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-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-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

@@ -33,6 +33,13 @@
   /* Divider */
   --color-divider: var(--primitive-neutral-08-semi);
 
+  /* Chat bubbles — alias the same roles as light; the underlying container
+     and text tokens carry the theme swap. */
+  --color-chat-bubble-sent-bg: var(--color-bg-container-secondary);
+  --color-chat-bubble-sent-text: var(--color-text-primary);
+  --color-chat-bubble-received-bg: var(--color-bg-container-secondary);
+  --color-chat-bubble-received-text: var(--color-text-primary);
+
   /* Overlay & controls */
   --color-scrim: var(--primitive-true-black-strong);
   --color-control-thumb: var(--primitive-neutral-01);
@@ -88,6 +95,12 @@
   --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. */
+  --color-ai-gradient-start: var(--primitive-purple-05);
+  --color-ai-gradient-mid: var(--primitive-blue-05);
+  --color-ai-gradient-end: var(--primitive-teal-05);
+
   /* Chart - Contribution heatmap ramp (level 0 = none → level 4 = most) */
   --color-chart-contribution-0: var(--primitive-neutral-08);
   --color-chart-contribution-1: var(--primitive-green-10);

package/tokens/tokens-light.css

@@ -34,6 +34,15 @@
   /* Divider */
   --color-divider: var(--primitive-neutral-02-semi);
 
+  /* Chat bubbles — sent (the person) and received (the agent). Both alias
+     the container-secondary / text-primary pair today; they exist as their
+     own roles so chat surfaces can be re-themed later without touching the
+     container ramp. */
+  --color-chat-bubble-sent-bg: var(--color-bg-container-secondary);
+  --color-chat-bubble-sent-text: var(--color-text-primary);
+  --color-chat-bubble-received-bg: var(--color-bg-container-secondary);
+  --color-chat-bubble-received-text: var(--color-text-primary);
+
   /* Overlay & controls */
   --color-scrim: var(--primitive-true-black-semi);
   --color-control-thumb: var(--primitive-neutral-00);
@@ -99,6 +108,14 @@
   --color-status-neutral-border: var(--primitive-neutral-07);
   --color-status-neutral-text: var(--primitive-neutral-08);
 
+  /* AI - The gradient accent reserved for AI entry points and surfaces.
+     Purple → 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-purple-06);
+  --color-ai-gradient-mid: var(--primitive-blue-06);
+  --color-ai-gradient-end: var(--primitive-teal-06);
+
   /* Chart - Contribution heatmap ramp (level 0 = none → level 4 = most) */
   --color-chart-contribution-0: var(--color-bg-container-primary);
   --color-chart-contribution-1: var(--primitive-green-02);
@@ -156,4 +173,29 @@
   --gap-md: var(--primitive-gap-md);
   --gap-lg: var(--primitive-gap-lg);
   --gap-xl: var(--primitive-gap-xl);
+
+  /* Section rhythm — page-level spacing between major blocks. These are
+     the only spacing tokens with a responsive step (see the collapse
+     block at the bottom of this file). */
+  --gap-xxl: var(--primitive-gap-xxl);       /* 60px */
+  --gap-xxxl: var(--primitive-gap-xxxl);     /* 80px */
+  --gap-xxxxl: var(--primitive-gap-xxxxl);   /* 120px */
+  --padding-xxl: var(--primitive-padding-xxl); /* 60px */
+}
+
+/* ============================================
+   RESPONSIVE COLLAPSE
+   Section-rhythm spacing steps one notch down the primitive scale at
+   768px — the token layer's only breakpoint (typography collapses at the
+   same threshold in tokens-typography.css). Component-level spacing
+   (gap/padding xl and below) never steps.
+   ============================================ */
+
+@media (max-width: 768px) {
+  [data-theme="light"], :root {
+    --gap-xxl: var(--primitive-gap-xl);        /* 60 → 40 */
+    --gap-xxxl: var(--primitive-gap-xxl);      /* 80 → 60 */
+    --gap-xxxxl: var(--primitive-gap-xxxl);    /* 120 → 80 */
+    --padding-xxl: var(--primitive-padding-xl); /* 60 → 40 */
+  }
 }

package/tokens/tokens-typography.css

@@ -11,6 +11,11 @@
 
   --font-family-primary: 'Nunito Sans', sans-serif;
 
+  /* The one sanctioned monospace stack — CodeBlock, ToolCall names, and
+     Prose inline code. Anything monospace references this token. */
+  --font-family-code: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
+    monospace;
+
   /* ============================================
      DISPLAY STYLES (Large headlines)
      ============================================ */
@@ -114,3 +119,22 @@
   --font-paragraph-sm-em-line-height: 20px;
   --font-paragraph-sm-em-letter-spacing: 0;
 }
+
+/* ============================================
+   RESPONSIVE COLLAPSE
+   The display tier steps down once, at 768px — the token layer's only
+   breakpoint. Headings and body never step; weights and letter-spacing
+   never change at any breakpoint (weight contrast is the hierarchy rule).
+   ============================================ */
+
+@media (max-width: 768px) {
+  :root {
+    --font-mega-1-size: 64px;
+    --font-mega-2-size: 56px;
+    --font-display-1-size: 48px;
+    --font-display-2-size: 40px;
+    --font-display-2-line-height: 1.05;
+    --font-sub-display-size: 24px;
+    --font-sub-display-line-height: 36px;
+  }
+}