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

package/src/Pagination/Pagination.module.scss

@@ -2,52 +2,50 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/border';
 
-@layer kz-components {
-  // Pagination
-  .container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
+// Pagination
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.pagesIndicatorWrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+}
+
+.arrowIconWrapper {
+  height: 36px;
+  width: 36px;
+  border-radius: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-300;
+  margin: 0 5px;
+  background-color: transparent;
+  color: $color-blue-500;
+  box-sizing: border-box;
+
+  &:disabled {
+    opacity: 35%;
+    pointer-events: none;
   }
 
-  .pagesIndicatorWrapper {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
+  &:hover {
+    background-color: $color-blue-100;
   }
 
-  .arrowIconWrapper {
-    height: 36px;
-    width: 36px;
-    border-radius: 18px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-300;
-    margin: 0 5px;
-    background-color: transparent;
-    color: $color-blue-500;
-    box-sizing: border-box;
-
-    &:disabled {
-      opacity: 35%;
-      pointer-events: none;
-    }
+  &:focus {
+    background-color: $color-blue-200;
 
-    &:hover {
-      background-color: $color-blue-100;
+    &:focus-visible {
+      outline: none;
     }
 
-    &:focus {
-      background-color: $color-blue-200;
-
-      &:focus-visible {
-        outline: none;
-      }
-
-      .pageIndicatorFocusRing {
-        border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
-      }
+    .pageIndicatorFocusRing {
+      border: $border-focus-ring-border-width $border-focus-ring-border-style $color-blue-500;
     }
   }
 }

package/src/Pagination/subcomponents/DirectionalLink/DirectionalLink.module.scss

@@ -3,20 +3,18 @@
 @import '../../../Button/utils/mixins';
 @import '../../../Button/utils/variables';
 
-@layer kz-components {
-  %directional-link {
-    border: $border-solid-border-width solid $color-blue-300;
+%directional-link {
+  border: $border-solid-border-width solid $color-blue-300;
 
-    @include enabled-pseudo-states-variant($color-blue-100, $color-blue-400);
+  @include enabled-pseudo-states-variant($color-blue-100, $color-blue-400);
 
-    &:disabled {
-      border-color: $color-blue-300;
-    }
+  &:disabled {
+    border-color: $color-blue-300;
+  }
 
-    &.reversed {
-      &:disabled {
-        border-color: $color-white;
-      }
+  &.reversed {
+    &:disabled {
+      border-color: $color-white;
     }
   }
 }

package/src/Pagination/subcomponents/PaginationLink/PaginationLink.module.scss

@@ -5,79 +5,77 @@
 @import '../../../Button/utils/mixins';
 @import '../../../Button/utils/variables';
 
-@layer kz-components {
-  %circle-button {
-    width: 40px;
-    height: 40px;
-    min-height: auto;
-    margin: 0 var(--spacing-4);
-    border-radius: 50%;
-
-    &:not(:disabled) {
-      &:focus-visible {
-        &::after {
-          border-radius: 50%;
-        }
+%circle-button {
+  width: 40px;
+  height: 40px;
+  min-height: auto;
+  margin: 0 var(--spacing-4);
+  border-radius: 50%;
+
+  &:not(:disabled) {
+    &:focus-visible {
+      &::after {
+        border-radius: 50%;
       }
     }
+  }
 
-    #{$className--content} {
-      height: auto;
-      color: $color-blue-500;
-    }
+  #{$className--content} {
+    height: auto;
+    color: $color-blue-500;
+  }
 
-    &.reversed {
-      #{$className--content} {
-        color: $color-white;
-      }
+  &.reversed {
+    #{$className--content} {
+      color: $color-white;
     }
   }
+}
 
-  %pagination-link {
-    font-weight: $typography-paragraph-body-font-weight;
-    font-size: $typography-button-secondary-font-size;
-    border-color: $border-borderless-border-color;
+%pagination-link {
+  font-weight: $typography-paragraph-body-font-weight;
+  font-size: $typography-button-secondary-font-size;
+  border-color: $border-borderless-border-color;
 
-    @include enabled-pseudo-states-variant($color-blue-100, $border-borderless-border-color);
+  @include enabled-pseudo-states-variant($color-blue-100, $border-borderless-border-color);
 
-    #{$className--content} {
-      justify-content: center;
-      width: 100%;
-      padding: 0;
-    }
+  #{$className--content} {
+    justify-content: center;
+    width: 100%;
+    padding: 0;
+  }
 
-    &.reversed {
-      border-color: $border-borderless-border-color;
+  &.reversed {
+    border-color: $border-borderless-border-color;
 
-      @include enabled-pseudo-states-variant($border-color: $border-borderless-border-color);
-    }
+    @include enabled-pseudo-states-variant($border-color: $border-borderless-border-color);
   }
+}
 
-  %pagination-link--active {
-    background-color: $color-blue-500;
-    border-color: $border-borderless-border-color;
-    cursor: initial;
+%pagination-link--active {
+  background-color: $color-blue-500;
+  border-color: $border-borderless-border-color;
+  cursor: initial;
 
-    @include enabled-pseudo-states-variant($color-blue-500, $border-borderless-border-color);
+  @include enabled-pseudo-states-variant($color-blue-500, $border-borderless-border-color);
 
-    &:not(:disabled) {
-      &:active {
-        transform: unset;
-      }
+  &:not(:disabled) {
+    &:active {
+      transform: unset;
     }
+  }
 
-    #{$className--content} {
-      color: $color-white;
-    }
+  #{$className--content} {
+    color: $color-white;
+  }
 
-    &.reversed {
-      background-color: $color-white;
+  &.reversed {
+    background-color: $color-white;
 
-      @include enabled-pseudo-states-variant($color-white);
+    @include enabled-pseudo-states-variant($color-white);
 
-      #{$className--content} {
-        color: $color-purple-800;
-      }
+    #{$className--content} {
+      color: $color-purple-800;
     }
   }
 }

package/src/Pagination/subcomponents/TruncateIndicator/TruncateIndicator.module.css

@@ -1,11 +1,9 @@
-@layer kz-components {
-  .truncateIndicatorWrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    background-color: transparent;
-    color: rgb(var(color-purple-800-rgb), 0.7);
-    margin: 0 var(--spacing-4);
-  }
+.truncateIndicatorWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  background-color: transparent;
+  color: rgba(var(color-purple-800-rgb), 0.7);
+  margin: 0 var(--spacing-4);
 }