@kaizen/components 1.74.1 → 1.74.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.74.1",
+  "version": "1.74.2",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Checkbox/Checkbox/Checkbox.module.scss

@@ -57,6 +57,9 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
   .checkbox:focus + & {
     background: white;
     border-color: $dt-color-form-border-color-hover;
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
   }
 
   .checkbox:checked:focus + &,
@@ -70,21 +73,6 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
     background: $dt-color-form-border-color-hover;
     border-color: $dt-color-form-border-color-hover;
   }
-
-  .checkbox:focus + &::after {
-    content: '';
-    box-sizing: border-box;
-    position: absolute;
-    background: transparent;
-    border-radius: $border-focus-ring-border-radius;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    border-color: $dt-color-form-border-color-focus;
-    top: calc(-#{$focus-ring-offset} - calc(#{$checkbox-size} / 8));
-    left: calc(-#{$focus-ring-offset} - calc(#{$checkbox-size} / 8));
-    width: calc(#{$checkbox-size} + #{$focus-ring-offset} + #{$border-solid-border-width} * 2);
-    height: calc(#{$checkbox-size} + #{$focus-ring-offset} + #{$border-solid-border-width} * 2);
-  }
 }
 
 .box.reversed {
@@ -96,6 +84,10 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
     background: rgba($color-white-rgb, 0.65);
   }
 
+  .checkbox:focus + & {
+    outline-color: var(--color-blue-300);
+  }
+
   .checkbox:not([checked]):hover + &,
   .checkbox:not([checked]):focus + & {
     border-color: $color-white;
@@ -113,8 +105,4 @@ $dt-color-checkbox-background-color-checked: $color-gray-500;
     background: $color-white;
     border-color: $color-white;
   }
-
-  .checkbox:focus + &::after {
-    border-color: $dt-color-form-border-color-reversed-focus;
-  }
 }

package/src/ClearButton/ClearButton.module.scss

@@ -7,27 +7,16 @@
 
   position: relative;
   display: inline-flex;
+  border-radius: 100%;
 
   &:hover {
     cursor: pointer;
   }
 
-  &:focus {
-    outline: none;
-  }
-
   &:focus-visible {
-    &::after {
-      $focus-ring-offset: -1px;
-
-      content: '';
-      position: absolute;
-      background: transparent;
-      border-width: $border-focus-ring-border-width;
-      border-style: $border-focus-ring-border-style;
-      border-radius: 50%;
-      inset: $focus-ring-offset;
-    }
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: -1px;
   }
 }
 
@@ -38,12 +27,6 @@
   &:focus-visible {
     color: $color-purple-800;
   }
-
-  &:focus-visible {
-    &::after {
-      border-color: $color-blue-500;
-    }
-  }
 }
 
 .reversed {
@@ -55,8 +38,6 @@
   }
 
   &:focus-visible {
-    &::after {
-      border-color: $color-blue-300;
-    }
+    outline-color: var(--color-blue-300);
   }
 }

package/src/Input/Input/Input.module.scss

@@ -50,6 +50,10 @@ $input-with-icon-padding: calc(#{$input-icon-size} + calc(#{$spacing-md} * 0.75)
 
   &:focus:not([disabled]),
   &:hover:focus:not([disabled]) {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
+
     @include form-input-placeholder {
       opacity: 0%;
     }
@@ -66,19 +70,6 @@ $input-with-icon-padding: calc(#{$input-icon-size} + calc(#{$spacing-md} * 0.75)
   }
 }
 
-.input:focus + .focusRing {
-  $focus-ring-offset: 3px;
-
-  position: absolute;
-  background: transparent;
-  border-radius: $border-focus-ring-border-radius;
-  border-width: $border-focus-ring-border-width;
-  border-style: $border-focus-ring-border-style;
-  border-color: transparent;
-  inset: -$focus-ring-offset;
-  pointer-events: none;
-}
-
 /* stylelint-disable no-descending-specificity */
 ///////////////////////////////////////////////////
 // ICON ADORNMENT STYLES
@@ -278,8 +269,8 @@ $input-with-icon-padding: calc(#{$input-icon-size} + calc(#{$spacing-md} * 0.75)
     background: rgba($color-white-rgb, 0.1);
   }
 
-  &:focus + .focusRing {
-    border-color: $color-blue-300;
+  &:focus {
+    outline-color: var(--color-blue-300);
   }
 
   &:not(.error, .caution) {

package/src/Input/Input/Input.tsx

@@ -62,10 +62,6 @@ export const Input = ({
       {...restProps}
     />
 
-    {/* Inputs aren't able to have pseudo elements like ::after on them,
-          so we have to create an element ourselves for the focus ring */}
-    <div className={styles.focusRing} />
-
     {endIconAdornment && <div className={styles.endIconAdornment}>{endIconAdornment}</div>}
   </div>
 )

package/src/Input/InputSearch/InputSearch.module.scss

@@ -60,19 +60,11 @@ $classname--input: '.input[type="search"]';
       opacity: 0%;
     }
   }
-}
 
-.focusRing {
-  #{$classname--input}:focus + & {
-    $focus-ring-offset: 3px;
-
-    position: absolute;
-    background: transparent;
-    border-radius: $border-solid-border-radius-curved;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    inset: -$focus-ring-offset;
-    pointer-events: none;
+  &:focus {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
   }
 }
 
@@ -123,10 +115,6 @@ $classname--input: '.input[type="search"]';
     }
   }
 
-  .focusRing {
-    border-color: $color-blue-500;
-  }
-
   .startIconAdornment {
     color: $color-purple-800;
     opacity: $start-icon-opacity--default;
@@ -162,10 +150,6 @@ $classname--input: '.input[type="search"]';
     }
   }
 
-  .focusRing {
-    border-color: $color-blue-500;
-  }
-
   .startIconAdornment {
     color: $color-purple-800;
     opacity: $start-icon-opacity--default;
@@ -198,10 +182,10 @@ $classname--input: '.input[type="search"]';
       color: $color-white;
       opacity: $input-placeholder-opacity--reversed;
     }
-  }
 
-  .focusRing {
-    border-color: $color-blue-300;
+    &:focus {
+      outline-color: var(--color-blue-300);
+    }
   }
 
   .startIconAdornment {

package/src/Input/InputSearch/InputSearch.tsx

@@ -75,9 +75,6 @@ export const InputSearch = (props: InputSearchProps): JSX.Element => {
         readOnly={onChange === undefined}
         {...restProps}
       />
-      {/* Inputs aren't able to have pseudo elements like ::after on them,
-          so we have to create an element ourselves for the focus ring */}
-      <div className={styles.focusRing} />
 
       {value && (
         <ClearButton

package/src/Link/Link.module.css

@@ -10,15 +10,10 @@
   outline: 0;
 }
 
-.link[data-focus-visible]::after {
-  content: '';
-  position: absolute;
-  background: transparent;
-  border-color: var(--color-blue-500);
-  border-radius: 0;
-  border-width: var(--border-focus-ring-border-width);
-  border-style: var(--border-focus-ring-border-style);
-  inset: calc(-1 * (var(--border-focus-ring-border-width) * 2) - 1px);
+.link[data-focus-visible] {
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+    var(--color-blue-500);
+  outline-offset: 3px;
 }
 
 .isUnderlined {
@@ -94,8 +89,8 @@
   --link-text-color: var(--color-white);
 }
 
-.white[data-focus-visible]::after {
-  border-color: var(--color-blue-300);
+.white[data-focus-visible] {
+  outline-color: var(--color-blue-300);
 }
 
 .white.isDisabled {
@@ -106,8 +101,8 @@
   --link-text-color: var(--color-white);
 }
 
-.reversed[data-focus-visible]::after {
-  border-color: var(--color-blue-300);
+.reversed[data-focus-visible] {
+  outline-color: var(--color-blue-300);
 }
 
 .link.isDisabled {

package/src/Modal/GenericModal/GenericModal.module.scss

@@ -56,17 +56,11 @@
   }
 
   // wrap the modal container with a focus ring when the title has focus
-  // don't copy this over on the rebuild
-  // rather than putting the focus on the title, put it on the role=dialog element itself
-  &:has(:global([class*='modalLabel']):focus-visible)::after {
-    content: '';
-    position: absolute;
-    background: transparent;
-    border-radius: $border-focus-ring-border-radius;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    border-color: $color-blue-300;
-    inset: -4px;
+  // for the rebuild: rather than putting the focus on the title, put it on the role=dialog element itself
+  &:has(:global([class*='modalLabel']):focus-visible) {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-300);
+    outline-offset: 2px;
   }
 }
 

package/src/Notification/subcomponents/GenericNotification/GenericNotification.module.scss

@@ -34,24 +34,12 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: var(--border-solid-border-radius);
 
-  &:focus,
   &:focus-visible {
-    outline: none;
-  }
-
-  &:focus-visible::after {
-    $focus-ring-offset: var(--spacing-2);
-
-    content: '';
-    pointer-events: none;
-    position: absolute;
-    background: transparent;
-    border-radius: $border-focus-ring-border-radius;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    border-color: $color-blue-500;
-    inset: $focus-ring-offset;
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: -4px;
   }
 }
 

package/src/Radio/Radio/Radio.module.scss

@@ -52,22 +52,9 @@ $dt-color-radio-border-color-focus-reversed: $color-blue-300;
 
   .radioInput:focus:not([disabled]) + & {
     border-color: $dt-color-radio-disc-color-base;
-  }
-
-  .radioInput:focus:not([disabled]) + &::after {
-    pointer-events: none;
-    content: '';
-    box-sizing: border-box;
-    position: absolute;
-    background: transparent;
-    border-radius: $radio-size + $focus-ring-offset;
-    border-width: $border-focus-ring-border-width;
-    border-style: $border-focus-ring-border-style;
-    border-color: $dt-color-radio-border-color-focus;
-    top: calc(-#{$focus-ring-offset} - calc(#{$radio-size} / 8));
-    left: calc(-#{$focus-ring-offset} - calc(#{$radio-size} / 8));
-    width: calc(#{$radio-size} + #{$focus-ring-offset} + #{$border-solid-border-width} * 2);
-    height: calc(#{$radio-size} + #{$focus-ring-offset} + #{$border-solid-border-width} * 2);
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
   }
 
   .radioInput:not([disabled]) + &:hover {
@@ -81,10 +68,7 @@ $dt-color-radio-border-color-focus-reversed: $color-blue-300;
 
     .radioInput:focus:not([disabled]) + & {
       border-color: $color-white;
-    }
-
-    .radioInput:focus:not([disabled]) + &::after {
-      border-color: $dt-color-radio-border-color-focus-reversed;
+      outline-color: $dt-color-radio-border-color-focus-reversed;
     }
 
     .radioInput:not([disabled]) + &:hover {

package/src/__next__/Button/Button.module.css

@@ -53,15 +53,10 @@
     --button-text-color: var(--color-white);
   }
 
-  &[data-focus-visible]::after {
-    content: '';
-    position: absolute;
-    background: transparent;
-    border-color: var(--color-blue-500);
-    border-radius: var(--border-focus-ring-border-radius);
-    border-width: var(--border-focus-ring-border-width);
-    border-style: var(--border-focus-ring-border-style);
-    inset: calc(-1 * (var(--border-focus-ring-border-width) * 2) - 1px);
+  &[data-focus-visible] {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
   }
 }
 
@@ -164,8 +159,8 @@
 .primaryReversed,
 .secondaryReversed,
 .tertiaryReversed {
-  &[data-focus-visible]::after {
-    border-color: var(--color-blue-300);
+  &[data-focus-visible] {
+    outline-color: var(--color-blue-300);
   }
 }
 

package/src/__next__/Icon/_docs/Icon.docs.module.css

@@ -9,9 +9,7 @@
   }
 }
 
-.interactiveIcon:focus::after {
-  position: absolute;
-  content: '';
-  border: var(--border-focus-ring-border-width) solid var(--color-blue-500);
-  inset: -2px;
+.interactiveIcon:focus {
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+    var(--color-blue-500);
 }

package/src/__next__/Select/subcomponents/Option/Option.module.scss

@@ -40,18 +40,8 @@ $iconAndBadgeHeight: $spacing-md;
   &.isFocusVisible {
     background-color: $color-blue-100;
     color: $color-blue-500;
-
-    &::after {
-      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-
-      content: '';
-      position: absolute;
-      background: transparent;
-      border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
-      border-radius: 4px;
-      inset: calc(-1 * #{$focus-ring-offset});
-      z-index: 1; // show border when sibling option is hovered
-    }
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
 
     .icon {
       color: $color-blue-500;

package/src/__next__/Select/subcomponents/SelectToggle/SelectToggle.module.scss

@@ -54,20 +54,11 @@
   }
 
   &:focus {
-    outline: none;
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
     background-color: $color-gray-200;
     border-color: $color-gray-600;
-
-    &::after {
-      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-
-      content: '';
-      position: absolute;
-      background: transparent;
-      border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
-      border-radius: $border-focus-ring-border-radius;
-      inset: calc(-1 * #{$focus-ring-offset});
-    }
   }
 }
 
@@ -115,9 +106,7 @@
   }
 
   &:focus {
-    &::after {
-      border-color: $color-blue-300;
-    }
+    outline-color: var(--color-blue-300);
   }
 
   .error {

package/src/__next__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss

@@ -12,20 +12,9 @@
 
   &:focus,
   &:focus-visible {
-    outline: none;
-
-    &::after {
-      $focus-ring-offset: -3px;
-
-      border-color: $color-blue-500;
-      content: '';
-      position: absolute;
-      background: transparent;
-      border-width: $border-focus-ring-border-width;
-      border-style: $border-focus-ring-border-style;
-      border-radius: 50%;
-      inset: $focus-ring-offset;
-    }
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
   }
 
   &::before {