@crisp-ui-kit/crisp 0.7.1 → 0.7.3

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

@@ -3,9 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.datepickerRecipe = void 0;
 const core_1 = require("../../core");
 const tokens_1 = require("../../tokens");
-// seed-design's calendar, measured from @seed-design/css. The geometry is a
-// 48px rhythm: header, weekday row, month label and every date cell are all
-// x12 tall, and the 42px pill inside a cell is inset 3px from its top.
+// seed-design's calendar structure on Attio's measured scale. The behaviour,
+// markup and range model are seed's; every visual value is measured from Attio's
+// own date picker (app.attio.com, task due-date field): a 32px day on a 34px
+// pitch, an 8px-radius highlight rather than a circle, 14/20 medium numerals and
+// the brand blue for the selection.
 //
 // The pill and the range bridge are ::before layers behind the numeral
 // (`isolation: isolate` on the cell keeps their z-index local), which is what
@@ -20,18 +22,18 @@ const config = (0, core_1.defineRecipe)({
     name: "datepicker",
     base: `
     position: relative; box-sizing: border-box; width: 100%; min-width: 0;
-    font-family: ${tokens_1.contract.font.sans}; color: ${tokens_1.contract.fgNeutralMuted}; background: ${tokens_1.contract.bgSurface};
+    font-family: ${tokens_1.contract.font.sans}; color: ${tokens_1.contract.fgPrimary}; background: ${tokens_1.contract.bgSurface};
 
     & .datepicker-header {
       display: flex; align-items: center; justify-content: space-between;
-      height: ${tokens_1.contract.size.calendarCell};
+      height: ${tokens_1.contract.size.menuRow};
     }
     & .datepicker-header-label {
       display: inline-flex; align-items: center; gap: ${tokens_1.contract.space["1"]};
       height: 100%; min-width: 0; border: 0; padding: 0 ${tokens_1.contract.space["1"]};
       border-radius: ${tokens_1.contract.radius.md}; background: transparent; cursor: pointer;
       color: ${tokens_1.contract.fgPrimary}; font-family: inherit;
-      font-size: ${tokens_1.contract.text.xl}; line-height: 22px; font-weight: ${tokens_1.contract.weight.bold};
+      font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium};
       white-space: nowrap;
       outline: 2px solid transparent; outline-offset: -2px;
       transition: outline-color .2s ease;
@@ -60,16 +62,16 @@ const config = (0, core_1.defineRecipe)({
     & .datepicker-weekday {
       display: flex; align-items: center; justify-content: center;
       height: ${tokens_1.contract.size.calendarCell}; color: ${tokens_1.contract.fgNeutralSubtle};
-      font-size: ${tokens_1.contract.text.lg}; line-height: 19px; font-weight: ${tokens_1.contract.weight.medium};
+      font-size: ${tokens_1.contract.text.sm}; line-height: 16px; font-weight: ${tokens_1.contract.weight.medium};
     }
 
     & .datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
     & .datepicker-months[data-wheel-open] { visibility: hidden; }
     & .datepicker-month { min-width: 0; }
     & .datepicker-month-label {
-      display: flex; align-items: center; height: ${tokens_1.contract.size.calendarCell};
-      color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.xl}; line-height: 22px;
-      font-weight: ${tokens_1.contract.weight.bold};
+      display: flex; align-items: center; height: 24px;
+      color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px;
+      font-weight: ${tokens_1.contract.weight.medium};
     }
 
     & .datepicker-grid { display: grid; min-width: 0; }
@@ -108,27 +110,27 @@ const config = (0, core_1.defineRecipe)({
       min-height: ${tokens_1.contract.size.calendarCell}; min-width: 0;
       align-items: flex-start; justify-content: center;
       border: 0; padding: 0; background: transparent; cursor: pointer;
-      color: ${tokens_1.contract.fgNeutralMuted}; font: inherit; outline: none;
+      color: ${tokens_1.contract.fgPrimary}; font: inherit; outline: none;
       isolation: isolate;
     }
     /* the round day highlight, behind the numeral */
     & .datepicker-date::before {
       content: ""; position: absolute; z-index: -1; top: ${pillInset}; left: 50%;
       width: ${tokens_1.contract.size.calendarPill}; height: ${tokens_1.contract.size.calendarPill};
-      border-radius: ${tokens_1.contract.radius.full};
+      border-radius: ${tokens_1.contract.radius.md};
       background: transparent; transform: translateX(-50%);
     }
     & .datepicker-date[data-today]::before { background: ${tokens_1.contract.bgNeutralWeak}; }
-    & .datepicker-date[data-selected]::before { background: ${tokens_1.contract.bgNeutralInverted}; }
-    & .datepicker-date[data-selected] { color: ${tokens_1.contract.fgOnNeutralInverted}; }
-    & .datepicker-date[data-in-range] { color: ${tokens_1.contract.fgNeutralMuted}; }
+    & .datepicker-date[data-selected]::before { background: ${tokens_1.contract.bgBrandSolid}; }
+    & .datepicker-date[data-selected] { color: ${tokens_1.contract.fgOnBrand}; }
+    & .datepicker-date[data-in-range] { color: ${tokens_1.contract.fgPrimary}; }
     & .datepicker-date[data-in-range]::before { background: transparent; }
     & .datepicker-date[data-unavailable] { color: ${tokens_1.contract.fgDisabled}; }
     & .datepicker-date:disabled { color: ${tokens_1.contract.fgDisabled}; cursor: not-allowed; }
     & .datepicker-date:focus-visible::after {
       content: ""; position: absolute; top: ${pillInset}; left: 50%;
       width: ${tokens_1.contract.size.calendarPill}; height: ${tokens_1.contract.size.calendarPill};
-      transform: translateX(-50%); border-radius: ${tokens_1.contract.radius.full};
+      transform: translateX(-50%); border-radius: ${tokens_1.contract.radius.md};
       outline: 2px solid ${tokens_1.contract.strokeFocusRing}; outline-offset: -2px;
     }
 
@@ -137,7 +139,7 @@ const config = (0, core_1.defineRecipe)({
       min-height: ${tokens_1.contract.size.calendarCell}; min-width: 0; box-sizing: border-box;
       flex-direction: column; align-items: center; gap: 3px;
       padding-top: ${pillInset}; color: inherit;
-      font-size: ${tokens_1.contract.text.xl}; line-height: 22px; font-weight: ${tokens_1.contract.weight.medium};
+      font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium};
       font-variant-numeric: tabular-nums;
     }
     /* The numeral is its own 42px flex box so it centres on the 42px pill.
@@ -152,7 +154,7 @@ const config = (0, core_1.defineRecipe)({
     /* the year/month wheel, laid over the grid it replaces */
     & .datepicker-wheel-container {
       position: absolute; z-index: 1; inset-inline: 0;
-      top: ${tokens_1.contract.size.calendarCell}; bottom: 0;
+      top: ${tokens_1.contract.size.menuRow}; bottom: 0;
       display: flex; align-items: center; overflow: hidden;
       background: ${tokens_1.contract.bgSurface};
     }
@@ -175,8 +177,8 @@ const config = (0, core_1.defineRecipe)({
         visibleRange: {
             month: ``,
             twoMonths: `& .datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: ${tokens_1.contract.space["6"]}; }
-        & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: ${tokens_1.contract.size.calendarCell}; }
-        & .datepicker-two-month-label { color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.xl}; line-height: 22px; font-weight: ${tokens_1.contract.weight.bold}; }`,
+        & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: ${tokens_1.contract.size.menuRow}; }
+        & .datepicker-two-month-label { color: ${tokens_1.contract.fgPrimary}; font-size: ${tokens_1.contract.text.lg}; line-height: 20px; font-weight: ${tokens_1.contract.weight.medium}; }`,
             week: ``,
             continuous: `& .datepicker-weekday-row { position: sticky; top: 0; }`,
         },

package/dist/cjs/components/multiselect/multiselect.js

@@ -64,6 +64,12 @@ function Chip({ opt }) {
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
 function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, ...rest }) {
+    // Virtual focus: DOM focus stays on the trigger (or the search field) and the
+    // active option is named by `aria-activedescendant`. `data-highlighted` is a
+    // styling hook only -- a screen reader cannot see it.
+    const autoId = React.useId();
+    const listboxId = `${autoId}-listbox`;
+    const optionId = (i) => `${autoId}-opt-${i}`;
     const [open, setOpen] = React.useState(false);
     const [up, setUp] = React.useState(false);
     const [pos, setPos] = React.useState({});
@@ -105,6 +111,9 @@ function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, p
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
     };
+    const activeId = open && highlight >= 0 && highlight < filtered.length
+        ? optionId(highlight)
+        : undefined;
     const toggle = (v) => {
         const next = selectedSet.has(v)
             ? value.filter((x) => x !== v)
@@ -143,19 +152,19 @@ function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, p
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, multiselect_recipe_1.multiselectRecipe)({ className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)
                         onNavKeys(e);
                     else if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {
                         e.preventDefault();
                         openMenu();
                     }
-                }, children: [(0, jsx_runtime_1.jsx)("span", { className: "multiselect-chips", children: selectedOptions.length === 0 ? ((0, jsx_runtime_1.jsx)("span", { className: "multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => (0, jsx_runtime_1.jsx)(Chip, { opt: o }, o.value))) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "multiselect-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, value: query, onChange: (e) => {
+                }, children: [(0, jsx_runtime_1.jsx)("span", { className: "multiselect-chips", children: selectedOptions.length === 0 ? ((0, jsx_runtime_1.jsx)("span", { className: "multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => (0, jsx_runtime_1.jsx)(Chip, { opt: o }, o.value))) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { id: listboxId, className: "multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "multiselect-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                     setQuery(e.target.value);
                                     setHighlight(0);
                                 }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "multiselect-empty", children: "No results" })) : (filtered.map((opt, i) => {
                         const sel = selectedSet.has(opt.value);
-                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "option", "aria-selected": sel, "data-highlighted": i === highlight ? "" : undefined, className: "multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [(0, jsx_runtime_1.jsx)("span", { className: "multiselect-option-chip", children: (0, jsx_runtime_1.jsx)(Chip, { opt: opt }) }), (0, jsx_runtime_1.jsx)("span", { className: "multiselect-check", children: sel && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
+                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [(0, jsx_runtime_1.jsx)("span", { className: "multiselect-option-chip", children: (0, jsx_runtime_1.jsx)(Chip, { opt: opt }) }), (0, jsx_runtime_1.jsx)("span", { className: "multiselect-check", children: sel && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
                     }))] }))] }));
 }
 MultiSelect.displayName = "MultiSelect";

package/dist/cjs/components/select/select.js

@@ -51,6 +51,14 @@ function optionText(o) {
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
 function Select({ options, value, defaultValue, onValueChange, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
+    // Virtual focus: DOM focus stays on the trigger (or the search field), and the
+    // active option is named by `aria-activedescendant`. That is the only thing a
+    // screen reader has to go on -- `data-highlighted` is invisible to it -- so the
+    // ids below have to resolve to the element the highlight is actually drawn on.
+    const autoId = React.useId();
+    const baseId = id ?? autoId;
+    const listboxId = `${baseId}-listbox`;
+    const optionId = (i) => `${baseId}-opt-${i}`;
     const [internal, setInternal] = React.useState(defaultValue);
     const selected = value ?? internal;
     const [open, setOpen] = React.useState(false);
@@ -70,6 +78,9 @@ function Select({ options, value, defaultValue, onValueChange, placeholder = "Se
     const enabledIndexes = filtered
         .map((o, i) => (o.disabled ? -1 : i))
         .filter((i) => i >= 0);
+    const activeId = open && highlight >= 0 && highlight < filtered.length
+        ? optionId(highlight)
+        : undefined;
     const openMenu = () => {
         if (disabled)
             return;
@@ -169,12 +180,12 @@ function Select({ options, value, defaultValue, onValueChange, placeholder = "Se
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, value: query, onChange: (e) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: rootRef, className: (0, select_recipe_1.selectRecipe)({ variant, width, className }), ...rest, children: [(0, jsx_runtime_1.jsxs)("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [(0, jsx_runtime_1.jsx)("span", { className: "select-value", children: selectedOption ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [selectedOption.color && ((0, jsx_runtime_1.jsx)("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : ((0, jsx_runtime_1.jsx)("span", { className: "select-placeholder", children: placeholder })) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && ((0, jsx_runtime_1.jsxs)("div", { id: listboxId, className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && ((0, jsx_runtime_1.jsxs)("div", { className: "select-search", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Search, { size: 15, strokeWidth: 1.75 }), (0, jsx_runtime_1.jsx)("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                     setQuery(e.target.value);
                                     setHighlight(0);
                                 }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "select-empty", children: "No results" })) : (filtered.map((opt, i) => {
                         const isSel = opt.value === selected;
-                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", role: "option", "aria-selected": isSel, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && ((0, jsx_runtime_1.jsx)("span", { className: "select-option-dot", style: { background: opt.color } })), (0, jsx_runtime_1.jsx)("span", { className: "select-option-label", children: opt.label }), isSel && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
+                        return ((0, jsx_runtime_1.jsxs)("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && ((0, jsx_runtime_1.jsx)("span", { className: "select-option-dot", style: { background: opt.color } })), (0, jsx_runtime_1.jsx)("span", { className: "select-option-label", children: opt.label }), isSel && ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
                     }))] }))] }));
 }
 Select.displayName = "Select";

package/dist/cjs/tokens/scale.js

@@ -46,8 +46,12 @@ exports.size = {
     tableRow: "36px", // data-grid row height
     tableHeader: "40px", // data-grid header row height
     header: "48px", // workspace-switcher header height
-    calendarCell: "48px", // calendar day cell / header rhythm (seed x12)
-    calendarPill: "42px", // round day highlight inside a calendar cell
+    // Attio's date picker, measured: a 32px day with a 2px gap on both axes, so
+    // the pitch is 34. The gap is expressed as the cell being 2px taller than the
+    // highlight rather than as a grid gap, because crisp's range bridge spans
+    // whole cells and a column gap would cut it.
+    calendarCell: "34px", // calendar day pitch (32px day + 2px gap)
+    calendarPill: "32px", // the day highlight itself
 };
 // Typography — Attio's UI runs entirely on Inter. Sizes measured in the sidebar
 // collapse onto 11/12/13/14/16 (lg = 14px is the default body/label size);

package/dist/datepicker.css

@@ -1,18 +1,18 @@
 .datepicker {
   
     position: relative; box-sizing: border-box; width: 100%; min-width: 0;
-    font-family: var(--font-sans); color: var(--fg-neutral-muted); background: var(--bg-surface);
+    font-family: var(--font-sans); color: var(--fg-primary); background: var(--bg-surface);
 
     & .datepicker-header {
       display: flex; align-items: center; justify-content: space-between;
-      height: var(--size-calendarCell);
+      height: var(--size-menuRow);
     }
     & .datepicker-header-label {
       display: inline-flex; align-items: center; gap: var(--space-1);
       height: 100%; min-width: 0; border: 0; padding: 0 var(--space-1);
       border-radius: var(--radius-md); background: transparent; cursor: pointer;
       color: var(--fg-primary); font-family: inherit;
-      font-size: var(--text-xl); line-height: 22px; font-weight: var(--weight-bold);
+      font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium);
       white-space: nowrap;
       outline: 2px solid transparent; outline-offset: -2px;
       transition: outline-color .2s ease;
@@ -41,16 +41,16 @@
     & .datepicker-weekday {
       display: flex; align-items: center; justify-content: center;
       height: var(--size-calendarCell); color: var(--fg-neutral-subtle);
-      font-size: var(--text-lg); line-height: 19px; font-weight: var(--weight-medium);
+      font-size: var(--text-sm); line-height: 16px; font-weight: var(--weight-medium);
     }
 
     & .datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
     & .datepicker-months[data-wheel-open] { visibility: hidden; }
     & .datepicker-month { min-width: 0; }
     & .datepicker-month-label {
-      display: flex; align-items: center; height: var(--size-calendarCell);
-      color: var(--fg-primary); font-size: var(--text-xl); line-height: 22px;
-      font-weight: var(--weight-bold);
+      display: flex; align-items: center; height: 24px;
+      color: var(--fg-primary); font-size: var(--text-lg); line-height: 20px;
+      font-weight: var(--weight-medium);
     }
 
     & .datepicker-grid { display: grid; min-width: 0; }
@@ -89,27 +89,27 @@
       min-height: var(--size-calendarCell); min-width: 0;
       align-items: flex-start; justify-content: center;
       border: 0; padding: 0; background: transparent; cursor: pointer;
-      color: var(--fg-neutral-muted); font: inherit; outline: none;
+      color: var(--fg-primary); font: inherit; outline: none;
       isolation: isolate;
     }
     /* the round day highlight, behind the numeral */
     & .datepicker-date::before {
       content: ""; position: absolute; z-index: -1; top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); left: 50%;
       width: var(--size-calendarPill); height: var(--size-calendarPill);
-      border-radius: var(--radius-full);
+      border-radius: var(--radius-md);
       background: transparent; transform: translateX(-50%);
     }
     & .datepicker-date[data-today]::before { background: var(--bg-neutral-weak); }
-    & .datepicker-date[data-selected]::before { background: var(--bg-neutral-inverted); }
-    & .datepicker-date[data-selected] { color: var(--fg-on-neutral-inverted); }
-    & .datepicker-date[data-in-range] { color: var(--fg-neutral-muted); }
+    & .datepicker-date[data-selected]::before { background: var(--bg-brand-solid); }
+    & .datepicker-date[data-selected] { color: var(--fg-on-brand); }
+    & .datepicker-date[data-in-range] { color: var(--fg-primary); }
     & .datepicker-date[data-in-range]::before { background: transparent; }
     & .datepicker-date[data-unavailable] { color: var(--fg-disabled); }
     & .datepicker-date:disabled { color: var(--fg-disabled); cursor: not-allowed; }
     & .datepicker-date:focus-visible::after {
       content: ""; position: absolute; top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); left: 50%;
       width: var(--size-calendarPill); height: var(--size-calendarPill);
-      transform: translateX(-50%); border-radius: var(--radius-full);
+      transform: translateX(-50%); border-radius: var(--radius-md);
       outline: 2px solid var(--stroke-focus-ring); outline-offset: -2px;
     }
 
@@ -118,7 +118,7 @@
       min-height: var(--size-calendarCell); min-width: 0; box-sizing: border-box;
       flex-direction: column; align-items: center; gap: 3px;
       padding-top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); color: inherit;
-      font-size: var(--text-xl); line-height: 22px; font-weight: var(--weight-medium);
+      font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium);
       font-variant-numeric: tabular-nums;
     }
     /* The numeral is its own 42px flex box so it centres on the 42px pill.
@@ -133,7 +133,7 @@
     /* the year/month wheel, laid over the grid it replaces */
     & .datepicker-wheel-container {
       position: absolute; z-index: 1; inset-inline: 0;
-      top: var(--size-calendarCell); bottom: 0;
+      top: var(--size-menuRow); bottom: 0;
       display: flex; align-items: center; overflow: hidden;
       background: var(--bg-surface);
     }
@@ -158,8 +158,8 @@
 }
 .datepicker--visibleRange_twoMonths {
   & .datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
-        & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: var(--size-calendarCell); }
-        & .datepicker-two-month-label { color: var(--fg-primary); font-size: var(--text-xl); line-height: 22px; font-weight: var(--weight-bold); }
+        & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: var(--size-menuRow); }
+        & .datepicker-two-month-label { color: var(--fg-primary); font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium); }
 }
 .datepicker--visibleRange_week {
   

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

@@ -1,8 +1,10 @@
 import { defineRecipe, resolveRecipe } from "../../core/index.js";
 import { contract as c } from "../../tokens/index.js";
-// seed-design's calendar, measured from @seed-design/css. The geometry is a
-// 48px rhythm: header, weekday row, month label and every date cell are all
-// x12 tall, and the 42px pill inside a cell is inset 3px from its top.
+// seed-design's calendar structure on Attio's measured scale. The behaviour,
+// markup and range model are seed's; every visual value is measured from Attio's
+// own date picker (app.attio.com, task due-date field): a 32px day on a 34px
+// pitch, an 8px-radius highlight rather than a circle, 14/20 medium numerals and
+// the brand blue for the selection.
 //
 // The pill and the range bridge are ::before layers behind the numeral
 // (`isolation: isolate` on the cell keeps their z-index local), which is what
@@ -17,18 +19,18 @@ const config = defineRecipe({
     name: "datepicker",
     base: `
     position: relative; box-sizing: border-box; width: 100%; min-width: 0;
-    font-family: ${c.font.sans}; color: ${c.fgNeutralMuted}; background: ${c.bgSurface};
+    font-family: ${c.font.sans}; color: ${c.fgPrimary}; background: ${c.bgSurface};
 
     & .datepicker-header {
       display: flex; align-items: center; justify-content: space-between;
-      height: ${c.size.calendarCell};
+      height: ${c.size.menuRow};
     }
     & .datepicker-header-label {
       display: inline-flex; align-items: center; gap: ${c.space["1"]};
       height: 100%; min-width: 0; border: 0; padding: 0 ${c.space["1"]};
       border-radius: ${c.radius.md}; background: transparent; cursor: pointer;
       color: ${c.fgPrimary}; font-family: inherit;
-      font-size: ${c.text.xl}; line-height: 22px; font-weight: ${c.weight.bold};
+      font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium};
       white-space: nowrap;
       outline: 2px solid transparent; outline-offset: -2px;
       transition: outline-color .2s ease;
@@ -57,16 +59,16 @@ const config = defineRecipe({
     & .datepicker-weekday {
       display: flex; align-items: center; justify-content: center;
       height: ${c.size.calendarCell}; color: ${c.fgNeutralSubtle};
-      font-size: ${c.text.lg}; line-height: 19px; font-weight: ${c.weight.medium};
+      font-size: ${c.text.sm}; line-height: 16px; font-weight: ${c.weight.medium};
     }
 
     & .datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
     & .datepicker-months[data-wheel-open] { visibility: hidden; }
     & .datepicker-month { min-width: 0; }
     & .datepicker-month-label {
-      display: flex; align-items: center; height: ${c.size.calendarCell};
-      color: ${c.fgPrimary}; font-size: ${c.text.xl}; line-height: 22px;
-      font-weight: ${c.weight.bold};
+      display: flex; align-items: center; height: 24px;
+      color: ${c.fgPrimary}; font-size: ${c.text.lg}; line-height: 20px;
+      font-weight: ${c.weight.medium};
     }
 
     & .datepicker-grid { display: grid; min-width: 0; }
@@ -105,27 +107,27 @@ const config = defineRecipe({
       min-height: ${c.size.calendarCell}; min-width: 0;
       align-items: flex-start; justify-content: center;
       border: 0; padding: 0; background: transparent; cursor: pointer;
-      color: ${c.fgNeutralMuted}; font: inherit; outline: none;
+      color: ${c.fgPrimary}; font: inherit; outline: none;
       isolation: isolate;
     }
     /* the round day highlight, behind the numeral */
     & .datepicker-date::before {
       content: ""; position: absolute; z-index: -1; top: ${pillInset}; left: 50%;
       width: ${c.size.calendarPill}; height: ${c.size.calendarPill};
-      border-radius: ${c.radius.full};
+      border-radius: ${c.radius.md};
       background: transparent; transform: translateX(-50%);
     }
     & .datepicker-date[data-today]::before { background: ${c.bgNeutralWeak}; }
-    & .datepicker-date[data-selected]::before { background: ${c.bgNeutralInverted}; }
-    & .datepicker-date[data-selected] { color: ${c.fgOnNeutralInverted}; }
-    & .datepicker-date[data-in-range] { color: ${c.fgNeutralMuted}; }
+    & .datepicker-date[data-selected]::before { background: ${c.bgBrandSolid}; }
+    & .datepicker-date[data-selected] { color: ${c.fgOnBrand}; }
+    & .datepicker-date[data-in-range] { color: ${c.fgPrimary}; }
     & .datepicker-date[data-in-range]::before { background: transparent; }
     & .datepicker-date[data-unavailable] { color: ${c.fgDisabled}; }
     & .datepicker-date:disabled { color: ${c.fgDisabled}; cursor: not-allowed; }
     & .datepicker-date:focus-visible::after {
       content: ""; position: absolute; top: ${pillInset}; left: 50%;
       width: ${c.size.calendarPill}; height: ${c.size.calendarPill};
-      transform: translateX(-50%); border-radius: ${c.radius.full};
+      transform: translateX(-50%); border-radius: ${c.radius.md};
       outline: 2px solid ${c.strokeFocusRing}; outline-offset: -2px;
     }
 
@@ -134,7 +136,7 @@ const config = defineRecipe({
       min-height: ${c.size.calendarCell}; min-width: 0; box-sizing: border-box;
       flex-direction: column; align-items: center; gap: 3px;
       padding-top: ${pillInset}; color: inherit;
-      font-size: ${c.text.xl}; line-height: 22px; font-weight: ${c.weight.medium};
+      font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium};
       font-variant-numeric: tabular-nums;
     }
     /* The numeral is its own 42px flex box so it centres on the 42px pill.
@@ -149,7 +151,7 @@ const config = defineRecipe({
     /* the year/month wheel, laid over the grid it replaces */
     & .datepicker-wheel-container {
       position: absolute; z-index: 1; inset-inline: 0;
-      top: ${c.size.calendarCell}; bottom: 0;
+      top: ${c.size.menuRow}; bottom: 0;
       display: flex; align-items: center; overflow: hidden;
       background: ${c.bgSurface};
     }
@@ -172,8 +174,8 @@ const config = defineRecipe({
         visibleRange: {
             month: ``,
             twoMonths: `& .datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: ${c.space["6"]}; }
-        & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: ${c.size.calendarCell}; }
-        & .datepicker-two-month-label { color: ${c.fgPrimary}; font-size: ${c.text.xl}; line-height: 22px; font-weight: ${c.weight.bold}; }`,
+        & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: ${c.size.menuRow}; }
+        & .datepicker-two-month-label { color: ${c.fgPrimary}; font-size: ${c.text.lg}; line-height: 20px; font-weight: ${c.weight.medium}; }`,
             week: ``,
             continuous: `& .datepicker-weekday-row { position: sticky; top: 0; }`,
         },

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

@@ -28,6 +28,12 @@ function Chip({ opt }) {
  * click (the menu stays open). Keyboard: ↑/↓ move, Enter toggles, Esc closes.
  */
 export function MultiSelect({ options, value: valueProp, defaultValue, onValueChange, placeholder = "Select…", searchable = true, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, ...rest }) {
+    // Virtual focus: DOM focus stays on the trigger (or the search field) and the
+    // active option is named by `aria-activedescendant`. `data-highlighted` is a
+    // styling hook only -- a screen reader cannot see it.
+    const autoId = React.useId();
+    const listboxId = `${autoId}-listbox`;
+    const optionId = (i) => `${autoId}-opt-${i}`;
     const [open, setOpen] = React.useState(false);
     const [up, setUp] = React.useState(false);
     const [pos, setPos] = React.useState({});
@@ -69,6 +75,9 @@ export function MultiSelect({ options, value: valueProp, defaultValue, onValueCh
         setOpen(false);
         triggerRef.current?.focus({ preventScroll: true });
     };
+    const activeId = open && highlight >= 0 && highlight < filtered.length
+        ? optionId(highlight)
+        : undefined;
     const toggle = (v) => {
         const next = selectedSet.has(v)
             ? value.filter((x) => x !== v)
@@ -107,19 +116,19 @@ export function MultiSelect({ options, value: valueProp, defaultValue, onValueCh
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ className }), ...rest, children: [_jsxs("button", { ref: triggerRef, type: "button", "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
+    return (_jsxs("div", { ref: rootRef, className: multiselectRecipe({ className }), ...rest, children: [_jsxs("button", { ref: triggerRef, type: "button", role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "multiselect-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: (e) => {
                     if (open && !searchable)
                         onNavKeys(e);
                     else if (!open && (e.key === "ArrowDown" || e.key === "Enter")) {
                         e.preventDefault();
                         openMenu();
                     }
-                }, children: [_jsx("span", { className: "multiselect-chips", children: selectedOptions.length === 0 ? (_jsx("span", { className: "multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => _jsx(Chip, { opt: o }, o.value))) }), _jsx(ChevronDown, { className: "multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { className: "multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "multiselect-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, value: query, onChange: (e) => {
+                }, children: [_jsx("span", { className: "multiselect-chips", children: selectedOptions.length === 0 ? (_jsx("span", { className: "multiselect-placeholder", children: placeholder })) : (selectedOptions.map((o) => _jsx(Chip, { opt: o }, o.value))) }), _jsx(ChevronDown, { className: "multiselect-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { id: listboxId, className: "multiselect-listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "multiselect-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                     setQuery(e.target.value);
                                     setHighlight(0);
                                 }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "multiselect-empty", children: "No results" })) : (filtered.map((opt, i) => {
                         const sel = selectedSet.has(opt.value);
-                        return (_jsxs("button", { type: "button", role: "option", "aria-selected": sel, "data-highlighted": i === highlight ? "" : undefined, className: "multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [_jsx("span", { className: "multiselect-option-chip", children: _jsx(Chip, { opt: opt }) }), _jsx("span", { className: "multiselect-check", children: sel && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
+                        return (_jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": sel, tabIndex: -1, "data-highlighted": i === highlight ? "" : undefined, className: "multiselect-option", onClick: () => toggle(opt.value), onMouseEnter: () => setHighlight(i), children: [_jsx("span", { className: "multiselect-option-chip", children: _jsx(Chip, { opt: opt }) }), _jsx("span", { className: "multiselect-check", children: sel && _jsx(Check, { size: 12, strokeWidth: 3 }) })] }, opt.value));
                     }))] }))] }));
 }
 MultiSelect.displayName = "MultiSelect";

package/dist/esm/components/select/select.js

@@ -15,6 +15,14 @@ function optionText(o) {
  * Esc close, Home/End jump, opens upward when tight. Controlled or uncontrolled.
  */
 export function Select({ options, value, defaultValue, onValueChange, placeholder = "Select…", variant = "default", width = "full", searchable, searchPlaceholder = "Search…", disabled, className, "aria-label": ariaLabel, id, ...rest }) {
+    // Virtual focus: DOM focus stays on the trigger (or the search field), and the
+    // active option is named by `aria-activedescendant`. That is the only thing a
+    // screen reader has to go on -- `data-highlighted` is invisible to it -- so the
+    // ids below have to resolve to the element the highlight is actually drawn on.
+    const autoId = React.useId();
+    const baseId = id ?? autoId;
+    const listboxId = `${baseId}-listbox`;
+    const optionId = (i) => `${baseId}-opt-${i}`;
     const [internal, setInternal] = React.useState(defaultValue);
     const selected = value ?? internal;
     const [open, setOpen] = React.useState(false);
@@ -34,6 +42,9 @@ export function Select({ options, value, defaultValue, onValueChange, placeholde
     const enabledIndexes = filtered
         .map((o, i) => (o.disabled ? -1 : i))
         .filter((i) => i >= 0);
+    const activeId = open && highlight >= 0 && highlight < filtered.length
+        ? optionId(highlight)
+        : undefined;
     const openMenu = () => {
         if (disabled)
             return;
@@ -133,12 +144,12 @@ export function Select({ options, value, defaultValue, onValueChange, placeholde
         document.addEventListener("pointerdown", onDown);
         return () => document.removeEventListener("pointerdown", onDown);
     }, [open]);
-    return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, className }), ...rest, children: [_jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, value: query, onChange: (e) => {
+    return (_jsxs("div", { ref: rootRef, className: selectRecipe({ variant, width, className }), ...rest, children: [_jsxs("button", { ref: triggerRef, type: "button", id: id, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, "aria-activedescendant": searchable ? undefined : activeId, "aria-label": ariaLabel, disabled: disabled, "data-open": open ? "" : undefined, className: "select-trigger", onClick: () => (open ? setOpen(false) : openMenu()), onKeyDown: onTriggerKeyDown, children: [_jsx("span", { className: "select-value", children: selectedOption ? (_jsxs(_Fragment, { children: [selectedOption.color && (_jsx("span", { className: "select-option-dot", style: { background: selectedOption.color } })), selectedOption.label] })) : (_jsx("span", { className: "select-placeholder", children: placeholder })) }), _jsx(ChevronDown, { className: "select-chevron", size: 16, strokeWidth: 1.75 })] }), open && (_jsxs("div", { id: listboxId, className: "select-listbox", role: "listbox", "aria-label": ariaLabel, "data-up": up ? "" : undefined, style: pos, children: [searchable && (_jsxs("div", { className: "select-search", children: [_jsx(Search, { size: 15, strokeWidth: 1.75 }), _jsx("input", { ref: searchRef, type: "text", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-controls": listboxId, "aria-activedescendant": activeId, value: query, onChange: (e) => {
                                     setQuery(e.target.value);
                                     setHighlight(0);
                                 }, onKeyDown: onNavKeys })] })), filtered.length === 0 ? (_jsx("div", { className: "select-empty", children: "No results" })) : (filtered.map((opt, i) => {
                         const isSel = opt.value === selected;
-                        return (_jsxs("button", { type: "button", role: "option", "aria-selected": isSel, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && (_jsx("span", { className: "select-option-dot", style: { background: opt.color } })), _jsx("span", { className: "select-option-label", children: opt.label }), isSel && (_jsx(Check, { className: "select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
+                        return (_jsxs("button", { type: "button", id: optionId(i), role: "option", "aria-selected": isSel, tabIndex: -1, disabled: opt.disabled, "data-disabled": opt.disabled ? "" : undefined, "data-highlighted": i === highlight ? "" : undefined, className: "select-option", onClick: () => pick(opt), onMouseEnter: () => setHighlight(i), children: [opt.color && (_jsx("span", { className: "select-option-dot", style: { background: opt.color } })), _jsx("span", { className: "select-option-label", children: opt.label }), isSel && (_jsx(Check, { className: "select-option-check", size: 15, strokeWidth: 2 }))] }, opt.value));
                     }))] }))] }));
 }
 Select.displayName = "Select";

package/dist/esm/tokens/scale.js

@@ -43,8 +43,12 @@ export const size = {
     tableRow: "36px", // data-grid row height
     tableHeader: "40px", // data-grid header row height
     header: "48px", // workspace-switcher header height
-    calendarCell: "48px", // calendar day cell / header rhythm (seed x12)
-    calendarPill: "42px", // round day highlight inside a calendar cell
+    // Attio's date picker, measured: a 32px day with a 2px gap on both axes, so
+    // the pitch is 34. The gap is expressed as the cell being 2px taller than the
+    // highlight rather than as a grid gap, because crisp's range bridge spans
+    // whole cells and a column gap would cut it.
+    calendarCell: "34px", // calendar day pitch (32px day + 2px gap)
+    calendarPill: "32px", // the day highlight itself
 };
 // Typography — Attio's UI runs entirely on Inter. Sizes measured in the sidebar
 // collapse onto 11/12/13/14/16 (lg = 14px is the default body/label size);

package/dist/native/tokens.js

@@ -198,8 +198,8 @@ export const tokens = {
     "tableRow": 36,
     "tableHeader": 40,
     "header": 48,
-    "calendarCell": 48,
-    "calendarPill": 42
+    "calendarCell": 34,
+    "calendarPill": 32
   },
   "text": {
     "xs": 11,

package/dist/styles.css

@@ -108,8 +108,8 @@
   --size-tableRow: 36px;
   --size-tableHeader: 40px;
   --size-header: 48px;
-  --size-calendarCell: 48px;
-  --size-calendarPill: 42px;
+  --size-calendarCell: 34px;
+  --size-calendarPill: 32px;
   --text-xs: 11px;
   --text-sm: 12px;
   --text-md: 13px;
@@ -571,18 +571,18 @@
 .datepicker {
   
     position: relative; box-sizing: border-box; width: 100%; min-width: 0;
-    font-family: var(--font-sans); color: var(--fg-neutral-muted); background: var(--bg-surface);
+    font-family: var(--font-sans); color: var(--fg-primary); background: var(--bg-surface);
 
     & .datepicker-header {
       display: flex; align-items: center; justify-content: space-between;
-      height: var(--size-calendarCell);
+      height: var(--size-menuRow);
     }
     & .datepicker-header-label {
       display: inline-flex; align-items: center; gap: var(--space-1);
       height: 100%; min-width: 0; border: 0; padding: 0 var(--space-1);
       border-radius: var(--radius-md); background: transparent; cursor: pointer;
       color: var(--fg-primary); font-family: inherit;
-      font-size: var(--text-xl); line-height: 22px; font-weight: var(--weight-bold);
+      font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium);
       white-space: nowrap;
       outline: 2px solid transparent; outline-offset: -2px;
       transition: outline-color .2s ease;
@@ -611,16 +611,16 @@
     & .datepicker-weekday {
       display: flex; align-items: center; justify-content: center;
       height: var(--size-calendarCell); color: var(--fg-neutral-subtle);
-      font-size: var(--text-lg); line-height: 19px; font-weight: var(--weight-medium);
+      font-size: var(--text-sm); line-height: 16px; font-weight: var(--weight-medium);
     }
 
     & .datepicker-months { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; min-width: 0; }
     & .datepicker-months[data-wheel-open] { visibility: hidden; }
     & .datepicker-month { min-width: 0; }
     & .datepicker-month-label {
-      display: flex; align-items: center; height: var(--size-calendarCell);
-      color: var(--fg-primary); font-size: var(--text-xl); line-height: 22px;
-      font-weight: var(--weight-bold);
+      display: flex; align-items: center; height: 24px;
+      color: var(--fg-primary); font-size: var(--text-lg); line-height: 20px;
+      font-weight: var(--weight-medium);
     }
 
     & .datepicker-grid { display: grid; min-width: 0; }
@@ -659,27 +659,27 @@
       min-height: var(--size-calendarCell); min-width: 0;
       align-items: flex-start; justify-content: center;
       border: 0; padding: 0; background: transparent; cursor: pointer;
-      color: var(--fg-neutral-muted); font: inherit; outline: none;
+      color: var(--fg-primary); font: inherit; outline: none;
       isolation: isolate;
     }
     /* the round day highlight, behind the numeral */
     & .datepicker-date::before {
       content: ""; position: absolute; z-index: -1; top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); left: 50%;
       width: var(--size-calendarPill); height: var(--size-calendarPill);
-      border-radius: var(--radius-full);
+      border-radius: var(--radius-md);
       background: transparent; transform: translateX(-50%);
     }
     & .datepicker-date[data-today]::before { background: var(--bg-neutral-weak); }
-    & .datepicker-date[data-selected]::before { background: var(--bg-neutral-inverted); }
-    & .datepicker-date[data-selected] { color: var(--fg-on-neutral-inverted); }
-    & .datepicker-date[data-in-range] { color: var(--fg-neutral-muted); }
+    & .datepicker-date[data-selected]::before { background: var(--bg-brand-solid); }
+    & .datepicker-date[data-selected] { color: var(--fg-on-brand); }
+    & .datepicker-date[data-in-range] { color: var(--fg-primary); }
     & .datepicker-date[data-in-range]::before { background: transparent; }
     & .datepicker-date[data-unavailable] { color: var(--fg-disabled); }
     & .datepicker-date:disabled { color: var(--fg-disabled); cursor: not-allowed; }
     & .datepicker-date:focus-visible::after {
       content: ""; position: absolute; top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); left: 50%;
       width: var(--size-calendarPill); height: var(--size-calendarPill);
-      transform: translateX(-50%); border-radius: var(--radius-full);
+      transform: translateX(-50%); border-radius: var(--radius-md);
       outline: 2px solid var(--stroke-focus-ring); outline-offset: -2px;
     }
 
@@ -688,7 +688,7 @@
       min-height: var(--size-calendarCell); min-width: 0; box-sizing: border-box;
       flex-direction: column; align-items: center; gap: 3px;
       padding-top: calc((var(--size-calendarCell) - var(--size-calendarPill)) / 2); color: inherit;
-      font-size: var(--text-xl); line-height: 22px; font-weight: var(--weight-medium);
+      font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium);
       font-variant-numeric: tabular-nums;
     }
     /* The numeral is its own 42px flex box so it centres on the 42px pill.
@@ -703,7 +703,7 @@
     /* the year/month wheel, laid over the grid it replaces */
     & .datepicker-wheel-container {
       position: absolute; z-index: 1; inset-inline: 0;
-      top: var(--size-calendarCell); bottom: 0;
+      top: var(--size-menuRow); bottom: 0;
       display: flex; align-items: center; overflow: hidden;
       background: var(--bg-surface);
     }
@@ -728,8 +728,8 @@
 }
 .datepicker--visibleRange_twoMonths {
   & .datepicker-months { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
-        & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: var(--size-calendarCell); }
-        & .datepicker-two-month-label { color: var(--fg-primary); font-size: var(--text-xl); line-height: 22px; font-weight: var(--weight-bold); }
+        & .datepicker-two-month-header { display: flex; align-items: center; justify-content: space-between; height: var(--size-menuRow); }
+        & .datepicker-two-month-label { color: var(--fg-primary); font-size: var(--text-lg); line-height: 20px; font-weight: var(--weight-medium); }
 }
 .datepicker--visibleRange_week {
   

package/dist/tokens.css

@@ -108,8 +108,8 @@
   --size-tableRow: 36px;
   --size-tableHeader: 40px;
   --size-header: 48px;
-  --size-calendarCell: 48px;
-  --size-calendarPill: 42px;
+  --size-calendarCell: 34px;
+  --size-calendarPill: 32px;
   --text-xs: 11px;
   --text-sm: 12px;
   --text-md: 13px;

package/dist/tokens.json

@@ -195,8 +195,8 @@
     "tableRow": 36,
     "tableHeader": 40,
     "header": 48,
-    "calendarCell": 48,
-    "calendarPill": 42
+    "calendarCell": 34,
+    "calendarPill": 32
   },
   "text": {
     "xs": 11,

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

@@ -28,8 +28,8 @@ export declare const size: {
     readonly tableRow: "36px";
     readonly tableHeader: "40px";
     readonly header: "48px";
-    readonly calendarCell: "48px";
-    readonly calendarPill: "42px";
+    readonly calendarCell: "34px";
+    readonly calendarPill: "32px";
 };
 export declare const font: {
     readonly sans: '"Inter", system-ui, -apple-system, "Segoe UI", sans-serif';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crisp-ui-kit/crisp",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "description": "A lean React design system, measured pixel-for-pixel from Attio.",
   "license": "MIT",
   "type": "module",