@kaizen/components 1.78.0 → 1.79.0

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

@@ -3,106 +3,108 @@
 @import '../../../styles/utils/forms';
 @import '../../../styles/utils/form-variables';
 
-$checkbox-size: 24px;
-$focus-ring-offset: 2px;
+@layer kz-components {
+  $checkbox-size: 24px;
+  $focus-ring-offset: 2px;
 
-$dt-color-checkbox-background-color-checked: $color-gray-500;
+  $dt-color-checkbox-background-color-checked: $color-gray-500;
 
-// override bootstrap styles
-.checkbox.checkbox {
-  width: $checkbox-size;
-  height: $checkbox-size;
-  margin: 0;
+  // override bootstrap styles
+  .checkbox.checkbox {
+    width: $checkbox-size;
+    height: $checkbox-size;
+    margin: 0;
 
-  @include form-input-visually-hidden;
-}
-
-.checkbox:disabled {
-  pointer-events: none;
-}
-
-.icon {
-  position: absolute;
-  color: $color-white;
-}
-
-.icon.reversed {
-  color: $dt-color-form-color-icon-reversed;
-}
-
-.box {
-  display: block;
-  position: relative;
-  pointer-events: none;
-  background: $color-white;
-  height: $checkbox-size;
-  width: $checkbox-size;
-  top: 0;
-  border: $border-solid-border-width $border-solid-border-style $dt-color-form-border-color;
-  border-radius: $border-solid-border-radius;
-  box-sizing: border-box;
-  background-color: white;
-  border-color: $dt-color-form-border-color;
-
-  .checkbox:hover + & {
-    border-color: $dt-color-form-border-color-hover;
+    @include form-input-visually-hidden;
   }
 
-  .checkbox:checked + &,
-  .checkbox:indeterminate + & {
-    background: $dt-color-checkbox-background-color-checked;
-    background-color: $dt-color-form-border-color;
+  .checkbox:disabled {
+    pointer-events: none;
   }
 
-  .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;
+  .icon {
+    position: absolute;
+    color: $color-white;
   }
 
-  .checkbox:checked:focus + &,
-  .checkbox:indeterminate:focus + & {
-    background: $dt-color-form-border-color-hover;
-    border-color: $dt-color-form-border-color-hover;
+  .icon.reversed {
+    color: $dt-color-form-color-icon-reversed;
   }
 
-  .checkbox:checked:hover + &,
-  .checkbox:indeterminate:hover + & {
-    background: $dt-color-form-border-color-hover;
-    border-color: $dt-color-form-border-color-hover;
-  }
-}
-
-.box.reversed {
-  border: $border-solid-border-width $border-solid-border-style rgba($color-white-rgb, 0.65);
-  background: transparent;
-
-  .checkbox:checked + &,
-  .checkbox:indeterminate + & {
-    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;
-    background: rgba($color-white-rgb, 0.1);
-  }
-
-  .checkbox:checked:focus + &,
-  .checkbox:indeterminate:focus + & {
+  .box {
+    display: block;
+    position: relative;
+    pointer-events: none;
     background: $color-white;
-    border-color: $color-white;
+    height: $checkbox-size;
+    width: $checkbox-size;
+    top: 0;
+    border: $border-solid-border-width $border-solid-border-style $dt-color-form-border-color;
+    border-radius: $border-solid-border-radius;
+    box-sizing: border-box;
+    background-color: white;
+    border-color: $dt-color-form-border-color;
+
+    .checkbox:hover + & {
+      border-color: $dt-color-form-border-color-hover;
+    }
+
+    .checkbox:checked + &,
+    .checkbox:indeterminate + & {
+      background: $dt-color-checkbox-background-color-checked;
+      background-color: $dt-color-form-border-color;
+    }
+
+    .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 + &,
+    .checkbox:indeterminate:focus + & {
+      background: $dt-color-form-border-color-hover;
+      border-color: $dt-color-form-border-color-hover;
+    }
+
+    .checkbox:checked:hover + &,
+    .checkbox:indeterminate:hover + & {
+      background: $dt-color-form-border-color-hover;
+      border-color: $dt-color-form-border-color-hover;
+    }
   }
 
-  .checkbox:indeterminate:hover + &,
-  .checkbox:checked:hover + & {
-    background: $color-white;
-    border-color: $color-white;
+  .box.reversed {
+    border: $border-solid-border-width $border-solid-border-style rgba($color-white-rgb, 0.65);
+    background: transparent;
+
+    .checkbox:checked + &,
+    .checkbox:indeterminate + & {
+      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;
+      background: rgba($color-white-rgb, 0.1);
+    }
+
+    .checkbox:checked:focus + &,
+    .checkbox:indeterminate:focus + & {
+      background: $color-white;
+      border-color: $color-white;
+    }
+
+    .checkbox:indeterminate:hover + &,
+    .checkbox:checked:hover + & {
+      background: $color-white;
+      border-color: $color-white;
+    }
   }
 }

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

@@ -3,44 +3,46 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '../../../styles/utils/form-variables';
 
-.container {
-  position: relative;
-  margin-bottom: $spacing-xs;
+@layer kz-components {
+  .container {
+    position: relative;
+    margin-bottom: $spacing-xs;
 
-  label {
-    // This is to override bootstrap styles. Remove when appropriate
-    padding-top: 0;
-    -webkit-tap-highlight-color: transparent;
-  }
+    label {
+      // This is to override bootstrap styles. Remove when appropriate
+      padding-top: 0;
+      -webkit-tap-highlight-color: transparent;
+    }
 
-  &.noBottomMargin {
-    margin-bottom: 0;
-  }
+    &.noBottomMargin {
+      margin-bottom: 0;
+    }
 
-  @media (hover: hover) and (pointer: fine) {
-    label:hover {
-      input:not([disabled]) + div {
-        border-color: $dt-color-form-border-color;
-        background-color: $color-gray-100;
+    @media (hover: hover) and (pointer: fine) {
+      label:hover {
+        input:not([disabled]) + div {
+          border-color: $dt-color-form-border-color;
+          background-color: $color-gray-100;
+        }
       }
     }
-  }
 
-  &.checked,
-  &.mixed {
-    label {
-      font-family: $typography-paragraph-body-font-family;
-      font-size: $typography-paragraph-body-font-size;
-      line-height: $typography-paragraph-body-line-height;
-      letter-spacing: $typography-paragraph-body-letter-spacing;
-      font-weight: $typography-paragraph-bold-font-weight;
-      position: static;
+    &.checked,
+    &.mixed {
+      label {
+        font-family: $typography-paragraph-body-font-family;
+        font-size: $typography-paragraph-body-font-size;
+        line-height: $typography-paragraph-body-line-height;
+        letter-spacing: $typography-paragraph-body-letter-spacing;
+        font-weight: $typography-paragraph-bold-font-weight;
+        position: static;
+      }
     }
   }
-}
 
-.label {
-  &:disabled {
-    pointer-events: none;
+  .label {
+    &:disabled {
+      pointer-events: none;
+    }
   }
 }

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

@@ -1,15 +1,17 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.checkboxGroupLabel {
-  margin-bottom: $spacing-sm;
-}
+@layer kz-components {
+  .checkboxGroupLabel {
+    margin-bottom: $spacing-sm;
+  }
 
-.checkboxGroupContainer {
-  display: flex;
-  flex-direction: column;
-  margin-bottom: $spacing-sm;
+  .checkboxGroupContainer {
+    display: flex;
+    flex-direction: column;
+    margin-bottom: $spacing-sm;
 
-  &.noBottomMargin {
-    margin-bottom: 0;
+    &.noBottomMargin {
+      margin-bottom: 0;
+    }
   }
 }

package/src/ClearButton/ClearButton.module.scss

@@ -2,42 +2,44 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '../../styles/utils/button-reset';
 
-.clearButton {
-  @include button-reset;
-
-  position: relative;
-  display: inline-flex;
-  border-radius: 100%;
-
-  &:hover {
-    cursor: pointer;
+@layer kz-components {
+  .clearButton {
+    @include button-reset;
+
+    position: relative;
+    display: inline-flex;
+    border-radius: 100%;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &:focus-visible {
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-500);
+      outline-offset: -1px;
+    }
   }
 
-  &:focus-visible {
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-500);
-    outline-offset: -1px;
-  }
-}
+  .default {
+    color: $color-gray-500;
 
-.default {
-  color: $color-gray-500;
-
-  &:hover,
-  &:focus-visible {
-    color: $color-purple-800;
+    &:hover,
+    &:focus-visible {
+      color: $color-purple-800;
+    }
   }
-}
 
-.reversed {
-  color: rgba($color-white-rgb, 0.8);
+  .reversed {
+    color: rgba($color-white-rgb, 0.8);
 
-  &:hover,
-  &:focus-visible {
-    color: $color-white;
-  }
+    &:hover,
+    &:focus-visible {
+      color: $color-white;
+    }
 
-  &:focus-visible {
-    outline-color: var(--color-blue-300);
+    &:focus-visible {
+      outline-color: var(--color-blue-300);
+    }
   }
 }

package/src/Collapsible/Collapsible/Collapsible.module.scss

@@ -4,107 +4,109 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/animation';
 
-$heading-active-color: $color-gray-200;
-$divider-color: rgba($color-gray-600-rgb, 0.2);
-$container-border-width: var(--border-width-1);
-
-// We need a full border radius on this container element, then have classes
-// beneath to toggle nested borders off and on for different use cases.
-.container {
-  background-color: $color-white;
-  box-shadow: $shadow-small-box-shadow;
-  border: $container-border-width var(--border-solid-border-style) var(--color-gray-500);
-  border-radius: $border-borderless-border-radius;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  text-align: start;
-  background-color: $color-white;
-  border: none;
-  border-radius: var(--border-borderless-border-radius);
-  transition: background-color $animation-duration-rapid;
-  padding-block: calc(var(--spacing-12) - #{$container-border-width});
-  padding-inline: var(--spacing-24) var(--spacing-12);
-
-  &:hover {
-    background-color: $heading-active-color;
+@layer kz-components {
+  $heading-active-color: $color-gray-200;
+  $divider-color: rgba($color-gray-600-rgb, 0.2);
+  $container-border-width: var(--border-width-1);
+
+  // We need a full border radius on this container element, then have classes
+  // beneath to toggle nested borders off and on for different use cases.
+  .container {
+    background-color: $color-white;
+    box-shadow: $shadow-small-box-shadow;
+    border: $container-border-width var(--border-solid-border-style) var(--color-gray-500);
+    border-radius: $border-borderless-border-radius;
   }
 
-  // Round the bottom corners of the header so when the container is open, the
-  // header background is not rounded on the corners and flush with the content beneath.
-  &.open {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+  .header {
+    display: flex;
+    align-items: center;
+    text-align: start;
+    background-color: $color-white;
+    border: none;
+    border-radius: var(--border-borderless-border-radius);
+    transition: background-color $animation-duration-rapid;
+    padding-block: calc(var(--spacing-12) - #{$container-border-width});
+    padding-inline: var(--spacing-24) var(--spacing-12);
+
+    &:hover {
+      background-color: $heading-active-color;
+    }
+
+    // Round the bottom corners of the header so when the container is open, the
+    // header background is not rounded on the corners and flush with the content beneath.
+    &.open {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
   }
-}
 
-.separated {
-  & + .separated {
-    margin-top: calc(#{$spacing-md} * 0.3);
-    margin-right: 0;
-    margin-left: 0;
+  .separated {
+    & + .separated {
+      margin-top: calc(#{$spacing-md} * 0.3);
+      margin-right: 0;
+      margin-left: 0;
+    }
   }
-}
 
-// When a collapsible group is rendered, we need the first group to have a rounded
-// on top and the last group to have a rounded bottom edge. Then when the last group
-// is open we remove the rounded edge as the content sits beneath and needs to be straight.
-.groupItem {
-  & + .groupItem {
-    border-top: 1px $border-solid-border-style $divider-color;
+  // When a collapsible group is rendered, we need the first group to have a rounded
+  // on top and the last group to have a rounded bottom edge. Then when the last group
+  // is open we remove the rounded edge as the content sits beneath and needs to be straight.
+  .groupItem {
+    & + .groupItem {
+      border-top: 1px $border-solid-border-style $divider-color;
+    }
+
+    .header {
+      border-radius: 0;
+      padding-block: var(--spacing-12);
+    }
+
+    &:first-of-type > .header {
+      border-top-left-radius: $border-borderless-border-radius;
+      border-top-right-radius: $border-borderless-border-radius;
+      padding-block-start: calc(var(--spacing-12) - #{$container-border-width});
+    }
+
+    &:last-of-type > .header:not(.open) {
+      border-bottom-left-radius: $border-borderless-border-radius;
+      border-bottom-right-radius: $border-borderless-border-radius;
+      padding-block-end: calc(var(--spacing-12) - #{$container-border-width});
+    }
   }
 
-  .header {
-    border-radius: 0;
-    padding-block: var(--spacing-12);
+  .chevronButton:hover {
+    // hack to get rid of the IconButton hover styling because it clashes with the hover styling on the Collapsible header
+    background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
   }
 
-  &:first-of-type > .header {
-    border-top-left-radius: $border-borderless-border-radius;
-    border-top-right-radius: $border-borderless-border-radius;
-    padding-block-start: calc(var(--spacing-12) - #{$container-border-width});
+  .title {
+    flex: 1 1 auto;
   }
 
-  &:last-of-type > .header:not(.open) {
-    border-bottom-left-radius: $border-borderless-border-radius;
-    border-bottom-right-radius: $border-borderless-border-radius;
-    padding-block-end: calc(var(--spacing-12) - #{$container-border-width});
+  .defaultVariant {
+    background-color: $heading-active-color;
   }
-}
-
-.chevronButton:hover {
-  // hack to get rid of the IconButton hover styling because it clashes with the hover styling on the Collapsible header
-  background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
-}
-
-.title {
-  flex: 1 1 auto;
-}
-
-.defaultVariant {
-  background-color: $heading-active-color;
-}
 
-.clearVariant {
-  border-bottom: 1px $border-solid-border-style $divider-color;
-}
+  .clearVariant {
+    border-bottom: 1px $border-solid-border-style $divider-color;
+  }
 
-.sticky {
-  position: -webkit-sticky; /* stylelint-disable-line value-no-vendor-prefix */
-  position: sticky;
-  z-index: 10;
-}
+  .sticky {
+    position: -webkit-sticky; /* stylelint-disable-line value-no-vendor-prefix */
+    position: sticky;
+    z-index: 10;
+  }
 
-.section {
-  padding: var(--spacing-24);
-}
+  .section {
+    padding: var(--spacing-24);
+  }
 
-.noPadding {
-  padding: 0;
-}
+  .noPadding {
+    padding: 0;
+  }
 
-.hide {
-  display: none;
+  .hide {
+    display: none;
+  }
 }

package/src/Collapsible/CollapsibleGroup/CollapsibleGroup.module.scss

@@ -1,11 +1,13 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/shadow';
 
-// We need a full border radius on this container element, then have classes
-// beneath to toggle nested borders off and on for different use cases.
-.container {
-  background-color: white;
-  box-shadow: $shadow-small-box-shadow;
-  border: var(--border-width-1) var(--border-solid-border-style) var(--color-gray-500);
-  border-radius: $border-borderless-border-radius;
+@layer kz-components {
+  // We need a full border radius on this container element, then have classes
+  // beneath to toggle nested borders off and on for different use cases.
+  .container {
+    background-color: white;
+    box-shadow: $shadow-small-box-shadow;
+    border: var(--border-width-1) var(--border-solid-border-style) var(--color-gray-500);
+    border-radius: $border-borderless-border-radius;
+  }
 }

package/src/Collapsible/ExpertAdviceCollapsible/ExpertAdviceCollapsible.module.scss

@@ -2,46 +2,48 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.expertAdviceContainer {
-  background-color: $color-purple-100;
-  border: var(--border-width-1) var(--border-solid-border-style) var(--color-purple-400);
-  box-shadow: none;
-  color: $color-purple-800;
-
-  &:hover {
-    border-color: $color-purple-500;
+@layer kz-components {
+  .expertAdviceContainer {
+    background-color: $color-purple-100;
+    border: var(--border-width-1) var(--border-solid-border-style) var(--color-purple-400);
+    box-shadow: none;
+    color: $color-purple-800;
+
+    &:hover {
+      border-color: $color-purple-500;
+    }
   }
-}
 
-// Override Collapsible header
-.expertAdviceContainer > div {
-  &:first-of-type {
-    background-color: $color-purple-100;
-    border-radius: $border-borderless-border-radius;
+  // Override Collapsible header
+  .expertAdviceContainer > div {
+    &:first-of-type {
+      background-color: $color-purple-100;
+      border-radius: $border-borderless-border-radius;
+    }
   }
-}
 
-.expertAdviceHeader {
-  background-color: $color-purple-100;
-  flex: 1 1 auto;
-  align-items: center;
-  display: flex;
-}
+  .expertAdviceHeader {
+    background-color: $color-purple-100;
+    flex: 1 1 auto;
+    align-items: center;
+    display: flex;
+  }
 
-.expertAdviceHeading {
-  color: $color-purple-600;
+  .expertAdviceHeading {
+    color: $color-purple-600;
 
-  .expertAdviceContainer:hover & {
-    color: $color-purple-700;
+    .expertAdviceContainer:hover & {
+      color: $color-purple-700;
+    }
   }
-}
 
-.expertAdviceIcon {
-  margin-inline-end: $spacing-sm;
-  width: 1.75rem;
-  height: 1.75rem;
-}
+  .expertAdviceIcon {
+    margin-inline-end: $spacing-sm;
+    width: 1.75rem;
+    height: 1.75rem;
+  }
 
-.expertAdviceSection {
-  padding: 0 $spacing-md $spacing-md;
+  .expertAdviceSection {
+    padding: 0 $spacing-md $spacing-md;
+  }
 }