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

package/src/Heading/Heading.module.scss

@@ -8,108 +8,106 @@
   }
 }
 
-@layer kz-components {
-  .display-0 {
-    font-family: $typography-display-0-font-family;
-    font-weight: $typography-display-0-font-weight;
-    font-size: $typography-display-0-font-size;
-    line-height: $typography-display-0-line-height;
-    letter-spacing: $typography-display-0-letter-spacing;
-  }
+.display-0 {
+  font-family: $typography-display-0-font-family;
+  font-weight: $typography-display-0-font-weight;
+  font-size: $typography-display-0-font-size;
+  line-height: $typography-display-0-line-height;
+  letter-spacing: $typography-display-0-letter-spacing;
+}
 
-  .composable-header-title {
-    font-family: $typography-display-0-font-family; // Tiempos
-    font-weight: 500; // Medium
-    font-size: $typography-heading-1-font-size;
-    line-height: $typography-heading-1-line-height;
-    letter-spacing: $typography-heading-1-letter-spacing;
-  }
+.composable-header-title {
+  font-family: $typography-display-0-font-family; // Tiempos
+  font-weight: 500; // Medium
+  font-size: $typography-heading-1-font-size;
+  line-height: $typography-heading-1-line-height;
+  letter-spacing: $typography-heading-1-letter-spacing;
+}
 
-  .heading-1 {
-    font-family: $typography-heading-1-font-family;
-    font-weight: $typography-heading-1-font-weight;
-    font-size: $typography-heading-1-font-size;
-    line-height: $typography-heading-1-line-height;
-    letter-spacing: $typography-heading-1-letter-spacing;
-  }
+.heading-1 {
+  font-family: $typography-heading-1-font-family;
+  font-weight: $typography-heading-1-font-weight;
+  font-size: $typography-heading-1-font-size;
+  line-height: $typography-heading-1-line-height;
+  letter-spacing: $typography-heading-1-letter-spacing;
+}
 
-  .heading-2 {
-    font-family: $typography-heading-2-font-family;
-    font-weight: $typography-heading-2-font-weight;
-    font-size: $typography-heading-2-font-size;
-    line-height: $typography-heading-2-line-height;
-    letter-spacing: $typography-heading-2-letter-spacing;
-  }
+.heading-2 {
+  font-family: $typography-heading-2-font-family;
+  font-weight: $typography-heading-2-font-weight;
+  font-size: $typography-heading-2-font-size;
+  line-height: $typography-heading-2-line-height;
+  letter-spacing: $typography-heading-2-letter-spacing;
+}
 
-  .heading-3 {
-    font-family: $typography-heading-3-font-family;
-    font-weight: $typography-heading-3-font-weight;
-    font-size: $typography-heading-3-font-size;
-    line-height: $typography-heading-3-line-height;
-    letter-spacing: $typography-heading-3-letter-spacing;
-  }
+.heading-3 {
+  font-family: $typography-heading-3-font-family;
+  font-weight: $typography-heading-3-font-weight;
+  font-size: $typography-heading-3-font-size;
+  line-height: $typography-heading-3-line-height;
+  letter-spacing: $typography-heading-3-letter-spacing;
+}
 
-  .heading-4 {
-    font-family: $typography-heading-4-font-family;
-    font-weight: $typography-heading-4-font-weight;
-    font-size: $typography-heading-4-font-size;
-    line-height: $typography-heading-4-line-height;
-    letter-spacing: $typography-heading-4-letter-spacing;
-  }
+.heading-4 {
+  font-family: $typography-heading-4-font-family;
+  font-weight: $typography-heading-4-font-weight;
+  font-size: $typography-heading-4-font-size;
+  line-height: $typography-heading-4-line-height;
+  letter-spacing: $typography-heading-4-letter-spacing;
+}
 
-  .heading-5 {
-    font-family: $typography-heading-5-font-family;
-    font-weight: $typography-heading-5-font-weight;
-    font-size: $typography-heading-5-font-size;
-    line-height: $typography-heading-5-line-height;
-    letter-spacing: $typography-heading-5-letter-spacing;
-  }
+.heading-5 {
+  font-family: $typography-heading-5-font-family;
+  font-weight: $typography-heading-5-font-weight;
+  font-size: $typography-heading-5-font-size;
+  line-height: $typography-heading-5-line-height;
+  letter-spacing: $typography-heading-5-letter-spacing;
+}
 
-  .heading-6 {
-    font-family: $typography-heading-6-font-family;
-    font-weight: $typography-heading-6-font-weight;
-    font-size: $typography-heading-6-font-size;
-    line-height: $typography-heading-6-line-height;
-    letter-spacing: $typography-heading-6-letter-spacing;
-  }
+.heading-6 {
+  font-family: $typography-heading-6-font-family;
+  font-weight: $typography-heading-6-font-weight;
+  font-size: $typography-heading-6-font-size;
+  line-height: $typography-heading-6-line-height;
+  letter-spacing: $typography-heading-6-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 {
-    &.small {
-      color: $color-green-600;
-    }
+.positive {
+  &.small {
+    color: $color-green-600;
+  }
 
-    &.large {
-      color: $color-green-500;
-    }
+  &.large {
+    color: $color-green-500;
   }
+}
 
-  .negative {
-    &.small {
-      color: $color-red-600;
-    }
+.negative {
+  &.small {
+    color: $color-red-600;
+  }
 
-    &.large {
-      color: $color-red-500;
-    }
+  &.large {
+    color: $color-red-500;
   }
 }

package/src/Icon/_docs/icon.module.scss

@@ -1,45 +1,43 @@
 @import '../../../styles/utils/button-reset';
 
-@layer kz-components {
-  .grid {
-    display: grid;
-    grid-template-columns: repeat(6, 150px);
-    grid-template-rows: min-content;
-    grid-gap: var(--spacing-8);
-    margin: 0;
-    padding: 0;
-    list-style: none;
-  }
+.grid {
+  display: grid;
+  grid-template-columns: repeat(6, 150px);
+  grid-template-rows: min-content;
+  grid-gap: var(--spacing-8);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
 
-  .button {
-    @include button-reset;
+.button {
+  @include button-reset;
 
-    display: inline-flex;
-    flex-direction: column;
-    align-items: center;
-    gap: var(--spacing-8);
-    padding: var(--spacing-16);
-    width: 100%;
-    height: 100%;
-    background-color: var(--color-gray-100);
-    border-radius: var(--border-solid-border-radius);
-    word-break: break-all;
-    cursor: pointer;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-8);
+  padding: var(--spacing-16);
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-gray-100);
+  border-radius: var(--border-solid-border-radius);
+  word-break: break-all;
+  cursor: pointer;
 
-    &:hover {
-      background-color: var(--color-gray-200);
-    }
+  &:hover {
+    background-color: var(--color-gray-200);
   }
+}
 
-  .copiedTag {
-    margin: auto;
-  }
+.copiedTag {
+  margin: auto;
+}
 
-  .icon {
-    margin-bottom: var(--spacing-8);
-  }
+.icon {
+  margin-bottom: var(--spacing-8);
+}
 
-  .tag {
-    border: 1px solid var(--color-green-500);
-  }
+.tag {
+  border: 1px solid var(--color-green-500);
 }

package/src/Icon/subcomponents/SVG/SVG.module.scss

@@ -1,34 +1,32 @@
-@layer kz-components {
-  $ca-icon-width: 20px;
-  $ca-icon-height: 20px;
+$ca-icon-width: 20px;
+$ca-icon-height: 20px;
 
-  .icon {
-    width: $ca-icon-width;
-    height: $ca-icon-height;
-    display: inline-block;
+.icon {
+  width: $ca-icon-width;
+  height: $ca-icon-height;
+  display: inline-block;
 
-    // jQuery has an IE11 bug where delegated events aren't registered if the click was on an icon.
-    // A workaround is to disable `point-events` on the use element. See https://github.com/jquery/jquery/issues/3877
-    > use {
-      pointer-events: none;
-    }
-
-    @media screen and (-ms-high-contrast: active) {
-      color: black;
-    }
+  // jQuery has an IE11 bug where delegated events aren't registered if the click was on an icon.
+  // A workaround is to disable `point-events` on the use element. See https://github.com/jquery/jquery/issues/3877
+  > use {
+    pointer-events: none;
+  }
 
-    @media screen and (-ms-high-contrast: white-on-black) {
-      color: white;
-    }
+  @media screen and (-ms-high-contrast: active) {
+    color: black;
+  }
 
-    @media screen and (-ms-high-contrast: black-on-white) {
-      color: black;
-    }
+  @media screen and (-ms-high-contrast: white-on-black) {
+    color: white;
   }
 
-  .inheritSize {
-    width: inherit;
-    height: inherit;
-    display: block;
+  @media screen and (-ms-high-contrast: black-on-white) {
+    color: black;
   }
 }
+
+.inheritSize {
+  width: inherit;
+  height: inherit;
+  display: block;
+}

package/src/Illustration/subcomponents/Base/Base.module.scss

@@ -1,127 +1,125 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/animation';
 
-@layer kz-components {
-  .wrapper {
-    width: 100%;
-    margin: 0;
+.wrapper {
+  width: 100%;
+  margin: 0;
+}
+
+.figure {
+  margin: 0;
+  position: relative;
+}
+
+// nested to get more specificity, beat out the generic button styles
+.figure .pausePlayButton {
+  opacity: 0%;
+  position: absolute;
+  right: 1rem;
+  bottom: 1rem;
+  /* stylelint-disable declaration-no-important */
+  background-color: $color-white !important;
+  border: 1px solid $color-gray-400;
+  transition: all $animation-duration-immediate;
+
+  @media (hover: none) and (pointer: coarse) {
+    opacity: 100%;
   }
 
-  .figure {
-    margin: 0;
-    position: relative;
+  svg {
+    color: $color-purple-800;
+    opacity: 70%;
   }
 
-  // nested to get more specificity, beat out the generic button styles
-  .figure .pausePlayButton {
-    opacity: 0%;
-    position: absolute;
-    right: 1rem;
-    bottom: 1rem;
-    /* stylelint-disable declaration-no-important */
-    background-color: $color-white !important;
-    border: 1px solid $color-gray-400;
-    transition: all $animation-duration-immediate;
-
-    @media (hover: none) and (pointer: coarse) {
-      opacity: 100%;
-    }
+  &:hover,
+  &:focus {
+    opacity: 100%;
+    background-color: $color-gray-200 !important;
 
     svg {
-      color: $color-purple-800;
-      opacity: 70%;
+      opacity: 100%;
     }
+  }
+}
 
-    &:hover,
-    &:focus {
-      opacity: 100%;
-      background-color: $color-gray-200 !important;
+.figure:hover {
+  .pausePlayButton {
+    opacity: 100%;
+  }
+}
+
+.aspectRatioWrapper {
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+
+.landscape {
+  aspect-ratio: 4/3;
 
-      svg {
-        opacity: 100%;
-      }
+  @supports not (aspect-ratio: auto) {
+    &::before {
+      float: left;
+      padding-top: 75%;
+      content: '';
     }
-  }
 
-  .figure:hover {
-    .pausePlayButton {
-      opacity: 100%;
+    &::after {
+      display: block;
+      content: '';
+      clear: both;
     }
   }
+}
 
-  .aspectRatioWrapper {
-    margin: 0;
-    display: flex;
-    align-items: center;
-  }
+.portrait {
+  aspect-ratio: 3/4;
 
-  .landscape {
-    aspect-ratio: 4/3;
-
-    @supports not (aspect-ratio: auto) {
-      &::before {
-        float: left;
-        padding-top: 75%;
-        content: '';
-      }
-
-      &::after {
-        display: block;
-        content: '';
-        clear: both;
-      }
+  @supports not (aspect-ratio: auto) {
+    &::before {
+      float: left;
+      padding-top: 133.33%;
+      content: '';
     }
-  }
 
-  .portrait {
-    aspect-ratio: 3/4;
-
-    @supports not (aspect-ratio: auto) {
-      &::before {
-        float: left;
-        padding-top: 133.33%;
-        content: '';
-      }
-
-      &::after {
-        display: block;
-        content: '';
-        clear: both;
-      }
+    &::after {
+      display: block;
+      content: '';
+      clear: both;
     }
   }
+}
+
+.square {
+  aspect-ratio: auto 1/1;
 
-  .square {
-    aspect-ratio: auto 1/1;
-
-    @supports not (aspect-ratio: auto) {
-      &::before {
-        float: left;
-        padding-top: 100%;
-        content: '';
-      }
-
-      &::after {
-        display: block;
-        content: '';
-        clear: both;
-      }
+  @supports not (aspect-ratio: auto) {
+    &::before {
+      float: left;
+      padding-top: 100%;
+      content: '';
     }
-  }
 
-  // If the .visually-hidden class is applied to natively focusable elements
-  // (such as a, button, input, etc) they must become visible when they receive
-  // keyboard focus. Otherwise, a sighted keyboard user would have to try and
-  // figure out where their visible focus indicator had gone to.
-  .visuallyHidden:not(:focus, :active) {
-    clip: rect(0, 0, 0, 0);
-    clip-path: inset(50%);
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    overflow: hidden;
-    white-space: nowrap;
-    border: 0;
+    &::after {
+      display: block;
+      content: '';
+      clear: both;
+    }
   }
 }
+
+// If the .visually-hidden class is applied to natively focusable elements
+// (such as a, button, input, etc) they must become visible when they receive
+// keyboard focus. Otherwise, a sighted keyboard user would have to try and
+// figure out where their visible focus indicator had gone to.
+.visuallyHidden:not(:focus, :active) {
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+}