@womp/kookie-ui 0.5.0 → 0.7.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]>;