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

package/src/BrandMoment/_docs/ExampleHeaders.module.scss

@@ -4,87 +4,85 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/layout';
 
-@layer kz-components {
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: $spacing-sm $spacing-md;
-  }
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: $spacing-sm $spacing-md;
+}
 
-  .headerLeft {
-    flex: 0 0 50%;
-  }
+.headerLeft {
+  flex: 0 0 50%;
+}
 
-  .headerRight {
-    flex: 0 0 50%;
-    display: flex;
-    justify-content: flex-end;
-    gap: $spacing-8;
-  }
+.headerRight {
+  flex: 0 0 50%;
+  display: flex;
+  justify-content: flex-end;
+  gap: $spacing-8;
+}
 
-  .logoLink {
-    display: flex;
-    align-items: center;
-    padding: calc(#{$spacing-sm} - #{$border-solid-border-width}) 0;
-    max-inline-size: 133px;
+.logoLink {
+  display: flex;
+  align-items: center;
+  padding: calc(#{$spacing-sm} - #{$border-solid-border-width}) 0;
+  max-inline-size: 133px;
 
-    > img {
-      inline-size: 100%;
-    }
+  > img {
+    inline-size: 100%;
   }
+}
 
-  .logoContainer {
-    background: $color-white;
-    box-sizing: border-box;
-    inline-size: 48px;
-    block-size: 48px;
-    padding: $spacing-xs;
-    border-radius: $border-solid-border-radius;
-    box-shadow: $shadow-small-box-shadow;
+.logoContainer {
+  background: $color-white;
+  box-sizing: border-box;
+  inline-size: 48px;
+  block-size: 48px;
+  padding: $spacing-xs;
+  border-radius: $border-solid-border-radius;
+  box-shadow: $shadow-small-box-shadow;
 
-    > img {
-      inline-size: 100%;
-      border-radius: 4px;
-    }
-  }
-
-  .headerCustomerFocused {
-    display: grid;
-    justify-items: center;
-    grid-template-columns: auto auto;
-    padding: $spacing-lg $spacing-md;
+  > img {
+    inline-size: 100%;
+    border-radius: 4px;
   }
+}
 
-  .headerCustomerFocused .logoContainer {
-    inline-size: 48px;
-    block-size: 48px;
-    padding: $spacing-xs;
-    margin-inline-end: auto;
-  }
+.headerCustomerFocused {
+  display: grid;
+  justify-items: center;
+  grid-template-columns: auto auto;
+  padding: $spacing-lg $spacing-md;
+}
 
-  .headerCustomerFocused .rightAlign {
-    margin-inline-start: auto;
-  }
+.headerCustomerFocused .logoContainer {
+  inline-size: 48px;
+  block-size: 48px;
+  padding: $spacing-xs;
+  margin-inline-end: auto;
+}
 
-  @media (min-width: $layout-breakpoints-large) {
-    .headerCustomerFocused {
-      align-items: flex-start;
-      grid-template-columns: 1fr auto 1fr;
-    }
+.headerCustomerFocused .rightAlign {
+  margin-inline-start: auto;
+}
 
-    .headerCustomerFocused .logoContainer {
-      grid-column-start: 2;
-      inline-size: 84px;
-      block-size: 84px;
-      padding: $spacing-sm;
-    }
+@media (min-width: $layout-breakpoints-large) {
+  .headerCustomerFocused {
+    align-items: flex-start;
+    grid-template-columns: 1fr auto 1fr;
   }
 
-  .fakeNav {
-    background: $color-purple-600;
-    padding: $spacing-md;
-    display: flex;
-    align-items: center;
+  .headerCustomerFocused .logoContainer {
+    grid-column-start: 2;
+    inline-size: 84px;
+    block-size: 84px;
+    padding: $spacing-sm;
   }
 }
+
+.fakeNav {
+  background: $color-purple-600;
+  padding: $spacing-md;
+  display: flex;
+  align-items: center;
+}

package/src/Button/Button/Button.module.scss

@@ -6,182 +6,180 @@
 @import '../utils/mixins';
 @import '../utils/variables';
 
-@layer kz-components {
-  %button {
-    @include button-reset;
-
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-family: $typography-button-primary-font-family;
-    font-weight: $typography-button-primary-font-weight;
-    font-size: $typography-button-primary-font-size;
-    line-height: $typography-button-primary-line-height;
-    letter-spacing: $typography-button-primary-letter-spacing;
-    display: inline-flex;
-    // ^inline-flex is used over (block) flex here to fix an edge case where the parent element is display:grid
-    //  and this element is an <a>, causing the element to be full width.
-    align-items: center;
-    box-sizing: border-box;
-    min-height: $button-height;
-    border: $border-solid-border-width $border-solid-border-style;
-    border-radius: $border-solid-border-radius;
-    position: relative;
-    text-align: left;
-    cursor: pointer;
-    overflow: visible; // Required for the focus ring on IE11
-
-    &[href] {
-      text-decoration: none;
-    }
+%button {
+  @include button-reset;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: $typography-button-primary-font-family;
+  font-weight: $typography-button-primary-font-weight;
+  font-size: $typography-button-primary-font-size;
+  line-height: $typography-button-primary-line-height;
+  letter-spacing: $typography-button-primary-letter-spacing;
+  display: inline-flex;
+  // ^inline-flex is used over (block) flex here to fix an edge case where the parent element is display:grid
+  //  and this element is an <a>, causing the element to be full width.
+  align-items: center;
+  box-sizing: border-box;
+  min-height: $button-height;
+  border: $border-solid-border-width $border-solid-border-style;
+  border-radius: $border-solid-border-radius;
+  position: relative;
+  text-align: left;
+  cursor: pointer;
+  overflow: visible; // Required for the focus ring on IE11
+
+  &[href] {
+    text-decoration: none;
+  }
 
-    &:not(.disabled, .working) {
-      &:active {
-        transform: translateY(1px);
-      }
+  &:not(.disabled, .working) {
+    &:active {
+      transform: translateY(1px);
     }
+  }
+
+  &:focus {
+    outline: none;
+  }
 
-    &:focus {
-      outline: none;
+  &:focus-visible {
+    &::after {
+      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
+
+      content: '';
+      position: absolute;
+      background: transparent;
+      border-color: $color-blue-500;
+      border-radius: $border-focus-ring-border-radius;
+      border-width: $border-focus-ring-border-width;
+      border-style: $border-focus-ring-border-style;
+      inset: calc(-1 * #{$focus-ring-offset});
     }
+  }
 
+  &.reversed {
     &:focus-visible {
       &::after {
-        $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
-
-        content: '';
-        position: absolute;
-        background: transparent;
-        border-color: $color-blue-500;
-        border-radius: $border-focus-ring-border-radius;
-        border-width: $border-focus-ring-border-width;
-        border-style: $border-focus-ring-border-style;
-        inset: calc(-1 * #{$focus-ring-offset});
+        border-color: $color-blue-300;
       }
-    }
 
-    &.reversed {
-      &:focus-visible {
+      &.disabled,
+      &.working {
         &::after {
-          border-color: $color-blue-300;
-        }
-
-        &.disabled,
-        &.working {
-          &::after {
-            border-color: $color-gray-400;
-          }
+          border-color: $color-gray-400;
         }
       }
     }
+  }
 
-    &.disabled,
-    &.working {
-      cursor: default;
-      opacity: 30%;
+  &.disabled,
+  &.working {
+    cursor: default;
+    opacity: 30%;
 
-      &:focus-visible {
-        &::after {
-          border-color: $color-purple-800;
-        }
+    &:focus-visible {
+      &::after {
+        border-color: $color-purple-800;
       }
     }
-
-    #{$className--content} {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      padding: $button-vertical-padding calc(#{$spacing-md} - #{$border-solid-border-width});
-    }
   }
 
-  %variant-default {
-    background-color: $color-white;
-    border-color: $color-gray-500;
-    color: $color-purple-800;
-
-    @include enabled-pseudo-states-variant($color-gray-200, $color-gray-600);
+  #{$className--content} {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: $button-vertical-padding calc(#{$spacing-md} - #{$border-solid-border-width});
+  }
+}
 
-    &.reversed {
-      background-color: transparent;
-      border-color: rgba($color-white-rgb, 0.65);
-      color: $color-white;
+%variant-default {
+  background-color: $color-white;
+  border-color: $color-gray-500;
+  color: $color-purple-800;
 
-      @include enabled-pseudo-states-variant(rgba($color-white-rgb, 0.1), $color-white);
-    }
-  }
+  @include enabled-pseudo-states-variant($color-gray-200, $color-gray-600);
 
-  %variant-primary {
-    background-color: $color-blue-500;
-    border-color: $border-borderless-border-color;
+  &.reversed {
+    background-color: transparent;
+    border-color: rgba($color-white-rgb, 0.65);
     color: $color-white;
 
-    @include enabled-pseudo-states-variant($color-blue-600, $border-borderless-border-color);
+    @include enabled-pseudo-states-variant(rgba($color-white-rgb, 0.1), $color-white);
+  }
+}
 
-    &.reversed {
-      background-color: $color-green-300;
-      border-color: $border-borderless-border-color;
-      color: $color-purple-800;
+%variant-primary {
+  background-color: $color-blue-500;
+  border-color: $border-borderless-border-color;
+  color: $color-white;
 
-      @include enabled-pseudo-states-variant($color-green-400, $border-borderless-border-color);
-    }
-  }
+  @include enabled-pseudo-states-variant($color-blue-600, $border-borderless-border-color);
 
-  %variant-destructive {
-    background-color: $color-red-500;
+  &.reversed {
+    background-color: $color-green-300;
     border-color: $border-borderless-border-color;
-    color: $color-white;
+    color: $color-purple-800;
 
-    @include enabled-pseudo-states-variant($color-red-600, $border-borderless-border-color);
+    @include enabled-pseudo-states-variant($color-green-400, $border-borderless-border-color);
+  }
+}
 
-    &.reversed {
-      background-color: $color-red-300;
-      border-color: $border-borderless-border-color;
-      color: $color-purple-800;
+%variant-destructive {
+  background-color: $color-red-500;
+  border-color: $border-borderless-border-color;
+  color: $color-white;
 
-      @include enabled-pseudo-states-variant($color-red-400, $border-borderless-border-color);
-    }
-  }
+  @include enabled-pseudo-states-variant($color-red-600, $border-borderless-border-color);
 
-  %variant-secondary {
-    font-family: $typography-button-secondary-font-family;
-    font-weight: $typography-button-secondary-font-weight;
-    font-size: $typography-button-secondary-font-size;
-    line-height: $typography-button-secondary-line-height;
-    letter-spacing: $typography-button-secondary-letter-spacing;
-    background-color: transparent;
+  &.reversed {
+    background-color: $color-red-300;
     border-color: $border-borderless-border-color;
-    color: $color-blue-500;
+    color: $color-purple-800;
 
-    @include enabled-pseudo-states-variant($color-blue-100, $border-borderless-border-color);
+    @include enabled-pseudo-states-variant($color-red-400, $border-borderless-border-color);
+  }
+}
 
-    #{$className--content} {
-      padding-left: calc(#{$spacing-sm} - #{$border-solid-border-width});
-      padding-right: calc(#{$spacing-sm} - #{$border-solid-border-width});
-    }
+%variant-secondary {
+  font-family: $typography-button-secondary-font-family;
+  font-weight: $typography-button-secondary-font-weight;
+  font-size: $typography-button-secondary-font-size;
+  line-height: $typography-button-secondary-line-height;
+  letter-spacing: $typography-button-secondary-letter-spacing;
+  background-color: transparent;
+  border-color: $border-borderless-border-color;
+  color: $color-blue-500;
+
+  @include enabled-pseudo-states-variant($color-blue-100, $border-borderless-border-color);
+
+  #{$className--content} {
+    padding-left: calc(#{$spacing-sm} - #{$border-solid-border-width});
+    padding-right: calc(#{$spacing-sm} - #{$border-solid-border-width});
+  }
 
-    &.reversed {
-      border-color: $border-borderless-border-color;
-      color: $color-white;
+  &.reversed {
+    border-color: $border-borderless-border-color;
+    color: $color-white;
 
-      @include enabled-pseudo-states-variant(
-        rgba($color-white-rgb, 0.2),
-        $border-borderless-border-color
-      );
-    }
+    @include enabled-pseudo-states-variant(
+      rgba($color-white-rgb, 0.2),
+      $border-borderless-border-color
+    );
   }
+}
 
-  %variant-secondary-destructive {
-    color: $color-red-600;
+%variant-secondary-destructive {
+  color: $color-red-600;
 
-    @include enabled-pseudo-states-variant($color-red-100, $border-borderless-border-color);
-  }
+  @include enabled-pseudo-states-variant($color-red-100, $border-borderless-border-color);
+}
 
-  %variant-small {
-    min-height: $button-small-height;
+%variant-small {
+  min-height: $button-small-height;
 
-    #{$className--content} {
-      padding-top: $button-vertical-padding--small;
-      padding-bottom: $button-vertical-padding--small;
-    }
+  #{$className--content} {
+    padding-top: $button-vertical-padding--small;
+    padding-bottom: $button-vertical-padding--small;
   }
 }

package/src/Button/GenericButton/GenericButton.module.scss

@@ -4,114 +4,112 @@
 @import '../../Pagination/subcomponents/PaginationLink/PaginationLink.module';
 @import '../../Pagination/subcomponents/DirectionalLink/DirectionalLink.module';
 
-@layer kz-components {
-  .container {
-    display: inline-block;
-  }
-
-  .button {
-    @extend %button;
-  }
+.container {
+  display: inline-block;
+}
 
-  .default {
-    @extend %variant-default;
-  }
+.button {
+  @extend %button;
+}
 
-  .primary {
-    @extend %variant-primary;
-  }
+.default {
+  @extend %variant-default;
+}
 
-  .destructive {
-    @extend %variant-destructive;
-  }
+.primary {
+  @extend %variant-primary;
+}
 
-  .secondary {
-    @extend %variant-secondary;
+.destructive {
+  @extend %variant-destructive;
+}
 
-    &.destructive {
-      @extend %variant-secondary-destructive;
-    }
-  }
+.secondary {
+  @extend %variant-secondary;
 
-  .small {
-    @extend %variant-small;
+  &.destructive {
+    @extend %variant-secondary-destructive;
   }
+}
 
-  .label {
-    line-height: 1;
+.small {
+  @extend %variant-small;
+}
 
-    &:not(:first-child) {
-      @include ca-margin($start: 0.5em, $end: null);
-    }
+.label {
+  line-height: 1;
 
-    &:not(:last-child) {
-      @include ca-margin($end: 0.5em, $start: null);
-    }
+  &:not(:first-child) {
+    @include ca-margin($start: 0.5em, $end: null);
   }
 
-  .fullWidth {
-    width: 100%;
+  &:not(:last-child) {
+    @include ca-margin($end: 0.5em, $start: null);
+  }
+}
 
-    .button {
-      display: flex;
-      width: 100%;
-      justify-content: center;
-    }
+.fullWidth {
+  width: 100%;
 
-    #{$className--content} {
-      justify-content: center;
-    }
+  .button {
+    display: flex;
+    width: 100%;
+    justify-content: center;
   }
 
-  .iconWrapper {
-    height: 20px;
-    align-self: flex-start;
+  #{$className--content} {
+    justify-content: center;
   }
+}
 
-  .additionalContentWrapper {
-    display: inherit;
+.iconWrapper {
+  height: 20px;
+  align-self: flex-start;
+}
 
-    &:not(:last-child) {
-      @include ca-margin($end: 0.5em, $start: null);
-    }
-  }
+.additionalContentWrapper {
+  display: inherit;
 
-  .loadingSpinner {
-    // This is to fix a problem in safari where the svg stretched too high
-    svg {
-      height: 100%;
-    }
+  &:not(:last-child) {
+    @include ca-margin($end: 0.5em, $start: null);
   }
+}
 
-  .centeredLoadingSpinner {
-    position: absolute;
-    left: 0;
-    right: 0;
-    display: flex;
-    justify-content: center;
+.loadingSpinner {
+  // This is to fix a problem in safari where the svg stretched too high
+  svg {
+    height: 100%;
   }
+}
 
-  .hidden {
-    visibility: hidden;
-  }
+.centeredLoadingSpinner {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+}
 
-  .iconButton {
-    @extend %icon-button;
-  }
+.hidden {
+  visibility: hidden;
+}
 
-  .circleButton {
-    @extend %circle-button;
-  }
+.iconButton {
+  @extend %icon-button;
+}
 
-  .directionalLink {
-    @extend %directional-link;
-  }
+.circleButton {
+  @extend %circle-button;
+}
 
-  .paginationLink {
-    @extend %pagination-link;
-  }
+.directionalLink {
+  @extend %directional-link;
+}
 
-  .isPaginationLinkActive {
-    @extend %pagination-link--active;
-  }
+.paginationLink {
+  @extend %pagination-link;
+}
+
+.isPaginationLinkActive {
+  @extend %pagination-link--active;
 }