@tangle-network/brand 0.5.0 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.7.0
+
+### Minor Changes
+
+- e199bc7: Fix the dark theme being unresponsive to token changes + harsh on dark surfaces — root cause was the `@theme` layer.
+
+  - **Single source of truth for semantic tokens.** `theme.css` now maps every shadcn/MD3 utility token (`--color-background/card/border/muted/popover/secondary/accent/destructive/ring/input` + `--color-surface-container*`) onto the `tokens.css` spine via `var()`, instead of leaving them undefined (forcing every app to re-define them) and hardcoding a now-stale `--color-depth-*` copy. Editing the spine in `tokens.css` now actually flows through to `bg-card` / `border-border` / `bg-muted` everywhere.
+  - **Comfortable dark surface ladder.** Lift the canvas off near-black (`#0b0b0d` → `#15151a`) and spread the surface/depth/MD3 ladder so panels separate by _fill_, with the border softened (`13%` → `16%` lightness) so it recedes instead of reading as a bright outline on black.
+
+## 0.6.0
+
+### Minor Changes
+
+- c56ea6c: Add a standard `data-theme`/`.dark`/`.light` switch alongside the existing named themes. The dark block now also matches `[data-theme="dark"]`/`.dark` and the light block also matches `[data-theme="light"]`/`.light`, so consumers can pin or toggle a theme with a standard switch instead of an ad-hoc `data-sandbox-theme` name (an unknown name previously fell back to the dark default). The `:root` default stays dark — zero blast radius to existing consumers.
+
 ## 0.5.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "Tangle brand system — design tokens, logo, Tailwind v4 theme. Single source of truth for every Tangle app.",
   "type": "module",
   "license": "MIT",

package/src/styles/theme.css

@@ -52,16 +52,47 @@
   --color-brand-glow: #A5AAFC;
   --color-brand-emerald: #10B981;
 
-  /* Depth stack — flat neutral spine (Tangle Quiet) */
-  --color-depth-1: #0b0b0d;
-  --color-depth-2: #141416;
-  --color-depth-3: #1a1a1d;
-  --color-depth-4: #202023;
+  /* 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));
+  --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);
+  --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: #ececee;
-  --color-fg-muted: #9a9aa2;
-  --color-fg-dim: #6b6b73;
+  --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;

package/src/styles/tokens.css

@@ -2,17 +2,22 @@
 /* Brand: warm purple palette, #5B4ED4 primary */
 
 /* MD3 surface hierarchy */
+/* Dark is the default theme (`:root`/`[data-sandbox-ui]`). It also responds to
+ * the standard `[data-theme="dark"]` / `.dark` switch so any consumer can pin or
+ * toggle a theme without inventing an ad-hoc `data-sandbox-theme` name. */
 :root,
-[data-sandbox-ui] {
-  --md3-surface: #0a0a14;
-  --md3-surface-dim: #07070d;
-  --md3-surface-bright: #1b1a2c;
-  --md3-surface-container-lowest: #000001;
-  --md3-surface-container-low: #0d0c18;
-  --md3-surface-container: #11101e;
-  --md3-surface-container-high: #171624;
-  --md3-surface-container-highest: #1f1e30;
-  --md3-surface-variant: #1f1e30;
+[data-sandbox-ui],
+[data-theme="dark"],
+.dark {
+  --md3-surface: #16161f;
+  --md3-surface-dim: #111119;
+  --md3-surface-bright: #2a2940;
+  --md3-surface-container-lowest: #101017;
+  --md3-surface-container-low: #16161f;
+  --md3-surface-container: #1c1b27;
+  --md3-surface-container-high: #232231;
+  --md3-surface-container-highest: #2c2b3d;
+  --md3-surface-variant: #2c2b3d;
   --md3-on-surface: #fdfdfd;
   --md3-on-surface-variant: #aaa8b8;
 
@@ -31,8 +36,8 @@
   --md3-on-secondary-container: #E8E5FF;
 
   --md3-tertiary: #10B981;
-  --md3-outline: #434260;
-  --md3-outline-variant: #2A293D;
+  --md3-outline: #4a4965;
+  --md3-outline-variant: #34324a;
 
   --md3-error: #ff5277;
   --md3-error-dim: #eb2855;
@@ -46,24 +51,24 @@
   --md3-surface-tint: #818CF8;
 
   /* Semantic HSL bridge — flat neutral spine (Tangle Quiet) */
-  --hsl-background: 240 8% 5%;     /* #0b0b0d */
+  --hsl-background: 240 7% 9%;     /* #15151a canvas — lifted off pure black */
   --hsl-foreground: 240 6% 93%;    /* #ececee */
-  --hsl-card: 240 5% 8%;           /* #141416 surface */
+  --hsl-card: 240 5% 13%;          /* #1f1f23 surface, clearly above canvas */
   --hsl-card-foreground: 240 6% 93%;
-  --hsl-popover: 240 4% 13%;       /* #202023 elevated */
+  --hsl-popover: 240 5% 17%;       /* #28282d elevated */
   --hsl-popover-foreground: 240 6% 93%;
   --hsl-primary: 239 84% 67%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 240 5% 11%;     /* #1a1a1d surface-2 */
+  --hsl-secondary: 240 5% 15%;     /* #242428 surface-2 */
   --hsl-secondary-foreground: 240 6% 93%;
-  --hsl-muted: 240 5% 11%;         /* #1a1a1d — neutral hover well */
-  --hsl-muted-foreground: 240 4% 62%;  /* #9a9aa2 text-muted */
-  --hsl-accent: 240 5% 11%;        /* neutral hover (indigo lives in accent-surface-strong) */
+  --hsl-muted: 240 5% 15%;         /* #242428 — neutral hover well */
+  --hsl-muted-foreground: 240 4% 64%;  /* #9c9ca6 text-muted */
+  --hsl-accent: 240 5% 15%;        /* neutral hover (indigo lives in accent-surface-strong) */
   --hsl-accent-foreground: 240 6% 93%;
   --hsl-destructive: 348 90% 60%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 240 3% 13%;        /* hairline ≈ rgba(255,255,255,0.07) */
-  --hsl-input: 240 5% 11%;
+  --hsl-border: 240 5% 16%;        /* soft edge — fill carries separation, not the line */
+  --hsl-input: 240 5% 15%;
   --hsl-ring: 239 84% 67%;
   --hsl-success: 160 84% 39%;
   --hsl-warning: 40 94% 56%;
@@ -95,20 +100,20 @@
   --info: var(--hsl-info);
 
   /* Sidebar tokens — flat surface + hairline */
-  --sidebar-background: 240 5% 8%;   /* #141416 surface */
+  --sidebar-background: 240 6% 11%;  /* #1a1a1f surface */
   --sidebar-foreground: 240 6% 93%;
   --sidebar-primary: 239 84% 67%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 5% 11%;      /* neutral hover */
+  --sidebar-accent: 240 5% 15%;      /* neutral hover */
   --sidebar-accent-foreground: 240 6% 93%;
-  --sidebar-border: 240 3% 13%;      /* hairline */
+  --sidebar-border: 240 5% 16%;      /* soft edge */
   --sidebar-ring: 239 84% 67%;
 
   /* Depth scale — flat neutral spine (Tangle Quiet) */
-  --depth-1: #0b0b0d;
-  --depth-2: #141416;
-  --depth-3: #1a1a1d;
-  --depth-4: #202023;
+  --depth-1: #15151a;
+  --depth-2: #1f1f23;
+  --depth-3: #26262b;
+  --depth-4: #2e2e34;
 
   /* Status colors */
   --status-running: #10B981;
@@ -167,7 +172,7 @@
   --accent-text: #b9bffb;
 
   /* Surfaces — flat single-neutral (no radial mesh) */
-  --bg-root: #0b0b0d;
+  --bg-root: #15151a;
   --bg-dark: var(--depth-1);
   --bg-card: var(--depth-2);
   --bg-elevated: var(--depth-4);
@@ -304,7 +309,13 @@
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
 }
 
-[data-sandbox-theme="vault"] {
+/* Light theme — reachable via the named `vault` theme or the standard
+ * `[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-theme="light"],
+.light {
   /* Light theme — clean professional, warm purple accents */
 
   /* MD3 surface hierarchy */