@tangle-network/brand 0.8.3 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.9.0
+
+### Minor Changes
+
+- 68e5053: Transcript spacing, markdown styling, and the remaining WCAG AA fixes.
+
+  - **Markdown was unstyled**: `@tailwindcss/typography` isn't loaded and `tangle-prose` was undefined, so structured markdown had no styling — table cells collided (no dividers/padding) and text ran flush into code blocks. Defined `tangle-prose` (self-contained, theme-tokened): tables get border-collapse hairline dividers + cell padding, and blocks (headings, paragraphs, lists, `pre`, code) get proper vertical rhythm. Links use `--accent-text` (readable in every theme).
+  - **Timeline spacing**: user messages sat flush against the status/tool/agent row below them. They're off-spine, so they now carry their own vertical rhythm (`mt-6 mb-4`).
+  - **WCAG AA (measured live across 7 themes)**: `--btn-primary-*` (dark + all named themes were 4.47/2.98 → now ≥5.9 via `#5B4ED4`/`#4F46E5`); `--hsl-destructive` button/badge (3.67 → ≥4.5); named light themes now carry light-tuned `--hsl-destructive`/`--hsl-secondary-foreground`/`--surface-neutral-text` (were inheriting dark values, secondary badge ~1.05); input borders (`--input` → `--hsl-muted-foreground`) now clear 1.4.11 3:1 as visible field boundaries.
+
 ## 0.8.3
 
 ### Patch Changes

package/package.json

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

@@ -105,3 +105,73 @@
   .status-dot-stopped { background: var(--status-stopped); }
   .status-dot-error { background: var(--status-error); box-shadow: var(--shadow-status-error); }
 }
+
+/* Markdown prose — applied via `tangle-prose` on the Markdown renderer. The
+ * @tailwindcss/typography plugin is not loaded, so structured markdown (tables,
+ * lists, spacing between blocks) had NO styling: table cells collided and text
+ * ran flush into code blocks. Self-contained, theme-tokened so it re-skins. */
+.tangle-prose {
+  color: var(--text-primary);
+  line-height: 1.7;
+}
+.tangle-prose > * + * { margin-top: 0.85em; }
+.tangle-prose h1, .tangle-prose h2, .tangle-prose h3, .tangle-prose h4 {
+  font-weight: 600;
+  line-height: 1.3;
+  margin-top: 1.4em;
+  margin-bottom: 0.5em;
+  color: var(--text-primary);
+}
+.tangle-prose h1 { font-size: 1.4em; }
+.tangle-prose h2 { font-size: 1.25em; }
+.tangle-prose h3 { font-size: 1.1em; }
+.tangle-prose p, .tangle-prose ul, .tangle-prose ol { margin: 0; }
+.tangle-prose ul, .tangle-prose ol { padding-left: 1.4em; }
+.tangle-prose li { margin: 0.25em 0; }
+.tangle-prose li > ul, .tangle-prose li > ol { margin-top: 0.25em; }
+.tangle-prose a {
+  color: var(--accent-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.tangle-prose blockquote {
+  border-left: 2px solid var(--border-default);
+  padding-left: 0.9em;
+  color: var(--text-muted);
+}
+.tangle-prose hr { border: 0; border-top: 1px solid var(--border-subtle); margin: 1.2em 0; }
+.tangle-prose :not(pre) > code {
+  background: var(--md3-surface-container-high);
+  padding: 0.12em 0.36em;
+  border-radius: 4px;
+  font-size: 0.9em;
+  font-family: var(--font-mono);
+}
+.tangle-prose pre { margin: 0.85em 0; }
+
+/* Tables — border-collapse with hairline dividers + real cell padding, so
+ * columns read as a grid instead of colliding (the "no dividers" report). */
+.tangle-prose table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.85em 0;
+  font-size: 0.95em;
+  display: block;
+  overflow-x: auto;
+}
+.tangle-prose thead { border-bottom: 1px solid var(--border-default); }
+.tangle-prose th {
+  text-align: left;
+  font-weight: 600;
+  padding: 0.5em 0.85em;
+  color: var(--text-primary);
+  white-space: nowrap;
+}
+.tangle-prose td {
+  padding: 0.5em 0.85em;
+  border-top: 1px solid var(--border-subtle);
+  vertical-align: top;
+}
+.tangle-prose th:not(:first-child), .tangle-prose td:not(:first-child) {
+  border-left: 1px solid var(--border-subtle);
+}

package/src/styles/themes.css

@@ -31,7 +31,7 @@
   --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-input));
+  --color-input: hsl(var(--hsl-muted-foreground));
   --color-ring: hsl(var(--hsl-ring));
   --color-surface-container-lowest: var(--md3-surface-container-lowest);
   --color-surface-container-low: var(--md3-surface-container-low);
@@ -54,6 +54,15 @@
   --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 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).

package/src/styles/tokens.css

@@ -65,7 +65,7 @@
   --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: 348 74% 48%;
   --hsl-destructive-foreground: 0 0% 100%;
   --hsl-border: 240 5% 16%;        /* soft edge — fill carries separation, not the line */
   --hsl-input: 240 5% 15%;
@@ -92,7 +92,7 @@
   --destructive: var(--hsl-destructive);
   --destructive-foreground: var(--hsl-destructive-foreground);
   --border: var(--hsl-border);
-  --input: var(--hsl-input);
+  --input: var(--hsl-muted-foreground);
   --ring: var(--hsl-ring);
   --success: var(--hsl-success);
   --warning: var(--hsl-warning);
@@ -207,10 +207,10 @@
   --border-accent-hover: rgba(129, 140, 248, 0.35);
 
   /* Buttons */
-  --btn-primary-bg: #6366F1;
-  --btn-primary-hover: #818CF8;
+  --btn-primary-bg: #5B4ED4;
+  --btn-primary-hover: #4F46E5;
   --btn-primary-text: #ffffff;
-  --btn-cta-bg: #818CF8;
+  --btn-cta-bg: #4F46E5;
   --btn-cta-text: #FFFFFF;
 
   /* Code / runtime syntax */