@kaizen/components 1.78.1 → 1.79.0

package/src/DateRangePicker/DateRangePicker.module.scss

@@ -4,95 +4,97 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '../../styles/utils/button-reset';
 
-// Vars
-$button-height: 48px;
-$button-base-padding-horizontal: $spacing-sm;
-$button-icon-size: 1.25rem; // 20px
+@layer kz-components {
+  // Vars
+  $button-height: 48px;
+  $button-base-padding-horizontal: $spacing-sm;
+  $button-icon-size: 1.25rem; // 20px
 
-$disabled-opacity: 0.5;
-$placeholder-opacity: 0.7;
+  $disabled-opacity: 0.5;
+  $placeholder-opacity: 0.7;
 
-.button {
-  @include button-reset;
-
-  position: relative;
-  display: flex;
-  align-items: center;
-  height: $button-height;
-  width: 100%;
-  color: $color-purple-800;
-  font-family: $typography-paragraph-body-font-family;
-  font-size: $typography-paragraph-body-font-size;
-  font-weight: $typography-paragraph-body-font-weight;
-  line-height: 1.5;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  text-align: start;
-  background-color: $color-white;
-  background-clip: padding-box;
-  border: $border-solid-border-width $border-solid-border-style $color-gray-500;
-  border-radius: $border-solid-border-radius;
-  margin-top: $spacing-6;
-  padding: 0 $button-base-padding-horizontal;
+  .button {
+    @include button-reset;
 
-  &:focus-visible:not([disabled]),
-  &:hover:not([disabled]) {
-    background-color: $color-gray-200;
-    border-color: $color-gray-600;
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: $button-height;
+    width: 100%;
     color: $color-purple-800;
-  }
+    font-family: $typography-paragraph-body-font-family;
+    font-size: $typography-paragraph-body-font-size;
+    font-weight: $typography-paragraph-body-font-weight;
+    line-height: 1.5;
+    letter-spacing: $typography-paragraph-body-letter-spacing;
+    text-align: start;
+    background-color: $color-white;
+    background-clip: padding-box;
+    border: $border-solid-border-width $border-solid-border-style $color-gray-500;
+    border-radius: $border-solid-border-radius;
+    margin-top: $spacing-6;
+    padding: 0 $button-base-padding-horizontal;
 
-  &:focus-visible:not([disabled]) {
-    outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
-    outline-offset: 1px;
-  }
-
-  :focus:not([disabled]) {
-    outline: none;
-  }
+    &:focus-visible:not([disabled]),
+    &:hover:not([disabled]) {
+      background-color: $color-gray-200;
+      border-color: $color-gray-600;
+      color: $color-purple-800;
+    }
 
-  &.disabled {
-    background: $color-white;
-    opacity: $disabled-opacity;
-    color: rgba($color-purple-800-rgb, $placeholder-opacity);
-    border-color: rgba($color-gray-500-rgb, 0.7);
-  }
+    &:focus-visible:not([disabled]) {
+      outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
+      outline-offset: 1px;
+    }
 
-  .value {
-    padding-inline: 1.75rem $button-base-padding-horizontal;
-  }
-}
+    :focus:not([disabled]) {
+      outline: none;
+    }
 
-.startIconAdornment {
-  margin-top: -1px;
-}
+    &.disabled {
+      background: $color-white;
+      opacity: $disabled-opacity;
+      color: rgba($color-purple-800-rgb, $placeholder-opacity);
+      border-color: rgba($color-gray-500-rgb, 0.7);
+    }
 
-// Icon adornment styles
-@mixin vertically-center-icon {
-  position: absolute;
-  height: $button-icon-size;
-  top: 50%;
-  transform: translateY(-50%);
-}
+    .value {
+      padding-inline: 1.75rem $button-base-padding-horizontal;
+    }
+  }
 
-/* stylelint-disable no-descending-specificity */
-.withStartIconAdornment {
   .startIconAdornment {
-    @include vertically-center-icon;
+    margin-top: -1px;
+  }
 
-    color: $color-purple-800;
-    opacity: $disabled-opacity;
-    inset-inline: $spacing-sm auto;
+  // Icon adornment styles
+  @mixin vertically-center-icon {
+    position: absolute;
+    height: $button-icon-size;
+    top: 50%;
+    transform: translateY(-50%);
   }
 
-  &:focus-within:not(.disabled),
-  &:hover:not(.disabled) {
+  /* stylelint-disable no-descending-specificity */
+  .withStartIconAdornment {
     .startIconAdornment {
-      opacity: $placeholder-opacity;
+      @include vertically-center-icon;
+
+      color: $color-purple-800;
+      opacity: $disabled-opacity;
+      inset-inline: $spacing-sm auto;
     }
-  }
 
-  .button {
-    padding-inline: calc(#{$spacing-md} + #{$button-icon-size}) $button-base-padding-horizontal;
+    &:focus-within:not(.disabled),
+    &:hover:not(.disabled) {
+      .startIconAdornment {
+        opacity: $placeholder-opacity;
+      }
+    }
+
+    .button {
+      padding-inline: calc(#{$spacing-md} + #{$button-icon-size}) $button-base-padding-horizontal;
+    }
   }
+  /* stylelint-enable no-descending-specificity */
 }
-/* stylelint-enable no-descending-specificity */

package/src/Divider/Divider.module.scss

@@ -1,37 +1,39 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/color';
 
-// Use different tokens with different opacities across the Zen and Heart themes, by assuming that when Zen is applied there won't be any CSS variables declared.
-
-$dt-content-border-color: rgba($color-gray-600-rgb, 0.1);
-
-.wrapper {
-  width: 100%;
-  border: 0;
-  margin: 0;
-  border-radius: $border-solid-border-radius;
-  // This is here to protect against a global style in a consumer.
-  // https://github.com/cultureamp/murmur/blob/master/app/assets/stylesheets/legacy/modules/_body.scss
-  visibility: visible;
-}
-
-.content {
-  border-top: 1px solid;
-  border-color: $dt-content-border-color;
-}
-
-.canvas {
-  border-top: 1px solid;
-  border-bottom: 1px solid;
-  border-color: rgba($color-gray-600-rgb, 0.1);
-}
-
-.reversed {
-  border-color: rgba($color-white-rgb, 0.1);
-}
-
-.menuSeparator {
-  @extend .content; /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
-
-  margin: 5px 0;
+@layer kz-components {
+  // Use different tokens with different opacities across the Zen and Heart themes, by assuming that when Zen is applied there won't be any CSS variables declared.
+
+  $dt-content-border-color: rgba($color-gray-600-rgb, 0.1);
+
+  .wrapper {
+    width: 100%;
+    border: 0;
+    margin: 0;
+    border-radius: $border-solid-border-radius;
+    // This is here to protect against a global style in a consumer.
+    // https://github.com/cultureamp/murmur/blob/master/app/assets/stylesheets/legacy/modules/_body.scss
+    visibility: visible;
+  }
+
+  .content {
+    border-top: 1px solid;
+    border-color: $dt-content-border-color;
+  }
+
+  .canvas {
+    border-top: 1px solid;
+    border-bottom: 1px solid;
+    border-color: rgba($color-gray-600-rgb, 0.1);
+  }
+
+  .reversed {
+    border-color: rgba($color-white-rgb, 0.1);
+  }
+
+  .menuSeparator {
+    @extend .content; /* stylelint-disable-line scss/at-extend-no-missing-placeholder */
+
+    margin: 5px 0;
+  }
 }

package/src/EmptyState/EmptyState.module.css

@@ -1,114 +1,116 @@
-.container {
-  --empty-state-border-width: var(--border-width-1);
-  --empty-state-illustration-max-height: 366px;
-  --empty-state-illustration-max-width: 420px;
-  --empty-state-text-container-max-width: 426px;
-
-  container-type: inline-size;
-  width: 100%;
-  border: var(--empty-state-border-width) solid var(--empty-state-border-color);
-  border-radius: var(--border-solid-border-radius);
-  background-color: var(--empty-state-background-color);
-  color: var(--color-purple-800);
-}
-
-.straightCorners {
-  border-radius: 0;
-}
-
-/** @deprecated */
-.positive {
-  --empty-state-border-color: var(--color-green-500);
-  --empty-state-background-color: var(--color-green-100);
-}
-
-.negative,
-.action {
-  --empty-state-border-color: var(--color-red-500);
-  --empty-state-background-color: var(--color-red-100);
-}
-
-.neutral {
-  --empty-state-border-color: var(--color-purple-400);
-  --empty-state-background-color: var(--color-purple-100);
-}
-
-/** end @deprecated */
-.success {
-  --empty-state-border-color: var(--color-green-500);
-  --empty-state-background-color: var(--color-green-100);
-}
+@layer kz-components {
+  .container {
+    --empty-state-border-width: var(--border-width-1);
+    --empty-state-illustration-max-height: 366px;
+    --empty-state-illustration-max-width: 420px;
+    --empty-state-text-container-max-width: 426px;
+
+    container-type: inline-size;
+    width: 100%;
+    border: var(--empty-state-border-width) solid var(--empty-state-border-color);
+    border-radius: var(--border-solid-border-radius);
+    background-color: var(--empty-state-background-color);
+    color: var(--color-purple-800);
+  }
 
-.warning {
-  --empty-state-border-color: var(--color-red-500);
-  --empty-state-background-color: var(--color-red-100);
-}
+  .straightCorners {
+    border-radius: 0;
+  }
 
-.informative {
-  --empty-state-border-color: var(--color-blue-400);
-  --empty-state-background-color: var(--color-blue-100);
-}
+  /** @deprecated */
+  .positive {
+    --empty-state-border-color: var(--color-green-500);
+    --empty-state-background-color: var(--color-green-100);
+  }
 
-.expert-advice {
-  --empty-state-border-color: var(--color-purple-400);
-  --empty-state-background-color: var(--color-purple-100);
-}
+  .negative,
+  .action {
+    --empty-state-border-color: var(--color-red-500);
+    --empty-state-background-color: var(--color-red-100);
+  }
 
-.content {
-  justify-content: center;
-  display: grid;
-  grid-template-columns: minmax(auto, var(--empty-state-illustration-max-width)) minmax(
-      auto,
-      var(--empty-state-text-container-max-width)
-    );
-  grid-template-rows: minmax(auto, var(--empty-state-illustration-max-height)) auto;
-  padding: var(--spacing-24);
-  grid-column-gap: var(--spacing-32);
-}
+  .neutral {
+    --empty-state-border-color: var(--color-purple-400);
+    --empty-state-background-color: var(--color-purple-100);
+  }
 
-.illustrationContainer {
-  display: flex;
-  align-items: center;
-}
+  /** end @deprecated */
+  .success {
+    --empty-state-border-color: var(--color-green-500);
+    --empty-state-background-color: var(--color-green-100);
+  }
 
-.illustration,
-.illustrationContainer video {
-  max-width: 100%;
-  max-height: var(--empty-state-illustration-max-height);
-  height: 100%;
-  width: auto;
-}
+  .warning {
+    --empty-state-border-color: var(--color-red-500);
+    --empty-state-background-color: var(--color-red-100);
+  }
 
-.textContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: var(--spacing-24);
-}
+  .informative {
+    --empty-state-border-color: var(--color-blue-400);
+    --empty-state-background-color: var(--color-blue-100);
+  }
 
-@container (width <=1024px) {
-  .content {
-    padding: var(--spacing-16);
+  .expert-advice {
+    --empty-state-border-color: var(--color-purple-400);
+    --empty-state-background-color: var(--color-purple-100);
   }
-}
 
-@container (width <=560px) {
   .content {
-    grid-template-columns: 1fr;
-    grid-template-rows: auto;
-    grid-column-gap: unset;
-    grid-row-gap: var(--spacing-24);
+    justify-content: center;
+    display: grid;
+    grid-template-columns: minmax(auto, var(--empty-state-illustration-max-width)) minmax(
+        auto,
+        var(--empty-state-text-container-max-width)
+      );
+    grid-template-rows: minmax(auto, var(--empty-state-illustration-max-height)) auto;
     padding: var(--spacing-24);
+    grid-column-gap: var(--spacing-32);
   }
 
   .illustrationContainer {
-    --empty-state-illustration-max-height: 210px;
+    display: flex;
+    align-items: center;
+  }
 
+  .illustration,
+  .illustrationContainer video {
+    max-width: 100%;
+    max-height: var(--empty-state-illustration-max-height);
+    height: 100%;
+    width: auto;
+  }
+
+  .textContainer {
+    display: flex;
+    flex-direction: column;
     justify-content: center;
+    gap: var(--spacing-24);
+  }
+
+  @container (width <=1024px) {
+    .content {
+      padding: var(--spacing-16);
+    }
   }
 
-  .heading {
-    font-size: 1.25rem;
-    line-height: 1.5rem;
+  @container (width <=560px) {
+    .content {
+      grid-template-columns: 1fr;
+      grid-template-rows: auto;
+      grid-column-gap: unset;
+      grid-row-gap: var(--spacing-24);
+      padding: var(--spacing-24);
+    }
+
+    .illustrationContainer {
+      --empty-state-illustration-max-height: 210px;
+
+      justify-content: center;
+    }
+
+    .heading {
+      font-size: 1.25rem;
+      line-height: 1.5rem;
+    }
   }
 }

package/src/ErrorPage/ErrorPage.module.scss

@@ -1,5 +1,7 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.paragraphPadding {
-  padding: $spacing-24 0;
+@layer kz-components {
+  .paragraphPadding {
+    padding: $spacing-24 0;
+  }
 }

package/src/FieldGroup/FieldGroup.module.scss

@@ -1,10 +1,12 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.group {
-  margin-bottom: $spacing-6;
-}
+@layer kz-components {
+  .group {
+    margin-bottom: $spacing-6;
+  }
 
-.inline {
-  display: inline;
-  margin-bottom: 0;
+  .inline {
+    display: inline;
+    margin-bottom: 0;
+  }
 }

package/src/FieldMessage/FieldMessage.module.scss

@@ -2,73 +2,75 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/border';
 
-$message-icon-size: 1.25rem;
-$validation-message-padding: 0.5625rem;
-$form-text-color-label: rgba($color-purple-800-rgb, 0.7);
-$form-text-color-label-reversed: rgba($color-white-rgb, 0.8);
+@layer kz-components {
+  $message-icon-size: 1.25rem;
+  $validation-message-padding: 0.5625rem;
+  $form-text-color-label: rgba($color-purple-800-rgb, 0.7);
+  $form-text-color-label-reversed: rgba($color-white-rgb, 0.8);
 
-.message {
-  display: flex;
-  position: relative;
-  align-items: center;
-  gap: $spacing-6;
-}
+  .message {
+    display: flex;
+    position: relative;
+    align-items: center;
+    gap: $spacing-6;
+  }
 
-.default {
-  color: $form-text-color-label;
+  .default {
+    color: $form-text-color-label;
 
-  &.reversed {
-    color: $form-text-color-label-reversed;
+    &.reversed {
+      color: $form-text-color-label-reversed;
+    }
   }
-}
 
-.error,
-.caution {
-  border-radius: $border-solid-border-radius;
-  padding: $validation-message-padding;
-  color: $color-purple-800;
-}
+  .error,
+  .caution {
+    border-radius: $border-solid-border-radius;
+    padding: $validation-message-padding;
+    color: $color-purple-800;
+  }
 
-.error {
-  background: $color-red-100;
-  opacity: 100%;
+  .error {
+    background: $color-red-100;
+    opacity: 100%;
 
-  &.reversed {
-    background: $color-red-300;
+    &.reversed {
+      background: $color-red-300;
+    }
   }
-}
 
-.caution {
-  background: $color-yellow-100;
-  opacity: 100%;
+  .caution {
+    background: $color-yellow-100;
+    opacity: 100%;
 
-  &.reversed {
-    background: $color-yellow-400;
+    &.reversed {
+      background: $color-yellow-400;
+    }
   }
-}
 
-.positionBottom {
-  margin-top: $spacing-6;
-}
+  .positionBottom {
+    margin-top: $spacing-6;
+  }
 
-.positionTop {
-  margin-bottom: $spacing-6;
-}
+  .positionTop {
+    margin-bottom: $spacing-6;
+  }
 
-.warningIcon {
-  display: inline-flex;
-  width: $message-icon-size;
-  align-self: flex-start;
+  .warningIcon {
+    display: inline-flex;
+    width: $message-icon-size;
+    align-self: flex-start;
 
-  .error & {
-    color: $color-red-500;
-  }
+    .error & {
+      color: $color-red-500;
+    }
 
-  .caution & {
-    color: var(--color-yellow-700);
-  }
+    .caution & {
+      color: var(--color-yellow-700);
+    }
 
-  .reversed & {
-    color: $color-purple-800;
+    .reversed & {
+      color: $color-purple-800;
+    }
   }
 }

package/src/Filter/Filter/Filter.module.css

@@ -1,5 +1,7 @@
-@media (width < 768px) {
-  .filter {
-    flex-basis: 100%;
+@layer kz-components {
+  @media (width < 768px) {
+    .filter {
+      flex-basis: 100%;
+    }
   }
 }

package/src/Filter/Filter/subcomponents/FilterContents/FilterContents.module.css

@@ -1,3 +1,5 @@
-.filterContents {
-  padding: var(--spacing-24);
+@layer kz-components {
+  .filterContents {
+    padding: var(--spacing-24);
+  }
 }

package/src/Filter/Filter/subcomponents/FilterPopover/FilterPopover.module.css

@@ -1,7 +1,9 @@
-.filterPopover {
-  background-color: var(--color-white);
-  z-index: 1010;
-  box-shadow: var(--shadow-large-box-shadow);
-  border-radius: var(--border-borderless-border-radius);
-  display: inline-flex;
+@layer kz-components {
+  .filterPopover {
+    background-color: var(--color-white);
+    z-index: 1010;
+    box-shadow: var(--shadow-large-box-shadow);
+    border-radius: var(--border-borderless-border-radius);
+    display: inline-flex;
+  }
 }