@usefragments/ui 1.7.0 → 2.0.0

package/src/components/Checkbox/Checkbox.module.scss

@@ -21,8 +21,7 @@
   }
 
   &[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
+    @include disabled-state;
   }
 }
 
@@ -38,20 +37,26 @@
   flex-shrink: 0;
   box-sizing: border-box;
   margin-block-start: var(--_fui-boolean-mark-offset, 0);
-  background-color: var(--fui-field-bg, $fui-bg-elevated);
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-field-border, $fui-border-strong);
+  background-color: var(--fui-bg-primary, $fui-bg-primary);
+  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border-strong, $fui-border-strong);
   border-radius: var(--fui-checkbox-radius, var(--fui-radius-sm, #{$fui-radius-sm}));
   cursor: inherit;
+  @include high-contrast-outline;
 
   &:hover:not([data-disabled]) {
-    border-color: var(--fui-field-border-hover, $fui-text-tertiary);
+    border-color: var(--fui-text-tertiary, $fui-text-tertiary);
+  }
+
+  &:focus-visible {
+    @include field.focus-state;
   }
 
   &[data-checked],
   &[data-indeterminate] {
     background-color: var(--fui-control-checked-bg, $fui-color-accent);
     border-color: var(--fui-control-checked-border, $fui-color-accent);
-    box-shadow: inset 0 1px 0 color-mix(in srgb, white 24%, transparent);
+    box-shadow: inset 0 var(--fui-stroke-hairline, #{$fui-stroke-hairline}) 0
+      color-mix(in srgb, var(--fui-control-checked-color, #{$fui-color-on-accent}) 24%, transparent);
   }
 
   &[data-checked]:hover:not([data-disabled]),
@@ -61,13 +66,13 @@
   }
 
   &[data-invalid] {
-    border-color: var(--fui-color-danger-text, $fui-color-danger-text);
+    border-color: var(--fui-color-danger, $fui-color-danger);
   }
 
   &[data-invalid][data-checked],
   &[data-invalid][data-indeterminate] {
     background-color: var(--fui-color-danger-bg, $fui-color-danger-bg);
-    border-color: var(--fui-color-danger-text, $fui-color-danger-text);
+    border-color: var(--fui-color-danger, $fui-color-danger);
     box-shadow: inset 0 0 0 1px
       color-mix(in srgb, var(--fui-color-danger-text, #{$fui-color-danger-text}) 35%, transparent);
   }
@@ -161,11 +166,11 @@
 }
 
 // ============================================
-// Card variant: full-width clickable surface that mirrors the RadioGroup
-// card variant. Selection state is driven by `:has([data-checked])` so the
+// Outline variant: full-width bordered surface that mirrors the RadioGroup
+// outline variant. Selection state is driven by `:has([data-checked])` so the
 // styling reacts to the same control state the rest of the component uses.
 // ============================================
-.wrapperCard {
+.wrapperOutline {
   width: 100%;
   border-radius: var(--fui-radius-md, $fui-radius-md);
   border: var(--fui-stroke-hairline, 1px) solid var(--fui-border-default, $fui-border-default);
@@ -214,27 +219,6 @@
   }
 }
 
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
-@media (prefers-contrast: more) {
-  .checkbox {
-    border-color: var(--fui-text-primary, $fui-text-primary);
-    outline: var(--fui-stroke-hairline, 1px) solid var(--fui-text-primary, $fui-text-primary);
-    outline-offset: calc(-1 * var(--fui-stroke-default, 2px));
-
-    &[data-checked],
-    &[data-indeterminate] {
-      border-color: var(--fui-control-checked-border, $fui-color-accent);
-    }
-
-    &[data-invalid] {
-      border-color: var(--fui-color-danger-text, $fui-color-danger-text);
-    }
-  }
-}
-
 // ============================================
 // Accessibility: Reduced Motion
 // ============================================

package/src/components/Checkbox/index.tsx

@@ -38,13 +38,11 @@ export interface CheckboxProps extends Omit<
    * @default "md" */
   size?: "sm" | "md" | "lg";
   /**
-   * Visual variant.
-   * - `default`: inline checkbox next to a label (form-control style).
-   * - `card`: full-width clickable card with the checkbox tucked inside.
-   *   Useful for multi-select question lists, settings toggles, etc.
-   * @default "default"
+   * Chrome. Omit it for the inline checkbox next to a label (form-control
+   * style); `outline` renders a full-width bordered surface with the checkbox
+   * tucked inside — multi-select question lists, settings toggles, plan pickers.
    */
-  variant?: "default" | "card";
+  variant?: "outline";
   /** Label text */
   label?: string;
   /** Helper text shown below the label */
@@ -132,7 +130,7 @@ const CheckboxRoot = React.forwardRef<HTMLButtonElement, CheckboxProps>(function
     readOnly = false,
     required = false,
     size: sizeProp,
-    variant = "default",
+    variant,
     label,
     helperText,
     description,
@@ -169,7 +167,7 @@ const CheckboxRoot = React.forwardRef<HTMLButtonElement, CheckboxProps>(function
     .filter(Boolean)
     .join(" ");
 
-  const wrapperClasses = [styles.wrapper, variant === "card" && styles.wrapperCard, className]
+  const wrapperClasses = [styles.wrapper, variant === "outline" && styles.wrapperOutline, className]
     .filter(Boolean)
     .join(" ");
   const handleCheckedChange = onChange ?? onCheckedChange;

package/src/components/Chip/Chip.contract.json

@@ -9,7 +9,7 @@
   "exportName": "Chip",
   "propsSummary": [
     "children: node (required)",
-    "variant: filled|outlined|outline|soft (default: filled)",
+    "variant: solid|outline|soft (default: solid)",
     "size: xs|sm|md|lg (default: xs)",
     "selected: boolean (default: false)",
     "icon: node",
@@ -27,10 +27,10 @@
     },
     "variant": {
       "type": "enum",
-      "description": "Visual style variant",
-      "default": "filled",
+      "description": "Chrome family. solid is the tinted pill; outline is hairline-bordered; soft is info-tinted for a suggestion",
+      "default": "solid",
       "required": false,
-      "values": ["filled", "outlined", "outline", "soft"]
+      "values": ["solid", "outline", "soft"]
     },
     "size": {
       "type": "enum",
@@ -107,17 +107,17 @@
     {
       "name": "Variants",
       "description": "Tinted, hairline, and accent-soft chrome.",
-      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip variant=\"filled\">Filled</Chip>\n  <Chip variant=\"outlined\">Outlined</Chip>\n  <Chip variant=\"soft\">Soft</Chip>\n</Stack>"
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip variant=\"solid\">Solid</Chip>\n  <Chip variant=\"outline\">Outline</Chip>\n  <Chip variant=\"soft\">Soft</Chip>\n</Stack>"
     },
     {
       "name": "Sizes",
       "description": "xs for filter rows; larger sizes match taller field tracks.",
-      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" align=\"center\" wrap>\n  <Chip variant=\"outlined\" size=\"xs\">Extra small</Chip>\n  <Chip variant=\"outlined\" size=\"sm\">Small</Chip>\n  <Chip variant=\"outlined\" size=\"md\">Medium</Chip>\n  <Chip variant=\"outlined\" size=\"lg\">Large</Chip>\n</Stack>"
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" align=\"center\" wrap>\n  <Chip variant=\"outline\" size=\"xs\">Extra small</Chip>\n  <Chip variant=\"outline\" size=\"sm\">Small</Chip>\n  <Chip variant=\"outline\" size=\"md\">Medium</Chip>\n  <Chip variant=\"outline\" size=\"lg\">Large</Chip>\n</Stack>"
     },
     {
       "name": "Selected",
       "description": "All three variants share one selection treatment.",
-      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip selected>Filled</Chip>\n  <Chip variant=\"outlined\" selected>Outlined</Chip>\n  <Chip variant=\"soft\" selected>Soft</Chip>\n</Stack>"
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip selected>Solid</Chip>\n  <Chip variant=\"outline\" selected>Outline</Chip>\n  <Chip variant=\"soft\" selected>Soft</Chip>\n</Stack>"
     },
     {
       "name": "With Avatar",
@@ -127,7 +127,7 @@
     {
       "name": "With Remove",
       "description": "Trailing dismiss button clears the tag.",
-      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip variant=\"outlined\" onRemove={() => {}}>React</Chip>\n  <Chip variant=\"outlined\" selected onRemove={() => {}}>TypeScript</Chip>\n  <Chip variant=\"soft\" onRemove={() => {}}>SCSS</Chip>\n</Stack>"
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip variant=\"outline\" onRemove={() => {}}>React</Chip>\n  <Chip variant=\"outline\" selected onRemove={() => {}}>TypeScript</Chip>\n  <Chip variant=\"soft\" onRemove={() => {}}>SCSS</Chip>\n</Stack>"
     },
     {
       "name": "Chip Group",
@@ -142,7 +142,7 @@
     {
       "name": "Disabled",
       "description": "Dimmed and unreachable, selected or not.",
-      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip variant=\"outlined\" disabled>Disabled</Chip>\n  <Chip variant=\"outlined\" disabled selected>Disabled selected</Chip>\n</Stack>"
+      "code": "import { Stack } from '@/components/Stack';\n\n<Stack direction=\"row\" gap=\"sm\" wrap>\n  <Chip variant=\"outline\" disabled>Disabled</Chip>\n  <Chip variant=\"outline\" disabled selected>Disabled selected</Chip>\n</Stack>"
     }
   ],
   "relations": [
@@ -165,7 +165,7 @@
   "contract": {
     "propsSummary": [
       "children: ReactNode - chip label (required)",
-      "variant: filled|outlined|outline|soft - visual style",
+      "variant: solid|outline|soft - chrome family",
       "size: xs|sm|md|lg - chip size (xs by default)",
       "selected: boolean - selection state",
       "icon/avatar: ReactNode - leading visual",

package/src/components/Chip/Chip.module.scss

@@ -1,5 +1,6 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action";
 @use "../../recipes/layout";
 
@@ -13,7 +14,7 @@
 
   &:active:not(:disabled) {
     background-color: var(--fui-field-selection-bg-hover, $fui-bg-hover);
-    box-shadow: inset 0 0 0 var(--fui-stroke-hairline, 1px)
+    box-shadow: inset 0 0 0 var(--fui-stroke-hairline, #{$fui-stroke-hairline})
       var(--fui-field-selection-border, $fui-border-strong);
   }
 }
@@ -28,8 +29,8 @@
 }
 
 .withRemove {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
+  border-start-end-radius: var(--fui-radius-none, #{$fui-radius-none});
+  border-end-end-radius: var(--fui-radius-none, #{$fui-radius-none});
 }
 
 // Sizes
@@ -49,8 +50,8 @@
   @include action.size("lg");
 }
 
-// Variants
-.filled {
+// Variants — chrome only
+.solid {
   background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
   color: var(--fui-text-primary, $fui-text-primary);
 
@@ -67,10 +68,10 @@
   }
 }
 
-.outlined {
+.outline {
   background-color: transparent;
   color: var(--fui-text-primary, $fui-text-primary);
-  border: var(--fui-stroke-hairline, 1px) solid var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid var(--fui-border, $fui-border);
 
   &:hover:not(:disabled) {
     background-color: var(--fui-bg-hover, $fui-bg-hover);
@@ -110,23 +111,23 @@
   align-items: center;
 
   img {
-    width: var(--fui-icon-md, $fui-icon-md);
-    height: var(--fui-icon-md, $fui-icon-md);
+    inline-size: var(--fui-icon-md, $fui-icon-md);
+    block-size: var(--fui-icon-md, $fui-icon-md);
     border-radius: var(--fui-radius-full, $fui-radius-full);
     object-fit: cover;
   }
 
   .xs & {
     img {
-      width: var(--fui-icon-sm, $fui-icon-sm);
-      height: var(--fui-icon-sm, $fui-icon-sm);
+      inline-size: var(--fui-icon-sm, $fui-icon-sm);
+      block-size: var(--fui-icon-sm, $fui-icon-sm);
     }
   }
 
   .sm & {
     img {
-      width: var(--fui-icon-sm, $fui-icon-sm);
-      height: var(--fui-icon-sm, $fui-icon-sm);
+      inline-size: var(--fui-icon-sm, $fui-icon-sm);
+      block-size: var(--fui-icon-sm, $fui-icon-sm);
     }
   }
 }
@@ -149,13 +150,13 @@
   @include action.base;
 
   color: var(--fui-text-secondary, $fui-text-secondary);
-  border-top-right-radius: var(--fui-radius-full, $fui-radius-full);
-  border-bottom-right-radius: var(--fui-radius-full, $fui-radius-full);
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
+  border-start-end-radius: var(--fui-radius-full, $fui-radius-full);
+  border-end-end-radius: var(--fui-radius-full, $fui-radius-full);
+  border-start-start-radius: var(--fui-radius-none, #{$fui-radius-none});
+  border-end-start-radius: var(--fui-radius-none, #{$fui-radius-none});
   background-color: transparent;
-  border: var(--fui-stroke-hairline, 1px) solid transparent;
-  border-left-color: var(--fui-border, $fui-border);
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid transparent;
+  border-inline-start-color: var(--fui-border, $fui-border);
 
   .removableChip[data-size="xs"] & {
     @include action.icon-only("micro");
@@ -180,7 +181,7 @@
 
 // Match remove button visuals to chip variant/state so the compound control
 // remains visually coherent across seeds/themes.
-.filled + .remove {
+.solid + .remove {
   background-color: var(--fui-bg-tertiary, $fui-bg-tertiary);
 
   &:hover:not(:disabled) {
@@ -192,7 +193,7 @@
   }
 }
 
-.outlined + .remove {
+.outline + .remove {
   background-color: transparent;
 
   &:hover:not(:disabled) {
@@ -219,7 +220,7 @@
 
 .selected + .remove {
   @include selected-surface;
-  border-left-color: transparent;
+  border-inline-start-color: transparent;
 }
 
 // Chip.Group

package/src/components/Chip/index.tsx

@@ -8,12 +8,18 @@ import { isProductionBuild } from "../../utils/env";
  * Chip for selections, filters, and tags. Use with Chip.Group for multi-select.
  * @see https://usefragments.com/components/chip
  */
+export type ChipVariant = "solid" | "outline" | "soft";
+
 export interface ChipProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
   children: React.ReactNode;
-  /** Visual style variant. `"outline"` is an alias for `"outlined"`.
-   * @default "filled"
+  /** Chrome family.
+   *
+   * - `solid` (default): tinted pill for filters and tags.
+   * - `outline`: hairline-bordered, transparent.
+   * - `soft`: info-tinted, for a chip that carries a suggestion.
+   * @default "solid"
    * @see https://usefragments.com/components/chip#variants */
-  variant?: "filled" | "outlined" | "outline" | "soft";
+  variant?: ChipVariant;
   /** Chip size.
    * @default "xs" */
   size?: "xs" | "sm" | "md" | "lg";
@@ -45,7 +51,7 @@ export interface ChipGroupProps extends Omit<
 const ChipBase = React.forwardRef<HTMLButtonElement, ChipProps>(function Chip(
   {
     children,
-    variant: variantProp = "filled",
+    variant = "solid",
     size: sizeProp,
     selected = false,
     disabled = false,
@@ -60,8 +66,6 @@ const ChipBase = React.forwardRef<HTMLButtonElement, ChipProps>(function Chip(
   ref
 ) {
   const size = sizeProp ?? "xs";
-  // Resolve alias: "outline" → "outlined"
-  const variant = variantProp === "outline" ? "outlined" : variantProp;
 
   const classes = [
     styles.chip,

package/src/components/CodeBlock/CodeBlock.module.scss

@@ -1,13 +1,13 @@
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/action" as action;
 @use "../../recipes/layout" as layout;
 @use "../../recipes/prose" as prose;
-@use "../../recipes/target" as target;
 @use "../../recipes/typography" as typography;
 
 .container {
-  --_fui-code-inline-inset: var(--fui-raw-space-16, 16px);
+  --_fui-code-inline-inset: var(--fui-raw-space-16, #{measurements.raw-space(16)});
 
   inline-size: 100%;
 }
@@ -21,7 +21,6 @@
 
 .title {
   margin-block-end: layout.gap("xs");
-  text-transform: uppercase;
 }
 
 .wrapper {
@@ -30,7 +29,7 @@
   // A hairline keeps the block legible on any ground: the light code surface
   // and the sunken app main share the same tone, so fill alone can vanish.
   border: var(--fui-stroke-hairline, $fui-stroke-hairline) solid
-    var(--fui-code-border, var(--fui-border, #{$fui-border}));
+    var(--fui-border, $fui-border);
   border-radius: var(--fui-radius-lg, $fui-radius-lg);
   background-color: var(--fui-code-bg, $fui-code-bg);
   color: var(--fui-code-text, var(--fui-text-primary, #{$fui-text-primary}));
@@ -54,52 +53,35 @@
   min-block-size: action.track("md");
   padding-inline: layout.gap("lg");
   border-block-end: var(--fui-stroke-hairline, $fui-stroke-hairline) solid
-    var(--fui-code-border, var(--fui-border, #{$fui-border}));
+    var(--fui-border, $fui-border);
 }
 
 .filename {
   @include typography.role("code");
 
-  color: var(--fui-code-text-muted, var(--fui-text-secondary, #{$fui-text-secondary}));
+  color: var(--fui-text-secondary, $fui-text-secondary);
 }
 
-.copyButton {
-  @include button-reset;
-  @include action.base;
-  @include action.icon-only("sm");
-  @include target.hit-area("compact");
-
-  border: 0;
-  border-radius: var(--fui-radius-sm, $fui-radius-sm);
-  background: transparent;
-  color: var(--fui-code-text-muted, var(--fui-text-secondary, #{$fui-text-secondary}));
-  cursor: pointer;
+// Copy affordances are IconButtons (ghost, sm); the kit owns reset, hit area,
+// hover and focus. Only the overlay fade and the copied state live here.
+.wrapper .copyButton {
   transition:
-    background var(--fui-transition-fast, $fui-transition-fast),
     color var(--fui-transition-fast, $fui-transition-fast),
     opacity var(--fui-transition-fast, $fui-transition-fast);
 
-  &:hover {
-    background: var(--fui-code-copy-bg-hover, var(--fui-bg-hover, #{$fui-bg-hover}));
-    color: var(--fui-code-tab-text-active, var(--fui-text-primary, #{$fui-text-primary}));
-  }
-
-  &:focus-visible {
-    @include focus-ring;
-  }
-
-  &.copied {
+  &.copied,
+  &.copied:hover:not(:disabled) {
     color: var(--fui-color-success-text, $fui-color-success-text);
     opacity: 1;
   }
 }
 
-.copyOverlay {
+.wrapper .copyOverlay {
   position: absolute;
   inset-block-start: layout.gap("sm");
   inset-inline-end: layout.gap("sm");
   z-index: 2;
-  background: var(--fui-code-copy-bg, var(--fui-bg-hover, #{$fui-bg-hover}));
+  background-color: var(--fui-bg-hover, $fui-bg-hover);
   opacity: 0;
 }
 
@@ -115,7 +97,7 @@
   @include action.glyph("sm");
 }
 
-.persistentCopy {
+.wrapper .persistentCopy {
   inset-block-start: 50%;
   transform: translateY(-50%);
   opacity: 1;
@@ -132,7 +114,7 @@
   .codeContainer :global(.shiki),
   .loading pre {
     padding-inline-end: calc(
-      var(--_fui-code-inline-inset) + #{action.track("sm")} + var(--fui-raw-space-12, 12px)
+      var(--_fui-code-inline-inset, var(--fui-raw-space-16, #{measurements.raw-space(16)})) + #{action.track("sm")} + var(--fui-raw-space-12, #{measurements.raw-space(12)})
     );
   }
 }
@@ -141,18 +123,18 @@
 .codeContainer :global(.shiki) {
   @include prose.code-block("default");
 
-  margin: 0;
-  border: 0 !important;
-  border-radius: 0 !important;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  border: none !important;
+  border-radius: var(--fui-radius-none, #{$fui-radius-none}) !important;
   background-color: transparent !important;
   color: inherit;
 }
 
 .loading code,
 .codeContainer :global(.shiki) code {
-  padding: 0;
-  border: 0;
-  border-radius: 0;
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  border: none;
+  border-radius: var(--fui-radius-none, #{$fui-radius-none});
   background: none !important;
   color: inherit;
   font: inherit;
@@ -167,14 +149,14 @@
   :global(.line) {
     display: inline-block;
     inline-size: 100%;
-    min-block-size: var(--fui-type-code-line);
+    min-block-size: typography.line-height("code");
 
     &:global(.highlighted) {
-      margin-inline: calc(-1 * var(--_fui-code-inline-inset));
-      padding-inline: var(--_fui-code-inline-inset);
+      margin-inline: calc(-1 * var(--_fui-code-inline-inset, var(--fui-raw-space-16, #{measurements.raw-space(16)})));
+      padding-inline: var(--_fui-code-inline-inset, var(--fui-raw-space-16, #{measurements.raw-space(16)}));
       border-inline-start: var(--fui-stroke-default, $fui-stroke-default) solid
         var(--fui-color-info-text, $fui-color-info-text);
-      background-color: var(--fui-code-highlight-bg, var(--fui-bg-hover, #{$fui-bg-hover}));
+      background-color: var(--fui-bg-hover, $fui-bg-hover);
     }
   }
 
@@ -182,44 +164,44 @@
     display: inline-block;
     inline-size: 2.5em;
     padding-inline-end: 1em;
-    color: var(--fui-code-text-muted, var(--fui-text-secondary, #{$fui-text-secondary}));
+    color: var(--fui-text-secondary, $fui-text-secondary);
     text-align: end;
     user-select: none;
-    opacity: 0.6;
+    opacity: var(--fui-opacity-muted, #{$fui-opacity-muted});
   }
 
   *::selection {
     background: var(--fui-code-selection-bg, $fui-code-selection-bg);
-    color: var(--fui-code-tab-text-active, var(--fui-text-primary, #{$fui-text-primary}));
+    color: var(--fui-text-primary, $fui-text-primary);
   }
 
   :global(.shiki)::-webkit-scrollbar {
-    block-size: var(--fui-raw-space-4, 4px);
+    block-size: var(--fui-raw-space-4, #{measurements.raw-space(4)});
   }
 
   :global(.shiki)::-webkit-scrollbar-thumb {
     border-radius: var(--fui-radius-full, $fui-radius-full);
-    background: var(--fui-code-scrollbar-thumb, var(--fui-border-strong, #{$fui-border-strong}));
+    background: var(--fui-border-strong, $fui-border-strong);
   }
 }
 
 .withLineNumbers .codeContainer :global(.shiki) {
-  padding-inline-start: var(--fui-raw-space-8, 8px);
+  padding-inline-start: var(--fui-raw-space-8, #{measurements.raw-space(8)});
 }
 
 .withDiff {
   :global(.diff-marker) {
     display: inline-block;
     inline-size: 1.5em;
-    color: var(--fui-code-text-muted, var(--fui-text-secondary, #{$fui-text-secondary}));
+    color: var(--fui-text-secondary, $fui-text-secondary);
     text-align: center;
     user-select: none;
   }
 
   :global(.diff-added),
   :global(.diff-removed) {
-    margin-inline: calc(-1 * var(--_fui-code-inline-inset));
-    padding-inline: var(--_fui-code-inline-inset);
+    margin-inline: calc(-1 * var(--_fui-code-inline-inset, var(--fui-raw-space-16, #{measurements.raw-space(16)})));
+    padding-inline: var(--_fui-code-inline-inset, var(--fui-raw-space-16, #{measurements.raw-space(16)}));
   }
 
   :global(.diff-added) {
@@ -240,7 +222,7 @@
 }
 
 .compact {
-  --_fui-code-inline-inset: var(--fui-raw-space-12, 12px);
+  --_fui-code-inline-inset: var(--fui-raw-space-12, #{measurements.raw-space(12)});
 
   .wrapper {
     border-radius: var(--fui-radius-md, $fui-radius-md);
@@ -264,33 +246,28 @@
   margin-block-start: layout.gap("sm");
 }
 
-.collapseButton {
-  @include button-reset;
-  @include action.base;
-  @include action.size("sm");
-
-  inline-size: 100%;
-  border-block-start: var(--fui-stroke-hairline, $fui-stroke-hairline) solid
-    var(--fui-border, $fui-border);
-  background: var(--fui-code-bg, $fui-code-bg);
-  color: var(--fui-code-text-muted, var(--fui-text-secondary, #{$fui-text-secondary}));
-  cursor: pointer;
-
-  &:hover {
-    color: var(--fui-code-tab-text-active, var(--fui-text-primary, #{$fui-text-primary}));
+// The collapse bar is a ghost Button (sm, fullWidth) squared into the frame;
+// the gradient lets the last visible line fade under it.
+.wrapper .collapseButton {
+  border-block-start: none;
+  border-radius: var(--fui-radius-none, #{$fui-radius-none});
+  background: linear-gradient(to bottom, transparent, var(--fui-code-bg, $fui-code-bg) 40%);
+  color: var(--fui-text-secondary, $fui-text-secondary);
+
+  &:hover:not(:disabled) {
+    background: linear-gradient(to bottom, transparent, var(--fui-code-bg, $fui-code-bg) 40%);
+    color: var(--fui-text-primary, $fui-text-primary);
   }
 
   &:focus-visible {
-    outline: var(--fui-focus-ring-width, $fui-focus-ring-width) solid
-      var(--fui-focus-ring-color, $fui-focus-ring-color);
     outline-offset: calc(-1 * var(--fui-focus-ring-offset, #{$fui-focus-ring-offset}));
   }
 }
 
-.collapseExpand {
+.wrapper .collapseExpand {
   justify-content: flex-end;
 }
 
 .tabbedPanel {
-  margin-block-start: 0;
+  margin-block-start: var(--fui-raw-space-0, #{measurements.raw-space(0)});
 }