diff --git a/CODING_RULES.md b/CODING_RULES.md
index a1fde1b..808831c 100644
--- a/CODING_RULES.md
+++ b/CODING_RULES.md
@@ -476,3 +476,5 @@ const config = thirdPartyLib.getConfig() as Config; // TODO: 型定義改善待
 - キーボードナビゲーション対応必須
 - スクリーンリーダー対応
 - `prefers-contrast` メディアクエリの値は `more` / `less` / `no-preference` / `custom` を使う（`high` / `low` は仕様にない値）
+- フォーカスインジケーターの標準: `:focus-visible` に `outline: 2px solid var(--ring); outline-offset: 2px;`（内側に出したい場合のみ `outline-offset: -2px`）。クリック時の outline 残りを抑えるため `:focus { outline: none; }` を明示する。セル系（grid 等）で outline が扱いづらいときに限り `box-shadow: inset 0 0 0 2px var(--ring);` を許可
+- フォーカス色は `var(--ring)` に統一。`var(--primary)` は selected / pressed / expanded などの状態色専用で focus 表示には使わない
diff --git a/package-lock.json b/package-lock.json
index b917bb9..a5f5225 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "apg-patterns-examples",
-  "version": "0.3.3",
+  "version": "0.3.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "apg-patterns-examples",
-      "version": "0.3.3",
+      "version": "0.3.7",
       "license": "MIT",
       "dependencies": {
         "@astrojs/compiler-rs": "^0.1.10",
diff --git a/package.json b/package.json
index 30a5a51..af0e0d5 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "apg-patterns-examples",
   "type": "module",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "private": false,
   "description": "Accessible UI components following WAI-ARIA APG patterns. Multi-framework implementations in React, Vue, Svelte, and Astro with documentation and tests.",
   "author": "masuP9",
diff --git a/src/patterns/menubar/menubar.css b/src/patterns/menubar/menubar.css
index cd35496..ef7afb6 100644
--- a/src/patterns/menubar/menubar.css
+++ b/src/patterns/menubar/menubar.css
@@ -92,6 +92,11 @@
 
 .apg-menubar-trigger:focus,
 .apg-menubar [data-menubar-trigger]:focus {
+  outline: none;
+}
+
+.apg-menubar-trigger:focus-visible,
+.apg-menubar [data-menubar-trigger]:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: -2px;
 }
@@ -236,9 +241,19 @@
 .apg-menubar [data-menubar-menu] [role='menuitem']:focus,
 .apg-menubar [data-menubar-menu] [role='menuitemcheckbox']:focus,
 .apg-menubar [data-menubar-menu] [role='menuitemradio']:focus {
+  outline: none;
+  background-color: oklch(0.95 0 0);
+}
+
+.apg-menubar-menuitem:focus-visible,
+.apg-menubar-menu [role='menuitem']:focus-visible,
+.apg-menubar-menu [role='menuitemcheckbox']:focus-visible,
+.apg-menubar-menu [role='menuitemradio']:focus-visible,
+.apg-menubar [data-menubar-menu] [role='menuitem']:focus-visible,
+.apg-menubar [data-menubar-menu] [role='menuitemcheckbox']:focus-visible,
+.apg-menubar [data-menubar-menu] [role='menuitemradio']:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: -2px;
-  background-color: oklch(0.95 0 0);
 }
 
 /* Active state - pressed */
@@ -325,9 +340,14 @@
 
 .apg-menubar-submenu-trigger:focus,
 .apg-menubar [data-submenu-trigger]:focus {
+  outline: none;
+  background-color: oklch(0.95 0 0);
+}
+
+.apg-menubar-submenu-trigger:focus-visible,
+.apg-menubar [data-submenu-trigger]:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: -2px;
-  background-color: oklch(0.95 0 0);
 }
 
 /* Active state - pressed or submenu open */
diff --git a/src/styles/patterns/accordion.css b/src/styles/patterns/accordion.css
index e824f60..7795bd8 100644
--- a/src/styles/patterns/accordion.css
+++ b/src/styles/patterns/accordion.css
@@ -65,15 +65,14 @@
 }
 
 .apg-accordion-trigger:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: -2px;
-  z-index: 1;
-  position: relative;
+  outline: none;
 }
 
 .apg-accordion-trigger:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
+  z-index: 1;
+  position: relative;
 }
 
 .apg-accordion-trigger:disabled {
@@ -135,7 +134,11 @@
 }
 
 .apg-accordion-panel:focus {
-  outline: 2px solid var(--primary);
+  outline: none;
+}
+
+.apg-accordion-panel:focus-visible {
+  outline: 2px solid var(--ring);
   outline-offset: -2px;
 }
 
diff --git a/src/styles/patterns/alert-dialog.css b/src/styles/patterns/alert-dialog.css
index ef05262..2abcd8e 100644
--- a/src/styles/patterns/alert-dialog.css
+++ b/src/styles/patterns/alert-dialog.css
@@ -115,12 +115,11 @@ body:has(dialog.apg-alert-dialog[open]) {
 }
 
 .apg-alert-dialog-cancel:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+  outline: none;
 }
 
 .apg-alert-dialog-cancel:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -137,12 +136,11 @@ body:has(dialog.apg-alert-dialog[open]) {
 }
 
 .apg-alert-dialog-confirm:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+  outline: none;
 }
 
 .apg-alert-dialog-confirm:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -159,6 +157,10 @@ body:has(dialog.apg-alert-dialog[open]) {
 }
 
 .apg-alert-dialog-confirm--danger:focus {
+  outline: none;
+}
+
+.apg-alert-dialog-confirm--danger:focus-visible {
   outline: 2px solid var(--destructive);
   outline-offset: 2px;
 }
@@ -169,12 +171,11 @@ body:has(dialog.apg-alert-dialog[open]) {
 }
 
 .apg-alert-dialog-trigger:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+  outline: none;
 }
 
 .apg-alert-dialog-trigger:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
diff --git a/src/styles/patterns/button.css b/src/styles/patterns/button.css
index 604fade..40b71e2 100644
--- a/src/styles/patterns/button.css
+++ b/src/styles/patterns/button.css
@@ -35,7 +35,7 @@
 }
 
 .apg-button:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
diff --git a/src/styles/patterns/carousel.css b/src/styles/patterns/carousel.css
index 79f5e8a..6e17bfb 100644
--- a/src/styles/patterns/carousel.css
+++ b/src/styles/patterns/carousel.css
@@ -201,8 +201,7 @@
 }
 
 .apg-carousel-play-pause:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+  outline: none;
 }
 
 .apg-carousel-play-pause[data-playing='true'] {
@@ -237,9 +236,7 @@
 }
 
 .apg-carousel-tab:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-  border-radius: 50%;
+  outline: none;
 }
 
 /* Tab Indicator (Visual Dot) */
@@ -298,8 +295,7 @@
 
 .apg-carousel-prev:focus,
 .apg-carousel-next:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+  outline: none;
 }
 
 .apg-carousel-prev:active,
@@ -336,14 +332,15 @@
 
 /* Focus Enhancement for Keyboard Users */
 .apg-carousel-tab:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
+  border-radius: 50%;
 }
 
 .apg-carousel-play-pause:focus-visible,
 .apg-carousel-prev:focus-visible,
 .apg-carousel-next:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
diff --git a/src/styles/patterns/checkbox.css b/src/styles/patterns/checkbox.css
index 76428f4..1013fb1 100644
--- a/src/styles/patterns/checkbox.css
+++ b/src/styles/patterns/checkbox.css
@@ -48,7 +48,7 @@ apg-checkbox {
 
 /* Focus state */
 .apg-checkbox-input:focus-visible + .apg-checkbox-control {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
diff --git a/src/styles/patterns/combobox.css b/src/styles/patterns/combobox.css
index 40372b2..b48c453 100644
--- a/src/styles/patterns/combobox.css
+++ b/src/styles/patterns/combobox.css
@@ -51,8 +51,12 @@
 
 .apg-combobox-input:focus {
   outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
+}
+
+.apg-combobox-input:focus-visible {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ring) 30%, transparent);
 }
 
 .apg-combobox-input:disabled {
@@ -198,13 +202,6 @@
   }
 }
 
-/* Focus Enhancement for Keyboard Users */
-.apg-combobox-input:focus-visible {
-  outline: none;
-  border-color: var(--primary);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
-}
-
 /* Windows High Contrast Mode */
 @media (forced-colors: active) {
   .apg-combobox-input {
diff --git a/src/styles/patterns/data-grid.css b/src/styles/patterns/data-grid.css
index c7245ce..be48bb9 100644
--- a/src/styles/patterns/data-grid.css
+++ b/src/styles/patterns/data-grid.css
@@ -59,34 +59,34 @@
 }
 
 .apg-data-grid-header.sortable:focus {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--header-focus-bg, #e0f2fe);
 }
 
 .apg-data-grid:focus-within .apg-data-grid-header.sortable.focused {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--header-focus-bg, #e0f2fe);
 }
 
 /* Header checkbox cell focus style */
 .apg-data-grid-header.apg-data-grid-checkbox-cell:focus {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--header-focus-bg, #e0f2fe);
 }
 
 .apg-data-grid:focus-within .apg-data-grid-header.apg-data-grid-checkbox-cell.focused {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--header-focus-bg, #e0f2fe);
 }
 
 /* Data row checkbox cell focus style (match header checkbox cell) */
 .apg-data-grid-cell.apg-data-grid-checkbox-cell:focus {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--header-focus-bg, #e0f2fe);
 }
 
 .apg-data-grid:focus-within .apg-data-grid-cell.apg-data-grid-checkbox-cell.focused {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--header-focus-bg, #e0f2fe);
 }
 
@@ -144,12 +144,12 @@
 
 /* Focus state */
 .apg-data-grid-cell:focus {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--focus-bg, #eff6ff);
 }
 
 .apg-data-grid:focus-within .apg-data-grid-cell.focused {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--focus-bg, #eff6ff);
 }
 
@@ -424,7 +424,6 @@
     --header-hover-bg: #374151;
     --header-focus-bg: #1e3a5f;
     --row-header-bg: #1f2937;
-    --focus-color: #60a5fa;
     --focus-bg: #1e3a5f;
     --selected-bg: #1e3a5f;
     --selected-focus-bg: #1e4a7f;
@@ -455,7 +454,6 @@
   --header-hover-bg: #374151;
   --header-focus-bg: #1e3a5f;
   --row-header-bg: #1f2937;
-  --focus-color: #60a5fa;
   --focus-bg: #1e3a5f;
   --selected-bg: #1e3a5f;
   --selected-focus-bg: #1e4a7f;
diff --git a/src/styles/patterns/dialog.css b/src/styles/patterns/dialog.css
index 63afcce..d413472 100644
--- a/src/styles/patterns/dialog.css
+++ b/src/styles/patterns/dialog.css
@@ -104,12 +104,11 @@ dialog.apg-dialog:not([open]) {
 }
 
 .apg-dialog-close:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+  outline: none;
 }
 
 .apg-dialog-close:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
@@ -133,12 +132,11 @@ dialog.apg-dialog:not([open]) {
 }
 
 .apg-dialog-trigger:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+  outline: none;
 }
 
 .apg-dialog-trigger:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
diff --git a/src/styles/patterns/disclosure.css b/src/styles/patterns/disclosure.css
index ff15e17..4cf6060 100644
--- a/src/styles/patterns/disclosure.css
+++ b/src/styles/patterns/disclosure.css
@@ -37,8 +37,12 @@
   background: color-mix(in srgb, var(--background) 90%, var(--foreground));
 }
 
+.apg-disclosure-trigger:focus {
+  outline: none;
+}
+
 .apg-disclosure-trigger:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
   z-index: 1;
   position: relative;
diff --git a/src/styles/patterns/feed.css b/src/styles/patterns/feed.css
index 97bfa87..66d71a9 100644
--- a/src/styles/patterns/feed.css
+++ b/src/styles/patterns/feed.css
@@ -78,6 +78,10 @@
 }
 
 .apg-feed-article-link:focus {
+  outline: none;
+}
+
+.apg-feed-article-link:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 2px;
   border-radius: 0.25rem;
@@ -138,6 +142,10 @@
 }
 
 .apg-feed-demo-button:focus {
+  outline: none;
+}
+
+.apg-feed-demo-button:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
@@ -166,6 +174,10 @@
 }
 
 .apg-feed-search-input:focus {
+  outline: none;
+}
+
+.apg-feed-search-input:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 2px;
   border-color: var(--ring);
diff --git a/src/styles/patterns/grid.css b/src/styles/patterns/grid.css
index 5d57269..76ab82b 100644
--- a/src/styles/patterns/grid.css
+++ b/src/styles/patterns/grid.css
@@ -72,13 +72,14 @@
 
 /* Focus state - only show when cell actually has focus */
 .apg-grid-cell:focus {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--focus-bg, #eff6ff);
 }
 
 /* Show focused class styling only when grid has focus */
 .apg-grid:focus-within .apg-grid-cell.focused {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--focus-bg, #eff6ff);
 }
 
@@ -152,7 +153,6 @@
     --border-color: #374151;
     --header-bg: #1f2937;
     --row-header-bg: #1f2937;
-    --focus-color: #60a5fa;
     --focus-bg: #1e3a5f;
     --selected-bg: #1e3a5f;
     --selected-focus-bg: #1e4a7f;
@@ -167,7 +167,6 @@
   --border-color: #374151;
   --header-bg: #1f2937;
   --row-header-bg: #1f2937;
-  --focus-color: #60a5fa;
   --focus-bg: #1e3a5f;
   --selected-bg: #1e3a5f;
   --selected-focus-bg: #1e4a7f;
diff --git a/src/styles/patterns/landmarks.css b/src/styles/patterns/landmarks.css
index 303758d..7abb51c 100644
--- a/src/styles/patterns/landmarks.css
+++ b/src/styles/patterns/landmarks.css
@@ -259,6 +259,10 @@
 }
 
 .apg-landmark-search-input:focus {
+  outline: none;
+}
+
+.apg-landmark-search-input:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
@@ -278,6 +282,10 @@
 }
 
 .apg-landmark-search-button:focus {
+  outline: none;
+}
+
+.apg-landmark-search-button:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
@@ -310,6 +318,10 @@
 }
 
 .apg-landmark-input:focus {
+  outline: none;
+}
+
+.apg-landmark-input:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
@@ -330,6 +342,10 @@
 }
 
 .apg-landmark-submit:focus {
+  outline: none;
+}
+
+.apg-landmark-submit:focus-visible {
   outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
diff --git a/src/styles/patterns/link.css b/src/styles/patterns/link.css
index b98ad36..69dc62c 100644
--- a/src/styles/patterns/link.css
+++ b/src/styles/patterns/link.css
@@ -20,7 +20,7 @@
 }
 
 .apg-link:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
   border-radius: 2px;
 }
diff --git a/src/styles/patterns/listbox.css b/src/styles/patterns/listbox.css
index 79e446e..ac3bd7c 100644
--- a/src/styles/patterns/listbox.css
+++ b/src/styles/patterns/listbox.css
@@ -89,9 +89,7 @@
 }
 
 .apg-listbox-option:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: -2px;
-  z-index: 1;
+  outline: none;
 }
 
 .apg-listbox-option[aria-selected='true'] {
@@ -121,8 +119,9 @@
 
 /* Focus Enhancement for Keyboard Users */
 .apg-listbox-option:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+  outline: 2px solid var(--ring);
+  outline-offset: -2px;
+  z-index: 1;
 }
 
 /* Windows High Contrast Mode */
diff --git a/src/styles/patterns/menu-button.css b/src/styles/patterns/menu-button.css
index eac723b..2b78bb6 100644
--- a/src/styles/patterns/menu-button.css
+++ b/src/styles/patterns/menu-button.css
@@ -52,8 +52,7 @@
 }
 
 .apg-menu-button-trigger:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
+  outline: none;
 }
 
 .apg-menu-button-trigger:active {
@@ -107,9 +106,7 @@
 }
 
 .apg-menu-button-item:focus {
-  outline: 2px solid var(--primary);
-  outline-offset: -2px;
-  z-index: 1;
+  outline: none;
   background: color-mix(in srgb, var(--primary) 10%, transparent);
 }
 
@@ -138,13 +135,14 @@
 
 /* Focus Enhancement for Keyboard Users */
 .apg-menu-button-trigger:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
 .apg-menu-button-item:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: -2px;
+  z-index: 1;
 }
 
 /* Windows High Contrast Mode */
diff --git a/src/styles/patterns/radio-group.css b/src/styles/patterns/radio-group.css
index 3b518fe..ac5c89d 100644
--- a/src/styles/patterns/radio-group.css
+++ b/src/styles/patterns/radio-group.css
@@ -60,7 +60,7 @@ apg-radio-group {
 
 /* Focus state */
 .apg-radio:focus-visible .apg-radio-control {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
diff --git a/src/styles/patterns/switch.css b/src/styles/patterns/switch.css
index d3eb9e0..68f5387 100644
--- a/src/styles/patterns/switch.css
+++ b/src/styles/patterns/switch.css
@@ -21,7 +21,7 @@ apg-switch {
 }
 
 .apg-switch:focus-visible .apg-switch-track {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
diff --git a/src/styles/patterns/tabs.css b/src/styles/patterns/tabs.css
index 9808f39..a36101f 100644
--- a/src/styles/patterns/tabs.css
+++ b/src/styles/patterns/tabs.css
@@ -132,8 +132,12 @@
   color: var(--foreground);
 }
 
+.apg-tab:focus {
+  outline: none;
+}
+
 .apg-tab:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: -2px;
   z-index: 1;
 }
@@ -201,8 +205,12 @@
   min-height: 200px;
 }
 
+.apg-tabpanel:focus {
+  outline: none;
+}
+
 .apg-tabpanel:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: -2px;
 }
 
@@ -225,12 +233,6 @@
   }
 }
 
-/* Focus Enhancement for Keyboard Users */
-.apg-tab:focus-visible {
-  outline: 2px solid var(--primary);
-  outline-offset: 2px;
-}
-
 /* Windows High Contrast Mode */
 @media (forced-colors: active) {
   .apg-tabs {
diff --git a/src/styles/patterns/toggle-button.css b/src/styles/patterns/toggle-button.css
index 3ff031f..67a3923 100644
--- a/src/styles/patterns/toggle-button.css
+++ b/src/styles/patterns/toggle-button.css
@@ -25,7 +25,7 @@
   outline: none;
   box-shadow:
     0 0 0 2px var(--background),
-    0 0 0 4px var(--primary);
+    0 0 0 4px var(--ring);
 }
 
 .apg-toggle-button:disabled {
diff --git a/src/styles/patterns/toolbar.css b/src/styles/patterns/toolbar.css
index 3b2669d..5a3fb73 100644
--- a/src/styles/patterns/toolbar.css
+++ b/src/styles/patterns/toolbar.css
@@ -45,7 +45,7 @@
 }
 
 .apg-toolbar-button:focus-visible {
-  outline: 2px solid var(--primary);
+  outline: 2px solid var(--ring);
   outline-offset: 2px;
 }
 
diff --git a/src/styles/patterns/tree-view.css b/src/styles/patterns/tree-view.css
index b5a447b..0e2a408 100644
--- a/src/styles/patterns/tree-view.css
+++ b/src/styles/patterns/tree-view.css
@@ -117,10 +117,6 @@
   outline: none;
 }
 
-.apg-treeview-item:focus > .apg-treeview-item-content {
-  box-shadow: inset 0 0 0 2px var(--primary);
-}
-
 /* Selected state */
 .apg-treeview-item[aria-selected='true'] > .apg-treeview-item-content {
   background: color-mix(in srgb, var(--primary) 10%, transparent);
@@ -160,7 +156,7 @@
 
 /* Focus Enhancement for Keyboard Users */
 .apg-treeview-item:focus-visible > .apg-treeview-item-content {
-  box-shadow: inset 0 0 0 2px var(--primary);
+  box-shadow: inset 0 0 0 2px var(--ring);
 }
 
 /* Windows High Contrast Mode */
diff --git a/src/styles/patterns/treegrid.css b/src/styles/patterns/treegrid.css
index 047e7c6..a7b349a 100644
--- a/src/styles/patterns/treegrid.css
+++ b/src/styles/patterns/treegrid.css
@@ -118,13 +118,14 @@
 
 /* Focus state - only show when cell actually has focus */
 .apg-treegrid-cell:focus {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--focus-bg, #eff6ff);
 }
 
 /* Show focused class styling only when treegrid has focus */
 .apg-treegrid:focus-within .apg-treegrid-cell.focused {
-  box-shadow: inset 0 0 0 2px var(--focus-color, #3b82f6);
+  box-shadow: inset 0 0 0 2px var(--ring);
   background-color: var(--focus-bg, #eff6ff);
 }
 
@@ -212,7 +213,6 @@
     --border-color: #374151;
     --header-bg: #1f2937;
     --row-header-bg: #1f2937;
-    --focus-color: #60a5fa;
     --focus-bg: #1e3a5f;
     --selected-bg: #1e3a5f;
     --selected-focus-bg: #1e4a7f;
@@ -228,7 +228,6 @@
   --border-color: #374151;
   --header-bg: #1f2937;
   --row-header-bg: #1f2937;
-  --focus-color: #60a5fa;
   --focus-bg: #1e3a5f;
   --selected-bg: #1e3a5f;
   --selected-focus-bg: #1e4a7f;