@tangle-network/brand 0.8.2 → 0.8.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "0.8.2",
+  "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

@@ -56,6 +56,25 @@
   --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

package/src/styles/tokens.css

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