@tangle-network/brand 1.10.1 → 1.10.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.10.3
+
+### Patch Changes
+
+- 4f70eb8: The dark danger fill is a rose-red tint (`#5a3b40`, was `#533f3e`) at the warning fill's weight, with a quieter border (`#7d4d53`): the brown fill read as muddy beside the amber one. It lifts 1.34:1 off the card, and its text measures 5.53:1 on it.
+
+## 1.10.2
+
+### Patch Changes
+
+- 74fbea5: The dark warning and danger fills are low-chroma raised tints (`#4b4232`, `#533f3e`, was `#6a402c` and `#733b36`) that still lift 1.3:1 off the card, so a callout no longer outweighs the content beside it. Their text measures 5.92:1 and 5.49:1 on the fill. The dark violet fill is `#403d66` with `#c9c4ff` text (6.17:1), so a "Merged" pill reads as a raised chip rather than a dark hole on the card. The teal and orange fills are unchanged.
+
 ## 1.10.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "1.10.1",
+  "version": "1.10.3",
   "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/legacy-light.css

@@ -1,6 +1,6 @@
 /* GENERATED by scripts/gen-compat.mjs. Do not edit.
  * Source: tokens.css + named-themes.css
- * SHA-256: 957b639bc2d9a12d2739d744f33d8e031d4a3eb5ff56541431825335b2b3ad5f
+ * SHA-256: 0fdc5d2db8f1ba9c33012843b867dcc50d8094eada6ebbc915d46a14d5c2b1e2
  * Light-default compatibility; all explicit modes remain canonical.
  */
 :where(:root),
@@ -121,11 +121,11 @@
     --surface-success-bg: #2f5146;
     --surface-success-border: #3c7760;
     --surface-success-text: #5ed7a4;
-    --surface-warning-bg: #6a402c;
-    --surface-warning-border: #916436;
+    --surface-warning-bg: #4b4232;
+    --surface-warning-border: #7a6236;
     --surface-warning-text: #f4c14f;
-    --surface-danger-bg: #733b36;
-    --surface-danger-border: #9a5b56;
+    --surface-danger-bg: #5a3b40;
+    --surface-danger-border: #7d4d53;
     --surface-danger-text: #ffada9;
     --surface-info-bg: #2d4e67;
     --surface-info-border: #3d7292;
@@ -133,9 +133,9 @@
     --surface-teal-bg: #042f2e;
     --surface-teal-border: #134e4a;
     --surface-teal-text: #2dd4bf;
-    --surface-violet-bg: #1e1b4b;
-    --surface-violet-border: #3730a3;
-    --surface-violet-text: #B8B2F5;
+    --surface-violet-bg: #403d66;
+    --surface-violet-border: #5f58b8;
+    --surface-violet-text: #c9c4ff;
     --surface-orange-bg: #431407;
     --surface-orange-border: #7c2d12;
     --surface-orange-text: #fb923c;

package/src/styles/tokens.css

@@ -197,11 +197,11 @@
   --surface-success-bg: #2f5146;
   --surface-success-border: #3c7760;
   --surface-success-text: #5ed7a4;
-  --surface-warning-bg: #6a402c;
-  --surface-warning-border: #916436;
+  --surface-warning-bg: #4b4232;
+  --surface-warning-border: #7a6236;
   --surface-warning-text: #f4c14f;
-  --surface-danger-bg: #733b36;
-  --surface-danger-border: #9a5b56;
+  --surface-danger-bg: #5a3b40;
+  --surface-danger-border: #7d4d53;
   --surface-danger-text: #ffada9;
   --surface-info-bg: #2d4e67;
   --surface-info-border: #3d7292;
@@ -209,9 +209,9 @@
   --surface-teal-bg: #042f2e;
   --surface-teal-border: #134e4a;
   --surface-teal-text: #2dd4bf;
-  --surface-violet-bg: #1e1b4b;
-  --surface-violet-border: #3730a3;
-  --surface-violet-text: #B8B2F5;
+  --surface-violet-bg: #403d66;
+  --surface-violet-border: #5f58b8;
+  --surface-violet-text: #c9c4ff;
   --surface-orange-bg: #431407;
   --surface-orange-border: #7c2d12;
   --surface-orange-text: #fb923c;

package/src/styles/tokens.test.ts

@@ -5,6 +5,7 @@ import {
   blockIn,
   compositeOver,
   contrastRatio,
+  hexIn,
   hexRelativeLuminanceIn,
   hslIn,
   hslToRgb,
@@ -489,3 +490,33 @@ describe("canonical light spine", () => {
     }
   });
 });
+
+describe("dark status surfaces carry their tone in hue, not weight", () => {
+  // A warning or error callout sits on the card beside the content it is about.
+  // A saturated fill (the warning was a 41% brown) outweighed that content; a
+  // low-chroma raised fill keeps the lift the chip contract above asks for,
+  // while the border and the text carry the tone.
+  const saturation = ([r, g, b]: [number, number, number]) => {
+    const max = Math.max(r, g, b) / 255;
+    const min = Math.min(r, g, b) / 255;
+    const light = (max + min) / 2;
+    if (max === min) return 0;
+    return (max - min) / (light > 0.5 ? 2 - max - min : max + min);
+  };
+  for (const tone of ["warning", "danger"]) {
+    it(`${tone}: the dark fill stays under 25% saturation`, () => {
+      expect(saturation(hexIn(DARK, `surface-${tone}-bg`))).toBeLessThanOrEqual(0.25);
+    });
+  }
+  it("violet: the dark fill lifts off the card like the status chips", () => {
+    const card = hslToRgb(hslIn(DARK, "hsl-card"));
+    expect(contrastRatio(hexIn(DARK, "surface-violet-bg"), card)).toBeGreaterThanOrEqual(1.3);
+  });
+  for (const tone of ["warning", "danger", "violet"]) {
+    it(`${tone}: its text clears AA on its own dark fill`, () => {
+      expect(
+        contrastRatio(hexIn(DARK, `surface-${tone}-text`), hexIn(DARK, `surface-${tone}-bg`)),
+      ).toBeGreaterThanOrEqual(4.5);
+    });
+  }
+});