chore: introduce focus-base class to reduce repetition of focus classes

src/core/Accordion.tsx

@@ -98,8 +98,7 @@ const AccordionRow = ({
           "rounded-none": !isNonTransparentTheme(theme),
           "pointer-events-none focus-visible:outline-none":
             isStaticTheme(theme),
-          "focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-gui-blue-focus":
-            !isStaticTheme(theme),
+          "focus-base": !isStaticTheme(theme),
           "sticky top-0": sticky,
           [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),
           [`${selectableBg} ${selectableText}`]: selectable && isOpen,

src/core/Toggle.tsx

@@ -13,7 +13,7 @@ const Toggle: React.FC<ToggleProps> = ({ id, label, className, ...props }) => {
     <div className="flex items-center">
       <Switch.Root
         className={cn(
-          "p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus",
+          "p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus-base",
           className,
         )}
         id={id}

src/core/Toggle/__snapshots__/Toggle.stories.tsx.snap

@@ -7,7 +7,7 @@ exports[`Components/Toggle Checked smoke-test 1`] = `
           aria-checked="true"
           data-state="checked"
           value="on"
-          class="p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus"
+          class="p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus-base"
   >
     <span data-state="checked"
           class="block h-[28px] w-[28px] bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle translate-x-2 data-[state=checked]:translate-x-[26px] transition-transform"
@@ -24,7 +24,7 @@ exports[`Components/Toggle Default smoke-test 1`] = `
           aria-checked="false"
           data-state="unchecked"
           value="on"
-          class="p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus"
+          class="p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus-base"
   >
     <span data-state="unchecked"
           class="block h-[28px] w-[28px] bg-white data-[disabled]:bg-neutral-500 rounded-full drop-shadow-toggle translate-x-2 data-[state=checked]:translate-x-[26px] transition-transform"
@@ -43,7 +43,7 @@ exports[`Components/Toggle Disabled smoke-test 1`] = `
           data-disabled
           disabled
           value="on"
-          class="p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-focus"
+          class="p-0 h-32 w-[56px] bg-neutral-600 rounded-full relative inline-block transition-colors data-[disabled]:bg-gui-unavailable data-[disabled]:cursor-not-allowed data-[state=checked]:bg-orange-600 focus-base"
   >
     <span data-state="unchecked"
           data-disabled

src/core/styles.components.css

@@ -1,3 +1,4 @@
+@import "./styles/utils.css";
 @import "./styles/buttons.css";
 @import "./styles/legacy-buttons.css";
 @import "./styles/dropdowns.css";

src/core/styles/buttons.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-button-base {
-    @apply inline-flex rounded justify-center items-center gap-12 text-neutral-000 transition-colors focus:outline-none focus-visible:outline-offset-0 focus-visible:outline-4 focus-visible:outline-gui-blue-focus disabled:cursor-not-allowed;
+    @apply inline-flex rounded justify-center items-center gap-12 text-neutral-000 transition-colors focus-base disabled:cursor-not-allowed;
   }
 
   .ui-button-lg-base {

src/core/styles/dropdowns.css

@@ -1,6 +1,6 @@
 @layer components {
   .ui-dropdown-base {
-    @apply rounded-lg border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-none focus-visible:outline-gui-focus focus-visible:outline-4 focus-visible:outline-offset-0;
+    @apply rounded-lg border border-neutral-400 hover:border-neutral-600 active:border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus-base;
     @apply bg-no-repeat text-p2 flex font-medium bg-neutral-100 transition-colors;
     background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
     background-position: center right 16px;

src/core/styles/forms.css

@@ -123,7 +123,7 @@
 
   .ui-input {
     @apply ui-text-p2 font-medium bg-neutral-100 rounded p-input w-full leading-none appearance-none border border-neutral-400 transition-colors placeholder-neutral-600;
-    @apply hover:border-neutral-700 focus:bg-white focus:outline-none focus-visible:outline-gui-focus focus-visible:outline-offset-0 focus-visible:outline-4;
+    @apply hover:border-neutral-700 focus:bg-white focus-base;
     @apply max-w-screen-sm invalid:border-gui-error-red;
   }
 
@@ -140,7 +140,7 @@
   }
 
   .ui-radio {
-    @apply border border-neutral-600 w-20 h-20 appearance-none cursor-pointer rounded-full focus-visible:outline-4 focus-visible:outline-gui-blue-focus;
+    @apply border border-neutral-600 w-20 h-20 appearance-none cursor-pointer rounded-full focus-base;
   }
 
   .ui-radio:checked {

src/core/styles/legacy-buttons.css

@@ -3,7 +3,7 @@
     @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-neutral-1100;
     @apply active:text-white active:bg-neutral-1200;
-    @apply focus:text-white focus:bg-cool-black focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
+    @apply focus:text-white focus:bg-cool-black focus-base;
     @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
@@ -25,7 +25,7 @@
     background-position: 0% 0%;
 
     @apply text-white text-btn2 font-sans font-bold inline-block rounded p-btn;
-    @apply focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
+    @apply focus-base;
     @apply inline-flex items-center justify-center;
   }
 
@@ -43,7 +43,7 @@
     @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block rounded p-btn;
     @apply hover:text-white hover:bg-active-orange;
     @apply active:text-white active:bg-red-orange;
-    @apply focus:text-white focus:bg-cool-black focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
+    @apply focus:text-white focus:bg-cool-black focus-base;
     @apply disabled:text-mid-grey disabled:bg-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
@@ -53,7 +53,7 @@
     @apply text-cool-black bg-white text-btn2 font-sans font-bold inline-block border-btn border-cool-black rounded p-btn;
     @apply hover:text-cool-black hover:border-active-orange hover:bg-white;
     @apply active:border-red-orange active:bg-white;
-    @apply focus:border-cool-black focus:bg-white focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
+    @apply focus:border-cool-black focus:bg-white focus-base;
     @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:bg-white disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;
@@ -63,7 +63,7 @@
     @apply text-white bg-cool-black text-btn2 font-sans font-bold inline-block border-btn border-mid-grey rounded p-btn;
     @apply hover:text-white hover:border-active-orange;
     @apply active:border-red-orange;
-    @apply focus:outline-offset-0 focus:outline-none focus-visible:outline-4 focus-visible:outline-gui-focus;
+    @apply focus-base;
     @apply disabled:text-gui-unavailable disabled:border-gui-unavailable disabled:cursor-not-allowed;
     @apply transition-colors;
     @apply inline-flex items-center justify-center;

src/core/styles/text.css

@@ -176,13 +176,13 @@
   .ui-link {
     @apply text-gui-default;
     @apply hover:text-gui-hover active:text-gui-active disabled:text-gui-unavailable;
-    @apply focus:text-gui-default focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-gui-focus;
+    @apply focus:text-gui-default focus-base;
     @apply no-underline;
   }
 
   .ui-link-neutral {
     @apply hover:text-dark-grey active:text-cool-black disabled:text-gui-unavailable;
-    @apply focus:text-charcoal-grey focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-gui-focus;
+    @apply focus:text-charcoal-grey focus-base;
     @apply underline;
   }
 

src/core/styles/utils.css

@@ -0,0 +1,3 @@
+.focus-base {
+  @apply focus:outline-none focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-gui-focus;
+}