@kaizen/components 1.78.0 → 1.79.0

package/src/Tabs/subcomponents/Tab.module.scss

@@ -3,101 +3,103 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/typography';
 
-.tab {
-  display: inline-flex;
-  align-items: center;
-  border: 0;
-  border-top: 2px solid transparent;
-  border-left: 2px solid transparent;
-  border-right: 2px solid transparent;
-  border-top-left-radius: $border-borderless-border-radius;
-  border-top-right-radius: $border-borderless-border-radius;
-  background: $color-white;
-  white-space: nowrap;
-  text-decoration: none;
-  padding: $spacing-md $spacing-md;
-  margin: 0;
-  font-family: $typography-heading-4-font-family;
-  font-size: $typography-heading-4-font-size;
-  font-weight: $typography-heading-4-font-weight;
-  line-height: $typography-heading-4-line-height;
-  letter-spacing: $typography-heading-4-letter-spacing;
-  color: $color-purple-800;
+@layer kz-components {
+  .tab {
+    display: inline-flex;
+    align-items: center;
+    border: 0;
+    border-top: 2px solid transparent;
+    border-left: 2px solid transparent;
+    border-right: 2px solid transparent;
+    border-top-left-radius: $border-borderless-border-radius;
+    border-top-right-radius: $border-borderless-border-radius;
+    background: $color-white;
+    white-space: nowrap;
+    text-decoration: none;
+    padding: $spacing-md $spacing-md;
+    margin: 0;
+    font-family: $typography-heading-4-font-family;
+    font-size: $typography-heading-4-font-size;
+    font-weight: $typography-heading-4-font-weight;
+    line-height: $typography-heading-4-line-height;
+    letter-spacing: $typography-heading-4-letter-spacing;
+    color: $color-purple-800;
 
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &:focus-visible {
-    background: $color-blue-100;
-    color: $color-blue-500;
-    border-color: $color-blue-500;
-  }
+    &:focus-visible {
+      background: $color-blue-100;
+      color: $color-blue-500;
+      border-color: $color-blue-500;
+    }
 
-  &:disabled {
-    opacity: 30%;
-  }
+    &:disabled {
+      opacity: 30%;
+    }
+
+    &:not(:first-child) {
+      margin-inline-start: $spacing-xs;
+    }
 
-  &:not(:first-child) {
-    margin-inline-start: $spacing-xs;
+    &:not(:disabled):hover {
+      background: $color-blue-100;
+      color: $color-blue-500;
+    }
   }
 
-  &:not(:disabled):hover {
-    background: $color-blue-100;
+  .tab[data-selected] {
+    position: relative;
     color: $color-blue-500;
-  }
-}
 
-.tab[data-selected] {
-  position: relative;
-  color: $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;
+    }
+  }
 
-  &::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: $spacing-sm;
+    display: inline-flex;
+    align-items: center;
   }
-}
 
-.badge {
-  margin-inline-start: $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 {
+        $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
 
-    &:focus-visible::after {
-      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
+        content: '';
+        position: absolute;
+        background: transparent;
+        border-radius: $border-focus-ring-border-radius;
+        border-width: $border-focus-ring-border-width;
+        border-style: $border-focus-ring-border-style;
+        border-color: transparent;
+        inset: calc(-1 * #{$focus-ring-offset});
+      }
+    }
 
+    .tab.selected::before {
+      // High contrast also doesn't see the pseudo element created to show the active tab.
       content: '';
       position: absolute;
-      background: transparent;
-      border-radius: $border-focus-ring-border-radius;
-      border-width: $border-focus-ring-border-width;
-      border-style: $border-focus-ring-border-style;
-      border-color: transparent;
-      inset: calc(-1 * #{$focus-ring-offset});
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-bottom: 2px solid transparent;
     }
   }
-
-  .tab.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/Tabs/subcomponents/TabList.module.scss

@@ -1,11 +1,13 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/color';
 
-.tabList {
-  border-bottom: 1px solid rgba($color-gray-600-rgb, 0.1);
-  padding: $spacing-xs $spacing-md 0;
-}
+@layer kz-components {
+  .tabList {
+    border-bottom: 1px solid rgba($color-gray-600-rgb, 0.1);
+    padding: $spacing-xs $spacing-md 0;
+  }
 
-.tabList.noPadding {
-  padding: 0;
+  .tabList.noPadding {
+    padding: 0;
+  }
 }

package/src/Tabs/subcomponents/TabPanel.module.scss

@@ -1,15 +1,17 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/color';
 
-.tabPanel {
-  border: 2px solid transparent;
+@layer kz-components {
+  .tabPanel {
+    border: 2px solid transparent;
 
-  &:focus {
-    outline: none;
-  }
+    &:focus {
+      outline: none;
+    }
 
-  &:focus-visible {
-    border-color: $color-blue-500;
-    border-radius: $border-focus-ring-border-radius;
+    &:focus-visible {
+      border-color: $color-blue-500;
+      border-radius: $border-focus-ring-border-radius;
+    }
   }
 }

package/src/Tag/Tag.module.scss

@@ -4,210 +4,212 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '../../styles/utils/button-reset';
 
-$medium: calc(#{$spacing-md} * 1.25);
-$small: $spacing-md;
-
-.root {
-  margin-inline-end: calc(#{$spacing-md} * 0.5);
-  font-size: $typography-paragraph-small-font-size;
-  font-weight: $typography-paragraph-small-font-weight;
-  letter-spacing: $typography-paragraph-small-letter-spacing;
-  color: $color-purple-800;
-  display: inline-block;
-  border: $border-borderless-border-width $border-borderless-border-style
-    $border-borderless-border-color;
-  border-radius: calc(#{$spacing-md} * 0.75);
-  padding: 0 calc(#{$spacing-md} * 0.4);
-  box-sizing: border-box;
-
-  &.profile {
-    padding-left: calc(#{$spacing-md} * 0.2);
+@layer kz-components {
+  $medium: calc(#{$spacing-md} * 1.25);
+  $small: $spacing-md;
+
+  .root {
+    margin-inline-end: calc(#{$spacing-md} * 0.5);
+    font-size: $typography-paragraph-small-font-size;
+    font-weight: $typography-paragraph-small-font-weight;
+    letter-spacing: $typography-paragraph-small-letter-spacing;
+    color: $color-purple-800;
+    display: inline-block;
+    border: $border-borderless-border-width $border-borderless-border-style
+      $border-borderless-border-color;
+    border-radius: calc(#{$spacing-md} * 0.75);
+    padding: 0 calc(#{$spacing-md} * 0.4);
+    box-sizing: border-box;
+
+    &.profile {
+      padding-left: calc(#{$spacing-md} * 0.2);
+    }
   }
-}
-
-.layoutContainer {
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.validationIcon {
-  align-items: center;
-  display: flex;
-  color: $color-white;
-  margin-inline: calc(#{$spacing-md} * -0.15) $spacing-xs;
-}
-
-.profile {
-  margin-inline: calc(#{$spacing-md} * -0.15) $spacing-xs;
-  display: inline-flex;
-  align-items: center;
-}
 
-.textContent {
-  margin-top: -1px;
-  font-family: $typography-paragraph-small-font-family;
-  font-weight: $typography-paragraph-small-font-weight;
-  font-size: $typography-paragraph-small-font-size;
-  line-height: $typography-paragraph-small-line-height;
-  letter-spacing: $typography-paragraph-small-letter-spacing;
-  white-space: nowrap;
-}
+  .layoutContainer {
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
 
-.iconWrapper {
-  --icon-size: 16;
+  .validationIcon {
+    align-items: center;
+    display: flex;
+    color: $color-white;
+    margin-inline: calc(#{$spacing-md} * -0.15) $spacing-xs;
+  }
 
-  position: relative;
-  height: 16px;
-  width: 16px;
-}
+  .profile {
+    margin-inline: calc(#{$spacing-md} * -0.15) $spacing-xs;
+    display: inline-flex;
+    align-items: center;
+  }
 
-.dismissButton {
-  @include button-reset;
+  .textContent {
+    margin-top: -1px;
+    font-family: $typography-paragraph-small-font-family;
+    font-weight: $typography-paragraph-small-font-weight;
+    font-size: $typography-paragraph-small-font-size;
+    line-height: $typography-paragraph-small-line-height;
+    letter-spacing: $typography-paragraph-small-letter-spacing;
+    white-space: nowrap;
+  }
 
-  position: relative;
-  display: flex;
-  height: 100%;
-  align-items: center;
-  padding: 0 $spacing-xs;
-  margin-inline: -0.225rem -0.6625rem;
-  color: rgba($color-purple-800-rgb, 0.7);
-  cursor: pointer;
+  .iconWrapper {
+    --icon-size: 16;
 
-  &:hover {
-    color: $color-purple-800;
+    position: relative;
+    height: 16px;
+    width: 16px;
   }
 
-  &:active {
-    color: $color-purple-800;
-  }
+  .dismissButton {
+    @include button-reset;
 
-  svg {
     position: relative;
-  }
+    display: flex;
+    height: 100%;
+    align-items: center;
+    padding: 0 $spacing-xs;
+    margin-inline: -0.225rem -0.6625rem;
+    color: rgba($color-purple-800-rgb, 0.7);
+    cursor: pointer;
+
+    &:hover {
+      color: $color-purple-800;
+    }
 
-  &:focus {
-    outline: none;
-  }
+    &:active {
+      color: $color-purple-800;
+    }
 
-  &:focus-visible .iconWrapper {
-    color: $color-purple-800;
+    svg {
+      position: relative;
+    }
+
+    &:focus {
+      outline: none;
+    }
 
-    &::after {
-      $focus-ring-offset: calc((#{$border-focus-ring-border-width}));
-
-      content: '';
-      position: absolute;
-      background: transparent;
-      border-radius: 50%;
-      border-width: $border-focus-ring-border-width;
-      border-style: $border-focus-ring-border-style;
-      border-color: $color-blue-500;
-      inset: calc(-1 * #{$focus-ring-offset});
+    &:focus-visible .iconWrapper {
+      color: $color-purple-800;
+
+      &::after {
+        $focus-ring-offset: calc((#{$border-focus-ring-border-width}));
+
+        content: '';
+        position: absolute;
+        background: transparent;
+        border-radius: 50%;
+        border-width: $border-focus-ring-border-width;
+        border-style: $border-focus-ring-border-style;
+        border-color: $color-blue-500;
+        inset: calc(-1 * #{$focus-ring-offset});
+      }
     }
   }
-}
 
-.background {
-  // As our icons are only one-tone, this span places
-  // a white background under the dismissible icon to
-  // give the illusion of a background colour that is
-  // different to the rest of the tag
-  position: absolute;
-  display: inline-block;
-  width: calc(#{$spacing-xs} + 0.125rem); // optical adjustment
-  height: calc(#{$spacing-xs} + 0.125rem); // optical adjustment
-  background-color: white;
-  left: 10px;
-  top: 10px;
-}
+  .background {
+    // As our icons are only one-tone, this span places
+    // a white background under the dismissible icon to
+    // give the illusion of a background colour that is
+    // different to the rest of the tag
+    position: absolute;
+    display: inline-block;
+    width: calc(#{$spacing-xs} + 0.125rem); // optical adjustment
+    height: calc(#{$spacing-xs} + 0.125rem); // optical adjustment
+    background-color: white;
+    left: 10px;
+    top: 10px;
+  }
 
-.truncate {
-  text-overflow: ellipsis;
-  overflow-x: hidden;
-  white-space: nowrap;
-}
+  .truncate {
+    text-overflow: ellipsis;
+    overflow-x: hidden;
+    white-space: nowrap;
+  }
 
-.inline {
-  margin: 0;
-}
+  .inline {
+    margin: 0;
+  }
 
-.medium {
-  height: $medium;
-}
+  .medium {
+    height: $medium;
+  }
 
-.small {
-  height: $small;
-}
+  .small {
+    height: $small;
+  }
 
-.default {
-  background-color: $color-gray-300;
-}
+  .default {
+    background-color: $color-gray-300;
+  }
 
-.sentimentPositive {
-  background-color: $color-green-100;
-}
+  .sentimentPositive {
+    background-color: $color-green-100;
+  }
 
-.sentimentNeutral {
-  background-color: $color-gray-300;
-}
+  .sentimentNeutral {
+    background-color: $color-gray-300;
+  }
 
-.sentimentNegative {
-  background-color: $color-red-100;
-}
+  .sentimentNegative {
+    background-color: $color-red-100;
+  }
 
-.sentimentNone {
-  background-color: $color-white;
-  border-color: $color-gray-300;
-}
+  .sentimentNone {
+    background-color: $color-white;
+    border-color: $color-gray-300;
+  }
 
-.validationPositive {
-  background-color: $color-green-100;
+  .validationPositive {
+    background-color: $color-green-100;
 
-  .validationIcon {
-    color: $color-green-500;
+    .validationIcon {
+      color: $color-green-500;
+    }
   }
-}
 
-.validationInformative {
-  background-color: $color-blue-100;
+  .validationInformative {
+    background-color: $color-blue-100;
 
-  .validationIcon {
-    color: $color-blue-500;
+    .validationIcon {
+      color: $color-blue-500;
+    }
   }
-}
 
-.validationNegative {
-  background-color: $color-red-100;
+  .validationNegative {
+    background-color: $color-red-100;
 
-  .validationIcon {
-    color: $color-red-500;
+    .validationIcon {
+      color: $color-red-500;
+    }
   }
-}
 
-.validationCautionary {
-  background-color: $color-yellow-100;
+  .validationCautionary {
+    background-color: $color-yellow-100;
 
-  .validationIcon {
-    color: var(--color-yellow-700);
+    .validationIcon {
+      color: var(--color-yellow-700);
+    }
   }
-}
 
-.statusLive {
-  background-color: $color-green-100;
-  color: $color-purple-800;
-}
+  .statusLive {
+    background-color: $color-green-100;
+    color: $color-purple-800;
+  }
 
-.statusAction {
-  background-color: $color-orange-100;
-  color: $color-purple-800;
-}
+  .statusAction {
+    background-color: $color-orange-100;
+    color: $color-purple-800;
+  }
 
-.statusClosed {
-  background-color: $color-red-100;
-}
+  .statusClosed {
+    background-color: $color-red-100;
+  }
 
-.statusDraft {
-  background-color: $color-blue-100;
-  color: $color-purple-800;
+  .statusDraft {
+    background-color: $color-blue-100;
+    color: $color-purple-800;
+  }
 }