@kaizen/components 1.78.1 → 1.79.0

package/src/TitleBlockZen/subcomponents/TitleBlockMenuItem.module.scss

@@ -4,101 +4,103 @@
 
 /* stylelint-disable no-descending-specificity */
 
-// We're duplicating the CSS instead of manipulating the Menu package to accept the alternate props
-.menuListItem {
-  display: flex;
-}
-
-.menuItem {
-  display: flex;
-  align-items: center;
-  flex: 1 1 auto;
-  box-sizing: border-box;
-  background: none;
-  border: 2px transparent solid;
-  text-align: start;
-  padding: 6px calc(#{$spacing-sm} - 2px);
-  margin: 0 $spacing-xs;
-  min-height: calc(1.75 * #{$spacing-md});
-  border-radius: 4px;
-  font-family: $typography-paragraph-body-font-family;
-  font-weight: $typography-paragraph-body-font-weight;
-  font-size: $typography-paragraph-body-font-size;
-  line-height: $typography-paragraph-body-line-height;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  text-decoration: none;
-  color: $color-purple-800;
-
-  &:hover {
-    text-decoration: none;
+@layer kz-components {
+  // We're duplicating the CSS instead of manipulating the Menu package to accept the alternate props
+  .menuListItem {
+    display: flex;
   }
 
-  &:not(.menuItem--disabled):hover,
-  &:focus {
-    background: $color-blue-100;
-    color: $color-blue-500;
+  .menuItem {
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    background: none;
+    border: 2px transparent solid;
+    text-align: start;
+    padding: 6px calc(#{$spacing-sm} - 2px);
+    margin: 0 $spacing-xs;
+    min-height: calc(1.75 * #{$spacing-md});
+    border-radius: 4px;
+    font-family: $typography-paragraph-body-font-family;
+    font-weight: $typography-paragraph-body-font-weight;
+    font-size: $typography-paragraph-body-font-size;
+    line-height: $typography-paragraph-body-line-height;
+    letter-spacing: $typography-paragraph-body-letter-spacing;
+    text-decoration: none;
+    color: $color-purple-800;
 
-    .menuItem__Icon {
-      color: $color-blue-500;
+    &:hover {
+      text-decoration: none;
     }
 
-    &.menuItem--destructive {
-      background: $color-red-100;
-      color: $color-red-600;
+    &:not(.menuItem--disabled):hover,
+    &:focus {
+      background: $color-blue-100;
+      color: $color-blue-500;
 
       .menuItem__Icon {
+        color: $color-blue-500;
+      }
+
+      &.menuItem--destructive {
+        background: $color-red-100;
         color: $color-red-600;
+
+        .menuItem__Icon {
+          color: $color-red-600;
+        }
       }
     }
-  }
 
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &:focus-visible {
-    border-color: $color-blue-500;
+    &:focus-visible {
+      border-color: $color-blue-500;
+    }
   }
-}
 
-.menuItem--disabled {
-  color: rgba($color-purple-800-rgb, 0.3);
-
-  .menuItem__Icon {
+  .menuItem--disabled {
     color: rgba($color-purple-800-rgb, 0.3);
-  }
-}
 
-.menuItem--active {
-  color: $color-blue-500;
-  font-weight: $typography-paragraph-bold-font-weight;
-}
+    .menuItem__Icon {
+      color: rgba($color-purple-800-rgb, 0.3);
+    }
+  }
 
-.menuItem--destructive {
-  color: $color-red-600;
+  .menuItem--active {
+    color: $color-blue-500;
+    font-weight: $typography-paragraph-bold-font-weight;
+  }
 
-  .menuItem__Icon {
+  .menuItem--destructive {
     color: $color-red-600;
-  }
-}
 
-.menuItem--destructive.menuItem--disabled {
-  color: rgba($color-red-600-rgb, 0.3);
+    .menuItem__Icon {
+      color: $color-red-600;
+    }
+  }
 
-  .menuItem__Icon {
+  .menuItem--destructive.menuItem--disabled {
     color: rgba($color-red-600-rgb, 0.3);
+
+    .menuItem__Icon {
+      color: rgba($color-red-600-rgb, 0.3);
+    }
   }
-}
 
-.menuItem__Label {
-  flex-grow: 1;
-}
+  .menuItem__Label {
+    flex-grow: 1;
+  }
 
-.menuItem__Icon {
-  margin-inline-end: calc(#{$spacing-md} / 3);
-  display: flex;
-  align-self: flex-start;
-  transform: translateY(0.2em);
-  color: rgba($color-purple-800-rgb, 0.75);
+  .menuItem__Icon {
+    margin-inline-end: calc(#{$spacing-md} / 3);
+    display: flex;
+    align-self: flex-start;
+    transform: translateY(0.2em);
+    color: rgba($color-purple-800-rgb, 0.75);
+  }
+  /* stylelint-enable no-descending-specificity */
 }
-/* stylelint-enable no-descending-specificity */

package/src/TitleBlockZen/subcomponents/Toolbar.module.scss

@@ -2,43 +2,45 @@
 @import '../../../styles/utils/legacy/grid';
 @import '../mixins';
 
-.toolbar {
-  display: flex;
-  align-items: center;
+@layer kz-components {
+  .toolbar {
+    display: flex;
+    align-items: center;
 
-  .toolbarItem {
-    margin: 0 calc(#{$ca-grid} / 4);
+    .toolbarItem {
+      margin: 0 calc(#{$ca-grid} / 4);
 
-    @include title-block-under-1024 {
-      margin: 0 calc(#{$ca-grid} / 8);
-    }
+      @include title-block-under-1024 {
+        margin: 0 calc(#{$ca-grid} / 8);
+      }
 
-    &.noGap {
-      margin: 0;
+      &.noGap {
+        margin: 0;
+      }
     }
-  }
 
-  .toolbarItem:first-of-type {
-    @include ca-margin($start: 0, $end: calc(#{$ca-grid} / 4));
+    .toolbarItem:first-of-type {
+      @include ca-margin($start: 0, $end: calc(#{$ca-grid} / 4));
 
-    @include title-block-under-1024 {
-      @include ca-margin($start: 0, $end: calc(#{$ca-grid} / 8));
-    }
+      @include title-block-under-1024 {
+        @include ca-margin($start: 0, $end: calc(#{$ca-grid} / 8));
+      }
 
-    &.noGap {
-      margin: 0;
+      &.noGap {
+        margin: 0;
+      }
     }
-  }
 
-  .toolbarItem:last-of-type {
-    @include ca-margin($start: calc(#{$ca-grid} / 4), $end: 0);
+    .toolbarItem:last-of-type {
+      @include ca-margin($start: calc(#{$ca-grid} / 4), $end: 0);
 
-    @include title-block-under-1024 {
-      @include ca-margin($start: calc(#{$ca-grid} / 8), $end: 0);
-    }
+      @include title-block-under-1024 {
+        @include ca-margin($start: calc(#{$ca-grid} / 8), $end: 0);
+      }
 
-    &.noGap {
-      margin: 0;
+      &.noGap {
+        margin: 0;
+      }
     }
   }
 }

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss

@@ -4,134 +4,136 @@
 @import '~@kaizen/design-tokens/sass/animation';
 @import '../../../styles/utils/forms';
 
-$animation-timing: $animation-duration-immediate $animation-easing-function-linear;
-$focus-ring-offset: 1px;
+@layer kz-components {
+  $animation-timing: $animation-duration-immediate $animation-easing-function-linear;
+  $focus-ring-offset: 1px;
 
-.checkbox {
-  @include form-input-visually-hidden;
-}
-
-.track {
-  position: relative;
-  background-color: $color-gray-500;
-  border: $border-borderless-border-width $border-borderless-border-style
-    $border-borderless-border-color;
-  border-radius: $spacing-md;
-  box-sizing: content-box;
-  width: calc((#{$spacing-md} * 1.05) * 2);
-  height: calc(#{$spacing-md} * 1.25);
-  padding: 0 calc(#{$spacing-md} * 0.15);
-  display: flex;
-  align-items: center;
-  transition: background-color $animation-timing;
-
-  /* TODO: Fix */
-  /* stylelint-disable no-descending-specificity */
-  .checkbox:not(.disabled):focus + &,
-  .checkbox:not(.disabled):hover:focus + & {
-    border-color: transparent;
-    outline: 2px solid $color-blue-500;
-    outline-offset: $focus-ring-offset;
-    background-color: $color-gray-600;
+  .checkbox {
+    @include form-input-visually-hidden;
   }
 
-  .checkbox:not(.disabled) + &:hover,
-  label:hover .checkbox:not(.disabled) + & {
-    background-color: $color-purple-500;
-    background-color: $color-gray-600;
-  }
-
-  /* stylelint-enable no-descending-specificity */
-}
-
-.thumb {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: $color-white;
-  border: $border-borderless-border-width $border-borderless-border-style
-    $border-borderless-border-color;
-  border-radius: $spacing-md;
-  transition:
-    left $animation-timing,
-    right $animation-timing;
-  cursor: default;
-}
-
-.checkIcon {
-  color: $color-green-500;
-  opacity: 0%;
-  transition-duration: $animation-duration-rapid;
-}
+  .track {
+    position: relative;
+    background-color: $color-gray-500;
+    border: $border-borderless-border-width $border-borderless-border-style
+      $border-borderless-border-color;
+    border-radius: $spacing-md;
+    box-sizing: content-box;
+    width: calc((#{$spacing-md} * 1.05) * 2);
+    height: calc(#{$spacing-md} * 1.25);
+    padding: 0 calc(#{$spacing-md} * 0.15);
+    display: flex;
+    align-items: center;
+    transition: background-color $animation-timing;
+
+    /* TODO: Fix */
+    /* stylelint-disable no-descending-specificity */
+    .checkbox:not(.disabled):focus + &,
+    .checkbox:not(.disabled):hover:focus + & {
+      border-color: transparent;
+      outline: 2px solid $color-blue-500;
+      outline-offset: $focus-ring-offset;
+      background-color: $color-gray-600;
+    }
 
-/* stylelint-disable no-descending-specificity */
-.on {
-  .checkbox + .track {
-    border-color: $border-borderless-border-color;
-    background-color: $color-green-500;
-  }
+    .checkbox:not(.disabled) + &:hover,
+    label:hover .checkbox:not(.disabled) + & {
+      background-color: $color-purple-500;
+      background-color: $color-gray-600;
+    }
 
-  .checkbox:focus + .track {
-    border-color: transparent;
-    background-color: $color-green-600;
+    /* stylelint-enable no-descending-specificity */
   }
 
   .thumb {
-    position: relative;
-    right: auto;
-    inset-inline-start: calc(#{$spacing-md} * 1.1);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: $color-white;
+    border: $border-borderless-border-width $border-borderless-border-style
+      $border-borderless-border-color;
+    border-radius: $spacing-md;
+    transition:
+      left $animation-timing,
+      right $animation-timing;
+    cursor: default;
   }
 
   .checkIcon {
-    opacity: 100%;
-    transition-delay: $animation-duration-immediate;
-    transition-duration: $animation-duration-fast;
+    color: $color-green-500;
+    opacity: 0%;
+    transition-duration: $animation-duration-rapid;
   }
 
-  .checkbox:not(.disabled) + .track:hover,
-  label:hover & .checkbox:not(.disabled) + .track {
-    background-color: $color-green-600;
-  }
-}
+  /* stylelint-disable no-descending-specificity */
+  .on {
+    .checkbox + .track {
+      border-color: $border-borderless-border-color;
+      background-color: $color-green-500;
+    }
 
-.off {
-  .thumb {
-    position: relative;
-    right: auto;
-    inset-inline-start: calc(#{$spacing-md} * -0.05);
-  }
-}
+    .checkbox:focus + .track {
+      border-color: transparent;
+      background-color: $color-green-600;
+    }
+
+    .thumb {
+      position: relative;
+      right: auto;
+      inset-inline-start: calc(#{$spacing-md} * 1.1);
+    }
+
+    .checkIcon {
+      opacity: 100%;
+      transition-delay: $animation-duration-immediate;
+      transition-duration: $animation-duration-fast;
+    }
 
-.reversed {
-  .checkbox:focus + .track,
-  .checkbox:hover:focus + .track {
-    outline-color: $color-blue-300;
+    .checkbox:not(.disabled) + .track:hover,
+    label:hover & .checkbox:not(.disabled) + .track {
+      background-color: $color-green-600;
+    }
   }
 
-  &.off {
-    .track {
-      background-color: rgba($color-white-rgb, 0.2);
+  .off {
+    .thumb {
+      position: relative;
+      right: auto;
+      inset-inline-start: calc(#{$spacing-md} * -0.05);
     }
+  }
 
+  .reversed {
     .checkbox:focus + .track,
     .checkbox:hover:focus + .track {
-      background-color: rgba($color-white-rgb, 0.65);
+      outline-color: $color-blue-300;
     }
 
-    .checkbox:not(.disabled) + .track:hover,
-    label:hover & .checkbox:not(.disabled) + .track {
-      background-color: rgba($color-white-rgb, 0.65);
+    &.off {
+      .track {
+        background-color: rgba($color-white-rgb, 0.2);
+      }
+
+      .checkbox:focus + .track,
+      .checkbox:hover:focus + .track {
+        background-color: rgba($color-white-rgb, 0.65);
+      }
+
+      .checkbox:not(.disabled) + .track:hover,
+      label:hover & .checkbox:not(.disabled) + .track {
+        background-color: rgba($color-white-rgb, 0.65);
+      }
     }
   }
-}
 
-// When the ToggleSwitch is used as part of the ToggleSwitchField, the disabled state opacity is set on the Label component
-label .disabled.track {
-  opacity: 100%;
-}
+  // When the ToggleSwitch is used as part of the ToggleSwitchField, the disabled state opacity is set on the Label component
+  label .disabled.track {
+    opacity: 100%;
+  }
 
-.disabled.track {
-  opacity: 30%;
-}
+  .disabled.track {
+    opacity: 30%;
+  }
 
-/* stylelint-enable no-descending-specificity */
+  /* stylelint-enable no-descending-specificity */
+}

package/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.module.scss

@@ -1,15 +1,17 @@
 @import '~@kaizen/design-tokens/sass/typography';
 
-.container {
-  display: flex;
-}
+@layer kz-components {
+  .container {
+    display: flex;
+  }
 
-.fullWidth {
-  .inner {
-    width: 100%;
+  .fullWidth {
+    .inner {
+      width: 100%;
+    }
   }
-}
 
-.on label {
-  font-weight: $typography-paragraph-bold-font-weight;
+  .on label {
+    font-weight: $typography-paragraph-bold-font-weight;
+  }
 }