@tangle-network/brand 1.13.0 → 1.14.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 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
+
+- 1170561: Lower the SUPER drift baseline to super-agent main 1a055e7: hex 501 -> 0, CSS variable definitions 104 -> 14.
+
 ## 1.13.0
 
 ### Minor Changes

package/bin/drift-baseline.json

@@ -1351,12 +1351,15 @@
    "public"
   ],
   "branch": "main",
-  "head": "617315b40791",
-  "tsx_files": 13,
-  "css_files": 6,
+  "head": "1a055e7b73d4",
+  "tsx_files": 14,
+  "css_files": 5,
   "versions": {
    "agent-app": [
     "0.51.12"
+   ],
+   "brand": [
+    "1.13.0"
    ]
   },
   "importing_files": {
@@ -1367,27 +1370,18 @@
   },
   "by_file": {
    "raw_palette": {},
-   "hex": {
-    "public/app.js": 3,
-    "public/design-tokens.css": 33,
-    "public/index.html": 1,
-    "public/invite.html": 1,
-    "public/sandbox-ui.css": 42,
-    "public/style.css": 421
-   },
+   "hex": {},
    "arbitrary_color": {},
    "css_var_defs": {
-    "public/design-components.css": 6,
-    "public/design-tokens.css": 95,
-    "public/sandbox-ui.css": 2,
+    "public/design-components.css": 13,
     "public/style.css": 1
    },
    "local_primitive_count": {}
   },
   "raw_palette": 0,
-  "hex": 501,
+  "hex": 0,
   "arbitrary_color": 0,
-  "css_var_defs": 104,
+  "css_var_defs": 14,
   "local_primitive_count": 0,
   "palette_top": [],
   "local_primitives": {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/brand",
-  "version": "1.13.0",
+  "version": "1.14.0",
   "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;