@womp/kookie-ui 0.6.2 → 0.7.0

package/src/components/blockquote.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 { textWrapPropDef } from '../props/text-wrap.prop.js';
 import { truncatePropDef } from '../props/truncate.prop.js';
 import { weightPropDef } from '../props/weight.prop.js';
@@ -19,7 +19,7 @@ const blockquotePropDefs = {
   },
   ...weightPropDef,
   ...colorPropDef,
-  ...highContrastPropDef,
+  ...emphasisPropDef,
   ...truncatePropDef,
   ...textWrapPropDef,
 } satisfies {

package/src/components/callout.css

@@ -4,7 +4,7 @@
   align-items: flex-start;
   justify-content: flex-start;
   text-align: left;
-  color: var(--accent-a11);
+  color: var(--accent-ink);
   transition: var(--transition-card);
   border-radius: var(--callout-border-radius);
 
@@ -38,10 +38,6 @@
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
-
   /* Focus styles for accessibility */
   &:where(:focus-visible) {
     outline: 2px solid var(--accent-8);
@@ -139,11 +135,7 @@
 
 .rt-CalloutRoot:where(.rt-variant-soft) {
   background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
-  color: var(--accent-a11);
-
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
+  color: var(--accent-ink);
 }
 
 /* surface */
@@ -151,22 +143,14 @@
 .rt-CalloutRoot:where(.rt-variant-surface) {
   background-color: color-mix(in srgb, var(--accent-a2) calc(var(--material-alpha) * 100%), var(--accent-2) var(--material-blend));
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
-  color: var(--accent-a11);
-
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
+  color: var(--accent-ink);
 }
 
 /* outline */
 
 .rt-CalloutRoot:where(.rt-variant-outline) {
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-a6) calc(var(--material-alpha) * 100%), var(--accent-6) var(--material-blend));
-  color: color-mix(in srgb, var(--accent-a11) calc(var(--material-alpha) * 100%), var(--accent-11) var(--material-blend));
-
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
+  color: var(--accent-ink);
 }
 
 /* classic */
@@ -175,7 +159,7 @@
   --classic-surface: var(--color-surface-solid);
   background-color: var(--classic-surface);
   box-shadow: var(--shadow-2);
-  color: var(--accent-a11);
+  color: var(--accent-ink);
   transition: var(--transition-text-field);
 
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
@@ -189,8 +173,4 @@
   &:where([data-panel-background='translucent'], [data-material='translucent']) {
     --classic-surface: var(--color-surface-translucent);
   }
-
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
 }

package/src/components/callout.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 type { PropDef } from '../props/prop-def.js';
 
@@ -14,7 +13,6 @@ const calloutRootPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
   ...accentColorPropDef,
-  ...highContrastPropDef,
   material: { type: 'enum', values: materials, default: undefined },
   /**
    * @deprecated Use `material` prop instead. This prop will be removed in a future version.

package/src/components/chatbar.tsx

@@ -721,7 +721,7 @@ const Root = React.forwardRef<RootElement, RootProps>((props, forwardedRef) => {
                   {dragActive && (
                     <div className="rt-ChatbarDropOverlay" aria-hidden>
                       <div className="rt-ChatbarDropContent">
-                        <Text color="gray" size={size} weight="medium">
+                        <Text emphasis="medium" size={size} weight="medium">
                           Drop files here to attach
                         </Text>
                       </div>
@@ -1088,7 +1088,11 @@ const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>((props, for
               <Text size={ctx.size} weight="medium" truncate>
                 {attachment.name}
               </Text>
-              <Text size="1" color={attachment.status === 'error' ? 'red' : 'gray'}>
+              <Text
+                size="1"
+                color={attachment.status === 'error' ? 'red' : undefined}
+                emphasis={attachment.status === 'error' ? undefined : 'medium'}
+              >
                 {sizeLabel}
                 {statusLabel ? ` · ${statusLabel}` : ''}
               </Text>
@@ -1100,7 +1104,6 @@ const Attachment = React.forwardRef<HTMLDivElement, AttachmentProps>((props, for
               aria-label={`Remove ${attachment.name}`}
               size="1"
               variant="classic"
-              highContrast
               color="gray"
               onClick={handleRemove}
             >

package/src/components/checkbox-cards.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 { gridPropDefs } from './grid.props.js';
 
 import type { PropDef } from '../props/prop-def.js';
@@ -15,7 +14,6 @@ const checkboxCardsRootPropDefs = {
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'surface' },
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   ...colorPropDef,
-  ...highContrastPropDef,
   columns: { ...gridPropDefs.columns, default: 'repeat(auto-fit, minmax(200px, 1fr))' },
   gap: { ...gridPropDefs.gap, default: '4' },
 } satisfies {

package/src/components/checkbox-cards.tsx

@@ -29,7 +29,6 @@ const useCheckboxGroupScope = createCheckboxGroupScope();
 type CheckboxCardsContextValue = {
   size?: Responsive<(typeof checkboxCardsRootPropDefs.size.values)[number]>;
   variant?: (typeof checkboxCardsRootPropDefs.variant.values)[number];
-  highContrast?: boolean;
 };
 
 const [CheckboxCardsProvider, useCheckboxCardsContext] =
@@ -61,7 +60,6 @@ const CheckboxCardsRoot = React.forwardRef<CheckboxCardsRootElement, CheckboxCar
         scope={__scopeCheckboxCards}
         size={props.size}
         variant={props.variant}
-        highContrast={props.highContrast}
       >
         <Grid asChild>
           <CheckboxGroupPrimitive.Root
@@ -91,11 +89,10 @@ const CheckboxCardsItem = React.forwardRef<
   const checkboxGroupScope = useCheckboxGroupScope(__scopeCheckboxCards);
 
   const { className: checkboxClassName } = extractProps(
-    // Pass size / highContrast values from the context and variant to generate styles
+    // Pass size and variant values from the context to generate styles
     {
       size: context?.size,
       variant: context?.variant || 'solid',
-      highContrast: context?.highContrast,
     },
     // Pass size & variant prop defs to allow it to be extracted
     baseCheckboxPropDefs,

package/src/components/checkbox-group.tsx

@@ -42,7 +42,6 @@ const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGro
   (
     {
       color = checkboxGroupRootPropDefs.color.default,
-      highContrast = checkboxGroupRootPropDefs.highContrast.default,
       size = checkboxGroupRootPropDefs.size.default,
       variant = checkboxGroupRootPropDefs.variant.default,
       ...props
@@ -56,7 +55,6 @@ const CheckboxGroupRoot = React.forwardRef<CheckboxGroupRootElement, CheckboxGro
         scope={__scopeCheckboxGroup}
         color={color}
         size={size}
-        highContrast={highContrast}
         variant={variant}
       >
         <CheckboxGroupPrimitive.Root

package/src/components/code.css

@@ -93,35 +93,37 @@
   --code-variant-font-size-adjust: var(--code-font-size-adjust);
   padding: 0;
 
+  /* Same ladder as Text. No colour and no emphasis inherits the surrounding colour. */
+  &: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);
   }
 }
 
 /* solid */
 
 .rt-Code:where(.rt-variant-solid) {
-  background-color: var(--accent-a9);
-  color: var(--accent-contrast);
+  /* Text sits on a fill, so emphasis does not change it. Gray fills with step 12 via the tokens. */
+  background-color: var(--accent-solid-a);
+  color: var(--accent-solid-contrast);
 
   &::selection {
-    background-color: var(--accent-7);
-    color: var(--accent-12);
-  }
-
-  &:where(.rt-high-contrast) {
-    background-color: var(--accent-12);
-    color: var(--accent-1);
-
-    &::selection {
-      background-color: var(--accent-a11);
-      color: var(--accent-1);
-    }
+    background-color: var(--accent-solid-selection);
+    color: var(--accent-solid-selection-contrast);
   }
 
   :where(.rt-Link) &,
@@ -130,12 +132,8 @@
     isolation: isolate;
     @media (hover: hover) {
       &:where(:hover) {
-        background-color: var(--accent-10);
-      }
-      &:where(.rt-high-contrast:hover) {
-        background-color: var(--accent-12);
-        /* Re-use base button hover filter */
-        filter: var(--base-button-solid-high-contrast-hover-filter);
+        background-color: var(--accent-solid-hover);
+        filter: var(--accent-solid-hover-filter);
       }
     }
   }
@@ -145,11 +143,7 @@
 
 .rt-Code:where(.rt-variant-soft) {
   background-color: var(--accent-a2);
-  color: var(--accent-a11);
-
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
+  color: var(--accent-ink);
 
   :where(.rt-Link) &,
   &:where(:any-link, button) {
@@ -166,12 +160,7 @@
 
 .rt-Code:where(.rt-variant-outline) {
   box-shadow: inset 0 0 0 max(1px, 0.033em) var(--accent-a8);
-  color: var(--accent-a11);
-
-  &:where(.rt-high-contrast) {
-    box-shadow: inset 0 0 0 max(1px, 0.033em) var(--accent-a7), inset 0 0 0 max(1px, 0.033em) var(--gray-a11);
-    color: var(--accent-12);
-  }
+  color: var(--accent-ink);
 
   :where(.rt-Link) &,
   &:where(:any-link, button) {
@@ -183,3 +172,14 @@
     }
   }
 }
+
+/* soft and outline: emphasis fades the text along the accent ink ladder; the tint and border stay */
+
+.rt-Code:where(.rt-variant-soft, .rt-variant-outline) {
+  &:where(.rt-emphasis-medium) {
+    color: var(--accent-ink-muted);
+  }
+  &:where(.rt-emphasis-quiet) {
+    color: var(--accent-ink-faint);
+  }
+}

package/src/components/code.props.tsx

@@ -1,6 +1,6 @@
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { accentColorPropDef } from '../props/color.prop.js';
-import { highContrastPropDef } from '../props/high-contrast.prop.js';
+import { emphasisPropDef } from '../props/emphasis.prop.js';
 import { textWrapPropDef } from '../props/text-wrap.prop.js';
 import { truncatePropDef } from '../props/truncate.prop.js';
 import { weightPropDef } from '../props/weight.prop.js';
@@ -21,7 +21,7 @@ const codePropDefs = {
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
   ...weightPropDef,
   ...accentColorPropDef,
-  ...highContrastPropDef,
+  ...emphasisPropDef,
   ...truncatePropDef,
   ...textWrapPropDef,
 } satisfies {

package/src/components/combobox.css

@@ -89,16 +89,10 @@
  * =============================================================================
  */
 
-/* Solid variant */
+/* Solid variant. Gray fills with step 12 through the solid tokens */
 .rt-BaseMenuContent:where(.rt-variant-solid) :where(.rt-ComboboxItem[data-selected='true']) {
-  background-color: var(--accent-9);
-  color: var(--accent-contrast);
-}
-
-/* Solid high contrast */
-.rt-BaseMenuContent:where(.rt-variant-solid.rt-high-contrast) :where(.rt-ComboboxItem[data-selected='true']) {
-  background-color: var(--accent-12);
-  color: var(--accent-1);
+  background-color: var(--accent-solid);
+  color: var(--accent-solid-contrast);
 }
 
 /* Muted text follows the highlight colour. Badges keep their own colours.
@@ -117,7 +111,7 @@
   background-color: var(--accent-a4);
 }
 
-:where(.rt-BaseMenuContent.rt-variant-soft) .rt-ComboboxItem:where([data-selected='true']) :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
+:where(.rt-BaseMenuContent.rt-variant-soft) .rt-ComboboxItem:where([data-selected='true']) :where(.rt-Text.rt-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
   color: var(--gray-11);
 }
 

package/src/components/combobox.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 { widthPropDefs } from '../props/width.props.js';
 import { heightPropDefs } from '../props/height.props.js';
@@ -9,14 +8,12 @@ import type { PropDef } from '../props/prop-def.js';
 const sizes = ['1', '2', '3'] as const;
 
 /**
- * Shared responsive sizing + high contrast support inherited by Combobox.Root.
+ * Shared responsive sizing inherited by Combobox.Root.
  */
 const comboboxRootPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
-  ...highContrastPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
-  highContrast: PropDef<boolean>;
 };
 
 const triggerVariants = ['classic', 'surface', 'soft', 'outline', 'ghost'] as const;
@@ -62,7 +59,6 @@ const comboboxContentPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: contentVariants, default: 'solid' },
   ...colorPropDef,
-  ...highContrastPropDef,
   material: { type: 'enum', values: materials, default: undefined },
   /** @deprecated Use `material`. */
   panelBackground: { type: 'enum', values: materials, default: undefined },

package/src/components/combobox.tsx

@@ -44,7 +44,7 @@ type ComboboxValue = string | null;
 type CommandFilter = (value: string, search: string, keywords?: string[]) => number;
 
 // Hoisted so extractProps' compiled prop-def cache (keyed by object identity) hits.
-const triggerSizingPropDefs = { size: comboboxRootPropDefs.size, highContrast: comboboxRootPropDefs.highContrast };
+const triggerSizingPropDefs = { size: comboboxRootPropDefs.size };
 const contentSizePropDefs = { size: comboboxContentPropDefs.size };
 
 const warned = new Set<string>();
@@ -92,7 +92,6 @@ interface ComboboxContextValue {
   displayValue?: string;
   setOpen: (open: boolean) => void;
   size?: ComboboxRootOwnProps['size'];
-  highContrast?: boolean;
   placeholder?: string;
   searchPlaceholder?: string;
   disabled?: boolean;
@@ -210,7 +209,6 @@ const ComboboxRoot: React.FC<ComboboxRootProps> = (props) => {
   const {
     children,
     size = comboboxRootPropDefs.size.default,
-    highContrast = comboboxRootPropDefs.highContrast.default,
     value: valueProp,
     defaultValue = null,
     onValueChange,
@@ -283,7 +281,6 @@ const ComboboxRoot: React.FC<ComboboxRootProps> = (props) => {
       displayValue: resolvedDisplayValue,
       setOpen: handleOpenChange,
       size,
-      highContrast,
       placeholder,
       searchPlaceholder,
       disabled,
@@ -294,7 +291,7 @@ const ComboboxRoot: React.FC<ComboboxRootProps> = (props) => {
       triggerRef,
       getTriggerLabel,
     }),
-    [value, resolvedDisplayValue, handleOpenChange, size, highContrast, placeholder, searchPlaceholder, disabled, color, loop, shouldFilter, filter, getTriggerLabel],
+    [value, resolvedDisplayValue, handleOpenChange, size, placeholder, searchPlaceholder, disabled, color, loop, shouldFilter, filter, getTriggerLabel],
   );
 
   const searchContextValue = React.useMemo<ComboboxSearchContextValue>(() => ({ value: searchValue, setValue: setSearchValue }), [searchValue, setSearchValue]);
@@ -342,7 +339,7 @@ const ComboboxTrigger = React.forwardRef<ComboboxTriggerElement, ComboboxTrigger
     onKeyDown,
     type: buttonType,
     ...triggerProps
-  } = extractProps({ size: ctx.size, highContrast: ctx.highContrast, ...props }, triggerSizingPropDefs, comboboxTriggerPropDefs, marginPropDefs);
+  } = extractProps({ size: ctx.size, ...props }, triggerSizingPropDefs, comboboxTriggerPropDefs, marginPropDefs);
 
   // `panelBackground` has a className prop def, so extractProps strips it.
   const { panelBackground } = props;
@@ -500,7 +497,6 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
   const material = props.material ?? props.panelBackground ?? themeContext.material ?? themeContext.panelBackground;
   const size = props.size ?? ctx.size ?? comboboxContentPropDefs.size.default;
   const variant = props.variant ?? comboboxContentPropDefs.variant.default;
-  const highContrast = props.highContrast ?? ctx.highContrast ?? comboboxContentPropDefs.highContrast.default;
 
   const {
     className,
@@ -514,7 +510,7 @@ const ComboboxContent = React.forwardRef<ComboboxContentElement, ComboboxContent
     'aria-label': _ariaLabel,
     'aria-labelledby': ariaLabelledByProp,
     ...contentProps
-  } = extractProps({ ...props, size, variant, highContrast }, comboboxContentPropDefs);
+  } = extractProps({ ...props, size, variant }, comboboxContentPropDefs);
 
   const resolvedColor = color || ctx.color || themeContext.accentColor;
 

package/src/components/context-menu.tsx

@@ -59,7 +59,6 @@ type ContextMenuContentContextValue = {
   size?: ContextMenuSurfaceProps['size'];
   variant?: ContextMenuSurfaceProps['variant'];
   color?: ContextMenuSurfaceProps['color'];
-  highContrast?: ContextMenuSurfaceProps['highContrast'];
   material?: ContextMenuSurfaceProps['material'];
 };
 const ContextMenuContentContext = React.createContext<ContextMenuContentContextValue>({});
@@ -88,7 +87,6 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
     const {
       size = contextMenuContentPropDefs.size.default,
       variant = contextMenuContentPropDefs.variant.default,
-      highContrast = contextMenuContentPropDefs.highContrast.default,
     } = props;
     const {
       className,
@@ -107,8 +105,8 @@ const ContextMenuContent = React.forwardRef<ContextMenuContentElement, ContextMe
     const scalarSize = useResolvedResponsiveValue(size, contextMenuContentPropDefs.size.default);
 
     const contextValue = React.useMemo(
-      () => ({ size, variant, color: resolvedColor, highContrast, material }),
-      [size, variant, resolvedColor, highContrast, material],
+      () => ({ size, variant, color: resolvedColor, material }),
+      [size, variant, resolvedColor, material],
     );
 
     const body = (
@@ -368,7 +366,6 @@ const ContextMenuSubContent = React.forwardRef<
   const size = props.size ?? parent.size;
   const variant = props.variant ?? parent.variant;
   const color = props.color ?? parent.color;
-  const highContrast = props.highContrast ?? parent.highContrast;
   const material =
     props.material ?? props.panelBackground ?? parent.material ?? resolveMenuMaterial(undefined, undefined, themeContext);
 
@@ -382,13 +379,13 @@ const ContextMenuSubContent = React.forwardRef<
     panelBackground: _panelBackground,
     virtualized = false,
     ...subContentProps
-  } = extractProps({ ...props, size, variant, highContrast }, contextMenuSubContentPropDefs);
+  } = extractProps({ ...props, size, variant }, contextMenuSubContentPropDefs);
 
   const scalarSize = useResolvedResponsiveValue(size, contextMenuSubContentPropDefs.size.default);
 
   const contextValue = React.useMemo(
-    () => ({ size, variant, color, highContrast, material }),
-    [size, variant, color, highContrast, material],
+    () => ({ size, variant, color, material }),
+    [size, variant, color, material],
   );
 
   const body = (

package/src/components/data-list.css

@@ -8,18 +8,23 @@
 
 .rt-DataListLabel {
   display: flex;
-  color: var(--gray-a11);
+  color: var(--gray-ink-muted);
 
-  &:where(.rt-high-contrast) {
-    color: var(--gray-12);
+  /* Emphasis ladder. The prop defaults to 'medium', which matches the base colour above. */
+  &:where(.rt-emphasis-loud) {
+    color: var(--gray-ink);
+  }
+  &:where(.rt-emphasis-quiet) {
+    color: var(--gray-ink-faint);
   }
-
   &:where([data-accent-color]) {
-    color: var(--accent-a11);
-
-    &:where(.rt-high-contrast) {
-      color: var(--accent-12);
-    }
+    color: var(--accent-ink);
+  }
+  &:where([data-accent-color].rt-emphasis-medium) {
+    color: var(--accent-ink-muted);
+  }
+  &:where([data-accent-color].rt-emphasis-quiet) {
+    color: var(--accent-ink-faint);
   }
 }
 

package/src/components/data-list.props.tsx

@@ -1,5 +1,5 @@
 import { colorPropDef } from '../props/color.prop.js';
-import { highContrastPropDef } from '../props/high-contrast.prop.js';
+import { emphasisPropDef, emphases } from '../props/emphasis.prop.js';
 import { leadingTrimPropDef } from '../props/leading-trim.prop.js';
 import { widthPropDefs } from '../props/width.props.js';
 
@@ -48,7 +48,10 @@ const dataListItemPropDefs = {
 const dataListLabelPropDefs = {
   ...widthPropDefs,
   ...colorPropDef,
-  ...highContrastPropDef,
+  // Labels read as secondary copy by default; 'loud' gives them full-strength ink.
+  emphasis: { ...emphasisPropDef.emphasis, default: 'medium' },
+} satisfies {
+  emphasis: PropDef<(typeof emphases)[number]>;
 };
 
 export { dataListRootPropDefs, dataListItemPropDefs, dataListLabelPropDefs };

package/src/components/dropdown-menu.tsx

@@ -92,7 +92,6 @@ type DropdownMenuContentContextValue = {
   size?: DropdownMenuSurfaceProps['size'];
   variant?: DropdownMenuSurfaceProps['variant'];
   color?: DropdownMenuSurfaceProps['color'];
-  highContrast?: DropdownMenuSurfaceProps['highContrast'];
   material?: DropdownMenuSurfaceProps['material'];
 };
 const DropdownMenuContentContext = React.createContext<DropdownMenuContentContextValue>({});
@@ -140,7 +139,6 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
     const {
       size = dropdownMenuContentPropDefs.size.default,
       variant = dropdownMenuContentPropDefs.variant.default,
-      highContrast = dropdownMenuContentPropDefs.highContrast.default,
     } = props;
     const {
       className,
@@ -182,8 +180,8 @@ const DropdownMenuContent = React.forwardRef<DropdownMenuContentElement, Dropdow
     };
 
     const contextValue = React.useMemo(
-      () => ({ size, variant, color: resolvedColor, highContrast, material }),
-      [size, variant, resolvedColor, highContrast, material],
+      () => ({ size, variant, color: resolvedColor, material }),
+      [size, variant, resolvedColor, material],
     );
 
     const contentBody = (
@@ -671,7 +669,6 @@ const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, Dropdo
     const size = props.size ?? parent.size;
     const variant = props.variant ?? parent.variant;
     const color = props.color ?? parent.color;
-    const highContrast = props.highContrast ?? parent.highContrast;
     const material =
       props.material ?? props.panelBackground ?? parent.material ?? resolveMenuMaterial(undefined, undefined, themeContext);
 
@@ -685,13 +682,13 @@ const CascadeSubContent = React.forwardRef<DropdownMenuSubContentElement, Dropdo
       panelBackground: _panelBackground,
       virtualized = false,
       ...subContentProps
-    } = extractProps({ ...props, size, variant, highContrast }, dropdownMenuSubContentPropDefs);
+    } = extractProps({ ...props, size, variant }, dropdownMenuSubContentPropDefs);
 
     const scalarSize = useResolvedResponsiveValue(size, dropdownMenuSubContentPropDefs.size.default);
 
     const contextValue = React.useMemo(
-      () => ({ size, variant, color, highContrast, material }),
-      [size, variant, color, highContrast, material],
+      () => ({ size, variant, color, material }),
+      [size, variant, color, material],
     );
 
     const body = (
@@ -767,7 +764,6 @@ const DrillDownPanel = React.forwardRef<DropdownMenuSubContentElement, DrillDown
       size: _size,
       variant: _variant,
       color: _color,
-      highContrast: _highContrast,
       material: _material,
       panelBackground: _panelBackground,
       ...panelProps

package/src/components/heading.css

@@ -21,13 +21,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);
   }
 }
 

package/src/components/heading.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';
@@ -30,7 +30,7 @@ const headingPropDefs = {
   ...truncatePropDef,
   ...textWrapPropDef,
   ...colorPropDef,
-  ...highContrastPropDef,
+  ...emphasisPropDef,
 } satisfies {
   as: PropDef<(typeof as)[number]>;
   size: PropDef<(typeof sizes)[number]>;