@crisp-ui-kit/crisp 0.57.0 → 0.57.2

package/dist/esm/product/workspacegeneralsettings/workspacegeneralsettings.recipe.js

@@ -0,0 +1,48 @@
+import { defineRecipe, resolveRecipe } from "../../core/index.js";
+import { contract as c } from "../../tokens/index.js";
+// Measured live against app.attio.com/<workspace>/settings/workspace
+// (crisp#638, P-128). Logo tile + Name/Slug fields side by side, an
+// "Export workspace data" section (header row + Type/Date table + empty
+// state), and a "Danger zone" section (a red-tinted bordered row).
+const config = defineRecipe({
+    name: "workspacegeneralsettings",
+    base: `& .crisp-workspacegeneralsettings-page { display: flex; flex-direction: column; gap: ${c.space["6"]}; font-family: ${c.font.sans}; }
+    & .crisp-workspacegeneralsettings-heading { display: flex; flex-direction: column; gap: ${c.space["0.5"]}; }
+    & .crisp-workspacegeneralsettings-title { font-size: 24px; line-height: 28px; font-weight: ${c.weight.semibold}; letter-spacing: -0.48px; color: ${c.fgPrimary}; margin: 0; }
+    & .crisp-workspacegeneralsettings-desc { font-size: ${c.text.lg}; line-height: 20px; color: ${c.fgMuted}; margin: 0; }
+
+    & .crisp-workspacegeneralsettings-section { display: flex; flex-direction: column; gap: ${c.space["4"]}; }
+    & .crisp-workspacegeneralsettings-sectiontitle { font-size: 16px; line-height: 20px; font-weight: ${c.weight.semibold}; color: ${c.fgPrimary}; margin: 0; }
+    & .crisp-workspacegeneralsettings-sectionhead { display: flex; align-items: flex-start; justify-content: space-between; gap: ${c.space["4"]}; }
+    & .crisp-workspacegeneralsettings-sectionhead-text { display: flex; flex-direction: column; gap: ${c.space["1"]}; }
+
+    /* Logo row: a tile + helper text + "Upload logo" button. */
+    & .crisp-workspacegeneralsettings-logorow { display: flex; align-items: center; gap: ${c.space["4"]}; }
+    & .crisp-workspacegeneralsettings-logohelp { font-size: ${c.text.sm}; color: ${c.fgMuted}; }
+    & .crisp-workspacegeneralsettings-logotext { display: flex; flex-direction: column; align-items: flex-start; gap: ${c.space["1"]}; }
+
+    /* Name + Slug sit side by side, each ~half the content width. */
+    & .crisp-workspacegeneralsettings-fieldrow { display: flex; gap: ${c.space["4"]}; }
+    & .crisp-workspacegeneralsettings-fieldrow > * { flex: 1; min-width: 0; }
+    & .crisp-workspacegeneralsettings-slugfield { display: flex; align-items: center; gap: ${c.space["1.5"]}; }
+    & .crisp-workspacegeneralsettings-slugfield > :first-child { flex: 1; min-width: 0; }
+    & .crisp-workspacegeneralsettings-copybtn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; border: none; border-radius: ${c.radius.md}; background: none; font-family: inherit; color: ${c.fgMuted}; cursor: pointer; }
+    & .crisp-workspacegeneralsettings-copybtn:hover { background: ${c.bgRaised}; color: ${c.fgPrimary}; }
+
+    /* Export-data empty state -- measured: 14/500/63%-opacity, centred in a
+       40px row, no border of its own (the Table wrapper already draws it). */
+    & .crisp-workspacegeneralsettings-emptyrow { padding: ${c.space["2.5"]} ${c.space["4"]}; font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); text-align: center; }
+
+    /* Danger zone: a red-tinted bordered row, distinct from every other
+       card on the page. */
+    & .crisp-workspacegeneralsettings-dangerrow { display: flex; align-items: center; justify-content: space-between; gap: ${c.space["6"]}; padding: ${c.space["3"]} ${c.space["4"]}; border: 1px solid color-mix(in srgb, ${c.bgDanger} 30%, transparent); border-radius: 12px; background: color-mix(in srgb, ${c.bgDanger} 6%, transparent); }
+    & .crisp-workspacegeneralsettings-dangertext { display: flex; flex-direction: column; gap: ${c.space["1"]}; }
+    & .crisp-workspacegeneralsettings-rowtitle { font-size: ${c.text.lg}; font-weight: ${c.weight.medium}; color: ${c.fgPrimary}; }
+    & .crisp-workspacegeneralsettings-dangerwarning { font-size: ${c.text.sm}; font-weight: ${c.weight.medium}; color: color-mix(in srgb, ${c.fgPrimary} 63%, transparent); }
+  `,
+    variants: {},
+    defaultVariants: {},
+    compoundVariants: [],
+});
+export const workspacegeneralsettingsRecipe = resolveRecipe(config);
+export default config;

package/dist/esm/tokens/contract.js

@@ -1,5 +1,5 @@
 import { VAR_PREFIX } from "../core/namespace.js";
-import { font as fontScale, radius as radiusScale, size as sizeScale, space as spaceScale, text as textScale, weight as weightScale, } from "./scale.js";
+import { font as fontScale, radius as radiusScale, size as sizeScale, space as spaceScale, text as textScale, tracking as trackingScale, weight as weightScale, } from "./scale.js";
 import { semantic } from "./semantic.js";
 const kebab = (s) => s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 const toVar = (key) => `var(--${VAR_PREFIX}${kebab(key)})`;
@@ -16,4 +16,5 @@ export const contract = Object.assign(colors, {
     font: mapScale("font", fontScale),
     text: mapScale("text", textScale),
     weight: mapScale("weight", weightScale),
+    tracking: mapScale("tracking", trackingScale),
 });

package/dist/esm/tokens/elevation.js

@@ -12,9 +12,11 @@ import { contract as c } from "./contract.js";
  */
 export const elevation = {
     /**
-     * Tier 1 — anything floating and *attached*: menus, popovers, dropdowns,
+     * Tier 1 — anything floating and *attached*: popovers, dropdowns,
      * hover-preview cards, the floating sidebar, the record peek, drawers, the
      * bulk bar. Pairs with a 10–12px radius and, for panels, an 8px gutter.
+     * NOT `Menu` (your-moon/crisp#934) -- that moved to
+     * `selectFloating`, seed-design's own flat shadow, below.
      */
     floating: `inset 0 0 0 1px ${c.ringPopover}, 0 0 0 1px ${c.shadowPopover1}, 0 4px 8px -4px ${c.shadowPopover2}, 0 4px 12px -2px ${c.shadowPopover3}`,
     /**
@@ -57,10 +59,11 @@ export const elevation = {
      */
     fieldNoRing: `0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04)`,
     /**
-     * Select's own listbox shadow (crisp/#867) — seed-design's `$shadow.s3`, a
-     * single layer, NOT `floating` above. This component follows seed, not
-     * Attio, for the same reason `DatePicker` follows seed's calendar
-     * structure: an explicit owner request to match seed-design exactly.
+     * Seed-design's own `$shadow.s3`, a single flat layer, NOT `floating`
+     * above. Originally Select's own listbox shadow (crisp/#867); also `Menu`'s
+     * (your-moon/crisp#934) -- the raw seed dump confirms Menu
+     * is the one component seed's own spec gives a shadow to at all, and it's
+     * this exact value. Despite the name, not exclusive to Select.
      */
     selectFloating: `0 4px 16px ${c.shadowSelect}`,
 };

package/dist/esm/tokens/palette.js

@@ -5,9 +5,14 @@ export const 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 /
@@ -19,8 +24,11 @@ export const 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
@@ -55,14 +63,34 @@ export const palette = {
     ringBrandSoft: { light: "#d6e5ff", dark: "#212224" },
     tileActive: { light: "#ffffff", dark: "#101112" },
     tileActiveShadow: { light: "rgba(0,0,0,0.04)", dark: "rgba(0,0,0,0)" },
-    // Dialog's page-dimming backdrop (crisp#677) — measured live behind the
-    // Create-attribute FormDialog, both themes: `rgba(0,0,0,.25)` light,
-    // `rgba(0,0,0,.55)` dark. `Dialog`'s own backdrop had shipped fully
-    // `transparent` (AUTHORING's Lesson 14 measured the command palette has
-    // NO dark backdrop and that got generalized to every `Dialog`, which this
-    // corrects — the palette is a different surface from a plain content
-    // dialog and really does dim the page).
-    bgScrim: { light: "rgba(0,0,0,0.25)", dark: "rgba(0,0,0,0.55)" },
+    // Dialog's page-dimming backdrop (crisp#677, Attio's own measured value:
+    // `rgba(0,0,0,.25)` light, `rgba(0,0,0,.55)` dark — `Dialog`'s own backdrop
+    // had shipped fully `transparent`, AUTHORING's Lesson 14 measured the
+    // command palette has NO dark backdrop and that got generalized to every
+    // `Dialog`, which this corrected).
+    //
+    // your-moon/crisp#934: light theme moved to seed-design's own scrim
+    // (`#00000074` ≈ 45% black, `bg.overlay`) — the owner's flat-dialog
+    // directive names "seed's own scrim" specifically, now that elevation is
+    // conveyed by the scrim alone (no more frosted-glass shadow/blur). Dark
+    // theme's `.55` is UNCHANGED: seed's own token system has no separate
+    // dark-theme scrim value to adopt, and `.55` wasn't found wrong -- only
+    // light had a sourced replacement value to move to.
+    bgScrim: { light: "rgba(0,0,0,0.45)", dark: "rgba(0,0,0,0.55)" },
+    // seed-design's `$color.bg.overlay` (BottomSheet/MenuSheet's own backdrop,
+    // crisp#911) — kept as its OWN token rather than folded into `bgScrim`
+    // above, even though #934 (landed after this one was added) moved
+    // `bgScrim`'s LIGHT value to the same `#00000074`: `bgOverlayStrong` is
+    // seed's literally theme-CONSTANT value (`color.yaml` gives the same hex
+    // for both `theme-light` and `theme-dark`), while `bgScrim` still differs
+    // by theme (`.45`/`.55`) -- the two tokens express different design
+    // decisions that currently coincide in one theme only.
+    bgOverlayStrong: { light: "#00000074", dark: "#00000074" },
+    // seed-design's `$color.stroke.neutral-muted` (MenuSheet group divider,
+    // crisp#911) -- a faint alpha hairline between grouped rows, theme-flipping
+    // (`color.yaml`: `static-black-alpha-300` light / `static-white-alpha-100`
+    // dark).
+    strokeGroupDivider: { light: "#00000010", dark: "#ffffff17" },
     // The discard-confirm's description line (crisp#677, `Dialog`'s new
     // `variant="alert"`) — measured live, both themes, over `popoverBg`: a
     // theme-relative alpha rather than a flat gray, so it stays legible if
@@ -81,25 +109,54 @@ export const 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.
@@ -119,8 +176,25 @@ export const 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/esm/tokens/scale.js

@@ -26,13 +26,23 @@ export const space = {
 // Corner radius. sm/md/lg are the three used on stacked surfaces
 // (inputs, rows, tiles); full is the pill.
 export const radius = {
-    chip: "7px", // tag / chip corner — the single most used radius
+    xs: "4px", // seed-design's $radius.r1 — small badge / checkbox box corner
+    // your-moon/crisp#919: was `7px` (Attio's own most-measured
+    // radius, 70 occurrences) -- now a pill, matching seed-design's own
+    // `chip.yaml` (`$radius.full` at every size, no size-based radius step at
+    // all, unlike Button/Badge). Same numeric value as `full` below, kept as
+    // its own named token because every one of this token's ~9 consumers
+    // (Chip, DataTable/RecordPage/RecordsTable/MultiSelect's own tag/mention
+    // rules, TableToolbar/DatePickerField's date-preset chips) reasons about
+    // "the chip corner" as its own concept, not literally "a generic pill".
+    chip: "999px",
     sm: "6px", // chips, badges
     md: "8px", // inputs, search box
     lg: "9px", // rows, tiles, list items
     xl: "12px", // overlay items (command rows)
     "2xl": "16px", // overlay panels (command surface)
     "3xl": "20px", // seed-design's $radius.r5 — Select's listbox corner (crisp/#867)
+    "4xl": "24px", // seed-design's $radius.r6 — BottomSheet's top corner radius (crisp/#911)
     full: "999px", // pills
 };
 // Component sizing — recurring measured dimensions that are neither spacing nor
@@ -84,3 +94,36 @@ export const weight = {
     semibold: "600",
     bold: "700", // seed-design's font-weight-bold, for the seed-styled calendar
 };
+// Size-based letter-spacing ramp for DISPLAY/HEADING type (18px and up —
+// `text.*` above tops out at 16px and stays untracked). crisp's five
+// already-shipped headings tighten as they grow — authshell 20px/-0.4px (2%
+// of size), objectsettings 24px/-0.48px (2%), richtext 32px/-0.6px (1.875%)
+// — all Attio-measured (Inter) and left exactly as they are; this token
+// never touches them, or the button (-0.07px) / table-cell (-0.14px)
+// tracking, which are body sizes, not display type. (statcard's 28px/-0.4px,
+// 1.43%, is a looser outlier — it sets tabular numerals, not prose — and is
+// also left alone.)
+//
+// crisp#909: the study at docs/study/korean/ observed that Naver and Kakao
+// both tighten tracking as type gets bigger, and crisp's OWN large type
+// (EmptyState's 20px title, Dialog's 18px alert title, and any future
+// heading) had no tracking at all — it read as default, not set. The study
+// supplied the PATTERN only, never a number: Naver/Kakao's own values are
+// Korean-specific and were not copied. The numbers below come from rendering
+// real Mongolian Cyrillic ("Эрсдэлийн бүртгэл", "Хяналтын самбар") in VK Sans
+// Display — crisp's own font override, see `font.sans` above — at every
+// display size crisp uses today (18/20/24/26/28/32px), screenshotting six
+// candidates per size (0%, 1%, 1.5%, 2%, 2.5%, 3% of the font-size) and
+// checking for glyph collision. None collided even at 3%, so the pre-existing
+// 2%-of-size rule the five Attio headings already happen to follow was kept
+// as the ramp, rounded to the nearest 0.01px — it reads as deliberately set
+// with headroom to spare, and keeps new display type visually consistent
+// with the Attio-measured headings already shipped.
+export const tracking = {
+    "18": "-0.36px",
+    "20": "-0.4px",
+    "24": "-0.48px",
+    "26": "-0.52px",
+    "28": "-0.56px",
+    "32": "-0.64px",
+};

package/dist/esm/tokens/semantic.js

@@ -1,6 +1,17 @@
 export const semantic = {
     bgBrandSolid: "brand600",
     bgBrandSolidPressed: "brand700",
+    /** your-moon/crisp#897: the AA-safe darker sibling of `bgBrandSolid` — a
+     * SOLID fill carrying white text (Button primary, Badge solid+brand,
+     * Avatar's brand tone). `bgBrandSolid` itself stays the exact brand
+     * accent (focus rings, selected states, icons, tints), unpaired with
+     * white text anywhere that matters for contrast. */
+    bgBrandContrast: "brandContrast",
+    /** your-moon/crisp#897: brand-coloured TEXT sitting on a white page
+     * (TextLink/Text's `brand` tone) — same value as `bgBrandContrast`,
+     * named separately because one's a background and one's a foreground,
+     * matching every other fg/bg pair in this file. */
+    fgBrandContrast: "brandContrast",
     fgOnBrand: "white",
     // 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
@@ -27,6 +38,8 @@ export const semantic = {
     bgTileActive: "tileActive",
     shadowTileActive: "tileActiveShadow",
     bgScrim: "bgScrim",
+    bgOverlayStrong: "bgOverlayStrong",
+    strokeGroupDivider: "strokeGroupDivider",
     fgAlertDescription: "fgAlertDescription",
     bgOverlayFrost: "overlayFrost",
     shadowOverlay1: "shadowOverlay1",
@@ -38,6 +51,15 @@ export const 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. */
@@ -63,6 +85,10 @@ export const semantic = {
     strokeFocusRing: "focusRing",
     bgSuccess: "green600",
     bgWarning: "amber600",
+    /** A SOLID warning fill (Badge's `variant="solid" tone="warning"`) — seed's
+     * own warning-solid is a distinct, paler yellow, not `bgWarning` tinted
+     * lighter. See `amberSolid` in palette.ts. */
+    bgWarningSolid: "amberSolid",
     bgOrange: "orange600",
     bgCyan: "cyan600",
     bgPurple: "purple600",

package/dist/fileupload.css

@@ -25,7 +25,9 @@
     & .crisp-fileupload-remove:hover { color: var(--crisp-fg-primary); }
     & .crisp-fileupload-remove:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
     & .crisp-fileupload-errors { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); margin: 0; padding: 0; list-style: none; }
-    /* out of flow while empty, so the always-mounted live region costs no layout: display:none would take it out of the accessibility tree, which is the one thing it exists to be in */
+    /* out of flow while empty, so the always-mounted live region costs no
+       layout: display:none would take it out of the accessibility tree, which
+       is the one thing it exists to be in */
     & .crisp-fileupload-errors:empty { position: absolute; }
     & .crisp-fileupload-error { color: var(--crisp-bg-danger); font-size: var(--crisp-text-md); line-height: 18px; }
 }

package/dist/fileupload.layered.css

@@ -26,7 +26,9 @@
     & .crisp-fileupload-remove:hover { color: var(--crisp-fg-primary); }
     & .crisp-fileupload-remove:focus-visible { outline-color: var(--crisp-stroke-focus-ring); }
     & .crisp-fileupload-errors { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); margin: 0; padding: 0; list-style: none; }
-    /* out of flow while empty, so the always-mounted live region costs no layout: display:none would take it out of the accessibility tree, which is the one thing it exists to be in */
+    /* out of flow while empty, so the always-mounted live region costs no
+       layout: display:none would take it out of the accessibility tree, which
+       is the one thing it exists to be in */
     & .crisp-fileupload-errors:empty { position: absolute; }
     & .crisp-fileupload-error { color: var(--crisp-bg-danger); font-size: var(--crisp-text-md); line-height: 18px; }
 }

package/dist/input.css

@@ -1,11 +1,20 @@
 .crisp-input {
-  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-field); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px;
+  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; background: var(--crisp-bg-surface); border: 1px solid var(--crisp-border-default); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px;
     &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; transition: border-color .1s ease; pointer-events: none; }
     &:focus-within::after { border-color: var(--crisp-stroke-field-focus); }
     & .crisp-input-value { box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%; align-self: stretch; margin: 0; border: none; background: none; outline: none; font: inherit; color: var(--crisp-fg-primary); }
     & .crisp-input-value::placeholder { color: var(--crisp-fg-muted); }
     & .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.
+       `border-color: transparent` neutralises #910's new real rest border
+       so this measured ring isn't drawn twice. */
+    &[data-readonly] { background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); border-color: transparent; box-shadow: inset 0 0 0 1px var(--crisp-ring-field); }
+    & .crisp-input-suffix { flex-shrink: 0; margin-inline-start: var(--crisp-space-1); }
 }
 .crisp-input--size_sm {
   height: var(--crisp-size-row); border-radius: var(--crisp-radius-md);
@@ -16,7 +25,7 @@
     & .crisp-input-value { padding-inline: var(--crisp-space-2-5); }
 }
 .crisp-input--size_large {
-  height: 36px; border-radius: 10px;
+  height: 36px; border-radius: var(--crisp-radius-xl);
     & .crisp-input-value { padding-inline: var(--crisp-space-3); }
 }
 .crisp-input--invalid_true {

package/dist/input.layered.css

@@ -1,12 +1,21 @@
 @layer crisp-components {
 .crisp-input {
-  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-field); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px;
+  position: relative; box-sizing: border-box; display: inline-flex; align-items: center; width: 100%; background: var(--crisp-bg-surface); border: 1px solid var(--crisp-border-default); font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); line-height: 20px;
     &::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid transparent; transition: border-color .1s ease; pointer-events: none; }
     &:focus-within::after { border-color: var(--crisp-stroke-field-focus); }
     & .crisp-input-value { box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%; align-self: stretch; margin: 0; border: none; background: none; outline: none; font: inherit; color: var(--crisp-fg-primary); }
     & .crisp-input-value::placeholder { color: var(--crisp-fg-muted); }
     & .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.
+       `border-color: transparent` neutralises #910's new real rest border
+       so this measured ring isn't drawn twice. */
+    &[data-readonly] { background: color-mix(in srgb, var(--crisp-fg-primary) 2%, transparent); border-color: transparent; box-shadow: inset 0 0 0 1px var(--crisp-ring-field); }
+    & .crisp-input-suffix { flex-shrink: 0; margin-inline-start: var(--crisp-space-1); }
 }
 .crisp-input--size_sm {
   height: var(--crisp-size-row); border-radius: var(--crisp-radius-md);
@@ -17,7 +26,7 @@
     & .crisp-input-value { padding-inline: var(--crisp-space-2-5); }
 }
 .crisp-input--size_large {
-  height: 36px; border-radius: 10px;
+  height: 36px; border-radius: var(--crisp-radius-xl);
     & .crisp-input-value { padding-inline: var(--crisp-space-3); }
 }
 .crisp-input--invalid_true {

package/dist/listpage.css

@@ -5,7 +5,9 @@
     & .crisp-listpage-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); white-space: nowrap; }
     /* #641: trailing (View settings / New) has to reach the toolbar's own
        inline-end edge on its own -- the only thing pushing it there used
-       to be .crisp-listpage-count's margin-inline-start: auto, which a consumer with no count badge (TasksTable, measured live: trailing sat right after leading, nowhere near the row's own right edge)
+       to be .crisp-listpage-count's margin-inline-start: auto, which a
+       consumer with no count badge (TasksTable, measured live: trailing
+       sat right after leading, nowhere near the row's own right edge)
        never renders. A bare margin-inline-start: auto here is safely
        overridden by the more specific rule right below whenever count IS
        present, so the two cases don't fight -- count's own auto margin

package/dist/listpage.layered.css

@@ -6,7 +6,9 @@
     & .crisp-listpage-count { margin-inline-start: auto; font-size: var(--crisp-text-md); color: var(--crisp-fg-muted); white-space: nowrap; }
     /* #641: trailing (View settings / New) has to reach the toolbar's own
        inline-end edge on its own -- the only thing pushing it there used
-       to be .crisp-listpage-count's margin-inline-start: auto, which a consumer with no count badge (TasksTable, measured live: trailing sat right after leading, nowhere near the row's own right edge)
+       to be .crisp-listpage-count's margin-inline-start: auto, which a
+       consumer with no count badge (TasksTable, measured live: trailing
+       sat right after leading, nowhere near the row's own right edge)
        never renders. A bare margin-inline-start: auto here is safely
        overridden by the more specific rule right below whenever count IS
        present, so the two cases don't fight -- count's own auto margin

package/dist/memberssettings.css

@@ -0,0 +1,67 @@
+.crisp-memberssettings {
+  & .crisp-memberssettings-page { display: flex; flex-direction: column; gap: var(--crisp-space-6); font-family: var(--crisp-font-sans); }
+    & .crisp-memberssettings-heading { display: flex; flex-direction: column; gap: var(--crisp-space-0-5); }
+    & .crisp-memberssettings-title { font-size: 24px; line-height: 28px; font-weight: var(--crisp-weight-semibold); letter-spacing: -0.48px; color: var(--crisp-fg-primary); margin: 0; }
+    & .crisp-memberssettings-desc { font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-muted); margin: 0; }
+    /* Segmented Members/Teams switcher -- measured: 28px pills, radius 8,
+       4px gap, 6px icon-label gap, 14/500 label, selected bg bgSubtle +
+       inset borderSubtle ring, unselected transparent + a flat 63%-opacity
+       fgPrimary mix (measured rgba(0,0,0,.63) on the live page, not the
+       solid fgMuted token — same alpha technique this file's table header
+       already uses). */
+    & .crisp-memberssettings-tabpair { display: inline-flex; align-items: center; gap: 4px; }
+    & .crisp-memberssettings-tab { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 28px; padding: 0 var(--crisp-space-2); border: none; border-radius: var(--crisp-radius-md); background: none; box-shadow: inset 0 0 0 1px transparent; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); cursor: pointer; white-space: nowrap; transition: color .12s ease, background-color .12s ease, box-shadow .12s ease; }
+    & .crisp-memberssettings-tab svg { flex-shrink: 0; }
+    & .crisp-memberssettings-tab:hover:not([data-selected]) { color: var(--crisp-fg-primary); }
+    & .crisp-memberssettings-tab[data-selected] { color: var(--crisp-fg-primary); background: var(--crisp-bg-subtle); box-shadow: inset 0 0 0 1px var(--crisp-border-subtle); }
+    & .crisp-memberssettings-tab:focus-visible { outline: 2px solid var(--crisp-bg-brand-solid); outline-offset: 1px; }
+    /* Toolbar row: search grows, Filter + Invite sit trailing -- measured
+       32px height on all three, search radius 9 with a 6% ink ring,
+       Filter/Invite radius 9 with the button drop-shadow pairing. */
+    & .crisp-memberssettings-toolbar { display: flex; align-items: center; gap: var(--crisp-space-2); }
+    & .crisp-memberssettings-search { display: flex; align-items: center; flex: 1; min-width: 0; gap: var(--crisp-space-1-5); height: 32px; padding: 0 var(--crisp-space-2-5) 0 var(--crisp-space-2); border-radius: 9px; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crisp-fg-primary) 6%, transparent); color: var(--crisp-fg-muted); }
+    & .crisp-memberssettings-search:focus-within { box-shadow: inset 0 0 0 1px var(--crisp-bg-brand-solid); }
+    & .crisp-memberssettings-search input { flex: 1; min-width: 0; border: none; outline: none; background: none; font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); }
+    & .crisp-memberssettings-search input::placeholder { color: var(--crisp-fg-muted); }
+    & .crisp-memberssettings-filterbtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 32px; padding: 6px 10px 6px 8px; border: none; border-radius: 9px; background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px transparent, 0 0 2px 0 rgba(28,40,64,.18), 0 1px 3px 0 rgba(0,0,0,.04); color: var(--crisp-fg-primary); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); cursor: pointer; white-space: nowrap; }
+    & .crisp-memberssettings-filterbtn:hover { background: var(--crisp-bg-raised); }
+    /* your-moon/crisp#979: bgBrandContrast, not bgBrandSolid -- the accent
+       (#0298d9) only clears 3.23:1 with white; the darker sibling clears
+       4.5:1+, same fix already applied to Button/Badge/Avatar (#897) and
+       TableToolbar/Dialog/Command/Comments/AuthShell (#953/#961), which
+       explicitly flagged this button as found-not-fixed. */
+    & .crisp-memberssettings-invitebtn { display: inline-flex; align-items: center; gap: var(--crisp-space-1-5); height: 32px; padding: 6px 10px 6px 8px; border: none; border-radius: 9px; background: var(--crisp-bg-brand-contrast); box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 2px 4px -2px color-mix(in srgb, var(--crisp-bg-brand-contrast) 12%, transparent), 0 3px 6px -2px color-mix(in srgb, var(--crisp-bg-brand-contrast) 8%, transparent); color: var(--crisp-fg-on-brand); font-family: inherit; font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); cursor: pointer; white-space: nowrap; }
+    & .crisp-memberssettings-invitebtn:hover { filter: brightness(0.95); }
+    /* Table wrapper -- measured card: radius 12, 1px borderSubtle, 40px
+       rows, header label 12/500/63%-opacity fgPrimary. */
+    & .crisp-memberssettings-table-wrap { border-radius: 12px; border: 1px solid var(--crisp-border-subtle); overflow: hidden; }
+    & .crisp-memberssettings-table { width: 100%; border-collapse: collapse; font-family: inherit; }
+    & .crisp-memberssettings-table th { height: 32px; padding: 0 var(--crisp-space-4); text-align: start; font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); border-bottom: 1px solid var(--crisp-border-subtle); background: var(--crisp-bg-surface); }
+    & .crisp-memberssettings-table td { height: 40px; padding: 0 var(--crisp-space-4); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-primary); border-bottom: 1px solid var(--crisp-border-subtle); }
+    & .crisp-memberssettings-table tr:last-child td { border-bottom: none; }
+    & .crisp-memberssettings-user { display: flex; align-items: center; gap: var(--crisp-space-2); }
+    & .crisp-memberssettings-avatarimg { width: 24px; height: 24px; border-radius: var(--crisp-radius-full); object-fit: cover; }
+    /* Name + email sit on ONE line, not stacked -- confirmed live: both spans
+       share the same y and the same 14px size, only the email's colour
+       differs (a flat 63%-opacity fgPrimary mix, not a smaller muted font). */
+    & .crisp-memberssettings-usermeta { display: flex; align-items: baseline; gap: var(--crisp-space-2); min-width: 0; }
+    & .crisp-memberssettings-usermeta > span:first-child { flex-shrink: 0; }
+    & .crisp-memberssettings-useremail { font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-regular); color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    & .crisp-memberssettings-kebab { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-inline-start: auto; border: none; border-radius: var(--crisp-radius-sm); background: none; font-family: inherit; color: var(--crisp-fg-muted); cursor: pointer; }
+    & .crisp-memberssettings-kebab:hover { background: var(--crisp-bg-raised); color: var(--crisp-fg-primary); }
+    & .crisp-memberssettings-teamspanel { display: flex; align-items: center; justify-content: center; padding: var(--crisp-space-8) 0; color: var(--crisp-fg-muted); font-size: var(--crisp-text-lg); }
+    /* Invite dialog fields -- measured 708x386 dialog, radius 16; the
+       "Invite as"/"Add to team" selects are 32/34px with a flat 1px
+       6%-ink border and 9/10px radius respectively (Attio's own two
+       selects don't share one radius). */
+    & .crisp-memberssettings-invitefield { display: flex; flex-direction: column; gap: var(--crisp-space-1-5); }
+    & .crisp-memberssettings-invitelabel { font-size: var(--crisp-text-sm); font-weight: var(--crisp-weight-medium); color: var(--crisp-fg-muted); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crisp-memberssettings, .crisp-memberssettings * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/memberssettings.d.ts

@@ -0,0 +1,7 @@
+import type { RecipeFn } from "../core/types";
+
+export interface MemberssettingsVariants {
+
+}
+
+export declare const memberssettingsRecipe: RecipeFn<{  }>;