@kaizen/components 0.0.0-canary-kz-components-css-layer-pre-release-20250527021003 → 0.0.0-canary-fix-fms-popover-20250603003244

package/src/DateRangePicker/DateRangePicker.module.scss

@@ -4,97 +4,95 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '../../styles/utils/button-reset';
 
-@layer kz-components {
-  // Vars
-  $button-height: 48px;
-  $button-base-padding-horizontal: $spacing-sm;
-  $button-icon-size: 1.25rem; // 20px
+// 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;
+.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;
+  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]),
-    &:hover:not([disabled]) {
-      background-color: $color-gray-200;
-      border-color: $color-gray-600;
-      color: $color-purple-800;
-    }
+  &:focus-visible:not([disabled]),
+  &:hover:not([disabled]) {
+    background-color: $color-gray-200;
+    border-color: $color-gray-600;
+    color: $color-purple-800;
+  }
 
-    &:focus-visible:not([disabled]) {
-      outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
-      outline-offset: 1px;
-    }
+  &: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:not([disabled]) {
+    outline: none;
+  }
 
-    &.disabled {
-      background: $color-white;
-      opacity: $disabled-opacity;
-      color: rgba($color-purple-800-rgb, $placeholder-opacity);
-      border-color: rgba($color-gray-500-rgb, 0.7);
-    }
+  &.disabled {
+    background: $color-white;
+    opacity: $disabled-opacity;
+    color: rgba($color-purple-800-rgb, $placeholder-opacity);
+    border-color: rgba($color-gray-500-rgb, 0.7);
+  }
 
-    .value {
-      padding-inline: 1.75rem $button-base-padding-horizontal;
-    }
+  .value {
+    padding-inline: 1.75rem $button-base-padding-horizontal;
   }
+}
 
+.startIconAdornment {
+  margin-top: -1px;
+}
+
+// Icon adornment styles
+@mixin vertically-center-icon {
+  position: absolute;
+  height: $button-icon-size;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* stylelint-disable no-descending-specificity */
+.withStartIconAdornment {
   .startIconAdornment {
-    margin-top: -1px;
-  }
+    @include vertically-center-icon;
 
-  // Icon adornment styles
-  @mixin vertically-center-icon {
-    position: absolute;
-    height: $button-icon-size;
-    top: 50%;
-    transform: translateY(-50%);
+    color: $color-purple-800;
+    opacity: $disabled-opacity;
+    inset-inline: $spacing-sm auto;
   }
 
-  /* stylelint-disable no-descending-specificity */
-  .withStartIconAdornment {
+  &:focus-within:not(.disabled),
+  &:hover:not(.disabled) {
     .startIconAdornment {
-      @include vertically-center-icon;
-
-      color: $color-purple-800;
-      opacity: $disabled-opacity;
-      inset-inline: $spacing-sm auto;
-    }
-
-    &:focus-within:not(.disabled),
-    &:hover:not(.disabled) {
-      .startIconAdornment {
-        opacity: $placeholder-opacity;
-      }
+      opacity: $placeholder-opacity;
     }
+  }
 
-    .button {
-      padding-inline: calc(#{$spacing-md} + #{$button-icon-size}) $button-base-padding-horizontal;
-    }
+  .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,39 +1,37 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/color';
 
-@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;
-  }
+// 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,116 +1,114 @@
-@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);
-  }
+.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;
-  }
+.straightCorners {
+  border-radius: 0;
+}
 
-  /** @deprecated */
-  .positive {
-    --empty-state-border-color: var(--color-green-500);
-    --empty-state-background-color: var(--color-green-100);
-  }
+/** @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);
-  }
+.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);
-  }
+.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);
-  }
+/** end @deprecated */
+.success {
+  --empty-state-border-color: var(--color-green-500);
+  --empty-state-background-color: var(--color-green-100);
+}
 
-  .warning {
-    --empty-state-border-color: var(--color-red-500);
-    --empty-state-background-color: var(--color-red-100);
-  }
+.warning {
+  --empty-state-border-color: var(--color-red-500);
+  --empty-state-background-color: var(--color-red-100);
+}
 
-  .informative {
-    --empty-state-border-color: var(--color-blue-400);
-    --empty-state-background-color: var(--color-blue-100);
-  }
+.informative {
+  --empty-state-border-color: var(--color-blue-400);
+  --empty-state-background-color: var(--color-blue-100);
+}
+
+.expert-advice {
+  --empty-state-border-color: var(--color-purple-400);
+  --empty-state-background-color: var(--color-purple-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);
+}
+
+.illustrationContainer {
+  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);
+}
 
-  .expert-advice {
-    --empty-state-border-color: var(--color-purple-400);
-    --empty-state-background-color: var(--color-purple-100);
+@container (width <=1024px) {
+  .content {
+    padding: var(--spacing-16);
   }
+}
 
+@container (width <=560px) {
   .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;
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    grid-column-gap: unset;
+    grid-row-gap: var(--spacing-24);
     padding: var(--spacing-24);
-    grid-column-gap: var(--spacing-32);
   }
 
   .illustrationContainer {
-    display: flex;
-    align-items: center;
-  }
+    --empty-state-illustration-max-height: 210px;
 
-  .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);
-    }
   }
 
-  @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;
-    }
+  .heading {
+    font-size: 1.25rem;
+    line-height: 1.5rem;
   }
 }

package/src/ErrorPage/ErrorPage.module.scss

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

package/src/FieldGroup/FieldGroup.module.scss

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

package/src/FieldMessage/FieldMessage.module.scss

@@ -2,75 +2,73 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/border';
 
-@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-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,7 +1,5 @@
-@layer kz-components {
-  @media (width < 768px) {
-    .filter {
-      flex-basis: 100%;
-    }
+@media (width < 768px) {
+  .filter {
+    flex-basis: 100%;
   }
 }

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

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

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

@@ -1,9 +1,7 @@
-@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;
-  }
+.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;
 }