@crisp-ui-kit/crisp 0.7.2 → 0.7.4

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

@@ -31,12 +31,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.avatarRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        lg: {
-            height: "24px",
-            fontSize: "12px",
-            fontWeight: "600",
-        },
-    },
 });
 exports.default = config;

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

@@ -56,13 +56,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.badgeRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        medium: {
-            height: "20px",
-            borderRadius: "6px",
-            fontSize: "12px",
-            fontWeight: "500",
-        },
-    },
 });
 exports.default = config;

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

@@ -44,15 +44,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.buttonRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        primary: {
-            height: "28px",
-            borderRadius: "8px",
-            fontWeight: "500",
-            fontSize: "14px",
-            background: "rgb(38, 109, 240)",
-            color: "rgb(255, 255, 255)",
-        },
-    },
 });
 exports.default = config;

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

@@ -24,11 +24,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.checkboxRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        box: {
-            size: "16px",
-            borderRadius: "6px",
-        },
-    },
 });
 exports.default = config;

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/input/input.recipe.js

@@ -54,6 +54,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.inputRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: { medium: { height: "32px", borderRadius: "8px", fontSize: "14px" } },
 });
 exports.default = config;

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

@@ -12,12 +12,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.kbdRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        chip: {
-            height: "20px",
-            borderRadius: "6px",
-            fontSize: "11px",
-        },
-    },
 });
 exports.default = config;

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

@@ -24,6 +24,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.switchRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: { track: { width: "24px", height: "16px" }, thumb: { size: "12px" } },
 });
 exports.default = config;

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

@@ -90,6 +90,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.wheelpickerRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: { medium: { height: "220px", itemHeight: "44px" } },
 });
 exports.default = config;

package/dist/cjs/product/appshell/appshell.recipe.js

@@ -25,6 +25,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.appshellRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: { sidebar: { defaultWidth: "275px" } },
 });
 exports.default = config;

package/dist/cjs/product/command/command.recipe.js

@@ -37,11 +37,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.commandRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        content: {
-            maxWidth: "720px",
-            borderRadius: "16px",
-        },
-    },
 });
 exports.default = config;

package/dist/cjs/product/navitem/navitem.recipe.js

@@ -24,13 +24,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.navitemRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        row: {
-            height: "28px",
-            borderRadius: "9px",
-            fontSize: "14px",
-            fontWeight: "500",
-        },
-    },
 });
 exports.default = config;

package/dist/cjs/product/recordpanel/recordpanel.recipe.js

@@ -46,6 +46,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.recordpanelRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: { panel: { width: "420px" } },
 });
 exports.default = config;

package/dist/cjs/product/recordstable/recordstable.recipe.js

@@ -97,11 +97,21 @@ ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("recordstable")}
     & .recordstable-col-check { width: 40px; min-width: 40px; padding: 0; }
     & .recordstable-check-inner { display: flex; align-items: center; justify-content: center; height: 100%; }
     & .recordstable-col-check, & .recordstable-col-entity { position: sticky; z-index: 3; background: ${tokens_1.contract.bgSurface}; }
-    & .recordstable-col-check { left: 0; }
-    & .recordstable-col-entity { left: 40px; clip-path: inset(0 -38px 0 0); transition: box-shadow .2s ease; }
+    /* The sticky pin is a LOGICAL offset: with physical \`left\` these columns
+       were not pinned at all under RTL -- scrolled, they left the viewport
+       entirely (measured: viewport 13..773, check column at x=1333). Nothing in
+       JS measures these, so converting them is safe; the two properties below
+       that have no logical form get an explicit RTL rule rather than being
+       left to point the wrong way. */
+    & .recordstable-col-check { inset-inline-start: 0; }
+    & .recordstable-col-entity { inset-inline-start: 40px; clip-path: inset(0 -38px 0 0); transition: box-shadow .2s ease; }
+    [dir="rtl"] & .recordstable-col-entity { clip-path: inset(0 0 0 -38px); }
     & thead .recordstable-col-check, & thead .recordstable-col-entity { z-index: 4; }
     /* soft shadow on the sticky column edge once the grid is scrolled horizontally */
     & .recordstable-scroll[data-scrolled] .recordstable-col-entity { box-shadow: 6px 0 16px 4px rgba(0,0,0,0.12); }
+    /* box-shadow has no logical form either: the bleed follows the scrolled
+       content, which is the opposite side under RTL. */
+    [dir="rtl"] & .recordstable-scroll[data-scrolled] .recordstable-col-entity { box-shadow: -6px 0 16px 4px rgba(0,0,0,0.12); }
     /* AI-enriched values carry a purple wash. Measured from Attio:
        a full-bleed overlay at #9b69ff 4% (== bgPurple), composited OVER
        whatever row-state background the cell already has, which is why it
@@ -142,11 +152,5 @@ ${(0, tabletoolbar_chrome_1.toolbarChromeBody)("recordstable")}
 });
 exports.recordstableRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        row: {
-            height: "36px",
-            gridLine: "1px",
-        },
-    },
 });
 exports.default = config;

package/dist/cjs/product/sidebar/sidebar.recipe.js

@@ -37,10 +37,5 @@ const config = (0, core_1.defineRecipe)({
 });
 exports.sidebarRecipe = Object.assign((0, core_1.resolveRecipe)(config), {
     config,
-    meta: {
-        container: {
-            width: "275px",
-        },
-    },
 });
 exports.default = config;

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/avatar/avatar.recipe.js

@@ -28,12 +28,5 @@ const config = defineRecipe({
 });
 export const avatarRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: {
-        lg: {
-            height: "24px",
-            fontSize: "12px",
-            fontWeight: "600",
-        },
-    },
 });
 export default config;

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

@@ -53,13 +53,5 @@ const config = defineRecipe({
 });
 export const badgeRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: {
-        medium: {
-            height: "20px",
-            borderRadius: "6px",
-            fontSize: "12px",
-            fontWeight: "500",
-        },
-    },
 });
 export default config;

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

@@ -41,15 +41,5 @@ const config = defineRecipe({
 });
 export const buttonRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: {
-        primary: {
-            height: "28px",
-            borderRadius: "8px",
-            fontWeight: "500",
-            fontSize: "14px",
-            background: "rgb(38, 109, 240)",
-            color: "rgb(255, 255, 255)",
-        },
-    },
 });
 export default config;

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

@@ -21,11 +21,5 @@ const config = defineRecipe({
 });
 export const checkboxRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: {
-        box: {
-            size: "16px",
-            borderRadius: "6px",
-        },
-    },
 });
 export default config;

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/input/input.recipe.js

@@ -51,6 +51,5 @@ const config = defineRecipe({
 });
 export const inputRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: { medium: { height: "32px", borderRadius: "8px", fontSize: "14px" } },
 });
 export default config;

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

@@ -9,12 +9,5 @@ const config = defineRecipe({
 });
 export const kbdRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: {
-        chip: {
-            height: "20px",
-            borderRadius: "6px",
-            fontSize: "11px",
-        },
-    },
 });
 export default config;

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

@@ -21,6 +21,5 @@ const config = defineRecipe({
 });
 export const switchRecipe = Object.assign(resolveRecipe(config), {
     config,
-    meta: { track: { width: "24px", height: "16px" }, thumb: { size: "12px" } },
 });
 export default config;