@askrjs/themes 0.0.27 → 0.0.29

package/THEMING.md

@@ -996,6 +996,32 @@ All official themes are tested for WCAG AA compliance:
 
 The automated test suite (`tests/unit/contrast.test.ts`) validates these pairs across all themes in both light and dark modes.
 
+The default light and dark modes additionally publish this canonical semantic
+pairing matrix. Ratios apply to browser-resolved colors after alpha and element
+opacity are composited:
+
+| Semantic pairing                                                                        | Minimum |
+| --------------------------------------------------------------------------------------- | ------: |
+| Ordinary or subtle text on its documented surface                                       |   4.5:1 |
+| Strong boundaries, warning UI, and info UI on a surface                                 |     3:1 |
+| The shared focus indicator on page, surface, muted, raised, overlay, and primary layers |     3:1 |
+| Disabled control fill against the page                                                  |   1.5:1 |
+| Disabled control boundary against the page when the fill is below 1.5:1                 |     3:1 |
+
+### Forced Colors
+
+The default stylesheet includes a `forced-colors: active` layer. It uses
+system `Canvas`, `CanvasText`, `ButtonText`, `GrayText`, `Highlight`, and
+`HighlightText` colors for control boundaries, disabled states, overlay
+separation, and focus. Native system-color adjustment remains enabled; do not
+add `forced-color-adjust: none` unless a specific semantic image would
+otherwise lose meaning and the exception is documented and tested.
+
+Normal browser CI resolves every canonical pairing in light and dark mode.
+Chromium CI also runs a real forced-colors context, while the stylesheet and
+template parity test protects the same contract for engines that cannot
+emulate it.
+
 ---
 
 ## Implementation Note

package/dist/components/theme/theme.js

@@ -84,7 +84,7 @@ function ThemeScope(props) {
 	const ownedCoordinator = state(getDefaultThemeCoordinator())();
 	const coordinator = parentScope.coordinator ?? ownedCoordinator;
 	const scopeDepth = parentScope.depth + 1;
-	coordinator.register(scopeId, scopeDepth, currentTheme, scopeSignal, (nextTheme) => {
+	coordinator.register(scopeId, scopeDepth, storageKey, currentTheme, scopeSignal, (nextTheme) => {
 		if (themeState() !== nextTheme) themeState.set(nextTheme);
 	});
 	const setTheme = (nextTheme) => {
@@ -185,10 +185,11 @@ function createThemeCoordinator() {
 			}
 			schedule();
 		},
-		register(id, depth, themeName, signal, onThemeChange) {
+		register(id, depth, identity, themeName, signal, onThemeChange) {
 			const existing = scopes.get(id);
 			scopes.set(id, {
 				depth,
+				identity,
 				sequence: existing?.sequence ?? nextSequence++,
 				theme: themeName,
 				signal,
@@ -206,7 +207,8 @@ function createThemeCoordinator() {
 			if (scope) scope.theme = themeName;
 			explicitOwner = id;
 			const ownerDepth = scope?.depth;
-			for (const [scopeId, registered] of scopes) if (scopeId !== id && registered.depth === ownerDepth) {
+			const ownerIdentity = scope?.identity;
+			for (const [scopeId, registered] of scopes) if (scopeId !== id && registered.depth === ownerDepth && registered.identity === ownerIdentity) {
 				registered.theme = themeName;
 				registered.onThemeChange(themeName);
 			}

package/dist/components/theme/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","names":[],"sources":["../../../src/components/theme/theme.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { defineScope, getSignal, readScope, state } from \"@askrjs/askr\";\nimport { cloneElement, isElement, type JSXElement } from \"@askrjs/askr/foundations/structures\";\nimport { Button } from \"@askrjs/ui\";\nimport type { ButtonNativeProps, PressEvent } from \"@askrjs/ui\";\n\n/** Names of the built-in \"cat\" theme presets. */\nexport const CAT_THEME_NAMES = [\"tabby\", \"ginger\", \"tuxedo\", \"calico\", \"torty\"] as const;\n\n/** A built-in \"cat\" theme name, one of {@link CAT_THEME_NAMES}. */\nexport type CatThemeName = (typeof CAT_THEME_NAMES)[number];\n/** Any theme identifier accepted by {@link ThemeScope}: `\"light\"`, `\"dark\"`, `\"system\"`, a {@link CatThemeName}, or a custom string. */\nexport type ThemeName = \"light\" | \"dark\" | \"system\" | CatThemeName | (string & {});\n\n/** A theme choice offered by {@link ThemePicker}/{@link ThemeToggle}: a `value` paired with a display `label`. */\nexport type ThemeOption = {\n  value: ThemeName;\n  label: string;\n};\n\n/** Value read from {@link theme}: the active theme, its resolved system value, a setter, and the available theme options. */\nexport type ThemeScopeValue = {\n  theme: () => ThemeName;\n  resolvedSystemTheme: () => \"light\" | \"dark\";\n  setTheme: (theme: ThemeName) => void;\n  themes: readonly ThemeOption[];\n  storageKey: string;\n};\n\n/** Props for the {@link ThemeScope} component. */\nexport type ThemeScopeProps = {\n  children?: unknown;\n  defaultTheme?: ThemeName;\n  themes?: readonly ThemeOption[];\n  storageKey?: string;\n};\n\n/** Props for the {@link ThemePicker} component. */\nexport type ThemePickerProps = Omit<\n  JSX.IntrinsicElements[\"select\"],\n  \"children\" | \"value\" | \"defaultValue\" | \"onChange\"\n> & {\n  themes?: readonly ThemeOption[];\n  label?: string;\n};\n\n/** Render context passed to a function-as-children {@link ThemeToggleProps.children}. */\nexport type ThemeToggleRenderContext = {\n  theme: ThemeName;\n  nextTheme: ThemeName;\n};\n\n/** Props for the {@link ThemeToggle} component. */\nexport type ThemeToggleProps = Omit<ButtonNativeProps, \"children\" | \"onPress\"> & {\n  children?: unknown | ((context: ThemeToggleRenderContext) => unknown);\n  lightIcon?: unknown;\n  darkIcon?: unknown;\n  systemIcon?: unknown;\n  themes?: readonly ThemeName[];\n  onPress?: (event: PressEvent) => void;\n};\n\n/** Default light/dark/system theme options used by {@link ThemeScope} and {@link ThemePicker}. */\nexport const DEFAULT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"system\", label: \"System\" },\n  { value: \"light\", label: \"Light\" },\n  { value: \"dark\", label: \"Dark\" },\n];\n\n/** Theme options for the built-in \"cat\" theme presets, keyed to {@link CAT_THEME_NAMES}. */\nexport const CAT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"tabby\", label: \"Tabby\" },\n  { value: \"ginger\", label: \"Ginger\" },\n  { value: \"tuxedo\", label: \"Tuxedo\" },\n  { value: \"calico\", label: \"Calico\" },\n  { value: \"torty\", label: \"Torty\" },\n];\n\nconst DEFAULT_STORAGE_KEY = \"askr-theme\";\nconst STATIC_CHILDREN = Symbol.for(\"askr.static-children\");\nconst documentThemeCoordinators = new WeakMap<Document, ThemeCoordinator>();\ntype ThemeCoordinator = ReturnType<typeof createThemeCoordinator>;\ntype InternalThemeScopeValue = ThemeScopeValue & {\n  readonly coordinator: ThemeCoordinator | null;\n  readonly depth: number;\n};\n\nconst ThemeScopeContext = defineScope<InternalThemeScopeValue>({\n  theme: () => \"system\",\n  resolvedSystemTheme: () => \"light\",\n  setTheme: () => undefined,\n  themes: DEFAULT_THEME_OPTIONS,\n  storageKey: DEFAULT_STORAGE_KEY,\n  coordinator: null,\n  depth: -1,\n});\n\n/** Reads the current {@link ThemeScopeValue} from the nearest enclosing {@link ThemeScope}. */\nexport function theme(): ThemeScopeValue {\n  return readScope(ThemeScopeContext);\n}\n\n/**\n * Establishes a theme boundary: tracks the active theme (persisted to\n * `localStorage` under `storageKey` and synced across tabs/scopes), resolves\n * the OS `\"system\"` preference, and reflects the choice onto the DOM via\n * `data-theme`/`data-theme-choice` attributes. Nested scopes cooperate\n * through a shared coordinator so the deepest explicitly-set scope wins.\n */\nexport function ThemeScope(props: ThemeScopeProps): JSX.Element {\n  const {\n    children,\n    defaultTheme = \"system\",\n    themes = DEFAULT_THEME_OPTIONS,\n    storageKey = DEFAULT_STORAGE_KEY,\n  } = props;\n\n  const scopeId = state<symbol>(Symbol(\"ThemeScope\"))();\n  const scopeSignal = getSignal();\n  // The first render must be identical on the server and in the browser.\n  // Browser persistence is adopted from the committed root ref, after Askr's\n  // hydration verifier has accepted the server markup.\n  const themeState = state<ThemeName>(defaultTheme);\n  const localResolvedSystemTheme = state<\"light\" | \"dark\">(\"light\");\n  const persistenceAdoption = state({ complete: false })();\n  const currentTheme = themeState();\n  const parentScope = readScope(ThemeScopeContext);\n  const ownedCoordinator = state<ThemeCoordinator>(getDefaultThemeCoordinator())();\n  const coordinator = parentScope.coordinator ?? ownedCoordinator;\n  const scopeDepth = parentScope.depth + 1;\n  coordinator.register(scopeId, scopeDepth, currentTheme, scopeSignal, (nextTheme) => {\n    if (themeState() !== nextTheme) themeState.set(nextTheme);\n  });\n\n  const setTheme = (nextTheme: ThemeName) => {\n    themeState.set(nextTheme);\n    writeStoredTheme(storageKey, nextTheme);\n    coordinator.activate(scopeId, nextTheme);\n  };\n\n  const resolvedSystemTheme = parentScope.coordinator\n    ? parentScope.resolvedSystemTheme\n    : localResolvedSystemTheme;\n  const value: InternalThemeScopeValue = {\n    theme: themeState,\n    resolvedSystemTheme,\n    setTheme,\n    themes,\n    storageKey,\n    coordinator,\n    depth: scopeDepth,\n  };\n\n  return (\n    <ThemeScopeContext value={value}>\n      <div\n        data-slot=\"theme-scope\"\n        ref={\n          parentScope.coordinator === null\n            ? (element: HTMLElement | null) => {\n                coordinator.attach(\n                  element,\n                  (nextTheme) => localResolvedSystemTheme.set(nextTheme),\n                  scopeSignal,\n                );\n                if (element && typeof window !== \"undefined\") {\n                  const onStorage = (event: StorageEvent) => {\n                    let storageMatches = event.storageArea == null;\n                    try {\n                      storageMatches ||= event.storageArea === window.localStorage;\n                    } catch {\n                      // Locked-down/private contexts may deny access to localStorage.\n                    }\n                    if (!storageMatches || event.key !== storageKey) {\n                      return;\n                    }\n                    const nextTheme = event.newValue as ThemeName | null;\n                    if (!nextTheme) return;\n                    themeState.set(nextTheme);\n                    coordinator.activate(scopeId, nextTheme);\n                  };\n                  window.addEventListener(\"storage\", onStorage);\n                  scopeSignal.addEventListener(\n                    \"abort\",\n                    () => window.removeEventListener(\"storage\", onStorage),\n                    { once: true },\n                  );\n                }\n                if (!element || persistenceAdoption.complete) return;\n                persistenceAdoption.complete = true;\n                const storedTheme = readStoredTheme(storageKey);\n                if (storedTheme && storedTheme !== themeState()) {\n                  themeState.set(storedTheme);\n                  coordinator.activate(scopeId, storedTheme);\n                }\n              }\n            : undefined\n        }\n      >\n        {children}\n      </div>\n    </ThemeScopeContext>\n  );\n}\n\nfunction getDefaultThemeCoordinator(): ThemeCoordinator {\n  if (typeof document === \"undefined\") {\n    return createThemeCoordinator();\n  }\n\n  const existing = documentThemeCoordinators.get(document);\n  if (existing) return existing;\n\n  const coordinator = createThemeCoordinator();\n  documentThemeCoordinators.set(document, coordinator);\n  return coordinator;\n}\n\nfunction removeEmptyGeneratedStyleRegistries(root: Node | null): void {\n  const ownerDocument =\n    root?.nodeType === 9\n      ? (root as Document)\n      : (root?.ownerDocument ?? (typeof document === \"undefined\" ? null : document));\n  if (!ownerDocument) return;\n\n  for (const registry of ownerDocument.querySelectorAll<HTMLStyleElement>(\n    \"style[data-askr-style-registry]\",\n  )) {\n    if (!registry.textContent?.trim()) registry.remove();\n  }\n}\n\nfunction createThemeCoordinator() {\n  const scopes = new Map<\n    symbol,\n    {\n      depth: number;\n      sequence: number;\n      theme: ThemeName;\n      signal: AbortSignal;\n      onThemeChange: (themeName: ThemeName) => void;\n    }\n  >();\n  let nextSequence = 0;\n  let explicitOwner: symbol | undefined;\n  let root: Node | null = null;\n  let scheduled = false;\n\n  const target = (): HTMLElement | null => {\n    if (root?.nodeType === 9) return (root as Document).documentElement;\n    if (root && \"host\" in root) return (root as ShadowRoot).host as HTMLElement;\n    return typeof document === \"undefined\" ? null : document.documentElement;\n  };\n  const syncActive = (): void => {\n    if (explicitOwner !== undefined) return;\n    let candidate: { depth: number; sequence: number; theme: ThemeName } | undefined;\n    for (const scope of scopes.values()) {\n      if (\n        !candidate ||\n        scope.depth > candidate.depth ||\n        (scope.depth === candidate.depth && scope.sequence > candidate.sequence)\n      ) {\n        candidate = scope;\n      }\n    }\n    if (candidate) syncThemeTarget(target(), candidate.theme);\n  };\n  const schedule = (): void => {\n    if (typeof document === \"undefined\" || scheduled) return;\n    scheduled = true;\n    setTimeout(() => {\n      scheduled = false;\n      syncActive();\n      if (scopes.size === 0) removeEmptyGeneratedStyleRegistries(root);\n    }, 0);\n  };\n\n  return Object.freeze({\n    attach(\n      element: HTMLElement | null,\n      onResolvedSystemTheme: (themeName: \"light\" | \"dark\") => void,\n      signal: AbortSignal,\n    ) {\n      if (element) root = element.getRootNode();\n      if (element && typeof window !== \"undefined\" && typeof window.matchMedia === \"function\") {\n        const media = window.matchMedia(\"(prefers-color-scheme: dark)\");\n        const update = () => onResolvedSystemTheme(media.matches ? \"dark\" : \"light\");\n        update();\n        media.addEventListener?.(\"change\", update);\n        signal.addEventListener(\"abort\", () => media.removeEventListener?.(\"change\", update), {\n          once: true,\n        });\n      }\n      schedule();\n    },\n    register(\n      id: symbol,\n      depth: number,\n      themeName: ThemeName,\n      signal: AbortSignal,\n      onThemeChange: (themeName: ThemeName) => void,\n    ) {\n      const existing = scopes.get(id);\n      scopes.set(id, {\n        depth,\n        sequence: existing?.sequence ?? nextSequence++,\n        theme: themeName,\n        signal,\n        onThemeChange,\n      });\n      if (!existing) {\n        signal.addEventListener(\n          \"abort\",\n          () => {\n            scopes.delete(id);\n            if (explicitOwner === id) explicitOwner = undefined;\n            schedule();\n          },\n          { once: true },\n        );\n      }\n      schedule();\n    },\n    activate(id: symbol, themeName: ThemeName) {\n      const scope = scopes.get(id);\n      if (scope) scope.theme = themeName;\n      explicitOwner = id;\n      const ownerDepth = scope?.depth;\n      for (const [scopeId, registered] of scopes) {\n        if (scopeId !== id && registered.depth === ownerDepth) {\n          registered.theme = themeName;\n          registered.onThemeChange(themeName);\n        }\n      }\n      syncThemeTarget(target(), themeName);\n    },\n  });\n}\n\n/** A `<select>` bound to the current {@link theme}, listing `themes` (defaults to the enclosing scope's options). */\nexport function ThemePicker(props: ThemePickerProps): JSX.Element {\n  const activeTheme = theme();\n  const { themes = activeTheme.themes, label = \"Theme\", ...rest } = props;\n  const currentTheme = activeTheme.theme();\n\n  return (\n    <select\n      {...rest}\n      aria-label={rest[\"aria-label\"] ?? label}\n      data-slot=\"theme-picker\"\n      value={currentTheme}\n      onChange={(event: Event) => {\n        const target = getThemePickerTarget(event);\n        if (target) {\n          activeTheme.setTheme(target.value as ThemeName);\n        }\n      }}\n    >\n      {themes.map((option) => (\n        <option key={option.value} value={option.value} selected={option.value === currentTheme}>\n          {option.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n\nfunction getThemePickerTarget(event: Event): HTMLSelectElement | null {\n  if (typeof HTMLSelectElement === \"undefined\") {\n    return null;\n  }\n\n  const path = typeof event.composedPath === \"function\" ? event.composedPath() : [];\n  const candidates = [event.target, event.currentTarget, ...path];\n\n  for (const candidate of candidates) {\n    if (candidate instanceof HTMLSelectElement) {\n      return candidate;\n    }\n  }\n\n  return null;\n}\n\n/**\n * A button that cycles through `themes` (defaults to `[\"light\", \"dark\"]`) on\n * press. Supports icon props per theme, or a function-as-children render\n * prop receiving {@link ThemeToggleRenderContext}.\n */\nexport function ThemeToggle(props: ThemeToggleProps): JSX.Element {\n  const activeTheme = theme();\n  const {\n    children,\n    lightIcon,\n    darkIcon,\n    systemIcon,\n    themes = [\"light\", \"dark\"],\n    onPress,\n    ...rest\n  } = props;\n\n  const currentTheme = activeTheme.theme();\n  const nextTheme = getNextTheme(currentTheme, themes, activeTheme.resolvedSystemTheme());\n  const renderContext = { theme: currentTheme, nextTheme };\n  const ariaLabel = (rest as Record<string, unknown>)[\"aria-label\"];\n  const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {\n    lightIcon,\n    darkIcon,\n    systemIcon,\n  });\n  const renderedIcon = cloneThemeToggleIcon(themedIcon, currentTheme);\n  const renderedIconSlots =\n    renderThemeToggleIconSlots(currentTheme, {\n      lightIcon,\n      darkIcon,\n      systemIcon,\n    }) ?? renderedIcon;\n  const content =\n    typeof children === \"function\" ? children(renderContext) : (children ?? renderedIconSlots);\n\n  return (\n    <Button\n      {...(rest as ButtonNativeProps)}\n      aria-label={typeof ariaLabel === \"string\" ? ariaLabel : `Switch to ${nextTheme} theme`}\n      data-theme-control=\"toggle\"\n      data-theme-choice={currentTheme}\n      data-next-theme={nextTheme}\n      onPress={(event) => {\n        onPress?.(event);\n        if (!event.defaultPrevented && !Object.is(nextTheme, currentTheme)) {\n          activeTheme.setTheme(nextTheme);\n        }\n      }}\n    >\n      <span data-slot=\"theme-toggle-content\">{content}</span>\n    </Button>\n  );\n}\n\nfunction getNextTheme(\n  currentTheme: ThemeName,\n  themes: readonly ThemeName[],\n  resolvedSystemTheme: \"light\" | \"dark\" = \"light\",\n): ThemeName {\n  if (themes.length === 0) return currentTheme;\n  const index = themes.indexOf(currentTheme);\n  if (index < 0 && currentTheme === \"system\") {\n    if (themes.includes(\"light\") && themes.includes(\"dark\")) {\n      return resolvedSystemTheme === \"dark\" ? \"light\" : \"dark\";\n    }\n  }\n  return themes[index >= 0 && index < themes.length - 1 ? index + 1 : 0]!;\n}\n\nfunction getThemeIcon(\n  theme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  if (theme === \"light\") return icons.lightIcon;\n  if (theme === \"dark\") return icons.darkIcon;\n  if (theme === \"system\") return icons.systemIcon;\n  return undefined;\n}\n\nexport function resolveThemeToggleIcon(\n  theme: ThemeName,\n  nextTheme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);\n}\n\nfunction renderThemeToggleIconSlots(\n  theme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  if (getThemeIcon(theme, icons) === undefined) {\n    return undefined;\n  }\n\n  const slots = [\n    [\"light\", icons.lightIcon],\n    [\"dark\", icons.darkIcon],\n    [\"system\", icons.systemIcon],\n  ] as const;\n  const availableSlots = slots.filter(([, icon]) => icon !== undefined && icon !== null);\n\n  if (availableSlots.length <= 1) {\n    return undefined;\n  }\n\n  return availableSlots.map(([slotTheme, icon]) => (\n    <span\n      key={slotTheme}\n      data-slot=\"theme-toggle-icon\"\n      data-theme-toggle-icon={slotTheme}\n      hidden={slotTheme === theme ? undefined : true}\n    >\n      {cloneThemeToggleIcon(icon, slotTheme)}\n    </span>\n  ));\n}\n\nfunction cloneThemeToggleIcon(icon: unknown, key?: string): unknown {\n  if (Array.isArray(icon)) {\n    const clonedChildren = icon.map((child) => cloneThemeToggleIcon(child));\n    if ((icon as unknown as Record<symbol, unknown>)[STATIC_CHILDREN] === true) {\n      Object.defineProperty(clonedChildren, STATIC_CHILDREN, {\n        value: true,\n        configurable: true,\n      });\n    }\n    return clonedChildren;\n  }\n\n  if (!isElement(icon)) return icon;\n\n  const props = icon.props as Record<string, unknown> | undefined;\n  const clonedProps = props ? { ...props } : {};\n\n  if (\"children\" in clonedProps) {\n    clonedProps.children = cloneThemeToggleIcon(clonedProps.children);\n  }\n\n  const clonedIcon = cloneElement(icon, clonedProps);\n  return {\n    ...clonedIcon,\n    key: icon.key ?? key ?? null,\n  } satisfies JSXElement;\n}\n\nfunction syncThemeTarget(\n  html: HTMLElement | null,\n  themeChoice: ThemeName | null | undefined,\n): void {\n  if (!html) return;\n\n  if (themeChoice == null) {\n    html.removeAttribute(\"data-theme\");\n    html.removeAttribute(\"data-theme-choice\");\n    return;\n  }\n\n  html.setAttribute(\"data-theme-choice\", themeChoice);\n\n  if (themeChoice === \"system\") {\n    html.removeAttribute(\"data-theme\");\n  } else {\n    html.setAttribute(\"data-theme\", themeChoice);\n  }\n}\n\nfunction readStoredTheme(storageKey: string): ThemeName | undefined {\n  if (typeof window === \"undefined\") return undefined;\n  try {\n    const storedTheme = window.localStorage.getItem(storageKey);\n    return storedTheme ? (storedTheme as ThemeName) : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredTheme(storageKey: string, theme: ThemeName): void {\n  if (typeof window === \"undefined\") return;\n  try {\n    window.localStorage.setItem(storageKey, theme);\n  } catch {\n    // Storage can be unavailable in private or locked-down browser contexts.\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"theme.js","names":[],"sources":["../../../src/components/theme/theme.tsx"],"sourcesContent":["import type { JSX } from \"@askrjs/askr/jsx-runtime\";\nimport { defineScope, getSignal, readScope, state } from \"@askrjs/askr\";\nimport { cloneElement, isElement, type JSXElement } from \"@askrjs/askr/foundations/structures\";\nimport { Button } from \"@askrjs/ui\";\nimport type { ButtonNativeProps, PressEvent } from \"@askrjs/ui\";\n\n/** Names of the built-in \"cat\" theme presets. */\nexport const CAT_THEME_NAMES = [\"tabby\", \"ginger\", \"tuxedo\", \"calico\", \"torty\"] as const;\n\n/** A built-in \"cat\" theme name, one of {@link CAT_THEME_NAMES}. */\nexport type CatThemeName = (typeof CAT_THEME_NAMES)[number];\n/** Any theme identifier accepted by {@link ThemeScope}: `\"light\"`, `\"dark\"`, `\"system\"`, a {@link CatThemeName}, or a custom string. */\nexport type ThemeName = \"light\" | \"dark\" | \"system\" | CatThemeName | (string & {});\n\n/** A theme choice offered by {@link ThemePicker}/{@link ThemeToggle}: a `value` paired with a display `label`. */\nexport type ThemeOption = {\n  value: ThemeName;\n  label: string;\n};\n\n/** Value read from {@link theme}: the active theme, its resolved system value, a setter, and the available theme options. */\nexport type ThemeScopeValue = {\n  theme: () => ThemeName;\n  resolvedSystemTheme: () => \"light\" | \"dark\";\n  setTheme: (theme: ThemeName) => void;\n  themes: readonly ThemeOption[];\n  storageKey: string;\n};\n\n/** Props for the {@link ThemeScope} component. */\nexport type ThemeScopeProps = {\n  children?: unknown;\n  defaultTheme?: ThemeName;\n  themes?: readonly ThemeOption[];\n  storageKey?: string;\n};\n\n/** Props for the {@link ThemePicker} component. */\nexport type ThemePickerProps = Omit<\n  JSX.IntrinsicElements[\"select\"],\n  \"children\" | \"value\" | \"defaultValue\" | \"onChange\"\n> & {\n  themes?: readonly ThemeOption[];\n  label?: string;\n};\n\n/** Render context passed to a function-as-children {@link ThemeToggleProps.children}. */\nexport type ThemeToggleRenderContext = {\n  theme: ThemeName;\n  nextTheme: ThemeName;\n};\n\n/** Props for the {@link ThemeToggle} component. */\nexport type ThemeToggleProps = Omit<ButtonNativeProps, \"children\" | \"onPress\"> & {\n  children?: unknown | ((context: ThemeToggleRenderContext) => unknown);\n  lightIcon?: unknown;\n  darkIcon?: unknown;\n  systemIcon?: unknown;\n  themes?: readonly ThemeName[];\n  onPress?: (event: PressEvent) => void;\n};\n\n/** Default light/dark/system theme options used by {@link ThemeScope} and {@link ThemePicker}. */\nexport const DEFAULT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"system\", label: \"System\" },\n  { value: \"light\", label: \"Light\" },\n  { value: \"dark\", label: \"Dark\" },\n];\n\n/** Theme options for the built-in \"cat\" theme presets, keyed to {@link CAT_THEME_NAMES}. */\nexport const CAT_THEME_OPTIONS: readonly ThemeOption[] = [\n  { value: \"tabby\", label: \"Tabby\" },\n  { value: \"ginger\", label: \"Ginger\" },\n  { value: \"tuxedo\", label: \"Tuxedo\" },\n  { value: \"calico\", label: \"Calico\" },\n  { value: \"torty\", label: \"Torty\" },\n];\n\nconst DEFAULT_STORAGE_KEY = \"askr-theme\";\nconst STATIC_CHILDREN = Symbol.for(\"askr.static-children\");\nconst documentThemeCoordinators = new WeakMap<Document, ThemeCoordinator>();\ntype ThemeCoordinator = ReturnType<typeof createThemeCoordinator>;\ntype InternalThemeScopeValue = ThemeScopeValue & {\n  readonly coordinator: ThemeCoordinator | null;\n  readonly depth: number;\n};\n\nconst ThemeScopeContext = defineScope<InternalThemeScopeValue>({\n  theme: () => \"system\",\n  resolvedSystemTheme: () => \"light\",\n  setTheme: () => undefined,\n  themes: DEFAULT_THEME_OPTIONS,\n  storageKey: DEFAULT_STORAGE_KEY,\n  coordinator: null,\n  depth: -1,\n});\n\n/** Reads the current {@link ThemeScopeValue} from the nearest enclosing {@link ThemeScope}. */\nexport function theme(): ThemeScopeValue {\n  return readScope(ThemeScopeContext);\n}\n\n/**\n * Establishes a theme boundary: tracks the active theme (persisted to\n * `localStorage` under `storageKey` and synced across tabs/scopes), resolves\n * the OS `\"system\"` preference, and reflects the choice onto the DOM via\n * `data-theme`/`data-theme-choice` attributes. Nested scopes cooperate\n * through a shared coordinator so the deepest explicitly-set scope wins.\n */\nexport function ThemeScope(props: ThemeScopeProps): JSX.Element {\n  const {\n    children,\n    defaultTheme = \"system\",\n    themes = DEFAULT_THEME_OPTIONS,\n    storageKey = DEFAULT_STORAGE_KEY,\n  } = props;\n\n  const scopeId = state<symbol>(Symbol(\"ThemeScope\"))();\n  const scopeSignal = getSignal();\n  // The first render must be identical on the server and in the browser.\n  // Browser persistence is adopted from the committed root ref, after Askr's\n  // hydration verifier has accepted the server markup.\n  const themeState = state<ThemeName>(defaultTheme);\n  const localResolvedSystemTheme = state<\"light\" | \"dark\">(\"light\");\n  const persistenceAdoption = state({ complete: false })();\n  const currentTheme = themeState();\n  const parentScope = readScope(ThemeScopeContext);\n  const ownedCoordinator = state<ThemeCoordinator>(getDefaultThemeCoordinator())();\n  const coordinator = parentScope.coordinator ?? ownedCoordinator;\n  const scopeDepth = parentScope.depth + 1;\n  coordinator.register(scopeId, scopeDepth, storageKey, currentTheme, scopeSignal, (nextTheme) => {\n    if (themeState() !== nextTheme) themeState.set(nextTheme);\n  });\n\n  const setTheme = (nextTheme: ThemeName) => {\n    themeState.set(nextTheme);\n    writeStoredTheme(storageKey, nextTheme);\n    coordinator.activate(scopeId, nextTheme);\n  };\n\n  const resolvedSystemTheme = parentScope.coordinator\n    ? parentScope.resolvedSystemTheme\n    : localResolvedSystemTheme;\n  const value: InternalThemeScopeValue = {\n    theme: themeState,\n    resolvedSystemTheme,\n    setTheme,\n    themes,\n    storageKey,\n    coordinator,\n    depth: scopeDepth,\n  };\n\n  return (\n    <ThemeScopeContext value={value}>\n      <div\n        data-slot=\"theme-scope\"\n        ref={\n          parentScope.coordinator === null\n            ? (element: HTMLElement | null) => {\n                coordinator.attach(\n                  element,\n                  (nextTheme) => localResolvedSystemTheme.set(nextTheme),\n                  scopeSignal,\n                );\n                if (element && typeof window !== \"undefined\") {\n                  const onStorage = (event: StorageEvent) => {\n                    let storageMatches = event.storageArea == null;\n                    try {\n                      storageMatches ||= event.storageArea === window.localStorage;\n                    } catch {\n                      // Locked-down/private contexts may deny access to localStorage.\n                    }\n                    if (!storageMatches || event.key !== storageKey) {\n                      return;\n                    }\n                    const nextTheme = event.newValue as ThemeName | null;\n                    if (!nextTheme) return;\n                    themeState.set(nextTheme);\n                    coordinator.activate(scopeId, nextTheme);\n                  };\n                  window.addEventListener(\"storage\", onStorage);\n                  scopeSignal.addEventListener(\n                    \"abort\",\n                    () => window.removeEventListener(\"storage\", onStorage),\n                    { once: true },\n                  );\n                }\n                if (!element || persistenceAdoption.complete) return;\n                persistenceAdoption.complete = true;\n                const storedTheme = readStoredTheme(storageKey);\n                if (storedTheme && storedTheme !== themeState()) {\n                  themeState.set(storedTheme);\n                  coordinator.activate(scopeId, storedTheme);\n                }\n              }\n            : undefined\n        }\n      >\n        {children}\n      </div>\n    </ThemeScopeContext>\n  );\n}\n\nfunction getDefaultThemeCoordinator(): ThemeCoordinator {\n  if (typeof document === \"undefined\") {\n    return createThemeCoordinator();\n  }\n\n  const existing = documentThemeCoordinators.get(document);\n  if (existing) return existing;\n\n  const coordinator = createThemeCoordinator();\n  documentThemeCoordinators.set(document, coordinator);\n  return coordinator;\n}\n\nfunction removeEmptyGeneratedStyleRegistries(root: Node | null): void {\n  const ownerDocument =\n    root?.nodeType === 9\n      ? (root as Document)\n      : (root?.ownerDocument ?? (typeof document === \"undefined\" ? null : document));\n  if (!ownerDocument) return;\n\n  for (const registry of ownerDocument.querySelectorAll<HTMLStyleElement>(\n    \"style[data-askr-style-registry]\",\n  )) {\n    if (!registry.textContent?.trim()) registry.remove();\n  }\n}\n\nfunction createThemeCoordinator() {\n  const scopes = new Map<\n    symbol,\n    {\n      depth: number;\n      identity: string;\n      sequence: number;\n      theme: ThemeName;\n      signal: AbortSignal;\n      onThemeChange: (themeName: ThemeName) => void;\n    }\n  >();\n  let nextSequence = 0;\n  let explicitOwner: symbol | undefined;\n  let root: Node | null = null;\n  let scheduled = false;\n\n  const target = (): HTMLElement | null => {\n    if (root?.nodeType === 9) return (root as Document).documentElement;\n    if (root && \"host\" in root) return (root as ShadowRoot).host as HTMLElement;\n    return typeof document === \"undefined\" ? null : document.documentElement;\n  };\n  const syncActive = (): void => {\n    if (explicitOwner !== undefined) return;\n    let candidate: { depth: number; sequence: number; theme: ThemeName } | undefined;\n    for (const scope of scopes.values()) {\n      if (\n        !candidate ||\n        scope.depth > candidate.depth ||\n        (scope.depth === candidate.depth && scope.sequence > candidate.sequence)\n      ) {\n        candidate = scope;\n      }\n    }\n    if (candidate) syncThemeTarget(target(), candidate.theme);\n  };\n  const schedule = (): void => {\n    if (typeof document === \"undefined\" || scheduled) return;\n    scheduled = true;\n    setTimeout(() => {\n      scheduled = false;\n      syncActive();\n      if (scopes.size === 0) removeEmptyGeneratedStyleRegistries(root);\n    }, 0);\n  };\n\n  return Object.freeze({\n    attach(\n      element: HTMLElement | null,\n      onResolvedSystemTheme: (themeName: \"light\" | \"dark\") => void,\n      signal: AbortSignal,\n    ) {\n      if (element) root = element.getRootNode();\n      if (element && typeof window !== \"undefined\" && typeof window.matchMedia === \"function\") {\n        const media = window.matchMedia(\"(prefers-color-scheme: dark)\");\n        const update = () => onResolvedSystemTheme(media.matches ? \"dark\" : \"light\");\n        update();\n        media.addEventListener?.(\"change\", update);\n        signal.addEventListener(\"abort\", () => media.removeEventListener?.(\"change\", update), {\n          once: true,\n        });\n      }\n      schedule();\n    },\n    register(\n      id: symbol,\n      depth: number,\n      identity: string,\n      themeName: ThemeName,\n      signal: AbortSignal,\n      onThemeChange: (themeName: ThemeName) => void,\n    ) {\n      const existing = scopes.get(id);\n      scopes.set(id, {\n        depth,\n        identity,\n        sequence: existing?.sequence ?? nextSequence++,\n        theme: themeName,\n        signal,\n        onThemeChange,\n      });\n      if (!existing) {\n        signal.addEventListener(\n          \"abort\",\n          () => {\n            scopes.delete(id);\n            if (explicitOwner === id) explicitOwner = undefined;\n            schedule();\n          },\n          { once: true },\n        );\n      }\n      schedule();\n    },\n    activate(id: symbol, themeName: ThemeName) {\n      const scope = scopes.get(id);\n      if (scope) scope.theme = themeName;\n      explicitOwner = id;\n      const ownerDepth = scope?.depth;\n      const ownerIdentity = scope?.identity;\n      for (const [scopeId, registered] of scopes) {\n        if (\n          scopeId !== id &&\n          registered.depth === ownerDepth &&\n          registered.identity === ownerIdentity\n        ) {\n          registered.theme = themeName;\n          registered.onThemeChange(themeName);\n        }\n      }\n      syncThemeTarget(target(), themeName);\n    },\n  });\n}\n\n/** A `<select>` bound to the current {@link theme}, listing `themes` (defaults to the enclosing scope's options). */\nexport function ThemePicker(props: ThemePickerProps): JSX.Element {\n  const activeTheme = theme();\n  const { themes = activeTheme.themes, label = \"Theme\", ...rest } = props;\n  const currentTheme = activeTheme.theme();\n\n  return (\n    <select\n      {...rest}\n      aria-label={rest[\"aria-label\"] ?? label}\n      data-slot=\"theme-picker\"\n      value={currentTheme}\n      onChange={(event: Event) => {\n        const target = getThemePickerTarget(event);\n        if (target) {\n          activeTheme.setTheme(target.value as ThemeName);\n        }\n      }}\n    >\n      {themes.map((option) => (\n        <option key={option.value} value={option.value} selected={option.value === currentTheme}>\n          {option.label}\n        </option>\n      ))}\n    </select>\n  );\n}\n\nfunction getThemePickerTarget(event: Event): HTMLSelectElement | null {\n  if (typeof HTMLSelectElement === \"undefined\") {\n    return null;\n  }\n\n  const path = typeof event.composedPath === \"function\" ? event.composedPath() : [];\n  const candidates = [event.target, event.currentTarget, ...path];\n\n  for (const candidate of candidates) {\n    if (candidate instanceof HTMLSelectElement) {\n      return candidate;\n    }\n  }\n\n  return null;\n}\n\n/**\n * A button that cycles through `themes` (defaults to `[\"light\", \"dark\"]`) on\n * press. Supports icon props per theme, or a function-as-children render\n * prop receiving {@link ThemeToggleRenderContext}.\n */\nexport function ThemeToggle(props: ThemeToggleProps): JSX.Element {\n  const activeTheme = theme();\n  const {\n    children,\n    lightIcon,\n    darkIcon,\n    systemIcon,\n    themes = [\"light\", \"dark\"],\n    onPress,\n    ...rest\n  } = props;\n\n  const currentTheme = activeTheme.theme();\n  const nextTheme = getNextTheme(currentTheme, themes, activeTheme.resolvedSystemTheme());\n  const renderContext = { theme: currentTheme, nextTheme };\n  const ariaLabel = (rest as Record<string, unknown>)[\"aria-label\"];\n  const themedIcon = resolveThemeToggleIcon(currentTheme, nextTheme, {\n    lightIcon,\n    darkIcon,\n    systemIcon,\n  });\n  const renderedIcon = cloneThemeToggleIcon(themedIcon, currentTheme);\n  const renderedIconSlots =\n    renderThemeToggleIconSlots(currentTheme, {\n      lightIcon,\n      darkIcon,\n      systemIcon,\n    }) ?? renderedIcon;\n  const content =\n    typeof children === \"function\" ? children(renderContext) : (children ?? renderedIconSlots);\n\n  return (\n    <Button\n      {...(rest as ButtonNativeProps)}\n      aria-label={typeof ariaLabel === \"string\" ? ariaLabel : `Switch to ${nextTheme} theme`}\n      data-theme-control=\"toggle\"\n      data-theme-choice={currentTheme}\n      data-next-theme={nextTheme}\n      onPress={(event) => {\n        onPress?.(event);\n        if (!event.defaultPrevented && !Object.is(nextTheme, currentTheme)) {\n          activeTheme.setTheme(nextTheme);\n        }\n      }}\n    >\n      <span data-slot=\"theme-toggle-content\">{content}</span>\n    </Button>\n  );\n}\n\nfunction getNextTheme(\n  currentTheme: ThemeName,\n  themes: readonly ThemeName[],\n  resolvedSystemTheme: \"light\" | \"dark\" = \"light\",\n): ThemeName {\n  if (themes.length === 0) return currentTheme;\n  const index = themes.indexOf(currentTheme);\n  if (index < 0 && currentTheme === \"system\") {\n    if (themes.includes(\"light\") && themes.includes(\"dark\")) {\n      return resolvedSystemTheme === \"dark\" ? \"light\" : \"dark\";\n    }\n  }\n  return themes[index >= 0 && index < themes.length - 1 ? index + 1 : 0]!;\n}\n\nfunction getThemeIcon(\n  theme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  if (theme === \"light\") return icons.lightIcon;\n  if (theme === \"dark\") return icons.darkIcon;\n  if (theme === \"system\") return icons.systemIcon;\n  return undefined;\n}\n\nexport function resolveThemeToggleIcon(\n  theme: ThemeName,\n  nextTheme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  return getThemeIcon(theme, icons) ?? getThemeIcon(nextTheme, icons);\n}\n\nfunction renderThemeToggleIconSlots(\n  theme: ThemeName,\n  icons: Pick<ThemeToggleProps, \"lightIcon\" | \"darkIcon\" | \"systemIcon\">,\n): unknown {\n  if (getThemeIcon(theme, icons) === undefined) {\n    return undefined;\n  }\n\n  const slots = [\n    [\"light\", icons.lightIcon],\n    [\"dark\", icons.darkIcon],\n    [\"system\", icons.systemIcon],\n  ] as const;\n  const availableSlots = slots.filter(([, icon]) => icon !== undefined && icon !== null);\n\n  if (availableSlots.length <= 1) {\n    return undefined;\n  }\n\n  return availableSlots.map(([slotTheme, icon]) => (\n    <span\n      key={slotTheme}\n      data-slot=\"theme-toggle-icon\"\n      data-theme-toggle-icon={slotTheme}\n      hidden={slotTheme === theme ? undefined : true}\n    >\n      {cloneThemeToggleIcon(icon, slotTheme)}\n    </span>\n  ));\n}\n\nfunction cloneThemeToggleIcon(icon: unknown, key?: string): unknown {\n  if (Array.isArray(icon)) {\n    const clonedChildren = icon.map((child) => cloneThemeToggleIcon(child));\n    if ((icon as unknown as Record<symbol, unknown>)[STATIC_CHILDREN] === true) {\n      Object.defineProperty(clonedChildren, STATIC_CHILDREN, {\n        value: true,\n        configurable: true,\n      });\n    }\n    return clonedChildren;\n  }\n\n  if (!isElement(icon)) return icon;\n\n  const props = icon.props as Record<string, unknown> | undefined;\n  const clonedProps = props ? { ...props } : {};\n\n  if (\"children\" in clonedProps) {\n    clonedProps.children = cloneThemeToggleIcon(clonedProps.children);\n  }\n\n  const clonedIcon = cloneElement(icon, clonedProps);\n  return {\n    ...clonedIcon,\n    key: icon.key ?? key ?? null,\n  } satisfies JSXElement;\n}\n\nfunction syncThemeTarget(\n  html: HTMLElement | null,\n  themeChoice: ThemeName | null | undefined,\n): void {\n  if (!html) return;\n\n  if (themeChoice == null) {\n    html.removeAttribute(\"data-theme\");\n    html.removeAttribute(\"data-theme-choice\");\n    return;\n  }\n\n  html.setAttribute(\"data-theme-choice\", themeChoice);\n\n  if (themeChoice === \"system\") {\n    html.removeAttribute(\"data-theme\");\n  } else {\n    html.setAttribute(\"data-theme\", themeChoice);\n  }\n}\n\nfunction readStoredTheme(storageKey: string): ThemeName | undefined {\n  if (typeof window === \"undefined\") return undefined;\n  try {\n    const storedTheme = window.localStorage.getItem(storageKey);\n    return storedTheme ? (storedTheme as ThemeName) : undefined;\n  } catch {\n    return undefined;\n  }\n}\n\nfunction writeStoredTheme(storageKey: string, theme: ThemeName): void {\n  if (typeof window === \"undefined\") return;\n  try {\n    window.localStorage.setItem(storageKey, theme);\n  } catch {\n    // Storage can be unavailable in private or locked-down browser contexts.\n  }\n}\n"],"mappings":"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"}

package/dist/themes/default/index.css

@@ -163,16 +163,16 @@
   --ak-dark-color-primary-ink: oklch(98.5% 0 0);
   --ak-dark-color-text: oklch(98.5% 0 0);
   --ak-dark-color-text-muted: oklch(70.8% 0 0);
-  --ak-dark-color-text-subtle: oklch(55.6% 0 0);
+  --ak-dark-color-text-subtle: oklch(74% 0 0);
   --ak-dark-color-text-inverse: oklch(20.5% 0 0);
   --ak-dark-color-bg: oklch(14.5% 0 0);
   --ak-dark-color-surface: oklch(20.5% 0 0);
   --ak-dark-color-surface-muted: oklch(26.9% 0 0);
-  --ak-dark-color-surface-raised: oklch(20.5% 0 0);
-  --ak-dark-color-surface-overlay: oklch(20.5% 0 0);
+  --ak-dark-color-surface-raised: oklch(23.5% 0 0);
+  --ak-dark-color-surface-overlay: oklch(26.9% 0 0);
   --ak-dark-color-border-subtle: oklch(26.9% 0 0);
   --ak-dark-color-border: oklch(100% 0 0 / .1);
-  --ak-dark-color-border-strong: oklch(43.9% 0 0);
+  --ak-dark-color-border-strong: oklch(54% 0 0);
   --ak-dark-color-success: #4ade80;
   --ak-dark-color-success-soft: #052e16;
   --ak-dark-color-success-ink: #bbf7d0;
@@ -187,11 +187,11 @@
   --ak-dark-color-info-ink: #bae6fd;
   --ak-dark-color-link: var(--ak-dark-color-text);
   --ak-dark-color-link-hover: color-mix(in oklch, var(--ak-dark-color-link) 88%, transparent);
-  --ak-dark-color-focus-ring: oklch(55.6% 0 0 / .5);
-  --ak-dark-color-disabled-bg: oklch(26.9% 0 0);
+  --ak-dark-color-focus-ring: oklch(60% 0 0);
+  --ak-dark-color-disabled-bg: oklch(32% 0 0);
   --ak-dark-color-disabled-surface: oklch(20.5% 0 0);
-  --ak-dark-color-disabled-border: oklch(100% 0 0 / .1);
-  --ak-dark-color-disabled-text: oklch(70.8% 0 0);
+  --ak-dark-color-disabled-border: oklch(54% 0 0);
+  --ak-dark-color-disabled-text: oklch(74% 0 0);
   --ak-dark-color-selected: oklch(26.9% 0 0);
   --ak-dark-color-selected-border: oklch(100% 0 0 / .1);
   --ak-dark-color-hover: oklch(26.9% 0 0);
@@ -211,35 +211,35 @@
   --ak-color-primary-ink: oklch(20.5% 0 0);
   --ak-color-text: oklch(14.5% 0 0);
   --ak-color-text-muted: oklch(55.6% 0 0);
-  --ak-color-text-subtle: oklch(70.8% 0 0);
+  --ak-color-text-subtle: oklch(54% 0 0);
   --ak-color-text-inverse: oklch(98.5% 0 0);
   --ak-color-bg: oklch(100% 0 0);
-  --ak-color-surface: oklch(100% 0 0);
-  --ak-color-surface-muted: oklch(97% 0 0);
-  --ak-color-surface-raised: oklch(100% 0 0);
-  --ak-color-surface-overlay: oklch(100% 0 0);
+  --ak-color-surface: oklch(98.5% 0 0);
+  --ak-color-surface-muted: oklch(95% 0 0);
+  --ak-color-surface-raised: oklch(97% 0 0);
+  --ak-color-surface-overlay: oklch(94% 0 0);
   --ak-color-border-subtle: oklch(92.2% 0 0);
   --ak-color-border: oklch(92.2% 0 0);
-  --ak-color-border-strong: oklch(70.8% 0 0);
+  --ak-color-border-strong: oklch(62% 0 0);
   --ak-color-success: #16a34a;
   --ak-color-success-soft: #16a34a24;
   --ak-color-success-ink: #166534;
-  --ak-color-warning: #f59e0b;
+  --ak-color-warning: #b45309;
   --ak-color-warning-soft: #f59e0b29;
   --ak-color-warning-ink: #854d0e;
   --ak-color-danger: oklch(57.7% .245 27.325);
   --ak-color-danger-soft: oklch(57.7% .245 27.325 / .2);
   --ak-color-danger-ink: #991b1b;
-  --ak-color-info: #0ea5e9;
+  --ak-color-info: #0369a1;
   --ak-color-info-soft: #0ea5e929;
   --ak-color-info-ink: #0c4a6e;
   --ak-color-link: var(--ak-color-primary);
   --ak-color-link-hover: color-mix(in oklch, var(--ak-color-link) 88%, transparent);
-  --ak-color-focus-ring: oklch(70.8% 0 0 / .5);
-  --ak-color-disabled-bg: oklch(97% 0 0);
+  --ak-color-focus-ring: oklch(58% 0 0);
+  --ak-color-disabled-bg: oklch(90% 0 0);
   --ak-color-disabled-surface: oklch(100% 0 0);
-  --ak-color-disabled-border: oklch(92.2% 0 0);
-  --ak-color-disabled-text: oklch(55.6% 0 0);
+  --ak-color-disabled-border: oklch(62% 0 0);
+  --ak-color-disabled-text: oklch(50% 0 0);
   --ak-color-selected: oklch(97% 0 0);
   --ak-color-selected-border: oklch(92.2% 0 0);
   --ak-color-hover: oklch(97% 0 0);
@@ -1857,7 +1857,7 @@
 }
 
 :where([data-slot="theme-toggle-content"]) {
-  --_ak-theme-toggle-icon-size: var(--ak-theme-toggle-icon-size, var(--ak-icon-size, 1em));
+  --_ak-theme-toggle-icon-size: var(--ak-theme-toggle-icon-size, var(--ak-font-size-sm));
   flex: none;
   justify-content: center;
   align-items: center;
@@ -2105,6 +2105,12 @@
   padding-inline: 0;
 }
 
+:where(.btn, .btn-close, [data-slot="button"]):focus-visible {
+  border-color: var(--ak-color-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+  outline: none;
+}
+
 :where(.btn-group, [data-slot="button-group"]) {
   align-items: stretch;
   gap: 0;
@@ -2410,11 +2416,12 @@
 
 :where(.input[data-disabled], .input:disabled, [data-slot="input"][data-disabled]) {
   background: var(--ak-color-disabled-bg);
-  border-color: var(--ak-color-input);
+  border-color: var(--ak-color-disabled-border);
+  color: var(--ak-color-disabled-text);
   box-shadow: none;
   pointer-events: none;
   cursor: not-allowed;
-  opacity: .5;
+  opacity: 1;
 }
 
 :where(.input-sm, [data-slot="input"][data-size="sm"]) {
@@ -4805,15 +4812,16 @@
   color: var(--ak-color-text);
 }
 
-:where(.dropdown-item, [data-slot="dropdown-item"]):hover > :where([data-slot="icon"], svg), :where(.dropdown-item, [data-slot="dropdown-item"]):focus-visible > :where([data-slot="icon"], svg) {
+:where(.dropdown-item, [data-slot="dropdown-item"]):hover > :where([data-slot="icon"], svg), :where(.dropdown-item, [data-slot="dropdown-item"]):is(:focus, :focus-visible) > :where([data-slot="icon"], svg) {
   color: currentColor;
 }
 
-:where(.dropdown-item, [data-slot="dropdown-item"]):focus-visible {
+:where(.dropdown-item, [data-slot="dropdown-item"]):is(:focus, :focus-visible) {
+  outline: var(--ak-focus-ring-width) solid var(--ak-color-focus-ring);
+  outline-offset: calc(-1 * var(--ak-focus-ring-width));
   background: var(--ak-color-hover);
   color: var(--ak-color-text);
   box-shadow: none;
-  outline: none;
 }
 
 :where(.dropdown-item, [data-slot="dropdown-item"])[data-disabled] {
@@ -5036,15 +5044,16 @@
   color: var(--ak-color-text);
 }
 
-:where([data-slot="menubar-item"]:hover > :where([data-slot="icon"], svg), [data-slot="menubar-item"]:focus-visible > :where([data-slot="icon"], svg), [data-slot="menubar-sub-trigger"]:hover > :where([data-slot="icon"], svg), [data-slot="menubar-sub-trigger"]:focus-visible > :where([data-slot="icon"], svg)) {
+:where([data-slot="menubar-item"]:hover > :where([data-slot="icon"], svg), [data-slot="menubar-item"]:is(:focus, :focus-visible) > :where([data-slot="icon"], svg), [data-slot="menubar-sub-trigger"]:hover > :where([data-slot="icon"], svg), [data-slot="menubar-sub-trigger"]:is(:focus, :focus-visible) > :where([data-slot="icon"], svg)) {
   color: currentColor;
 }
 
-:where([data-slot="menubar-item"]:focus-visible, [data-slot="menubar-sub-trigger"]:focus-visible) {
+:where([data-slot="menubar-item"]:is(:focus, :focus-visible), [data-slot="menubar-sub-trigger"]:is(:focus, :focus-visible)) {
+  outline: var(--ak-focus-ring-width) solid var(--ak-color-focus-ring);
+  outline-offset: calc(-1 * var(--ak-focus-ring-width));
   background: var(--ak-color-hover);
   color: var(--ak-color-text);
   box-shadow: none;
-  outline: none;
 }
 
 :where([data-slot="menubar-item"][data-disabled], [data-slot="menubar-sub-trigger"][data-disabled]) {
@@ -5365,7 +5374,7 @@
 }
 
 :where([data-slot="dialog-content"], [data-slot="sheet-content"]) {
-  --_dialog-surface: var(--ak-color-bg);
+  --_dialog-surface: var(--ak-color-surface-raised);
   --_dialog-border: var(--ak-color-border);
   gap: var(--ak-space-md);
   box-sizing: border-box;
@@ -5935,3 +5944,49 @@
     animation: none;
   }
 }
+
+:where([data-slot="button"][data-disabled], [data-slot="input"][data-disabled], [data-slot="textarea"][data-disabled], [data-slot="select-trigger"][data-disabled], [data-slot="checkbox"][data-disabled], [data-slot="radio-group-item"][data-disabled], [data-slot="switch"][data-disabled]) {
+  background: var(--ak-color-disabled-bg);
+  border-color: var(--ak-color-disabled-border);
+  color: var(--ak-color-disabled-text);
+  box-shadow: none;
+  opacity: 1;
+}
+
+@media (forced-colors: active) {
+  :where([data-slot="button"], [data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="checkbox"], [data-slot="radio-group-item"], [data-slot="switch"], [data-slot="dropdown-trigger"], [tabindex]:not([tabindex="-1"]), [role="menuitem"]):focus-visible {
+    outline-offset: 2px;
+    box-shadow: none;
+    outline: 2px solid highlight;
+  }
+
+  :where([data-slot="button"], [data-slot="input"], [data-slot="textarea"], [data-slot="select-trigger"], [data-slot="checkbox"], [data-slot="radio-group-item"], [data-slot="switch"], [data-slot="dropdown-content"], [data-slot="menubar-content"]) {
+    border-color: buttontext;
+  }
+
+  :where([data-disabled]) {
+    color: graytext;
+    opacity: 1;
+    border-color: graytext;
+  }
+
+  :where([data-slot="dialog-content"], [data-slot="sheet-content"], [data-slot="popover-content"], [data-slot="dropdown-content"], [data-slot="menubar-content"]) {
+    color: canvastext;
+    box-shadow: none;
+    background: canvas;
+    border: 2px solid canvastext;
+  }
+
+  :where([data-slot="dropdown-item"]:is(:focus, :focus-visible), [data-slot="menubar-item"]:is(:focus, :focus-visible), [data-slot="menubar-sub-trigger"]:is(:focus, :focus-visible)) {
+    outline-offset: -2px;
+    color: highlighttext;
+    background: highlight;
+    outline: 2px solid highlight;
+  }
+
+  :where([data-slot="dialog-overlay"]) {
+    opacity: .75;
+    backdrop-filter: none;
+    background: canvas;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@askrjs/themes",
-  "version": "0.0.27",
+  "version": "0.0.29",
   "description": "Default theme tokens, styles, and component presets for Askr apps.",
   "keywords": [
     "askr",
@@ -101,10 +101,11 @@
     "bench:tier2": "cross-env NODE_ENV=production vp test bench --run --reporter=default --config vitest.bench.tier2.config.ts",
     "bench:tier3": "cross-env NODE_ENV=production vp test bench --run --reporter=default --config vitest.bench.tier3.config.ts",
     "bench:tier4": "cross-env NODE_ENV=production vp test bench --run --reporter=default --config vitest.bench.tier4.config.ts --mode production",
-    "test": "npm run test:unit && npm run test:checks && npm run test:jsdom && npm run test:browser",
+    "test": "npm run test:unit && npm run test:checks && npm run test:jsdom && npm run test:browser && npm run test:forced-colors",
     "test:unit": "vp test run -c vitest.test.unit.config.ts",
     "test:jsdom": "cross-env NODE_ENV=production vp test run -c vitest.test.jsdom.config.ts",
     "test:browser": "vp test run -c vitest.test.browser.config.ts --mode production",
+    "test:forced-colors": "vp test run -c vitest.test.forced-colors.config.ts --mode production",
     "test:publint": "publint",
     "test:installed": "node tests/installed-types.js",
     "fmt": "vp fmt .",
@@ -119,8 +120,8 @@
     "test:checks": "vp test run -c vitest.test.checks.config.ts"
   },
   "devDependencies": {
-    "@askrjs/askr": ">=0.0.88 <0.1.0",
-    "@askrjs/ui": ">=0.0.26 <0.1.0",
+    "@askrjs/askr": ">=0.0.92 <0.1.0",
+    "@askrjs/ui": ">=0.0.30 <0.1.0",
     "@askrjs/vite": ">=0.0.12 <0.1.0",
     "@tsdown/css": "0.22.14",
     "@types/node": "^26.2.0",
@@ -135,8 +136,8 @@
     "vite-plus": "^0.2.8"
   },
   "peerDependencies": {
-    "@askrjs/askr": ">=0.0.88 <0.1.0",
-    "@askrjs/ui": ">=0.0.26 <0.1.0"
+    "@askrjs/askr": ">=0.0.92 <0.1.0",
+    "@askrjs/ui": ">=0.0.30 <0.1.0"
   },
   "engines": {
     "node": ">=24.0.0"

package/src/components/theme/theme.tsx

@@ -128,7 +128,7 @@ export function ThemeScope(props: ThemeScopeProps): JSX.Element {
   const ownedCoordinator = state<ThemeCoordinator>(getDefaultThemeCoordinator())();
   const coordinator = parentScope.coordinator ?? ownedCoordinator;
   const scopeDepth = parentScope.depth + 1;
-  coordinator.register(scopeId, scopeDepth, currentTheme, scopeSignal, (nextTheme) => {
+  coordinator.register(scopeId, scopeDepth, storageKey, currentTheme, scopeSignal, (nextTheme) => {
     if (themeState() !== nextTheme) themeState.set(nextTheme);
   });
 
@@ -235,6 +235,7 @@ function createThemeCoordinator() {
     symbol,
     {
       depth: number;
+      identity: string;
       sequence: number;
       theme: ThemeName;
       signal: AbortSignal;
@@ -296,6 +297,7 @@ function createThemeCoordinator() {
     register(
       id: symbol,
       depth: number,
+      identity: string,
       themeName: ThemeName,
       signal: AbortSignal,
       onThemeChange: (themeName: ThemeName) => void,
@@ -303,6 +305,7 @@ function createThemeCoordinator() {
       const existing = scopes.get(id);
       scopes.set(id, {
         depth,
+        identity,
         sequence: existing?.sequence ?? nextSequence++,
         theme: themeName,
         signal,
@@ -326,8 +329,13 @@ function createThemeCoordinator() {
       if (scope) scope.theme = themeName;
       explicitOwner = id;
       const ownerDepth = scope?.depth;
+      const ownerIdentity = scope?.identity;
       for (const [scopeId, registered] of scopes) {
-        if (scopeId !== id && registered.depth === ownerDepth) {
+        if (
+          scopeId !== id &&
+          registered.depth === ownerDepth &&
+          registered.identity === ownerIdentity
+        ) {
           registered.theme = themeName;
           registered.onThemeChange(themeName);
         }

package/src/themes/default/index.css

@@ -53,3 +53,4 @@
 @import "./styles/overlays/popover.css";
 @import "./styles/overlays/hover-card.css";
 @import "./styles/overlays/tooltip.css";
+@import "./styles/base/accessibility.css";

package/src/themes/default/styles/actions/button.css

@@ -37,7 +37,7 @@
 }
 
 :where([data-slot="theme-toggle-content"]) {
-  --_ak-theme-toggle-icon-size: var(--ak-theme-toggle-icon-size, var(--ak-icon-size, 1em));
+  --_ak-theme-toggle-icon-size: var(--ak-theme-toggle-icon-size, var(--ak-font-size-sm));
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -288,3 +288,10 @@
   min-inline-size: var(--_button-height);
   padding-inline: 0;
 }
+
+/* Keep the focus contract last so variant box-shadow resets cannot hide it. */
+:where(.btn, .btn-close, [data-slot="button"]):focus-visible {
+  outline: none;
+  border-color: var(--ak-color-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+}

package/src/themes/default/styles/base/accessibility.css

@@ -0,0 +1,88 @@
+/*
+ * Cross-component accessibility states live at the end of the default-theme
+ * cascade so new controls inherit the same perceivability contract.
+ */
+:where(
+  [data-slot="button"][data-disabled],
+  [data-slot="input"][data-disabled],
+  [data-slot="textarea"][data-disabled],
+  [data-slot="select-trigger"][data-disabled],
+  [data-slot="checkbox"][data-disabled],
+  [data-slot="radio-group-item"][data-disabled],
+  [data-slot="switch"][data-disabled]
+) {
+  background: var(--ak-color-disabled-bg);
+  border-color: var(--ak-color-disabled-border);
+  color: var(--ak-color-disabled-text);
+  box-shadow: none;
+  opacity: 1;
+}
+
+@media (forced-colors: active) {
+  :where(
+    [data-slot="button"],
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="checkbox"],
+    [data-slot="radio-group-item"],
+    [data-slot="switch"],
+    [data-slot="dropdown-trigger"],
+    [tabindex]:not([tabindex="-1"]),
+    [role="menuitem"]
+  ):focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  :where(
+    [data-slot="button"],
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="checkbox"],
+    [data-slot="radio-group-item"],
+    [data-slot="switch"],
+    [data-slot="dropdown-content"],
+    [data-slot="menubar-content"]
+  ) {
+    border-color: ButtonText;
+  }
+
+  :where([data-disabled]) {
+    border-color: GrayText;
+    color: GrayText;
+    opacity: 1;
+  }
+
+  :where(
+    [data-slot="dialog-content"],
+    [data-slot="sheet-content"],
+    [data-slot="popover-content"],
+    [data-slot="dropdown-content"],
+    [data-slot="menubar-content"]
+  ) {
+    border: 2px solid CanvasText;
+    background: Canvas;
+    color: CanvasText;
+    box-shadow: none;
+  }
+
+  :where(
+    [data-slot="dropdown-item"]:is(:focus, :focus-visible),
+    [data-slot="menubar-item"]:is(:focus, :focus-visible),
+    [data-slot="menubar-sub-trigger"]:is(:focus, :focus-visible)
+  ) {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+    background: Highlight;
+    color: HighlightText;
+  }
+
+  :where([data-slot="dialog-overlay"]) {
+    background: Canvas;
+    opacity: 0.75;
+    backdrop-filter: none;
+  }
+}

package/src/themes/default/styles/forms/input.css

@@ -44,11 +44,12 @@
 
 :where(.input[data-disabled], .input:disabled, [data-slot="input"][data-disabled]) {
   background: var(--ak-color-disabled-bg);
-  border-color: var(--ak-color-input);
+  border-color: var(--ak-color-disabled-border);
+  color: var(--ak-color-disabled-text);
   box-shadow: none;
   pointer-events: none;
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: 1;
 }
 
 :where(.input-sm, [data-slot="input"][data-size="sm"]) {

package/src/themes/default/styles/overlays/dialog.css

@@ -53,7 +53,7 @@
 }
 
 :where([data-slot="dialog-content"], [data-slot="sheet-content"]) {
-  --_dialog-surface: var(--ak-color-bg);
+  --_dialog-surface: var(--ak-color-surface-raised);
   --_dialog-border: var(--ak-color-border);
 
   display: grid;

package/src/themes/default/styles/overlays/dropdown.css

@@ -158,13 +158,14 @@
 }
 
 :where(.dropdown-item, [data-slot="dropdown-item"]):hover > :where([data-slot="icon"], svg),
-:where(.dropdown-item, [data-slot="dropdown-item"]):focus-visible
+:where(.dropdown-item, [data-slot="dropdown-item"]):is(:focus, :focus-visible)
   > :where([data-slot="icon"], svg) {
   color: currentColor;
 }
 
-:where(.dropdown-item, [data-slot="dropdown-item"]):focus-visible {
-  outline: none;
+:where(.dropdown-item, [data-slot="dropdown-item"]):is(:focus, :focus-visible) {
+  outline: var(--ak-focus-ring-width) solid var(--ak-color-focus-ring);
+  outline-offset: calc(-1 * var(--ak-focus-ring-width));
   background: var(--ak-color-hover);
   color: var(--ak-color-text);
   box-shadow: none;

package/src/themes/default/styles/overlays/menubar.css

@@ -165,15 +165,19 @@
 
 :where(
   [data-slot="menubar-item"]:hover > :where([data-slot="icon"], svg),
-  [data-slot="menubar-item"]:focus-visible > :where([data-slot="icon"], svg),
+  [data-slot="menubar-item"]:is(:focus, :focus-visible) > :where([data-slot="icon"], svg),
   [data-slot="menubar-sub-trigger"]:hover > :where([data-slot="icon"], svg),
-  [data-slot="menubar-sub-trigger"]:focus-visible > :where([data-slot="icon"], svg)
+  [data-slot="menubar-sub-trigger"]:is(:focus, :focus-visible) > :where([data-slot="icon"], svg)
 ) {
   color: currentColor;
 }
 
-:where([data-slot="menubar-item"]:focus-visible, [data-slot="menubar-sub-trigger"]:focus-visible) {
-  outline: none;
+:where(
+  [data-slot="menubar-item"]:is(:focus, :focus-visible),
+  [data-slot="menubar-sub-trigger"]:is(:focus, :focus-visible)
+) {
+  outline: var(--ak-focus-ring-width) solid var(--ak-color-focus-ring);
+  outline-offset: calc(-1 * var(--ak-focus-ring-width));
   background: var(--ak-color-hover);
   color: var(--ak-color-text);
   box-shadow: none;

package/src/themes/default/tokens.css

@@ -178,18 +178,18 @@
 
   --ak-dark-color-text: oklch(0.985 0 0);
   --ak-dark-color-text-muted: oklch(0.708 0 0);
-  --ak-dark-color-text-subtle: oklch(0.556 0 0);
+  --ak-dark-color-text-subtle: oklch(0.74 0 0);
   --ak-dark-color-text-inverse: oklch(0.205 0 0);
 
   --ak-dark-color-bg: oklch(0.145 0 0);
   --ak-dark-color-surface: oklch(0.205 0 0);
   --ak-dark-color-surface-muted: oklch(0.269 0 0);
-  --ak-dark-color-surface-raised: oklch(0.205 0 0);
-  --ak-dark-color-surface-overlay: oklch(0.205 0 0);
+  --ak-dark-color-surface-raised: oklch(0.235 0 0);
+  --ak-dark-color-surface-overlay: oklch(0.269 0 0);
 
   --ak-dark-color-border-subtle: oklch(0.269 0 0);
   --ak-dark-color-border: oklch(1 0 0 / 10%);
-  --ak-dark-color-border-strong: oklch(0.439 0 0);
+  --ak-dark-color-border-strong: oklch(0.54 0 0);
 
   --ak-dark-color-success: #4ade80;
   --ak-dark-color-success-soft: #052e16;
@@ -206,11 +206,11 @@
 
   --ak-dark-color-link: var(--ak-dark-color-text);
   --ak-dark-color-link-hover: color-mix(in oklch, var(--ak-dark-color-link) 88%, transparent);
-  --ak-dark-color-focus-ring: oklch(0.556 0 0 / 0.5);
-  --ak-dark-color-disabled-bg: oklch(0.269 0 0);
+  --ak-dark-color-focus-ring: oklch(0.6 0 0);
+  --ak-dark-color-disabled-bg: oklch(0.32 0 0);
   --ak-dark-color-disabled-surface: oklch(0.205 0 0);
-  --ak-dark-color-disabled-border: oklch(1 0 0 / 10%);
-  --ak-dark-color-disabled-text: oklch(0.708 0 0);
+  --ak-dark-color-disabled-border: oklch(0.54 0 0);
+  --ak-dark-color-disabled-text: oklch(0.74 0 0);
   --ak-dark-color-selected: oklch(0.269 0 0);
   --ak-dark-color-selected-border: oklch(1 0 0 / 10%);
   --ak-dark-color-hover: oklch(0.269 0 0);
@@ -233,39 +233,39 @@
 
   --ak-color-text: oklch(0.145 0 0);
   --ak-color-text-muted: oklch(0.556 0 0);
-  --ak-color-text-subtle: oklch(0.708 0 0);
+  --ak-color-text-subtle: oklch(0.54 0 0);
   --ak-color-text-inverse: oklch(0.985 0 0);
 
   --ak-color-bg: oklch(1 0 0);
-  --ak-color-surface: oklch(1 0 0);
-  --ak-color-surface-muted: oklch(0.97 0 0);
-  --ak-color-surface-raised: oklch(1 0 0);
-  --ak-color-surface-overlay: oklch(1 0 0);
+  --ak-color-surface: oklch(0.985 0 0);
+  --ak-color-surface-muted: oklch(0.95 0 0);
+  --ak-color-surface-raised: oklch(0.97 0 0);
+  --ak-color-surface-overlay: oklch(0.94 0 0);
 
   --ak-color-border-subtle: oklch(0.922 0 0);
   --ak-color-border: oklch(0.922 0 0);
-  --ak-color-border-strong: oklch(0.708 0 0);
+  --ak-color-border-strong: oklch(0.62 0 0);
 
   --ak-color-success: #16a34a;
   --ak-color-success-soft: rgba(22, 163, 74, 0.14);
   --ak-color-success-ink: #166534;
-  --ak-color-warning: #f59e0b;
+  --ak-color-warning: #b45309;
   --ak-color-warning-soft: rgba(245, 158, 11, 0.16);
   --ak-color-warning-ink: #854d0e;
   --ak-color-danger: oklch(0.577 0.245 27.325);
   --ak-color-danger-soft: oklch(0.577 0.245 27.325 / 0.2);
   --ak-color-danger-ink: #991b1b;
-  --ak-color-info: #0ea5e9;
+  --ak-color-info: #0369a1;
   --ak-color-info-soft: rgba(14, 165, 233, 0.16);
   --ak-color-info-ink: #0c4a6e;
 
   --ak-color-link: var(--ak-color-primary);
   --ak-color-link-hover: color-mix(in oklch, var(--ak-color-link) 88%, transparent);
-  --ak-color-focus-ring: oklch(0.708 0 0 / 0.5);
-  --ak-color-disabled-bg: oklch(0.97 0 0);
+  --ak-color-focus-ring: oklch(0.58 0 0);
+  --ak-color-disabled-bg: oklch(0.9 0 0);
   --ak-color-disabled-surface: oklch(1 0 0);
-  --ak-color-disabled-border: oklch(0.922 0 0);
-  --ak-color-disabled-text: oklch(0.556 0 0);
+  --ak-color-disabled-border: oklch(0.62 0 0);
+  --ak-color-disabled-text: oklch(0.5 0 0);
   --ak-color-selected: oklch(0.97 0 0);
   --ak-color-selected-border: oklch(0.922 0 0);
   --ak-color-hover: oklch(0.97 0 0);

package/templates/theme/index.css

@@ -53,3 +53,4 @@
 @import "./styles/overlays/popover.css";
 @import "./styles/overlays/hover-card.css";
 @import "./styles/overlays/tooltip.css";
+@import "./styles/base/accessibility.css";

package/templates/theme/styles/actions/button.css

@@ -288,3 +288,10 @@
   min-inline-size: var(--_button-height);
   padding-inline: 0;
 }
+
+/* Keep the focus contract last so variant box-shadow resets cannot hide it. */
+:where(.btn, .btn-close, [data-slot="button"]):focus-visible {
+  outline: none;
+  border-color: var(--ak-color-ring);
+  box-shadow: 0 0 0 var(--ak-focus-ring-width) var(--ak-color-focus-ring);
+}

package/templates/theme/styles/base/accessibility.css

@@ -0,0 +1,88 @@
+/*
+ * Cross-component accessibility states live at the end of the default-theme
+ * cascade so new controls inherit the same perceivability contract.
+ */
+:where(
+  [data-slot="button"][data-disabled],
+  [data-slot="input"][data-disabled],
+  [data-slot="textarea"][data-disabled],
+  [data-slot="select-trigger"][data-disabled],
+  [data-slot="checkbox"][data-disabled],
+  [data-slot="radio-group-item"][data-disabled],
+  [data-slot="switch"][data-disabled]
+) {
+  background: var(--ak-color-disabled-bg);
+  border-color: var(--ak-color-disabled-border);
+  color: var(--ak-color-disabled-text);
+  box-shadow: none;
+  opacity: 1;
+}
+
+@media (forced-colors: active) {
+  :where(
+    [data-slot="button"],
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="checkbox"],
+    [data-slot="radio-group-item"],
+    [data-slot="switch"],
+    [data-slot="dropdown-trigger"],
+    [tabindex]:not([tabindex="-1"]),
+    [role="menuitem"]
+  ):focus-visible {
+    outline: 2px solid Highlight;
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+  :where(
+    [data-slot="button"],
+    [data-slot="input"],
+    [data-slot="textarea"],
+    [data-slot="select-trigger"],
+    [data-slot="checkbox"],
+    [data-slot="radio-group-item"],
+    [data-slot="switch"],
+    [data-slot="dropdown-content"],
+    [data-slot="menubar-content"]
+  ) {
+    border-color: ButtonText;
+  }
+
+  :where([data-disabled]) {
+    border-color: GrayText;
+    color: GrayText;
+    opacity: 1;
+  }
+
+  :where(
+    [data-slot="dialog-content"],
+    [data-slot="sheet-content"],
+    [data-slot="popover-content"],
+    [data-slot="dropdown-content"],
+    [data-slot="menubar-content"]
+  ) {
+    border: 2px solid CanvasText;
+    background: Canvas;
+    color: CanvasText;
+    box-shadow: none;
+  }
+
+  :where(
+    [data-slot="dropdown-item"]:is(:focus, :focus-visible),
+    [data-slot="menubar-item"]:is(:focus, :focus-visible),
+    [data-slot="menubar-sub-trigger"]:is(:focus, :focus-visible)
+  ) {
+    outline: 2px solid Highlight;
+    outline-offset: -2px;
+    background: Highlight;
+    color: HighlightText;
+  }
+
+  :where([data-slot="dialog-overlay"]) {
+    background: Canvas;
+    opacity: 0.75;
+    backdrop-filter: none;
+  }
+}

package/templates/theme/styles/forms/input.css

@@ -44,11 +44,12 @@
 
 :where(.input[data-disabled], .input:disabled, [data-slot="input"][data-disabled]) {
   background: var(--ak-color-disabled-bg);
-  border-color: var(--ak-color-input);
+  border-color: var(--ak-color-disabled-border);
+  color: var(--ak-color-disabled-text);
   box-shadow: none;
   pointer-events: none;
   cursor: not-allowed;
-  opacity: 0.5;
+  opacity: 1;
 }
 
 :where(.input-sm, [data-slot="input"][data-size="sm"]) {

package/templates/theme/styles/overlays/dialog.css

@@ -53,7 +53,7 @@
 }
 
 :where([data-slot="dialog-content"], [data-slot="sheet-content"]) {
-  --_dialog-surface: var(--ak-color-bg);
+  --_dialog-surface: var(--ak-color-surface-raised);
   --_dialog-border: var(--ak-color-border);
 
   display: grid;

package/templates/theme/styles/overlays/dropdown.css

@@ -158,13 +158,14 @@
 }
 
 :where(.dropdown-item, [data-slot="dropdown-item"]):hover > :where([data-slot="icon"], svg),
-:where(.dropdown-item, [data-slot="dropdown-item"]):focus-visible
+:where(.dropdown-item, [data-slot="dropdown-item"]):is(:focus, :focus-visible)
   > :where([data-slot="icon"], svg) {
   color: currentColor;
 }
 
-:where(.dropdown-item, [data-slot="dropdown-item"]):focus-visible {
-  outline: none;
+:where(.dropdown-item, [data-slot="dropdown-item"]):is(:focus, :focus-visible) {
+  outline: var(--ak-focus-ring-width) solid var(--ak-color-focus-ring);
+  outline-offset: calc(-1 * var(--ak-focus-ring-width));
   background: var(--ak-color-hover);
   color: var(--ak-color-text);
   box-shadow: none;

package/templates/theme/styles/overlays/menubar.css

@@ -165,15 +165,19 @@
 
 :where(
   [data-slot="menubar-item"]:hover > :where([data-slot="icon"], svg),
-  [data-slot="menubar-item"]:focus-visible > :where([data-slot="icon"], svg),
+  [data-slot="menubar-item"]:is(:focus, :focus-visible) > :where([data-slot="icon"], svg),
   [data-slot="menubar-sub-trigger"]:hover > :where([data-slot="icon"], svg),
-  [data-slot="menubar-sub-trigger"]:focus-visible > :where([data-slot="icon"], svg)
+  [data-slot="menubar-sub-trigger"]:is(:focus, :focus-visible) > :where([data-slot="icon"], svg)
 ) {
   color: currentColor;
 }
 
-:where([data-slot="menubar-item"]:focus-visible, [data-slot="menubar-sub-trigger"]:focus-visible) {
-  outline: none;
+:where(
+  [data-slot="menubar-item"]:is(:focus, :focus-visible),
+  [data-slot="menubar-sub-trigger"]:is(:focus, :focus-visible)
+) {
+  outline: var(--ak-focus-ring-width) solid var(--ak-color-focus-ring);
+  outline-offset: calc(-1 * var(--ak-focus-ring-width));
   background: var(--ak-color-hover);
   color: var(--ak-color-text);
   box-shadow: none;

package/templates/theme/tokens.css

@@ -178,18 +178,18 @@
 
   --ak-dark-color-text: oklch(0.985 0 0);
   --ak-dark-color-text-muted: oklch(0.708 0 0);
-  --ak-dark-color-text-subtle: oklch(0.556 0 0);
+  --ak-dark-color-text-subtle: oklch(0.74 0 0);
   --ak-dark-color-text-inverse: oklch(0.205 0 0);
 
   --ak-dark-color-bg: oklch(0.145 0 0);
   --ak-dark-color-surface: oklch(0.205 0 0);
   --ak-dark-color-surface-muted: oklch(0.269 0 0);
-  --ak-dark-color-surface-raised: oklch(0.205 0 0);
-  --ak-dark-color-surface-overlay: oklch(0.205 0 0);
+  --ak-dark-color-surface-raised: oklch(0.235 0 0);
+  --ak-dark-color-surface-overlay: oklch(0.269 0 0);
 
   --ak-dark-color-border-subtle: oklch(0.269 0 0);
   --ak-dark-color-border: oklch(1 0 0 / 10%);
-  --ak-dark-color-border-strong: oklch(0.439 0 0);
+  --ak-dark-color-border-strong: oklch(0.54 0 0);
 
   --ak-dark-color-success: #4ade80;
   --ak-dark-color-success-soft: #052e16;
@@ -206,11 +206,11 @@
 
   --ak-dark-color-link: var(--ak-dark-color-text);
   --ak-dark-color-link-hover: color-mix(in oklch, var(--ak-dark-color-link) 88%, transparent);
-  --ak-dark-color-focus-ring: oklch(0.556 0 0 / 0.5);
-  --ak-dark-color-disabled-bg: oklch(0.269 0 0);
+  --ak-dark-color-focus-ring: oklch(0.6 0 0);
+  --ak-dark-color-disabled-bg: oklch(0.32 0 0);
   --ak-dark-color-disabled-surface: oklch(0.205 0 0);
-  --ak-dark-color-disabled-border: oklch(1 0 0 / 10%);
-  --ak-dark-color-disabled-text: oklch(0.708 0 0);
+  --ak-dark-color-disabled-border: oklch(0.54 0 0);
+  --ak-dark-color-disabled-text: oklch(0.74 0 0);
   --ak-dark-color-selected: oklch(0.269 0 0);
   --ak-dark-color-selected-border: oklch(1 0 0 / 10%);
   --ak-dark-color-hover: oklch(0.269 0 0);
@@ -233,39 +233,39 @@
 
   --ak-color-text: oklch(0.145 0 0);
   --ak-color-text-muted: oklch(0.556 0 0);
-  --ak-color-text-subtle: oklch(0.708 0 0);
+  --ak-color-text-subtle: oklch(0.54 0 0);
   --ak-color-text-inverse: oklch(0.985 0 0);
 
   --ak-color-bg: oklch(1 0 0);
-  --ak-color-surface: oklch(1 0 0);
-  --ak-color-surface-muted: oklch(0.97 0 0);
-  --ak-color-surface-raised: oklch(1 0 0);
-  --ak-color-surface-overlay: oklch(1 0 0);
+  --ak-color-surface: oklch(0.985 0 0);
+  --ak-color-surface-muted: oklch(0.95 0 0);
+  --ak-color-surface-raised: oklch(0.97 0 0);
+  --ak-color-surface-overlay: oklch(0.94 0 0);
 
   --ak-color-border-subtle: oklch(0.922 0 0);
   --ak-color-border: oklch(0.922 0 0);
-  --ak-color-border-strong: oklch(0.708 0 0);
+  --ak-color-border-strong: oklch(0.62 0 0);
 
   --ak-color-success: #16a34a;
   --ak-color-success-soft: rgba(22, 163, 74, 0.14);
   --ak-color-success-ink: #166534;
-  --ak-color-warning: #f59e0b;
+  --ak-color-warning: #b45309;
   --ak-color-warning-soft: rgba(245, 158, 11, 0.16);
   --ak-color-warning-ink: #854d0e;
   --ak-color-danger: oklch(0.577 0.245 27.325);
   --ak-color-danger-soft: oklch(0.577 0.245 27.325 / 0.2);
   --ak-color-danger-ink: #991b1b;
-  --ak-color-info: #0ea5e9;
+  --ak-color-info: #0369a1;
   --ak-color-info-soft: rgba(14, 165, 233, 0.16);
   --ak-color-info-ink: #0c4a6e;
 
   --ak-color-link: var(--ak-color-primary);
   --ak-color-link-hover: color-mix(in oklch, var(--ak-color-link) 88%, transparent);
-  --ak-color-focus-ring: oklch(0.708 0 0 / 0.5);
-  --ak-color-disabled-bg: oklch(0.97 0 0);
+  --ak-color-focus-ring: oklch(0.58 0 0);
+  --ak-color-disabled-bg: oklch(0.9 0 0);
   --ak-color-disabled-surface: oklch(1 0 0);
-  --ak-color-disabled-border: oklch(0.922 0 0);
-  --ak-color-disabled-text: oklch(0.556 0 0);
+  --ak-color-disabled-border: oklch(0.62 0 0);
+  --ak-color-disabled-text: oklch(0.5 0 0);
   --ak-color-selected: oklch(0.97 0 0);
   --ak-color-selected-border: oklch(0.922 0 0);
   --ak-color-hover: oklch(0.97 0 0);