@tangle-network/brand 1.11.0 → 1.13.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## 1.13.1
+
+### Patch Changes
+
+- 1170561: Lower the SUPER drift baseline to super-agent main 1a055e7: hex 501 -> 0, CSS variable definitions 104 -> 14.
+
+## 1.13.0
+
+### Minor Changes
+
+- f13e197: Add the Website named theme. `class="dark" data-theme="website"` gives the public site's indigo-night surface ladder; `data-theme="website"` without `.dark` is its indigo-paper light scope, usable as a nested light island. Both modes are seeded from the canonical baselines in `tokens.css` and declare the same properties. Only planes and ink change: accent, status, category and syntax tones stay canonical. The website uses it in place of its local navy and paper token copies.
+
+### Patch Changes
+
+- e7525d0: Lower the Tax drift baseline to its measured main (tangle-network/tax-agent ff4b703): raw palette 133 to 0, hex 8 to 0, arbitrary colors 7 to 0, redeclared tokens 8 to 0. Tax runs `tangle-drift check --surface tax` in its sign-off, so any new palette class, hex value or token copy now fails its gate.
+
+## 1.12.0
+
+### Minor Changes
+
+- e05254d: Add the `agents` / `agents-light` named theme for Agent Builder: white light pages whose cards separate by shadow, and a mauve neutral ladder in both modes. `scripts/gen-ladders.mjs` generates it from the same map as `system.css`, restricted to canonical spine tokens and with literal values, so it needs no `ladders.css`. It retints surfaces, text, borders and the three shadow roles only; accent, status and category tokens stay canonical. Both names join the canonical baseline selector lists, so nested scopes re-resolve their aliases.
+  
+  Add `data-tone="<category>"` scopes for the eight categorical tones: an element with `data-tone="orange"` reads that family as `--tone-bg`, `--tone-bg-hover`, `--tone-bg-selected`, `--tone-border`, `--tone-border-selected`, `--tone-text` and `--tone-icon`, in both modes.
+- a2e24c7: Add the Hospitality named theme: `data-theme="hospitality"` is a complete light scope, and with `.dark` on the same element it is a complete dark scope. Both are seeded from the canonical baselines in `tokens.css`, as `vault` is. It retints the surface ladder to sage, moves the accent family (primary, ring, accent text and wells, buttons, sidebar, brand accents) to forest green, and keeps every status and category tone canonical. The Hospitality app uses it in place of its local 166-property theme file.
+- a53b246: Add the `super` and `super-light` named themes for SUPER: warm green-grey surfaces with a forest action colour. Button, selection and accent-surface tokens follow the forest fill. Status and category tones are inherited. `ThemeToggle` keeps the pair when it switches modes.
+
+### Patch Changes
+
+- 6558f63: The `aubergine`, `aubergine-light`, `arena` and `arena-light` named themes retint the base surface: `--md3-surface`, `--md3-surface-dim`, `--md3-surface-bright`, `--md3-surface-variant`, `--md3-on-surface` and `--md3-on-surface-variant` follow each theme's own ladder and text, as they do in the canonical spine. Before, a `bg-surface` element such as a mobile top bar kept the neutral grey surface on a purple or green page.
+- daf8f07: The named themes' secondary text tiers clear WCAG AA on every surface they sit on. `--text-dim` in `aubergine`, `aubergine-light`, `arena`, `arena-light` and `tangle-light`, and `--text-muted` in `aubergine` and the light named themes, measured as low as 2.3:1 on their own canvas, card, panel, elevated or highest container. Each now clears 4.5:1 on all five at the same hue and saturation, with muted still stronger than dim. `tangle-dark` mirrors the canonical dark spine, already passes, and is unchanged.
+
 ## 1.11.0
 
 ### Minor Changes

package/README.md

@@ -37,8 +37,11 @@ For finer control, use the exported filenames:
 | `.dark` or `data-theme="dark"` | Explicit dark, including a nested dark island |
 | `.light` or `data-theme="light"` | Explicit light, including a nested light island |
 | `data-sandbox-theme="vault"` or `"dawn"` | Existing legacy light names; an explicit `.dark` on that same element takes precedence |
-| `aubergine` / `aubergine-light`, `arena` / `arena-light`, `tangle-dark` / `tangle-light` | Existing named dark/light pairs, applied with `data-theme` |
+| `aubergine` / `aubergine-light`, `arena` / `arena-light`, `super` / `super-light`, `tangle-dark` / `tangle-light` | Existing named dark/light pairs, applied with `data-theme` |
+| `agents` / `agents-light` | Agent Builder: white light pages, cards separated by shadow, and a mauve neutral ladder. Surfaces, text and borders only; accent, status and category stay canonical. Generated by `scripts/gen-ladders.mjs` |
 | `.dark[data-theme="intelligence"]` | Existing dark-only product surface; `.light` keeps the identity and uses canonical light |
+| `[data-theme="hospitality"]` + `.dark[data-theme="hospitality"]` | Hospitality's sage-and-forest product theme in both modes. Set it on the document root. Without `.dark` it is a complete light scope, including before hydration; `.dark` selects the dark baseline and its dark ladder. Status tones stay canonical |
+| `.dark[data-theme="website"]` + `[data-theme="website"]` | The public site's indigo-night planes and indigo-paper light. Set `class="dark" data-theme="website"` on the document root; a section with `data-theme="website"` and no `.dark` is a complete light island. Accent, status, category and syntax tones stay canonical |
 
 Set one coherent mode on each boundary; do not author contradictory `.light`/`.dark`/named-mode markers. Named light variants keep their existing palettes; `tangle-light` is not silently retuned to the neutral base light palette. Each known boundary receives a complete baseline before named overrides, so nested scopes do not inherit opposite-mode syntax, status or already-resolved HSL aliases.
 

package/bin/drift-baseline.json

@@ -392,96 +392,54 @@
    "apps/web"
   ],
   "branch": "main",
-  "head": "232898919b13",
-  "tsx_files": 56,
+  "head": "ff4b70361cf9",
+  "tsx_files": 57,
   "css_files": 1,
   "versions": {
    "agent-app": [
-    "0.53.7"
+    "0.53.9"
    ],
    "brand": [
-    "1.10.0"
+    "1.11.0"
    ],
    "override:agent-app": [
-    "0.53.7"
+    "0.53.9"
    ],
    "override:brand": [
-    "1.10.0"
+    "1.11.0"
    ],
    "override:sandbox-ui": [
-    "0.121.1"
+    "0.122.3"
    ],
    "override:ui": [
-    "11.15.3"
+    "11.17.0"
    ],
    "sandbox-ui": [
-    "0.121.1"
+    "0.122.3"
    ],
    "ui": [
-    "11.15.3"
+    "11.17.0"
    ]
   },
   "importing_files": {
    "brand": 1,
    "ui": 1,
-   "sandbox-ui": 25,
+   "sandbox-ui": 26,
    "agent-app": 94
   },
   "by_file": {
-   "raw_palette": {
-    "apps/web/src/root.tsx": 3,
-    "apps/web/src/routes/_index.tsx": 35,
-    "apps/web/src/routes/app.terminal.tsx": 16,
-    "apps/web/src/routes/privacy.tsx": 66,
-    "apps/web/src/routes/terms.tsx": 13
-   },
-   "hex": {
-    "apps/web/src/components/app-error-state.tsx": 2,
-    "apps/web/src/root.tsx": 2,
-    "apps/web/src/routes/_index.tsx": 3,
-    "apps/web/src/routes/app.reviews.$id.tsx": 1
-   },
-   "arbitrary_color": {
-    "apps/web/src/components/app-error-state.tsx": 2,
-    "apps/web/src/root.tsx": 2,
-    "apps/web/src/routes/_index.tsx": 3
-   },
-   "css_var_defs": {
-    "apps/web/src/globals.css": 8
-   },
+   "raw_palette": {},
+   "hex": {},
+   "arbitrary_color": {},
+   "css_var_defs": {},
    "local_primitive_count": {}
   },
-  "raw_palette": 133,
-  "hex": 8,
-  "arbitrary_color": 7,
-  "css_var_defs": 8,
+  "raw_palette": 0,
+  "hex": 0,
+  "arbitrary_color": 0,
+  "css_var_defs": 0,
   "local_primitive_count": 0,
-  "palette_top": [
-   [
-    "text-slate-900",
-    36
-   ],
-   [
-    "text-stone-600",
-    21
-   ],
-   [
-    "border-stone-200",
-    9
-   ],
-   [
-    "border-slate-200",
-    7
-   ],
-   [
-    "text-purple-600",
-    7
-   ],
-   [
-    "text-slate-950",
-    5
-   ]
-  ],
+  "palette_top": [],
   "local_primitives": {}
  },
  "legal": {
@@ -1393,12 +1351,15 @@
    "public"
   ],
   "branch": "main",
-  "head": "617315b40791",
-  "tsx_files": 13,
-  "css_files": 6,
+  "head": "1a055e7b73d4",
+  "tsx_files": 14,
+  "css_files": 5,
   "versions": {
    "agent-app": [
     "0.51.12"
+   ],
+   "brand": [
+    "1.13.0"
    ]
   },
   "importing_files": {
@@ -1409,27 +1370,18 @@
   },
   "by_file": {
    "raw_palette": {},
-   "hex": {
-    "public/app.js": 3,
-    "public/design-tokens.css": 33,
-    "public/index.html": 1,
-    "public/invite.html": 1,
-    "public/sandbox-ui.css": 42,
-    "public/style.css": 421
-   },
+   "hex": {},
    "arbitrary_color": {},
    "css_var_defs": {
-    "public/design-components.css": 6,
-    "public/design-tokens.css": 95,
-    "public/sandbox-ui.css": 2,
+    "public/design-components.css": 13,
     "public/style.css": 1
    },
    "local_primitive_count": {}
   },
   "raw_palette": 0,
-  "hex": 501,
+  "hex": 0,
   "arbitrary_color": 0,
-  "css_var_defs": 104,
+  "css_var_defs": 14,
   "local_primitive_count": 0,
   "palette_top": [],
   "local_primitives": {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "1.11.0",
+  "version": "1.13.1",
   "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/focus.test.ts

@@ -59,11 +59,11 @@ const lightStatus = blocksIn(themes, '[data-theme="tangle-light"]').join("\n");
 const scopes: Array<{ name: string; sources: string[] }> = [
   { name: "canonical dark", sources: [DARK] },
   { name: "canonical light", sources: [LIGHT] },
-  ...["aubergine", "arena", "tangle-dark"].map((name) => ({
+  ...["aubergine", "arena", "super", "tangle-dark", "agents"].map((name) => ({
     name,
     sources: [...blocksIn(themes, `[data-theme="${name}"]`), DARK],
   })),
-  ...["aubergine-light", "arena-light", "tangle-light"].map((name) => ({
+  ...["aubergine-light", "arena-light", "super-light", "tangle-light", "agents-light"].map((name) => ({
     name,
     sources: [...blocksIn(themes, `[data-theme="${name}"]`), lightStatus, LIGHT, DARK],
   })),