@womp/kookie-ui 0.6.2 → 0.8.0

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

@@ -208,8 +208,7 @@
 
 /* Soft variant palette */
 .rt-BaseButton:where(.rt-variant-soft) {
-  --v-color: var(--accent-a11);
-  --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);
@@ -225,8 +224,7 @@
 
 /* Ghost variant palette */
 .rt-BaseButton:where(.rt-variant-ghost) {
-  --v-color: 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-3);
@@ -242,8 +240,7 @@
 
 /* Outline variant palette */
 .rt-BaseButton:where(.rt-variant-outline) {
-  --v-color: var(--accent-11);
-  --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);
@@ -268,8 +265,7 @@
 
 /* Surface variant palette */
 .rt-BaseButton: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);
@@ -310,11 +306,6 @@
     var(--v-bg) var(--material-blend)
   );
 
-  /* High contrast override */
-  &:where(.rt-high-contrast) {
-    color: var(--v-color-high-contrast);
-  }
-
   /* Focus visible */
   &:where(:focus-visible) {
     outline: 2px solid var(--v-focus-color);
@@ -454,7 +445,7 @@
 /* Classic variant - uses --color-surface and gray interactive states */
 .rt-BaseButton:where(.rt-variant-classic) {
   position: relative;
-  color: var(--accent-a11);
+  color: var(--accent-ink);
   background-color: var(--color-surface-solid);
   box-shadow: var(--shadow-2);
 
@@ -463,10 +454,6 @@
     background-color: var(--color-surface-translucent);
   }
 
-  &:where(.rt-high-contrast) {
-    color: var(--gray-12);
-  }
-
   &:where(:focus-visible) {
     outline: 2px solid var(--focus-8);
     outline-offset: 2px;
@@ -568,29 +555,13 @@
   }
 }
 
-/* Solid variant - uses filter for active state */
-:where(.radix-themes) {
-  --base-button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
-  --base-button-solid-active-filter: brightness(0.9) contrast(1.03);
-  --base-button-solid-open-filter: brightness(0.96) contrast(1.02);
-  --base-button-solid-high-contrast-active-filter: brightness(0.92);
-  --base-button-solid-high-contrast-open-filter: brightness(0.96);
-}
-:is(.dark, .dark-theme),
-:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
-  --base-button-solid-high-contrast-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
-  --base-button-solid-active-filter: brightness(0.88) contrast(1.03);
-  --base-button-solid-open-filter: brightness(0.95) contrast(1.02);
-  --base-button-solid-high-contrast-active-filter: brightness(0.9);
-  --base-button-solid-high-contrast-open-filter: brightness(0.95);
-}
-
+/* Solid variant - fills with the accent solid tokens (gray resolves to step 12 automatically) */
 .rt-BaseButton:where(.rt-variant-solid) {
   /* Solid uses 10% blend for translucent (more opaque than other variants) */
   --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);
+  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(:focus-visible) {
     outline: 2px solid var(--focus-8);
@@ -599,22 +570,23 @@
 
   @media (hover: hover) {
     &:where(:hover) {
-      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: var(--accent-solid-hover-filter);
       box-shadow: var(--shadow-2);
     }
   }
 
   &:where([data-state='open']) {
-    background-color: color-mix(in srgb, var(--accent-a10) calc(var(--material-alpha) * 100%), var(--accent-10) var(--solid-blend));
-    filter: var(--base-button-solid-open-filter);
+    background-color: color-mix(in srgb, var(--accent-solid-hover-a) calc(var(--material-alpha) * 100%), var(--accent-solid-hover) var(--solid-blend));
+    filter: var(--accent-solid-open-filter);
   }
 
   &:where(:active:not([data-state='open'])) {
-    filter: var(--base-button-solid-active-filter);
+    filter: var(--accent-solid-active-filter);
   }
 
   &:where([data-state='on']) {
-    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));
     opacity: 0.9;
   }
 
@@ -625,33 +597,6 @@
     }
   }
 
-  &: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);
-
-    @media (hover: hover) {
-      &:where(:hover) {
-        background-color: color-mix(in srgb, var(--accent-a12) calc(var(--material-alpha) * 100%), var(--accent-12) var(--solid-blend));
-        filter: var(--base-button-solid-high-contrast-hover-filter);
-        box-shadow: var(--shadow-2);
-      }
-    }
-
-    &:where([data-state='open']) {
-      background-color: color-mix(in srgb, var(--accent-a12) calc(var(--material-alpha) * 100%), var(--accent-12) var(--solid-blend));
-      filter: var(--base-button-solid-high-contrast-open-filter);
-    }
-
-    &:where(:active:not([data-state='open'])) {
-      filter: var(--base-button-solid-high-contrast-active-filter);
-    }
-
-    &:where([data-state='on']) {
-      background-color: var(--accent-12);
-      opacity: 0.85;
-    }
-  }
-
   &:where([data-disabled]) {
     color: var(--gray-a8);
     background-color: var(--gray-a3);

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

@@ -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';
@@ -63,8 +62,8 @@ const materials = ['solid', 'translucent'] as const;
  * // Button with loading state
  * <BaseButton loading>Processing...</BaseButton>
  * 
- * // Button with material and high contrast
- * <BaseButton material="translucent" highContrast>Elevated Button</BaseButton>
+ * // Button with translucent material
+ * <BaseButton material="translucent">Elevated Button</BaseButton>
  * ```
  */
 const baseButtonPropDefs = {
@@ -79,7 +78,6 @@ const baseButtonPropDefs = {
    */
   variant: { type: 'enum', className: 'rt-variant', values: variants, default: 'solid' },
   ...accentColorPropDef,
-  ...highContrastPropDef,
   ...radiusPropDef,
   /**
    * Loading state that shows a spinner and disables interaction

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

@@ -124,21 +124,11 @@
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
     &::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);
     }
     & :where(.rt-BaseCheckboxIndicator) {
-      color: var(--accent-contrast);
-    }
-
-    &:where(.rt-high-contrast) {
-      &::before {
-        background-color: var(--accent-12);
-        box-shadow: inset 0 0 0 1px var(--accent-12);
-      }
-      & :where(.rt-BaseCheckboxIndicator) {
-        color: var(--gray-1);
-      }
+      color: var(--accent-solid-contrast);
     }
   }
 
@@ -161,7 +151,7 @@
   
   &:where([data-state='unchecked']) {
     &::before {
-      color: var(--accent-a11);
+      color: var(--accent-ink);
       background-color: var(--color-surface-solid);
       box-shadow: var(--shadow-2);
 
@@ -200,30 +190,7 @@
       }
     }
     & :where(.rt-BaseCheckboxIndicator) {
-      color: var(--accent-a11);
-    }
-
-    &:where(.rt-high-contrast) {
-      &::before {
-        background-color: var(--accent-3);
-
-        /* Theme-level translucent override for high contrast */
-        :where([data-panel-background='translucent'], [data-material='translucent']) & {
-          background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-        }
-
-        /* Component-level overrides for high contrast */
-        &:where([data-panel-background='solid'], [data-material='solid']) {
-          background-color: var(--accent-3);
-        }
-
-        &:where([data-panel-background='translucent'], [data-material='translucent']) {
-          background-color: color-mix(in srgb, var(--accent-a3), var(--accent-3) 60%);
-        }
-      }
-      & :where(.rt-BaseCheckboxIndicator) {
-        color: var(--accent-12);
-      }
+      color: var(--accent-ink);
     }
   }
 
@@ -285,13 +252,7 @@
 
   &:where([data-state='checked'], [data-state='indeterminate']) {
     & :where(.rt-BaseCheckboxIndicator) {
-      color: var(--accent-a11);
-    }
-
-    &:where(.rt-high-contrast) {
-      & :where(.rt-BaseCheckboxIndicator) {
-        color: var(--accent-12);
-      }
+      color: var(--accent-ink);
     }
   }
 
@@ -313,23 +274,20 @@
   &:where([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);
       }
     }
   }
@@ -357,13 +315,7 @@
       }
     }
     & :where(.rt-BaseCheckboxIndicator) {
-      color: var(--accent-a11);
-    }
-
-    &:where(.rt-high-contrast) {
-      & :where(.rt-BaseCheckboxIndicator) {
-        color: var(--accent-12);
-      }
+      color: var(--accent-ink);
     }
   }
 
@@ -428,13 +380,7 @@
       }
     }
     & :where(.rt-BaseCheckboxIndicator) {
-      color: var(--accent-a11);
-    }
-
-    &:where(.rt-high-contrast) {
-      & :where(.rt-BaseCheckboxIndicator) {
-        color: var(--accent-12);
-      }
+      color: var(--accent-ink);
     }
   }
 

package/src/components/_internal/base-checkbox.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 baseCheckboxPropDefs = {
   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-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]>;