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

package/src/Menu/subcomponents/MenuItem/MenuItem.module.scss

@@ -2,103 +2,101 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/typography';
 
-@layer kz-components {
-  .menuListItem {
-    display: flex;
-  }
+.menuListItem {
+  display: flex;
+}
 
-  /* stylelint-disable no-descending-specificity */
-  .menuItem {
-    display: flex;
-    align-items: center;
-    flex: 1 1 auto;
-    box-sizing: border-box;
-    background: none;
-    border: 2px transparent solid;
-    text-align: start;
-    padding: 6px calc(#{$spacing-sm} - 2px);
-    margin: 0 $spacing-xs;
-    min-height: calc(1.75 * #{$spacing-md});
-    border-radius: 4px;
-    font-family: $typography-paragraph-body-font-family;
-    font-weight: $typography-paragraph-body-font-weight;
-    font-size: $typography-paragraph-body-font-size;
-    line-height: $typography-paragraph-body-line-height;
-    letter-spacing: $typography-paragraph-body-letter-spacing;
+/* stylelint-disable no-descending-specificity */
+.menuItem {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  box-sizing: border-box;
+  background: none;
+  border: 2px transparent solid;
+  text-align: start;
+  padding: 6px calc(#{$spacing-sm} - 2px);
+  margin: 0 $spacing-xs;
+  min-height: calc(1.75 * #{$spacing-md});
+  border-radius: 4px;
+  font-family: $typography-paragraph-body-font-family;
+  font-weight: $typography-paragraph-body-font-weight;
+  font-size: $typography-paragraph-body-font-size;
+  line-height: $typography-paragraph-body-line-height;
+  letter-spacing: $typography-paragraph-body-letter-spacing;
+  text-decoration: none;
+  color: $color-purple-800;
+
+  &:hover {
     text-decoration: none;
-    color: $color-purple-800;
+  }
 
-    &:hover {
-      text-decoration: none;
-    }
+  &:not(.menuItem--disabled):hover,
+  &:focus {
+    background: $color-blue-100;
+    color: $color-blue-500;
 
-    &:not(.menuItem--disabled):hover,
-    &:focus {
-      background: $color-blue-100;
+    .menuItem__Icon {
       color: $color-blue-500;
+    }
 
-      .menuItem__Icon {
-        color: $color-blue-500;
-      }
+    &.menuItem--destructive {
+      background: $color-red-100;
+      color: $color-red-600;
 
-      &.menuItem--destructive {
-        background: $color-red-100;
+      .menuItem__Icon {
         color: $color-red-600;
-
-        .menuItem__Icon {
-          color: $color-red-600;
-        }
       }
     }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:focus-visible {
-      border-color: $color-blue-500;
-    }
   }
 
-  .menuItem--disabled {
-    color: rgba($color-purple-800-rgb, 0.3);
-
-    .menuItem__Icon {
-      color: rgba($color-purple-800-rgb, 0.3);
-    }
+  &:focus {
+    outline: none;
   }
 
-  .menuItem--active {
-    color: $color-blue-500;
-    font-weight: $typography-paragraph-bold-font-weight;
+  &:focus-visible {
+    border-color: $color-blue-500;
   }
+}
 
-  .menuItem--destructive {
-    color: $color-red-600;
+.menuItem--disabled {
+  color: rgba($color-purple-800-rgb, 0.3);
 
-    .menuItem__Icon {
-      color: $color-red-600;
-    }
+  .menuItem__Icon {
+    color: rgba($color-purple-800-rgb, 0.3);
   }
+}
 
-  .menuItem--destructive.menuItem--disabled {
-    color: rgba($color-red-600-rgb, 0.3);
+.menuItem--active {
+  color: $color-blue-500;
+  font-weight: $typography-paragraph-bold-font-weight;
+}
 
-    .menuItem__Icon {
-      color: rgba($color-red-600-rgb, 0.3);
-    }
-  }
+.menuItem--destructive {
+  color: $color-red-600;
 
-  .menuItem__Label {
-    flex-grow: 1;
+  .menuItem__Icon {
+    color: $color-red-600;
   }
+}
+
+.menuItem--destructive.menuItem--disabled {
+  color: rgba($color-red-600-rgb, 0.3);
 
   .menuItem__Icon {
-    margin-inline-end: calc(#{$spacing-md} / 3);
-    display: flex;
-    align-self: flex-start;
-    transform: translateY(0.2em);
-    color: rgba($color-purple-800-rgb, 0.75);
+    color: rgba($color-red-600-rgb, 0.3);
   }
-  /* stylelint-enable no-descending-specificity */
 }
+
+.menuItem__Label {
+  flex-grow: 1;
+}
+
+.menuItem__Icon {
+  margin-inline-end: calc(#{$spacing-md} / 3);
+  display: flex;
+  align-self: flex-start;
+  transform: translateY(0.2em);
+  color: rgba($color-purple-800-rgb, 0.75);
+}
+/* stylelint-enable no-descending-specificity */

package/src/Menu/subcomponents/MenuList/MenuList.module.scss

@@ -1,20 +1,18 @@
 @import '~@kaizen/design-tokens/sass/border';
 
-@layer kz-components {
-  .menuSection {
-    list-style: none;
-    padding: 0;
-    margin: 0;
+.menuSection {
+  list-style: none;
+  padding: 0;
+  margin: 0;
 
-    &:not(:last-of-type) {
-      &::after {
-        width: 100%;
-        height: 1px;
-        background-color: $border-solid-border-color;
-        content: '';
-        display: block;
-        margin: 5px 0;
-      }
+  &:not(:last-of-type) {
+    &::after {
+      width: 100%;
+      height: 1px;
+      background-color: $border-solid-border-color;
+      content: '';
+      display: block;
+      margin: 5px 0;
     }
   }
 }

package/src/Menu/subcomponents/StatelessMenu/StatelessMenu.module.scss

@@ -1,5 +1,3 @@
-@layer kz-components {
-  .buttonWrapper {
-    display: inline-block;
-  }
+.buttonWrapper {
+  display: inline-block;
 }

package/src/Modal/ConfirmationModal/ConfirmationModal.module.scss

@@ -5,180 +5,178 @@
 @import '../../../styles/utils/animation';
 @import '../GenericModal/GenericModal.module';
 
-@layer kz-components {
-  .modal {
-    @extend %genericModal;
+.modal {
+  @extend %genericModal;
 
-    min-width: 300px;
-    max-width: 600px;
+  min-width: 300px;
+  max-width: 600px;
 
-    .spotIcon {
-      color: var(--spot-icon-color);
-    }
+  .spotIcon {
+    color: var(--spot-icon-color);
   }
+}
 
-  .header {
-    display: grid;
-    grid-template-columns: 0.2fr 2fr;
-    align-items: center;
-    color: $color-white;
-    text-align: start;
-    border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;
+.header {
+  display: grid;
+  grid-template-columns: 0.2fr 2fr;
+  align-items: center;
+  color: $color-white;
+  text-align: start;
+  border-radius: $border-solid-border-radius $border-solid-border-radius 0 0;
 
-    &.padded {
-      padding: $spacing-md $spacing-lg;
+  &.padded {
+    padding: $spacing-md $spacing-lg;
 
-      @media (max-width: $layout-breakpoints-medium) {
-        padding: $spacing-md;
-      }
+    @media (max-width: $layout-breakpoints-medium) {
+      padding: $spacing-md;
     }
+  }
 
-    // override Murmur global styles :(
-    h1 {
-      color: var(color-purple-800);
-    }
+  // override Murmur global styles :(
+  h1 {
+    color: var(color-purple-800);
   }
+}
 
-  .iconContainer {
-    position: relative;
-    align-self: flex-start;
+.iconContainer {
+  position: relative;
+  align-self: flex-start;
 
-    @media (min-width: $layout-breakpoints-medium) {
-      align-self: center;
-    }
+  @media (min-width: $layout-breakpoints-medium) {
+    align-self: center;
+  }
 
-    .spotIcon {
-      --icon-size: 30;
+  .spotIcon {
+    --icon-size: 30;
 
-      width: 30px;
-      height: 30px;
+    width: 30px;
+    height: 30px;
 
-      @media (max-width: $layout-breakpoints-medium) {
-        margin-inline-end: 0.9375rem;
-        position: relative;
-        inset-block-start: 0.125rem;
-      }
+    @media (max-width: $layout-breakpoints-medium) {
+      margin-inline-end: 0.9375rem;
+      position: relative;
+      inset-block-start: 0.125rem;
     }
   }
+}
 
-  .prominent {
-    display: grid;
-    grid-template-columns: 1.1fr 2fr;
-    align-items: center;
-
-    @media (max-width: $layout-breakpoints-medium) {
-      grid-template-columns: 1fr;
-      display: flex;
-      flex-direction: column;
-      place-content: flex-start center;
-      align-items: flex-start;
-    }
+.prominent {
+  display: grid;
+  grid-template-columns: 1.1fr 2fr;
+  align-items: center;
+
+  @media (max-width: $layout-breakpoints-medium) {
+    grid-template-columns: 1fr;
+    display: flex;
+    flex-direction: column;
+    place-content: flex-start center;
+    align-items: flex-start;
+  }
 
-    .iconContainer {
-      position: absolute;
-      inset-block-start: 8%;
+  .iconContainer {
+    position: absolute;
+    inset-block-start: 8%;
 
-      @media (max-width: $layout-breakpoints-medium) {
-        position: relative;
-        inset-block-start: 0;
-        margin-block-end: $spacing-sm;
-      }
+    @media (max-width: $layout-breakpoints-medium) {
+      position: relative;
+      inset-block-start: 0;
+      margin-block-end: $spacing-sm;
     }
+  }
 
-    .spotIcon {
-      width: 155px;
-      height: 155px;
-      margin: 0 auto;
-      color: $color-purple-800;
+  .spotIcon {
+    width: 155px;
+    height: 155px;
+    margin: 0 auto;
+    color: $color-purple-800;
 
-      @media (max-width: $layout-breakpoints-medium) {
-        width: 86px;
-        height: 86px;
-      }
+    @media (max-width: $layout-breakpoints-medium) {
+      width: 86px;
+      height: 86px;
     }
   }
+}
 
-  .padded {
-    padding: $spacing-md $spacing-lg $spacing-md $spacing-lg;
+.padded {
+  padding: $spacing-md $spacing-lg $spacing-md $spacing-lg;
 
-    @media (max-width: $layout-breakpoints-medium) {
-      padding: $spacing-md;
-    }
+  @media (max-width: $layout-breakpoints-medium) {
+    padding: $spacing-md;
   }
+}
 
-  // --------------------------------
-  // @deprecated moods use variant styles instead
-  // --------------------------------
+// --------------------------------
+// @deprecated moods use variant styles instead
+// --------------------------------
 
-  $dt-positive-header-background: $color-green-100;
-  $dt-informative-header-background: $color-blue-100;
-  $dt-negative-header-background: $color-red-100;
-  $dt-cautionary-header-background: $color-yellow-100;
-  $dt-heading-text-color: $color-purple-800;
-  $dt-cautionary-heading-text-color: $color-purple-800;
-  $dt-assertive-header-background: $color-orange-100;
+$dt-positive-header-background: $color-green-100;
+$dt-informative-header-background: $color-blue-100;
+$dt-negative-header-background: $color-red-100;
+$dt-cautionary-header-background: $color-yellow-100;
+$dt-heading-text-color: $color-purple-800;
+$dt-cautionary-heading-text-color: $color-purple-800;
+$dt-assertive-header-background: $color-orange-100;
 
-  .positiveHeader {
-    background-color: $dt-positive-header-background;
+.positiveHeader {
+  background-color: $dt-positive-header-background;
 
-    .spotIcon {
-      color: $color-green-500;
-    }
+  .spotIcon {
+    color: $color-green-500;
   }
+}
 
-  .informativeHeader {
-    background-color: $dt-informative-header-background;
+.informativeHeader {
+  background-color: $dt-informative-header-background;
 
-    .spotIcon {
-      color: $color-blue-500;
-    }
+  .spotIcon {
+    color: $color-blue-500;
   }
+}
 
-  .negativeHeader,
-  .assertiveHeader {
-    background-color: $dt-negative-header-background;
+.negativeHeader,
+.assertiveHeader {
+  background-color: $dt-negative-header-background;
 
-    .spotIcon {
-      color: $color-red-500;
-    }
+  .spotIcon {
+    color: $color-red-500;
   }
+}
 
-  .cautionaryHeader {
-    background-color: $dt-cautionary-header-background;
+.cautionaryHeader {
+  background-color: $dt-cautionary-header-background;
 
-    .spotIcon {
-      color: var(--color-yellow-700);
-    }
+  .spotIcon {
+    color: var(--color-yellow-700);
   }
+}
 
-  // End @deprecated ----------------
-
-  // --------------------------------
-  // variant styles
-  // --------------------------------
-  .success {
-    background-color: var(--color-green-100);
+// End @deprecated ----------------
 
-    --spot-icon-color: var(--color-green-500);
-  }
+// --------------------------------
+// variant styles
+// --------------------------------
+.success {
+  background-color: var(--color-green-100);
 
-  .informative {
-    background-color: var(--color-blue-100);
+  --spot-icon-color: var(--color-green-500);
+}
 
-    --spot-icon-color: var(--color-blue-500);
-  }
+.informative {
+  background-color: var(--color-blue-100);
 
-  .warning {
-    background-color: var(--color-red-100);
+  --spot-icon-color: var(--color-blue-500);
+}
 
-    --spot-icon-color: var(--color-red-500);
-  }
+.warning {
+  background-color: var(--color-red-100);
 
-  .cautionary {
-    background-color: var(--color-yellow-100);
+  --spot-icon-color: var(--color-red-500);
+}
 
-    --spot-icon-color: var(--color-yellow-700);
-  }
+.cautionary {
+  background-color: var(--color-yellow-100);
 
-  // --------------------------------
+  --spot-icon-color: var(--color-yellow-700);
 }
+
+// --------------------------------