@tangle-network/brand 1.13.1 → 1.14.0

package/CHANGELOG.md

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

package/package.json

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