@robr0/design-system 0.10.0 → 0.12.0

package/tokens/registry.json.d.ts

@@ -28,6 +28,7 @@ declare const _default: {
       "--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",
@@ -35,6 +36,13 @@ declare const _default: {
       "--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",
@@ -81,9 +89,16 @@ declare const _default: {
       "--color-text-on-inverse",
       "--color-text-primary",
       "--color-text-secondary",
-      "--color-text-tertiary"
+      "--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",
@@ -121,6 +136,11 @@ declare const _default: {
       "--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",

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-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-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-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

@@ -29,6 +29,7 @@
   --color-bg-container-tertiary: var(--primitive-neutral-08);
   --color-bg-container-inverse: var(--primitive-neutral-01);
   --color-bg-container-border: var(--primitive-neutral-08);
+  --color-bg-glass: var(--primitive-neutral-09-glass);
 
   /* Divider */
   --color-divider: var(--primitive-neutral-08-semi);
@@ -112,6 +113,17 @@
   --color-chart-contribution-3: var(--primitive-green-08);
   --color-chart-contribution-4: var(--primitive-green-07);
 
+  /* Chart - Ordered series ramp for multi-series charts. Series 1 follows
+     the action teal (theme-split with it); 2-7 alias the core accents, so
+     re-theming an accent re-themes every chart that uses its slot. */
+  --color-chart-series-1: var(--color-action-primary-bg);
+  --color-chart-series-2: var(--color-core-accent-mint);
+  --color-chart-series-3: var(--color-core-accent-gold);
+  --color-chart-series-4: var(--color-core-accent-coral);
+  --color-chart-series-5: var(--color-core-accent-violet);
+  --color-chart-series-6: var(--color-core-accent-amber);
+  --color-chart-series-7: var(--color-core-accent-cobalt);
+
   /* Input */
   --color-input-text-primary: var(--primitive-neutral-01);
   --color-input-text-placeholder: var(--primitive-neutral-04);
@@ -133,4 +145,6 @@
   --color-core-accent-amber: var(--primitive-orange-07);
   --color-core-accent-gold: var(--primitive-yellow-07);
   --color-core-accent-mint: var(--primitive-green-07);
+  --color-trend-up: var(--primitive-green-07);
+  --color-trend-down: var(--primitive-red-07);
 }

package/tokens/tokens-light.css

@@ -31,6 +31,11 @@
   --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);
+
   /* Divider */
   --color-divider: var(--primitive-neutral-02-semi);
 
@@ -86,6 +91,12 @@
   --color-core-accent-gold: var(--primitive-yellow-07);
   --color-core-accent-mint: var(--primitive-green-07);
 
+  /* Trend: the "number went up / went down" role (Stat deltas, table
+     movers). Theme-split for contrast: deep status inks on light
+     surfaces, the mint/coral accents on dark ones. */
+  --color-trend-up: var(--primitive-green-10);
+  --color-trend-down: var(--primitive-red-10);
+
   /* Status - Positive */
   --color-status-positive-bg: var(--primitive-green-01);
   --color-status-positive-border: var(--primitive-green-07);
@@ -126,6 +137,17 @@
   --color-chart-contribution-3: var(--primitive-green-07);
   --color-chart-contribution-4: var(--primitive-green-09);
 
+  /* Chart - Ordered series ramp for multi-series charts. Series 1 follows
+     the action teal (theme-split with it); 2-7 alias the core accents, so
+     re-theming an accent re-themes every chart that uses its slot. */
+  --color-chart-series-1: var(--color-action-primary-bg);
+  --color-chart-series-2: var(--color-core-accent-mint);
+  --color-chart-series-3: var(--color-core-accent-gold);
+  --color-chart-series-4: var(--color-core-accent-coral);
+  --color-chart-series-5: var(--color-core-accent-violet);
+  --color-chart-series-6: var(--color-core-accent-amber);
+  --color-chart-series-7: var(--color-core-accent-cobalt);
+
   /* Input */
   --color-input-text-primary: var(--primitive-neutral-10);
   --color-input-text-placeholder: var(--primitive-neutral-06);

package/tokens/tokens-primitives.css

@@ -14,6 +14,7 @@
   --primitive-neutral-01: #F1F1F1;
   --primitive-neutral-01-transparent: rgba(241, 241, 241, 0.01);
   --primitive-neutral-01-semi: rgba(241, 241, 241, 0.6);
+  --primitive-neutral-01-glass: rgba(241, 241, 241, 0.82);
   --primitive-neutral-02: #D6D6D6;
   --primitive-neutral-02-semi: rgba(214, 214, 214, 0.8);
   --primitive-neutral-03: #BCBCBC;
@@ -29,6 +30,7 @@
   --primitive-neutral-09-transparent: rgba(14, 14, 14, 0.01);
   --primitive-neutral-09-semi: rgba(14, 14, 14, 0.8);
   --primitive-neutral-09-semi-transparent: rgba(14, 14, 14, 0.6);
+  --primitive-neutral-09-glass: rgba(14, 14, 14, 0.66);
   --primitive-neutral-10: #050505;
   --primitive-neutral-10-semi: rgba(5, 5, 5, 0.6);
   --primitive-neutral-10-subtle: rgba(5, 5, 5, 0.01);

package/tokens/tokens-typography.css

@@ -18,34 +18,41 @@
 
   /* ============================================
      DISPLAY STYLES (Large headlines)
+
+     Leading is unitless across this tier and loosens as the size drops:
+     0.92 on Mega, 1.05 on Display 1, 1.1 on Display 2. A display line
+     set solid reads as a poster on one line and as a stack on two, and
+     these headlines wrap — a page title is a sentence, not a word. The
+     ratios are the smallest step that opens a wrapped title without
+     costing the tier its density.
      ============================================ */
 
   /* Mega 1 - Largest display text */
   --font-mega-1-family: var(--font-family-primary);
   --font-mega-1-size: 132px;
   --font-mega-1-weight: 300;
-  --font-mega-1-line-height: 0.85;
+  --font-mega-1-line-height: 0.92;
   --font-mega-1-letter-spacing: 0.02em; /* 2% */
 
   /* Mega 2 */
   --font-mega-2-family: var(--font-family-primary);
   --font-mega-2-size: 116px;
   --font-mega-2-weight: 300;
-  --font-mega-2-line-height: 0.85;
+  --font-mega-2-line-height: 0.92;
   --font-mega-2-letter-spacing: 0.02em; /* 2% */
 
   /* Display 1 */
   --font-display-1-family: var(--font-family-primary);
   --font-display-1-size: 96px;
   --font-display-1-weight: 300;
-  --font-display-1-line-height: 1;
+  --font-display-1-line-height: 1.05;
   --font-display-1-letter-spacing: 0.02em; /* 2% */
 
   /* Display 2 */
   --font-display-2-family: var(--font-family-primary);
   --font-display-2-size: 64px;
   --font-display-2-weight: 300;
-  --font-display-2-line-height: 1;
+  --font-display-2-line-height: 1.1;
   --font-display-2-letter-spacing: 0.015em; /* 1.5% */
 
   /* Sub Display */
@@ -118,6 +125,26 @@
   --font-paragraph-sm-em-weight: 500;
   --font-paragraph-sm-em-line-height: 20px;
   --font-paragraph-sm-em-letter-spacing: 0;
+
+  /* Overline — the uppercase label face: an eyebrow over a title, a map
+     callout's place name, a code block's language chip. Small and bold with
+     open tracking, because capitals at this size need air to stay legible.
+     Pair with text-transform: uppercase at the use site — the tokens set the
+     metrics, never the casing. */
+  --font-overline-family: var(--font-family-primary);
+  --font-overline-size: 14px;
+  --font-overline-weight: 600;
+  --font-overline-line-height: 20px;
+  --font-overline-letter-spacing: 0.08em; /* +8% */
+
+  /* Caption — the floor of the scale. Footnotes and disclaimers: a line the
+     reader should be able to find but never has to read to use the screen.
+     Never on a control, never for running text. */
+  --font-caption-family: var(--font-family-primary);
+  --font-caption-size: 12px;
+  --font-caption-weight: 400;
+  --font-caption-line-height: 16px;
+  --font-caption-letter-spacing: 0;
 }
 
 /* ============================================
@@ -133,7 +160,7 @@
     --font-mega-2-size: 56px;
     --font-display-1-size: 48px;
     --font-display-2-size: 40px;
-    --font-display-2-line-height: 1.05;
+    --font-display-2-line-height: 1.15;
     --font-sub-display-size: 24px;
     --font-sub-display-line-height: 36px;
   }