@tangle-network/brand 0.8.1 → 0.8.3

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Changelog
 
+## 0.8.3
+
+### Patch Changes
+
+- 9b91ac6: Fix code syntax highlighting contrast (WCAG AA). `--syntax-*` was defined only in the dark `:root`, so in all four light themes (light, aubergine-light, arena-light, tangle-light) code rendered near-white on the light `bg-card` — foreground ~1.2:1, effectively invisible. Added a light-tuned `--syntax-*` palette (dark-on-light, all ≥4.5:1 on white) for every light scope. Also bumped the dark `--syntax-comment` (`#6B7094`→`#8b8fbc`) which failed AA (~3.4:1) across the dark-family themes. All syntax colors now pass AA on their code surface in every theme.
+
+## 0.8.2
+
+### Patch Changes
+
+- 26cc012: WCAG 1.4.3 AA contrast fixes across all 7 themes (measured with a cascade-resolved contrast audit).
+
+  - **Primary buttons**: `text-primary-foreground` on `bg-primary` was below 4.5:1 in `dark` (4.41) and `arena-light` (4.20). Darkened those two primaries (dark L 67%→62%, arena-light L 30%→27%) — all 7 themes now ≥5.0:1, hue unchanged.
+  - **Status colors in the named light themes**: `aubergine-light` / `arena-light` / `tangle-light` inherited the dark `:root` bright status palette (`#f87171`/`#34D399`/…), so danger/success text + glyphs dropped to ~2.5:1 on their light surfaces. Added a shared light-tuned status palette (dark-on-light text, mirroring the base light theme) — status text now passes AA and glyphs pass 1.4.11.
+  - **Running tool state**: the "running" label + spinner used `text-primary`, which fell to 2.98:1 on the dark row surface. Switched to `--accent-text` (the readable accent tier) — passes in every theme.
+  - **Thinking timer**: the elapsed-seconds counter used the faint `--text-dim` tier (~3:1). Moved it to `--text-muted` (passes AA everywhere).
+
+  Text now meets AA in all 7 themes; most pairs are AAA.
+
 ## 0.8.1
 
 ### Patch Changes

package/package.json

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

@@ -43,6 +43,38 @@
   --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). */
+[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: #b45309;
+  --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 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
@@ -109,7 +141,7 @@
   --hsl-background: 150 30% 96%;  --hsl-foreground: 158 30% 10%;
   --hsl-card: 0 0% 100%;          --hsl-card-foreground: 158 30% 10%;
   --hsl-popover: 0 0% 100%;       --hsl-popover-foreground: 158 30% 10%;
-  --hsl-primary: 160 84% 30%;     --hsl-primary-foreground: 0 0% 100%;
+  --hsl-primary: 160 84% 27%;     --hsl-primary-foreground: 0 0% 100%;
   --hsl-secondary: 150 25% 92%;   --hsl-muted: 150 25% 92%;
   --hsl-muted-foreground: 158 14% 40%;
   --hsl-accent: 150 25% 92%;      --hsl-border: 150 20% 86%;

package/src/styles/tokens.css

@@ -57,7 +57,7 @@
   --hsl-card-foreground: 240 6% 93%;
   --hsl-popover: 240 5% 17%;       /* #28282d elevated */
   --hsl-popover-foreground: 240 6% 93%;
-  --hsl-primary: 239 84% 67%;
+  --hsl-primary: 239 84% 62%;
   --hsl-primary-foreground: 0 0% 100%;
   --hsl-secondary: 240 5% 15%;     /* #242428 surface-2 */
   --hsl-secondary-foreground: 240 6% 93%;
@@ -288,7 +288,7 @@
   --tool-icon-size: 1.75rem;
 
   /* Syntax highlighting — override per-theme in vault section */
-  --syntax-comment: #6B7094;
+  --syntax-comment: #8b8fbc;
   --syntax-keyword: #A78FFF;
   --syntax-string: #10b981;
   --syntax-function: #6D9FFF;