@womp/kookie-ui 0.6.2 → 0.7.0

package/src/components/_internal/base-menu.css

@@ -283,7 +283,7 @@
  *                                                                                                 *
  ***************************************************************************************************/
 .rt-BaseMenuItem:where([data-accent-color]) {
-  color: var(--accent-a11);
+  color: var(--accent-ink);
 }
 .rt-BaseMenuItem:where([data-disabled]) {
   color: var(--gray-a8);
@@ -292,10 +292,6 @@
   color: var(--gray-a11);
 }
 
-/* Ensure gray text appears muted in non-highlighted state */
-.rt-BaseMenuItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
-  color: var(--gray-a11);
-}
 /* Kbd sets its own color and loads later, so a disabled item's shortcut needs the extra class to dim */
 /* stylelint-disable-next-line selector-max-specificity */
 .rt-BaseMenuItem:where([data-disabled]) .rt-Kbd {
@@ -321,12 +317,13 @@
     background-color: var(--gray-a3);
   }
 
+  /* Gray fills with step 12 automatically; a coloured item re-resolves the solid tokens */
   & :where(.rt-BaseMenuItem[data-highlighted]) {
-    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" */
@@ -339,40 +336,6 @@
       color: inherit !important;
     }
   }
-
-  &:where(.rt-high-contrast) {
-    & :where(.rt-BaseMenuItem[data-highlighted]) {
-      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;
-      }
-
-      &: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;
-        }
-      }
-    }
-  }
 }
 
 /* soft variant specific styles */
@@ -388,8 +351,8 @@
   & :where(.rt-BaseMenuItem[data-highlighted]) {
     background-color: var(--accent-4);
 
-    /* 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;
     }
   }
@@ -402,21 +365,6 @@
   & :where(.rt-BaseMenuItem[data-highlighted]:focus-visible) {
     box-shadow: inset 0 0 0 1px var(--accent-a8);
   }
-
-  &:where(.rt-high-contrast) {
-    & :where(.rt-BaseMenuItem[data-highlighted]) {
-      background-color: var(--accent-5);
-      color: var(--accent-12);
-
-      & :where(.rt-BaseMenuSubTriggerIcon) {
-        color: var(--accent-12);
-      }
-    }
-
-    &:where([data-panel-background='translucent']) :where(.rt-BaseMenuItem[data-highlighted]) {
-      background-color: var(--accent-a5);
-    }
-  }
 }
 
 /* Forced colors support */

package/src/components/_internal/base-menu.props.ts

@@ -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';
 
@@ -39,7 +38,6 @@ const baseMenuSharedPropDefs = {
     default: undefined,
   },
   ...colorPropDef,
-  ...highContrastPropDef,
 } satisfies {
   size: PropDef<(typeof contentSizes)[number]>;
   variant: PropDef<(typeof contentVariants)[number]>;

package/src/components/_internal/base-radio.css

@@ -106,21 +106,11 @@
     box-shadow: inset 0 0 0 1px var(--accent-9);
   }
   &:where(:checked, [data-state='checked'])::before {
-    background-color: var(--accent-9);
-    box-shadow: inset 0 0 0 1px var(--accent-9);
+    background-color: var(--accent-solid);
+    box-shadow: inset 0 0 0 1px var(--accent-solid);
   }
   &::after {
-    background-color: var(--accent-contrast);
-  }
-
-  &:where(.rt-high-contrast) {
-    &:where(:checked, [data-state='checked'])::before {
-      background-color: var(--accent-12);
-      box-shadow: inset 0 0 0 1px var(--accent-12);
-    }
-    &::after {
-      background-color: var(--gray-1);
-    }
+    background-color: var(--accent-solid-contrast);
   }
 
   &:where(:disabled, [data-disabled])::before {
@@ -139,7 +129,7 @@
   top: var(--classic-elevation-offset);
   
   &:where(:not(:checked), [data-state='unchecked'])::before {
-    color: var(--accent-a11);
+    color: var(--accent-ink);
     background-color: var(--color-surface-solid);
     box-shadow: var(--shadow-2);
 
@@ -176,13 +166,7 @@
     }
   }
   &::after {
-    background-color: var(--accent-a11);
-  }
-
-  &:where(.rt-high-contrast) {
-    &::after {
-      color: var(--accent-12);
-    }
+    background-color: var(--accent-ink);
   }
 
   &:where(:active:not(:disabled, [data-disabled])) {
@@ -241,13 +225,7 @@
     }
   }
   &::after {
-    background-color: var(--accent-a11);
-  }
-
-  &:where(.rt-high-contrast) {
-    &::after {
-      background-color: var(--accent-12);
-    }
+    background-color: var(--accent-ink);
   }
 
   &:where(:focus-visible)::before {
@@ -270,23 +248,20 @@
 .rt-BaseRadioRoot:where(.rt-variant-outline) {
   &:where(:not(:checked), [data-state='unchecked'])::before {
     box-shadow: inset 0 0 0 1px var(--accent-6);
-    color: var(--accent-11);
+    color: var(--accent-ink);
 
     /* Theme-level translucent override */
     :where([data-panel-background='translucent'], [data-material='translucent']) & {
       box-shadow: inset 0 0 0 1px var(--accent-a6);
-      color: var(--accent-a11);
     }
 
     /* Component-level overrides (higher specificity) */
     &:where([data-panel-background='solid'], [data-material='solid']) {
       box-shadow: inset 0 0 0 1px var(--accent-6);
-      color: var(--accent-11);
     }
 
     &:where([data-panel-background='translucent'], [data-material='translucent']) {
       box-shadow: inset 0 0 0 1px var(--accent-a6);
-      color: var(--accent-a11);
     }
   }
 
@@ -312,13 +287,7 @@
     }
   }
   &::after {
-    background-color: var(--accent-a11);
-  }
-
-  &:where(.rt-high-contrast) {
-    &::after {
-      background-color: var(--accent-12);
-    }
+    background-color: var(--accent-ink);
   }
 
   &:where(:disabled, [data-disabled])::before {
@@ -377,13 +346,7 @@
     }
   }
   &::after {
-    background-color: var(--accent-a11);
-  }
-
-  &:where(.rt-high-contrast) {
-    &::after {
-      background-color: var(--accent-12);
-    }
+    background-color: var(--accent-ink);
   }
 
   &:where(:disabled, [data-disabled])::before {

package/src/components/_internal/base-radio.props.ts

@@ -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 baseRadioPropDefs = {
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
   material: { type: 'enum', values: materials, default: undefined },
   ...colorPropDef,
-  ...highContrastPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;

package/src/components/_internal/base-sidebar-menu.css

@@ -75,11 +75,11 @@
 
   /* Accent color support */
   &:where([data-accent-color]) {
-    color: var(--accent-a11);
+    color: var(--accent-ink);
   }
 
-  /* Gray text support - inherit from base menu */
-  & :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']:not(.rt-Badge)) {
+  /* Muted text sits a step lower inside items */
+  & :where(.rt-Text.rt-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
     color: var(--gray-a10);
   }
 

package/src/components/_internal/base-tab-list.css

@@ -209,19 +209,13 @@
     bottom: 0;
     left: 0;
     right: 0;
-    background-color: var(--accent-indicator);
+    background-color: var(--accent-solid-indicator);
     transform-origin: center;
     transition: 
       transform var(--duration-3) var(--ease-3),
       opacity var(--duration-2) var(--ease-1),
       background-color var(--duration-2) var(--ease-1);
   }
-
-  :where(.rt-BaseTabList.rt-high-contrast) & {
-    &:where([data-state='active'], [data-active])::before {
-      background-color: var(--accent-12);
-    }
-  }
 }
 
 /* Forced colors support */

package/src/components/_internal/base-tab-list.props.ts

@@ -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';
 
@@ -23,7 +22,6 @@ const baseTabListPropDefs = {
     responsive: true,
   },
   ...colorPropDef,
-  ...highContrastPropDef,
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;

package/src/components/accordion.css

@@ -253,49 +253,9 @@
   transition: var(--transition-accordion-trigger-active);
 }
 
-/* Soft variant trigger color support */
-:where(.rt-AccordionRoot:where(.rt-variant-soft)) .rt-AccordionTrigger {
-  color: var(--accent-a11);
-}
-
-:where(.rt-AccordionRoot:where(.rt-variant-soft.rt-high-contrast)) .rt-AccordionTrigger {
-  color: var(--accent-12);
-}
-
-/* Outline variant trigger color support */
-:where(.rt-AccordionRoot:where(.rt-variant-outline)) .rt-AccordionTrigger {
-  color: var(--accent-11);
-}
-
-:where(.rt-AccordionRoot:where(.rt-variant-outline.rt-high-contrast)) .rt-AccordionTrigger {
-  color: var(--accent-12);
-}
-
-/* Surface variant trigger color support */
-:where(.rt-AccordionRoot:where(.rt-variant-surface)) .rt-AccordionTrigger {
-  color: var(--accent-a11);
-}
-
-:where(.rt-AccordionRoot:where(.rt-variant-surface.rt-high-contrast)) .rt-AccordionTrigger {
-  color: var(--accent-12);
-}
-
-/* Ghost variant trigger color support */
-:where(.rt-AccordionRoot:where(.rt-variant-ghost)) .rt-AccordionTrigger {
-  color: var(--accent-a11);
-}
-
-:where(.rt-AccordionRoot:where(.rt-variant-ghost.rt-high-contrast)) .rt-AccordionTrigger {
-  color: var(--accent-12);
-}
-
-/* Classic variant trigger color support */
-:where(.rt-AccordionRoot:where(.rt-variant-classic)) .rt-AccordionTrigger {
-  color: var(--accent-a11);
-}
-
-:where(.rt-AccordionRoot:where(.rt-variant-classic.rt-high-contrast)) .rt-AccordionTrigger {
-  color: var(--accent-12);
+/* Trigger colour reads the loud ink in every variant; gray resolves to step 12 */
+:where(.rt-AccordionRoot:where(.rt-variant-soft, .rt-variant-outline, .rt-variant-surface, .rt-variant-ghost, .rt-variant-classic)) .rt-AccordionTrigger {
+  color: var(--accent-ink);
 }
 
 /* Classic variant shadow states */
@@ -442,7 +402,7 @@
   overflow: hidden;
   /* remove padding here */
   font-size: var(--font-size-2);
-  color: var(--accent-a11);
+  color: var(--accent-ink);
   line-height: var(--line-height-4);
   transform-origin: top;
   will-change: height, opacity, transform;
@@ -508,29 +468,11 @@
   }
 }
 
-/* High contrast mode */
-:where(.rt-AccordionRoot[data-high-contrast]) .rt-AccordionTrigger {
-  color: var(--accent-12);
-}
-
-:where(.rt-AccordionRoot[data-high-contrast]) .rt-AccordionContent {
-  color: var(--accent-12);
-}
-
 /* Color accent support */
 :where(.rt-AccordionRoot:where(.rt-variant-soft)[data-accent-color]) :where(.rt-AccordionTrigger:hover) {
   background-color: var(--accent-a4);
 }
 
-/* Color accent support for content */
-:where(.rt-AccordionRoot[data-accent-color]) .rt-AccordionContent {
-  color: var(--accent-a11);
-}
-
-:where(.rt-AccordionRoot[data-accent-color].rt-high-contrast) .rt-AccordionContent {
-  color: var(--accent-12);
-}
-
 /* Reduced motion */
 @media (prefers-reduced-motion: reduce) {
   :where(.rt-AccordionContent[data-state="open"]),

package/src/components/accordion.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 { radiusPropDef } from '../props/radius.prop.js';
 
 import type { PropDef } from '../props/prop-def.js';
@@ -14,7 +13,6 @@ const accordionRootPropDefs = {
   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,
   ...radiusPropDef,
   material: { type: 'enum', values: panelBackgrounds, default: undefined },
   /**
@@ -66,7 +64,6 @@ export type AccordionRootOwnProps = {
   size?: (typeof sizes)[number];
   variant?: (typeof variants)[number];
   color?: string;
-  highContrast?: boolean;
   radius?: string;
   material?: (typeof panelBackgrounds)[number];
   panelBackground?: (typeof panelBackgrounds)[number];

package/src/components/avatar.css

@@ -239,8 +239,7 @@
 
 /* Soft variant palette */
 .rt-AvatarRoot:where(.rt-variant-soft) {
-  --v-color: var(--accent-11);
-  --v-color-high-contrast: var(--accent-12);
+  --v-color: var(--accent-ink);
   --v-bg: var(--accent-3);
   --v-bg-a: var(--accent-a3);
   --v-bg-hover: var(--accent-4);
@@ -252,9 +251,7 @@
 
 /* Outline variant palette */
 .rt-AvatarRoot:where(.rt-variant-outline) {
-  --v-color: var(--accent-11);
-  --v-color-a: var(--accent-a11);
-  --v-color-high-contrast: var(--accent-12);
+  --v-color: var(--accent-ink);
   --v-bg: transparent;
   --v-bg-a: transparent;
   --v-bg-hover: var(--accent-2);
@@ -273,8 +270,7 @@
 
 /* Surface variant palette */
 .rt-AvatarRoot:where(.rt-variant-surface) {
-  --v-color: var(--accent-a11);
-  --v-color-high-contrast: var(--accent-12);
+  --v-color: var(--accent-ink);
   --v-bg: var(--accent-2);
   --v-bg-a: var(--accent-a2);
   --v-bg-hover: var(--accent-3);
@@ -311,31 +307,12 @@
     );
   }
 
-  &:where(.rt-high-contrast) :where(.rt-AvatarFallback) {
-    color: var(--v-color-high-contrast);
-  }
-
   &:where([data-disabled]) :where(.rt-AvatarFallback) {
     color: var(--gray-a8);
     background-color: var(--v-bg-disabled, var(--gray-a3));
   }
 }
 
-/* Outline uses alpha color in translucent mode */
-.rt-AvatarRoot:where(.rt-variant-outline) {
-  & :where(.rt-AvatarFallback) {
-    color: color-mix(
-      in srgb,
-      var(--v-color-a) calc(var(--material-alpha) * 100%),
-      var(--v-color) var(--material-blend)
-    );
-  }
-
-  &:where(.rt-high-contrast) :where(.rt-AvatarFallback) {
-    color: var(--v-color-high-contrast);
-  }
-}
-
 /* Border variants: outline and surface */
 .rt-AvatarRoot:where(.rt-variant-outline, .rt-variant-surface) {
   & :where(.rt-AvatarFallback) {
@@ -427,13 +404,8 @@
   --solid-blend: calc(100% - (var(--material-alpha) * 90%));
 
   & :where(.rt-AvatarFallback) {
-    background-color: color-mix(in srgb, var(--accent-a9) calc(var(--material-alpha) * 100%), var(--accent-9) var(--solid-blend));
-    color: var(--accent-contrast);
-  }
-
-  &:where(.rt-high-contrast) :where(.rt-AvatarFallback) {
-    background-color: color-mix(in srgb, var(--accent-a12) calc(var(--material-alpha) * 100%), var(--accent-12) var(--solid-blend));
-    color: var(--gray-1);
+    background-color: color-mix(in srgb, var(--accent-solid-a) calc(var(--material-alpha) * 100%), var(--accent-solid) var(--solid-blend));
+    color: var(--accent-solid-contrast);
   }
 
   &:where([data-disabled]) :where(.rt-AvatarFallback) {
@@ -447,41 +419,23 @@
 .rt-AvatarRoot:where(button, a, [role="button"]):where(.rt-variant-solid) {
   @media (hover: hover) {
     &:where(:hover:not(:disabled, [data-disabled])) {
-      background-color: color-mix(in srgb, var(--accent-a10) calc(var(--material-alpha) * 100%), var(--accent-10) var(--solid-blend));
+      background-color: color-mix(in srgb, var(--accent-solid-hover-a) calc(var(--material-alpha) * 100%), var(--accent-solid-hover) var(--solid-blend));
 
+      /* Filter the fallback, not the root, so the status dot and badge stay untouched */
       & :where(.rt-AvatarFallback) {
         background-color: inherit;
+        filter: var(--accent-solid-hover-filter);
       }
     }
   }
 
   &:where(:active:not(:disabled, [data-disabled])) {
-    background-color: color-mix(in srgb, var(--accent-a11) calc(var(--material-alpha) * 100%), var(--accent-11) var(--solid-blend));
+    background-color: color-mix(in srgb, var(--accent-solid-active-a) calc(var(--material-alpha) * 100%), var(--accent-solid-active) var(--solid-blend));
 
     & :where(.rt-AvatarFallback) {
       background-color: inherit;
     }
   }
-
-  &:where(.rt-high-contrast) {
-    @media (hover: hover) {
-      &:where(:hover:not(:disabled, [data-disabled])) {
-        background-color: color-mix(in srgb, var(--accent-a12) calc(var(--material-alpha) * 100%), var(--accent-12) var(--solid-blend));
-
-        & :where(.rt-AvatarFallback) {
-          background-color: inherit;
-        }
-      }
-    }
-
-    &:where(:active:not(:disabled, [data-disabled])) {
-      background-color: color-mix(in srgb, var(--accent-a12) calc(var(--material-alpha) * 100%), var(--accent-12) var(--solid-blend));
-
-      & :where(.rt-AvatarFallback) {
-        background-color: inherit;
-      }
-    }
-  }
 }
 
 /* Classic variant - uses --color-surface and gray interactive states */
@@ -492,16 +446,11 @@
   & :where(.rt-AvatarFallback) {
     position: relative;
     top: 0;
-    color: var(--accent-a11);
+    color: var(--accent-ink);
     background-color: color-mix(in srgb, var(--color-surface-translucent) calc(var(--material-alpha) * 100%), var(--color-surface-solid) var(--material-blend));
     box-shadow: var(--shadow-2);
   }
 
-  &:where(.rt-high-contrast) :where(.rt-AvatarFallback) {
-    color: var(--gray-12);
-    background-color: color-mix(in srgb, var(--color-surface-translucent) calc(var(--material-alpha) * 100%), var(--color-surface-solid) var(--material-blend));
-  }
-
   &:where([data-disabled]) :where(.rt-AvatarFallback) {
     color: var(--gray-a8);
     background-color: var(--gray-a3);

package/src/components/avatar.props.tsx

@@ -1,6 +1,5 @@
 import { asChildPropDef } from '../props/as-child.prop.js';
 import { accentColorPropDef, accentColors } 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';
@@ -16,7 +15,6 @@ const avatarPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '3', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
   ...accentColorPropDef,
-  ...highContrastPropDef,
   ...radiusPropDef,
   fallback: { type: 'ReactNode', required: true },
   material: { type: 'enum', values: materials, default: undefined },

package/src/components/badge.css

@@ -135,13 +135,8 @@
 .rt-Badge:where(.rt-variant-solid) {
   --solid-blend: calc(100% - (var(--material-alpha) * 90%));
 
-  background-color: color-mix(in srgb, var(--accent-a9) calc(var(--material-alpha) * 100%), var(--accent-9) var(--solid-blend));
-  color: var(--accent-contrast);
-
-  &:where(.rt-high-contrast) {
-    background-color: color-mix(in srgb, var(--accent-a12) calc(var(--material-alpha) * 100%), var(--accent-12) var(--solid-blend));
-    color: var(--gray-1);
-  }
+  background-color: color-mix(in srgb, var(--accent-solid-a) calc(var(--material-alpha) * 100%), var(--accent-solid) var(--solid-blend));
+  color: var(--accent-solid-contrast);
 
   &:where([data-disabled]) {
     color: var(--gray-a8);
@@ -158,21 +153,13 @@
 .rt-Badge: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);
 }
 
 /* soft / ghost */
 
 .rt-Badge:where(.rt-variant-soft, .rt-variant-ghost) {
-  color: var(--accent-a11);
-
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
+  color: var(--accent-ink);
 
   &:where([data-disabled]) {
     color: var(--gray-a8);
@@ -197,23 +184,15 @@
 
 .rt-Badge: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));
+  color: var(--accent-ink);
   transition: var(--transition-background-blur);
-
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
 }
 
 /* ghost */
 
 .rt-Badge:where(.rt-variant-ghost) {
   background-color: transparent;
-  color: var(--accent-a11);
-
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
+  color: var(--accent-ink);
 }
 
 /* classic */
@@ -221,7 +200,7 @@
 .rt-Badge:where(.rt-variant-classic) {
   position: relative;
   top: var(--classic-elevation-offset);
-  color: var(--accent-a11);
+  color: var(--accent-ink);
   box-shadow: var(--shadow-2);
   transition: var(--transition-text-field);
 
@@ -239,8 +218,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/badge.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';
@@ -15,7 +14,6 @@ const badgePropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '1', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'soft' },
   ...accentColorPropDef,
-  ...highContrastPropDef,
   ...radiusPropDef,
   material: { type: 'enum', values: materials, default: undefined },
   /**