@crisp-ui-kit/crisp 0.52.4 → 0.52.5

package/dist/table.layered.css

@@ -3,7 +3,9 @@
   display: block; box-sizing: border-box; background: var(--crisp-bg-surface);
     & .crisp-table-scroll { overflow-x: auto; }
     & table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--crisp-font-sans); font-size: var(--crisp-text-lg); color: var(--crisp-fg-primary); }
-    & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-2); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    /* #465: 12px, not crisp's old 8px -- measured on a live header cell
+       (padding: 0 12px) and independently on a body cell's text inset (getBoundingClientRect delta from the cell edge). Matches ColumnCalc's own already-correct 12px trigger inset. */
+    & th, & td { position: relative; height: var(--crisp-size-tableRow); padding: 0 var(--crisp-space-3); border-bottom: 1px solid var(--crisp-border-subtle); border-inline-end: 1px solid var(--crisp-border-subtle); text-align: start; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
     & th { height: var(--crisp-size-tableHeader); background: var(--crisp-bg-surface); border-top: 1px solid var(--crisp-border-subtle); font-size: var(--crisp-text-lg); font-weight: var(--crisp-weight-medium); letter-spacing: -0.14px; color: color-mix(in srgb, var(--crisp-fg-primary) 63%, transparent); user-select: none; }
     & td { color: var(--crisp-fg-primary); background: var(--crisp-bg-surface); }
     & th:last-child, & td:last-child { border-inline-end: none; }

package/dist/textarea.css

@@ -1,6 +1,6 @@
 .crisp-textarea {
   position: relative; display: block; width: 100%; font-family: var(--crisp-font-sans);
-    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-2-5) 14px; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-2-5) 14px; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-field); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
     & .crisp-textarea-field::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
     /* seed-design's focus treatment, same as Input: a 2px ring on an ::after

package/dist/textarea.layered.css

@@ -1,7 +1,7 @@
 @layer crisp-components {
 .crisp-textarea {
   position: relative; display: block; width: 100%; font-family: var(--crisp-font-sans);
-    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-2-5) 14px; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-neutral), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
+    & .crisp-textarea-field { box-sizing: border-box; display: block; width: 100%; min-height: 80px; resize: vertical; margin: 0; padding: var(--crisp-space-2-5) 14px; border: none; border-radius: var(--crisp-radius-md); background: var(--crisp-bg-surface); box-shadow: inset 0 0 0 1px var(--crisp-ring-field); font-family: inherit; font-size: var(--crisp-text-lg); line-height: 20px; color: var(--crisp-fg-primary); outline: none; transition: box-shadow .15s ease; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
     & .crisp-textarea-field::placeholder { color: var(--crisp-fg-muted); }
     & .crisp-textarea-field:disabled { opacity: 0.5; cursor: not-allowed; }
     /* seed-design's focus treatment, same as Input: a 2px ring on an ::after

package/dist/tokens.css

@@ -8,6 +8,8 @@
   --crisp-border-default: #e4e4e7;
   --crisp-border-subtle: #eeeff1;
   --crisp-ring-neutral: transparent;
+  --crisp-ring-field: rgba(0,0,0,0.06);
+  --crisp-ring-switch: #d9dade;
   --crisp-bg-tile-active: #ffffff;
   --crisp-shadow-tile-active: rgba(0,0,0,0.04);
   --crisp-bg-overlay-frost: #ffffff;
@@ -55,6 +57,8 @@
   --crisp-border-default: #212224;
   --crisp-border-subtle: #1c1d1f;
   --crisp-ring-neutral: #212224;
+  --crisp-ring-field: #212224;
+  --crisp-ring-switch: #212224;
   --crisp-bg-tile-active: #101112;
   --crisp-shadow-tile-active: rgba(0,0,0,0);
   --crisp-bg-overlay-frost: #1c1d1f;

package/dist/tokens.json

@@ -10,6 +10,8 @@
       "borderDefault": "#e4e4e7",
       "borderSubtle": "#eeeff1",
       "ringNeutral": "transparent",
+      "ringField": "rgba(0,0,0,0.06)",
+      "ringSwitch": "#d9dade",
       "bgTileActive": "#ffffff",
       "shadowTileActive": "rgba(0,0,0,0.04)",
       "bgOverlayFrost": "#ffffff",
@@ -56,6 +58,8 @@
       "borderDefault": "#212224",
       "borderSubtle": "#1c1d1f",
       "ringNeutral": "#212224",
+      "ringField": "#212224",
+      "ringSwitch": "#212224",
       "bgTileActive": "#101112",
       "shadowTileActive": "rgba(0,0,0,0)",
       "bgOverlayFrost": "#1c1d1f",
@@ -103,6 +107,8 @@
       "line200": "#e4e4e7",
       "line100": "#eeeff1",
       "ringNeutral": "transparent",
+      "ringField": "rgba(0,0,0,0.06)",
+      "ringSwitch": "#d9dade",
       "tileActive": "#ffffff",
       "tileActiveShadow": "rgba(0,0,0,0.04)",
       "overlayFrost": "#ffffff",
@@ -148,6 +154,8 @@
       "line200": "#212224",
       "line100": "#1c1d1f",
       "ringNeutral": "#212224",
+      "ringField": "#212224",
+      "ringSwitch": "#212224",
       "tileActive": "#101112",
       "tileActiveShadow": "rgba(0,0,0,0)",
       "overlayFrost": "#1c1d1f",

package/dist/types/components/switch/switch.recipe.d.ts

@@ -24,6 +24,7 @@ declare const spec: {
             readonly margin: "0 2px";
             readonly borderRadius: `var(--${string})`;
             readonly background: "#fff";
+            readonly boxShadow: `0 0 0 1px var(--${string})`;
             readonly transition: "transform .2s ease";
         };
     }, {

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

@@ -10,6 +10,8 @@ export declare const contract: MapLeafNodes<{
     borderDefault: "line200";
     borderSubtle: "line100";
     ringNeutral: "ringNeutral";
+    ringField: "ringField";
+    ringSwitch: "ringSwitch";
     bgTileActive: "tileActive";
     shadowTileActive: "tileActiveShadow";
     bgOverlayFrost: "overlayFrost";

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

@@ -23,8 +23,16 @@ export declare const elevation: {
      */
     readonly modal: `0 8px 28px -6px var(--${string}), 0 18px 88px -4px var(--${string}), 0 0 1px var(--${string})`;
     /**
-     * The neutral/outlined control shadow — buttons, inputs, textareas, the
-     * sidebar search, record-page actions.
+     * The neutral/outlined BUTTON-CHROME shadow — real buttons only: the
+     * sidebar search trigger, record-page action buttons, table toolbar
+     * buttons. #466 corrects this doc comment's own former claim that it
+     * covers "inputs, textareas" too — it doesn't: a live Attio text field
+     * (Settings page, a real typed input) measures a single 1px ring, none of
+     * this token's glow/drop-shadow layers. Confirmed the other direction
+     * too — Attio's own white-filled chrome buttons ("Inbox", "Ask Attio",
+     * "All Companies" view chip) match this three-layer value exactly, so the
+     * token itself was right; only Input/Textarea's use of it was wrong. See
+     * `textField` below for the real field shadow.
      *
      * The two raw values **are** the measured value (Lessons 22 and 29) and
      * must stay raw. `rgba(0,0,0,0.04)` equals `tileActiveShadow`'s light value by
@@ -32,6 +40,13 @@ export declare const elevation: {
      * dark mode. Only the ring is theme-aware, via `ringNeutral`.
      */
     readonly field: `inset 0 0 0 1px var(--${string}), 0 0 2px rgba(28,40,64,0.18), 0 1px 3px rgba(0,0,0,0.04)`;
+    /**
+     * A real text-entry field (Input, Textarea) — measured live on Attio's
+     * Settings page: one 1px inset ring, nothing else (#466). Distinct from
+     * `field` above, which is button chrome and carries two extra shadow
+     * layers a typed field never has.
+     */
+    readonly textField: `inset 0 0 0 1px var(--${string})`;
     /**
      * The same control shadow **without** the theme-aware ring. Lesson 29 added
      * the ring to the neutral-button family but deliberately left `trialbanner`

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

@@ -31,6 +31,14 @@ export declare const palette: {
         readonly light: "transparent";
         readonly dark: "#212224";
     };
+    readonly ringField: {
+        readonly light: "rgba(0,0,0,0.06)";
+        readonly dark: "#212224";
+    };
+    readonly ringSwitch: {
+        readonly light: "#d9dade";
+        readonly dark: "#212224";
+    };
     readonly tileActive: {
         readonly light: "#ffffff";
         readonly dark: "#101112";

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

@@ -8,6 +8,8 @@ export declare const semantic: {
     borderDefault: "line200";
     borderSubtle: "line100";
     ringNeutral: "ringNeutral";
+    ringField: "ringField";
+    ringSwitch: "ringSwitch";
     bgTileActive: "tileActive";
     shadowTileActive: "tileActiveShadow";
     bgOverlayFrost: "overlayFrost";

package/package.json

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