@womp/kookie-ui 0.5.0 → 0.7.0

package/src/components/heading.css

@@ -21,13 +21,24 @@
     margin: 0;
   }
 
+  /* Emphasis ladder. No colour and no emphasis sets nothing, so the colour is inherited. */
+  &:where(.rt-emphasis-loud) {
+    color: var(--gray-ink);
+  }
+  &:where(.rt-emphasis-medium) {
+    color: var(--gray-ink-muted);
+  }
+  &:where(.rt-emphasis-quiet) {
+    color: var(--gray-ink-faint);
+  }
   &:where([data-accent-color]) {
-    color: var(--accent-a11);
+    color: var(--accent-ink);
   }
-
-  &:where([data-accent-color].rt-high-contrast),
-  :where([data-accent-color]:not(.radix-themes)) &:where(.rt-high-contrast) {
-    color: var(--accent-12);
+  &:where([data-accent-color].rt-emphasis-medium) {
+    color: var(--accent-ink-muted);
+  }
+  &:where([data-accent-color].rt-emphasis-quiet) {
+    color: var(--accent-ink-faint);
   }
 }
 

package/src/components/heading.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 { leadingTrimPropDef } from '../props/leading-trim.prop.js';
 import { textAlignPropDef } from '../props/text-align.prop.js';
 import { textWrapPropDef } from '../props/text-wrap.prop.js';
@@ -30,7 +30,7 @@ const headingPropDefs = {
   ...truncatePropDef,
   ...textWrapPropDef,
   ...colorPropDef,
-  ...highContrastPropDef,
+  ...emphasisPropDef,
 } satisfies {
   as: PropDef<(typeof as)[number]>;
   size: PropDef<(typeof sizes)[number]>;

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/schemas/shell.schema.ts

@@ -74,15 +74,8 @@ const ResponsivePresentationSchema = z
 // Size persistence adapter
 const PaneSizePersistenceSchema = z
   .object({
-    load: z
-      .function()
-      .returns(z.union([z.number(), z.promise(z.number()), z.undefined()]))
-      .optional(),
-    save: z
-      .function()
-      .args(z.number())
-      .returns(z.union([z.void(), z.promise(z.void())]))
-      .optional(),
+    load: z.function({ output: z.union([z.number(), z.promise(z.number()), z.undefined()]) }).optional(),
+    save: z.function({ input: [z.number()], output: z.union([z.void(), z.promise(z.void())]) }).optional(),
   })
   .describe('Size persistence adapter');
 
@@ -92,18 +85,18 @@ const PanePropsSchema = z
     presentation: ResponsivePresentationSchema.optional(),
     mode: PaneModeSchema.optional(),
     defaultMode: ResponsiveModeSchema.optional(),
-    onModeChange: z.function().args(PaneModeSchema).returns(z.void()).optional(),
+    onModeChange: z.function({ input: [PaneModeSchema], output: z.void() }).optional(),
     expandedSize: z.number().optional(),
     minSize: z.number().optional(),
     maxSize: z.number().optional(),
     resizable: z.boolean().optional(),
     collapsible: z.boolean().optional(),
-    onExpand: z.function().returns(z.void()).optional(),
-    onCollapse: z.function().returns(z.void()).optional(),
-    onResize: z.function().args(z.number()).returns(z.void()).optional(),
+    onExpand: z.function({ output: z.void() }).optional(),
+    onCollapse: z.function({ output: z.void() }).optional(),
+    onResize: z.function({ input: [z.number()], output: z.void() }).optional(),
     resizer: z.any().optional(),
-    onResizeStart: z.function().args(z.number()).returns(z.void()).optional(),
-    onResizeEnd: z.function().args(z.number()).returns(z.void()).optional(),
+    onResizeStart: z.function({ input: [z.number()], output: z.void() }).optional(),
+    onResizeEnd: z.function({ input: [z.number()], output: z.void() }).optional(),
     snapPoints: z.array(z.number()).optional(),
     snapTolerance: z.number().optional(),
     collapseThreshold: z.number().optional(),
@@ -156,11 +149,11 @@ export const ShellRailSchema = z
     presentation: ResponsivePresentationSchema.optional(),
     mode: PaneModeSchema.optional(),
     defaultMode: ResponsiveModeSchema.optional(),
-    onModeChange: z.function().args(PaneModeSchema).returns(z.void()).optional(),
+    onModeChange: z.function({ input: [PaneModeSchema], output: z.void() }).optional(),
     expandedSize: z.number().default(64).describe('Default width in pixels'),
     collapsible: z.boolean().optional(),
-    onExpand: z.function().returns(z.void()).optional(),
-    onCollapse: z.function().returns(z.void()).optional(),
+    onExpand: z.function({ output: z.void() }).optional(),
+    onCollapse: z.function({ output: z.void() }).optional(),
     className: z.string().optional().describe('Additional CSS class name'),
     style: z
       .record(z.string(), z.union([z.string(), z.number()]))

package/src/components/scroll-area.css

@@ -108,7 +108,6 @@
  ***************************************************************************************************/
 
 .rt-ScrollAreaScrollbar {
-  background-color: var(--gray-a3);
   border-radius: var(--scrollarea-scrollbar-border-radius);
 
   animation-duration: var(--motion-duration-micro);
@@ -135,13 +134,13 @@
 }
 
 .rt-ScrollAreaThumb {
-  background-color: var(--gray-a8);
+  background-color: var(--gray-a6);
   border-radius: inherit;
   transition: background-color var(--motion-duration-micro) var(--motion-ease-standard);
 
   @media (hover: hover) {
     &:where(:hover) {
-      background-color: var(--gray-a9);
+      background-color: var(--gray-a8);
     }
   }
 }

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>
   ),
 );