@tangle-network/brand 1.24.1 → 1.24.2

package/CHANGELOG.md

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

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.1",
+  "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: 6316c513b7feb4a21006744fa33c56971c00ba6b0d971b1e4b95b0343b497fcc
+ * 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;

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

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

@@ -288,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 */