@tangle-network/brand 1.10.3 → 1.13.0

package/src/styles/tokens.css

@@ -45,8 +45,14 @@
 [data-theme="aubergine-light"],
 [data-theme="arena"],
 [data-theme="arena-light"],
+[data-theme="super"],
+[data-theme="super-light"],
 [data-theme="tangle-dark"],
 [data-theme="tangle-light"],
+[data-theme="hospitality"],
+[data-theme="agents"],
+[data-theme="agents-light"],
+[data-theme="website"],
 .light,
 .dark {
   color-scheme: dark;
@@ -206,15 +212,73 @@
   --surface-info-bg: #2d4e67;
   --surface-info-border: #3d7292;
   --surface-info-text: #67cdff;
-  --surface-teal-bg: #042f2e;
-  --surface-teal-border: #134e4a;
-  --surface-teal-text: #2dd4bf;
-  --surface-violet-bg: #403d66;
-  --surface-violet-border: #5f58b8;
-  --surface-violet-text: #c9c4ff;
-  --surface-orange-bg: #431407;
-  --surface-orange-border: #7c2d12;
-  --surface-orange-text: #fb923c;
+  /* tones:begin — generated by scripts/gen-ladders.mjs; edit its CATEGORY map, not these lines. */
+  --tone-violet-bg: #4e3a60;
+  --tone-violet-bg-hover: #583d71;
+  --tone-violet-bg-selected: #624080;
+  --tone-violet-border: #8457aa;
+  --tone-violet-border-selected: #d19dff;
+  --tone-violet-text: #ecd9fa;
+  --tone-violet-icon: #d19dff;
+  --tone-orange-bg: #583c2b;
+  --tone-orange-bg-hover: #664029;
+  --tone-orange-bg-selected: #724327;
+  --tone-orange-border: #a35829;
+  --tone-orange-border-selected: #ff801f;
+  --tone-orange-text: #ffe0c2;
+  --tone-orange-icon: #ff801f;
+  --tone-teal-bg: #2a4744;
+  --tone-teal-bg-hover: #28504b;
+  --tone-teal-bg-selected: #265751;
+  --tone-teal-border: #207e73;
+  --tone-teal-border-selected: #0eb39e;
+  --tone-teal-text: #adf0dd;
+  --tone-teal-icon: #0eb39e;
+  --tone-blue-bg: #25455e;
+  --tone-blue-bg-hover: #224c6c;
+  --tone-blue-bg-selected: #1f537b;
+  --tone-blue-border: #2870bd;
+  --tone-blue-border-selected: #70b8ff;
+  --tone-blue-text: #c2e6ff;
+  --tone-blue-icon: #70b8ff;
+  --tone-pink-bg: #5e344f;
+  --tone-pink-bg-hover: #6d3659;
+  --tone-pink-bg-selected: #7b3762;
+  --tone-pink-border: #a84885;
+  --tone-pink-border-selected: #ff8dcc;
+  --tone-pink-text: #fdd1ea;
+  --tone-pink-icon: #ff8dcc;
+  --tone-brown-bg: #494038;
+  --tone-brown-bg-hover: #54473c;
+  --tone-brown-bg-selected: #5c4c3e;
+  --tone-brown-border: #7c5f46;
+  --tone-brown-border-selected: #dbb594;
+  --tone-brown-text: #f2e1ca;
+  --tone-brown-icon: #dbb594;
+  --tone-cyan-bg: #27464d;
+  --tone-cyan-bg-hover: #234f59;
+  --tone-cyan-bg-selected: #205662;
+  --tone-cyan-border: #11809c;
+  --tone-cyan-border-selected: #23afd0;
+  --tone-cyan-text: #b6ecf7;
+  --tone-cyan-icon: #23afd0;
+  --tone-lime-bg: #404536;
+  --tone-lime-bg-hover: #444b37;
+  --tone-lime-bg-selected: #495239;
+  --tone-lime-border: #577538;
+  --tone-lime-border-selected: #bdee63;
+  --tone-lime-text: #e3f7ba;
+  --tone-lime-icon: #bdee63;
+  --surface-violet-bg: #4e3a60;
+  --surface-violet-border: #8457aa;
+  --surface-violet-text: #d19dff;
+  --surface-orange-bg: #583c2b;
+  --surface-orange-border: #a35829;
+  --surface-orange-text: #ffa057;
+  --surface-teal-bg: #2a4744;
+  --surface-teal-border: #207e73;
+  --surface-teal-text: #0bd8b6;
+  /* tones:end */
 
   /* Run-mix ramp — the fills of a proportional status bar.
    *
@@ -458,10 +522,14 @@
  * carries both `data-sandbox-ui` (dark) and `data-theme="light"`, light wins. */
 [data-sandbox-theme="vault"]:where(:not(.dark)),
 [data-sandbox-theme="dawn"]:where(:not(.dark)),
+[data-theme="hospitality"]:where(:not(.dark)),
+[data-theme="website"]:where(:not(.dark)),
 [data-theme="light"],
 [data-theme="aubergine-light"],
 [data-theme="arena-light"],
+[data-theme="super-light"],
 [data-theme="tangle-light"],
+[data-theme="agents-light"],
 .light {
   color-scheme: light;
   /* Light theme — neutral surfaces with purple accents */
@@ -588,15 +656,73 @@
   --surface-info-bg: #f0f9ff;
   --surface-info-border: #bae6fd;
   --surface-info-text: #0369a1;
-  --surface-teal-bg: #f0fdfa;
-  --surface-teal-border: #99f6e4;
-  --surface-teal-text: #0f766e;
-  --surface-violet-bg: #F0EEFF;
-  --surface-violet-border: #C5C0F0;
-  --surface-violet-text: #3E349E;
-  --surface-orange-bg: #fff7ed;
-  --surface-orange-border: #fed7aa;
-  --surface-orange-text: #c2410c;
+  /* tones:begin — generated by scripts/gen-ladders.mjs; edit its CATEGORY map, not these lines. */
+  --tone-violet-bg: #f7edfe;
+  --tone-violet-bg-hover: #f2e2fc;
+  --tone-violet-bg-selected: #ead5f9;
+  --tone-violet-border: #e0c4f4;
+  --tone-violet-border-selected: #8e4ec6;
+  --tone-violet-text: #402060;
+  --tone-violet-icon: #8e4ec6;
+  --tone-orange-bg: #ffefd6;
+  --tone-orange-bg-hover: #ffdfb5;
+  --tone-orange-bg-selected: #ffd19a;
+  --tone-orange-border: #ffc182;
+  --tone-orange-border-selected: #cc4e00;
+  --tone-orange-text: #582d1d;
+  --tone-orange-icon: #cc4e00;
+  --tone-teal-bg: #e0f8f3;
+  --tone-teal-bg-hover: #ccf3ea;
+  --tone-teal-bg-selected: #b8eae0;
+  --tone-teal-border: #a1ded2;
+  --tone-teal-border-selected: #008573;
+  --tone-teal-text: #0d3d38;
+  --tone-teal-icon: #008573;
+  --tone-blue-bg: #e6f4fe;
+  --tone-blue-bg-hover: #d5efff;
+  --tone-blue-bg-selected: #c2e5ff;
+  --tone-blue-border: #acd8fc;
+  --tone-blue-border-selected: #0d74ce;
+  --tone-blue-text: #113264;
+  --tone-blue-icon: #0d74ce;
+  --tone-pink-bg: #fee9f5;
+  --tone-pink-bg-hover: #fbdcef;
+  --tone-pink-bg-selected: #f6cee7;
+  --tone-pink-border: #efbfdd;
+  --tone-pink-border-selected: #cf3897;
+  --tone-pink-text: #651249;
+  --tone-pink-icon: #cf3897;
+  --tone-brown-bg: #f6eee7;
+  --tone-brown-bg-hover: #f0e4d9;
+  --tone-brown-bg-selected: #ebdaca;
+  --tone-brown-border: #e4cdb7;
+  --tone-brown-border-selected: #815e46;
+  --tone-brown-text: #3e332e;
+  --tone-brown-icon: #815e46;
+  --tone-cyan-bg: #def7f9;
+  --tone-cyan-bg-hover: #caf1f6;
+  --tone-cyan-bg-selected: #b5e9f0;
+  --tone-cyan-border: #9ddde7;
+  --tone-cyan-border-selected: #107d98;
+  --tone-cyan-text: #0d3c48;
+  --tone-cyan-icon: #107d98;
+  --tone-lime-bg: #eef6d6;
+  --tone-lime-bg-hover: #e2f0bd;
+  --tone-lime-bg-selected: #d3e7a6;
+  --tone-lime-border: #c2da91;
+  --tone-lime-border-selected: #5c7c2f;
+  --tone-lime-text: #37401c;
+  --tone-lime-icon: #5c7c2f;
+  --surface-violet-bg: #f7edfe;
+  --surface-violet-border: #e0c4f4;
+  --surface-violet-text: #8145b5;
+  --surface-orange-bg: #ffefd6;
+  --surface-orange-border: #ffc182;
+  --surface-orange-text: #bc4904;
+  --surface-teal-bg: #e0f8f3;
+  --surface-teal-border: #a1ded2;
+  --surface-teal-text: #017d6d;
+  /* tones:end */
 
   /* Run-mix ramp — the fills of a proportional status bar.
    *
@@ -809,6 +935,8 @@
  * themes, which would otherwise inherit the dark ramp from :root. */
 [data-sandbox-theme="vault"]:where(:not(.dark)),
 [data-sandbox-theme="dawn"]:where(:not(.dark)),
+[data-theme="hospitality"]:where(:not(.dark)),
+[data-theme="website"]:where(:not(.dark)),
 [data-theme="light"],
 .light,
 [data-theme$="-light"] {
@@ -843,3 +971,86 @@
     --motion-arrive: var(--duration-arrive) var(--ease-expo);
   }
 }
+
+/* tone-scopes:begin — generated by scripts/gen-ladders.mjs; edit its CATEGORY map, not these lines. */
+[data-tone="violet"],
+[data-tone="violet"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-violet-bg);
+  --tone-bg-hover: var(--tone-violet-bg-hover);
+  --tone-bg-selected: var(--tone-violet-bg-selected);
+  --tone-border: var(--tone-violet-border);
+  --tone-border-selected: var(--tone-violet-border-selected);
+  --tone-text: var(--tone-violet-text);
+  --tone-icon: var(--tone-violet-icon);
+}
+[data-tone="orange"],
+[data-tone="orange"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-orange-bg);
+  --tone-bg-hover: var(--tone-orange-bg-hover);
+  --tone-bg-selected: var(--tone-orange-bg-selected);
+  --tone-border: var(--tone-orange-border);
+  --tone-border-selected: var(--tone-orange-border-selected);
+  --tone-text: var(--tone-orange-text);
+  --tone-icon: var(--tone-orange-icon);
+}
+[data-tone="teal"],
+[data-tone="teal"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-teal-bg);
+  --tone-bg-hover: var(--tone-teal-bg-hover);
+  --tone-bg-selected: var(--tone-teal-bg-selected);
+  --tone-border: var(--tone-teal-border);
+  --tone-border-selected: var(--tone-teal-border-selected);
+  --tone-text: var(--tone-teal-text);
+  --tone-icon: var(--tone-teal-icon);
+}
+[data-tone="blue"],
+[data-tone="blue"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-blue-bg);
+  --tone-bg-hover: var(--tone-blue-bg-hover);
+  --tone-bg-selected: var(--tone-blue-bg-selected);
+  --tone-border: var(--tone-blue-border);
+  --tone-border-selected: var(--tone-blue-border-selected);
+  --tone-text: var(--tone-blue-text);
+  --tone-icon: var(--tone-blue-icon);
+}
+[data-tone="pink"],
+[data-tone="pink"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-pink-bg);
+  --tone-bg-hover: var(--tone-pink-bg-hover);
+  --tone-bg-selected: var(--tone-pink-bg-selected);
+  --tone-border: var(--tone-pink-border);
+  --tone-border-selected: var(--tone-pink-border-selected);
+  --tone-text: var(--tone-pink-text);
+  --tone-icon: var(--tone-pink-icon);
+}
+[data-tone="brown"],
+[data-tone="brown"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-brown-bg);
+  --tone-bg-hover: var(--tone-brown-bg-hover);
+  --tone-bg-selected: var(--tone-brown-bg-selected);
+  --tone-border: var(--tone-brown-border);
+  --tone-border-selected: var(--tone-brown-border-selected);
+  --tone-text: var(--tone-brown-text);
+  --tone-icon: var(--tone-brown-icon);
+}
+[data-tone="cyan"],
+[data-tone="cyan"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-cyan-bg);
+  --tone-bg-hover: var(--tone-cyan-bg-hover);
+  --tone-bg-selected: var(--tone-cyan-bg-selected);
+  --tone-border: var(--tone-cyan-border);
+  --tone-border-selected: var(--tone-cyan-border-selected);
+  --tone-text: var(--tone-cyan-text);
+  --tone-icon: var(--tone-cyan-icon);
+}
+[data-tone="lime"],
+[data-tone="lime"] :is(.light, .dark, [data-theme], [data-sandbox-ui], [data-sandbox-theme]) {
+  --tone-bg: var(--tone-lime-bg);
+  --tone-bg-hover: var(--tone-lime-bg-hover);
+  --tone-bg-selected: var(--tone-lime-bg-selected);
+  --tone-border: var(--tone-lime-border);
+  --tone-border-selected: var(--tone-lime-border-selected);
+  --tone-text: var(--tone-lime-text);
+  --tone-icon: var(--tone-lime-icon);
+}
+/* tone-scopes:end */

package/src/styles/tokens.test.ts

@@ -520,3 +520,44 @@ describe("dark status surfaces carry their tone in hue, not weight", () => {
     });
   }
 });
+
+describe("categorical tones are a complete, legible family", () => {
+  // gen-ladders.mjs solves these and refuses to write a failing set; this holds
+  // the written file to the same floors, so a hand edit inside the generated
+  // region fails here before `gen-ladders --check` is even run.
+  const CATEGORIES = ["violet", "orange", "teal", "blue", "pink", "brown", "cyan", "lime"];
+  const ROLES = ["bg", "bg-hover", "bg-selected", "border", "border-selected", "text", "icon"];
+  for (const [theme, spine] of [
+    ["dark", DARK],
+    ["light", LIGHT],
+  ] as const) {
+    for (const tone of CATEGORIES) {
+      it(`${theme} ${tone}: text and icon clear their floors on every fill`, () => {
+        for (const role of ROLES) hexIn(spine, `tone-${tone}-${role}`);
+        for (const fill of ["bg", "bg-hover", "bg-selected"]) {
+          const under = hexIn(spine, `tone-${tone}-${fill}`);
+          expect(
+            contrastRatio(hexIn(spine, `tone-${tone}-text`), under),
+            `${theme} --tone-${tone}-text on --tone-${tone}-${fill}`,
+          ).toBeGreaterThanOrEqual(4.5);
+          expect(
+            contrastRatio(hexIn(spine, `tone-${tone}-icon`), under),
+            `${theme} --tone-${tone}-icon on --tone-${tone}-${fill}`,
+          ).toBeGreaterThanOrEqual(3);
+        }
+      });
+    }
+  }
+  it("keeps the shipped --surface-{violet,orange,teal}-* names on the family, with legible text", () => {
+    for (const spine of [DARK, LIGHT]) {
+      for (const tone of ["violet", "orange", "teal"]) {
+        for (const role of ["bg", "border"]) {
+          expect(hexIn(spine, `surface-${tone}-${role}`)).toEqual(hexIn(spine, `tone-${tone}-${role}`));
+        }
+        expect(
+          contrastRatio(hexIn(spine, `surface-${tone}-text`), hexIn(spine, `surface-${tone}-bg`)),
+        ).toBeGreaterThanOrEqual(4.5);
+      }
+    }
+  });
+});