@crewlethq/tokens 0.12.0 → 0.14.0

package/dist/css/tokens.css

@@ -41,9 +41,12 @@
   --color-surface-inverse: #ffffff; /** The ground that inverts the palette, carrying --color-text-inverse. */
   --color-text-primary: #fafafa; /** Slightly off-white to reduce eye strain on dark surfaces. */
   --color-text-secondary: #c9ced8;
+  --color-text-link-quiet: #bab2f2; /** A link set inside running text or a row, which must not compete with the words around it: the accent ink mixed 65% with the secondary text, in OKLab, measured as an ink. Under the pointer and on focus it takes the accent ink itself. */
   --color-text-tertiary: #95a2b6; /** A fact, so it clears 4.5:1 on every surface it can land on, including a pressed row inside a raised surface. #8c99ad measured 4.17:1 there. */
   --color-text-muted: #686b70; /** DECORATION ONLY: a hairline glyph, a disabled affordance, a border. Measured BETWEEN 2.8:1 and 4.5:1 on the panel, because a step that crept up to the fact floor would invite itself into a table cell, which is the whole reason it has a separate name. */
-  --color-text-on-accent: #ffffff; /** The label on an accent fill, and on the danger fill. White in every palette: a primary button whose label changed colour with the theme would read as two different buttons. */
+  --color-text-on-accent: #ffffff; /** The label on an accent fill. White here and in the default palettes; a theme whose accent is light carries a dark label instead, which is why the danger fill and the scrim have labels of their own. */
+  --color-text-on-danger: #ffffff; /** The label on the danger fill and its hover: a destructive action. White in every palette, whatever the accent carries. */
+  --color-text-on-scrim: #ffffff; /** The label drawn over the scrim, and over the seeded tints it lands on: an upload overlay's word and spinner, and a seeded badge's initials. White in every palette, whatever the accent carries. */
   --color-text-inverse: #09090b;
   --color-border-default: rgba(255, 255, 255, 0.08);
   --color-border-hover: rgba(255, 255, 255, 0.15);
@@ -117,7 +120,7 @@
   --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
   --density-compact: 0.82; /** The three steps --density takes, set on the root by @crewlethq/tokens/css/density. Every spacing and size token is emitted as calc(Npx * var(--density, 1)), so a density is a real change to every surface rather than to three font sizes, and every value is unchanged at 1. */
   --density-normal: 1;
-  --density-comfortable: 1.14;
+  --density-comfortable: 1.16;
   --motion-duration-instant: 75ms; /** Tooltip flash, dropdown indicator nudge. */
   --motion-duration-fast: 120ms; /** Menu hover and active state changes. */
   --motion-duration-base: 150ms; /** Default UI transition. */

package/dist/index.d.ts

@@ -46,9 +46,12 @@ export declare const color: {
     readonly text: {
         readonly primary: "#fafafa";
         readonly secondary: "#c9ced8";
+        readonly linkQuiet: "#bab2f2";
         readonly tertiary: "#95a2b6";
         readonly muted: "#686b70";
         readonly onAccent: "#ffffff";
+        readonly onDanger: "#ffffff";
+        readonly onScrim: "#ffffff";
         readonly inverse: "#09090b";
     };
     readonly border: {
@@ -137,7 +140,7 @@ export declare const color: {
 export declare const density: {
     readonly compact: "0.82";
     readonly normal: "1";
-    readonly comfortable: "1.14";
+    readonly comfortable: "1.16";
 };
 export declare const motion: {
     readonly duration: {
@@ -279,5 +282,5 @@ export declare const zIndex: {
     readonly popover: "10000";
     readonly toast: "10001";
 };
-export { themes } from './themes.js';
-export type { ThemeName } from './themes.js';
+export { themes, themeGroups, themeRegistry, DEFAULT_THEME_ID, isThemeId } from './themes.js';
+export type { ThemeName, ThemeGroupId, ThemeEntry, ThemeId } from './themes.js';

package/dist/index.js

@@ -47,9 +47,12 @@ export const color = {
     "text": {
         "primary": "#fafafa",
         "secondary": "#c9ced8",
+        "linkQuiet": "#bab2f2",
         "tertiary": "#95a2b6",
         "muted": "#686b70",
         "onAccent": "#ffffff",
+        "onDanger": "#ffffff",
+        "onScrim": "#ffffff",
         "inverse": "#09090b"
     },
     "border": {
@@ -138,7 +141,7 @@ export const color = {
 export const density = {
     "compact": "0.82",
     "normal": "1",
-    "comfortable": "1.14"
+    "comfortable": "1.16"
 };
 export const motion = {
     "duration": {
@@ -280,4 +283,4 @@ export const zIndex = {
     "popover": "10000",
     "toast": "10001"
 };
-export { themes } from './themes.js';
+export { themes, themeGroups, themeRegistry, DEFAULT_THEME_ID, isThemeId } from './themes.js';

package/dist/themes.d.ts

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