@womp/kookie-ui 0.5.0 → 0.7.0

package/src/components/sidebar.css

@@ -261,13 +261,13 @@
 
 /* Active label gets accent color and medium weight */
 :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton[data-active] .rt-SidebarMenuLabel) {
-  color: var(--accent-11);
+  color: var(--accent-ink);
   font-weight: var(--font-weight-medium);
 }
 
 /* Highlighted label gets slightly darker color */
 :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled]) .rt-SidebarMenuLabel) {
-  color: var(--accent-11);
+  color: var(--accent-ink);
 }
 
 /* Remove background from button itself in thin mode - styles are on icon wrapper */
@@ -296,24 +296,13 @@
 
 /* Solid variant icon wrapper states in thin mode */
 :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid .rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
-  background-color: var(--accent-9);
-  color: var(--accent-contrast);
+  background-color: var(--accent-solid);
+  color: var(--accent-solid-contrast);
 }
 
 :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
-  background-color: var(--accent-9);
-  color: var(--accent-contrast);
-}
-
-/* High contrast solid variant in thin mode */
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid[data-high-contrast] .rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
-  background-color: var(--accent-12);
-  color: var(--accent-1);
-}
-
-:where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarContent.rt-menu-variant-solid[data-high-contrast] .rt-SidebarMenuButton[data-active] .rt-SidebarMenuIconWrapper) {
-  background-color: var(--accent-12);
-  color: var(--accent-1);
+  background-color: var(--accent-solid);
+  color: var(--accent-solid-contrast);
 }
 
 :where(.rt-SidebarContainer[data-presentation='thin'] .rt-SidebarMenuBadge),
@@ -854,11 +843,11 @@
 
   /* Hover/highlighted state for solid variant - EXACT match to base menu */
   & :where(.rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled])) {
-    background-color: var(--accent-9);
-    color: var(--accent-contrast);
+    background-color: var(--accent-solid);
+    color: var(--accent-solid-contrast);
 
     & :where(.rt-BaseMenuSubTriggerIcon) {
-      color: var(--accent-contrast);
+      color: var(--accent-solid-contrast);
     }
 
     /* Force all text elements to inherit hover color, including those with color="gray" */
@@ -873,15 +862,15 @@
 
     /* FIX: Ensure badges maintain their own styling and don't inherit hover colors */
     & :where(.rt-Badge) {
-      color: var(--accent-contrast) !important;
-      background-color: var(--accent-12) !important;
+      color: var(--accent-solid-badge-contrast) !important;
+      background-color: var(--accent-solid-badge) !important;
     }
   }
 
   /* Active navigation state for solid variant - same as highlighted */
   & :where(.rt-SidebarMenuButton[data-active]) {
-    background-color: var(--accent-9);
-    color: var(--accent-contrast);
+    background-color: var(--accent-solid);
+    color: var(--accent-solid-contrast);
     font-weight: var(--font-weight-medium);
 
     /* Force all text elements to inherit active color */
@@ -895,91 +884,8 @@
 
     /* FIX: Ensure badges maintain their own styling and don't inherit active colors */
     & :where(.rt-Badge) {
-      color: var(--accent-contrast) !important;
-      background-color: var(--accent-12) !important;
-    }
-  }
-
-  /* High contrast support for solid variant - EXACT match to base menu */
-  &:where(.rt-high-contrast) {
-    & :where(.rt-SidebarMenuButton:where([data-highlighted], :hover):not([data-disabled])) {
-      background-color: var(--accent-12);
-      color: var(--accent-1);
-
-      & :where(.rt-BaseMenuSubTriggerIcon) {
-        color: var(--accent-1);
-      }
-
-      /* Force all text elements to inherit hover color in high contrast mode */
-      & :where(.rt-Text) {
-        color: inherit !important;
-      }
-
-      /* Also target any element with data-accent-color="gray" in high contrast */
-      & :where([data-accent-color='gray']:not(.rt-Badge)) {
-        color: inherit !important;
-      }
-
-      /* FIX: High contrast badge styling */
-      & :where(.rt-Badge) {
-        color: var(--accent-1) !important;
-        background-color: var(--accent-9) !important;
-      }
-
-      &:where([data-accent-color]) {
-        background-color: var(--accent-9);
-        color: var(--accent-contrast);
-
-        & :where(.rt-Text) {
-          color: inherit !important;
-        }
-
-        & :where([data-accent-color='gray']:not(.rt-Badge)) {
-          color: inherit !important;
-        }
-
-        & :where(.rt-Badge) {
-          color: var(--accent-contrast) !important;
-          background-color: var(--accent-12) !important;
-        }
-      }
-    }
-
-    & :where(.rt-SidebarMenuButton[data-active]) {
-      background-color: var(--accent-12);
-      color: var(--accent-1);
-      font-weight: var(--font-weight-medium);
-
-      & :where(.rt-Text) {
-        color: inherit !important;
-      }
-
-      & :where([data-accent-color='gray']:not(.rt-Badge)) {
-        color: inherit !important;
-      }
-
-      & :where(.rt-Badge) {
-        color: var(--accent-1) !important;
-        background-color: var(--accent-9) !important;
-      }
-
-      &:where([data-accent-color]) {
-        background-color: var(--accent-9);
-        color: var(--accent-contrast);
-
-        & :where(.rt-Text) {
-          color: inherit !important;
-        }
-
-        & :where([data-accent-color='gray']:not(.rt-Badge)) {
-          color: inherit !important;
-        }
-
-        & :where(.rt-Badge) {
-          color: var(--accent-contrast) !important;
-          background-color: var(--accent-12) !important;
-        }
-      }
+      color: var(--accent-solid-badge-contrast) !important;
+      background-color: var(--accent-solid-badge) !important;
     }
   }
 }
@@ -1058,8 +964,8 @@
       background-color: var(--accent-a4);
     }
 
-    /* In soft variant, improve contrast for gray text while maintaining hierarchy */
-    & :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
+    /* In soft variant, lift muted text a step while keeping the hierarchy */
+    & :where(.rt-Text.rt-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
       color: var(--gray-11) !important;
     }
   }
@@ -1090,8 +996,8 @@
       color: var(--accent-a12);
     }
 
-    /* In soft variant, improve contrast for gray text while maintaining hierarchy */
-    & :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
+    /* In soft variant, lift muted text a step while keeping the hierarchy */
+    & :where(.rt-Text.rt-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
       color: var(--gray-11) !important;
     }
   }
@@ -1222,8 +1128,8 @@
 
 /* Search trigger icon wrapper hover (solid variant) */
 :where(.rt-SidebarContainer[data-presentation='thin'].rt-menu-variant-solid) :where(.rt-SidebarSearchTrigger:where(:hover):not([data-disabled]) .rt-SidebarMenuIconWrapper) {
-  background-color: var(--accent-9);
-  color: var(--accent-contrast);
+  background-color: var(--accent-solid);
+  color: var(--accent-solid-contrast);
 }
 
 /* Popover inner wrapper - provide base menu tokens for portal-rendered items */

package/src/components/sidebar.props.tsx

@@ -1,6 +1,5 @@
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { colorPropDef } from '../props/color.prop.js';
-import { highContrastPropDef } from '../props/high-contrast.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
@@ -42,7 +41,6 @@ const sidebarPropDefs = {
   layout: { type: 'enum', className: 'rt-layout', values: layouts, default: undefined },
   panelBackground: { type: 'enum', values: ['solid', 'translucent'], default: undefined },
   ...colorPropDef,
-  ...highContrastPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;

package/src/components/sidebar.tsx

@@ -27,7 +27,6 @@ type BadgeConfig = {
   variant?: BadgeProps['variant'];
   size?: BadgeProps['size'];
   color?: BadgeProps['color'];
-  highContrast?: BadgeProps['highContrast'];
   radius?: BadgeProps['radius'];
 };
 
@@ -70,7 +69,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwarded
     // collapsible = sidebarPropDefs.collapsible.default,
     panelBackground,
     color,
-    highContrast = sidebarPropDefs.highContrast.default,
   } = props;
 
   const { className, children, ...rootProps } = extractProps(props, sidebarPropDefs);
@@ -93,7 +91,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>((props, forwarded
         <div
           className={classNames('rt-SidebarContainer', `rt-variant-${variant}`, `rt-r-size-${resolvedSize}`, `rt-menu-variant-${menuVariant}`, resolvedLayout && `rt-layout-${resolvedLayout}`)}
           data-accent-color={resolvedColor}
-          data-high-contrast={highContrast || undefined}
           data-panel-background={panelBackground}
           data-presentation={presentation}
           data-layout={resolvedLayout}
@@ -340,7 +337,7 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
                     {badge}
                   </Badge>
                 ) : (
-                  <Badge size={badge.size || sidebarSize} variant={badge.variant || 'soft'} color={badge.color} highContrast={badge.highContrast} radius={badge.radius}>
+                  <Badge size={badge.size || sidebarSize} variant={badge.variant || 'soft'} color={badge.color} radius={badge.radius}>
                     {badge.content}
                   </Badge>
                 )}
@@ -395,7 +392,7 @@ const SidebarMenuButton = React.forwardRef<HTMLButtonElement, SidebarMenuButtonP
                     {badge}
                   </Badge>
                 ) : (
-                  <Badge size={badge.size || sidebarSize} variant={badge.variant || 'soft'} color={badge.color} highContrast={badge.highContrast} radius={badge.radius}>
+                  <Badge size={badge.size || sidebarSize} variant={badge.variant || 'soft'} color={badge.color} radius={badge.radius}>
                     {badge.content}
                   </Badge>
                 )}

package/src/components/slider.css

@@ -103,7 +103,7 @@
     content: '';
     position: absolute;
     inset: calc(var(--slider-thumb-inset-factor) * var(--slider-track-size) * -1);
-    background-color: white;
+    background-color: var(--accent-solid-thumb);
     border-radius: var(--slider-thumb-radius);
     box-shadow: var(--shadow-2);
     cursor: pointer;
@@ -193,13 +193,7 @@
   }
 
   & :where(.rt-SliderRange) {
-    background-color: var(--accent-9);
-  }
-
-  &:where(.rt-high-contrast) {
-    & :where(.rt-SliderRange) {
-      background-color: var(--accent-12);
-    }
+    background-color: var(--accent-solid);
   }
 
 
@@ -227,13 +221,7 @@
   }
 
   & :where(.rt-SliderRange) {
-    background-color: var(--accent-9);
-  }
-
-  &:where(.rt-high-contrast) {
-    & :where(.rt-SliderRange) {
-      background-color: var(--accent-12);
-    }
+    background-color: var(--accent-solid);
   }
 
   & :where(.rt-SliderThumb) {
@@ -264,13 +252,7 @@
   }
 
   & :where(.rt-SliderRange) {
-    background-color: var(--accent-9);
-  }
-
-  &:where(.rt-high-contrast) {
-    & :where(.rt-SliderRange) {
-      background-color: var(--accent-12);
-    }
+    background-color: var(--accent-solid);
   }
 
   & :where(.rt-SliderThumb) {
@@ -278,21 +260,6 @@
   }
 }
 
-/* all high-contrast */
-
-:where(.radix-themes) {
-  --slider-range-high-contrast-background-image: linear-gradient(var(--black-a8), var(--black-a8));
-}
-:is(.dark, .dark-theme),
-:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
-  --slider-range-high-contrast-background-image: none;
-}
-.rt-SliderRoot:where(:not(.rt-high-contrast)) {
-  --slider-range-high-contrast-background-image: none;
-}
-
-
-
 /* all disabled Sliders */
 
 [data-disabled] {

package/src/components/slider.props.tsx

@@ -1,5 +1,4 @@
 import { colorPropDef } from '../props/color.prop.js';
-import { highContrastPropDef } from '../props/high-contrast.prop.js';
 import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
@@ -13,7 +12,6 @@ const sliderPropDefs = {
   showTickLabels: { type: 'boolean', className: 'rt-show-tick-labels' },
   snapToTicks: { type: 'boolean', className: 'rt-snap-to-ticks' },
   ...colorPropDef,
-  ...highContrastPropDef,
   ...radiusPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;

package/src/components/slider.tsx

@@ -182,7 +182,7 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((props, forwardedRef
       >
         <SliderPrimitive.Track className="rt-SliderTrack">
           <SliderPrimitive.Range
-            className={classNames('rt-SliderRange', { 'rt-high-contrast': props.highContrast })}
+            className="rt-SliderRange"
             data-inverted={sliderProps.inverted ? '' : undefined}
           />
         </SliderPrimitive.Track>

package/src/components/switch.css

@@ -71,6 +71,7 @@
   transition: transform var(--transition-standard), box-shadow var(--transition-standard);
 
   &:where([data-state='checked']) {
+    background-color: var(--accent-solid-thumb);
     transform: translateX(var(--switch-thumb-translate-x));
   }
 }
@@ -130,16 +131,9 @@
   }
   
   &:where([data-state='checked'])::before {
-    background-color: var(--accent-9);
+    background-color: var(--accent-solid);
     box-shadow: none;
   }
-
-  &:where(.rt-high-contrast) {
-    &:where([data-state='checked'])::before {
-      background-color: var(--accent-12);
-      box-shadow: none;
-    }
-  }
   
 
 
@@ -168,13 +162,7 @@
   }
   
   &:where([data-state='checked'])::before {
-    background-color: var(--accent-9);
-  }
-
-  &:where(.rt-high-contrast) {
-    &:where([data-state='checked'])::before {
-      background-color: var(--accent-12);
-    }
+    background-color: var(--accent-solid);
   }
 }
 
@@ -201,16 +189,9 @@
   }
   
   &:where([data-state='checked'])::before {
-    background-color: var(--accent-9);
+    background-color: var(--accent-solid);
     box-shadow: none;
   }
-
-  &:where(.rt-high-contrast) {
-    &:where([data-state='checked'])::before {
-      background-color: var(--accent-12);
-      box-shadow: none;
-    }
-  }
   
 
 

package/src/components/switch.props.tsx

@@ -1,5 +1,4 @@
 import { colorPropDef } from '../props/color.prop.js';
-import { highContrastPropDef } from '../props/high-contrast.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
 
@@ -12,7 +11,6 @@ const switchPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
   ...colorPropDef,
-  ...highContrastPropDef,
   /**
    * Material type for visual rendering and depth effects
    * Controls how the switch renders its visual elements

package/src/components/switch.tsx

@@ -36,9 +36,7 @@ const Switch = React.forwardRef<SwitchElement, SwitchProps>((props, forwardedRef
       ref={forwardedRef}
       className={classNames('rt-reset', 'rt-SwitchRoot', className)}
     >
-      <SwitchPrimitive.Thumb
-        className={classNames('rt-SwitchThumb', { 'rt-high-contrast': props.highContrast })}
-      />
+      <SwitchPrimitive.Thumb className="rt-SwitchThumb" />
     </SwitchPrimitive.Root>
   );
 });

package/src/components/text.css

@@ -18,13 +18,24 @@
     margin: 0;
   }
 
+  /* Emphasis ladder. No colour and no emphasis sets nothing, so the colour is inherited. */
+  &:where(.rt-emphasis-loud) {
+    color: var(--gray-ink);
+  }
+  &:where(.rt-emphasis-medium) {
+    color: var(--gray-ink-muted);
+  }
+  &:where(.rt-emphasis-quiet) {
+    color: var(--gray-ink-faint);
+  }
   &:where([data-accent-color]) {
-    color: var(--accent-a11);
+    color: var(--accent-ink);
   }
-
-  &:where([data-accent-color].rt-high-contrast),
-  :where([data-accent-color]:not(.radix-themes)) &:where(.rt-high-contrast) {
-    color: var(--accent-12);
+  &:where([data-accent-color].rt-emphasis-medium) {
+    color: var(--accent-ink-muted);
+  }
+  &:where([data-accent-color].rt-emphasis-quiet) {
+    color: var(--accent-ink-faint);
   }
 
   /* stylelint-disable selector-max-type */

package/src/components/text.props.tsx

@@ -1,6 +1,6 @@
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { colorPropDef } from '../props/color.prop.js';
-import { highContrastPropDef } from '../props/high-contrast.prop.js';
+import { emphasisPropDef } from '../props/emphasis.prop.js';
 import { leadingTrimPropDef } from '../props/leading-trim.prop.js';
 import { textAlignPropDef } from '../props/text-align.prop.js';
 import { textWrapPropDef } from '../props/text-wrap.prop.js';
@@ -29,7 +29,7 @@ const textPropDefs = {
   ...truncatePropDef,
   ...textWrapPropDef,
   ...colorPropDef,
-  ...highContrastPropDef,
+  ...emphasisPropDef,
 } satisfies {
   as: PropDef<(typeof as)[number]>;
   size: PropDef<(typeof sizes)[number]>;

package/src/components/theme-panel.tsx

@@ -476,7 +476,7 @@ const ThemePanelContent = React.forwardRef<ThemePanelContentElement, ThemePanelC
                     </Theme>
                   </label>
                   <Box asChild pt="2">
-                    <Text asChild size="1" color="gray">
+                    <Text asChild size="1" emphasis="medium">
                       <label htmlFor={`theme-panel-radius-${value}`}>{upperFirst(value)}</label>
                     </Text>
                   </Box>

package/src/components/theme.props.tsx

@@ -64,7 +64,7 @@ const themePropDefs = {
    * @link
    * https://www.radix-ui.com/themes/docs/theme/visual-style
    */
-  radius: { type: 'enum', values: radii, default: 'medium' },
+  radius: { type: 'enum', values: radii, default: 'full' },
   /**
    * Sets a scaling multiplier for values like spacing, font sizes, line heights, etc. are scaled.
    *

package/src/components/user-card.props.tsx

@@ -1,6 +1,5 @@
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { accentColorPropDef } from '../props/color.prop.js';
-import { highContrastPropDef } from '../props/high-contrast.prop.js';
 import { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
@@ -27,7 +26,6 @@ const userCardPropDefs = {
 
   // Card styling
   ...accentColorPropDef,
-  ...highContrastPropDef,
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   flush: { type: 'boolean', default: false },
 } satisfies {

package/src/components/user-card.tsx

@@ -65,14 +65,13 @@ const UserCard = React.forwardRef<UserCardElement, UserCardProps>((props, forwar
         src={src}
         fallback={fallback!}
         color={color}
-        highContrast={props.highContrast}
       />
       <Flex direction="column" gap="0" style={{ minWidth: 0 }}>
         <Text size={sizes.name as any} weight="medium" truncate>
           {name}
         </Text>
         {description && (
-          <Text size={sizes.description as any} color="gray" truncate>
+          <Text size={sizes.description as any} emphasis="medium" truncate>
             {description}
           </Text>
         )}

package/src/components/virtual-menu.tsx

@@ -3,7 +3,8 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useMenuContext, menuSizeToItemHeight } from './_internal/menu-context.js';
+import { useMenuContext, getMenuItemHeight } from './_internal/menu-context.js';
+import { useThemeContext } from './theme.js';
 
 /**
  * VirtualMenu - A virtualized menu component for rendering large lists efficiently.
@@ -192,13 +193,16 @@ function VirtualMenuRoot<T>({
   const menuId = React.useId();
   const parentRef = React.useRef<HTMLDivElement>(null);
   const [highlightedIndex, setHighlightedIndex] = React.useState<number>(-1);
-  const { isInsideMenu, size: contextSize } = useMenuContext();
-
-  // Resolve size: prop > context > default '2'
-  const resolvedSize = sizeProp ?? contextSize ?? '2';
-  
-  // Resolve item height: explicit prop > derived from size
-  const estimatedItemSize = estimatedItemSizeProp ?? menuSizeToItemHeight[resolvedSize];
+  const { isInsideMenu, size: contextSize, itemHeight: contextItemHeight } = useMenuContext();
+  const { scaling } = useThemeContext();
+
+  // Resolve item height: explicit prop > own size > parent menu > default size '2'.
+  // Heights follow the theme scaling, like the --base-menu-item-height token.
+  const estimatedItemSize =
+    estimatedItemSizeProp ??
+    (sizeProp
+      ? getMenuItemHeight(sizeProp, scaling)
+      : (contextItemHeight ?? getMenuItemHeight(contextSize ?? '2', scaling)));
 
   // Validate props
   if (!itemLabel && !RenderItem) {

package/src/hooks/use-breakpoint.ts

@@ -87,6 +87,9 @@ function getServerSnapshot(): Breakpoint {
 const getReadySnapshot = () => true;
 const getReadyServerSnapshot = () => false;
 
+const noopSubscribe = () => () => {};
+const getInitialSnapshot = (): Breakpoint => 'initial';
+
 /**
  * The current breakpoint, and whether it has been resolved against a real
  * viewport yet (`false` on the server and during hydration).
@@ -95,10 +98,23 @@ const getReadyServerSnapshot = () => false;
  * effect. On a client render the very first pass already has the real
  * breakpoint, instead of rendering the whole shell at `initial` and correcting
  * it after the browser has painted.
+ *
+ * Pass `enabled = false` to skip the subscription (the breakpoint then reads as
+ * `initial`).
  */
-export function useBreakpoint(): { breakpoint: Breakpoint; ready: boolean } {
-  const breakpoint = React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-  const ready = React.useSyncExternalStore(subscribe, getReadySnapshot, getReadyServerSnapshot);
+export function useBreakpoint(enabled = true): { breakpoint: Breakpoint; ready: boolean } {
+  // Callers with a non-responsive value pass `enabled = false` so they neither
+  // subscribe to the media queries nor re-render when the viewport crosses one.
+  const breakpoint = React.useSyncExternalStore(
+    enabled ? subscribe : noopSubscribe,
+    enabled ? getSnapshot : getInitialSnapshot,
+    getServerSnapshot,
+  );
+  const ready = React.useSyncExternalStore(
+    enabled ? subscribe : noopSubscribe,
+    getReadySnapshot,
+    getReadyServerSnapshot,
+  );
 
   return React.useMemo(() => ({ breakpoint, ready }), [breakpoint, ready]);
 }

package/src/props/color.prop.ts

@@ -16,7 +16,7 @@ const colorPropDef = {
 };
 
 // 1. When used on components that compose Text, sets the color of the text to the current accent.
-// 2. Defines accent color for descendant text components with `highContrast={true}`.
+// 2. Re-declares the accent role tokens (`--accent-ink`, `--accent-solid`, ...) that descendants read.
 const accentColorPropDef = {
   color: {
     type: 'enum',

package/src/props/emphasis.prop.ts

@@ -0,0 +1,19 @@
+import type { PropDef } from './prop-def.js';
+
+const emphases = ['loud', 'medium', 'quiet'] as const;
+
+// Text-first components only (Text, Heading, Blockquote, Code, DataList.Label).
+// No colour + emphasis reads the gray ink ladder; colour + emphasis reads the accent ink ladder.
+// Components that need a different default (DataList.Label: 'medium') spread this def and override `default`.
+const emphasisPropDef = {
+  emphasis: {
+    type: 'enum',
+    className: 'rt-emphasis',
+    values: emphases,
+    default: undefined,
+  },
+} satisfies {
+  emphasis: PropDef<(typeof emphases)[number]>;
+};
+
+export { emphasisPropDef, emphases };

package/src/props/index.ts

@@ -4,9 +4,9 @@ export * from './prop-def.js';
 // Individual props
 export * from './as-child.prop.js';
 export * from './color.prop.js';
+export * from './emphasis.prop.js';
 export * from './gap.props.js';
 export * from './height.props.js';
-export * from './high-contrast.prop.js';
 export * from './layout.props.js';
 export * from './leading-trim.prop.js';
 export * from './margin.props.js';