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

package/src/__next__/Tabs/subcomponents/Tab/Tab.module.css

@@ -1,100 +1,98 @@
-@layer kz-components {
-  .tab {
-    display: inline-flex;
-    align-items: center;
-    border: 2px solid transparent;
-    border-bottom: 0;
-    border-top-left-radius: var(--border-borderless-border-radius);
-    border-top-right-radius: var(--border-borderless-border-radius);
-    background: var(--color-white);
-    white-space: nowrap;
-    text-decoration: none;
-    padding: var(--spacing-md) var(--spacing-md);
-    margin: 0;
-    font-family: var(--typography-heading-4-font-family);
-    font-size: var(--typography-heading-4-font-size);
-    font-weight: var(--typography-heading-4-font-weight);
-    line-height: var(--typography-heading-4-line-height);
-    letter-spacing: var(--typography-heading-4-letter-spacing);
-    color: var(--color-purple-800);
-    cursor: default;
-
-    &:focus {
-      outline: none;
-    }
+.tab {
+  display: inline-flex;
+  align-items: center;
+  border: 2px solid transparent;
+  border-bottom: 0;
+  border-top-left-radius: var(--border-borderless-border-radius);
+  border-top-right-radius: var(--border-borderless-border-radius);
+  background: var(--color-white);
+  white-space: nowrap;
+  text-decoration: none;
+  padding: var(--spacing-md) var(--spacing-md);
+  margin: 0;
+  font-family: var(--typography-heading-4-font-family);
+  font-size: var(--typography-heading-4-font-size);
+  font-weight: var(--typography-heading-4-font-weight);
+  line-height: var(--typography-heading-4-line-height);
+  letter-spacing: var(--typography-heading-4-letter-spacing);
+  color: var(--color-purple-800);
+  cursor: default;
 
-    &:focus-visible {
-      color: var(--color-blue-500);
-      border-color: var(--color-blue-500);
-    }
-
-    &[data-disabled] {
-      opacity: 0.3;
-    }
+  &:focus {
+    outline: none;
+  }
 
-    &:not(:first-child) {
-      margin-inline-start: var(--spacing-xs);
-    }
+  &:focus-visible {
+    color: var(--color-blue-500);
+    border-color: var(--color-blue-500);
+  }
 
-    &:not([data-disabled]):hover {
-      background: var(--color-blue-200);
-      color: var(--color-blue-500);
-    }
+  &[data-disabled] {
+    opacity: 0.3;
+  }
 
-    &:not([data-disabled]):active {
-      background: var(--color-blue-100);
-    }
+  &:not(:first-child) {
+    margin-inline-start: var(--spacing-xs);
   }
 
-  .tab[data-selected] {
-    position: relative;
+  &:not([data-disabled]):hover {
+    background: var(--color-blue-200);
     color: var(--color-blue-500);
+  }
 
-    &::before {
-      content: '';
-      display: block;
-      border-top-left-radius: 5px;
-      border-top-right-radius: 5px;
-      background-color: currentcolor;
-      height: 5px;
-      width: 100%;
-      position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
+  &:not([data-disabled]):active {
+    background: var(--color-blue-100);
   }
+}
+
+.tab[data-selected] {
+  position: relative;
+  color: var(--color-blue-500);
 
-  .badge {
-    margin-inline-start: var(--spacing-sm);
-    display: inline-flex;
-    align-items: center;
+  &::before {
+    content: '';
+    display: block;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    background-color: currentcolor;
+    height: 5px;
+    width: 100%;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
   }
+}
 
-  @media (forced-colors: active) {
-    .tab {
-      border: 2px solid transparent;
+.badge {
+  margin-inline-start: var(--spacing-sm);
+  display: inline-flex;
+  align-items: center;
+}
 
-      &:focus-visible::after {
-        content: '';
-        position: absolute;
-        background: transparent;
-        border-radius: var(--border-focus-ring-border-radius);
-        border-width: var(--border-focus-ring-border-width);
-        border-style: var(--border-focus-ring-border-style);
-        border-color: transparent;
-        inset: -2px;
-      }
-    }
+@media (forced-colors: active) {
+  .tab {
+    border: 2px solid transparent;
 
-    .tab[data-selected]::before {
-      /* High contrast also doesn't see the pseudo element created to show the active tab. */
+    &:focus-visible::after {
       content: '';
       position: absolute;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border-bottom: 2px solid transparent;
+      background: transparent;
+      border-radius: var(--border-focus-ring-border-radius);
+      border-width: var(--border-focus-ring-border-width);
+      border-style: var(--border-focus-ring-border-style);
+      border-color: transparent;
+      inset: -2px;
     }
   }
+
+  .tab[data-selected]::before {
+    /* High contrast also doesn't see the pseudo element created to show the active tab. */
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-bottom: 2px solid transparent;
+  }
 }

package/src/__next__/Tabs/subcomponents/TabList/TabList.module.css

@@ -1,69 +1,67 @@
-@layer kz-components {
-  .container {
-    position: relative;
-  }
+.container {
+  position: relative;
+}
 
-  .tabList {
-    border-bottom: 1px solid var(--color-gray-300);
-    padding: var(--spacing-6) 0 0;
-    width: 100%;
-    height: 100%;
-    overflow-x: scroll;
-    white-space: nowrap;
-    scrollbar-width: none;
-    scroll-behavior: smooth;
-  }
+.tabList {
+  border-bottom: 1px solid var(--color-gray-300);
+  padding: var(--spacing-6) 0 0;
+  width: 100%;
+  height: 100%;
+  overflow-x: scroll;
+  white-space: nowrap;
+  scrollbar-width: none;
+  scroll-behavior: smooth;
+}
 
-  .noPadding {
-    padding: 0;
-  }
+.noPadding {
+  padding: 0;
+}
 
-  .leftArrow,
-  .rightArrow {
-    --icon-size: 24;
+.leftArrow,
+.rightArrow {
+  --icon-size: 24;
 
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    z-index: 10000;
-    background: var(--color-white);
-    inset-block: 0 1px;
-    width: 48px;
-    cursor: default;
-    user-select: none;
-  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  z-index: 10000;
+  background: var(--color-white);
+  inset-block: 0 1px;
+  width: 48px;
+  cursor: default;
+  user-select: none;
+}
 
-  /*
+/*
  * Note: we're purposefully using directional properties instead of start/end for positioning and styling related to the carousel arrows
 */
-  .leftArrow {
-    left: 0;
-  }
+.leftArrow {
+  left: 0;
+}
 
-  .leftArrow,
-  .leftArrow:hover {
-    border-right: 1px solid var(--color-gray-300);
-  }
+.leftArrow,
+.leftArrow:hover {
+  border-right: 1px solid var(--color-gray-300);
+}
 
-  .rightArrow {
-    right: 0;
-  }
+.rightArrow {
+  right: 0;
+}
 
-  .rightArrow,
-  .rightArrow:hover {
-    border-left: 1px solid var(--color-gray-300);
-  }
+.rightArrow,
+.rightArrow:hover {
+  border-left: 1px solid var(--color-gray-300);
+}
 
-  .leftArrow:hover,
-  .rightArrow:hover {
-    background: var(--color-blue-200);
-    color: var(--color-blue-500);
-  }
+.leftArrow:hover,
+.rightArrow:hover {
+  background: var(--color-blue-200);
+  color: var(--color-blue-500);
+}
 
-  .leftArrow:active,
-  .rightArrow:active {
-    background: var(--color-blue-100);
-    color: var(--color-blue-500);
-  }
+.leftArrow:active,
+.rightArrow:active {
+  background: var(--color-blue-100);
+  color: var(--color-blue-500);
 }

package/src/__next__/Tabs/subcomponents/TabPanel/TabPanel.module.css

@@ -1,14 +1,12 @@
-@layer kz-components {
-  .tabPanel {
-    border: 2px solid transparent;
+.tabPanel {
+  border: 2px solid transparent;
 
-    &:focus {
-      outline: none;
-    }
+  &:focus {
+    outline: none;
+  }
 
-    &:focus-visible {
-      border-color: var(--color-blue-500);
-      border-radius: var(--border-focus-ring-border-radius);
-    }
+  &:focus-visible {
+    border-color: var(--color-blue-500);
+    border-radius: var(--border-focus-ring-border-radius);
   }
 }

package/src/__next__/Tag/RemovableTag/RemovableTag.module.scss

@@ -1,9 +1,7 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .removableTag {
-    padding: $spacing-4 $spacing-4 $spacing-4 $spacing-8;
-    padding-block: $spacing-4;
-    padding-inline: $spacing-8 $spacing-4;
-  }
+.removableTag {
+  padding: $spacing-4 $spacing-4 $spacing-4 $spacing-8;
+  padding-block: $spacing-4;
+  padding-inline: $spacing-8 $spacing-4;
 }

package/src/__next__/Tag/RemovableTag/subcomponents/RemoveButton.module.scss

@@ -2,35 +2,33 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '../../../../../styles/utils/button-reset';
 
-@layer kz-components {
-  .removeButton {
-    @include button-reset;
+.removeButton {
+  @include button-reset;
 
-    position: relative;
-    display: inline-flex;
-    border-radius: 50%;
-    color: rgba($color-purple-800-rgb, 0.7);
+  position: relative;
+  display: inline-flex;
+  border-radius: 50%;
+  color: rgba($color-purple-800-rgb, 0.7);
 
-    &:focus,
-    &:focus-visible {
-      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-        var(--color-blue-500);
-      outline-offset: 1px;
-    }
+  &:focus,
+  &:focus-visible {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 1px;
+  }
 
-    &::before {
-      position: absolute;
-      content: '';
-      inset: -5px;
-      border-radius: 50%;
-    }
+  &::before {
+    position: absolute;
+    content: '';
+    inset: -5px;
+    border-radius: 50%;
+  }
 
-    &:hover,
-    &:focus,
-    &:focus-visible {
-      background-color: rgba($color-gray-600-rgb, 0.2);
-      cursor: pointer;
-      color: $color-purple-800;
-    }
+  &:hover,
+  &:focus,
+  &:focus-visible {
+    background-color: rgba($color-gray-600-rgb, 0.2);
+    cursor: pointer;
+    color: $color-purple-800;
   }
 }

package/src/__next__/Tag/Tag/Tag.module.scss

@@ -2,80 +2,78 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/typography';
 
-@layer kz-components {
-  .tag {
-    display: inline-flex;
-    align-items: center;
-    padding: $spacing-4 $spacing-8;
-    gap: $spacing-4;
-    border-radius: 28px;
-    font-family: $typography-paragraph-intro-lede-font-family;
-    font-size: $typography-paragraph-small-font-size;
-    font-weight: $typography-paragraph-small-font-weight;
-    line-height: $typography-paragraph-small-line-height;
-    white-space: nowrap;
-  }
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: $spacing-4 $spacing-8;
+  gap: $spacing-4;
+  border-radius: 28px;
+  font-family: $typography-paragraph-intro-lede-font-family;
+  font-size: $typography-paragraph-small-font-size;
+  font-weight: $typography-paragraph-small-font-weight;
+  line-height: $typography-paragraph-small-line-height;
+  white-space: nowrap;
+}
 
-  .iconContainer {
-    display: inline-flex;
-  }
+.iconContainer {
+  display: inline-flex;
+}
 
-  .gray {
-    background-color: $color-gray-300;
-    color: $color-purple-800;
-  }
+.gray {
+  background-color: $color-gray-300;
+  color: $color-purple-800;
+}
 
-  .blue {
-    background-color: $color-blue-100;
-    color: $color-blue-700;
+.blue {
+  background-color: $color-blue-100;
+  color: $color-blue-700;
 
-    .iconContainer {
-      color: $color-blue-500;
-    }
+  .iconContainer {
+    color: $color-blue-500;
   }
+}
 
-  .green {
-    background-color: $color-green-100;
-    color: $color-green-700;
+.green {
+  background-color: $color-green-100;
+  color: $color-green-700;
 
-    .iconContainer {
-      color: $color-green-500;
-    }
+  .iconContainer {
+    color: $color-green-500;
   }
+}
 
-  .yellow {
-    background-color: $color-yellow-100;
-    color: $color-yellow-700;
+.yellow {
+  background-color: $color-yellow-100;
+  color: $color-yellow-700;
 
-    .iconContainer {
-      color: $color-yellow-700;
-    }
+  .iconContainer {
+    color: $color-yellow-700;
   }
+}
 
-  .orange {
-    background-color: $color-orange-100;
-    color: $color-orange-700;
+.orange {
+  background-color: $color-orange-100;
+  color: $color-orange-700;
 
-    .iconContainer {
-      color: $color-orange-500;
-    }
+  .iconContainer {
+    color: $color-orange-500;
   }
+}
 
-  .red {
-    background-color: $color-red-100;
-    color: $color-red-700;
+.red {
+  background-color: $color-red-100;
+  color: $color-red-700;
 
-    .iconContainer {
-      color: $color-red-500;
-    }
+  .iconContainer {
+    color: $color-red-500;
   }
+}
 
-  .purple {
-    background-color: $color-purple-100;
-    color: $color-purple-700;
+.purple {
+  background-color: $color-purple-100;
+  color: $color-purple-700;
 
-    .iconContainer {
-      color: $color-purple-500;
-    }
+  .iconContainer {
+    color: $color-purple-500;
   }
 }

package/src/__next__/Tooltip/OverlayArrow.module.scss

@@ -1,45 +1,43 @@
 @import '~@kaizen/design-tokens/sass/shadow';
 @import '~@kaizen/design-tokens/sass/color';
 
-@layer kz-components {
-  .overlayArrow {
-    display: flex;
-
-    // for correct arrow positioning with rounded corners we need to do bit trickery here
-    // the positioning is done in js in RAC and works by first getting size of arrow without data-placement, and isn't recomputed after update
-    // so we first set padding on arrow from all sides (that'll be used for start position computation)
-    // and then we remove it from the oposite axis
-    padding: 8px;
-
-    &[data-placement='top'],
-    &[data-placement='bottom'] {
-      padding: 0 8px;
-    }
-
-    &[data-placement='left'],
-    &[data-placement='right'] {
-      padding: 8px 0;
-    }
-
-    path {
-      fill: $color-purple-800;
-      box-shadow: $shadow-small-box-shadow;
-    }
-
-    &[data-placement='right'] svg {
-      transform: rotate(90deg);
-    }
-
-    &[data-placement='bottom'] svg {
-      transform: rotate(180deg);
-    }
-
-    &[data-placement='left'] svg {
-      transform: rotate(270deg);
-    }
-
-    &.reversed path {
-      fill: $color-white;
-    }
+.overlayArrow {
+  display: flex;
+
+  // for correct arrow positioning with rounded corners we need to do bit trickery here
+  // the positioning is done in js in RAC and works by first getting size of arrow without data-placement, and isn't recomputed after update
+  // so we first set padding on arrow from all sides (that'll be used for start position computation)
+  // and then we remove it from the oposite axis
+  padding: 8px;
+
+  &[data-placement='top'],
+  &[data-placement='bottom'] {
+    padding: 0 8px;
+  }
+
+  &[data-placement='left'],
+  &[data-placement='right'] {
+    padding: 8px 0;
+  }
+
+  path {
+    fill: $color-purple-800;
+    box-shadow: $shadow-small-box-shadow;
+  }
+
+  &[data-placement='right'] svg {
+    transform: rotate(90deg);
+  }
+
+  &[data-placement='bottom'] svg {
+    transform: rotate(180deg);
+  }
+
+  &[data-placement='left'] svg {
+    transform: rotate(270deg);
+  }
+
+  &.reversed path {
+    fill: $color-white;
   }
 }