chore(styling-hooks): refactor new focus styling hooks (#5330)

Author: Amarnath510

styling-hooks/shadow.json

@@ -2,7 +2,6 @@
   "imports": [
     "@salesforce-ux/sds-styling-hooks/src/props/colors.json",
     "@salesforce-ux/sds-styling-hooks/src/props/palettes.json",
-    "./transparent-colors.json",
-    "./shadow.json"
+    "./transparent-colors.json"
   ]
 }

styling-hooks/slds-hooks.json

@@ -6,3 +6,10 @@
 // ----------------------------------------------------------------------------
 
 @import '../design-tokens/dist/slds-hooks.custom-props';
+
+:root {
+  --_slds-g-shadow-outset-focus: 0 0 0 2px var(--slds-g-color-neutral-base-100, #FFFFFF), 0 0 0 4px var(--slds-g-color-brand-base-40, #0B5CAB);
+  --_slds-g-shadow-inset-focus: 0 0 0 2px var(--slds-g-color-neutral-base-100) inset, 0 0 0 4px var(--slds-g-color-brand-base-40, #0B5CAB) inset;
+  --_slds-g-shadow-inset-inverse-focus: 0 0 0 2px var(--slds-g-color-brand-base-40, #0B5CAB) inset, 0 0 0 4px var(--slds-g-color-neutral-base-100, #FFFFFF) inset;
+  --_slds-g-shadow-outline-focus: 0 0 0 2px var(--slds-g-color-brand-base-40, #0B5CAB);
+}

ui/_styling-hooks.scss

@@ -74,7 +74,7 @@
   line-height: var(--slds-c-accordion-heading-line-height, var(--sds-c-accordion-heading-line-height, $line-height-heading));
 
   .slds-button:focus {
-    box-shadow: inset var(--slds-g-shadow-8);
+    box-shadow: inset var(--_slds-g-shadow-outline-focus);
   }
 }
 

ui/components/accordion/base/_index.scss

@@ -45,7 +45,7 @@ $alert-gradient-size-background: 64px 64px;
     }
 
     &:focus {
-      box-shadow: var(--slds-c-alert-shadow, var(--slds-g-shadow-5, #{$shadow-button-focus}));
+      box-shadow: var(--slds-c-alert-shadow, var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus}));
       border-width: var(--slds-c-alert-sizing-border, $border-width-thin);
       border-style: solid;
       border-color: var(--slds-c-alert-color-border, transparent);
@@ -87,7 +87,7 @@ $alert-gradient-size-background: 64px 64px;
   }
 
   .slds-button:focus {
-    box-shadow: var(--slds-g-shadow-6);
+    box-shadow: var(--_slds-g-shadow-inset-focus);
   }
 }
 

ui/components/alert/base/_index.scss

@@ -27,7 +27,7 @@
   }
 
   &:focus {
-    box-shadow: var(--slds-g-shadow-5, #{$shadow-button-focus});
+    box-shadow: var(--_slds-g-shadow-outset-focus, #{$shadow-button-focus});
   }
 
   /**

ui/components/app-launcher/base/_index.scss

@@ -84,7 +84,7 @@
 
   &:focus {
     text-decoration: underline;
-    box-shadow: var(--slds-g-shadow-7, #{$shadow-button-focus});
+    box-shadow: var(--_slds-g-shadow-inset-inverse-focus, #{$shadow-button-focus});
     outline: none;
     border-radius: 0;
   }

ui/components/builder-header/base/_index.scss

@@ -38,7 +38,7 @@
   box-shadow: inset 1px 0 0 var(--slds-g-color-neutral-base-100, #{$button-icon-color-border-primary});
 
   &:focus {
-    box-shadow: var(--slds-g-shadow-5);
+    box-shadow: var(--_slds-g-shadow-outset-focus);
   }
 }
 

ui/components/button-groups/base/_index.scss

@@ -105,7 +105,7 @@
   }
 
   &:focus {
-    box-shadow: var(--slds-g-shadow-5);
+    box-shadow: var(--_slds-g-shadow-outset-focus);
     outline: 0;
   }
 }
@@ -148,7 +148,7 @@
   }
 
   &:focus {
-    box-shadow: var(--slds-g-shadow-6, #{$shadow-button-focus});
+    box-shadow: var(--_slds-g-shadow-inset-focus, #{$shadow-button-focus});
     border-color: transparent;
     outline: 0;
   }

ui/components/button-icons/base/_index.scss

@@ -46,7 +46,7 @@
   }
 
   &:focus {
-    box-shadow: var(--slds-g-shadow-5);
+    box-shadow: var(--_slds-g-shadow-outset-focus);
     outline: 0;
   }