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

package/src/TitleBlockZen/subcomponents/TitleBlockMenuItem.module.scss

@@ -4,103 +4,101 @@
 
 /* stylelint-disable no-descending-specificity */
 
-@layer kz-components {
-  // We're duplicating the CSS instead of manipulating the Menu package to accept the alternate props
-  .menuListItem {
-    display: flex;
-  }
+// We're duplicating the CSS instead of manipulating the Menu package to accept the alternate props
+.menuListItem {
+  display: flex;
+}
 
-  .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;
+.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/TitleBlockZen/subcomponents/Toolbar.module.scss

@@ -2,45 +2,43 @@
 @import '../../../styles/utils/legacy/grid';
 @import '../mixins';
 
-@layer kz-components {
-  .toolbar {
-    display: flex;
-    align-items: center;
+.toolbar {
+  display: flex;
+  align-items: center;
 
-    .toolbarItem {
-      margin: 0 calc(#{$ca-grid} / 4);
+  .toolbarItem {
+    margin: 0 calc(#{$ca-grid} / 4);
 
-      @include title-block-under-1024 {
-        margin: 0 calc(#{$ca-grid} / 8);
-      }
+    @include title-block-under-1024 {
+      margin: 0 calc(#{$ca-grid} / 8);
+    }
 
-      &.noGap {
-        margin: 0;
-      }
+    &.noGap {
+      margin: 0;
     }
+  }
 
-    .toolbarItem:first-of-type {
-      @include ca-margin($start: 0, $end: calc(#{$ca-grid} / 4));
+  .toolbarItem:first-of-type {
+    @include ca-margin($start: 0, $end: calc(#{$ca-grid} / 4));
 
-      @include title-block-under-1024 {
-        @include ca-margin($start: 0, $end: calc(#{$ca-grid} / 8));
-      }
+    @include title-block-under-1024 {
+      @include ca-margin($start: 0, $end: calc(#{$ca-grid} / 8));
+    }
 
-      &.noGap {
-        margin: 0;
-      }
+    &.noGap {
+      margin: 0;
     }
+  }
 
-    .toolbarItem:last-of-type {
-      @include ca-margin($start: calc(#{$ca-grid} / 4), $end: 0);
+  .toolbarItem:last-of-type {
+    @include ca-margin($start: calc(#{$ca-grid} / 4), $end: 0);
 
-      @include title-block-under-1024 {
-        @include ca-margin($start: calc(#{$ca-grid} / 8), $end: 0);
-      }
+    @include title-block-under-1024 {
+      @include ca-margin($start: calc(#{$ca-grid} / 8), $end: 0);
+    }
 
-      &.noGap {
-        margin: 0;
-      }
+    &.noGap {
+      margin: 0;
     }
   }
 }

package/src/ToggleSwitch/ToggleSwitch/ToggleSwitch.module.scss

@@ -4,136 +4,134 @@
 @import '~@kaizen/design-tokens/sass/animation';
 @import '../../../styles/utils/forms';
 
-@layer kz-components {
-  $animation-timing: $animation-duration-immediate $animation-easing-function-linear;
-  $focus-ring-offset: 1px;
+$animation-timing: $animation-duration-immediate $animation-easing-function-linear;
+$focus-ring-offset: 1px;
 
-  .checkbox {
-    @include form-input-visually-hidden;
+.checkbox {
+  @include form-input-visually-hidden;
+}
+
+.track {
+  position: relative;
+  background-color: $color-gray-500;
+  border: $border-borderless-border-width $border-borderless-border-style
+    $border-borderless-border-color;
+  border-radius: $spacing-md;
+  box-sizing: content-box;
+  width: calc((#{$spacing-md} * 1.05) * 2);
+  height: calc(#{$spacing-md} * 1.25);
+  padding: 0 calc(#{$spacing-md} * 0.15);
+  display: flex;
+  align-items: center;
+  transition: background-color $animation-timing;
+
+  /* TODO: Fix */
+  /* stylelint-disable no-descending-specificity */
+  .checkbox:not(.disabled):focus + &,
+  .checkbox:not(.disabled):hover:focus + & {
+    border-color: transparent;
+    outline: 2px solid $color-blue-500;
+    outline-offset: $focus-ring-offset;
+    background-color: $color-gray-600;
   }
 
-  .track {
-    position: relative;
-    background-color: $color-gray-500;
-    border: $border-borderless-border-width $border-borderless-border-style
-      $border-borderless-border-color;
-    border-radius: $spacing-md;
-    box-sizing: content-box;
-    width: calc((#{$spacing-md} * 1.05) * 2);
-    height: calc(#{$spacing-md} * 1.25);
-    padding: 0 calc(#{$spacing-md} * 0.15);
-    display: flex;
-    align-items: center;
-    transition: background-color $animation-timing;
-
-    /* TODO: Fix */
-    /* stylelint-disable no-descending-specificity */
-    .checkbox:not(.disabled):focus + &,
-    .checkbox:not(.disabled):hover:focus + & {
-      border-color: transparent;
-      outline: 2px solid $color-blue-500;
-      outline-offset: $focus-ring-offset;
-      background-color: $color-gray-600;
-    }
+  .checkbox:not(.disabled) + &:hover,
+  label:hover .checkbox:not(.disabled) + & {
+    background-color: $color-purple-500;
+    background-color: $color-gray-600;
+  }
 
-    .checkbox:not(.disabled) + &:hover,
-    label:hover .checkbox:not(.disabled) + & {
-      background-color: $color-purple-500;
-      background-color: $color-gray-600;
-    }
+  /* stylelint-enable no-descending-specificity */
+}
 
-    /* stylelint-enable no-descending-specificity */
+.thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: $color-white;
+  border: $border-borderless-border-width $border-borderless-border-style
+    $border-borderless-border-color;
+  border-radius: $spacing-md;
+  transition:
+    left $animation-timing,
+    right $animation-timing;
+  cursor: default;
+}
+
+.checkIcon {
+  color: $color-green-500;
+  opacity: 0%;
+  transition-duration: $animation-duration-rapid;
+}
+
+/* stylelint-disable no-descending-specificity */
+.on {
+  .checkbox + .track {
+    border-color: $border-borderless-border-color;
+    background-color: $color-green-500;
+  }
+
+  .checkbox:focus + .track {
+    border-color: transparent;
+    background-color: $color-green-600;
   }
 
   .thumb {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: $color-white;
-    border: $border-borderless-border-width $border-borderless-border-style
-      $border-borderless-border-color;
-    border-radius: $spacing-md;
-    transition:
-      left $animation-timing,
-      right $animation-timing;
-    cursor: default;
+    position: relative;
+    right: auto;
+    inset-inline-start: calc(#{$spacing-md} * 1.1);
   }
 
   .checkIcon {
-    color: $color-green-500;
-    opacity: 0%;
-    transition-duration: $animation-duration-rapid;
+    opacity: 100%;
+    transition-delay: $animation-duration-immediate;
+    transition-duration: $animation-duration-fast;
   }
 
-  /* stylelint-disable no-descending-specificity */
-  .on {
-    .checkbox + .track {
-      border-color: $border-borderless-border-color;
-      background-color: $color-green-500;
-    }
-
-    .checkbox:focus + .track {
-      border-color: transparent;
-      background-color: $color-green-600;
-    }
-
-    .thumb {
-      position: relative;
-      right: auto;
-      inset-inline-start: calc(#{$spacing-md} * 1.1);
-    }
+  .checkbox:not(.disabled) + .track:hover,
+  label:hover & .checkbox:not(.disabled) + .track {
+    background-color: $color-green-600;
+  }
+}
 
-    .checkIcon {
-      opacity: 100%;
-      transition-delay: $animation-duration-immediate;
-      transition-duration: $animation-duration-fast;
-    }
+.off {
+  .thumb {
+    position: relative;
+    right: auto;
+    inset-inline-start: calc(#{$spacing-md} * -0.05);
+  }
+}
 
-    .checkbox:not(.disabled) + .track:hover,
-    label:hover & .checkbox:not(.disabled) + .track {
-      background-color: $color-green-600;
-    }
+.reversed {
+  .checkbox:focus + .track,
+  .checkbox:hover:focus + .track {
+    outline-color: $color-blue-300;
   }
 
-  .off {
-    .thumb {
-      position: relative;
-      right: auto;
-      inset-inline-start: calc(#{$spacing-md} * -0.05);
+  &.off {
+    .track {
+      background-color: rgba($color-white-rgb, 0.2);
     }
-  }
 
-  .reversed {
     .checkbox:focus + .track,
     .checkbox:hover:focus + .track {
-      outline-color: $color-blue-300;
+      background-color: rgba($color-white-rgb, 0.65);
     }
 
-    &.off {
-      .track {
-        background-color: rgba($color-white-rgb, 0.2);
-      }
-
-      .checkbox:focus + .track,
-      .checkbox:hover:focus + .track {
-        background-color: rgba($color-white-rgb, 0.65);
-      }
-
-      .checkbox:not(.disabled) + .track:hover,
-      label:hover & .checkbox:not(.disabled) + .track {
-        background-color: rgba($color-white-rgb, 0.65);
-      }
+    .checkbox:not(.disabled) + .track:hover,
+    label:hover & .checkbox:not(.disabled) + .track {
+      background-color: rgba($color-white-rgb, 0.65);
     }
   }
+}
 
-  // When the ToggleSwitch is used as part of the ToggleSwitchField, the disabled state opacity is set on the Label component
-  label .disabled.track {
-    opacity: 100%;
-  }
-
-  .disabled.track {
-    opacity: 30%;
-  }
+// When the ToggleSwitch is used as part of the ToggleSwitchField, the disabled state opacity is set on the Label component
+label .disabled.track {
+  opacity: 100%;
+}
 
-  /* stylelint-enable no-descending-specificity */
+.disabled.track {
+  opacity: 30%;
 }
+
+/* stylelint-enable no-descending-specificity */

package/src/ToggleSwitch/ToggleSwitchField/ToggleSwitchField.module.scss

@@ -1,17 +1,15 @@
 @import '~@kaizen/design-tokens/sass/typography';
 
-@layer kz-components {
-  .container {
-    display: flex;
-  }
+.container {
+  display: flex;
+}
 
-  .fullWidth {
-    .inner {
-      width: 100%;
-    }
+.fullWidth {
+  .inner {
+    width: 100%;
   }
+}
 
-  .on label {
-    font-weight: $typography-paragraph-bold-font-weight;
-  }
+.on label {
+  font-weight: $typography-paragraph-bold-font-weight;
 }