@crewlethq/tokens 0.12.0 → 0.13.0

package/dist/themes.js

@@ -27,9 +27,12 @@ export const themes = {
             "text": {
                 "primary": "#121625",
                 "secondary": "#3e4459",
+                "linkQuiet": "#484e99",
                 "tertiary": "#585e73",
                 "muted": "#878d9f",
                 "onAccent": "#ffffff",
+                "onDanger": "#ffffff",
+                "onScrim": "#ffffff",
                 "inverse": "#f6f7fb"
             },
             "brand": {
@@ -144,9 +147,12 @@ export const themes = {
             "text": {
                 "primary": "#e7eaf3",
                 "secondary": "#a9b0c3",
+                "linkQuiet": "#a9b0ea",
                 "tertiary": "#9fa7bc",
                 "muted": "#5a6176",
                 "onAccent": "#ffffff",
+                "onDanger": "#ffffff",
+                "onScrim": "#ffffff",
                 "inverse": "#07080d"
             },
             "brand": {
@@ -244,3 +250,470 @@ export const themes = {
         }
     }
 };
+/** The groups a theme picker lists the themes under, in order. */
+export const themeGroups = [
+    {
+        "id": "crewlet",
+        "name": "Crewlet",
+        "description": "The brand's own palettes."
+    },
+    {
+        "id": "purple",
+        "name": "Purple",
+        "description": "Grounds anchored on #090019."
+    },
+    {
+        "id": "cool",
+        "name": "Cool",
+        "description": "Blue-black grounds."
+    },
+    {
+        "id": "warm",
+        "name": "Warm",
+        "description": "Warm stone grounds."
+    },
+    {
+        "id": "high-contrast",
+        "name": "High contrast",
+        "description": "For readers who need more contrast than the defaults give."
+    }
+];
+/**
+ * Every theme, in the order a picker lists them. `id` is the value of the
+ * data-palette attribute that paints it (the default paints with none),
+ * `swatch` the colours a picker draws its thumbnail with in each mode, and
+ * `tint` and `contrast` the profile the palette suite measures it under.
+ */
+export const themeRegistry = [
+    {
+        "id": "crewlet",
+        "name": "Crewlet",
+        "group": "crewlet",
+        "tag": "Default",
+        "description": "Blue-black neutrals with a violet accent and a cyan working state.",
+        "tint": null,
+        "contrast": "standard",
+        "swatch": {
+            "dark": {
+                "frame": "#07080d",
+                "sheet": "#0c0e16",
+                "card": "#11141d",
+                "raised": "#242833",
+                "hairline": "#191b20",
+                "text": "#e7eaf3",
+                "muted": "#5a6176",
+                "accent": "#725be6",
+                "onAccent": "#ffffff",
+                "info": "#61d0ff",
+                "warning": "#f0b425",
+                "danger": "#d73756",
+                "success": "#34c98b"
+            },
+            "light": {
+                "frame": "#e9ecf3",
+                "sheet": "#f6f7fb",
+                "card": "#fcfcfc",
+                "raised": "#f1f2f6",
+                "hairline": "#e7e8ec",
+                "text": "#121625",
+                "muted": "#878d9f",
+                "accent": "#735af2",
+                "onAccent": "#ffffff",
+                "info": "#2f92b4",
+                "warning": "#c17300",
+                "danger": "#b9112c",
+                "success": "#0b9a74"
+            }
+        }
+    },
+    {
+        "id": "violet",
+        "name": "Violet",
+        "group": "crewlet",
+        "tag": "Zinc and violet",
+        "description": "Zinc neutrals with a saturated violet accent.",
+        "tint": null,
+        "contrast": "standard",
+        "swatch": {
+            "dark": {
+                "frame": "#09090b",
+                "sheet": "#101013",
+                "card": "#141418",
+                "raised": "#1b1b20",
+                "hairline": "#232329",
+                "text": "#ededf0",
+                "muted": "#5f5f68",
+                "accent": "#7c56ff",
+                "onAccent": "#ffffff",
+                "info": "#4c9dff",
+                "warning": "#f4b221",
+                "danger": "#e50055",
+                "success": "#3ecf8f"
+            },
+            "light": {
+                "frame": "#ededea",
+                "sheet": "#f9f9f8",
+                "card": "#ffffff",
+                "raised": "#f3f3f1",
+                "hairline": "#e4e4e0",
+                "text": "#17171a",
+                "muted": "#8d8d94",
+                "accent": "#6b45f0",
+                "onAccent": "#ffffff",
+                "info": "#3081de",
+                "warning": "#c57600",
+                "danger": "#c01d32",
+                "success": "#009b74"
+            }
+        }
+    },
+    {
+        "id": "origin",
+        "name": "Origin",
+        "group": "crewlet",
+        "tag": "Purple on charcoal",
+        "description": "Charcoal and near-black grounds, graphite cards and hairlines, and a #5469d4 purple on the primary button, links and focus.",
+        "tint": null,
+        "contrast": "standard",
+        "swatch": {
+            "dark": {
+                "frame": "#15171c",
+                "sheet": "#0e0f13",
+                "card": "#1c1e24",
+                "raised": "#23262c",
+                "hairline": "#3f4145",
+                "text": "#ececee",
+                "muted": "#60646b",
+                "accent": "#5469d4",
+                "onAccent": "#ffffff",
+                "info": "#3a8ff4",
+                "warning": "#f59e0b",
+                "danger": "#d6364c",
+                "success": "#3eba82"
+            },
+            "light": {
+                "frame": "#f4f4f5",
+                "sheet": "#ffffff",
+                "card": "#f7f7f8",
+                "raised": "#ececef",
+                "hairline": "#e2e2e5",
+                "text": "#09090b",
+                "muted": "#929294",
+                "accent": "#5469d4",
+                "onAccent": "#ffffff",
+                "info": "#3190c5",
+                "warning": "#c57500",
+                "danger": "#b9112c",
+                "success": "#0f9a73"
+            }
+        }
+    },
+    {
+        "id": "abyss",
+        "name": "Abyss",
+        "group": "purple",
+        "tag": "Vivid violet",
+        "description": "Ink-violet grounds on #090019 with an electric violet accent.",
+        "tint": {
+            "hue": 298,
+            "chroma": 7
+        },
+        "contrast": "standard",
+        "swatch": {
+            "dark": {
+                "frame": "#090019",
+                "sheet": "#120425",
+                "card": "#180b2c",
+                "raised": "#1e1430",
+                "hairline": "#2b1f41",
+                "text": "#ebe6f8",
+                "muted": "#62577c",
+                "accent": "#8633fe",
+                "onAccent": "#ffffff",
+                "info": "#1281c3",
+                "warning": "#ffb22f",
+                "danger": "#dd2c5b",
+                "success": "#16d297"
+            },
+            "light": {
+                "frame": "#e8e3f3",
+                "sheet": "#f8f6fd",
+                "card": "#fdfcff",
+                "raised": "#edeaf7",
+                "hairline": "#dfd9eb",
+                "text": "#1d132f",
+                "muted": "#8d83a2",
+                "accent": "#6b11da",
+                "onAccent": "#ffffff",
+                "info": "#287ac2",
+                "warning": "#c16f00",
+                "danger": "#9a0028",
+                "success": "#019472"
+            }
+        }
+    },
+    {
+        "id": "iris",
+        "name": "Iris",
+        "group": "purple",
+        "tag": "Periwinkle",
+        "description": "Cool violet grounds with a periwinkle accent that carries a dark label at night.",
+        "tint": {
+            "hue": 296,
+            "chroma": 7.5
+        },
+        "contrast": "standard",
+        "swatch": {
+            "dark": {
+                "frame": "#09011a",
+                "sheet": "#110b1e",
+                "card": "#141021",
+                "raised": "#1c0f34",
+                "hairline": "#292339",
+                "text": "#eae7f7",
+                "muted": "#645d76",
+                "accent": "#9584ff",
+                "onAccent": "#09011a",
+                "info": "#0279a9",
+                "warning": "#f9ad26",
+                "danger": "#db3845",
+                "success": "#27cf9b"
+            },
+            "light": {
+                "frame": "#e8e4f6",
+                "sheet": "#f8f6fd",
+                "card": "#ffffff",
+                "raised": "#efecf9",
+                "hairline": "#dddaea",
+                "text": "#181128",
+                "muted": "#8b859d",
+                "accent": "#4a2abd",
+                "onAccent": "#ffffff",
+                "info": "#0585b9",
+                "warning": "#be6e02",
+                "danger": "#9a0b35",
+                "success": "#039571"
+            }
+        }
+    },
+    {
+        "id": "dusk",
+        "name": "Dusk",
+        "group": "purple",
+        "tag": "Soft lavender",
+        "description": "Muted violet-grey grounds with a soft lavender accent. The calmest option, built for long sessions.",
+        "tint": {
+            "hue": 305,
+            "chroma": 4
+        },
+        "contrast": "standard",
+        "swatch": {
+            "dark": {
+                "frame": "#090311",
+                "sheet": "#110c18",
+                "card": "#17111d",
+                "raised": "#1f1827",
+                "hairline": "#282031",
+                "text": "#e6e2ec",
+                "muted": "#66606f",
+                "accent": "#d6b7fc",
+                "onAccent": "#090019",
+                "info": "#3185b8",
+                "warning": "#f4b73b",
+                "danger": "#ca4d48",
+                "success": "#8ec899"
+            },
+            "light": {
+                "frame": "#e9e5f0",
+                "sheet": "#f4f1f8",
+                "card": "#faf8fc",
+                "raised": "#efebf4",
+                "hairline": "#e0dbe6",
+                "text": "#221a2a",
+                "muted": "#8d8697",
+                "accent": "#4e247e",
+                "onAccent": "#ffffff",
+                "info": "#1b86bf",
+                "warning": "#af6901",
+                "danger": "#8a0d15",
+                "success": "#527b67"
+            }
+        }
+    },
+    {
+        "id": "nocturne",
+        "name": "Nocturne",
+        "group": "cool",
+        "tag": "Indigo",
+        "description": "Blue-black grounds with an indigo accent. Calm and technical.",
+        "tint": {
+            "hue": 272,
+            "chroma": 3
+        },
+        "contrast": "standard",
+        "swatch": {
+            "dark": {
+                "frame": "#07080d",
+                "sheet": "#0c0e16",
+                "card": "#11141d",
+                "raised": "#181c28",
+                "hairline": "#1f2433",
+                "text": "#e6e9f2",
+                "muted": "#5a6176",
+                "accent": "#5a62f0",
+                "onAccent": "#ffffff",
+                "info": "#38bdf8",
+                "warning": "#f0b425",
+                "danger": "#de2f5b",
+                "success": "#34c98b"
+            },
+            "light": {
+                "frame": "#e9ecf3",
+                "sheet": "#f6f7fb",
+                "card": "#ffffff",
+                "raised": "#eff1f7",
+                "hairline": "#dde1ea",
+                "text": "#121625",
+                "muted": "#878d9f",
+                "accent": "#4c55e6",
+                "onAccent": "#ffffff",
+                "info": "#0b84c6",
+                "warning": "#b86e00",
+                "danger": "#b8002e",
+                "success": "#00916f"
+            }
+        }
+    },
+    {
+        "id": "nightshade",
+        "name": "Nightshade",
+        "group": "cool",
+        "tag": "Iris at night",
+        "description": "Nocturne's blue-black grounds with Iris's periwinkle accent, states and charts.",
+        "tint": {
+            "hue": 272,
+            "chroma": 3
+        },
+        "contrast": "standard",
+        "swatch": {
+            "dark": {
+                "frame": "#07080d",
+                "sheet": "#0d0f16",
+                "card": "#11141d",
+                "raised": "#171b27",
+                "hairline": "#1f2433",
+                "text": "#e8ebf4",
+                "muted": "#5a6176",
+                "accent": "#9584ff",
+                "onAccent": "#07080d",
+                "info": "#0279a9",
+                "warning": "#f9ad26",
+                "danger": "#db3845",
+                "success": "#20cc98"
+            },
+            "light": {
+                "frame": "#e7eaf1",
+                "sheet": "#f6f7fb",
+                "card": "#ffffff",
+                "raised": "#eef0f6",
+                "hairline": "#dde1ea",
+                "text": "#121625",
+                "muted": "#878a9d",
+                "accent": "#4a2abd",
+                "onAccent": "#ffffff",
+                "info": "#0585b9",
+                "warning": "#be6e02",
+                "danger": "#9a0b35",
+                "success": "#039571"
+            }
+        }
+    },
+    {
+        "id": "ledger",
+        "name": "Ledger",
+        "group": "warm",
+        "tag": "Cobalt on stone",
+        "description": "Warm stone grounds with a cobalt accent. Reads like printed paper in light.",
+        "tint": null,
+        "contrast": "standard",
+        "swatch": {
+            "dark": {
+                "frame": "#0d0c0a",
+                "sheet": "#141310",
+                "card": "#191814",
+                "raised": "#211f1b",
+                "hairline": "#2a2823",
+                "text": "#ece8df",
+                "muted": "#67625a",
+                "accent": "#4d6bef",
+                "onAccent": "#ffffff",
+                "info": "#2fb3b0",
+                "warning": "#e2a132",
+                "danger": "#d6403d",
+                "success": "#53cc8f"
+            },
+            "light": {
+                "frame": "#ebe8e1",
+                "sheet": "#f6f5f1",
+                "card": "#fffefb",
+                "raised": "#f0ede6",
+                "hairline": "#e0dbd0",
+                "text": "#1c1a16",
+                "muted": "#908a7e",
+                "accent": "#2f50d8",
+                "onAccent": "#ffffff",
+                "info": "#007883",
+                "warning": "#a86900",
+                "danger": "#9c332b",
+                "success": "#1a9368"
+            }
+        }
+    },
+    {
+        "id": "high-contrast",
+        "name": "High contrast",
+        "group": "high-contrast",
+        "tag": "AAA text",
+        "description": "Every word at 7:1 or more, hairlines a reader can find, and a muted step that reads rather than decorates.",
+        "tint": null,
+        "contrast": "high",
+        "swatch": {
+            "dark": {
+                "frame": "#000000",
+                "sheet": "#0b0b10",
+                "card": "#0f0f16",
+                "raised": "#16161d",
+                "hairline": "#7c7c90",
+                "text": "#f8f8fb",
+                "muted": "#9696a6",
+                "accent": "#6c55e6",
+                "onAccent": "#ffffff",
+                "info": "#61d0ff",
+                "warning": "#f0b425",
+                "danger": "#d73756",
+                "success": "#34c98b"
+            },
+            "light": {
+                "frame": "#e9ecf3",
+                "sheet": "#f6f7fb",
+                "card": "#fcfcfc",
+                "raised": "#f1f2f6",
+                "hairline": "#6f6f82",
+                "text": "#000000",
+                "muted": "#5b5b69",
+                "accent": "#4424c4",
+                "onAccent": "#ffffff",
+                "info": "#2f92b4",
+                "warning": "#c17300",
+                "danger": "#b9112c",
+                "success": "#0b9a74"
+            }
+        }
+    }
+];
+/** The theme a document that names none gets: it paints the bare root. */
+export const DEFAULT_THEME_ID = 'crewlet';
+/** Whether a stored or typed value names a theme this build ships. */
+export function isThemeId(value) {
+    return typeof value === 'string' && themeRegistry.some((theme) => theme.id === value);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crewlethq/tokens",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "Crewlet design tokens. Single JSON source compiled to CSS variables and typed JS modules.",
   "license": "MIT AND OFL-1.1",
   "repository": {
@@ -32,6 +32,7 @@
     "./css/legacy": "./dist/css/legacy.css",
     "./css/material-symbols": "./dist/css/material-symbols.css",
     "./css/themes": "./dist/css/themes.css",
+    "./css/themes/*": "./dist/css/themes/*.css",
     "./fonts/*": "./fonts/*",
     "./test/palette": {
       "types": "./test/palette.d.mts",

package/test/color.mjs

@@ -190,6 +190,12 @@ export function deltaE(x, y) {
   return Math.hypot(a.L - b.L, a.a - b.a, a.b - b.b) * 100;
 }
 
+/** The OKLCh hue of a colour, in degrees from 0 to under 360. */
+export function hue(c) {
+  const { a, b } = toOklab(c);
+  return ((Math.atan2(b, a) * 180) / Math.PI + 360) % 360;
+}
+
 export function chroma(c) {
   const { a, b } = toOklab(c);
   return Math.hypot(a, b) * 100;

package/test/palette.d.mts

@@ -33,8 +33,17 @@ export interface PaletteCheck {
 export interface PaletteSources {
   /** The text of the built tokens.css. */
   tokens: string;
-  /** The text of the built themes.css. */
+  /**
+   * The text of the built themes.css, followed by the sheet of a named theme
+   * (css/themes/<id>.css, or css/themes/all.css) when `palette` names one.
+   */
   themes: string;
+  /** A named theme's id, measured under its data-palette blocks; absent for the default. */
+  palette?: string | null;
+  /** The tint a theme declares for its grounds, measured in place of the neutral cap. */
+  tint?: { hue: number; chroma: number } | null;
+  /** 'high' holds the theme to the high-contrast floors as well. */
+  contrast?: 'standard' | 'high';
 }
 
 export interface PaletteResult {
@@ -55,6 +64,18 @@ export function runPalette(sources: PaletteSources): PaletteResult;
  */
 export function paletteStates(sources: PaletteSources): Record<string, Map<string, string>>;
 
+/** The three selectors that paint a theme: the default on the bare root, a named one under data-palette. */
+export function paletteSelectors(palette: string | null | undefined): { dark: string; lightMedia: string; lightAttribute: string };
+
+/** The chroma under which a ground reads as neutral, and the cap an untinted theme's rungs keep. */
+export const NEUTRAL_CHROMA: number;
+/** How far, in OKLCh degrees, a tinted rung's hue may sit from its theme's declared tint. */
+export const TINT_HUE_RANGE: number;
+/** How many times the most tinted rung's chroma the accent carries. */
+export const ACCENT_OVER_TINT: number;
+/** The floors a high-contrast theme is held to on top of the table. */
+export const HIGH_CONTRAST: { readonly text: number; readonly ink: number; readonly muted: number; readonly hairline: number };
+
 /** One line per failing check, for an assertion message. */
 export function describeFailure(check: PaletteCheck): string;
 
@@ -164,6 +185,10 @@ export const ACTION_STEPS: readonly (readonly [string, string, string])[];
  */
 export const MARK_ON_FILL: readonly (readonly [string, string])[];
 export const ACTION_LABEL: string;
+/** The destructive action's label, which each step of the danger fill moves away from. */
+export const DESTRUCTIVE_LABEL: string;
+/** The label drawn on the scrim and on a seeded tint, white in every palette. */
+export const SCRIM_LABEL: string;
 export const ACTION_DE: number;
 
 /** The token name of the modal veil. */