@usefragments/ui 1.7.0 → 2.0.0

package/src/components/Skeleton/Skeleton.module.scss

@@ -1,4 +1,5 @@
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../recipes/representation" as representation;
 
 // ============================================
@@ -47,25 +48,25 @@
 
 // Fill parent
 .fill {
-  width: 100%;
-  height: 100%;
+  inline-size: 100%;
+  block-size: 100%;
 }
 
 // ============================================
-// Semantic Variants
+// Semantic shapes
 // ============================================
 
 // Text - single line of body text
 .text {
-  height: 1em;
-  width: 100%;
+  block-size: 1em;
+  inline-size: 100%;
   border-radius: var(--fui-radius-sm, #{$fui-radius-sm});
 }
 
 // Heading - taller for headings
 .heading {
-  height: 1.5em;
-  width: 100%;
+  block-size: 1.5em;
+  inline-size: 100%;
   border-radius: var(--fui-radius-sm, #{$fui-radius-sm});
 }
 
@@ -92,15 +93,21 @@
 }
 
 .button-sm {
-  inline-size: var(--fui-raw-space-64, 64px);
+  inline-size: var(--fui-raw-space-64, #{measurements.raw-space(64)});
 }
 
 .button-md {
-  inline-size: calc(var(--fui-raw-space-64, 64px) + var(--fui-raw-space-16, 16px));
+  inline-size: calc(
+    var(--fui-raw-space-64, #{measurements.raw-space(64)}) +
+      var(--fui-raw-space-16, #{measurements.raw-space(16)})
+  );
 }
 
 .button-lg {
-  inline-size: calc(var(--fui-raw-space-64, 64px) + var(--fui-raw-space-32, 32px));
+  inline-size: calc(
+    var(--fui-raw-space-64, #{measurements.raw-space(64)}) +
+      var(--fui-raw-space-32, #{measurements.raw-space(32)})
+  );
 }
 
 // Input - matches input field height
@@ -125,7 +132,7 @@
 // ============================================
 
 .radius-none {
-  border-radius: 0;
+  border-radius: var(--fui-radius-none, #{$fui-radius-none});
 }
 
 .radius-sm {
@@ -151,20 +158,20 @@
 .textContainer {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  inline-size: 100%;
 }
 
 .gap-sm {
-  gap: var(--fui-raw-space-8, 8px);
+  gap: var(--fui-raw-space-8, #{measurements.raw-space(8)});
 }
 
 .gap-md {
-  gap: var(--fui-raw-space-12, 12px);
+  gap: var(--fui-raw-space-12, #{measurements.raw-space(12)});
 }
 
 .textLine {
-  height: 1em;
-  width: 100%;
+  block-size: 1em;
+  inline-size: 100%;
   background-color: var(--fui-bg-tertiary, #{$fui-bg-tertiary});
   animation: skeleton-pulse var(--fui-duration-shimmer, $fui-duration-shimmer)
     cubic-bezier(0.4, 0, 0.6, 1) infinite;

package/src/components/Skeleton/index.tsx

@@ -5,7 +5,7 @@ import styles from "./Skeleton.module.scss";
 // Types
 // ============================================
 
-export type SkeletonVariant =
+export type SkeletonShape =
   | "text" // Single line of text, height: 1em
   | "heading" // Heading text, height: 1.5em
   | "avatar" // Circular, uses size prop
@@ -17,21 +17,22 @@ export type SkeletonSize = "sm" | "md" | "lg";
 
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * Semantic variant that auto-sizes based on design tokens.
+   * Semantic shape that auto-sizes from the design tokens. Not chrome, so it
+   * is `shape`, not `variant`.
    * @default 'rect'
    */
-  variant?: SkeletonVariant;
+  shape?: SkeletonShape;
   /**
-   * Size variant for avatar, button, and input placeholders.
+   * Size for the avatar, button, and input shapes.
    * @default 'md'
    */
   size?: SkeletonSize;
   /**
-   * Width in pixels or CSS value. Auto-determined for most variants.
+   * Width in pixels or CSS value. Auto-determined for most shapes.
    */
   width?: number | string;
   /**
-   * Height in pixels or CSS value. Auto-determined for semantic variants.
+   * Height in pixels or CSS value. Auto-determined for semantic shapes.
    */
   height?: number | string;
   /**
@@ -40,7 +41,7 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   fill?: boolean;
   /**
-   * Border radius override. Auto-determined for most variants.
+   * Border radius override. Auto-determined for most shapes.
    */
   radius?: "none" | "sm" | "md" | "lg" | "full";
   /**
@@ -69,7 +70,7 @@ export interface SkeletonTextProps extends Omit<React.HTMLAttributes<HTMLDivElem
 
 const SkeletonBase = React.forwardRef<HTMLDivElement, SkeletonProps>(function SkeletonBase(
   {
-    variant = "rect",
+    shape = "rect",
     size = "md",
     width,
     height,
@@ -83,10 +84,10 @@ const SkeletonBase = React.forwardRef<HTMLDivElement, SkeletonProps>(function Sk
 ) {
   const classes = [
     styles.skeleton,
-    styles[variant],
-    variant === "avatar" && styles[`avatar-${size}`],
-    variant === "button" && styles[`button-${size}`],
-    variant === "input" && styles[`input-${size}`],
+    styles[shape],
+    shape === "avatar" && styles[`avatar-${size}`],
+    shape === "button" && styles[`button-${size}`],
+    shape === "input" && styles[`input-${size}`],
     fill && styles.fill,
     radius && styles[`radius-${radius}`],
     isStatic && styles.static,
@@ -147,7 +148,7 @@ function SkeletonText({
 }
 
 // ============================================
-// Skeleton.Circle - Shorthand for avatar variant
+// Skeleton.Circle - Shorthand for the avatar shape
 // ============================================
 
 function SkeletonCircle({
@@ -159,10 +160,10 @@ function SkeletonCircle({
 }) {
   if (typeof size === "number") {
     return (
-      <SkeletonBase variant="rect" width={size} height={size} radius="full" className={className} />
+      <SkeletonBase shape="rect" width={size} height={size} radius="full" className={className} />
     );
   }
-  return <SkeletonBase variant="avatar" size={size} className={className} />;
+  return <SkeletonBase shape="avatar" size={size} className={className} />;
 }
 
 // ============================================

package/src/components/Slider/Slider.module.scss

@@ -50,9 +50,10 @@
   cursor: pointer;
 
   &[data-disabled] {
-    opacity: 0.5;
-    cursor: not-allowed;
+    @include disabled-state;
   }
+
+  @include high-contrast-outline;
 }
 
 .indicator {
@@ -89,13 +90,14 @@
   }
 
   &[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
+    @include disabled-state;
   }
 
   @media (pointer: coarse) {
     --_fui-target-hit-size: #{target.hit-size("touch")};
   }
+
+  @include high-contrast-outline;
 }
 
 .helper {
@@ -127,21 +129,6 @@
     var(--fui-color-danger-text, $fui-color-danger-text);
 }
 
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
-@media (prefers-contrast: more) {
-  .track {
-    border: var(--fui-stroke-hairline, 1px) solid var(--fui-text-primary, $fui-text-primary);
-  }
-
-  .thumb {
-    outline: var(--fui-stroke-default, 2px) solid var(--fui-text-primary, $fui-text-primary);
-    outline-offset: var(--fui-stroke-hairline, 1px);
-  }
-}
-
 // ============================================
 // Accessibility: Reduced Motion
 // ============================================

package/src/components/Stack/Stack.contract.json

@@ -137,7 +137,7 @@
     {
       "name": "Responsive",
       "description": "Swap direction and gap per breakpoint with an object value.",
-      "code": "<Stack\n  direction={{ base: 'column', md: 'row' }}\n  gap={{ base: 'sm', md: 'lg' }}\n>\n  <Button variant=\"secondary\">First</Button>\n  <Button variant=\"secondary\">Second</Button>\n  <Button variant=\"secondary\">Third</Button>\n</Stack>"
+      "code": "<Stack\n  direction={{ base: 'column', md: 'row' }}\n  gap={{ base: 'sm', md: 'lg' }}\n>\n  <Button variant=\"soft\">First</Button>\n  <Button variant=\"soft\">Second</Button>\n  <Button variant=\"soft\">Third</Button>\n</Stack>"
     },
     {
       "name": "With Separator",

package/src/components/Stack/Stack.module.scss

@@ -1,6 +1,7 @@
 @use "../../recipes/layout";
 @use "../../tokens/mixins" as *;
 @use "../../tokens/variables" as *;
+@use "../../tokens/measurements.generated" as measurements;
 
 .stack {
   display: flex;
@@ -134,75 +135,75 @@
   background-color: var(--fui-border, $fui-border);
 
   &[data-orientation="horizontal"] {
-    height: var(--fui-stroke-hairline, 1px);
+    height: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
     width: 100%;
   }
 
   &[data-orientation="vertical"] {
-    width: var(--fui-stroke-hairline, 1px);
+    width: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
     align-self: stretch;
   }
 }
 
 .directionResponsive[data-direction-base="row"] > .separator {
-  width: var(--fui-stroke-hairline, 1px);
+  width: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
   height: auto;
   align-self: stretch;
 }
 
 .directionResponsive[data-direction-base="column"] > .separator {
   width: 100%;
-  height: var(--fui-stroke-hairline, 1px);
+  height: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
 }
 
 @include breakpoint-sm {
   .directionResponsive[data-direction-sm="row"] > .separator {
-    width: var(--fui-stroke-hairline, 1px);
+    width: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
     height: auto;
     align-self: stretch;
   }
 
   .directionResponsive[data-direction-sm="column"] > .separator {
     width: 100%;
-    height: var(--fui-stroke-hairline, 1px);
+    height: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
   }
 }
 
 @include breakpoint-md {
   .directionResponsive[data-direction-md="row"] > .separator {
-    width: var(--fui-stroke-hairline, 1px);
+    width: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
     height: auto;
     align-self: stretch;
   }
 
   .directionResponsive[data-direction-md="column"] > .separator {
     width: 100%;
-    height: var(--fui-stroke-hairline, 1px);
+    height: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
   }
 }
 
 @include breakpoint-lg {
   .directionResponsive[data-direction-lg="row"] > .separator {
-    width: var(--fui-stroke-hairline, 1px);
+    width: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
     height: auto;
     align-self: stretch;
   }
 
   .directionResponsive[data-direction-lg="column"] > .separator {
     width: 100%;
-    height: var(--fui-stroke-hairline, 1px);
+    height: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
   }
 }
 
 @include breakpoint-xl {
   .directionResponsive[data-direction-xl="row"] > .separator {
-    width: var(--fui-stroke-hairline, 1px);
+    width: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
     height: auto;
     align-self: stretch;
   }
 
   .directionResponsive[data-direction-xl="column"] > .separator {
     width: 100%;
-    height: var(--fui-stroke-hairline, 1px);
+    height: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
   }
 }

package/src/components/Switch/Switch.module.scss

@@ -5,6 +5,10 @@
 @use "../../recipes/target" as target;
 @use "../../recipes/typography" as typography;
 
+// Fallback travel for the thumb when no size class has set the track: the md
+// track's inline size minus its block size, exactly what `switch-track` computes.
+$_switch-travel-md: calc(#{boolean.switch-inline-size("md")} - #{boolean.switch-block-size("md")});
+
 .root {
   --_switch-off-bg: light-dark(
     color-mix(
@@ -55,7 +59,11 @@
     )
   );
   --_switch-thumb-bg: light-dark(
-    color-mix(in srgb, var(--fui-bg-primary, #{$fui-bg-primary}) 98%, white 2%),
+    color-mix(
+      in srgb,
+      var(--fui-bg-primary, #{$fui-bg-primary}) 98%,
+      var(--fui-bg-elevated, #{$fui-bg-elevated}) 2%
+    ),
     color-mix(
       in srgb,
       var(--fui-bg-primary, #{$fui-bg-primary}) 56%,
@@ -101,8 +109,15 @@
   }
 
   &[data-disabled] {
-    cursor: not-allowed;
-    opacity: 0.5;
+    @include disabled-state;
+  }
+
+  // The focused element is the label root, but the field ring is drawn on
+  // .track — the box a user reads as the control. Left alone the root also
+  // takes the global :focus-visible ring, so a focused Switch paints two
+  // concentric rings where every other field paints one.
+  &:focus-visible {
+    outline: none;
   }
 
   @media (pointer: coarse) {
@@ -118,11 +133,16 @@
   flex-shrink: 0;
   box-sizing: border-box;
   border-radius: var(--fui-radius-full, $fui-radius-full);
-  border: var(--fui-stroke-hairline, 1px) solid var(--_switch-off-border);
-  background-color: var(--_switch-off-bg);
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+    var(--_switch-off-border, var(--fui-border-strong, #{$fui-border-strong}));
+  background-color: var(--_switch-off-bg, var(--fui-bg-elevated, #{$fui-bg-elevated}));
+  // Specular sheen: the lightest neutral surface over the track, the ink under it.
   box-shadow:
-    inset 0 1px 0 color-mix(in srgb, white 26%, transparent),
-    inset 0 -1px 0 color-mix(in srgb, var(--fui-text-primary, $fui-text-primary) 5%, transparent);
+    inset 0 var(--fui-stroke-hairline, #{$fui-stroke-hairline}) 0
+      color-mix(in srgb, var(--fui-bg-elevated, #{$fui-bg-elevated}) 26%, transparent),
+    inset 0 calc(-1 * var(--fui-stroke-hairline, #{$fui-stroke-hairline})) 0
+      color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 5%, transparent);
+  @include high-contrast-outline;
   transition:
     background-color var(--fui-transition-normal, $fui-transition-normal),
     border-color var(--fui-transition-normal, $fui-transition-normal),
@@ -131,12 +151,13 @@
   .root[data-checked] & {
     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);
   }
 
   .root:not([data-disabled]):not([data-checked]) &:hover {
-    background-color: var(--_switch-off-bg-hover);
-    border-color: var(--_switch-off-border-hover);
+    background-color: var(--_switch-off-bg-hover, var(--fui-bg-hover, #{$fui-bg-hover}));
+    border-color: var(--_switch-off-border-hover, var(--fui-border-strong, #{$fui-border-strong}));
   }
 
   .root:not([data-disabled])[data-checked] &:hover {
@@ -173,17 +194,21 @@
 .thumb {
   position: absolute;
   inset-block-start: 50%;
-  inset-inline-start: var(--_fui-switch-inset);
+  inset-inline-start: var(--_fui-switch-inset, var(--fui-stroke-default, #{$fui-stroke-default}));
   box-sizing: border-box;
-  width: var(--_fui-switch-thumb-size);
-  height: var(--_fui-switch-thumb-size);
+  width: var(--_fui-switch-thumb-size, #{boolean.switch-thumb-size("md")});
+  height: var(--_fui-switch-thumb-size, #{boolean.switch-thumb-size("md")});
   border-radius: var(--fui-radius-full, $fui-radius-full);
   pointer-events: none;
-  background-color: var(--_switch-thumb-bg);
-  border: var(--fui-stroke-hairline, 1px) solid var(--_switch-thumb-border);
+  background-color: var(--_switch-thumb-bg, var(--fui-bg-primary, #{$fui-bg-primary}));
+  border: var(--fui-stroke-hairline, #{$fui-stroke-hairline}) solid
+    var(--_switch-thumb-border, var(--fui-border-strong, #{$fui-border-strong}));
   box-shadow:
-    0 1px 1px color-mix(in srgb, black 18%, transparent),
-    inset 0 1px 0 color-mix(in srgb, white 42%, transparent);
+    0 var(--fui-stroke-hairline, #{$fui-stroke-hairline})
+      var(--fui-stroke-hairline, #{$fui-stroke-hairline})
+      color-mix(in srgb, var(--fui-text-primary, #{$fui-text-primary}) 18%, transparent),
+    inset 0 var(--fui-stroke-hairline, #{$fui-stroke-hairline}) 0
+      color-mix(in srgb, var(--fui-bg-elevated, #{$fui-bg-elevated}) 42%, transparent);
   transform: translateY(-50%);
   transition:
     transform var(--fui-transition-normal, $fui-transition-normal),
@@ -192,7 +217,7 @@
     box-shadow var(--fui-transition-fast, $fui-transition-fast);
 
   .root[data-checked] & {
-    transform: translate(var(--_fui-switch-travel), -50%);
+    transform: translate(var(--_fui-switch-travel, #{$_switch-travel-md}), -50%);
     background-color: var(--fui-control-checked-color, $fui-color-on-accent);
     border-color: color-mix(
       in srgb,
@@ -202,7 +227,7 @@
   }
 
   .root:dir(rtl)[data-checked] & {
-    transform: translate(calc(-1 * var(--_fui-switch-travel)), -50%);
+    transform: translate(calc(-1 * var(--_fui-switch-travel, #{$_switch-travel-md})), -50%);
   }
 
   .root:active:not([data-disabled]) & {
@@ -224,22 +249,6 @@
   @include field.helper;
 }
 
-// ============================================
-// Accessibility: High Contrast Mode
-// ============================================
-
-@media (prefers-contrast: more) {
-  .track {
-    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));
-  }
-
-  .root[data-checked] .track {
-    border-color: var(--fui-control-checked-border, $fui-color-accent);
-  }
-}
-
 // ============================================
 // Accessibility: Reduced Motion
 // ============================================

package/src/components/Table/Table.module.scss

@@ -38,6 +38,7 @@
 
   > tr {
     @include table-chrome.row;
+    @include high-contrast-outline;
   }
 }
 
@@ -62,8 +63,9 @@
   );
   --fui-table-row-bg: var(--fui-table-row-base-bg);
 
-  background-color: var(--fui-table-row-bg);
+  background-color: var(--fui-table-row-bg, var(--fui-bg-primary, #{$fui-bg-primary}));
   transition: background-color var(--fui-transition-fast, $fui-transition-fast);
+  @include high-contrast-outline;
 
   &:last-child {
     border-block-end: 0;
@@ -96,19 +98,20 @@
   );
 
   .td:first-child {
-    box-shadow: inset var(--fui-table-divider-size) 0 0
-      var(--fui-table-row-selected-border, var(--fui-border-strong, #{$fui-border-strong}));
+    box-shadow: inset var(--fui-table-divider-size, var(--fui-stroke-hairline, #{$fui-stroke-hairline}))
+      0 0 var(--fui-table-row-selected-border, var(--fui-border-strong, #{$fui-border-strong}));
   }
 
   &:dir(rtl) .td:first-child {
-    box-shadow: inset calc(-1 * var(--fui-table-divider-size)) 0 0
+    box-shadow: inset
+      calc(-1 * var(--fui-table-divider-size, var(--fui-stroke-hairline, #{$fui-stroke-hairline}))) 0 0
       var(--fui-table-row-selected-border, var(--fui-border-strong, #{$fui-border-strong}));
   }
 }
 
 .tfoot {
-  border-block-start: var(--fui-table-divider-size) solid
-    var(--fui-table-header-border, var(--fui-border, #{$fui-border}));
+  border-block-start: var(--fui-table-divider-size, var(--fui-stroke-hairline, #{$fui-stroke-hairline}))
+    solid var(--fui-table-header-border, var(--fui-border, #{$fui-border}));
 }
 
 .striped {
@@ -130,13 +133,6 @@
   border-radius: var(--fui-radius-md, $fui-radius-md);
 }
 
-@media (prefers-contrast: more) {
-  .row,
-  .thead > tr {
-    border-block-end-color: CanvasText;
-  }
-}
-
 @media (prefers-reduced-motion: reduce) {
   .row {
     transition: none;

package/src/components/TableOfContents/TableOfContents.module.scss

@@ -1,3 +1,4 @@
+@use "../../tokens/measurements.generated" as measurements;
 @use "../../tokens/variables" as *;
 @use "../../tokens/mixins" as *;
 @use "../../recipes/navigation" as navigation;
@@ -12,22 +13,22 @@
 .title {
   @include navigation.properties;
 
-  margin: 0 0 var(--fui-toc-title-gap, var(--fui-space-2, #{$fui-space-2}));
+  margin: 0 0 var(--fui-space-2, #{$fui-space-2});
   // Same inline inset as `.link` (navigation.row) so the label and the index
   // share one left edge — extra title padding made "On This Page" sit inward
   // of the items below it.
-  padding-inline: var(--fui-toc-inline-inset, var(--fui-navigation-inline-inset));
+  padding-inline: var(--fui-navigation-inline-inset, #{navigation.gutter()});
 }
 
 // The quiet index is flush; links and group headers share the title inset.
 .list {
   list-style: none;
-  margin: 0;
-  padding: 0;
+  margin: var(--fui-raw-space-0, #{measurements.raw-space(0)});
+  padding: var(--fui-raw-space-0, #{measurements.raw-space(0)});
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--fui-stroke-hairline, 1px);
+  gap: var(--fui-stroke-hairline, #{$fui-stroke-hairline});
 }
 
 // ============================================
@@ -45,9 +46,6 @@
 
   display: flex;
   align-items: center;
-  min-block-size: var(--fui-toc-row-track, var(--fui-navigation-row-track));
-  padding-inline: var(--fui-toc-inline-inset, var(--fui-navigation-inline-inset));
-  gap: var(--fui-toc-content-gap, var(--fui-navigation-content-gap));
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-secondary, $fui-text-secondary);
   text-decoration: none;
@@ -56,7 +54,7 @@
     color var(--fui-transition-fast, $fui-transition-fast);
 
   &:hover {
-    background-color: var(--fui-toc-hover-bg, var(--fui-bg-hover, #{$fui-bg-hover}));
+    background-color: var(--fui-bg-hover, #{$fui-bg-hover});
     color: var(--fui-text-primary, $fui-text-primary);
   }
 
@@ -69,7 +67,7 @@
 // flush with the title and group headers.
 [data-depth="1"] .link {
   margin-left: var(--fui-space-2, $fui-space-2);
-  padding-inline-start: var(--fui-raw-space-16, 16px);
+  padding-inline-start: var(--fui-raw-space-16, #{measurements.raw-space(16)});
 }
 
 .linkLabel {
@@ -112,13 +110,9 @@
 
   display: flex;
   align-items: center;
-  min-block-size: var(--fui-toc-section-track, var(--fui-navigation-section-track));
-  padding-inline: var(--fui-toc-inline-inset, var(--fui-navigation-inline-inset));
-  gap: var(--fui-toc-content-gap, var(--fui-navigation-content-gap));
   width: 100%;
   border-radius: var(--fui-radius-md, $fui-radius-md);
   color: var(--fui-text-tertiary, $fui-text-tertiary);
-  text-transform: uppercase;
   background: transparent;
   border: 0;
   text-align: left;
@@ -133,7 +127,7 @@
     color var(--fui-transition-fast, $fui-transition-fast);
 
   &:hover {
-    background-color: var(--fui-toc-hover-bg, var(--fui-bg-hover, #{$fui-bg-hover}));
+    background-color: var(--fui-bg-hover, #{$fui-bg-hover});
     color: var(--fui-text-secondary, $fui-text-secondary);
   }
 
@@ -153,12 +147,12 @@
   width: var(--fui-icon-xs, $fui-icon-xs);
   height: var(--fui-icon-xs, $fui-icon-xs);
   color: inherit;
-  opacity: 0.7;
+  opacity: var(--fui-opacity-muted, #{$fui-opacity-muted});
   transition: transform var(--fui-transition-fast, $fui-transition-fast);
 
   svg {
-    width: var(--fui-raw-space-10, 10px);
-    height: var(--fui-raw-space-10, 10px);
+    width: var(--fui-raw-space-10, #{measurements.raw-space(10)});
+    height: var(--fui-raw-space-10, #{measurements.raw-space(10)});
   }
 
   &[data-open] {

package/src/components/TableOfContents/index.tsx

@@ -108,7 +108,7 @@ function TableOfContentsRoot({
   return (
     <nav {...htmlProps} aria-label={ariaLabel ?? label} className={classes}>
       {!hideTitle && (
-        <Text as="p" variant="section-label" className={styles.title}>
+        <Text as="p" role="section-label" className={styles.title}>
           {title}
         </Text>
       )}