From 586023fad49f7163c1a0f7baece73a56ea5a294f Mon Sep 17 00:00:00 2001
From: abdjulaziz <abdulazizpriv@gmail.com>
Date: Wed, 10 Sep 2025 14:39:03 +0200
Subject: [PATCH] added a focus color property to control the focus state color
 for further use and more customizability

---
 packages/uui-button/lib/uui-button.element.ts | 3 ++-
 packages/uui-button/lib/uui-button.story.ts   | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/uui-button/lib/uui-button.element.ts b/packages/uui-button/lib/uui-button.element.ts
index b939b3de8..43d2237ca 100644
--- a/packages/uui-button/lib/uui-button.element.ts
+++ b/packages/uui-button/lib/uui-button.element.ts
@@ -50,6 +50,7 @@ export type UUIButtonType = 'submit' | 'button' | 'reset';
  *  @cssprop --uui-button-contrast-disabled - overwrite the text color for disabled state
  *  @cssprop --uui-button-content-align - Overwrite justify-content alignment. Possible values: 'left', 'right', 'center'.
  *  @cssprop --uui-button-transition - Add transition to the button. Default is none.
+ *  @cssprop --uui-focus-outline-color - overwrite the focus outline color
  */
 @defineElement('uui-button')
 export class UUIButtonElement extends UUIFormControlMixin(
@@ -358,7 +359,7 @@ export class UUIButtonElement extends UUIFormControlMixin(
       }
 
       #button:focus-visible {
-        outline: 2px solid var(--color-emphasis);
+        outline: 2px solid var(--uui-focus-outline-color, var(--color-emphasis));
       }
 
       button[disabled]:active,
diff --git a/packages/uui-button/lib/uui-button.story.ts b/packages/uui-button/lib/uui-button.story.ts
index d0badce93..3baea51b9 100644
--- a/packages/uui-button/lib/uui-button.story.ts
+++ b/packages/uui-button/lib/uui-button.story.ts
@@ -46,6 +46,7 @@ const meta: Meta = {
       options: ['left', 'center', 'right'],
     },
     '--uui-button-transition': { control: { type: 'text' } },
+    '--uui-focus-outline-color': { control: { type: 'color' } },
   },
   render: args => {
     return html`<uui-button ${spread(args)}>${renderSlots(args)}</uui-button>`;