@kaizen/components 1.78.1 → 1.79.1

package/src/Tag/subcomponents/LiveIcon/LiveIcon.module.css

@@ -1,49 +1,51 @@
-.liveIcon {
-  display: inline-block;
-  position: relative;
-  width: 20px;
-  height: 20px;
-  margin-inline-start: 0.25rem;
-  color: var(--color-green-500);
-}
+@layer kz-components {
+  .liveIcon {
+    display: inline-block;
+    position: relative;
+    width: 20px;
+    height: 20px;
+    margin-inline-start: 0.25rem;
+    color: var(--color-green-500);
+  }
 
-.liveIcon_base {
-  opacity: 0.3;
-  display: block;
-}
+  .liveIcon_base {
+    opacity: 0.3;
+    display: block;
+  }
 
-.liveIcon_1,
-.liveIcon_2,
-.liveIcon_3 {
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  aspect-ratio: 1;
-  overflow: hidden;
-}
+  .liveIcon_1,
+  .liveIcon_2,
+  .liveIcon_3 {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: 1;
+    overflow: hidden;
+  }
 
-.liveIcon_1 {
-  clip-path: circle(16%);
-}
+  .liveIcon_1 {
+    clip-path: circle(16%);
+  }
 
-.liveIcon_2,
-.liveIcon_3 {
-  animation-duration: 3s;
-  animation-iteration-count: 3;
-  animation-delay: 1s;
-}
+  .liveIcon_2,
+  .liveIcon_3 {
+    animation-duration: 3s;
+    animation-iteration-count: 3;
+    animation-delay: 1s;
+  }
 
-.liveIcon_2 {
-  clip-path: circle(32%);
-  animation-name: pulse-inner;
-}
+  .liveIcon_2 {
+    clip-path: circle(32%);
+    animation-name: pulse-inner;
+  }
 
-.liveIcon_3 {
-  clip-path: circle(50%);
-  animation-name: pulse-outer;
+  .liveIcon_3 {
+    clip-path: circle(50%);
+    animation-name: pulse-outer;
+  }
 }
 
 @keyframes pulse-inner {

package/src/Text/Text.module.scss

@@ -1,72 +1,74 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/typography';
 
-.text {
-  --icon-vertical-align: text-bottom;
+@layer kz-components {
+  .text {
+    --icon-vertical-align: text-bottom;
 
-  margin: 0;
+    margin: 0;
 
-  strong {
-    font-weight: $typography-paragraph-bold-font-weight;
+    strong {
+      font-weight: $typography-paragraph-bold-font-weight;
+    }
   }
-}
 
-.intro-lede {
-  font-family: $typography-paragraph-intro-lede-font-family;
-  font-weight: $typography-paragraph-intro-lede-font-weight;
-  font-size: $typography-paragraph-intro-lede-font-size;
-  line-height: $typography-paragraph-intro-lede-line-height;
-  letter-spacing: $typography-paragraph-intro-lede-letter-spacing;
-}
+  .intro-lede {
+    font-family: $typography-paragraph-intro-lede-font-family;
+    font-weight: $typography-paragraph-intro-lede-font-weight;
+    font-size: $typography-paragraph-intro-lede-font-size;
+    line-height: $typography-paragraph-intro-lede-line-height;
+    letter-spacing: $typography-paragraph-intro-lede-letter-spacing;
+  }
 
-.body {
-  font-family: $typography-paragraph-body-font-family;
-  font-weight: $typography-paragraph-body-font-weight;
-  font-size: $typography-paragraph-body-font-size;
-  line-height: $typography-paragraph-body-line-height;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-}
+  .body {
+    font-family: $typography-paragraph-body-font-family;
+    font-weight: $typography-paragraph-body-font-weight;
+    font-size: $typography-paragraph-body-font-size;
+    line-height: $typography-paragraph-body-line-height;
+    letter-spacing: $typography-paragraph-body-letter-spacing;
+  }
 
-.small {
-  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;
-}
+  .small {
+    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;
+  }
 
-.extra-small {
-  font-family: $typography-paragraph-extra-small-font-family;
-  font-weight: $typography-paragraph-extra-small-font-weight;
-  font-size: $typography-paragraph-extra-small-font-size;
-  line-height: $typography-paragraph-extra-small-line-height;
-  letter-spacing: $typography-paragraph-extra-small-letter-spacing;
-}
+  .extra-small {
+    font-family: $typography-paragraph-extra-small-font-family;
+    font-weight: $typography-paragraph-extra-small-font-weight;
+    font-size: $typography-paragraph-extra-small-font-size;
+    line-height: $typography-paragraph-extra-small-line-height;
+    letter-spacing: $typography-paragraph-extra-small-letter-spacing;
+  }
 
-.dark {
-  color: $color-purple-800;
-  opacity: 100%;
-}
+  .dark {
+    color: $color-purple-800;
+    opacity: 100%;
+  }
 
-.dark-reduced-opacity {
-  color: $color-purple-800;
-  opacity: 70%;
-}
+  .dark-reduced-opacity {
+    color: $color-purple-800;
+    opacity: 70%;
+  }
 
-.white {
-  color: $color-white;
-  opacity: 100%;
-}
+  .white {
+    color: $color-white;
+    opacity: 100%;
+  }
 
-.white-reduced-opacity {
-  color: $color-white;
-  opacity: 80%;
-}
+  .white-reduced-opacity {
+    color: $color-white;
+    opacity: 80%;
+  }
 
-.positive {
-  color: $color-green-600;
-}
+  .positive {
+    color: $color-green-600;
+  }
 
-.negative {
-  color: $color-red-600;
+  .negative {
+    color: $color-red-600;
+  }
 }

package/src/TextArea/TextArea.module.css

@@ -1,140 +1,143 @@
-.wrapper {
-  font-family: var(--typography-paragraph-body-font-family);
-  font-size: var(--typography-paragraph-body-font-size);
-  font-weight: var(--typography-paragraph-body-font-weight);
-  line-height: var(--typography-paragraph-body-line-height);
-  letter-spacing: var(--typography-paragraph-body-letter-spacing);
-  color: var(--color-purple-800-rgb);
-}
-
-.wrapperAutogrow {
-  display: grid;
-}
-
-.wrapperAutogrow::after {
-  content: attr(data-value) ' ';
-  white-space: pre-wrap;
-  visibility: hidden;
-}
+@layer kz-components {
+  .wrapper {
+    font-family: var(--typography-paragraph-body-font-family);
+    font-size: var(--typography-paragraph-body-font-size);
+    font-weight: var(--typography-paragraph-body-font-weight);
+    line-height: var(--typography-paragraph-body-line-height);
+    letter-spacing: var(--typography-paragraph-body-letter-spacing);
+    color: var(--color-purple-800-rgb);
+  }
 
-/* these properties need to be set on both for autogrow to work properly */
-.textarea,
-.wrapperAutogrow::after {
-  border: var(--border-solid-border-width) var(--border-solid-border-style) var(--color-gray-500);
-  border-radius: var(--border-solid-border-radius);
-  padding: var(--spacing-sm);
-  box-sizing: border-box;
-  width: 100%;
-  font: inherit;
-}
+  .wrapperAutogrow {
+    display: grid;
+  }
 
-.textareaAutogrow,
-.wrapperAutogrow::after {
-  grid-area: 2 / 1;
-}
+  .wrapperAutogrow::after {
+    content: attr(data-value) ' ';
+    white-space: pre-wrap;
+    visibility: hidden;
+  }
 
-.textarea {
-  display: block;
-  border: var(--border-solid-border-width) var(--border-solid-border-style) var(--color-gray-500);
-  border-radius: var(--border-solid-border-radius);
-  padding: var(--spacing-sm);
-  resize: vertical;
-
-  &:focus {
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-500);
-    outline-offset: 1px;
+  /* these properties need to be set on both for autogrow to work properly */
+  .textarea,
+  .wrapperAutogrow::after {
+    border: var(--border-solid-border-width) var(--border-solid-border-style) var(--color-gray-500);
+    border-radius: var(--border-solid-border-radius);
+    padding: var(--spacing-sm);
+    box-sizing: border-box;
+    width: 100%;
+    font: inherit;
   }
 
-  &:disabled {
-    resize: none;
+  .textareaAutogrow,
+  .wrapperAutogrow::after {
+    grid-area: 2 / 1;
   }
-}
 
-.textareaAutogrow {
-  overflow: hidden;
-}
+  .textarea {
+    display: block;
+    border: var(--border-solid-border-width) var(--border-solid-border-style) var(--color-gray-500);
+    border-radius: var(--border-solid-border-radius);
+    padding: var(--spacing-sm);
+    resize: vertical;
+
+    &:focus {
+      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+        var(--color-blue-500);
+      outline-offset: 1px;
+    }
 
-.default {
-  &:not(.error, .caution) {
     &:disabled {
       border-color: rgb(var(--color-gray-500-rgb), 0.3);
+      resize: none;
     }
   }
 
-  &:focus:not([disabled]),
-  &:hover:not([disabled]),
-  &:hover:focus:not([disabled]) {
-    background-color: var(--color-gray-200);
-    border-color: var(--color-gray-600);
+  .textareaAutogrow {
+    overflow: hidden;
   }
 
-  &.error {
-    border-color: var(--color-red-500);
+  .default {
+    &:not(.error, .caution) {
+      &:disabled {
+        border-color: rgb(var(--color-gray-500-rgb), 0.3);
+      }
+    }
 
     &:focus:not([disabled]),
     &:hover:not([disabled]),
     &:hover:focus:not([disabled]) {
-      border-color: var(--color-red-500);
+      background-color: var(--color-gray-200);
+      border-color: var(--color-gray-600);
     }
-  }
 
-  &.caution {
-    border-color: var(--color-yellow-600);
+    &.error {
+      border-color: var(--color-red-500);
 
-    &:focus:not([disabled]),
-    &:hover:not([disabled]),
-    &:hover:focus:not([disabled]) {
-      border-color: var(--color-yellow-600);
+      &:focus:not([disabled]),
+      &:hover:not([disabled]),
+      &:hover:focus:not([disabled]) {
+        border-color: var(--color-red-500);
+      }
     }
-  }
 
-  &.disabled {
-    background-color: var(--color-white);
-    border-color: rgb(var(--color-gray-500-rgb), 0.3);
-    color: rgb(var(--color-purple-800-rgb), 0.3);
-  }
-}
+    &.caution {
+      border-color: var(--color-yellow-600);
 
-.reversed {
-  border-color: rgb(var(--color-white-rgb), 0.65);
-  background: transparent;
-  color: var(--color-white);
+      &:focus:not([disabled]),
+      &:hover:not([disabled]),
+      &:hover:focus:not([disabled]) {
+        border-color: var(--color-yellow-600);
+      }
+    }
 
-  &:focus {
-    outline-color: var(--color-blue-300);
+    &.disabled {
+      background-color: var(--color-white);
+      border-color: rgb(var(--color-gray-500-rgb), 0.3);
+      color: rgb(var(--color-purple-800-rgb), 0.3);
+    }
   }
 
-  &:focus:not([disabled]),
-  &:hover:not([disabled]),
-  &:hover:focus:not([disabled]) {
-    background: rgb(var(--color-white-rgb), 0.1);
-    border-color: var(--color-white);
-  }
+  .reversed {
+    border-color: rgb(var(--color-white-rgb), 0.65);
+    background: transparent;
+    color: var(--color-white);
 
-  &.error {
-    border-color: var(--color-red-300);
+    &:focus {
+      outline-color: var(--color-blue-300);
+    }
 
     &:focus:not([disabled]),
     &:hover:not([disabled]),
     &:hover:focus:not([disabled]) {
-      border-color: var(--color-red-300);
+      background: rgb(var(--color-white-rgb), 0.1);
+      border-color: var(--color-white);
     }
-  }
 
-  &.caution {
-    border-color: var(--color-yellow-400);
+    &.error {
+      border-color: var(--color-red-300);
 
-    &:focus:not([disabled]),
-    &:hover:not([disabled]),
-    &:hover:focus:not([disabled]) {
+      &:focus:not([disabled]),
+      &:hover:not([disabled]),
+      &:hover:focus:not([disabled]) {
+        border-color: var(--color-red-300);
+      }
+    }
+
+    &.caution {
       border-color: var(--color-yellow-400);
+
+      &:focus:not([disabled]),
+      &:hover:not([disabled]),
+      &:hover:focus:not([disabled]) {
+        border-color: var(--color-yellow-400);
+      }
     }
-  }
 
-  &.disabled {
-    background: transparent;
-    border-color: rgb(var(--color-white-rgb), 0.3);
-    color: rgb(var(--color-white-rgb), 0.3);
+    &.disabled {
+      background: transparent;
+      border-color: rgb(var(--color-white-rgb), 0.3);
+      color: rgb(var(--color-white-rgb), 0.3);
+    }
   }
 }

package/src/TextAreaField/TextAreaField.module.scss

@@ -1,20 +1,22 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/color';
 
-$input-disabled-background: $color-gray-300;
-$input-disabled-opacity: 0.3;
-$input-disabled-border-alpha: 50%;
+@layer kz-components {
+  $input-disabled-background: $color-gray-300;
+  $input-disabled-opacity: 0.3;
+  $input-disabled-border-alpha: 50%;
 
-.message {
-  &.disabled {
-    opacity: $input-disabled-opacity;
+  .message {
+    &.disabled {
+      opacity: $input-disabled-opacity;
+    }
   }
-}
 
-.textareaLabel {
-  margin-bottom: $spacing-xs;
-}
+  .textareaLabel {
+    margin-bottom: $spacing-xs;
+  }
 
-.textareaLabelProminent {
-  margin-bottom: 0;
+  .textareaLabelProminent {
+    margin-bottom: 0;
+  }
 }

package/src/TextField/TextField.module.scss

@@ -1,23 +1,25 @@
 @import '../../styles/utils/animation';
 
-.input {
-  margin-top: var(--spacing-6);
-}
+@layer kz-components {
+  .input {
+    margin-top: var(--spacing-6);
+  }
 
-.icon {
-  color: var(--textfield-icon-color);
+  .icon {
+    color: var(--textfield-icon-color);
 
-  @include ca-animation-fade(in);
-}
+    @include ca-animation-fade(in);
+  }
 
-.success {
-  --textfield-icon-color: var(--color-green-500);
+  .success {
+    --textfield-icon-color: var(--color-green-500);
 
-  .reversed & {
-    --textfield-icon-color: var(--color-green-400);
+    .reversed & {
+      --textfield-icon-color: var(--color-green-400);
+    }
   }
-}
 
-.disabled {
-  opacity: 0.3;
+  .disabled {
+    opacity: 0.3;
+  }
 }

package/src/Tile/MultiActionTile/MultiActionTile.module.scss

@@ -1,9 +1,11 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-.actions {
-  display: flex;
-}
+@layer kz-components {
+  .actions {
+    display: flex;
+  }
 
-.secondaryAction {
-  margin-inline-end: $spacing-8;
+  .secondaryAction {
+    margin-inline-end: $spacing-8;
+  }
 }

package/src/Tile/TileGrid/TileGrid.module.scss

@@ -2,25 +2,27 @@
 @import '../../../styles/utils/responsive';
 @import '../subcomponents/GenericTile/variables';
 
-.grid {
-  list-style-type: none;
-  padding-inline-start: 0;
-  margin-block: 0;
-  display: grid;
-  // the more we shave off the width here,
-  // the less the tiles will grow when they lose one from the row
-  grid-template-columns: repeat(auto-fill, minmax($tileWidth - 40px, 1fr));
-  grid-gap: $spacing-md;
+@layer kz-components {
+  .grid {
+    list-style-type: none;
+    padding-inline-start: 0;
+    margin-block: 0;
+    display: grid;
+    // the more we shave off the width here,
+    // the less the tiles will grow when they lose one from the row
+    grid-template-columns: repeat(auto-fill, minmax($tileWidth - 40px, 1fr));
+    grid-gap: $spacing-md;
 
-  @include ca-media-mobile {
-    grid-template-columns: repeat(2, minmax(226px, $tileHeight));
+    @include ca-media-mobile {
+      grid-template-columns: repeat(2, minmax(226px, $tileHeight));
 
-    > * {
-      width: 100%;
+      > * {
+        width: 100%;
+      }
     }
-  }
 
-  @media (max-width: 480px) {
-    grid-template-columns: repeat(1, 100%);
+    @media (max-width: 480px) {
+      grid-template-columns: repeat(1, 100%);
+    }
   }
 }