@kaizen/components 1.78.0 → 1.79.0

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

@@ -1,98 +1,100 @@
-.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;
+@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;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &:focus-visible {
-    color: var(--color-blue-500);
-    border-color: var(--color-blue-500);
-  }
+    &:focus-visible {
+      color: var(--color-blue-500);
+      border-color: var(--color-blue-500);
+    }
 
-  &[data-disabled] {
-    opacity: 0.3;
-  }
+    &[data-disabled] {
+      opacity: 0.3;
+    }
+
+    &:not(:first-child) {
+      margin-inline-start: var(--spacing-xs);
+    }
 
-  &:not(:first-child) {
-    margin-inline-start: var(--spacing-xs);
+    &:not([data-disabled]):hover {
+      background: var(--color-blue-200);
+      color: var(--color-blue-500);
+    }
+
+    &:not([data-disabled]):active {
+      background: var(--color-blue-100);
+    }
   }
 
-  &:not([data-disabled]):hover {
-    background: var(--color-blue-200);
+  .tab[data-selected] {
+    position: relative;
     color: var(--color-blue-500);
-  }
 
-  &:not([data-disabled]):active {
-    background: var(--color-blue-100);
+    &::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;
+    }
   }
-}
-
-.tab[data-selected] {
-  position: relative;
-  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;
+  .badge {
+    margin-inline-start: var(--spacing-sm);
+    display: inline-flex;
+    align-items: center;
   }
-}
 
-.badge {
-  margin-inline-start: var(--spacing-sm);
-  display: inline-flex;
-  align-items: center;
-}
+  @media (forced-colors: active) {
+    .tab {
+      border: 2px solid transparent;
 
-@media (forced-colors: active) {
-  .tab {
-    border: 2px solid transparent;
+      &: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;
+      }
+    }
 
-    &:focus-visible::after {
+    .tab[data-selected]::before {
+      /* High contrast also doesn't see the pseudo element created to show the active tab. */
       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;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-bottom: 2px solid transparent;
     }
   }
-
-  .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,67 +1,69 @@
-.container {
-  position: relative;
-}
+@layer kz-components {
+  .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,12 +1,14 @@
-.tabPanel {
-  border: 2px solid transparent;
+@layer kz-components {
+  .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,7 +1,9 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.removableTag {
-  padding: $spacing-4 $spacing-4 $spacing-4 $spacing-8;
-  padding-block: $spacing-4;
-  padding-inline: $spacing-8 $spacing-4;
+@layer kz-components {
+  .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,33 +2,35 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '../../../../../styles/utils/button-reset';
 
-.removeButton {
-  @include button-reset;
+@layer kz-components {
+  .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,78 +2,80 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/typography';
 
-.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;
-}
+@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;
+  }
 
-.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;
 
-  .iconContainer {
+  .yellow {
+    background-color: $color-yellow-100;
     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,43 +1,45 @@
 @import '~@kaizen/design-tokens/sass/shadow';
 @import '~@kaizen/design-tokens/sass/color';
 
-.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;
+@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;
+    }
   }
 }