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

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

@@ -3,103 +3,101 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/typography';
 
-@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;
-    }
+.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-visible {
-      background: $color-blue-100;
-      color: $color-blue-500;
-      border-color: $color-blue-500;
-    }
+  &:focus {
+    outline: none;
+  }
 
-    &:disabled {
-      opacity: 30%;
-    }
+  &:focus-visible {
+    background: $color-blue-100;
+    color: $color-blue-500;
+    border-color: $color-blue-500;
+  }
 
-    &:not(:first-child) {
-      margin-inline-start: $spacing-xs;
-    }
+  &:disabled {
+    opacity: 30%;
+  }
 
-    &:not(:disabled):hover {
-      background: $color-blue-100;
-      color: $color-blue-500;
-    }
+  &:not(:first-child) {
+    margin-inline-start: $spacing-xs;
   }
 
-  .tab[data-selected] {
-    position: relative;
+  &:not(:disabled):hover {
+    background: $color-blue-100;
     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;
-    }
   }
+}
+
+.tab[data-selected] {
+  position: relative;
+  color: $color-blue-500;
 
-  .badge {
-    margin-inline-start: $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: $spacing-sm;
+  display: inline-flex;
+  align-items: center;
+}
 
-      &:focus-visible::after {
-        $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
+@media (forced-colors: active) {
+  .tab {
+    border: 2px solid transparent;
 
-        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});
-      }
-    }
+    &:focus-visible::after {
+      $focus-ring-offset: calc((#{$border-focus-ring-border-width} * 2) + 1px);
 
-    .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;
+      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;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-bottom: 2px solid transparent;
+  }
 }

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

@@ -1,13 +1,11 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/color';
 
-@layer kz-components {
-  .tabList {
-    border-bottom: 1px solid rgba($color-gray-600-rgb, 0.1);
-    padding: $spacing-xs $spacing-md 0;
-  }
+.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,17 +1,15 @@
 @import '~@kaizen/design-tokens/sass/border';
 @import '~@kaizen/design-tokens/sass/color';
 
-@layer kz-components {
-  .tabPanel {
-    border: 2px solid transparent;
+.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,212 +4,210 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '../../styles/utils/button-reset';
 
-@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);
-    }
+$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;
-  }
+.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;
-  }
+.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;
-  }
+.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;
-  }
+.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;
+}
 
-  .iconWrapper {
-    --icon-size: 16;
+.iconWrapper {
+  --icon-size: 16;
 
-    position: relative;
-    height: 16px;
-    width: 16px;
+  position: relative;
+  height: 16px;
+  width: 16px;
+}
+
+.dismissButton {
+  @include button-reset;
+
+  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;
   }
 
-  .dismissButton {
-    @include button-reset;
+  &:active {
+    color: $color-purple-800;
+  }
 
+  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;
-    }
-
-    &:active {
-      color: $color-purple-800;
-    }
+  }
 
-    svg {
-      position: relative;
-    }
+  &:focus {
+    outline: none;
+  }
 
-    &:focus {
-      outline: none;
-    }
+  &:focus-visible .iconWrapper {
+    color: $color-purple-800;
 
-    &: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});
-      }
+    &::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;
 }