feature-upgrade/button - Focus state color can be controled (#1183)

added a focus color property to control the focus state color for further use and more customizability

Author: Abdjulaziz

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,

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>`;