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

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

@@ -1,51 +1,49 @@
-@layer kz-components {
-  .liveIcon {
-    display: inline-block;
-    position: relative;
-    width: 20px;
-    height: 20px;
-    margin-inline-start: 0.25rem;
-    color: var(--color-green-500);
-  }
+.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,74 +1,72 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/typography';
 
-@layer kz-components {
-  .text {
-    --icon-vertical-align: text-bottom;
+.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,143 +1,140 @@
-@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);
-  }
+.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 {
+  display: grid;
+}
 
-  .wrapperAutogrow::after {
-    content: attr(data-value) ' ';
-    white-space: pre-wrap;
-    visibility: hidden;
-  }
+.wrapperAutogrow::after {
+  content: attr(data-value) ' ';
+  white-space: pre-wrap;
+  visibility: hidden;
+}
 
-  /* 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;
+/* 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;
+}
+
+.textareaAutogrow,
+.wrapperAutogrow::after {
+  grid-area: 2 / 1;
+}
+
+.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;
   }
 
-  .textareaAutogrow,
-  .wrapperAutogrow::after {
-    grid-area: 2 / 1;
+  &:disabled {
+    resize: none;
   }
+}
 
-  .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;
-    }
+.textareaAutogrow {
+  overflow: hidden;
+}
 
+.default {
+  &:not(.error, .caution) {
     &:disabled {
-      border-color: rgb(var(--color-gray-500-rgb), 0.3);
-      resize: none;
+      border-color: rgba(var(--color-gray-500-rgb), 0.3);
     }
   }
 
-  .textareaAutogrow {
-    overflow: hidden;
+  &:focus:not([disabled]),
+  &:hover:not([disabled]),
+  &:hover:focus:not([disabled]) {
+    background-color: var(--color-gray-200);
+    border-color: var(--color-gray-600);
   }
 
-  .default {
-    &:not(.error, .caution) {
-      &:disabled {
-        border-color: rgb(var(--color-gray-500-rgb), 0.3);
-      }
-    }
+  &.error {
+    border-color: var(--color-red-500);
 
     &:focus:not([disabled]),
     &:hover:not([disabled]),
     &:hover:focus:not([disabled]) {
-      background-color: var(--color-gray-200);
-      border-color: var(--color-gray-600);
+      border-color: var(--color-red-500);
     }
+  }
 
-    &.error {
-      border-color: var(--color-red-500);
+  &.caution {
+    border-color: var(--color-yellow-600);
 
-      &:focus:not([disabled]),
-      &:hover:not([disabled]),
-      &:hover:focus:not([disabled]) {
-        border-color: var(--color-red-500);
-      }
+    &:focus:not([disabled]),
+    &:hover:not([disabled]),
+    &:hover:focus:not([disabled]) {
+      border-color: var(--color-yellow-600);
     }
+  }
 
-    &.caution {
-      border-color: var(--color-yellow-600);
+  &.disabled {
+    background-color: var(--color-white);
+    border-color: rgba(var(--color-gray-500-rgb), 0.3);
+    color: rgba(var(--color-purple-800-rgb), 0.3);
+  }
+}
 
-      &:focus:not([disabled]),
-      &:hover:not([disabled]),
-      &:hover:focus:not([disabled]) {
-        border-color: var(--color-yellow-600);
-      }
-    }
+.reversed {
+  border-color: rgba(var(--color-white-rgb), 0.65);
+  background: transparent;
+  color: var(--color-white);
 
-    &.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 {
+    outline-color: var(--color-blue-300);
   }
 
-  .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]) {
+    background: rgba(var(--color-white-rgb), 0.1);
+    border-color: var(--color-white);
+  }
 
-    &:focus {
-      outline-color: var(--color-blue-300);
-    }
+  &.error {
+    border-color: var(--color-red-300);
 
     &:focus:not([disabled]),
     &:hover:not([disabled]),
     &:hover:focus:not([disabled]) {
-      background: rgb(var(--color-white-rgb), 0.1);
-      border-color: var(--color-white);
-    }
-
-    &.error {
       border-color: var(--color-red-300);
-
-      &:focus:not([disabled]),
-      &:hover:not([disabled]),
-      &:hover:focus:not([disabled]) {
-        border-color: var(--color-red-300);
-      }
     }
+  }
 
-    &.caution {
-      border-color: var(--color-yellow-400);
+  &.caution {
+    border-color: var(--color-yellow-400);
 
-      &:focus:not([disabled]),
-      &:hover:not([disabled]),
-      &:hover:focus:not([disabled]) {
-        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: rgba(var(--color-white-rgb), 0.3);
+    color: rgba(var(--color-white-rgb), 0.3);
   }
 }

package/src/TextAreaField/TextAreaField.module.scss

@@ -1,22 +1,20 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/color';
 
-@layer kz-components {
-  $input-disabled-background: $color-gray-300;
-  $input-disabled-opacity: 0.3;
-  $input-disabled-border-alpha: 50%;
+$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,25 +1,23 @@
 @import '../../styles/utils/animation';
 
-@layer kz-components {
-  .input {
-    margin-top: var(--spacing-6);
-  }
+.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,11 +1,9 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  .actions {
-    display: flex;
-  }
+.actions {
+  display: flex;
+}
 
-  .secondaryAction {
-    margin-inline-end: $spacing-8;
-  }
+.secondaryAction {
+  margin-inline-end: $spacing-8;
 }

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

@@ -2,27 +2,25 @@
 @import '../../../styles/utils/responsive';
 @import '../subcomponents/GenericTile/variables';
 
-@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;
+.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%);
   }
 }