@askrjs/themes 0.0.28 → 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/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.28",
+  "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/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);