@tangle-network/brand 1.15.5 → 1.15.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.15.7
+
+### Patch Changes
+
+- cfc08fb: Accent text now reads at 4.5:1 on a selected item's primary tint (10–20%) over the canvas, card and muted surfaces in every theme scope. Darkened light `--accent-text`: canonical, legacy-light, agents-light and website light #5047eb → #3c32e9; aubergine-light #6d28d9 → #6423c8; arena-light #047857 → #03674b; tangle-light #4f46e5 → #453be3; system light iris-11 (#5753c6) → #4e4ac3. Lightened hospitality dark #76b791 → #99caad, with its `--md3-primary` kept equal to the accent text. A new `accent-on-tint.test.ts` asserts the pair for every scope, sharing the scope list with the Switch contrast suite through `theme-scopes.ts`. Agent App projects these values from Brand, so apps pick them up with the next Agent App release built on this version.
+
+## 1.15.6
+
+### Patch Changes
+
+- fc13212: Lower the Blueprint drift baseline to its develop head 92ab705d1: raw palette 204 -> 0, hex 118 -> 0, arbitrary color 49 -> 45, local primitives 2 -> 0.
+
 ## 1.15.5
 
 ### Patch Changes

package/bin/drift-baseline.json

@@ -856,108 +856,33 @@
    "apps/web"
   ],
   "branch": "develop",
-  "head": "517650bcac5a",
-  "tsx_files": 365,
+  "head": "92ab705d1313",
+  "tsx_files": 357,
   "css_files": 2,
   "versions": {
    "agent-app": [
-    "0.53.9"
+    "0.53.17"
    ],
    "brand": [
-    "^1.13.0"
+    "^1.15.2"
    ],
    "sandbox-ui": [
-    "0.122.3"
+    "0.125.3"
    ],
    "ui": [
-    "^11.19.0"
+    "^11.21.0"
    ]
   },
   "importing_files": {
    "brand": 0,
-   "ui": 174,
+   "ui": 184,
    "sandbox-ui": 3,
    "agent-app": 3
   },
   "by_file": {
-   "raw_palette": {
-    "apps/web/src/components/@settings/tabs/connections/components/PullFromGitHubDialog.tsx": 13,
-    "apps/web/src/components/@settings/tabs/connections/components/PushToGitHubDialog.tsx": 1,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/PartnerAnalyticsTab.tsx": 1,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/PartnerDashboardTab.tsx": 3,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/PartnerProjectsTab.tsx": 1,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/PartnerQuestsTab.tsx": 6,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/components/DomainManagementSection.tsx": 4,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/components/FaucetTransactionHistory.tsx": 11,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/components/InviteCodesSection.tsx": 2,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/components/PoolBreakdownTooltip.tsx": 3,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/components/ProjectDetailModal.tsx": 1,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/components/SeatsTable.tsx": 13,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/components/UnlinkDomainModal.tsx": 1,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/components/dialogs/InviteDialog.tsx": 6,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/components/dialogs/RemovalPolicyDialog.tsx": 4,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/partner-quests/EditQuestDialog.tsx": 1,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/partner-quests/QuestDetailModal.tsx": 1,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/partner-quests/faucet-status.ts": 9,
-    "apps/web/src/components/batch/ExecutionCardPrimitives.tsx": 2,
-    "apps/web/src/components/chat/Messages.client.tsx": 4,
-    "apps/web/src/components/chat/extensions/StarterTemplates.tsx": 3,
-    "apps/web/src/components/chat/run/InlineToolItem.tsx": 2,
-    "apps/web/src/components/chat/sections/ProjectHistoryShowcase.tsx": 3,
-    "apps/web/src/components/chat/toolExtras/GrepResultsPreview.tsx": 6,
-    "apps/web/src/components/header/ProfileDropdown.tsx": 3,
-    "apps/web/src/components/judge/ScoringForm.tsx": 1,
-    "apps/web/src/components/leaderboard/ChampionHero.tsx": 1,
-    "apps/web/src/components/leaderboard/PodiumRow.tsx": 6,
-    "apps/web/src/components/quests/CompletedQuestsHistory.tsx": 3,
-    "apps/web/src/components/quests/EventCard.tsx": 4,
-    "apps/web/src/components/quests/QuestCard.tsx": 2,
-    "apps/web/src/components/quests/QuestDetailModal.tsx": 2,
-    "apps/web/src/components/quests/QuestGrid.tsx": 2,
-    "apps/web/src/components/quests/RankingsTable.tsx": 1,
-    "apps/web/src/components/quests/competition/CompetitionHero.tsx": 10,
-    "apps/web/src/components/quests/competition/CompetitionLeaderboard.tsx": 2,
-    "apps/web/src/components/quests/competition/CompetitionResults.tsx": 4,
-    "apps/web/src/components/sidebar/Menu.client.tsx": 2,
-    "apps/web/src/data/pricing.tsx": 14,
-    "apps/web/src/routes/judge.tsx": 1,
-    "apps/web/src/routes/leaderboard._index.tsx": 1,
-    "apps/web/src/routes/partner-onboarding.tsx": 17,
-    "apps/web/src/routes/partner.invite.$code.tsx": 14,
-    "apps/web/src/routes/partner_.$partnerId.events.tsx": 11,
-    "apps/web/src/routes/quests.tsx": 2
-   },
-   "hex": {
-    "apps/web/src/components/@settings/tabs/connections/NetlifyConnection.tsx": 3,
-    "apps/web/src/components/@settings/tabs/partner-dashboard/components/DomainManagementSection.tsx": 1,
-    "apps/web/src/components/batch/BatchInput.tsx": 6,
-    "apps/web/src/components/batch/analytics/ProfileLeaderboard.tsx": 2,
-    "apps/web/src/components/batch/analytics/TokenBreakdownChart.tsx": 5,
-    "apps/web/src/components/charts/RealnessHeatmap.tsx": 2,
-    "apps/web/src/components/chat/CodeBlock.tsx": 4,
-    "apps/web/src/components/chat/extensions/StarterTemplates.tsx": 2,
-    "apps/web/src/components/chat/sections/ChatInput.tsx": 6,
-    "apps/web/src/components/deployments/tabs/LogsTab.tsx": 1,
-    "apps/web/src/components/emails/BaseEmailTemplate.tsx": 6,
-    "apps/web/src/components/emails/EventPhaseEmail.tsx": 9,
-    "apps/web/src/components/emails/InactiveProjectWarningEmail.tsx": 1,
-    "apps/web/src/components/emails/PartnerApplicationReceivedEmail.tsx": 4,
-    "apps/web/src/components/emails/PartnerApprovedEmail.tsx": 4,
-    "apps/web/src/components/emails/PartnerPaymentFailedEmail.tsx": 6,
-    "apps/web/src/components/emails/PaymentFailedEmail.tsx": 8,
-    "apps/web/src/components/emails/PrizeWonEmail.tsx": 8,
-    "apps/web/src/components/emails/QuestCompletedEmail.tsx": 4,
-    "apps/web/src/components/layout/Logo.tsx": 4,
-    "apps/web/src/components/leaderboard/CostFrontier.tsx": 2,
-    "apps/web/src/components/leaderboard/RowSparkline.tsx": 2,
-    "apps/web/src/components/profiles/ProfileEditorModal.tsx": 10,
-    "apps/web/src/components/quests/RewardCelebration.tsx": 10,
-    "apps/web/src/components/quests/competition/CompetitionAnalytics.tsx": 3,
-    "apps/web/src/components/ui/marble-avatar.tsx": 5
-   },
+   "raw_palette": {},
+   "hex": {},
    "arbitrary_color": {
-    "apps/web/src/components/@settings/tabs/connections/NetlifyConnection.tsx": 3,
-    "apps/web/src/components/deployments/tabs/LogsTab.tsx": 1,
     "apps/web/src/config/partners/data-balancer.ts": 8,
     "apps/web/src/config/partners/data-coinbase.ts": 8,
     "apps/web/src/config/partners/data-dspy.ts": 9,
@@ -967,46 +892,15 @@
    "css_var_defs": {
     "apps/web/src/components/blur-fade/fade.module.css": 2
    },
-   "local_primitive_count": {
-    "apps/web/src/components/leaderboard/primitives.tsx": 1,
-    "apps/web/src/components/sidebar/Menu.client.tsx": 1
-   }
+   "local_primitive_count": {}
   },
-  "raw_palette": 204,
-  "hex": 118,
-  "arbitrary_color": 49,
+  "raw_palette": 0,
+  "hex": 0,
+  "arbitrary_color": 45,
   "css_var_defs": 2,
-  "local_primitive_count": 2,
-  "palette_top": [
-   [
-    "text-amber-500",
-    14
-   ],
-   [
-    "bg-amber-500",
-    10
-   ],
-   [
-    "border-red-500",
-    7
-   ],
-   [
-    "bg-amber-400",
-    6
-   ],
-   [
-    "bg-red-500",
-    6
-   ],
-   [
-    "border-amber-500",
-    6
-   ]
-  ],
-  "local_primitives": {
-   "Menu": 1,
-   "StatusBadge": 1
-  }
+  "local_primitive_count": 0,
+  "palette_top": [],
+  "local_primitives": {}
  },
  "super": {
   "repo": "tangle-network/super-agent",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "1.15.5",
+  "version": "1.15.7",
   "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/accent-on-tint.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+import { compositeOver, contrastRatio } from "./css-test-utils";
+import { resolve, scopes } from "./theme-scopes";
+
+/**
+ * Selected and active states draw accent text on a primary tint. In apps on
+ * the Agent App preset, `text-primary` resolves to `--accent-text`, and a
+ * selected filter chip, tab or count badge is `text-primary` on `bg-primary/10`
+ * to `bg-primary/20`. That text is body-sized, so WCAG 1.4.3 asks 4.5:1 against
+ * the tinted fill, not only against the bare surface the other suites check.
+ * Brand's own theme maps `text-primary` to the primary fill instead; this
+ * suite does not cover that pairing, and stacked tints are out of range.
+ *
+ * This suite composites the primary fill at each opacity products use over
+ * every surface a selected item sits on, in every scope a consumer can select,
+ * and holds the accent text to 4.5:1 on each result.
+ */
+const TINTS = [0.1, 0.15, 0.2] as const;
+const SURFACES = [
+  ["canvas", "hsl-background"],
+  ["card", "hsl-card"],
+  ["muted", "hsl-muted"],
+] as const;
+
+describe("accent text reads on the selected tint in every theme scope", () => {
+  for (const { name, sources } of scopes) {
+    it(name, () => {
+      const accentText = resolve(sources, "accent-text");
+      const primary = resolve(sources, "hsl-primary");
+      for (const [surfaceName, token] of SURFACES) {
+        const surface = resolve(sources, token);
+        for (const alpha of TINTS) {
+          const tint = compositeOver(primary, surface, alpha);
+          expect(
+            contrastRatio(accentText, tint),
+            `accent text on primary/${alpha * 100} over ${surfaceName}`,
+          ).toBeGreaterThanOrEqual(4.5);
+        }
+      }
+    });
+  }
+});

package/src/styles/legacy-light.css

@@ -1,6 +1,6 @@
 /* GENERATED by scripts/gen-compat.mjs. Do not edit.
  * Source: tokens.css + named-themes.css
- * SHA-256: 9d5eee8a83628c74a74b439891d4fdff80ebc80e178fd009e0c0e54191c0a211
+ * SHA-256: ba2f212c39d2e271aacad642df566bad7871b0a4addcb44a7744e9e7f58276c7
  * Light-default compatibility; all explicit modes remain canonical.
  */
 :where(:root),
@@ -598,7 +598,7 @@
     --accent-gradient-strong: linear-gradient(135deg, #4F46E5, #5B4ED4);
     --accent-surface-soft: rgba(76, 63, 198, 0.05);
     --accent-surface-strong: rgba(76, 63, 198, 0.13);
-    --accent-text: #5047eb;
+    --accent-text: #3c32e9;
     --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
     --font-display: "Inter", "Geist", sans-serif;
     --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
@@ -893,7 +893,7 @@
     --border-subtle: rgba(60,32,110,0.10);
     --border-default: rgba(60,32,110,0.16);
     --border-hover: rgba(60,32,110,0.30);
-    --accent-text: #6d28d9;
+    --accent-text: #6423c8;
     --brand-primary: #6d28d9;
     --brand-glow: #8b5cf6;
     --text-primary: #160f22;
@@ -985,7 +985,7 @@
     --border-subtle: rgba(6,95,70,0.10);
     --border-default: rgba(6,95,70,0.16);
     --border-hover: rgba(6,95,70,0.30);
-    --accent-text: #047857;
+    --accent-text: #03674b;
     --brand-primary: #059669;
     --brand-glow: #10b981;
     --text-primary: #06231a;
@@ -1193,7 +1193,7 @@
     --border-subtle: rgba(20,20,40,0.08);
     --border-default: rgba(20,20,40,0.14);
     --border-hover: rgba(20,20,40,0.26);
-    --accent-text: #4f46e5;
+    --accent-text: #453be3;
     --brand-primary: #6366f1;
     --brand-glow: #818cf8;
     --text-primary: #15131f;
@@ -1353,7 +1353,7 @@
     --md3-on-surface-variant: #afbbb4;
     --md3-outline: #8a938e;
     --md3-outline-variant: #48504c;
-    --md3-primary: #76b791;
+    --md3-primary: #99caad;
     --md3-primary-dim: #396a52;
     --md3-primary-container: #396a52;
     --md3-on-primary: #11221a;
@@ -1375,7 +1375,7 @@
     --border-hover: rgba(227, 233, 229, 0.28);
     --border-accent: rgba(118, 183, 145, 0.35);
     --border-accent-hover: rgba(118, 183, 145, 0.50);
-    --accent-text: #76b791;
+    --accent-text: #99caad;
     --accent-surface-soft: rgba(118, 183, 145, 0.07);
     --accent-surface-strong: rgba(57, 106, 82, 0.40);
     --accent-gradient-strong: linear-gradient(135deg, #396a52, #76b791);

package/src/styles/named-themes.css

@@ -106,7 +106,7 @@
   --md3-surface-container: #f4f1fc; --md3-surface-container-high: #ece6f8;
   --md3-surface-container-highest: #e4dcf4; --md3-outline-variant: #e0d8f0;
   --border-subtle: rgba(60,32,110,0.10); --border-default: rgba(60,32,110,0.16);
-  --border-hover: rgba(60,32,110,0.30); --accent-text: #6d28d9;
+  --border-hover: rgba(60,32,110,0.30); --accent-text: #6423c8;
   --brand-primary: #6d28d9; --brand-glow: #8b5cf6;
   --text-primary: #160f22; --text-secondary: #3f3460; --text-muted: #585070; --text-dim: #655d82;
   --md3-surface: var(--bg-root); --md3-surface-dim: var(--depth-2);
@@ -152,7 +152,7 @@
   --md3-surface-container: #f0f6f2; --md3-surface-container-high: #e6f0ea;
   --md3-surface-container-highest: #dcebe2; --md3-outline-variant: #d7e8de;
   --border-subtle: rgba(6,95,70,0.10); --border-default: rgba(6,95,70,0.16);
-  --border-hover: rgba(6,95,70,0.30); --accent-text: #047857;
+  --border-hover: rgba(6,95,70,0.30); --accent-text: #03674b;
   --brand-primary: #059669; --brand-glow: #10b981;
   --text-primary: #06231a; --text-secondary: #285048; --text-muted: #455f52; --text-dim: #4e6d62;
   --md3-surface: var(--bg-root); --md3-surface-dim: var(--depth-2);
@@ -263,7 +263,7 @@
   --md3-surface-container: #f4f4f9; --md3-surface-container-high: #edecf4;
   --md3-surface-container-highest: #e5e4ee; --md3-outline-variant: #e2e1ec;
   --border-subtle: rgba(20,20,40,0.08); --border-default: rgba(20,20,40,0.14);
-  --border-hover: rgba(20,20,40,0.26); --accent-text: #4f46e5;
+  --border-hover: rgba(20,20,40,0.26); --accent-text: #453be3;
   --brand-primary: #6366f1; --brand-glow: #818cf8;
   --text-primary: #15131f; --text-secondary: #3f3a52; --text-muted: #59556b; --text-dim: #67627b;
 }
@@ -393,7 +393,7 @@
   --md3-surface-container-highest: #383e3b; --md3-surface-variant: #323835;
   --md3-on-surface: #e3e9e5; --md3-on-surface-variant: #afbbb4;
   --md3-outline: #8a938e; --md3-outline-variant: #48504c;
-  --md3-primary: #76b791; --md3-primary-dim: #396a52; --md3-primary-container: #396a52;
+  --md3-primary: #99caad; --md3-primary-dim: #396a52; --md3-primary-container: #396a52;
   --md3-on-primary: #11221a; --md3-surface-tint: #76b791;
   --depth-1: #141816; --depth-2: #2d3330; --depth-3: #323835; --depth-4: #383e3b;
   --bg-root: #141816; --bg-dark: #141816; --bg-section: #141816;
@@ -402,7 +402,7 @@
   --border-subtle: rgba(227, 233, 229, 0.10); --border-default: rgba(227, 233, 229, 0.16);
   --border-hover: rgba(227, 233, 229, 0.28);
   --border-accent: rgba(118, 183, 145, 0.35); --border-accent-hover: rgba(118, 183, 145, 0.50);
-  --accent-text: #76b791;
+  --accent-text: #99caad;
   --accent-surface-soft: rgba(118, 183, 145, 0.07); --accent-surface-strong: rgba(57, 106, 82, 0.40);
   --accent-gradient-strong: linear-gradient(135deg, #396a52, #76b791);
   --brand-primary: #529873; --brand-cool: #76b791; --brand-glow: #94c7a9; --brand-vibrant: #529873;

package/src/styles/switch-contrast.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import { contrastRatio } from "./css-test-utils";
+import { resolve, scopes, themes } from "./theme-scopes";
+
+/**
+ * The token pairs @tangle-network/ui's Switch is drawn with.
+ *
+ * A switch is non-text content, so WCAG 1.4.11 asks 3:1 for the parts that show
+ * its state: the track's edge against the surface it sits on, and the thumb
+ * against the track. Off is a muted-foreground outline and thumb on the
+ * surface. On is an accent-text track carrying a card-coloured thumb, so the
+ * thumb-on-track pair is the same pair as track-on-card, inverted. The primary
+ * fill cannot do this job: it is tuned to carry white text and measures about
+ * 2.4:1 on the dark card and canvas.
+ *
+ * These are text tokens, held to 4.5:1 elsewhere for SOME themes; this suite
+ * asserts the 3:1 the Switch depends on in EVERY scope a consumer can select.
+ */
+describe("the Switch's token pairs clear 3:1 in every theme scope", () => {
+  it("covers every named theme", () => {
+    const rules = themes.replace(/\/\*[\s\S]*?\*\//g, "");
+    const declared = new Set([...rules.matchAll(/\[data-theme="([a-z-]+)"\]/g)].map((m) => m[1]));
+    // Hospitality and website take their mode from .dark, so one name covers two scopes.
+    const covered = new Set(scopes.map((s) => s.name.replace(/ (light|dark)$/, "")));
+    for (const name of declared) {
+      expect(covered.has(name), `[data-theme="${name}"] needs a scope here`).toBe(true);
+    }
+  });
+
+  for (const { name, sources } of scopes) {
+    it(name, () => {
+      const card = resolve(sources, "hsl-card");
+      const canvas = resolve(sources, "hsl-background");
+      const accentText = resolve(sources, "accent-text");
+      const mutedFg = resolve(sources, "hsl-muted-foreground");
+
+      // On: the accent-text track against the surface, and the card thumb on it.
+      expect(contrastRatio(accentText, card), "on track on card / card thumb on track").toBeGreaterThanOrEqual(3);
+      expect(contrastRatio(accentText, canvas), "on track on canvas").toBeGreaterThanOrEqual(3);
+      // Off: the muted-foreground outline and thumb against the surface.
+      expect(contrastRatio(mutedFg, card), "off outline on card").toBeGreaterThanOrEqual(3);
+      expect(contrastRatio(mutedFg, canvas), "off outline on canvas").toBeGreaterThanOrEqual(3);
+    });
+  }
+});

package/src/styles/system.css

@@ -221,7 +221,7 @@
   --on-ink: #ffffff;
   --accent-solid: var(--iris-9);
   --accent-solid-hover: var(--iris-10);
-  --accent-text: var(--iris-11);
+  --accent-text: #4e4ac3;
   --accent-soft: var(--iris-3);
   --accent-soft-hover: var(--iris-4);
   --accent-line: var(--iris-7);

package/src/styles/theme-scopes.ts

@@ -0,0 +1,105 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { blockIn, blocksIn, hslToRgb } from "./css-test-utils";
+
+/**
+ * Every theme scope a consumer can select, each with its CSS sources listed
+ * from the most specific to the baseline it inherits from, and a resolver that
+ * follows `var()` and `hsl(var())` through them the way the cascade does.
+ * Contrast suites iterate these so a new named theme cannot skip a check.
+ */
+const read = (name: string) =>
+  readFileSync(path.resolve(import.meta.dirname, name), "utf8");
+const tokens = read("tokens.css");
+export const themes = read("named-themes.css");
+const legacy = read("legacy-light.css");
+const system = read("system.css");
+const ladders = read("ladders.css");
+
+/** The spine block of a selector: the rule that declares the surface ladder. */
+function spine(source: string, selector: string): string {
+  const block = blocksIn(source, selector).find((b) => b.includes("--hsl-background:"));
+  if (!block) throw new Error(`missing spine block: ${selector}`);
+  return block;
+}
+
+const DARK = spine(tokens, ".dark");
+const LIGHT = spine(tokens, ".light");
+// The shared light-ink group that also lists every named light theme.
+const LIGHT_INK = blocksIn(themes, '[data-theme="agents-light"]').find(
+  (b) => !b.includes("--hsl-background:"),
+);
+if (!LIGHT_INK) throw new Error("missing the shared named-light ink group");
+
+const named = (selector: string) => spine(themes, selector);
+
+/**
+ * Each scope lists its sources from the most specific to the baseline it
+ * inherits from, as the cascade resolves them.
+ */
+export const scopes: Array<{ name: string; sources: string[] }> = [
+  { name: "canonical dark", sources: [DARK] },
+  { name: "canonical light", sources: [LIGHT, DARK] },
+  {
+    name: "legacy-light default",
+    sources: [spine(legacy, ":where(:root)"), spine(legacy, ".dark")],
+  },
+  {
+    name: "system dark",
+    sources: [spine(system, ".dark"), blockIn(ladders, ".dark")],
+  },
+  {
+    name: "system light",
+    sources: [
+      spine(system, ".light"),
+      blockIn(ladders, ".light"),
+      spine(system, ".dark"),
+      blockIn(ladders, ".dark"),
+    ],
+  },
+  ...["aubergine", "arena", "super", "tangle-dark", "agents"].map((name) => ({
+    name,
+    sources: [named(`[data-theme="${name}"]`), DARK],
+  })),
+  ...["aubergine-light", "arena-light", "super-light", "tangle-light", "agents-light"].map(
+    (name) => ({
+      name,
+      sources: [named(`[data-theme="${name}"]`), LIGHT_INK, LIGHT, DARK],
+    }),
+  ),
+  { name: "intelligence", sources: [named('.dark[data-theme="intelligence"]'), DARK] },
+  {
+    name: "hospitality light",
+    sources: [named('[data-theme="hospitality"]:where(:not(.dark))'), LIGHT, DARK],
+  },
+  { name: "hospitality dark", sources: [named('.dark[data-theme="hospitality"]'), DARK] },
+  {
+    name: "website light",
+    sources: [named('[data-theme="website"]:where(:not(.dark))'), LIGHT, DARK],
+  },
+  { name: "website dark", sources: [named('.dark[data-theme="website"]'), DARK] },
+];
+
+export type Rgb = [number, number, number];
+
+/**
+ * Resolve a token to RGB through the scope's sources, following `var()` and
+ * `hsl(var())` references the way the cascade would: from the first source that
+ * declares each name.
+ */
+export function resolve(sources: string[], token: string): Rgb {
+  const raw = sources
+    .map((css) => css.match(new RegExp(`(?<![\\w-])--${token}:\\s*([^;]+);`))?.[1]?.trim())
+    .find((value) => value !== undefined);
+  if (raw === undefined) throw new Error(`--${token} resolves to nothing`);
+
+  const ref = /^(?:hsl\()?var\(--([a-z0-9-]+)\)\)?$/.exec(raw);
+  if (ref) return resolve(sources, ref[1]);
+  const hex = /^#([0-9a-fA-F]{6})\b/.exec(raw);
+  if (hex) {
+    return [0, 2, 4].map((i) => Number.parseInt(hex[1].slice(i, i + 2), 16)) as Rgb;
+  }
+  const hsl = /^([\d.]+)\s+([\d.]+)%\s+([\d.]+)%/.exec(raw);
+  if (hsl) return hslToRgb({ h: Number(hsl[1]), s: Number(hsl[2]), l: Number(hsl[3]) });
+  throw new Error(`--${token} has an unreadable value: ${raw}`);
+}

package/src/styles/tokens.css

@@ -852,7 +852,7 @@
   --accent-gradient-strong: linear-gradient(135deg, #4F46E5, #5B4ED4);
   --accent-surface-soft: rgba(76, 63, 198, 0.05);
   --accent-surface-strong: rgba(76, 63, 198, 0.13);
-  --accent-text: #5047eb;
+  --accent-text: #3c32e9;
 
   /* Typography — unified on Inter */
   --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;