@crisp-ui-kit/crisp 0.56.0 → 0.57.1

package/dist/types/tokens/palette.d.ts

@@ -12,7 +12,7 @@ export declare const palette: {
         readonly dark: "#101112";
     };
     readonly gray50: {
-        readonly light: "#f4f4f5";
+        readonly light: "#f7f8f9";
         readonly dark: "#101112";
     };
     readonly gray900: {
@@ -20,7 +20,7 @@ export declare const palette: {
         readonly dark: "#f5f5f5";
     };
     readonly line200: {
-        readonly light: "#e4e4e7";
+        readonly light: "#dcdee3";
         readonly dark: "#212224";
     };
     readonly line100: {
@@ -47,6 +47,10 @@ export declare const palette: {
         readonly light: "#d9dade";
         readonly dark: "#212224";
     };
+    readonly ringBrandSoft: {
+        readonly light: "#d6e5ff";
+        readonly dark: "#212224";
+    };
     readonly tileActive: {
         readonly light: "#ffffff";
         readonly dark: "#101112";
@@ -104,23 +108,27 @@ export declare const palette: {
         readonly dark: "#9a9aa2";
     };
     readonly brand600: {
-        readonly light: "#266df0";
-        readonly dark: "#266df0";
+        readonly light: "#0298d9";
+        readonly dark: "#0298d9";
     };
     readonly brand700: {
-        readonly light: "#1f5fd6";
-        readonly dark: "#1f5fd6";
+        readonly light: "#0283bb";
+        readonly dark: "#0283bb";
+    };
+    readonly brandContrast: {
+        readonly light: "#0278ac";
+        readonly dark: "#0278ac";
     };
     readonly red600: {
-        readonly light: "#e5484d";
+        readonly light: "#fa342c";
         readonly dark: "#ff5a5f";
     };
     readonly red700: {
-        readonly light: "#ba2525";
+        readonly light: "#ca1d13";
         readonly dark: "#ba2525";
     };
     readonly red500: {
-        readonly light: "#eb3b3b";
+        readonly light: "#fa342c";
         readonly dark: "#ff5a5f";
     };
     readonly fieldFocus: {
@@ -156,11 +164,15 @@ export declare const palette: {
         readonly dark: "#5e98fe";
     };
     readonly green600: {
-        readonly light: "#1f9d57";
+        readonly light: "#079171";
         readonly dark: "#2ea968";
     };
     readonly amber600: {
-        readonly light: "#b5730f";
+        readonly light: "#9b7821";
+        readonly dark: "#e0982a";
+    };
+    readonly amberSolid: {
+        readonly light: "#fbdc65";
         readonly dark: "#e0982a";
     };
     readonly orange600: {
@@ -211,5 +223,37 @@ export declare const palette: {
         readonly light: "#e8ddfe";
         readonly dark: "#45297d";
     };
+    readonly selectListboxBg: {
+        readonly light: "#ffffff";
+        readonly dark: "#1d2025";
+    };
+    readonly selectTriggerStroke: {
+        readonly light: "#dcdee3";
+        readonly dark: "#393d46";
+    };
+    readonly selectPressedTint: {
+        readonly light: "#00000007";
+        readonly dark: "#ffffff0d";
+    };
+    readonly selectDisabledBg: {
+        readonly light: "#f3f4f5";
+        readonly dark: "#2b2e35";
+    };
+    readonly selectInvalidStroke: {
+        readonly light: "#fa342c";
+        readonly dark: "#ff6e60";
+    };
+    readonly selectDivider: {
+        readonly light: "#00000010";
+        readonly dark: "#ffffff17";
+    };
+    readonly selectPlaceholder: {
+        readonly light: "#b0b3ba";
+        readonly dark: "#868b94";
+    };
+    readonly selectShadow: {
+        readonly light: "#0000001f";
+        readonly dark: "#000000cc";
+    };
 };
 export type PaletteKey = keyof typeof palette;

package/dist/types/tokens/scale.d.ts

@@ -6,18 +6,21 @@ export declare const space: {
     readonly "2": "8px";
     readonly "2.5": "10px";
     readonly "3": "12px";
+    readonly "3.5": "14px";
     readonly "4": "16px";
     readonly "5": "20px";
     readonly "6": "24px";
     readonly "8": "32px";
 };
 export declare const radius: {
+    readonly xs: "4px";
     readonly chip: "7px";
     readonly sm: "6px";
     readonly md: "8px";
     readonly lg: "9px";
     readonly xl: "12px";
     readonly "2xl": "16px";
+    readonly "3xl": "20px";
     readonly full: "999px";
 };
 export declare const size: {
@@ -30,6 +33,9 @@ export declare const size: {
     readonly header: "48px";
     readonly calendarCell: "34px";
     readonly calendarPill: "32px";
+    readonly selectTriggerMd: "40px";
+    readonly selectTriggerLg: "52px";
+    readonly selectIconLg: "20px";
 };
 export declare const font: {
     readonly sans: '"VK Sans Display", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif';

package/dist/types/tokens/semantic.d.ts

@@ -1,6 +1,17 @@
 export declare const semantic: {
     bgBrandSolid: "brand600";
     bgBrandSolidPressed: "brand700";
+    /** your-moon/crisp#897: the AA-safe darker sibling of `bgBrandSolid` — a
+     * SOLID fill carrying white text (Button primary, Badge solid+brand,
+     * Avatar's brand tone). `bgBrandSolid` itself stays the exact brand
+     * accent (focus rings, selected states, icons, tints), unpaired with
+     * white text anywhere that matters for contrast. */
+    bgBrandContrast: "brandContrast";
+    /** your-moon/crisp#897: brand-coloured TEXT sitting on a white page
+     * (TextLink/Text's `brand` tone) — same value as `bgBrandContrast`,
+     * named separately because one's a background and one's a foreground,
+     * matching every other fg/bg pair in this file. */
+    fgBrandContrast: "brandContrast";
     fgOnBrand: "white";
     fgOnTone: "ink";
     bgSurface: "gray00";
@@ -60,6 +71,10 @@ export declare const semantic: {
     strokeFocusRing: "focusRing";
     bgSuccess: "green600";
     bgWarning: "amber600";
+    /** A SOLID warning fill (Badge's `variant="solid" tone="warning"`) — seed's
+     * own warning-solid is a distinct, paler yellow, not `bgWarning` tinted
+     * lighter. See `amberSolid` in palette.ts. */
+    bgWarningSolid: "amberSolid";
     bgOrange: "orange600";
     bgCyan: "cyan600";
     bgPurple: "purple600";
@@ -77,5 +92,23 @@ export declare const semantic: {
     bgPurpleSoft: "purpleTint";
     fgPurpleSoft: "softPurpleText";
     ringPurpleSoft: "purpleRing";
+    /** Callout's bordered/banner look (crisp#869) — an opaque measured ring,
+     *  not a `color-mix` tint of `bgBrandSolid` (see palette.ts's own comment). */
+    ringBrandSoft: "ringBrandSoft";
+    /** Select rebuilt to seed-design parity (crisp/#867) — see palette.ts's
+     *  comment above `selectListboxBg` for why these are their own tokens
+     *  rather than a reuse of an Attio-measured one. */
+    /** Seed's neutral ink (gray-1000) used as TEXT/icon colour — same palette
+     *  entry as `strokeFieldFocus` (a ring), aliased separately because the
+     *  role here is content colour, not a focus ring. */
+    fgSelectNeutral: "fieldFocus";
+    bgSelectListbox: "selectListboxBg";
+    strokeSelectTrigger: "selectTriggerStroke";
+    bgSelectPressed: "selectPressedTint";
+    bgSelectDisabled: "selectDisabledBg";
+    strokeSelectInvalid: "selectInvalidStroke";
+    strokeSelectDivider: "selectDivider";
+    fgSelectPlaceholder: "selectPlaceholder";
+    shadowSelect: "selectShadow";
 };
 export type Tokens = typeof semantic;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.56.0",
+  "version": "0.57.1",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",
@@ -33,6 +33,11 @@
     "./styles.css": "./dist/styles.css",
     "./styles.layered.css": "./dist/styles.layered.css",
     "./base.css": "./dist/base.css",
+    "./accentpicker": {
+      "types": "./dist/types/components/accentpicker/index.d.ts",
+      "import": "./dist/esm/components/accentpicker/index.js",
+      "require": "./dist/cjs/components/accentpicker/index.js"
+    },
     "./accordion": {
       "types": "./dist/types/components/accordion/index.d.ts",
       "import": "./dist/esm/components/accordion/index.js",