@womp/kookie-ui 0.6.2 → 0.8.0

package/src/components/_internal/shell-store.tsx

@@ -0,0 +1,204 @@
+'use client';
+
+/**
+ * The Shell's state model (0.8.0), ported from kookie-ui-v2's Shell.
+ *
+ * - State lives on the pane. Each pane holds `auto | open | closed` (the
+ *   Sidebar adds `thin`). `auto` means untouched: the stylesheet decides what
+ *   it shows at each breakpoint, so first paint is right with no script, the
+ *   server and the client render the same markup, and no open-state callback
+ *   can fire on mount or on a resize.
+ * - The one thing that crosses the Shell is a registry keyed by pane name.
+ *   Each pane registers what it is and how to drive it; a Trigger looks its
+ *   pane up, and the Root reads the set of live overlays. Nothing scans
+ *   children and nothing checks `displayName`.
+ * - The responsive props are resolved into a table with one value per
+ *   breakpoint, from the props alone, with no window. The table is written to
+ *   the DOM as data attributes for the stylesheet, and read again in JS by the
+ *   mirror that sets `aria-expanded`. One table, two readers, so they agree by
+ *   construction.
+ */
+import * as React from 'react';
+import { SHELL_BREAKPOINTS } from '../shell.types.js';
+import type { Breakpoint, PaneName, PresentationValue } from '../shell.types.js';
+
+/* ── Breakpoint tables ─────────────────────────────────────────────────────── */
+
+export type Table<T> = Record<Breakpoint, T>;
+
+/** What a pane shows: open, open at its thin width (Sidebar only), or closed. */
+export type PaneValue = 'open' | 'thin' | 'closed';
+
+type ResponsiveInput<T> = T | Partial<Record<Breakpoint, T>> | undefined;
+
+function isMap<T>(value: ResponsiveInput<T>): value is Partial<Record<Breakpoint, T>> {
+  return typeof value === 'object' && value !== null;
+}
+
+/**
+ * A responsive value at every breakpoint. A breakpoint takes the largest key
+ * at or below it, the same fallback `useResponsiveValue` used; a breakpoint
+ * below every key takes `fallback`.
+ */
+export function tableOf<T>(value: ResponsiveInput<T>, fallback: (bp: Breakpoint) => T): Table<T> {
+  const table = {} as Table<T>;
+  let carried: { value: T } | null = null;
+  for (const bp of SHELL_BREAKPOINTS) {
+    if (value !== undefined && !isMap(value)) {
+      table[bp] = value;
+      continue;
+    }
+    const entry = isMap(value) ? value[bp] : undefined;
+    if (entry !== undefined) carried = { value: entry };
+    table[bp] = carried ? carried.value : fallback(bp);
+  }
+  return table;
+}
+
+/** The table's one value, when it has only one. */
+export function constantOf<T>(table: Table<T>): T | undefined {
+  const first = table.initial;
+  return SHELL_BREAKPOINTS.every((bp) => table[bp] === first) ? first : undefined;
+}
+
+/**
+ * The table as data attributes: `data-<name>` when it holds one value, one
+ * `data-<name>-<bp>` per breakpoint when it holds several. The stylesheet has
+ * a rule for each spelling.
+ */
+export function tableAttributes(name: string, table: Table<string>): Record<string, string> {
+  const constant = constantOf(table);
+  if (constant !== undefined) return { [`data-${name}`]: constant };
+  const attributes: Record<string, string> = {};
+  for (const bp of SHELL_BREAKPOINTS) attributes[`data-${name}-${bp}`] = table[bp];
+  return attributes;
+}
+
+/**
+ * A responsive prop object is usually an inline literal, a new identity every
+ * render. Keying memoisation on its contents keeps the tables, and so the
+ * registry entries, stable across renders that change nothing.
+ */
+export function useStableKey(value: unknown): string {
+  return typeof value === 'object' && value !== null ? JSON.stringify(value) : String(value);
+}
+
+export const FIXED_TABLE: Table<PresentationValue> = tableOf<PresentationValue>('fixed', () => 'fixed');
+
+/* ── The registry ──────────────────────────────────────────────────────────── */
+
+export type OpenChangeReason = 'toggle' | 'dismiss';
+
+export type PaneEntry = {
+  name: PaneName;
+  id: string;
+  el: HTMLElement | null;
+  /** What the pane shows now; `undefined` while an untouched pane cannot know (before the breakpoint is known). */
+  value: PaneValue | undefined;
+  /** How the pane is presented now, when known. */
+  presentation: PresentationValue | undefined;
+  /** The pane's own presentation at every breakpoint. A Panel with none of its own follows the Rail's. */
+  presentationTable: Table<PresentationValue>;
+  /** Open and presented as an overlay: what the scrim and Escape close, and what containment exempts. */
+  overlayLive: boolean;
+  /** The pane's designed open width, for panes that sit beside it when floating. */
+  size: number;
+  setValue: (value: PaneValue, reason: OpenChangeReason) => void;
+  toggle: (reason: OpenChangeReason) => void;
+};
+
+export type ShellStore = {
+  entries: Map<PaneName, PaneEntry>;
+  listeners: Set<() => void>;
+  /**
+   * What a subscriber reads. useSyncExternalStore needs a value that is stable
+   * between notifications, and a number is; the Map, or anything derived from
+   * it, would be a new identity on every read.
+   */
+  version: number;
+  /** The pane a hovered Trigger is previewing, if any. Layout only. */
+  peek: PaneName | null;
+};
+
+export function createShellStore(): ShellStore {
+  return { entries: new Map(), listeners: new Set(), version: 0, peek: null };
+}
+
+export function notifyShellStore(store: ShellStore) {
+  store.version += 1;
+  for (const listener of store.listeners) listener();
+}
+
+export function subscribeShellStore(store: ShellStore, listener: () => void) {
+  store.listeners.add(listener);
+  return () => {
+    store.listeners.delete(listener);
+  };
+}
+
+export function setShellPeek(store: ShellStore, peek: PaneName | null) {
+  if (store.peek === peek) return;
+  store.peek = peek;
+  notifyShellStore(store);
+}
+
+export const ShellStoreContext = React.createContext<ShellStore | null>(null);
+
+export function useShellStore(part: string): ShellStore {
+  const store = React.useContext(ShellStoreContext);
+  if (!store) throw new Error(`${part} must be used within <Shell.Root>`);
+  return store;
+}
+
+/** One pane's registry entry. Re-renders only when that entry is replaced. */
+export function usePaneEntry(store: ShellStore, name: PaneName): PaneEntry | undefined {
+  const subscribe = React.useCallback((listener: () => void) => subscribeShellStore(store, listener), [store]);
+  const getSnapshot = React.useCallback(() => store.entries.get(name), [store, name]);
+  return React.useSyncExternalStore(subscribe, getSnapshot, () => undefined);
+}
+
+/**
+ * Whether this pane is the one being previewed. A boolean per pane rather than
+ * the peek target itself, so hovering one Trigger re-renders one pane, not all.
+ */
+export function usePeeking(store: ShellStore, name: PaneName): boolean {
+  const subscribe = React.useCallback((listener: () => void) => subscribeShellStore(store, listener), [store]);
+  return React.useSyncExternalStore(
+    subscribe,
+    () => store.peek === name,
+    () => false,
+  );
+}
+
+/* ── Inset ─────────────────────────────────────────────────────────────────── */
+
+export type InsetPaneId = 'rail' | 'panel' | 'sidebar' | 'content' | 'inspector' | 'bottom';
+
+export const ShellInsetContext = React.createContext<{
+  registerInset: (id: InsetPaneId) => void;
+  unregisterInset: (id: InsetPaneId) => void;
+} | null>(null);
+
+/** Registers a pane's `inset` with the Root, which paints the backdrop while any pane is inset. */
+export function useInsetRegistration(id: InsetPaneId, inset: boolean | undefined) {
+  const ctx = React.useContext(ShellInsetContext);
+  if (!ctx) throw new Error('Shell panes must be used within <Shell.Root>');
+  const { registerInset, unregisterInset } = ctx;
+  React.useLayoutEffect(() => {
+    if (!inset) return;
+    registerInset(id);
+    return () => unregisterInset(id);
+  }, [id, inset, registerInset, unregisterInset]);
+}
+
+/* ── Development warnings ──────────────────────────────────────────────────── */
+
+const warned = new Set<string>();
+
+/** A deprecation warning, once per message per page load. Development only. */
+export function warnOnce(message: string) {
+  if (process.env.NODE_ENV === 'production') return;
+  if (warned.has(message)) return;
+  warned.add(message);
+  console.warn(`[kookie-ui] ${message}`);
+}

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.