@womp/kookie-ui 0.6.2 → 0.7.0

package/src/components/slider.css

@@ -103,7 +103,7 @@
     content: '';
     position: absolute;
     inset: calc(var(--slider-thumb-inset-factor) * var(--slider-track-size) * -1);
-    background-color: white;
+    background-color: var(--accent-solid-thumb);
     border-radius: var(--slider-thumb-radius);
     box-shadow: var(--shadow-2);
     cursor: pointer;
@@ -193,13 +193,7 @@
   }
 
   & :where(.rt-SliderRange) {
-    background-color: var(--accent-9);
-  }
-
-  &:where(.rt-high-contrast) {
-    & :where(.rt-SliderRange) {
-      background-color: var(--accent-12);
-    }
+    background-color: var(--accent-solid);
   }
 
 
@@ -227,13 +221,7 @@
   }
 
   & :where(.rt-SliderRange) {
-    background-color: var(--accent-9);
-  }
-
-  &:where(.rt-high-contrast) {
-    & :where(.rt-SliderRange) {
-      background-color: var(--accent-12);
-    }
+    background-color: var(--accent-solid);
   }
 
   & :where(.rt-SliderThumb) {
@@ -264,13 +252,7 @@
   }
 
   & :where(.rt-SliderRange) {
-    background-color: var(--accent-9);
-  }
-
-  &:where(.rt-high-contrast) {
-    & :where(.rt-SliderRange) {
-      background-color: var(--accent-12);
-    }
+    background-color: var(--accent-solid);
   }
 
   & :where(.rt-SliderThumb) {
@@ -278,21 +260,6 @@
   }
 }
 
-/* all high-contrast */
-
-:where(.radix-themes) {
-  --slider-range-high-contrast-background-image: linear-gradient(var(--black-a8), var(--black-a8));
-}
-:is(.dark, .dark-theme),
-:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
-  --slider-range-high-contrast-background-image: none;
-}
-.rt-SliderRoot:where(:not(.rt-high-contrast)) {
-  --slider-range-high-contrast-background-image: none;
-}
-
-
-
 /* all disabled Sliders */
 
 [data-disabled] {

package/src/components/slider.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';
@@ -13,7 +12,6 @@ const sliderPropDefs = {
   showTickLabels: { type: 'boolean', className: 'rt-show-tick-labels' },
   snapToTicks: { type: 'boolean', className: 'rt-snap-to-ticks' },
   ...colorPropDef,
-  ...highContrastPropDef,
   ...radiusPropDef,
 } satisfies {
   size: PropDef<(typeof sizes)[number]>;

package/src/components/slider.tsx

@@ -182,7 +182,7 @@ const Slider = React.forwardRef<SliderElement, SliderProps>((props, forwardedRef
       >
         <SliderPrimitive.Track className="rt-SliderTrack">
           <SliderPrimitive.Range
-            className={classNames('rt-SliderRange', { 'rt-high-contrast': props.highContrast })}
+            className="rt-SliderRange"
             data-inverted={sliderProps.inverted ? '' : undefined}
           />
         </SliderPrimitive.Track>

package/src/components/switch.css

@@ -71,6 +71,7 @@
   transition: transform var(--transition-standard), box-shadow var(--transition-standard);
 
   &:where([data-state='checked']) {
+    background-color: var(--accent-solid-thumb);
     transform: translateX(var(--switch-thumb-translate-x));
   }
 }
@@ -130,16 +131,9 @@
   }
   
   &:where([data-state='checked'])::before {
-    background-color: var(--accent-9);
+    background-color: var(--accent-solid);
     box-shadow: none;
   }
-
-  &:where(.rt-high-contrast) {
-    &:where([data-state='checked'])::before {
-      background-color: var(--accent-12);
-      box-shadow: none;
-    }
-  }
   
 
 
@@ -168,13 +162,7 @@
   }
   
   &:where([data-state='checked'])::before {
-    background-color: var(--accent-9);
-  }
-
-  &:where(.rt-high-contrast) {
-    &:where([data-state='checked'])::before {
-      background-color: var(--accent-12);
-    }
+    background-color: var(--accent-solid);
   }
 }
 
@@ -201,16 +189,9 @@
   }
   
   &:where([data-state='checked'])::before {
-    background-color: var(--accent-9);
+    background-color: var(--accent-solid);
     box-shadow: none;
   }
-
-  &:where(.rt-high-contrast) {
-    &:where([data-state='checked'])::before {
-      background-color: var(--accent-12);
-      box-shadow: none;
-    }
-  }
   
 
 

package/src/components/switch.props.tsx

@@ -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 switchPropDefs = {
   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,
   /**
    * Material type for visual rendering and depth effects
    * Controls how the switch renders its visual elements

package/src/components/switch.tsx

@@ -36,9 +36,7 @@ const Switch = React.forwardRef<SwitchElement, SwitchProps>((props, forwardedRef
       ref={forwardedRef}
       className={classNames('rt-reset', 'rt-SwitchRoot', className)}
     >
-      <SwitchPrimitive.Thumb
-        className={classNames('rt-SwitchThumb', { 'rt-high-contrast': props.highContrast })}
-      />
+      <SwitchPrimitive.Thumb className="rt-SwitchThumb" />
     </SwitchPrimitive.Root>
   );
 });

package/src/components/text.css

@@ -18,13 +18,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);
   }
 
   /* stylelint-disable selector-max-type */

package/src/components/text.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';
@@ -29,7 +29,7 @@ const textPropDefs = {
   ...truncatePropDef,
   ...textWrapPropDef,
   ...colorPropDef,
-  ...highContrastPropDef,
+  ...emphasisPropDef,
 } satisfies {
   as: PropDef<(typeof as)[number]>;
   size: PropDef<(typeof sizes)[number]>;

package/src/components/theme-panel.tsx

@@ -476,7 +476,7 @@ const ThemePanelContent = React.forwardRef<ThemePanelContentElement, ThemePanelC
                     </Theme>
                   </label>
                   <Box asChild pt="2">
-                    <Text asChild size="1" color="gray">
+                    <Text asChild size="1" emphasis="medium">
                       <label htmlFor={`theme-panel-radius-${value}`}>{upperFirst(value)}</label>
                     </Text>
                   </Box>

package/src/components/user-card.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';
@@ -27,7 +26,6 @@ const userCardPropDefs = {
 
   // Card styling
   ...accentColorPropDef,
-  ...highContrastPropDef,
   panelBackground: { type: 'enum', values: panelBackgrounds, default: undefined },
   flush: { type: 'boolean', default: false },
 } satisfies {

package/src/components/user-card.tsx

@@ -65,14 +65,13 @@ const UserCard = React.forwardRef<UserCardElement, UserCardProps>((props, forwar
         src={src}
         fallback={fallback!}
         color={color}
-        highContrast={props.highContrast}
       />
       <Flex direction="column" gap="0" style={{ minWidth: 0 }}>
         <Text size={sizes.name as any} weight="medium" truncate>
           {name}
         </Text>
         {description && (
-          <Text size={sizes.description as any} color="gray" truncate>
+          <Text size={sizes.description as any} emphasis="medium" truncate>
             {description}
           </Text>
         )}

package/src/props/color.prop.ts

@@ -16,7 +16,7 @@ const colorPropDef = {
 };
 
 // 1. When used on components that compose Text, sets the color of the text to the current accent.
-// 2. Defines accent color for descendant text components with `highContrast={true}`.
+// 2. Re-declares the accent role tokens (`--accent-ink`, `--accent-solid`, ...) that descendants read.
 const accentColorPropDef = {
   color: {
     type: 'enum',

package/src/props/emphasis.prop.ts

@@ -0,0 +1,19 @@
+import type { PropDef } from './prop-def.js';
+
+const emphases = ['loud', 'medium', 'quiet'] as const;
+
+// Text-first components only (Text, Heading, Blockquote, Code, DataList.Label).
+// No colour + emphasis reads the gray ink ladder; colour + emphasis reads the accent ink ladder.
+// Components that need a different default (DataList.Label: 'medium') spread this def and override `default`.
+const emphasisPropDef = {
+  emphasis: {
+    type: 'enum',
+    className: 'rt-emphasis',
+    values: emphases,
+    default: undefined,
+  },
+} satisfies {
+  emphasis: PropDef<(typeof emphases)[number]>;
+};
+
+export { emphasisPropDef, emphases };

package/src/props/index.ts

@@ -4,9 +4,9 @@ export * from './prop-def.js';
 // Individual props
 export * from './as-child.prop.js';
 export * from './color.prop.js';
+export * from './emphasis.prop.js';
 export * from './gap.props.js';
 export * from './height.props.js';
-export * from './high-contrast.prop.js';
 export * from './layout.props.js';
 export * from './leading-trim.prop.js';
 export * from './margin.props.js';

package/src/styles/tokens/color.css

@@ -1022,6 +1022,115 @@
   --accent-track: var(--yellow-track);
 }
 
+/* * * * * * * * * * * * * * * * * * * */
+/*                                     */
+/*             Accent roles            */
+/*                                     */
+/* * * * * * * * * * * * * * * * * * * */
+
+/*
+ * Role tokens for accent text and solid fills. There is no per-component contrast prop.
+ *
+ * Text reads an INK, strong by default. Gray ink is step 12. Chromatic ink is step 11
+ * mixed toward step 12, so an error still reads red instead of near-black. The muted and
+ * faint rungs back the `emphasis` prop ('medium' and 'quiet').
+ *
+ * Fills read a SOLID. Gray always fills with step 12 and inverted text; chromatic colours
+ * keep step 9. This is keyed on the colour being gray, never on a prop.
+ *
+ * Why these are declared on every [data-accent-color] element: a custom property that
+ * holds var(--accent-11) resolves on the element that declares it, and children inherit
+ * the resolved colour. So each element that changes the accent must re-declare the roles.
+ * Elements with data-accent-color="" mean "inherit the parent's accent" and are skipped,
+ * so they inherit the parent's resolved roles (chroma stays chroma, gray stays gray).
+ * The gray rule comes last so it wins over `.radix-themes` at equal specificity.
+ */
+
+/* Mode-dependent filters for solid fills. Chromatic fills change colour on hover (step 10);
+ * gray is already at step 12, so it gets a filter instead. */
+:where(.radix-themes) {
+  --solid-chroma-hover-filter: none;
+  --solid-chroma-active-filter: brightness(0.9) contrast(1.03);
+  --solid-chroma-open-filter: brightness(0.96) contrast(1.02);
+  --solid-gray-hover-filter: contrast(0.88) saturate(1.1) brightness(1.1);
+  --solid-gray-active-filter: brightness(0.92);
+  --solid-gray-open-filter: brightness(0.96);
+}
+:is(.dark, .dark-theme),
+:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
+  --solid-chroma-hover-filter: none;
+  --solid-chroma-active-filter: brightness(0.88) contrast(1.03);
+  --solid-chroma-open-filter: brightness(0.95) contrast(1.02);
+  --solid-gray-hover-filter: contrast(0.88) saturate(1.3) brightness(1.18);
+  --solid-gray-active-filter: brightness(0.9);
+  --solid-gray-open-filter: brightness(0.95);
+}
+
+/* Gray ink ladder, independent of the accent. Used by `emphasis` when no colour is set. */
+.radix-themes {
+  --gray-ink: var(--gray-12);
+  --gray-ink-muted: var(--gray-a11);
+  --gray-ink-faint: var(--gray-a10);
+}
+
+/* Chromatic accent */
+.radix-themes,
+[data-accent-color]:where(:not([data-accent-color=''], [data-accent-color='gray'])) {
+  /* How far chromatic ink moves from step 11 toward step 12. */
+  --accent-ink-mix: 45%;
+
+  --accent-ink: color-mix(in oklab, var(--accent-11), var(--accent-12) var(--accent-ink-mix));
+  --accent-ink-muted: color-mix(in oklab, var(--accent-ink) 74%, transparent);
+  --accent-ink-faint: color-mix(in oklab, var(--accent-ink) 52%, transparent);
+
+  --accent-solid: var(--accent-9);
+  --accent-solid-a: var(--accent-a9);
+  --accent-solid-hover: var(--accent-10);
+  --accent-solid-hover-a: var(--accent-a10);
+  --accent-solid-active: var(--accent-11);
+  --accent-solid-active-a: var(--accent-a11);
+  --accent-solid-contrast: var(--accent-contrast);
+  --accent-solid-selection: var(--accent-7);
+  --accent-solid-selection-contrast: var(--accent-12);
+  /* Thin marks (Tabs indicator, RadioCards outline): light yellow uses step 10 here */
+  --accent-solid-indicator: var(--accent-indicator);
+  /* Thumb that sits on a solid fill (Switch, Slider) */
+  --accent-solid-thumb: white;
+  /* Badge chip on a solid-highlighted row (Sidebar) */
+  --accent-solid-badge: var(--accent-12);
+  --accent-solid-badge-contrast: var(--accent-1);
+
+  --accent-solid-hover-filter: var(--solid-chroma-hover-filter);
+  --accent-solid-active-filter: var(--solid-chroma-active-filter);
+  --accent-solid-open-filter: var(--solid-chroma-open-filter);
+}
+
+/* Gray accent: ink is step 12, fills are step 12 with inverted text */
+[data-accent-color='gray'] {
+  --accent-ink: var(--gray-12);
+  --accent-ink-muted: var(--gray-a11);
+  --accent-ink-faint: var(--gray-a10);
+
+  --accent-solid: var(--gray-12);
+  --accent-solid-a: var(--gray-a12);
+  --accent-solid-hover: var(--gray-12);
+  --accent-solid-hover-a: var(--gray-a12);
+  --accent-solid-active: var(--gray-12);
+  --accent-solid-active-a: var(--gray-a12);
+  --accent-solid-contrast: var(--gray-1);
+  --accent-solid-selection: var(--gray-a11);
+  --accent-solid-selection-contrast: var(--gray-1);
+  --accent-solid-indicator: var(--gray-12);
+  /* gray-12 is near-white in dark mode, so the thumb flips with it */
+  --accent-solid-thumb: var(--gray-1);
+  --accent-solid-badge: var(--gray-1);
+  --accent-solid-badge-contrast: var(--gray-12);
+
+  --accent-solid-hover-filter: var(--solid-gray-hover-filter);
+  --accent-solid-active-filter: var(--solid-gray-active-filter);
+  --accent-solid-open-filter: var(--solid-gray-open-filter);
+}
+
 /* * * * * * * * * * * * * * * * * * * */
 /*                                     */
 /*             Gray color              */

package/src/styles/tokens/constants.css

@@ -163,7 +163,6 @@
   /* Opacity constants - using new opacity tokens */
   --opacity-disabled: var(--opacity-5);
   --opacity-soft-variant: var(--opacity-8);
-  --opacity-high-contrast: var(--opacity-8);
 
   /* Positioning constants */
   --position-center: 50%;