@tangle-network/brand 1.31.0 → 1.31.2

package/src/palette.generated.ts

@@ -40,135 +40,135 @@ export interface BrandPalette {
 /** Resolved palettes for the canonical light and dark themes and the website named theme. */
 export const palettes = {
   light: {
-    canvas: "#eceef3",
+    canvas: "#eceef4",
     card: "#ffffff",
-    well: "#f5f6fa",
-    nested: "#edeff4",
+    well: "#f4f5fb",
+    nested: "#edeff5",
     overlay: "#ffffff",
     deepest: "#ffffff",
-    hairline: "#c8c7d6",
-    ink: "#2d2d2d",
-    inkSecondary: "#3f3f3f",
-    inkMuted: "#4c4c4c",
-    accent: "#4c3fc6",
-    accentHover: "#5a50d6",
+    hairline: "#c7c9ce",
+    ink: "#3f3f3f",
+    inkSecondary: "#505050",
+    inkMuted: "#5d5d5d",
+    accent: "#5f53cc",
+    accentHover: "#6f64d1",
     onAccent: "#ffffff",
-    accentText: "#3c32e9",
-    danger: "#b91c1c",
-    successBg: "#ecfdf5",
-    successBorder: "#a7f3d0",
-    successText: "#047857",
-    warningBg: "#fffbeb",
-    warningBorder: "#fde68a",
-    warningText: "#ab4f09",
-    dangerBg: "#fff1f2",
-    dangerBorder: "#fecdd3",
-    dangerText: "#b91c1c",
-    infoBg: "#f0f9ff",
-    infoBorder: "#bae6fd",
-    infoText: "#0369a1",
-    brandVibrant: "#6366f1",
-    brandCool: "#818cf8",
-    brandGlow: "#3c32e9",
-    brandPurple: "#6366f1",
+    accentText: "#3822f6",
+    danger: "#b01919",
+    successBg: "#f1f6f4",
+    successBorder: "#afcbc0",
+    successText: "#166745",
+    warningBg: "#f7f5f1",
+    warningBorder: "#d1c5b0",
+    warningText: "#775519",
+    dangerBg: "#faf1f1",
+    dangerBorder: "#e4b0b0",
+    dangerText: "#b01919",
+    infoBg: "#f1f5f8",
+    infoBorder: "#b1c8d6",
+    infoText: "#1c6085",
+    brandVibrant: "#6457db",
+    brandCool: "#8073f4",
+    brandGlow: "#3822f6",
+    brandPurple: "#7e6ff9",
   },
   dark: {
-    canvas: "#0a0a14",
+    canvas: "#0b0a13",
     card: "#191826",
-    well: "#11101e",
-    nested: "#252237",
-    overlay: "#312e47",
+    well: "#12111d",
+    nested: "#242335",
+    overlay: "#302f45",
     deepest: "#040408",
-    hairline: "#37364a",
-    ink: "#e6e6e6",
-    inkSecondary: "#c7c7c7",
-    inkMuted: "#b5b5b5",
-    accent: "#4c3fc6",
-    accentHover: "#5a50d6",
+    hairline: "#37354d",
+    ink: "#d7d7d7",
+    inkSecondary: "#bdbdbd",
+    inkMuted: "#ababab",
+    accent: "#5f53cc",
+    accentHover: "#6f64d1",
     onAccent: "#ffffff",
-    accentText: "#a5b4fc",
-    danger: "#ffada9",
-    successBg: "#2f5146",
-    successBorder: "#3c7760",
-    successText: "#5ed7a4",
-    warningBg: "#4b4232",
-    warningBorder: "#7a6236",
-    warningText: "#f4c14f",
-    dangerBg: "#5a3b40",
-    dangerBorder: "#7d4d53",
-    dangerText: "#ffada9",
-    infoBg: "#2d4e67",
-    infoBorder: "#3d7292",
-    infoText: "#67cdff",
-    brandVibrant: "#7c6cf6",
-    brandCool: "#818cf8",
-    brandGlow: "#a5b4fc",
-    brandPurple: "#c7d2fe",
+    accentText: "#ccc7fd",
+    danger: "#f9d6d6",
+    successBg: "#21342c",
+    successBorder: "#496b5d",
+    successText: "#a6eccf",
+    warningBg: "#362f22",
+    warningBorder: "#6e634f",
+    warningText: "#f0dcb8",
+    dangerBg: "#412a2a",
+    dangerBorder: "#785e5e",
+    dangerText: "#f9d6d6",
+    infoBg: "#243239",
+    infoBorder: "#546771",
+    infoText: "#c4e2f3",
+    brandVibrant: "#8c83e5",
+    brandCool: "#8073f4",
+    brandGlow: "#ccc7fd",
+    brandPurple: "#dedbfe",
   },
   websiteLight: {
-    canvas: "#f5f5fb",
+    canvas: "#efeff8",
     card: "#ffffff",
-    well: "#fafafd",
-    nested: "#ececf6",
+    well: "#f7f7ff",
+    nested: "#eeeef7",
     overlay: "#ffffff",
     deepest: "#ffffff",
-    hairline: "#dbdbea",
-    ink: "#191c24",
-    inkSecondary: "#3a3a50",
-    inkMuted: "#5e5e7a",
-    accent: "#4c3fc6",
-    accentHover: "#5a50d6",
+    hairline: "#d0d0d9",
+    ink: "#3f3f3f",
+    inkSecondary: "#515151",
+    inkMuted: "#5d5d5d",
+    accent: "#5f53cc",
+    accentHover: "#6f64d1",
     onAccent: "#ffffff",
-    accentText: "#3c32e9",
-    danger: "#b91c1c",
-    successBg: "#ecfdf5",
-    successBorder: "#a7f3d0",
-    successText: "#047857",
-    warningBg: "#fffbeb",
-    warningBorder: "#fde68a",
-    warningText: "#ab4f09",
-    dangerBg: "#fff1f2",
-    dangerBorder: "#fecdd3",
-    dangerText: "#b91c1c",
-    infoBg: "#f0f9ff",
-    infoBorder: "#bae6fd",
-    infoText: "#0369a1",
-    brandVibrant: "#6366f1",
-    brandCool: "#818cf8",
-    brandGlow: "#3c32e9",
-    brandPurple: "#6366f1",
+    accentText: "#3822f6",
+    danger: "#b01919",
+    successBg: "#f1f6f4",
+    successBorder: "#afcbc0",
+    successText: "#166745",
+    warningBg: "#f7f5f1",
+    warningBorder: "#d1c5b0",
+    warningText: "#775519",
+    dangerBg: "#faf1f1",
+    dangerBorder: "#e4b0b0",
+    dangerText: "#b01919",
+    infoBg: "#f1f5f8",
+    infoBorder: "#b1c8d6",
+    infoText: "#1c6085",
+    brandVibrant: "#6457db",
+    brandCool: "#8073f4",
+    brandGlow: "#3822f6",
+    brandPurple: "#7e6ff9",
   },
   websiteDark: {
     canvas: "#0c0b1d",
-    card: "#1d1b38",
-    well: "#141328",
-    nested: "#222041",
-    overlay: "#262448",
-    deepest: "#080814",
-    hairline: "#33315f",
-    ink: "#fdfdfd",
-    inkSecondary: "#aaa8b8",
-    inkMuted: "#9496bc",
-    accent: "#4c3fc6",
-    accentHover: "#5a50d6",
+    card: "#201e3e",
+    well: "#16142d",
+    nested: "#2b294f",
+    overlay: "#363462",
+    deepest: "#04040e",
+    hairline: "#403d72",
+    ink: "#e4e4e4",
+    inkSecondary: "#c8c8c8",
+    inkMuted: "#b6b6b6",
+    accent: "#5f53cc",
+    accentHover: "#6f64d1",
     onAccent: "#ffffff",
-    accentText: "#a5b4fc",
-    danger: "#ffada9",
-    successBg: "#2f5146",
-    successBorder: "#3c7760",
-    successText: "#5ed7a4",
-    warningBg: "#4b4232",
-    warningBorder: "#7a6236",
-    warningText: "#f4c14f",
-    dangerBg: "#5a3b40",
-    dangerBorder: "#7d4d53",
-    dangerText: "#ffada9",
-    infoBg: "#2d4e67",
-    infoBorder: "#3d7292",
-    infoText: "#67cdff",
-    brandVibrant: "#7c6cf6",
-    brandCool: "#818cf8",
-    brandGlow: "#a5b4fc",
-    brandPurple: "#c7d2fe",
+    accentText: "#ccc7fd",
+    danger: "#f9d6d6",
+    successBg: "#21342c",
+    successBorder: "#496b5d",
+    successText: "#a6eccf",
+    warningBg: "#362f22",
+    warningBorder: "#6e634f",
+    warningText: "#f0dcb8",
+    dangerBg: "#412a2a",
+    dangerBorder: "#785e5e",
+    dangerText: "#f9d6d6",
+    infoBg: "#243239",
+    infoBorder: "#546771",
+    infoText: "#c4e2f3",
+    brandVibrant: "#8c83e5",
+    brandCool: "#8073f4",
+    brandGlow: "#ccc7fd",
+    brandPurple: "#dedbfe",
   },
 } as const satisfies Record<string, BrandPalette>;

package/src/styles/accent-on-tint.test.ts

@@ -20,6 +20,7 @@ const SURFACES = [
   ["canvas", "hsl-background"],
   ["card", "hsl-card"],
   ["muted", "hsl-muted"],
+  ["popover", "hsl-popover"],
 ] as const;
 
 describe("accent text reads on the selected tint in every theme scope", () => {
@@ -27,7 +28,9 @@ describe("accent text reads on the selected tint in every theme scope", () => {
     it(name, () => {
       const accentText = resolve(sources, "accent-text");
       const primary = resolve(sources, "hsl-primary");
-      for (const [surfaceName, token] of SURFACES) {
+      const raised = sources.some((source) => source.includes("--hsl-raised-2:"))
+        ? [["highest nested card", "hsl-raised-2"] as const] : [];
+      for (const [surfaceName, token] of [...SURFACES, ...raised]) {
         const surface = resolve(sources, token);
         for (const alpha of TINTS) {
           const tint = compositeOver(primary, surface, alpha);