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

package/src/Popover/Popover.module.scss

@@ -2,200 +2,199 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '../../styles/utils/button-reset';
 
-@layer kz-components {
-  // Sync with PopoverModern.tsx
-  $arrow-width: 14px;
-  $arrow-height: 7px;
-
-  $large-width: 450px;
-
-  // Suggestion: with this implementation, the anchor point of the popover is at the base of the triangle. But,
-  // we would ideally want it at the tip of the triangle. Otherwise, when using the popover, the consumer needs to manually
-  // add something like a `margin-top: 8px` to get the popover properly positioned.
-  // I didn't update this, as I didn't want to introduce a breaking change.
-  @mixin arrow($background-color, $border-color) {
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      border-left: calc(#{$arrow-width} / 2) solid transparent;
-      border-right: calc(#{$arrow-width} / 2) solid transparent;
-      top: 0;
-      left: 0;
-    }
-
-    &::before {
-      border-top: $arrow-height solid $border-color;
-    }
-
-    /* The white fill of the triangle */
-    &::after {
-      border-top: $arrow-height solid $background-color;
-      margin-top: -1.5px;
-      z-index: 1;
-    }
-  }
-
-  .root {
-    width: 220px;
+// Sync with PopoverModern.tsx
+$arrow-width: 14px;
+$arrow-height: 7px;
+
+$large-width: 450px;
+
+// Suggestion: with this implementation, the anchor point of the popover is at the base of the triangle. But,
+// we would ideally want it at the tip of the triangle. Otherwise, when using the popover, the consumer needs to manually
+// add something like a `margin-top: 8px` to get the popover properly positioned.
+// I didn't update this, as I didn't want to introduce a breaking change.
+@mixin arrow($background-color, $border-color) {
+  &::before,
+  &::after {
+    content: '';
     position: absolute;
-    left: 50%;
-    // also see the component file under getRootStyle, which will transform the element
+    border-left: calc(#{$arrow-width} / 2) solid transparent;
+    border-right: calc(#{$arrow-width} / 2) solid transparent;
+    top: 0;
+    left: 0;
   }
 
-  %box {
-    --border-width: var(--border-width-1);
+  &::before {
+    border-top: $arrow-height solid $border-color;
+  }
 
-    border: var(--border-width) var(--border-solid-border-style);
-    filter: drop-shadow(0 0 7px rgb(0, 0, 0, 0.1));
-    border-radius: $border-solid-border-radius;
-    color: $color-purple-800;
-    text-align: start;
-    padding-block: calc(var(--spacing-12) - var(--border-width))
-      calc(var(--spacing-16) - var(--border-width));
-    padding-inline: calc(var(--spacing-16) - var(--border-width));
+  /* The white fill of the triangle */
+  &::after {
+    border-top: $arrow-height solid $background-color;
+    margin-top: -1.5px;
+    z-index: 1;
   }
+}
 
-  $default-box-border-color: var(--color-gray-500);
+.root {
+  width: 220px;
+  position: absolute;
+  left: 50%;
+  // also see the component file under getRootStyle, which will transform the element
+}
 
-  .defaultBox {
-    @extend %box;
+%box {
+  --border-width: var(--border-width-1);
+
+  border: var(--border-width) var(--border-solid-border-style);
+  filter: drop-shadow(0 0 7px rgba(0, 0, 0, 0.1));
+  border-radius: $border-solid-border-radius;
+  color: $color-purple-800;
+  text-align: start;
+  padding-block: calc(var(--spacing-12) - var(--border-width))
+    calc(var(--spacing-16) - var(--border-width));
+  padding-inline: calc(var(--spacing-16) - var(--border-width));
+}
 
-    background: var(--color-white);
-    border-color: $default-box-border-color;
-  }
+$default-box-border-color: var(--color-gray-500);
 
-  .defaultArrow {
-    @include arrow(var(--color-white), $default-box-border-color);
-  }
+.defaultBox {
+  @extend %box;
 
-  $informative-box-border-color: var(--color-blue-400);
+  background: var(--color-white);
+  border-color: $default-box-border-color;
+}
 
-  .informativeBox {
-    @extend %box;
+.defaultArrow {
+  @include arrow(var(--color-white), $default-box-border-color);
+}
 
-    background: $color-blue-100;
-    border-color: $informative-box-border-color;
-  }
+$informative-box-border-color: var(--color-blue-400);
 
-  .informativeArrow {
-    @include arrow($color-blue-100, $informative-box-border-color);
-  }
+.informativeBox {
+  @extend %box;
 
-  $positive-box-border-color: var(--color-green-500);
+  background: $color-blue-100;
+  border-color: $informative-box-border-color;
+}
 
-  .positiveBox {
-    @extend %box;
+.informativeArrow {
+  @include arrow($color-blue-100, $informative-box-border-color);
+}
 
-    background: $color-green-100;
-    border-color: $positive-box-border-color;
-  }
+$positive-box-border-color: var(--color-green-500);
 
-  .positiveArrow {
-    @include arrow($color-green-100, $positive-box-border-color);
-  }
+.positiveBox {
+  @extend %box;
 
-  $negative-box-border-color: var(--color-red-500);
+  background: $color-green-100;
+  border-color: $positive-box-border-color;
+}
 
-  .negativeBox {
-    @extend %box;
+.positiveArrow {
+  @include arrow($color-green-100, $positive-box-border-color);
+}
 
-    background: $color-red-100;
-    border-color: $negative-box-border-color;
-  }
+$negative-box-border-color: var(--color-red-500);
 
-  .negativeArrow {
-    @include arrow($color-red-100, $negative-box-border-color);
-  }
+.negativeBox {
+  @extend %box;
 
-  $cautionary-box-border-color: var(--color-yellow-700);
+  background: $color-red-100;
+  border-color: $negative-box-border-color;
+}
 
-  .cautionaryBox {
-    @extend %box;
+.negativeArrow {
+  @include arrow($color-red-100, $negative-box-border-color);
+}
 
-    background: $color-yellow-100;
-    border-color: $cautionary-box-border-color;
-  }
+$cautionary-box-border-color: var(--color-yellow-700);
 
-  .cautionaryArrow {
-    @include arrow($color-yellow-100, $cautionary-box-border-color);
-  }
+.cautionaryBox {
+  @extend %box;
 
-  .header {
-    position: relative;
-    margin-bottom: var(--spacing-6);
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-    padding-inline-end: var(--spacing-24);
-  }
+  background: $color-yellow-100;
+  border-color: $cautionary-box-border-color;
+}
 
-  .container {
-    position: relative;
-    white-space: pre-line;
-  }
+.cautionaryArrow {
+  @include arrow($color-yellow-100, $cautionary-box-border-color);
+}
 
-  .icon {
-    display: inherit;
-    margin-inline-end: var(--spacing-6);
-  }
+.header {
+  position: relative;
+  margin-bottom: var(--spacing-6);
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  padding-inline-end: var(--spacing-24);
+}
 
-  .informativeIcon {
-    color: var(--color-blue-500);
-  }
+.container {
+  position: relative;
+  white-space: pre-line;
+}
 
-  .positiveIcon {
-    color: var(--color-green-500);
-  }
+.icon {
+  display: inherit;
+  margin-inline-end: var(--spacing-6);
+}
 
-  .negativeIcon {
-    color: var(--color-red-500);
-  }
+.informativeIcon {
+  color: var(--color-blue-500);
+}
 
-  .cautionaryIcon {
-    color: var(--color-yellow-700);
-  }
+.positiveIcon {
+  color: var(--color-green-500);
+}
 
-  .close {
-    @include button-reset;
+.negativeIcon {
+  color: var(--color-red-500);
+}
 
-    position: absolute;
-    right: 0;
-    margin-left: auto;
-    display: inherit;
-    color: rgb($color-purple-800-rgb, 0.7);
-
-    &:hover {
-      color: $color-purple-800;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:focus-visible {
-      color: $color-purple-800;
-      outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
-      outline-offset: calc(-1 * #{$border-focus-ring-border-width});
-      border-radius: $border-borderless-border-radius;
-    }
+.cautionaryIcon {
+  color: var(--color-yellow-700);
+}
+
+.close {
+  @include button-reset;
+
+  position: absolute;
+  right: 0;
+  margin-left: auto;
+  display: inherit;
+  color: rgba($color-purple-800-rgb, 0.7);
+
+  &:hover {
+    color: $color-purple-800;
   }
 
-  .arrowWrapper {
-    position: absolute;
-    // Needed by popper, so it measures the size of the arrow correctly
-    width: $arrow-width;
-    height: $arrow-height;
+  &:focus {
+    outline: none;
   }
 
-  .arrow {
-    // Needed by popper, so it measures the size of the arrow correctly
-    width: $arrow-width;
-    height: $arrow-height;
+  &:focus-visible {
+    color: $color-purple-800;
+    outline: $color-blue-500 $border-focus-ring-border-style $border-focus-ring-border-width;
+    outline-offset: calc(-1 * #{$border-focus-ring-border-width});
+    border-radius: $border-borderless-border-radius;
   }
+}
 
-  /* stylelint-disable no-descending-specificity */
-  /**
+.arrowWrapper {
+  position: absolute;
+  // Needed by popper, so it measures the size of the arrow correctly
+  width: $arrow-width;
+  height: $arrow-height;
+}
+
+.arrow {
+  // Needed by popper, so it measures the size of the arrow correctly
+  width: $arrow-width;
+  height: $arrow-height;
+}
+
+/* stylelint-disable no-descending-specificity */
+/**
  * In the legacy popover, the "side" described the location of the arrow, and
  * we use css classes to determine the placement.
  * In the modern popover, the "side" describes the location of the popover
@@ -204,48 +203,47 @@
  * Hence, the confusion below.
  */
 
-  [data-popper-placement^='bottom'] .arrowWrapper {
-    bottom: 100%;
-    left: 50%;
-    margin-top: -9px;
+[data-popper-placement^='bottom'] .arrowWrapper {
+  bottom: 100%;
+  left: 50%;
+  margin-top: -9px;
 
-    .arrow {
-      transform: rotate(180deg);
-    }
+  .arrow {
+    transform: rotate(180deg);
   }
+}
 
-  [data-popper-placement^='left'] .arrowWrapper {
-    right: 0;
-    margin-right: -10px;
+[data-popper-placement^='left'] .arrowWrapper {
+  right: 0;
+  margin-right: -10px;
 
-    .arrow {
-      transform: rotate(270deg);
-    }
+  .arrow {
+    transform: rotate(270deg);
   }
+}
 
-  [data-popper-placement^='right'] .arrowWrapper {
-    left: 0;
-    margin-left: -10px;
+[data-popper-placement^='right'] .arrowWrapper {
+  left: 0;
+  margin-left: -10px;
 
-    .arrow {
-      transform: rotate(90deg);
-    }
+  .arrow {
+    transform: rotate(90deg);
   }
+}
 
-  [data-popper-placement^='top'] .arrowWrapper {
-    top: 100%;
-    left: 50%;
-  }
+[data-popper-placement^='top'] .arrowWrapper {
+  top: 100%;
+  left: 50%;
+}
 
-  .large {
-    width: auto;
-    max-width: $large-width;
-  }
+.large {
+  width: auto;
+  max-width: $large-width;
+}
 
-  .singleLine {
-    text-overflow: ellipsis;
-    white-space: nowrap; /* white-space and overflow are required for text-overflow to do anything */
-    overflow: hidden;
-  }
-  /* stylelint-enable no-descending-specificity */
+.singleLine {
+  text-overflow: ellipsis;
+  white-space: nowrap; /* white-space and overflow are required for text-overflow to do anything */
+  overflow: hidden;
 }
+/* stylelint-enable no-descending-specificity */

package/src/ProgressBar/ProgressBar.module.scss

@@ -1,97 +1,95 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  $height: 10px;
-
-  .subtext {
-    color: $color-purple-800;
-    padding-top: $spacing-6;
-    text-align: center;
-    opacity: 80%;
-  }
+$height: 10px;
 
-  .progressBackground {
-    width: 100%;
-    background: $color-gray-300;
-    border-radius: $height;
-    height: $height;
-    overflow: hidden;
-    position: relative;
-  }
+.subtext {
+  color: $color-purple-800;
+  padding-top: $spacing-6;
+  text-align: center;
+  opacity: 80%;
+}
 
-  .progress {
-    position: absolute;
-    inset: 0;
-    border-radius: $height;
-    overflow: hidden;
-    transition: transform 200ms ease;
-    background-color: var(--progressbar-background-color);
-  }
+.progressBackground {
+  width: 100%;
+  background: $color-gray-300;
+  border-radius: $height;
+  height: $height;
+  overflow: hidden;
+  position: relative;
+}
 
-  // ------------------------------
-  // Moods
-  // @deprecated use colors instead
-  // ------------------------------
-  .positive {
-    --progressbar-background-color: var(--color-green-400);
+@keyframes pulse {
+  0% {
+    transform: translateX(-100%);
   }
 
-  .informative {
-    --progressbar-background-color: var(--color-blue-400);
+  100% {
+    transform: translateX(200%);
   }
+}
 
-  .cautionary {
-    --progressbar-background-color: var(--color-yellow-400);
-  }
+.progress {
+  position: absolute;
+  inset: 0;
+  border-radius: $height;
+  overflow: hidden;
+  transition: transform 200ms ease;
+  background-color: var(--progressbar-background-color);
+}
 
-  .negative {
-    --progressbar-background-color: var(--color-red-400);
-  }
+// ------------------------------
+// Moods
+// @deprecated use colors instead
+// ------------------------------
+.positive {
+  --progressbar-background-color: var(--color-green-400);
+}
 
-  // End deprecated styles
+.informative {
+  --progressbar-background-color: var(--color-blue-400);
+}
 
-  // ------------------------------
-  // Colors
-  // ------------------------------
-  .blue {
-    --progressbar-background-color: var(--color-blue-400);
-  }
+.cautionary {
+  --progressbar-background-color: var(--color-yellow-400);
+}
 
-  .green {
-    --progressbar-background-color: var(--color-green-400);
-  }
+.negative {
+  --progressbar-background-color: var(--color-red-400);
+}
 
-  .red {
-    --progressbar-background-color: var(--color-red-400);
-  }
+// End deprecated styles
 
-  .yellow {
-    --progressbar-background-color: var(--color-yellow-400);
-  }
+// ------------------------------
+// Colors
+// ------------------------------
+.blue {
+  --progressbar-background-color: var(--color-blue-400);
+}
 
-  .isAnimating {
-    &::after {
-      background: linear-gradient(90deg, transparent, var(--color-white) 75%, transparent);
-      opacity: 25%;
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      width: 50%;
-      animation: pulse 2s infinite;
-      transition: opacity 0.2s;
-    }
-  }
+.green {
+  --progressbar-background-color: var(--color-green-400);
 }
 
-@keyframes pulse {
-  0% {
-    transform: translateX(-100%);
-  }
+.red {
+  --progressbar-background-color: var(--color-red-400);
+}
 
-  100% {
-    transform: translateX(200%);
+.yellow {
+  --progressbar-background-color: var(--color-yellow-400);
+}
+
+.isAnimating {
+  &::after {
+    background: linear-gradient(90deg, transparent, var(--color-white) 75%, transparent);
+    opacity: 25%;
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 50%;
+    animation: pulse 2s infinite;
+    transition: opacity 0.2s;
   }
 }

package/src/ProgressBar/subcomponents/Label/Label.module.scss

@@ -1,10 +1,8 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .label {
-    padding-bottom: $spacing-6;
-    color: $color-purple-800;
-    text-align: center;
-  }
+.label {
+  padding-bottom: $spacing-6;
+  color: $color-purple-800;
+  text-align: center;
 }