@tangle-network/brand 1.24.0 → 1.24.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "1.24.0",
+  "version": "1.24.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/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: 6316c513b7feb4a21006744fa33c56971c00ba6b0d971b1e4b95b0343b497fcc
  * Light-default compatibility; all explicit modes remain canonical.
  */
 :where(:root),
@@ -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

@@ -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"));
   });