@womp/kookie-ui 0.6.2 → 0.7.0

package/src/components/link.css

@@ -17,8 +17,8 @@
     outline-offset: 2px;
   }
 
-  :where([data-accent-color]:not(.radix-themes, .rt-high-contrast)) &:where([data-accent-color='']) {
-    color: var(--accent-12);
+  :where([data-accent-color]:not(.radix-themes)) &:where([data-accent-color='']) {
+    color: var(--accent-ink);
   }
 }
 
@@ -56,8 +56,7 @@
         }
       }
 
-      &:where(.rt-high-contrast),
-      :where([data-accent-color]:not(.radix-themes, .rt-high-contrast)) &:where([data-accent-color='']) {
+      :where([data-accent-color]:not(.radix-themes)) &:where([data-accent-color='']) {
         text-decoration-line: underline;
         text-decoration-color: var(--accent-a6);
 

package/src/components/link.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 { leadingTrimPropDef } from '../props/leading-trim.prop.js';
 import { textWrapPropDef } from '../props/text-wrap.prop.js';
 import { truncatePropDef } from '../props/truncate.prop.js';
@@ -25,7 +24,6 @@ const linkPropDefs = {
   ...textWrapPropDef,
   underline: { type: 'enum', className: 'rt-underline', values: underline, default: 'auto' },
   ...accentColorPropDef,
-  ...highContrastPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   underline: PropDef<(typeof underline)[number]>;

package/src/components/progress.css

@@ -173,7 +173,7 @@
   }
 
   & :where(.rt-ProgressIndicator) {
-    background-color: var(--accent-9);
+    background-color: var(--accent-solid);
   }
 }
 
@@ -203,7 +203,7 @@
   }
 
   & :where(.rt-ProgressIndicator) {
-    background-color: var(--accent-9);
+    background-color: var(--accent-solid);
   }
 }
 
@@ -228,18 +228,11 @@
   }
 
   & :where(.rt-ProgressIndicator) {
-    background-color: var(--accent-9);
+    background-color: var(--accent-solid);
   }
 }
 
 
 
-/* all high-contrast */
-.rt-ProgressRoot:where(.rt-high-contrast) {
-
-  & :where(.rt-ProgressIndicator) {
-    background-color: var(--accent-12);
-  }
-}
 
 

package/src/components/progress.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';
@@ -11,7 +10,6 @@ const progressPropDefs = {
   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,
   duration: { type: 'string' },
 } satisfies {

package/src/components/radio-cards.css

@@ -78,11 +78,8 @@
 
 .rt-RadioCardsItem:where([data-state='checked']) {
   transition: var(--transition-fast);
-  outline: var(--focus-outline-width) solid var(--accent-indicator);
+  outline: var(--focus-outline-width) solid var(--accent-solid-indicator);
   outline-offset: -1px;
-  :where(.rt-RadioCardsRoot.rt-high-contrast) & {
-    outline-color: var(--accent-12);
-  }
 }
 
 /* * * * * * * * * * * * * * * * * * * */

package/src/components/radio-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 radioCardsRootPropDefs = {
   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(160px, 1fr))' },
   gap: { ...gridPropDefs.gap, default: '4' },
 } satisfies {

package/src/components/radio-group.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';
 
@@ -12,7 +11,6 @@ const radioGroupRootPropDefs = {
   size: { type: 'enum', className: 'rt-r-size', values: sizes, default: '2', responsive: true },
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
   ...colorPropDef,
-  ...highContrastPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;
   variant: PropDef<(typeof variants)[number]>;

package/src/components/radio-group.tsx

@@ -40,7 +40,6 @@ const RadioGroupRoot = React.forwardRef<RadioGroupRootElement, RadioGroupRootPro
   (
     {
       color = radioGroupRootPropDefs.color.default,
-      highContrast = radioGroupRootPropDefs.highContrast.default,
       size = radioGroupRootPropDefs.size.default,
       variant = radioGroupRootPropDefs.variant.default,
       ...props
@@ -53,7 +52,6 @@ const RadioGroupRoot = React.forwardRef<RadioGroupRootElement, RadioGroupRootPro
       <RadioGroupProvider
         scope={__scopeRadioGroup}
         color={color}
-        highContrast={highContrast}
         size={size}
         variant={variant}
       >

package/src/components/schemas/base-button.schema.ts

@@ -99,16 +99,6 @@ export const BaseButtonSchema = z
       .optional()
       .describe('Accent color for the button'),
 
-    /**
-     * High contrast mode for better accessibility
-     * @default false
-     */
-    highContrast: z
-      .boolean()
-      .optional()
-      .default(false)
-      .describe('High contrast mode for better accessibility'),
-
     /**
      * Border radius for the button
      */

package/src/components/select.css

@@ -33,12 +33,6 @@
     --backdrop-filter-components: var(--backdrop-filter-components-enabled);
   }
 
-  &:where(.rt-high-contrast) {
-    & :where(.rt-SelectTriggerInner) {
-      color: var(--accent-12);
-    }
-  }
-
   /* Selected values use medium font weight */
   &:where(:not([data-placeholder])) {
     & :where(.rt-SelectTriggerInner) {
@@ -339,15 +333,11 @@
 .rt-SelectTrigger:where(.rt-variant-classic) {
   position: relative;
   top: var(--classic-elevation-offset);
-  color: var(--accent-a11);
+  color: var(--accent-ink);
   background-color: var(--color-surface);
   box-shadow: var(--shadow-2);
   transition: var(--transition-text-field);
 
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
-
   /* Theme-level translucent override */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
     background-color: var(--color-surface);
@@ -362,24 +352,6 @@
     background-color: var(--color-surface);
   }
 
-  &:where(.rt-high-contrast) {
-    background-color: var(--color-surface);
-
-    /* Theme-level translucent override for high contrast */
-    :where([data-panel-background='translucent'], [data-material='translucent']) & {
-      background-color: var(--color-surface);
-    }
-
-    /* Component-level overrides for high contrast */
-    &:where([data-panel-background='solid'], [data-material='solid']) {
-      background-color: var(--color-surface);
-    }
-
-    &:where([data-panel-background='translucent'], [data-material='translucent']) {
-      background-color: var(--color-surface);
-    }
-  }
-
   &:where(:focus-visible) {
     outline: 2px solid var(--focus-8);
     outline-offset: 2px;
@@ -464,11 +436,7 @@
 .rt-SelectTrigger:where(.rt-variant-soft) {
   /* Base state: solid accent for solid panels */
   background-color: var(--accent-3);
-  color: var(--accent-a11);
-
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
+  color: var(--accent-ink);
 
   /* Theme-level translucent override */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
@@ -565,11 +533,7 @@
 
 .rt-SelectTrigger:where(.rt-variant-ghost) {
   background-color: transparent;
-  color: var(--accent-a11);
-
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
+  color: var(--accent-ink);
 
   &:where([data-placeholder]) {
     & :where(.rt-SelectTriggerInner) {
@@ -670,28 +634,21 @@
 .rt-SelectTrigger:where(.rt-variant-outline) {
   /* Base state: solid colors for solid panels */
   box-shadow: inset 0 0 0 1px var(--accent-6);
-  color: var(--accent-11);
+  color: var(--accent-ink);
   transition: var(--transition-background-blur);
 
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
-
   /* 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);
   }
 
   @media (hover: hover) {
@@ -767,10 +724,6 @@
     outline-offset: -1px;
   }
 
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
-
   &:where(:disabled) {
     color: var(--gray-a8);
     box-shadow: inset 0 0 0 1px var(--gray-a7);
@@ -793,11 +746,7 @@
   /* Base state: solid accent for solid panels */
   background-color: var(--accent-2);
   box-shadow: inset 0 0 0 1px var(--accent-6);
-  color: var(--accent-a11);
-
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
+  color: var(--accent-ink);
 
   /* Theme-level translucent override */
   :where([data-panel-background='translucent'], [data-material='translucent']) & {
@@ -889,10 +838,6 @@
     outline-offset: -1px;
   }
 
-  &:where(.rt-high-contrast) {
-    color: var(--accent-12);
-  }
-
   &:where(:disabled) {
     color: var(--gray-a8);
     box-shadow: inset 0 0 0 1px var(--gray-a6);
@@ -978,7 +923,7 @@
  ***************************************************************************************************/
 
 .rt-SelectItem:where([data-accent-color]) {
-  color: var(--accent-a11);
+  color: var(--accent-ink);
 }
 .rt-SelectItem:where([data-disabled]) {
   color: var(--gray-a8);
@@ -988,17 +933,18 @@
   background-color: var(--gray-a6);
 }
 
-/* Ensure gray text appears muted in non-highlighted state */
-.rt-SelectItem :where(.rt-Text[data-accent-color='gray'], [data-accent-color='gray']) {
+/* Muted text sits a step lower inside items */
+.rt-SelectItem :where(.rt-Text.rt-emphasis-medium:where(:not([data-accent-color]), [data-accent-color='gray'])) {
   color: var(--gray-a10);
 }
 
 /* solid */
 
 .rt-SelectContent:where(.rt-variant-solid) {
+  /* Gray fills with step 12 through the solid tokens */
   & :where(.rt-SelectItem[data-highlighted]) {
-    background-color: var(--accent-9);
-    color: var(--accent-contrast);
+    background-color: var(--accent-solid);
+    color: var(--accent-solid-contrast);
 
     /* Force all text elements to inherit hover color, including those with color="gray" */
     & :where(.rt-Text) {
@@ -1010,35 +956,6 @@
       color: inherit !important;
     }
   }
-  &:where(.rt-high-contrast) {
-    & :where(.rt-SelectItem[data-highlighted]) {
-      background-color: var(--accent-12);
-      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']) {
-        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']) {
-          color: inherit !important;
-        }
-      }
-    }
-  }
 }
 
 /* soft */
@@ -1047,8 +964,8 @@
   & :where(.rt-SelectItem[data-highlighted]) {
     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']) {
+    /* 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;
     }
   }

package/src/components/select.props.tsx

@@ -1,7 +1,6 @@
 import type React from 'react';
 
 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';
@@ -45,7 +44,6 @@ const contentVariants = ['solid', 'soft'] as const;
 const selectContentPropDefs = {
   variant: { type: 'enum', className: 'rt-variant', values: contentVariants, default: 'solid' },
   ...colorPropDef,
-  ...highContrastPropDef,
 } satisfies {
   variant: PropDef<(typeof contentVariants)[number]>;
 };

package/src/components/sheet.tsx

@@ -280,9 +280,9 @@ type SheetDescriptionElement = React.ElementRef<typeof Text>;
 type SheetDescriptionProps = React.ComponentPropsWithoutRef<typeof Text>;
 /** Supplementary description text for Sheet content. Renders as Text with sensible defaults. */
 const Description = React.forwardRef<SheetDescriptionElement, SheetDescriptionProps>(
-  ({ size = '2', color = 'gray', ...rest }, ref) => (
+  ({ size = '2', emphasis = 'medium', ...rest }, ref) => (
     <DialogPrimitive.Description asChild>
-      <Text ref={ref} size={size} color={color} {...rest} />
+      <Text ref={ref} size={size} emphasis={emphasis} {...rest} />
     </DialogPrimitive.Description>
   ),
 );

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>
                 )}