@tangle-network/brand 1.13.1 → 1.14.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 1.14.1
+
+### Patch Changes
+
+- 6cddfa1: Lower the Legal drift baseline to legal-agent main f0b961c: raw palette 1 -> 0, hex 136 -> 1, arbitrary colors 2 -> 0, CSS variable definitions 267 -> 0.
+
+## 1.14.0
+
+### Minor Changes
+
+- 085e657: Add `--scrim`, `--scrim-strong` and `--on-media` tokens, with `bg-scrim`, `bg-scrim-strong` and `text-on-media` Tailwind colors, for modal backdrops and text on photos.
+
 ## 1.13.1
 
 ### Patch Changes

package/bin/drift-baseline.json

@@ -448,57 +448,44 @@
    ""
   ],
   "branch": "main",
-  "head": "0a0580127433",
+  "head": "f0b961cb1adc",
   "tsx_files": 62,
   "css_files": 1,
   "versions": {
    "agent-app": [
-    "0.53.7"
+    "0.53.11"
    ],
    "brand": [
-    "1.10.1"
+    "1.11.0"
    ],
    "sandbox-ui": [
-    "0.117.0"
+    "0.124.0"
    ],
    "ui": [
-    "11.16.5"
+    "11.17.0"
    ]
   },
   "importing_files": {
-   "brand": 1,
-   "ui": 1,
+   "brand": 2,
+   "ui": 16,
    "sandbox-ui": 18,
-   "agent-app": 114
+   "agent-app": 115
   },
   "by_file": {
-   "raw_palette": {
-    "src/routes/_index.tsx": 1
-   },
+   "raw_palette": {},
    "hex": {
-    "src/app.css": 132,
-    "src/root.tsx": 2,
-    "src/routes/_index.tsx": 2
-   },
-   "arbitrary_color": {
-    "src/routes/_index.tsx": 2
-   },
-   "css_var_defs": {
-    "src/app.css": 267
+    "src/root.tsx": 1
    },
+   "arbitrary_color": {},
+   "css_var_defs": {},
    "local_primitive_count": {}
   },
-  "raw_palette": 1,
-  "hex": 136,
-  "arbitrary_color": 2,
-  "css_var_defs": 267,
+  "raw_palette": 0,
+  "hex": 1,
+  "arbitrary_color": 0,
+  "css_var_defs": 0,
   "local_primitive_count": 0,
-  "palette_top": [
-   [
-    "text-slate-300",
-    1
-   ]
-  ],
+  "palette_top": [],
   "local_primitives": {}
  },
  "creative": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "1.13.1",
+  "version": "1.14.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: 4c1924fc1546f474d5006dc2ea3670fb9c74c7ee0ccebc058b310fbed7a9757e
+ * SHA-256: c09b4b2d488a4b0bbe7ace4523e27d9cc9bba99013b95b2d361ab476bd61ebf2
  * Light-default compatibility; all explicit modes remain canonical.
  */
 :where(:root),
@@ -268,6 +268,9 @@
     --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
     --shadow-overlay: 0 2px 6px hsl(var(--hsl-foreground) / 0.1),
     0 16px 40px hsl(var(--hsl-foreground) / 0.16);
+    --scrim: rgb(0 0 0 / 0.4);
+    --scrim-strong: rgb(0 0 0 / 0.72);
+    --on-media: #ffffff;
     --shadow-status-running: none;
     --shadow-status-creating: none;
     --shadow-status-error: none;
@@ -757,6 +760,9 @@
     --text-page: var(--font-size-3xl);
     --text-section: var(--font-size-xl);
     --text-eyebrow: var(--font-size-sm);
+    --color-scrim: var(--scrim);
+    --color-scrim-strong: var(--scrim-strong);
+    --color-on-media: var(--on-media);
     --color-depth-1: var(--depth-1);
     --color-depth-2: var(--depth-2);
     --color-depth-3: var(--depth-3);

package/src/styles/named-themes.css

@@ -19,6 +19,9 @@
   --text-page: var(--font-size-3xl);
   --text-section: var(--font-size-xl);
   --text-eyebrow: var(--font-size-sm);
+  --color-scrim: var(--scrim);
+  --color-scrim-strong: var(--scrim-strong);
+  --color-on-media: var(--on-media);
   --color-depth-1: var(--depth-1);
   --color-depth-2: var(--depth-2);
   --color-depth-3: var(--depth-3);

package/src/styles/scrim.test.ts

@@ -0,0 +1,19 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+import { blockIn } from "./css-test-utils";
+
+const read = (name: string) =>
+  readFileSync(path.resolve(import.meta.dirname, name), "utf8");
+const tokens = read("tokens.css");
+
+describe("scrim and media ink", () => {
+  it("are declared once on the shared baseline, so every theme dims the same way", () => {
+    const baseline = blockIn(tokens, ".dark");
+    expect(baseline).toMatch(/--scrim:\s*rgb\(0 0 0 \/ 0\.4\);/);
+    expect(baseline).toMatch(/--scrim-strong:\s*rgb\(0 0 0 \/ 0\.72\);/);
+    expect(baseline).toMatch(/--on-media:\s*#ffffff;/);
+    expect(blockIn(tokens, ".light")).not.toMatch(/^\s*--(scrim|on-media)[\w-]*\s*:/m);
+    expect(read("named-themes.css")).not.toMatch(/^\s*--(scrim|on-media)[\w-]*\s*:/m);
+  });
+});

package/src/styles/theme.css

@@ -61,6 +61,9 @@
   --text-section: var(--font-size-xl);
   --text-eyebrow: var(--font-size-sm);
 
+  --color-scrim: var(--scrim);
+  --color-scrim-strong: var(--scrim-strong);
+  --color-on-media: var(--on-media);
   --color-depth-1: var(--depth-1);
   --color-depth-2: var(--depth-2);
   --color-depth-3: var(--depth-3);

package/src/styles/tokens.css

@@ -411,6 +411,13 @@
   --shadow-overlay:
     0 2px 6px hsl(var(--hsl-foreground) / 0.1),
     0 16px 40px hsl(var(--hsl-foreground) / 0.16);
+  /* Scrim and media ink. A scrim dims the page behind a modal or sheet, or
+     darkens a photo under its caption. It is black in every theme: a dimming
+     layer that inverted in dark mode would brighten the page it covers.
+     --on-media is the ink for text set directly on a photo or a scrim. */
+  --scrim: rgb(0 0 0 / 0.4);
+  --scrim-strong: rgb(0 0 0 / 0.72);
+  --on-media: #ffffff;
   --shadow-status-running: none;
   --shadow-status-creating: none;
   --shadow-status-error: none;