@tangle-network/brand 0.4.0 → 0.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 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
+
+- 184c8bb: Add the canonical display type scale and semantic type-role utilities. New
+  tokens: `--font-size-2xl/3xl/4xl` plus fluid `--font-size-hero`/`--font-size-display`
+  (clamp), display line-heights, and tracking tokens. New `@theme` utilities
+  `text-display`/`text-hero`/`text-page`/`text-section`/`text-eyebrow`, each
+  carrying size + leading + tracking + weight. Quiet weights (heroes 700, titles 600) per Tangle Quiet. Additive — no existing token changed.
+
 ## 0.4.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "0.4.0",
+  "version": "0.6.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/globals.css

@@ -20,7 +20,7 @@
   }
 
   ::selection {
-    background: rgba(56, 178, 172, 0.22);
+    background: var(--bg-selection);
     color: hsl(var(--hsl-foreground));
   }
 
@@ -51,8 +51,10 @@
     color: transparent;
   }
 
+  /* Retained as a flat no-op so any stray consumer renders without a halo.
+     Tangle Quiet has no glow chrome. */
   .glow-brand {
-    box-shadow: 0 0 48px -10px hsl(var(--primary) / 0.45);
+    box-shadow: none;
   }
 
   .depth-1 { background-color: var(--depth-1); }

package/src/styles/theme.css

@@ -12,6 +12,32 @@
   --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;

package/src/styles/tokens.css

@@ -2,8 +2,13 @@
 /* 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] {
+[data-sandbox-ui],
+[data-theme="dark"],
+.dark {
   --md3-surface: #0a0a14;
   --md3-surface-dim: #07070d;
   --md3-surface-bright: #1b1a2c;
@@ -222,9 +227,9 @@
   --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
   --shadow-glow: none;
   --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
-  --shadow-status-running: 0 0 6px rgba(16, 185, 129, 0.5);
-  --shadow-status-creating: 0 0 6px rgba(99, 102, 241, 0.5);
-  --shadow-status-error: 0 0 6px rgba(255, 77, 109, 0.5);
+  --shadow-status-running: none;
+  --shadow-status-creating: none;
+  --shadow-status-error: none;
 
   /* Radii */
   --radius-sm: 6px;
@@ -247,10 +252,24 @@
   --font-size-sm: 0.75rem;        /* 12px — captions, meta */
   --font-size-base: 0.9375rem;    /* 15px — message body */
   --font-size-lg: 1rem;           /* 16px — emphasized text */
-  --font-size-xl: 1.25rem;        /* 20px — section headers */
+  --font-size-xl: 1.25rem;        /* 20px — section title (h2) */
+  /* Display tier — page titles, marketing section heads, and heroes.
+     Hero sizes are fluid (clamp) so they scale with the viewport without
+     per-breakpoint overrides; the dense-app sizes above stay fixed. */
+  --font-size-2xl: 1.5rem;        /* 24px — large section title */
+  --font-size-3xl: 1.875rem;      /* 30px — page title (h1) */
+  --font-size-4xl: 2.25rem;       /* 36px — compact marketing section head */
+  --font-size-hero: clamp(2rem, 1.2rem + 3.2vw, 3rem);    /* 32→48px — secondary hero */
+  --font-size-display: clamp(2.5rem, 1.1rem + 5vw, 4rem); /* 40→64px — primary hero */
   --line-height-tight: 1.3;
   --line-height-base: 1.6;        /* tighter body rhythm (was 1.75) */
   --line-height-relaxed: 1.75;
+  --line-height-display: 1.05;    /* heroes — near-solid set */
+  --line-height-heading: 1.15;    /* page/section titles */
+  /* Letter-spacing — titles tighten, eyebrows/labels open up */
+  --tracking-tight: -0.02em;      /* display + page titles */
+  --tracking-snug: -0.01em;       /* section titles */
+  --tracking-wide: 0.08em;        /* uppercase eyebrows / stat labels */
 
   /* Component spacing — override per-app for tighter/looser layouts */
   --avatar-size: 2rem;            /* 32px — chat avatars */
@@ -290,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 */