@kaizen/components 1.78.1 → 1.79.0

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;
+  }
 }

package/src/Container/Container.module.scss

@@ -1,13 +1,15 @@
-.container {
-  display: flex;
-  width: 100%;
-  justify-content: center;
+@layer kz-components {
+  .container {
+    display: flex;
+    width: 100%;
+    justify-content: center;
 
-  * {
-    &,
-    &::after,
-    &::before {
-      box-sizing: border-box;
+    * {
+      &,
+      &::after,
+      &::before {
+        box-sizing: border-box;
+      }
     }
   }
 }

package/src/Content/Content.module.scss

@@ -1,15 +1,17 @@
 @import '~@kaizen/design-tokens/sass/layout';
 @import './variables';
 
-.content {
-  max-width: $layout-content-max-width;
-  margin: 0 $layout-content-side-margin;
-  width: 100%;
+@layer kz-components {
+  .content {
+    max-width: $layout-content-max-width;
+    margin: 0 $layout-content-side-margin;
+    width: 100%;
 
-  // Setting a min-width: 0 will maintain the gutter margins when the inner contents has something wider than the page (e.g. scrollable table)
-  min-width: 0;
+    // Setting a min-width: 0 will maintain the gutter margins when the inner contents has something wider than the page (e.g. scrollable table)
+    min-width: 0;
 
-  @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
-    margin: 0 $content-margin-width-on-medium-and-small;
+    @media (max-width: calc(#{$layout-breakpoints-large} - 1px)) {
+      margin: 0 $content-margin-width-on-medium-and-small;
+    }
   }
 }

package/src/DateInput/DateInput/DateInput.module.scss

@@ -1,9 +1,11 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.dateInput {
-  width: 100%;
-}
+@layer kz-components {
+  .dateInput {
+    width: 100%;
+  }
 
-.input {
-  margin-top: $spacing-6;
+  .input {
+    margin-top: $spacing-6;
+  }
 }

package/src/DateInput/DateInputDescription/DateInputDescription.module.scss

@@ -1,19 +1,21 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.dateInputDescription {
-  display: inline;
-}
+@layer kz-components {
+  .dateInputDescription {
+    display: inline;
+  }
 
-.dateInputFormatContainer {
-  margin-inline-start: $spacing-xs;
-  white-space: nowrap;
-}
+  .dateInputFormatContainer {
+    margin-inline-start: $spacing-xs;
+    white-space: nowrap;
+  }
 
-.descriptionInputFormat {
-  display: inline-flex;
-  white-space: nowrap;
-}
+  .descriptionInputFormat {
+    display: inline-flex;
+    white-space: nowrap;
+  }
 
-.labelSeparator {
-  margin-inline-end: $spacing-xs;
+  .labelSeparator {
+    margin-inline-end: $spacing-xs;
+  }
 }

package/src/DateInput/DateInputWithIconButton/DateInputWithIconButton.module.scss

@@ -4,39 +4,41 @@
 @import '../../../styles/utils/animation';
 @import '../../../styles/utils/button-reset';
 
-$input-disabled-opacity: 0.3;
-
-.iconButton {
-  @include button-reset;
-
-  display: flex;
-  padding: var(--spacing-6);
-  border: $border-solid-border-width $border-solid-border-style transparent;
-  border-radius: $border-solid-border-radius;
-  position: relative;
-  inset-inline-end: -0.35rem;
-  top: -40%;
-
-  :focus {
-    outline: none;
+@layer kz-components {
+  $input-disabled-opacity: 0.3;
+
+  .iconButton {
+    @include button-reset;
+
+    display: flex;
+    padding: var(--spacing-6);
+    border: $border-solid-border-width $border-solid-border-style transparent;
+    border-radius: $border-solid-border-radius;
+    position: relative;
+    inset-inline-end: -0.35rem;
+    top: -40%;
+
+    :focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline-offset: -2px;
+      outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
+    }
+
+    &:hover:not([disabled]) {
+      background-color: $color-blue-100;
+      color: $color-blue-500;
+    }
   }
 
-  &:focus-visible {
-    outline-offset: -2px;
-    outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
-  }
-
-  &:hover:not([disabled]) {
-    background-color: $color-blue-100;
+  .calendarActive {
     color: $color-blue-500;
+    background-color: $color-blue-100;
   }
-}
 
-.calendarActive {
-  color: $color-blue-500;
-  background-color: $color-blue-100;
-}
-
-.disabled {
-  opacity: $input-disabled-opacity;
+  .disabled {
+    opacity: $input-disabled-opacity;
+  }
 }

package/src/DatePicker/DatePicker.module.scss

@@ -1,9 +1,11 @@
 @import '~@kaizen/design-tokens/sass/color';
 
-.datePicker {
-  color: $color-purple-800;
-}
+@layer kz-components {
+  .datePicker {
+    color: $color-purple-800;
+  }
 
-.isReversed {
-  color: $color-yellow-600;
+  .isReversed {
+    color: $color-yellow-600;
+  }
 }

package/src/DatePicker/subcomponents/DateInputField/DateInputField.module.scss

@@ -1,5 +1,7 @@
-$input-disabled-opacity: 0.3;
+@layer kz-components {
+  $input-disabled-opacity: 0.3;
 
-.disabled {
-  opacity: $input-disabled-opacity;
+  .disabled {
+    opacity: $input-disabled-opacity;
+  }
 }