@kaizen/components 1.78.0 → 1.79.0

package/src/Link/Link.module.css

@@ -1,114 +1,116 @@
-.link {
-  color: var(--link-text-color, var(--color-blue-500));
-  font-family: var(--typography-paragraph-body-font-family);
-  font-size: var(--link-font-size, inherit);
-  line-height: var(--link-line-height, inherit);
-  font-weight: var(--typography-paragraph-body-font-weight);
-  text-decoration: none;
-  position: relative;
-  white-space: nowrap;
-  outline: 0;
-}
-
-.link[data-focus-visible] {
-  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-    var(--color-blue-500);
-  outline-offset: 3px;
-}
-
-.isUnderlined {
-  border-bottom: var(--spacing-1) solid var(--link-text-color, var(--color-blue-500));
-}
-
-.icon > * {
-  vertical-align: text-bottom;
-  font-size: var(--icon-font-size, 1em);
-}
-
-.iconStart {
-  margin-inline-start: var(--text-icon-gap, 0.5em);
-}
-
-.iconEnd {
-  margin-inline-end: var(--text-icon-gap, 0.5em);
-}
-
-.primary[data-hovered] {
-  --link-text-color: var(--color-blue-600);
-}
-
-.primary[data-pressed] {
-  --link-text-color: var(--color-blue-700);
-}
-
-.secondary {
-  --link-text-color: var(--color-purple-800);
-}
-
-.secondary[data-hovered] {
-  --link-text-color: var(--color-gray-600);
-}
-
-.secondary[data-pressed] {
-  --link-text-color: var(--color-black);
-}
-
-[class*='extra-small'] .link.isInline,
-.extra-small {
-  --link-font-size: var(--typography-paragraph-extra-small-font-size);
-  --link-line-height: var(--typography-paragraph-extra-small-line-height);
-  --icon-font-size: 0.875rem;
-  --text-icon-gap: var(--spacing-2);
-}
-
-[class*='body'] .link.isInline,
-.body {
-  --link-font-size: var(--typography-paragraph-body-font-size);
-  --link-line-height: var(--typography-paragraph-body-line-height);
-  --icon-font-size: 1.25rem;
-  --text-icon-gap: var(--spacing-6);
-}
-
-[class*='intro-lede'] .link.isInline,
-.intro-lede {
-  --link-font-size: var(--typography-paragraph-intro-lede-font-size);
-  --link-line-height: var(--typography-paragraph-intro-lede-line-height);
-  --icon-font-size: 1.5rem;
-  --text-icon-gap: var(--spacing-8);
-}
-
-[class*='small']:not([class*='extra-small']) .link.isInline,
-.small {
-  --link-font-size: var(--typography-paragraph-small-font-size);
-  --link-line-height: var(--typography-paragraph-small-line-height);
-  --icon-font-size: 1rem;
-  --text-icon-gap: var(--spacing-4);
-}
-
-.white {
-  --link-text-color: var(--color-white);
-}
-
-.white[data-focus-visible] {
-  outline-color: var(--color-blue-300);
-}
-
-.white.isDisabled {
-  --link-text-color: rgba(var(--color-white-rgb), 0.2);
-}
-
-.reversed {
-  --link-text-color: var(--color-white);
-}
-
-.reversed[data-focus-visible] {
-  outline-color: var(--color-blue-300);
-}
-
-.link.isDisabled {
-  --link-text-color: var(--color-gray-400);
-}
-
-.reversed.isDisabled {
-  --link-text-color: rgba(var(--color-white-rgb), 0.2);
+@layer kz-components {
+  .link {
+    color: var(--link-text-color, var(--color-blue-500));
+    font-family: var(--typography-paragraph-body-font-family);
+    font-size: var(--link-font-size, inherit);
+    line-height: var(--link-line-height, inherit);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    text-decoration: none;
+    position: relative;
+    white-space: nowrap;
+    outline: 0;
+  }
+
+  .link[data-focus-visible] {
+    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+      var(--color-blue-500);
+    outline-offset: 3px;
+  }
+
+  .isUnderlined {
+    border-bottom: var(--spacing-1) solid var(--link-text-color, var(--color-blue-500));
+  }
+
+  .icon > * {
+    vertical-align: text-bottom;
+    font-size: var(--icon-font-size, 1em);
+  }
+
+  .iconStart {
+    margin-inline-start: var(--text-icon-gap, 0.5em);
+  }
+
+  .iconEnd {
+    margin-inline-end: var(--text-icon-gap, 0.5em);
+  }
+
+  .primary[data-hovered] {
+    --link-text-color: var(--color-blue-600);
+  }
+
+  .primary[data-pressed] {
+    --link-text-color: var(--color-blue-700);
+  }
+
+  .secondary {
+    --link-text-color: var(--color-purple-800);
+  }
+
+  .secondary[data-hovered] {
+    --link-text-color: var(--color-gray-600);
+  }
+
+  .secondary[data-pressed] {
+    --link-text-color: var(--color-black);
+  }
+
+  [class*='extra-small'] .link.isInline,
+  .extra-small {
+    --link-font-size: var(--typography-paragraph-extra-small-font-size);
+    --link-line-height: var(--typography-paragraph-extra-small-line-height);
+    --icon-font-size: 0.875rem;
+    --text-icon-gap: var(--spacing-2);
+  }
+
+  [class*='body'] .link.isInline,
+  .body {
+    --link-font-size: var(--typography-paragraph-body-font-size);
+    --link-line-height: var(--typography-paragraph-body-line-height);
+    --icon-font-size: 1.25rem;
+    --text-icon-gap: var(--spacing-6);
+  }
+
+  [class*='intro-lede'] .link.isInline,
+  .intro-lede {
+    --link-font-size: var(--typography-paragraph-intro-lede-font-size);
+    --link-line-height: var(--typography-paragraph-intro-lede-line-height);
+    --icon-font-size: 1.5rem;
+    --text-icon-gap: var(--spacing-8);
+  }
+
+  [class*='small']:not([class*='extra-small']) .link.isInline,
+  .small {
+    --link-font-size: var(--typography-paragraph-small-font-size);
+    --link-line-height: var(--typography-paragraph-small-line-height);
+    --icon-font-size: 1rem;
+    --text-icon-gap: var(--spacing-4);
+  }
+
+  .white {
+    --link-text-color: var(--color-white);
+  }
+
+  .white[data-focus-visible] {
+    outline-color: var(--color-blue-300);
+  }
+
+  .white.isDisabled {
+    --link-text-color: rgb(var(--color-white-rgb), 0.2);
+  }
+
+  .reversed {
+    --link-text-color: var(--color-white);
+  }
+
+  .reversed[data-focus-visible] {
+    outline-color: var(--color-blue-300);
+  }
+
+  .link.isDisabled {
+    --link-text-color: var(--color-gray-400);
+  }
+
+  .reversed.isDisabled {
+    --link-text-color: rgb(var(--color-white-rgb), 0.2);
+  }
 }

package/src/LinkButton/LinkButton.module.css

@@ -1,4 +1,6 @@
-.linkButton {
-  /* Reset */
-  text-decoration: inherit;
+@layer kz-components {
+  .linkButton {
+    /* Reset */
+    text-decoration: inherit;
+  }
 }

package/src/Loading/LoadingGraphic/LoadingGraphic.module.scss

@@ -1,17 +1,19 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '../mixins';
 
-.loadingGraphic {
-  @extend %loadingBase;
+@layer kz-components {
+  .loadingGraphic {
+    @extend %loadingBase;
 
-  background-color: rgba($color-gray-600-rgb, 0.1);
-  border-radius: 50%;
-}
+    background-color: rgba($color-gray-600-rgb, 0.1);
+    border-radius: 50%;
+  }
 
-.isReversed {
-  background-color: rgba($color-white-rgb, 0.1);
-}
+  .isReversed {
+    background-color: rgba($color-white-rgb, 0.1);
+  }
 
-.isAnimated {
-  @extend %loadingAnimated;
+  .isAnimated {
+    @extend %loadingAnimated;
+  }
 }

package/src/Loading/LoadingHeading/LoadingHeading.module.scss

@@ -2,59 +2,61 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '../mixins';
 
-.loadingHeading {
-  @extend %loadingBase;
+@layer kz-components {
+  .loadingHeading {
+    @extend %loadingBase;
 
-  background-color: rgba($color-gray-500-rgb, 0.2);
-}
+    background-color: rgba($color-gray-500-rgb, 0.2);
+  }
 
-.isAnimated {
-  @extend %loadingAnimated;
-}
+  .isAnimated {
+    @extend %loadingAnimated;
+  }
 
-.display-0 {
-  height: $typography-display-0-font-size;
-  margin-bottom: calc(#{$typography-display-0-line-height} - #{$typography-display-0-font-size});
-}
+  .display-0 {
+    height: $typography-display-0-font-size;
+    margin-bottom: calc(#{$typography-display-0-line-height} - #{$typography-display-0-font-size});
+  }
 
-.heading-1 {
-  height: $typography-heading-1-font-size;
-  margin-bottom: calc(#{$typography-heading-1-line-height} - #{$typography-heading-1-font-size});
-}
+  .heading-1 {
+    height: $typography-heading-1-font-size;
+    margin-bottom: calc(#{$typography-heading-1-line-height} - #{$typography-heading-1-font-size});
+  }
 
-.heading-2 {
-  height: $typography-heading-2-font-size;
-  margin-bottom: calc(#{$typography-heading-2-line-height} - #{$typography-heading-2-font-size});
-}
+  .heading-2 {
+    height: $typography-heading-2-font-size;
+    margin-bottom: calc(#{$typography-heading-2-line-height} - #{$typography-heading-2-font-size});
+  }
 
-.heading-3 {
-  height: $typography-heading-3-font-size;
-  margin-bottom: calc(#{$typography-heading-3-line-height} - #{$typography-heading-3-font-size});
-}
+  .heading-3 {
+    height: $typography-heading-3-font-size;
+    margin-bottom: calc(#{$typography-heading-3-line-height} - #{$typography-heading-3-font-size});
+  }
 
-.heading-4 {
-  height: $typography-heading-4-font-size;
-  margin-bottom: calc(#{$typography-heading-4-line-height} - #{$typography-heading-4-font-size});
-}
+  .heading-4 {
+    height: $typography-heading-4-font-size;
+    margin-bottom: calc(#{$typography-heading-4-line-height} - #{$typography-heading-4-font-size});
+  }
 
-.heading-5 {
-  height: $typography-heading-5-font-size;
-  margin-bottom: calc(#{$typography-heading-5-line-height} - #{$typography-heading-5-font-size});
-}
+  .heading-5 {
+    height: $typography-heading-5-font-size;
+    margin-bottom: calc(#{$typography-heading-5-line-height} - #{$typography-heading-5-font-size});
+  }
 
-.heading-6 {
-  height: $typography-heading-6-font-size;
-  margin-bottom: calc(#{$typography-heading-6-line-height} - #{$typography-heading-6-font-size});
-}
+  .heading-6 {
+    height: $typography-heading-6-font-size;
+    margin-bottom: calc(#{$typography-heading-6-line-height} - #{$typography-heading-6-font-size});
+  }
 
-.isReversed {
-  background-color: rgba($color-white-rgb, 0.2);
-}
+  .isReversed {
+    background-color: rgba($color-white-rgb, 0.2);
+  }
 
-.link {
-  background-color: rgba($color-blue-500-rgb, 0.2);
+  .link {
+    background-color: rgba($color-blue-500-rgb, 0.2);
 
-  &.isReversed {
-    background-color: rgba($color-white-rgb, 0.65);
+    &.isReversed {
+      background-color: rgba($color-white-rgb, 0.65);
+    }
   }
 }

package/src/Loading/LoadingInput/LoadingInput.module.scss

@@ -1,16 +1,18 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '../mixins';
 
-.loadingInput {
-  @extend %loadingBase;
+@layer kz-components {
+  .loadingInput {
+    @extend %loadingBase;
 
-  background-color: rgba($color-gray-600-rgb, 0.1);
-}
+    background-color: rgba($color-gray-600-rgb, 0.1);
+  }
 
-.isAnimated {
-  @extend %loadingAnimated;
-}
+  .isAnimated {
+    @extend %loadingAnimated;
+  }
 
-.isReversed {
-  background-color: rgba($color-white-rgb, 0.1);
+  .isReversed {
+    background-color: rgba($color-white-rgb, 0.1);
+  }
 }

package/src/Loading/LoadingParagraph/LoadingParagraph.module.scss

@@ -2,49 +2,51 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '../mixins';
 
-.loadingParagraph {
-  @extend %loadingBase;
-
-  background-color: $color-gray-300;
-  height: calc(#{$spacing-md} * 0.625);
-  margin-bottom: calc(#{$spacing-md} * 0.5);
-}
-
-.isReversed {
-  background-color: rgba($color-white-rgb, 0.1);
-}
-
-.isLink {
-  background-color: rgba($color-blue-500-rgb, 0.2);
-}
-
-.isLink.isReversed {
-  background-color: rgba($color-white-rgb, 0.65);
-}
-
-.isAnimated {
-  @extend %loadingAnimated;
-}
-
-.isCentered {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.isInline {
-  display: inline-block;
-  margin-bottom: calc(#{$spacing-md} * 0.35);
-}
-
-.isInline + .isInline {
-  margin-inline-start: $spacing-md;
-}
-
-.noBottomMargin {
-  margin-bottom: 0;
-}
-
-// We double the class selector to increase specificity above rules like `h1.default-style`
-.inheritBaseline.inheritBaseline {
-  position: static;
+@layer kz-components {
+  .loadingParagraph {
+    @extend %loadingBase;
+
+    background-color: $color-gray-300;
+    height: calc(#{$spacing-md} * 0.625);
+    margin-bottom: calc(#{$spacing-md} * 0.5);
+  }
+
+  .isReversed {
+    background-color: rgba($color-white-rgb, 0.1);
+  }
+
+  .isLink {
+    background-color: rgba($color-blue-500-rgb, 0.2);
+  }
+
+  .isLink.isReversed {
+    background-color: rgba($color-white-rgb, 0.65);
+  }
+
+  .isAnimated {
+    @extend %loadingAnimated;
+  }
+
+  .isCentered {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .isInline {
+    display: inline-block;
+    margin-bottom: calc(#{$spacing-md} * 0.35);
+  }
+
+  .isInline + .isInline {
+    margin-inline-start: $spacing-md;
+  }
+
+  .noBottomMargin {
+    margin-bottom: 0;
+  }
+
+  // We double the class selector to increase specificity above rules like `h1.default-style`
+  .inheritBaseline.inheritBaseline {
+    position: static;
+  }
 }

package/src/Loading/LoadingSpinner/LoadingSpinner.module.css

@@ -1,28 +1,30 @@
-.loadingSpinner {
-  --loading-spinner-size: 48px;
+@layer kz-components {
+  .loadingSpinner {
+    --loading-spinner-size: 48px;
 
-  display: flex;
-  width: var(--loading-spinner-size);
-  height: var(--loading-spinner-size);
-}
+    display: flex;
+    width: var(--loading-spinner-size);
+    height: var(--loading-spinner-size);
+  }
 
-.xs {
-  --loading-spinner-size: 16px;
-}
+  .xs {
+    --loading-spinner-size: 16px;
+  }
 
-.sm {
-  --loading-spinner-size: 24px;
-}
+  .sm {
+    --loading-spinner-size: 24px;
+  }
 
-.md {
-  --loading-spinner-size: 48px;
-}
+  .md {
+    --loading-spinner-size: 48px;
+  }
 
-.spinner {
-  animation: spinner var(--animation-duration-deliberate)
-    var(--animation-easing-function-ease-in-out) infinite;
-  width: 100%;
-  height: 100%;
+  .spinner {
+    animation: spinner var(--animation-duration-deliberate)
+      var(--animation-easing-function-ease-in-out) infinite;
+    width: 100%;
+    height: 100%;
+  }
 }
 
 @keyframes spinner {

package/src/Loading/_mixins.scss

@@ -2,9 +2,17 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/border';
 
-%loadingBase {
-  border-radius: $border-solid-border-radius;
-  top: calc(#{$spacing-md} * 0.175);
+@layer kz-components {
+  %loadingBase {
+    border-radius: $border-solid-border-radius;
+    top: calc(#{$spacing-md} * 0.175);
+  }
+
+  %loadingAnimated {
+    animation-name: fade-in-out;
+    animation-duration: calc(#{$animation-duration-deliberate} * 2);
+    animation-iteration-count: infinite;
+  }
 }
 
 @keyframes fade-in-out {
@@ -20,9 +28,3 @@
     opacity: 60%;
   }
 }
-
-%loadingAnimated {
-  animation-name: fade-in-out;
-  animation-duration: calc(#{$animation-duration-deliberate} * 2);
-  animation-iteration-count: infinite;
-}

package/src/Menu/subcomponents/MenuDropdown/MenuDropdown.module.scss

@@ -3,22 +3,24 @@
 @import '~@kaizen/design-tokens/sass/shadow';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-$menu-container-width: 248px;
-$dropdown-index: 1000;
+@layer kz-components {
+  $menu-container-width: 248px;
+  $dropdown-index: 1000;
 
-.menuContainer {
-  z-index: $dropdown-index;
-  box-sizing: border-box;
-  background: $color-white;
-  color: $color-purple-800;
-  border-radius: $border-solid-border-radius;
-  box-shadow: $shadow-large-box-shadow;
-  max-height: 22rem;
-  overflow: auto;
-  padding: $spacing-xs 0;
-  text-align: start;
-}
+  .menuContainer {
+    z-index: $dropdown-index;
+    box-sizing: border-box;
+    background: $color-white;
+    color: $color-purple-800;
+    border-radius: $border-solid-border-radius;
+    box-shadow: $shadow-large-box-shadow;
+    max-height: 22rem;
+    overflow: auto;
+    padding: $spacing-xs 0;
+    text-align: start;
+  }
 
-.defaultWidth {
-  width: $menu-container-width;
+  .defaultWidth {
+    width: $menu-container-width;
+  }
 }

package/src/Menu/subcomponents/MenuHeading/MenuHeading.module.scss

@@ -1,11 +1,13 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-$gutter: calc(#{$spacing-md} * 1 / 6);
+@layer kz-components {
+  $gutter: calc(#{$spacing-md} * 1 / 6);
 
-.heading {
-  padding: 10px $spacing-sm 5px;
-  color: $color-purple-800;
-  margin: 0 $gutter;
-  display: block;
+  .heading {
+    padding: 10px $spacing-sm 5px;
+    color: $color-purple-800;
+    margin: 0 $gutter;
+    display: block;
+  }
 }