[6.x] Make the focus outline color themeable (#13048)

Author: JayGeorge

packages/ui/src/ui.css

@@ -29,6 +29,7 @@
     --color-global-header-bg: var(--theme-color-global-header-bg);
     --color-dark-global-header-bg: var(--theme-color-dark-global-header-bg);
     --color-progress-bar: var(--theme-color-progress-bar);
+    --color-focus-outline: var(--theme-color-focus-outline);
     --color-ui-accent-bg: var(--theme-color-ui-accent-bg);
     --color-ui-accent-text: var(--theme-color-ui-accent-text);
     --color-dark-ui-accent-bg: var(--theme-color-dark-ui-accent-bg);

resources/css/elements/base.css

@@ -8,7 +8,7 @@
     /* Here we typically need a negative outline-offset because of the inner shadow on inputs */
     --focus-outline-offset: -1px;
     --focus-within-outline-offset: 0px;
-    --focus-outline-color: var(--color-blue-400);
+    --focus-outline-color: var(--theme-color-focus-outline, var(--color-blue-400));
     --focus-outline-style: solid;
 
     /* The outline-offset value used for buttons */

src/CP/Color.php

@@ -391,6 +391,7 @@ public static function defaults(): array
             'global-header-bg' => self::Zinc[800],
             'dark-global-header-bg' => self::Zinc[800],
             'progress-bar' => self::Indigo[700],
+            'focus-outline' => self::Blue[400],
             'ui-accent-bg' => self::Indigo[700],
             'ui-accent-text' => 'var(--theme-color-ui-accent-bg)',
             'dark-ui-accent-bg' => self::Indigo[700],