@womp/kookie-ui 0.5.0 → 0.7.0

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 },
   /**

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.