@tangle-network/brand 1.9.0 → 1.10.0

package/src/styles/named-themes.css

@@ -5,35 +5,43 @@
  * is the neutral "tangle" theme — also selectable by name as "tangle-dark";
  * "<name>-light" scopes are the light variants. */
 
-/* Bridge — the actual re-skin mechanism. Tailwind utilities read the --color-*
- * layer (theme.css @theme: `bg-card` → var(--color-card) = hsl(var(--card))).
- * Both --color-* and its --card/--hsl-card source are declared only at :root, so
- * a descendant [data-theme] that changes --hsl-card never re-substitutes the
- * :root-computed --color-card the utility consumes — the value is frozen at the
- * root color (double-indirection inheritance trap). Redeclaring the --color-*
- * layer directly on any themed element forces each one to recompute from that
- * element's own --hsl-*. Tokens a theme doesn't override fall back to the
- * inherited neutral --hsl-* (all defined at :root), so this is always valid. */
+/* Compatibility for consumers compiled to var(--color-*). Tailwind's inline
+ * theme mapping handles newly compiled utilities, but precompiled consumers
+ * must also re-resolve their aliases on every theme boundary, not only root. */
+:root,
+.dark,
+.light,
+[data-sandbox-ui],
+[data-sandbox-theme],
 [data-theme] {
-  --color-background: hsl(var(--hsl-background));
-  --color-foreground: hsl(var(--hsl-foreground));
-  --color-card: hsl(var(--hsl-card));
-  --color-card-foreground: hsl(var(--hsl-card-foreground));
-  --color-popover: hsl(var(--hsl-popover));
-  --color-popover-foreground: hsl(var(--hsl-popover-foreground));
-  --color-primary: hsl(var(--hsl-primary));
-  --color-primary-foreground: hsl(var(--hsl-primary-foreground));
-  --color-secondary: hsl(var(--hsl-secondary));
-  --color-secondary-foreground: hsl(var(--hsl-secondary-foreground));
-  --color-muted: hsl(var(--hsl-muted));
-  --color-muted-foreground: hsl(var(--hsl-muted-foreground));
-  --color-accent: hsl(var(--hsl-accent));
-  --color-accent-foreground: hsl(var(--hsl-accent-foreground));
-  --color-destructive: hsl(var(--hsl-destructive));
-  --color-destructive-foreground: hsl(var(--hsl-destructive-foreground));
-  --color-border: hsl(var(--hsl-border));
-  --color-input: hsl(var(--hsl-muted-foreground));
-  --color-ring: hsl(var(--hsl-ring));
+  --text-display: var(--font-size-display);
+  --text-hero: var(--font-size-hero);
+  --text-page: var(--font-size-3xl);
+  --text-section: var(--font-size-xl);
+  --text-eyebrow: var(--font-size-sm);
+  --color-depth-1: var(--depth-1);
+  --color-depth-2: var(--depth-2);
+  --color-depth-3: var(--depth-3);
+  --color-depth-4: var(--depth-4);
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
   --color-surface-container-lowest: var(--md3-surface-container-lowest);
   --color-surface-container-low: var(--md3-surface-container-low);
   --color-surface-container: var(--md3-surface-container);
@@ -44,47 +52,15 @@
   --color-fg-dim: var(--text-dim);
 }
 
-/* Light-tuned status palette for the named light scopes. Without this they
- * inherit the dark :root status colors (bright #f87171/#34D399/…), which fail
- * WCAG on a light surface — status text + glyphs drop to ~2.5:1. These mirror
- * tokens.css `[data-theme="light"]` (dark-on-light status text that passes AA). */
+/* Named-specific light ink. All shared status and syntax colors now come
+ * from the complete canonical light baseline in tokens.css. */
 [data-theme="aubergine-light"],
 [data-theme="arena-light"],
 [data-theme="tangle-light"] {
-  --surface-success-bg: #ecfdf5; --surface-success-border: #a7f3d0; --surface-success-text: #047857;
-  --surface-warning-bg: #fffbeb; --surface-warning-border: #fde68a; --surface-warning-text: #ab4f09;
-  --surface-danger-bg: #fff1f2; --surface-danger-border: #fecdd3; --surface-danger-text: #b91c1c;
-  --surface-info-bg: #f0f9ff; --surface-info-border: #bae6fd; --surface-info-text: #0369a1;
-  /* Light-tuned interactive tokens — without these the named light scopes
-   * inherit the dark :root values on a light surface: destructive white-on-red
-   * fell to 3.67, and the secondary badge inherited near-white foreground (~1.05). */
-  --hsl-destructive: 0 72% 41%;
-  --hsl-destructive-foreground: 0 0% 100%;
   --hsl-secondary-foreground: 0 0% 10%;
-  /* neutral status label inherited var(--text-muted) which was ~3.8:1 on the
-   * light row surface; pin a darker slate that clears AA on light surfaces. */
   --surface-neutral-text: #4b5563;
 }
 
-/* Light-tuned syntax highlighting for ALL light scopes (incl. base light).
- * --syntax-* is defined only in the dark :root (near-white foreground), so on a
- * light code surface (bg-card ≈ white) code was ~1.2:1 — invisible. Dark-on-light
- * palette, all ≥4.5:1 on white. */
-[data-theme="light"],
-[data-theme="aubergine-light"],
-[data-theme="arena-light"],
-[data-theme="tangle-light"] {
-  --syntax-foreground: #24292f;
-  --syntax-comment: #57606a;
-  --syntax-keyword: #6d28d9;
-  --syntax-string: #047857;
-  --syntax-function: #1d4ed8;
-  --syntax-number: #92400e;
-  --syntax-meta: #7c3aed;
-  --syntax-variable: #24292f;
-  --syntax-error: #b91c1c;
-}
-
 /* ───────────────────────── Aubergine (bazaar) — dark purple ──────────────── */
 [data-theme="aubergine"] {
   /* Base lifted off near-black: at ~7% L the 258 hue read black; ~13-20% L with

package/src/styles/theme.css

@@ -1,69 +1,70 @@
-/* Tangle brand — Tailwind v4 @theme block.
-   Maps brand CSS custom properties into Tailwind's color/font/radius system
-   so utilities like `bg-brand-primary`, `text-text-muted`, `rounded-md`,
-   `font-display` work out of the box.
-
-   Consumers include this AFTER `@import "tailwindcss"` and
-   BEFORE their own project-local @theme overrides. */
-
+/* Tangle brand — Tailwind v4 registration.
+ * Import after tailwindcss. tokens.css owns the runtime theme; literal
+ * registrations below preserve the public font/radius utility names and are
+ * checked against that source. Do not inline those registrations: callers can
+ * override --font-* / --radius-* on a subtree.
+ */
 @theme {
-  /* Typography — unified on Inter */
   --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
   --font-display: "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 
-  /* Canonical type roles — additive semantic sizes (do not shadow Tailwind's
-     numeric text-* scale). Pair size + leading + tracking + weight so a
-     `text-display` / `text-page` utility carries the whole role. Prefer the
-     Heading / PageHeader primitives in @tangle-network/sandbox-ui over raw
-     utilities so titles stay consistent across every app. */
-  --text-display: var(--font-size-display);
   --text-display--line-height: 1.05;
   --text-display--letter-spacing: -0.02em;
   --text-display--font-weight: 700;
-  --text-hero: var(--font-size-hero);
   --text-hero--line-height: 1.1;
   --text-hero--letter-spacing: -0.02em;
   --text-hero--font-weight: 700;
-  --text-page: var(--font-size-3xl);
   --text-page--line-height: 1.15;
   --text-page--letter-spacing: -0.02em;
   --text-page--font-weight: 600;
-  --text-section: var(--font-size-xl);
   --text-section--line-height: 1.3;
   --text-section--letter-spacing: -0.01em;
   --text-section--font-weight: 600;
-  --text-eyebrow: var(--font-size-sm);
   --text-eyebrow--line-height: 1;
   --text-eyebrow--letter-spacing: 0.08em;
   --text-eyebrow--font-weight: 600;
 
-  /* Radii — tight chrome scale */
   --radius-sm: 6px;
   --radius-md: 8px;
   --radius-lg: 10px;
   --radius-xl: 12px;
   --radius-full: 999px;
 
-  /* Core brand accent (indigo) — use as `bg-brand`, `text-brand`, `ring-brand` */
   --color-brand: #6366F1;
   --color-brand-dim: #4F46E5;
   --color-brand-cool: #818CF8;
   --color-brand-glow: #A5AAFC;
   --color-brand-emerald: #10B981;
+  --color-status-running: #10B981;
+  --color-status-creating: #9B93F0;
+  --color-status-stopped: #FFB800;
+  --color-status-error: #FF4D6D;
+
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
+  --shadow-glow: none;
+  --shadow-overlay:
+    0 2px 6px hsl(var(--hsl-foreground) / 0.1),
+    0 16px 40px hsl(var(--hsl-foreground) / 0.16);
+}
+
+/* Inline variable-dependent utilities so their source is resolved on the
+ * element using the utility, not frozen where @theme was declared. The
+ * named-themes.css bridge retains the --color-* API for precompiled consumers.
+ * Public HSL aliases remain HSL channel triples, never full CSS colors.
+ */
+@theme inline {
+  --text-display: var(--font-size-display);
+  --text-hero: var(--font-size-hero);
+  --text-page: var(--font-size-3xl);
+  --text-section: var(--font-size-xl);
+  --text-eyebrow: var(--font-size-sm);
 
-  /* Depth stack — REFERENCE the spine in tokens.css (single source; was a stale
-     hardcoded copy that drifted from --depth-* and broke theme retunes). */
   --color-depth-1: var(--depth-1);
   --color-depth-2: var(--depth-2);
   --color-depth-3: var(--depth-3);
   --color-depth-4: var(--depth-4);
-
-  /* Semantic surface + text roles — map the shadcn/MD3 utility names onto the
-     tokens.css spine so `bg-card` / `border-border` / `bg-muted` /
-     `bg-surface-container*` / `text-muted-foreground` resolve from ONE source
-     here, instead of every consuming app re-defining them (the drift you hit).
-     Apps may still override locally; absent an override these are the defaults. */
   --color-background: hsl(var(--background));
   --color-foreground: hsl(var(--foreground));
   --color-card: hsl(var(--card));
@@ -88,26 +89,7 @@
   --color-surface-container: var(--md3-surface-container);
   --color-surface-container-high: var(--md3-surface-container-high);
   --color-surface-container-highest: var(--md3-surface-container-highest);
-
-  /* Semantic text — use as `text-fg`, `text-fg-muted`, `text-fg-dim` */
   --color-fg: var(--text-primary);
   --color-fg-muted: var(--text-muted);
   --color-fg-dim: var(--text-dim);
-
-  /* Status — use as `text-status-running`, `bg-status-stopped` */
-  --color-status-running: #10B981;
-  --color-status-creating: #9B93F0;
-  --color-status-stopped: #FFB800;
-  --color-status-error: #FF4D6D;
-
-  /* Shadows — flat, no inner ring, no indigo glow */
-  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
-  --shadow-glow: none;
-  /* Theme-derived, so it inverts — see tokens.css. Declared here as well so
-     Tailwind emits the `shadow-overlay` utility, which is how a consumer
-     reaches it without writing `shadow-[var(--shadow-overlay)]`. */
-  --shadow-overlay:
-    0 2px 6px hsl(var(--hsl-foreground) / 0.1),
-    0 16px 40px hsl(var(--hsl-foreground) / 0.16);
 }

package/src/styles/tokens.css

@@ -30,10 +30,26 @@
  * work here. The hairline is about 1.5:1 against the resting card — quiet by design,
  * enough to state an edge without drawing a box around every panel.
  */
+/* Seed a complete baseline on every supported boundary BEFORE mode overrides.
+ * Inherited var() aliases are already substituted at their parent; declaring
+ * them here lets a nested light/dark/named scope resolve its own palette.
+ * Light scopes are deliberately included in this baseline, then override it
+ * below. Named themes only author their product-specific differences. */
 :root,
 [data-sandbox-ui],
+[data-sandbox-theme="vault"],
+[data-sandbox-theme="dawn"],
 [data-theme="dark"],
+[data-theme="light"],
+[data-theme="aubergine"],
+[data-theme="aubergine-light"],
+[data-theme="arena"],
+[data-theme="arena-light"],
+[data-theme="tangle-dark"],
+[data-theme="tangle-light"],
+.light,
 .dark {
+  color-scheme: dark;
   --md3-surface: #161616;                   /* L0 page canvas */
   --md3-surface-dim: #101010;               /* recessed page */
   --md3-surface-bright: #3b3b3b;
@@ -66,6 +82,7 @@
   --md3-on-secondary-container: #E8E5FF;
 
   --md3-tertiary: #10B981;
+  --md3-tertiary-container: var(--surface-success-bg);
   --md3-outline: #8e8e8e;
   --md3-outline-variant: #4c4c4c;
 
@@ -390,7 +407,8 @@
   --tool-card-py: 0.5rem;
   --tool-icon-size: 1.75rem;
 
-  /* Syntax highlighting — override per-theme in vault section */
+  /* Syntax highlighting — the light palette is authored below. */
+  --code-header-bg: hsl(var(--hsl-background));
   --syntax-comment: #8b8fbc;
   --syntax-keyword: #A78FFF;
   --syntax-string: #10b981;
@@ -401,7 +419,29 @@
   --syntax-variable: #C4C0D8;
   --syntax-foreground: #E8E6F6;
 
-  /* Transitions */
+  /* Shared motion vocabulary, previously authored by the light-default Agent
+   * App consumer. These are tokens only, not automatic animation classes. */
+  --duration-instant: 90ms;
+  --duration-fast: 150ms;
+  --duration-base: 240ms;
+  --duration-slow: 360ms;
+  --duration-stream: 420ms;
+  --duration-arrive: 600ms;
+  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
+  --motion-control: var(--duration-fast) var(--ease-standard);
+  --motion-surface: var(--duration-base) var(--ease-entrance);
+  --motion-dismiss: var(--duration-instant) var(--ease-exit);
+  --motion-stream: var(--duration-stream) var(--ease-expo);
+  --motion-arrive: var(--duration-arrive) var(--ease-expo);
+  --stagger-step: 50ms;
+  --stagger-index: 0;
+  --arrive-distance: 8px;
+  --stream-blur: 4px;
+
+  /* Transitions — retain the existing Brand timings. */
   --transition-fast: 0.1s ease;
   --transition-default: 0.16s ease;
   --transition-medium: 0.24s ease;
@@ -416,10 +456,25 @@
  * `[data-theme="light"]` / `.light` switch. Both blocks are single-attribute/
  * class selectors, and this one is later in source order, so when an element
  * carries both `data-sandbox-ui` (dark) and `data-theme="light"`, light wins. */
-[data-sandbox-theme="vault"],
+[data-sandbox-theme="vault"]:where(:not(.dark)),
+[data-sandbox-theme="dawn"]:where(:not(.dark)),
 [data-theme="light"],
+[data-theme="aubergine-light"],
+[data-theme="arena-light"],
+[data-theme="tangle-light"],
 .light {
+  color-scheme: light;
   /* Light theme — neutral surfaces with purple accents */
+  --code-header-bg: color-mix(in srgb, hsl(var(--hsl-muted)) 50%, transparent);
+  --syntax-foreground: #24292f;
+  --syntax-comment: #57606a;
+  --syntax-keyword: #6d28d9;
+  --syntax-string: #047857;
+  --syntax-function: #1d4ed8;
+  --syntax-number: #92400e;
+  --syntax-meta: #7c3aed;
+  --syntax-variable: #24292f;
+  --syntax-error: #b91c1c;
 
   /* MD3 surface hierarchy */
   /* The light ladder ALTERNATES; it is not monotonic, and that is deliberate.
@@ -752,7 +807,8 @@
 /* Light: the accent is the indigo fill (#4c3fc6, 7.41:1 on white) and the tier
  * ramp runs light to dark. `[data-theme$="-light"]` covers the named light
  * themes, which would otherwise inherit the dark ramp from :root. */
-[data-sandbox-theme="vault"],
+[data-sandbox-theme="vault"]:where(:not(.dark)),
+[data-sandbox-theme="dawn"]:where(:not(.dark)),
 [data-theme="light"],
 .light,
 [data-theme$="-light"] {
@@ -762,3 +818,28 @@
   --chart-tier-a: #5b5bd6;
   --chart-tier-s: #272962;
 }
+
+
+/* Motion is opt-in at the component, but its reduced-motion preference is
+ * shared. Re-declare composites at the same boundary as their durations. */
+@media (prefers-reduced-motion: reduce) {
+  :root,
+  .dark,
+  .light,
+  [data-sandbox-ui],
+  [data-sandbox-theme],
+  [data-theme] {
+    --duration-instant: 0ms;
+    --duration-fast: 0ms;
+    --duration-base: 0ms;
+    --duration-slow: 0ms;
+    --duration-stream: 0ms;
+    --duration-arrive: 0ms;
+    --stagger-step: 0ms;
+    --motion-control: var(--duration-fast) var(--ease-standard);
+    --motion-surface: var(--duration-base) var(--ease-entrance);
+    --motion-dismiss: var(--duration-instant) var(--ease-exit);
+    --motion-stream: var(--duration-stream) var(--ease-expo);
+    --motion-arrive: var(--duration-arrive) var(--ease-expo);
+  }
+}