@tangle-network/brand 1.24.0 → 1.24.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.24.2
+
+### Patch Changes
+
+- 628a522: Canonical dark recessed page `--md3-surface-dim` (and `--md3-surface-container-lowest`, equal by design) #060610/#050509 → #040408. The inset workspace panel (#0a0a14) now sits 4.1 L above its gutter instead of 2.2, so pages on sandbox-ui `WorkspaceSurface` pass surface-ladder in dark.
+
+## 1.24.1
+
+### Patch Changes
+
+- ea4b052: Hospitality dark field border #868f87 → #939c94: it measured 2.99:1 on the raised plane (a Select in a card in a card on Connections). Now 4.6:1 on the card and 3.5:1 on raised.
+
 ## 1.24.0
 
 ### Minor Changes

package/bin/drift-baseline.json

@@ -1028,7 +1028,7 @@
   "local_primitives": {}
  },
  "physim": {
-  "repo": "tangle-network/physim",
+  "repo": "tangle-network/hardware-agent",
   "roots": [
    "apps/web"
   ],

package/bin/tangle-drift.mjs

@@ -37,7 +37,7 @@ export const SURFACES = {
   legal: { repo: "tangle-network/legal-agent", roots: [""] },
   insurance: { repo: "tangle-network/insurance-agent", roots: [""] },
   creative: { repo: "tangle-network/creative-agent", roots: [""] },
-  physim: { repo: "tangle-network/physim", roots: ["apps/web"] },
+  physim: { repo: "tangle-network/hardware-agent", roots: ["apps/web"] },
   hospitality: { repo: "tangle-network/hospitality-agent", roots: [""] },
   audits: { repo: "tangle-network/redteam", roots: ["packages/website"] },
   browser: { repo: "tangle-network/bad-app", roots: [""] },

package/dist/index.d.ts

@@ -88,7 +88,7 @@ export declare const palettes: {
     readonly well: "#12111f";
     readonly nested: "#221f33";
     readonly overlay: "#2c2942";
-    readonly deepest: "#050509";
+    readonly deepest: "#040408";
     readonly hairline: "#2a293d";
     readonly ink: "#e6e6e6";
     readonly inkSecondary: "#c7c7c7";

package/dist/index.js

@@ -147,7 +147,7 @@ const palettes = {
 		well: "#12111f",
 		nested: "#221f33",
 		overlay: "#2c2942",
-		deepest: "#050509",
+		deepest: "#040408",
 		hairline: "#2a293d",
 		ink: "#e6e6e6",
 		inkSecondary: "#c7c7c7",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "1.24.0",
+  "version": "1.24.2",
   "description": "Tangle brand system — design tokens, logo, Tailwind v4 theme. Single source of truth for every Tangle app.",
   "type": "module",
   "license": "MIT",

package/src/palette.generated.ts

@@ -78,7 +78,7 @@ export const palettes = {
     well: "#12111f",
     nested: "#221f33",
     overlay: "#2c2942",
-    deepest: "#050509",
+    deepest: "#040408",
     hairline: "#2a293d",
     ink: "#e6e6e6",
     inkSecondary: "#c7c7c7",

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: 6c805f42ca39150c46bc17c76de5083bf24e8b1e12baa70614d51a27e94777f7
+ * SHA-256: d10503737fc4c0704770bb4a56ec1ecf92d8cc4a875de7553f9b30fcb8317b07
  * Light-default compatibility; all explicit modes remain canonical.
  */
 :where(:root),
@@ -25,9 +25,9 @@
 .dark {
     color-scheme: dark;
     --md3-surface: #0a0a14;
-    --md3-surface-dim: #060610;
+    --md3-surface-dim: #040408;
     --md3-surface-bright: #232238;
-    --md3-surface-container-lowest: #050509;
+    --md3-surface-container-lowest: #040408;
     --md3-surface-container-low: #12111f;
     --md3-surface-container: #191826;
     --md3-surface-container-high: #221f33;
@@ -1215,7 +1215,7 @@
     --bg-root: #0a0a14;
     --bg-card: var(--depth-2);
     --bg-input: hsl(var(--hsl-input));
-    --md3-surface-container-lowest: #050509;
+    --md3-surface-container-lowest: #040408;
     --md3-surface-container-low: #12111f;
     --md3-surface-container: #191826;
     --md3-surface-container-high: #221f33;
@@ -1476,8 +1476,8 @@
     --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-strong: #868f87;
-    --field-border: #868f87;
+    --border-strong: #939c94;
+    --field-border: #939c94;
     --border-accent: rgba(118, 183, 145, 0.35);
     --border-accent-hover: rgba(118, 183, 145, 0.50);
     --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px -14px rgba(0, 0, 0, 0.6);

package/src/styles/named-themes.css

@@ -248,7 +248,7 @@
   --hsl-ring: 233 100% 87%;
   --depth-1: #0a0a14; --depth-2: #191826; --depth-3: #221f33; --depth-4: #2c2942;
   --bg-root: #0a0a14; --bg-card: var(--depth-2); --bg-input: hsl(var(--hsl-input));
-  --md3-surface-container-lowest: #050509; --md3-surface-container-low: #12111f;
+  --md3-surface-container-lowest: #040408; --md3-surface-container-low: #12111f;
   --md3-surface-container: #191826; --md3-surface-container-high: #221f33;
   --md3-surface-container-highest: #2c2942; --md3-outline-variant: #2a293d;
   --border-subtle: rgba(255, 255, 255, 0.10); --border-default: rgba(255, 255, 255, 0.16);
@@ -349,7 +349,7 @@
  *   well (field fill) on page / in card / in raised / in raised-2:
  *              100 / 94.9 / 100 / 94.9      12.4 / 12.4 / 22.1 / 22.1
  *   hairline    85.0 #c9d0c7        42.0 #494f4a
- *   field border 60.0 #798479       64.0 #868f87 (both 3.9:1 on the card)
+ *   field border 60.0 #798479       68.3 #939c94 (light 3.9:1 on the card; dark 4.6:1 on the card, 3.5:1 on raised)
  * A well is always the opposite step from its parent in light and always
  * deeper in dark; tokens.css carries the `--well` context that picks one.
  *
@@ -448,8 +448,8 @@
   --well-page: #050705; --well-card: #050705; --well-raised: #181c18; --well-raised-2: #181c18;
   --bg-hover: rgba(118, 183, 145, 0.07); --bg-selection: rgba(118, 183, 145, 0.28);
   --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-strong: #868f87;
-  --field-border: #868f87;
+  --border-hover: rgba(227, 233, 229, 0.28); --border-strong: #939c94;
+  --field-border: #939c94;
   --border-accent: rgba(118, 183, 145, 0.35); --border-accent-hover: rgba(118, 183, 145, 0.50);
   --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 24px -14px rgba(0, 0, 0, 0.6);
   --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.35);

package/src/styles/surface-ladder.test.ts

@@ -39,7 +39,7 @@ const ladder: Array<[role: string, token: string, light: number, dark: number]>
   ["well in raised", "well-raised", 100, 22.1],
   ["well in raised-2", "well-raised-2", 94.9, 22.1],
   ["hairline", "hsl-border", 85.0, 42.0],
-  ["field border", "field-border", 60.0, 64.0],
+  ["field border", "field-border", 60.0, 68.3],
 ];
 
 describe("Hospitality surface ladder", () => {
@@ -88,6 +88,9 @@ describe("Hospitality surface ladder", () => {
     const border = rgbOf(css, "field-border");
     expect(contrastRatio(border, rgbOf(css, "hsl-card")), "on the card").toBeGreaterThanOrEqual(3);
     expect(contrastRatio(border, rgbOf(css, "well-card")), "on the well in a card").toBeGreaterThanOrEqual(3);
+    // A field in a card in a card sits on the raised plane: production measured
+    // the dark Select edge at 2.99:1 there before #939c94.
+    expect(contrastRatio(border, rgbOf(css, "hsl-raised")), "on the raised plane").toBeGreaterThanOrEqual(3);
     expect(declIn(css, "border-strong")).toBe(declIn(css, "field-border"));
   });
 
@@ -285,3 +288,23 @@ describe("Canonical surface ladder (every theme without its own ladder)", () =>
     expect(contrastRatio(border, spine(css(), "hsl-background")), "on the page").toBeGreaterThanOrEqual(3);
   });
 });
+
+describe("Inset workspace backdrop (canonical themes)", () => {
+  // sandbox-ui WorkspaceSurface / WorkspaceLayout surface="inset" paint the
+  // panel with the page colour on a --md3-surface-dim gutter. In dark the two
+  // were 2.2 L apart (#0a0a14 on #060610), so every page on the shared panel
+  // failed surface-ladder card-step on Creative production.
+  const DARK = blockIn(tokens, ".dark");
+  const LIGHT = blockIn(tokens, ".light");
+  it.each([
+    ["dark", () => DARK],
+    ["light", () => LIGHT],
+  ])("steps the panel at least 3 L off its backdrop in %s", (_mode, css) => {
+    const panel = oklchLightness(hslToRgb(hslIn(css(), "hsl-background")));
+    const backdrop = oklchLightness(hexIn(css(), "md3-surface-dim"));
+    expect(Math.abs(panel - backdrop)).toBeGreaterThanOrEqual(3);
+  });
+  it("keeps the dark floor tokens equal, as their comment says", () => {
+    expect(declIn(DARK, "md3-surface-dim")).toBe(declIn(DARK, "md3-surface-container-lowest"));
+  });
+});

package/src/styles/tokens.css

@@ -57,14 +57,14 @@
 .dark {
   color-scheme: dark;
   --md3-surface: #0a0a14; /* L0 page canvas — indigo-lifted off black */
-  --md3-surface-dim: #060610; /* recessed page */
+  --md3-surface-dim: #040408; /* recessed page: 4.1 L under the #0a0a14 panel (the inset workspace surface needs >= 3) */
   --md3-surface-bright: #232238;
   /* Same value as --md3-surface-dim by design, not by drift: both name the floor
    * of the ladder, and dark has no plane below it to give them. They stay two
    * tokens because the roles diverge in light, where the well is paper (#ffffff)
    * and the recessed page is grey (#dcdee6) — a consumer binding to the wrong one
    * there gets the wrong surface. */
-  --md3-surface-container-lowest: #050509; /* L-1 terminal/code well */
+  --md3-surface-container-lowest: #040408; /* L-1 terminal/code well */
   --md3-surface-container-low: #12111f; /* L1 chrome, field wells */
   --md3-surface-container: #191826; /* L2 resting card */
   --md3-surface-container-high: #221f33; /* L3 nested / hover */