@womp/kookie-ui 0.6.2 → 0.8.0

package/src/components/shell.types.ts

@@ -18,24 +18,38 @@ export type PaneSizePersistence = {
   save?: (size: number) => void | Promise<void>;
 };
 
+/**
+ * Why a pane's open state changed. Since 0.8.0 only a user action is reported:
+ * `toggle` for a Trigger, a handle double-click or a drag past
+ * `collapseThreshold`, and `dismiss` for Escape or a press on the scrim.
+ * `init`, `responsive`, `panel` and `left` are kept in the types for
+ * compatibility and are never sent.
+ */
+export type PaneOpenChangeReason = 'toggle' | 'dismiss' | 'init' | 'responsive';
+
 export interface PaneBaseProps extends React.ComponentPropsWithoutRef<'div'> {
   presentation?: ResponsivePresentation;
   expandedSize?: number;
   minSize?: number;
   maxSize?: number;
-  height?: string | number;
   resizable?: boolean;
   collapsible?: boolean;
+  /** @deprecated Use `onOpenChange`. Still called when a user's toggle or a controlled prop changes whether the pane is shown; never on mount or when the window crosses a breakpoint. */
   onExpand?: () => void;
+  /** @deprecated Use `onOpenChange`. Still called when a user's toggle or a controlled prop changes whether the pane is shown; never on mount or when the window crosses a breakpoint. */
   onCollapse?: () => void;
   onResize?: (size: number) => void;
-  resizer?: React.ReactNode;
   onResizeStart?: (size: number) => void;
   onResizeEnd?: (size: number) => void;
+  /** @deprecated Removed in 1.0. Snap in your own `onSizeChange` and pass `size`. */
   snapPoints?: number[];
+  /** @deprecated Removed in 1.0, with `snapPoints`. */
   snapTolerance?: number;
+  /** @deprecated Removed in 1.0. Close the pane from your own `onResizeEnd`. */
   collapseThreshold?: number;
+  /** @deprecated Removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`. */
   paneId?: string;
+  /** @deprecated Removed in 1.0. Keep the size in your own state with `size`/`onSizeChange`. */
   persistence?: PaneSizePersistence;
 }
 
@@ -49,8 +63,14 @@ export const _BREAKPOINTS = {
 
 export type Breakpoint = 'initial' | keyof typeof _BREAKPOINTS;
 
+/** Every breakpoint, smallest first. The stylesheet's @media blocks follow this order. */
+export const SHELL_BREAKPOINTS: readonly Breakpoint[] = ['initial', 'xs', 'sm', 'md', 'lg', 'xl'];
+
 export type PaneTarget = 'left' | 'rail' | 'panel' | 'sidebar' | 'inspector' | 'bottom';
 
+/** The panes a Trigger can drive. `left` is the deprecated name for `rail`. */
+export type PaneName = Exclude<PaneTarget, 'left'>;
+
 /**
  * CSS custom property key type for type-safe style objects.
  * Allows any string prefixed with '--'.

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/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/hooks/use-breakpoint.ts

@@ -84,6 +84,15 @@ function getServerSnapshot(): Breakpoint {
   return 'initial';
 }
 
+/**
+ * The breakpoint right now, outside React's render. For an effect that needs
+ * the answer at the moment it runs rather than the one its render saw.
+ */
+export function readBreakpoint(): Breakpoint {
+  if (typeof window === 'undefined') return 'initial';
+  return computeBreakpoint();
+}
+
 const getReadySnapshot = () => true;
 const getReadyServerSnapshot = () => false;
 

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';