@crisp-ui-kit/crisp 0.57.0 → 0.57.1

package/dist/cjs/components/textlink/textlink.recipe.js

@@ -21,11 +21,14 @@ const config = (0, core_1.defineRecipe)({
     variants: {
         tone: {
             // The bold, always-brand-coloured trailing link a Card's own `action`
-            // slot uses ("View all →", "All registers →").
-            brand: `font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.bgBrandSolid};`,
+            // slot uses ("View all →", "All registers →"). your-moon/crisp#897:
+            // `fgBrandContrast`, not `bgBrandSolid` (#0298d9) directly -- as TEXT
+            // on a white page the accent itself only clears 3.23:1; the darker
+            // contrast-safe sibling clears 4.5:1+.
+            brand: `font-size: ${tokens_1.contract.text.sm}; font-weight: ${tokens_1.contract.weight.medium}; color: ${tokens_1.contract.fgBrandContrast};`,
             // A quieter in-context reference (a sample record under a finding)
             // that only goes brand on hover.
-            muted: `font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgMuted}; &:hover { color: ${tokens_1.contract.bgBrandSolid}; }`,
+            muted: `font-size: ${tokens_1.contract.text.md}; font-weight: ${tokens_1.contract.weight.regular}; color: ${tokens_1.contract.fgMuted}; &:hover { color: ${tokens_1.contract.fgBrandContrast}; }`,
         },
         // crisp#874: an explicit, OPTIONAL size override -- no `defaultVariants`
         // entry below, so omitting `size` emits no `--size_*` class at all and

package/dist/cjs/index.js

@@ -18,6 +18,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 // primitives (components/)
+__exportStar(require("./components/accentpicker"), exports);
 __exportStar(require("./components/accordion"), exports);
 __exportStar(require("./components/avatar"), exports);
 __exportStar(require("./components/avatargroup"), exports);

package/dist/cjs/product/recordpage/recordpage.js

@@ -41,12 +41,14 @@ const lucide_react_1 = require("lucide-react");
 const React = __importStar(require("react"));
 const avatar_1 = require("../../components/avatar");
 const checkbox_1 = require("../../components/checkbox");
+const drawer_1 = require("../../components/drawer");
 const menu_1 = require("../../components/menu");
 const select_1 = require("../../components/select");
 const spinner_1 = require("../../components/spinner");
 const switch_1 = require("../../components/switch");
 const tabs_1 = require("../../components/tabs");
 const core_1 = require("../../core");
+const comments_1 = require("../comments");
 const column_1 = require("./column");
 const editable_field_1 = require("./editable-field");
 const recordpage_recipe_1 = require("./recordpage.recipe");
@@ -71,9 +73,16 @@ exports.recordPageLabels = {
     breadcrumb: "Breadcrumb",
     editRecord: "Edit record",
     recordActions: "Record actions",
-    addToFavourites: "Add to favourites",
-    removeFromFavourites: "Remove from favourites",
+    // US spelling, matching Attio's own live text exactly (#621) — this string
+    // is shared with the entity header's favourite-star aria-label, so both
+    // read "favorites" now, not just the menu.
+    addToFavourites: "Add to favorites",
+    removeFromFavourites: "Remove from favorites",
     copyRecordLink: "Copy record link",
+    configurePage: "Configure page",
+    copyPageUrl: "Copy page URL",
+    copyRecordId: "Copy record ID",
+    mergeRecords: "Merge records",
     deleteRecord: "Delete record",
     linkRecords: "Link records",
     // Tooltip copy re-measured live for #865 (was "Log a note"/"Create a
@@ -88,6 +97,8 @@ exports.recordPageLabels = {
     composeEmail: "Compose email",
     askAttio: "Ask AI",
     addToList: "Add to list",
+    share: "Share",
+    comments: "Comments",
     noLists: "This record has not been added to any lists.",
     highlights: "Highlights",
     recordDetails: "Record Details",
@@ -461,7 +472,7 @@ RecordDetails.displayName = "RecordDetails";
  * Emails sections (Notes & Tasks are live — add and check things off). Drop it
  * into the app's main content area.
  */
-function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, quickActions: quickActionsProp, ...rest }) {
+function RecordPage({ record, columns, collection = "Records", labels, onBack, onToggleFull, full, className, onEdit, tabs: tabsProp, defaultTab, notes: notesProp, onAddNote, tasks: tasksProp, onAddTask, onToggleTask, sections, highlights: highlightsProp, quickActions: quickActionsProp, comments: commentsProp, onPostComment, currentUser, onShare, ...rest }) {
     const t = useRecordPageLabels(labels);
     const [favorite, setFavorite] = React.useState(false);
     // Notes/Tasks are controlled when the caller supplies `notes`/`tasks` (even
@@ -473,6 +484,11 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
     const [internalTasks, setInternalTasks] = React.useState([]);
     const notes = notesProp ?? internalNotes;
     const tasks = tasksProp ?? internalTasks;
+    // Comments follow the same controlled/self-contained duality (#864).
+    const [internalComments, setInternalComments] = React.useState([]);
+    const comments = commentsProp ?? internalComments;
+    const [commentsOpen, setCommentsOpen] = React.useState(false);
+    const me = currentUser ?? { id: "me", name: "You" };
     const [showAllActivity, setShowAllActivity] = React.useState(false);
     // Drag-resizable left details column.
     const [detailsW, setDetailsW] = React.useState(DETAILS_DEFAULT_W);
@@ -631,6 +647,31 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
         }
         setInternalTasks((n) => n.map((x) => (x.id === id ? { ...x, done: !x.done } : x)));
     };
+    const postComment = (text, threadId) => {
+        if (commentsProp) {
+            onPostComment?.(text, threadId);
+            return;
+        }
+        if (threadId == null) {
+            setInternalComments((prev) => [
+                {
+                    id: nextId(),
+                    root: { id: nextId(), author: me, time: t.justNow, body: text },
+                },
+                ...prev,
+            ]);
+            return;
+        }
+        setInternalComments((prev) => prev.map((th) => th.id === threadId
+            ? {
+                ...th,
+                replies: [
+                    ...(th.replies ?? []),
+                    { id: nextId(), author: me, time: t.justNow, body: text },
+                ],
+            }
+            : th));
+    };
     // A small, plausible activity feed derived from the record's own fields.
     const domain = byKey.get("domain");
     const cats = byKey.get("categories");
@@ -687,7 +728,7 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
     const effectivePanel = tabsProp
         ? (active) => tabsProp.find((tb) => tb.id === active)?.render()
         : builtinPanel;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), shortcut: "\u2318C", children: t.copyRecordLink }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 15, strokeWidth: 1.75 }), children: t.addToList }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, shortcut: "\u232B", children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75 }), t.addToList] }), quickActions.map((a, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": a.label, onClick: a.onSelect, children: (0, jsx_runtime_1.jsx)(a.icon, { size: 15, strokeWidth: 1.75 }) }, i)))] }), (0, jsx_runtime_1.jsx)(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": DETAILS_MIN_W, "aria-valuemax": DETAILS_MAX_W, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, recordpage_recipe_1.recordpageRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-topbar", children: [(0, jsx_runtime_1.jsxs)("nav", { className: "crisp-recordpage-crumbs", "aria-label": t.breadcrumb, children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-crumb", onClick: onBack, "aria-label": `Back to ${collection}`, children: collection }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-sep", children: "/" }), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-crumb-name", children: name })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-actions", children: [(0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", onClick: onShare, children: t.share }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: () => setCommentsOpen(true), "aria-label": t.comments, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MessageSquare, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--ghost", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Sparkles, { size: 14, strokeWidth: 1.75, color: "var(--crisp-bg-brand-solid)" }), t.askAttio] }), onToggleFull && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", onClick: onToggleFull, "aria-label": full ? t.exitFullScreen : t.fullScreen, children: full ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Minimize2, { size: 15, strokeWidth: 1.75 })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Maximize2, { size: 15, strokeWidth: 1.75 })) })), (0, jsx_runtime_1.jsxs)(menu_1.Menu, { align: "end", "aria-label": t.recordActions, trigger: (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-action crisp-recordpage-action--icon", "aria-label": t.recordActions, children: (0, jsx_runtime_1.jsx)(lucide_react_1.MoreHorizontal, { size: 16, strokeWidth: 1.75 }) }), children: [(0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Merge, { size: 15, strokeWidth: 1.75 }), children: t.mergeRecords }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Settings, { size: 15, strokeWidth: 1.75 }), children: t.configurePage }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyPageUrl }), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 15, strokeWidth: 1.75 }), children: t.copyRecordId }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }), onSelect: () => setFavorite((f) => !f), children: favorite ? t.removeFromFavourites : t.addToFavourites }), (0, jsx_runtime_1.jsx)(menu_1.MenuSeparator, {}), (0, jsx_runtime_1.jsx)(menu_1.MenuItem, { icon: (0, jsx_runtime_1.jsx)(lucide_react_1.Trash2, { size: 15, strokeWidth: 1.75 }), danger: true, children: t.deleteRecord })] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-body", children: [(0, jsx_runtime_1.jsxs)("aside", { className: "crisp-recordpage-details", style: { width: detailsW }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-entity", children: [entity?.avatar ? ((0, jsx_runtime_1.jsx)("img", { className: "crisp-recordpage-entity-logo", src: entity.avatar, alt: "" })) : ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "rounded", tone: "brand", children: name.charAt(0) })), (0, jsx_runtime_1.jsx)("span", { className: "crisp-recordpage-entity-name", children: name }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "aria-label": t.editRecord, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Pencil, { size: 15, strokeWidth: 1.75 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-entity-iconbtn", "data-active": favorite ? "" : undefined, "aria-pressed": favorite, onClick: () => setFavorite((f) => !f), "aria-label": favorite ? t.removeFromFavourites : t.addToFavourites, children: (0, jsx_runtime_1.jsx)(lucide_react_1.Star, { size: 15, strokeWidth: 1.75 }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-quickactions", children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Mail, { size: 16, strokeWidth: 1.75 }), t.composeEmail] }), (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-compose", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 16, strokeWidth: 1.75 }), t.addToList] }), quickActions.map((a, i) => ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "crisp-recordpage-quickbtn", "aria-label": a.label, onClick: a.onSelect, children: (0, jsx_runtime_1.jsx)(a.icon, { size: 15, strokeWidth: 1.75 }) }, i)))] }), (0, jsx_runtime_1.jsx)(RecordDetails, { record: record, columns: columns, sections: sections, onEdit: onEdit, labels: labels }), (0, jsx_runtime_1.jsxs)("div", { className: "crisp-recordpage-section", children: [(0, jsx_runtime_1.jsx)(SectionHead, { title: t.tabs.lists, action: (0, jsx_runtime_1.jsxs)("button", { type: "button", className: "crisp-recordpage-addbtn", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Plus, { size: 14, strokeWidth: 2 }), t.addToList] }) }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-emptystate", children: t.noLists })] })] }), (0, jsx_runtime_1.jsx)("div", { className: "crisp-recordpage-resizer", "data-active": resizing ? "" : undefined, role: "separator", "aria-orientation": "vertical", "aria-label": t.resizeDetails, "aria-valuenow": Math.round(detailsW), "aria-valuemin": DETAILS_MIN_W, "aria-valuemax": DETAILS_MAX_W, tabIndex: 0, onPointerDown: onResizeDown, onPointerMove: onResizeMove, onPointerUp: onResizeUp, onKeyDown: (e) => {
                             if (e.key !== "ArrowLeft" && e.key !== "ArrowRight")
                                 return;
                             // The pointer drag learned its direction in #212; this did not.
@@ -699,6 +740,6 @@ function RecordPage({ record, columns, collection = "Records", labels, onBack, o
                             setDetailsW((w) => grow
                                 ? Math.min(DETAILS_MAX_W, w + 16)
                                 : Math.max(DETAILS_MIN_W, w - 16));
-                        } }), (0, jsx_runtime_1.jsx)("main", { className: "crisp-recordpage-main", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] })] }));
+                        } }), (0, jsx_runtime_1.jsx)("main", { className: "crisp-recordpage-main", children: (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: effectiveTabs, defaultValue: tabsProp ? defaultTab : "overview", "aria-label": `${name} record`, children: effectivePanel }) })] }), (0, jsx_runtime_1.jsx)(drawer_1.Drawer, { open: commentsOpen, onOpenChange: setCommentsOpen, "aria-label": t.comments, style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(comments_1.CommentsPanel, { threads: comments, currentUserId: me.id, onPost: postComment, onClose: () => setCommentsOpen(false), role: undefined }) })] }));
 }
 RecordPage.displayName = "RecordPage";

package/dist/cjs/tokens/palette.js

@@ -8,9 +8,14 @@ exports.palette = {
     // on a bright tone fill. Same value as gray900's light side (the measured
     // near-black), named separately because its job is not "primary foreground".
     ink: { light: "#101112", dark: "#101112" },
-    gray50: { light: "#f4f4f5", dark: "#101112" },
+    // seed-identity migration (your-moon/crisp#890): seed's bg.layer-default-
+    // pressed / gray-100. Light side only — dark is untouched, unmeasured
+    // Attio territory this migration doesn't scope into.
+    gray50: { light: "#f7f8f9", dark: "#101112" },
     gray900: { light: "#101112", dark: "#f5f5f5" },
-    line200: { light: "#e4e4e7", dark: "#212224" },
+    // seed-identity migration (your-moon/crisp#890): seed's stroke.neutral-
+    // weak / gray-400. Light side only, same scoping as `gray50` above.
+    line200: { light: "#dcdee3", dark: "#212224" },
     line100: { light: "#eeeff1", dark: "#1c1d1f" },
     // ImportDialog's dropzone border — measured live from Attio's Import CSV
     // flow (`rgb(230,231,234)`), distinct from `line200`/`line100` (#e4e4e7 /
@@ -22,8 +27,11 @@ exports.palette = {
     line150: { light: "#e6e7ea", dark: "#212224" },
     // The filter chip's field/value segments while the condition is
     // incomplete (no value typed yet) — measured live on Attio's own filter
-    // chip (`rgb(246,247,247)`), lighter than `gray50` (#f4f4f5, close but not
-    // equal). The chip's operator/kebab segments stay `gray00` in the same
+    // chip (`rgb(246,247,247)`), close to but not equal to `gray50`
+    // (`#f7f8f9` since the seed-identity migration, your-moon/crisp#890 — the
+    // two used to differ the other direction, gray25 lighter; the relative
+    // order isn't the point, staying off `gray50` while remaining a
+    // near-neighbour is). The chip's operator/kebab segments stay `gray00` in the same
     // state; only the two text-content segments carry this muted fill. Dark
     // value not independently re-measured (Attio's dark theme is off-limits to
     // toggle) — reuses `gray50`'s dark value, the nearest existing "muted
@@ -84,25 +92,54 @@ exports.palette = {
     shadowPopover2: { light: "rgba(28,40,64,0.12)", dark: "rgba(0,0,0,0.24)" },
     shadowPopover3: { light: "rgba(24,41,75,0.16)", dark: "rgba(0,0,0,0.32)" },
     gray400: { light: "#71717a", dark: "#9a9aa2" },
-    brand600: { light: "#266df0", dark: "#266df0" },
-    brand700: { light: "#1f5fd6", dark: "#1f5fd6" },
-    red600: { light: "#e5484d", dark: "#ff5a5f" },
-    // A red dark enough to carry white text. red600 cannot: white on it is
-    // 3.91:1 light / 3.05:1 dark, and the solid button's hover DARKENS the fill
-    // (filter: brightness), so dark ink fails there instead (4.49 at hover).
-    // Measured from the reference stylesheet, which ships this red alongside the
-    // #EB3B3B it uses for destructive menu TEXT. Does not flip: a filled
-    // destructive control needs the same white-bearing fill in both themes.
-    red700: { light: "#ba2525", dark: "#ba2525" },
-    // The #EB3B3B named in red700's own comment above (destructive menu text) —
-    // it had never actually been given a token. Independently re-measured live
-    // on `app.attio.com/.../tasks`, `rgb(235,59,59)`, as the overdue due-date
-    // text colour on the Tasks page (crisp#462) — same hex, second surface.
-    // Dark not independently re-measured (Attio's theme toggle is off-limits,
-    // same restriction noted throughout this file); reuses red600's dark value,
-    // the same "brightens for legibility on a dark surface" tone this red
-    // already sits next to, rather than inventing a third red.
-    red500: { light: "#eb3b3b", dark: "#ff5a5f" },
+    // seed-identity migration (your-moon/crisp#890, "Attio structure, seed
+    // look"): the owner's TechPartners primary (#0298D9, sourced from the
+    // official logo SVG + the live site's own compiled CSS — see
+    // ~/grc-parity/seed-identity-spec.md §1) replaces the old measured-from-
+    // Attio brand blue, built as seed's own carrot-scale RELATIVE lightness
+    // shape around that exact hex at step 600 ("Method A" in the spec — the
+    // verified logo hex stays literally in the scale, at the step that's
+    // actually rendered, rather than a mathematically tidier neighbour).
+    // Does not flip with theme, matching this token's own prior precedent.
+    brand600: { light: "#0298d9", dark: "#0298d9" },
+    // Method A's raw carrot-shape output (L 37.1%) — the hover/pressed-darken
+    // step of the ACCENT colour above, same role brand700 has always had.
+    // Not tuned for any particular contrast target; see `brandContrast` below
+    // for the token that carries that job.
+    brand700: { light: "#0283bb", dark: "#0283bb" },
+    // your-moon/crisp#897: #0298d9 (the verified brand hex, kept exactly as
+    // the ACCENT everywhere else — focus rings, selected states, icons,
+    // tints) only clears 3.23:1 against white, short of the 4.5:1 a SOLID
+    // fill carrying white text needs (Button primary, Badge solid+brand,
+    // Avatar's brand tone), or brand-coloured TEXT sitting directly on a white
+    // page (TextLink/Text's brand tone). This is that darker, AA-safe step —
+    // same hue (198°), L dropped to 34% — clearing 4.88:1 with white. An
+    // earlier round of this fix used dark ink text instead of finding this
+    // value; that read off-brand (seed's own solid buttons use white) and got
+    // reverted in favour of this.
+    brandContrast: { light: "#0278ac", dark: "#0278ac" },
+    // seed's red-700 (fg.critical) — the accent used for plain danger TEXT
+    // (an overdue due-date, a destructive menu label) and for tinting
+    // (Chip/Badge's soft-danger `color-mix()` inputs). NOT used for a solid
+    // fill paired with white text — see `red700` below for why that split
+    // matters here specifically.
+    red600: { light: "#fa342c", dark: "#ff5a5f" },
+    // seed's red-800 (bg.critical-solid-**pressed**), not red-700
+    // (bg.critical-solid-enabled, `red600` above) — deliberately the darker
+    // of the two. `red700` is crisp's SOLID destructive fill (Button danger,
+    // Badge solid+danger), which pairs with white text and, on Button,
+    // DARKENS further on hover/active via a brightness filter (not a second
+    // token, per this token's own original comment below this migration note
+    // — that invariant is why a dark-enough red matters at all). Seed's own
+    // red-700 only clears 3.76:1 with white (measured) — short of AA even
+    // before any hover darkening — so reusing crisp's existing "needs to
+    // survive getting darker" role means red-800 (5.68:1 at rest, improving
+    // through hover/active) is the correct step, not seed's literal
+    // "enabled" one. `red500` below is pure text again (no fill/contrast
+    // constraint), so it stays on the
+    // lighter red-700, matching seed exactly.
+    red700: { light: "#ca1d13", dark: "#ba2525" },
+    red500: { light: "#fa342c", dark: "#ff5a5f" },
     // seed-design's field focus ring (stroke-neutral-contrast = gray-1000),
     // measured from @seed-design/css. A high-contrast neutral rather than a brand
     // hue: the ring reads as "this field has focus", not as a state colour.
@@ -122,8 +159,25 @@ exports.palette = {
     neutralSubtle: { light: "#868b94", dark: "#b0b3ba" },
     neutralMuted: { light: "#555d6d", dark: "#dcdee3" },
     focusRing: { light: "#1e82eb", dark: "#5e98fe" },
-    green600: { light: "#1f9d57", dark: "#2ea968" },
-    amber600: { light: "#b5730f", dark: "#e0982a" },
+    // seed's fg.positive / bg.positive-solid (green-700).
+    green600: { light: "#079171", dark: "#2ea968" },
+    // seed's fg.warning / stroke.warning-solid (yellow-700) — the ACCENT used
+    // for tinting (Badge/Chip's `soft()`/`ring()` colour-mix formulas), not
+    // seed's actual solid-fill colour, which is a much paler yellow at a
+    // different scale step — see `amberSolid` below for why the two need to
+    // stay separate tokens.
+    amber600: { light: "#9b7821", dark: "#e0982a" },
+    // seed's bg.warning-solid (yellow-300) — genuinely NOT amber600 tinted
+    // lighter: seed's warning-solid is its own pale scale step, distinct from
+    // the darker accent every other tone's solid fill derives from (see the
+    // spec's Badge section). Badge's `variant="solid" tone="warning"` uses
+    // this directly, unmixed, the same way `red700`'s solid destructive fill
+    // is used directly rather than computed from a tint. Dark side is NOT
+    // independently sourced (this is a new token; no prior Attio measurement
+    // exists to preserve) — reuses amber600's own dark value as the nearest
+    // existing "warning, dark theme" tone, same convention this file uses
+    // throughout for an unmeasured dark side (ringSwitch, line150, gray25).
+    amberSolid: { light: "#fbdc65", dark: "#e0982a" },
     orange600: { light: "#f97514", dark: "#f97514" },
     cyan600: { light: "#00b9eb", dark: "#00b9eb" },
     purple600: { light: "#9b69ff", dark: "#9b69ff" },

package/dist/cjs/tokens/scale.js

@@ -29,6 +29,7 @@ exports.space = {
 // Corner radius. sm/md/lg are the three used on stacked surfaces
 // (inputs, rows, tiles); full is the pill.
 exports.radius = {
+    xs: "4px", // seed-design's $radius.r1 — small badge / checkbox box corner
     chip: "7px", // tag / chip corner — the single most used radius
     sm: "6px", // chips, badges
     md: "8px", // inputs, search box

package/dist/cjs/tokens/semantic.js

@@ -4,6 +4,17 @@ exports.semantic = void 0;
 exports.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",
     // text on a solid success/warning/danger fill. Those tone tokens BRIGHTEN in
     // dark (they are tuned for tinted backgrounds and coloured text), so white on
@@ -41,6 +52,15 @@ exports.semantic = {
     shadowPopover2: "shadowPopover2",
     shadowPopover3: "shadowPopover3",
     fgPrimary: "gray900",
+    // seed-identity migration (your-moon/crisp#890): NOT touched here, on
+    // purpose. seed's closest analog (fg.neutral-subtle, #868b94) is lighter
+    // than crisp's current #71717a, and Badge's neutral-SOLID variant reuses
+    // this exact token as a BACKGROUND paired with white text
+    // (`badge.recipe.ts`'s compound variant) — #868b94 drops that pairing to
+    // 3.42:1, below AA. Retargeting `fgMuted` and fixing that one background
+    // choice belong together in Badge's own upcoming look PR, not split
+    // across two PRs where the token change alone would ship a known
+    // contrast regression.
     fgMuted: "gray400",
     bgDanger: "red600",
     /** Fill for a SOLID destructive control that carries white text. */
@@ -66,6 +86,10 @@ exports.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",

package/dist/esm/components/accentpicker/accentpicker.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { useRadioGroupKeyboard } from "../radiogroup/index.js";
+import { accentpickerRecipe } from "./accentpicker.recipe.js";
+/**
+ * A row of selectable colour swatches — Attio's own accent-colour picker
+ * (Settings > Appearance). Not a fixed palette: pass the colours (and the
+ * accent isn't crisp's concern to theme the app with — this only picks one).
+ * Same roving-focus/arrow-key model every other crisp radio-like control
+ * shares (`useRadioGroupKeyboard`, also used by `RadioGroup` and
+ * `Segmented`).
+ */
+export function AccentPicker({ colors, value, defaultValue, onValueChange, className, onKeyDown: onKeyDownProp, ...rest }) {
+    const [internal, setInternal] = React.useState(defaultValue);
+    const selected = value ?? internal;
+    const select = (v) => {
+        if (value === undefined)
+            setInternal(v);
+        onValueChange?.(v);
+    };
+    const { onKeyDown, groupRef } = useRadioGroupKeyboard({ select });
+    return (_jsx("div", { ref: groupRef, role: "radiogroup", className: accentpickerRecipe({ className }), ...rest, onKeyDown: (e) => {
+            onKeyDown(e);
+            onKeyDownProp?.(e);
+        }, children: colors.map((color) => {
+            const checked = selected === color;
+            return (_jsx("button", { type: "button", role: "radio", "aria-checked": checked, "aria-label": color, "data-value": color, tabIndex: checked ? 0 : -1, className: "crisp-accentpicker-swatch", style: { borderColor: checked ? color : "transparent" }, onClick: () => select(color), children: _jsx("svg", { width: "22", height: "22", viewBox: "0 0 22 22", fill: "none", "aria-hidden": "true", children: _jsx("circle", { cx: "11", cy: "11", r: "9", fill: color }) }) }, color));
+        }) }));
+}
+AccentPicker.displayName = "AccentPicker";

package/dist/esm/components/accentpicker/accentpicker.recipe.js

@@ -0,0 +1,22 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// A row of selectable colour swatches — measured live on Attio's Appearance
+// settings page (crisp#635): `role="radiogroup"`, `display: flex; gap: 8px`.
+// Each swatch is a 24x24 circular button, `border: 1px solid transparent`
+// at rest; the CHECKED swatch's border switches to its own colour (not a
+// fixed brand ring) — measured directly on the DOM (`border: 1px solid
+// rgb(38,109,240)` on the checked blue swatch, `1px solid rgba(0,0,0,0)` on
+// every unchecked one). That per-swatch colour is data, not a class, so it's
+// set inline by the component, not here. Inside sits a 22x22 SVG with one
+// solid r=9 (18px) circle -- no separate ring/dot layer, contrary to an
+// earlier, less precise read of this same control.
+const config = defineRecipe({
+    name: "accentpicker",
+    base: `display: flex; gap: ${c.space["2"]};
+    & .crisp-accentpicker-swatch { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
+      width: 24px; height: 24px; padding: 0; margin: 0; border-radius: ${c.radius.full}; border: 1px solid transparent;
+      background: none; font-family: inherit; cursor: pointer; }
+    & .crisp-accentpicker-swatch:focus-visible { outline: 2px solid ${c.bgBrandSolid}; outline-offset: 2px; }`,
+});
+export const accentpickerRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/components/accentpicker/index.js

@@ -0,0 +1,2 @@
+export { AccentPicker } from "./accentpicker.js";
+export { accentpickerRecipe } from "./accentpicker.recipe.js";

package/dist/esm/components/avatar/avatar.recipe.js

@@ -36,7 +36,10 @@ const spec = defineSpec({
                 color: c.fgNeutralMuted,
                 boxShadow: `inset 0 0 0 1px ${c.borderDefault}`,
             },
-            brand: { background: c.bgBrandSolid, color: "#fff" },
+            // your-moon/crisp#897: `bgBrandContrast`, the darker AA-safe sibling
+            // of the accent blue (`bgBrandSolid`, #0298d9, only 3.23:1 with
+            // white) -- keeps white text, matching every other tone here.
+            brand: { background: c.bgBrandContrast, color: "#fff" },
             orange: { background: c.bgOrange, color: "#fff" },
             cyan: { background: c.bgCyan, color: "#fff" },
             purple: { background: c.bgPurple, color: "#fff" },

package/dist/esm/components/badge/badge.recipe.js

@@ -126,8 +126,14 @@ const spec = defineSpec({
         {
             variant: "solid",
             tone: "brand",
+            // your-moon/crisp#897: `bgBrandContrast`, not `bgBrandSolid` — white
+            // text on the exact accent blue (#0298d9) only clears 3.23:1;
+            // `bgBrandContrast` is the darker sibling built to clear 4.5:1+ with
+            // white, so `fgOnBrand` (white) stays right rather than `fgOnTone`
+            // (ink read off-brand next to solid `success`/`warning`/`danger`,
+            // which really do need it).
             decls: {
-                background: c.bgBrandSolid,
+                background: c.bgBrandContrast,
                 color: c.fgOnBrand,
                 boxShadow: "none",
             },
@@ -140,7 +146,15 @@ const spec = defineSpec({
         {
             variant: "solid",
             tone: "warning",
-            decls: { background: c.bgWarning, color: c.fgOnTone, boxShadow: "none" },
+            // seed-identity migration (your-moon/crisp#890): `bgWarningSolid`, not
+            // `bgWarning` — seed's own solid warning fill is a distinct, paler
+            // yellow from the accent every other tone's solid fill reuses
+            // directly (see tokens/palette.ts's `amberSolid` comment).
+            decls: {
+                background: c.bgWarningSolid,
+                color: c.fgOnTone,
+                boxShadow: "none",
+            },
         },
         {
             variant: "solid",

package/dist/esm/components/button/button.recipe.js

@@ -27,7 +27,13 @@ const spec = defineSpec({
         intent: {
             primary: {
                 decls: {
-                    background: c.bgBrandSolid,
+                    // your-moon/crisp#897: `bgBrandContrast`, not `bgBrandSolid` —
+                    // white text on the exact accent blue (#0298d9) only clears
+                    // 3.23:1; `bgBrandContrast` is the darker sibling built to clear
+                    // white at 4.5:1+, keeping `fgOnBrand` (white) rather than
+                    // reaching for `fgOnTone` (ink read off-brand — seed's own solid
+                    // buttons use white).
+                    background: c.bgBrandContrast,
                     color: c.fgOnBrand,
                     // crisp#494: the inset ring is a black tint, not white -- live-
                     // measured on Attio's own "New Company" button as
@@ -36,12 +42,16 @@ const spec = defineSpec({
                     // exactly.
                     boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(38,109,240,0.12), 0 3px 6px -2px rgba(38,109,240,0.08)",
                 },
+                // your-moon/crisp#897: a brightness filter, not a second background
+                // swap — matches `danger`'s own pattern below. `bgBrandSolidPressed`
+                // remains the accent's own hover-darken for the many OTHER
+                // consumers that pair `bgBrandSolid` with white already (out of
+                // scope for this fix; tracked separately), so reusing it here would
+                // have made primary's rest-to-hover jump inconsistent with its own
+                // rest fill's new, darker starting point.
                 parts: [
-                    { selector: "&:hover", decls: { background: c.bgBrandSolidPressed } },
-                    {
-                        selector: "&:active",
-                        decls: { background: c.bgBrandSolidPressed },
-                    },
+                    { selector: "&:hover", decls: { filter: "brightness(0.96)" } },
+                    { selector: "&:active", decls: { filter: "brightness(0.92)" } },
                 ],
             },
             neutral: {

package/dist/esm/components/input/input.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { inputRecipe } from "./input.recipe.js";
-export const Input = React.forwardRef(({ size, invalid, className, style, ...props }, ref) => {
+export const Input = React.forwardRef(({ size, invalid, className, style, suffix, ...props }, ref) => {
     // The wrapper exists only to host the ::after focus ring — an <input> is a
     // replaced element and cannot have one. Everything the consumer passes
     // still lands on the <input> itself, so `id`, `name`, `onChange`, form
     // association and every native attribute behave exactly as before.
-    return (_jsx("span", { className: inputRecipe({ size, invalid, className }), style: style, children: _jsx("input", { ref: ref, className: "crisp-input-value", "aria-invalid": invalid === true || undefined, ...props }) }));
+    return (_jsxs("span", { className: inputRecipe({ size, invalid, className }), style: style, "data-readonly": props.readOnly ? "" : undefined, children: [_jsx("input", { ref: ref, className: "crisp-input-value", "aria-invalid": invalid === true || undefined, ...props }), suffix != null && _jsx("span", { className: "crisp-input-suffix", children: suffix })] }));
 });
 Input.displayName = "Input";

package/dist/esm/components/input/input.recipe.js

@@ -38,6 +38,14 @@ const config = defineRecipe({
     & .crisp-input-value::placeholder { color: ${c.fgMuted}; }
     & .crisp-input-value:disabled { opacity: 0.5; cursor: not-allowed; }
     &:has(.crisp-input-value:disabled) { opacity: 1; }
+
+    /* crisp#634: measured live on Attio's own Settings > Profile read-only
+       primary-email field -- a tinted field, not just muted text, driven off
+       the native \`readOnly\` attribute. \`ringField\` (rgba(0,0,0,.06)) is an
+       exact match for the measured ring; the 2%-fgPrimary tint reuses the
+       same color-mix idiom every other soft crisp surface already uses. */
+    &[data-readonly] { background: color-mix(in srgb, ${c.fgPrimary} 2%, transparent); box-shadow: inset 0 0 0 1px ${c.ringField}; }
+    & .crisp-input-suffix { flex-shrink: 0; margin-inline-start: ${c.space["1"]}; }
   `,
     variants: {
         size: {

package/dist/esm/components/multiselect/multiselect.js

@@ -35,7 +35,7 @@ export function MultiSelect({ options, value: valueProp, defaultValue, onValueCh
 // The id belongs on the trigger, not the wrapper: `<label for>` only names a
 // LABELABLE element, so an id left on the root div meant a FormField label
 // above this control named nothing (#247). Select already did this.
-id, placeholder: placeholderProp, searchable = true, searchPlaceholder: searchPlaceholderProp, emptyLabel: emptyLabelProp, disabled, readOnly, invalid, size = "medium", variant = "default", className, "aria-label": ariaLabel, ...rest }) {
+id, placeholder: placeholderProp, searchable = true, searchPlaceholder: searchPlaceholderProp, emptyLabel: emptyLabelProp, disabled, readOnly, invalid, size = "small", variant = "default", className, "aria-label": ariaLabel, ...rest }) {
     // crisp/#471: same resolution order as Select's own.
     const placeholder = useCrispMessage(placeholderProp, "Select…");
     const searchPlaceholder = useCrispMessage(searchPlaceholderProp, "Search…");

package/dist/esm/components/multiselect/multiselect.recipe.js

@@ -96,9 +96,18 @@ const config = defineRecipe({
     .crisp-recordstable-tag[data-tone="orange"] { background: color-mix(in srgb, ${c.bgOrange} 16%, transparent); color: color-mix(in srgb, ${c.bgOrange} 82%, ${c.fgPrimary}); box-shadow: inset 0 0 0 1px color-mix(in srgb, ${c.bgOrange} 30%, transparent); }
   `,
     variants: {
-        // seed's two trigger sizes, same tokens as Select's. medium is the
-        // default -- closest to crisp's previous single size.
+        // Owner's follow-up after #867/#879/#882 (crisp/#889): SIZE is Attio's
+        // again, LOOK stays seed's -- see Select's own recipe comment for the
+        // full reasoning (measured live in GRC's "New employee" dialog: a 40px
+        // trigger next to a 32px `Input` visibly mismatched). `small` is the new
+        // default: `c.size.menuRow` (32px) and the original, pre-#882
+        // Attio-measured asymmetric padding for a chip-wrapping trigger.
+        // `medium`/`large` (seed's own 40/52px) stay, opt-in.
         size: {
+            small: `
+        & .crisp-multiselect-trigger { min-height: ${c.size.menuRow}; border-radius: ${c.radius.md}; gap: ${c.space["1"]}; padding: ${c.space["0.5"]} ${c.space["1.5"]} ${c.space["0.5"]} ${c.space["2"]}; }
+        & .crisp-multiselect-chevron { width: ${c.size.icon}; height: ${c.size.icon}; }
+      `,
             medium: `
         & .crisp-multiselect-trigger { min-height: ${c.size.selectTriggerMd}; border-radius: ${c.radius.md}; gap: ${c.space["2"]}; padding: ${c.space["1"]} ${c.space["3.5"]}; }
         & .crisp-multiselect-chevron { width: ${c.size.icon}; height: ${c.size.icon}; }
@@ -131,7 +140,7 @@ const config = defineRecipe({
       `,
         },
     },
-    defaultVariants: { size: "medium", invalid: false, variant: "default" },
+    defaultVariants: { size: "small", invalid: false, variant: "default" },
     compoundVariants: [],
 });
 export const multiselectRecipe = Object.assign(resolveRecipe(config), {