@kaizen/components 0.0.0-canary-test-cherry-picked-updates-20250702235156 → 0.0.0-canary-ssr-generic-modal-2-20250709041326

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

@@ -1,43 +1,45 @@
 @import '../../../styles/utils/button-reset';
 
-.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;
-}
+@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;
+  }
 
-.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,32 +1,34 @@
-$ca-icon-width: 20px;
-$ca-icon-height: 20px;
+@layer kz-components {
+  $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;
-  }
+    // 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;
-  }
+    @media screen and (-ms-high-contrast: active) {
+      color: black;
+    }
 
-  @media screen and (-ms-high-contrast: white-on-black) {
-    color: white;
-  }
+    @media screen and (-ms-high-contrast: white-on-black) {
+      color: white;
+    }
 
-  @media screen and (-ms-high-contrast: black-on-white) {
-    color: black;
+    @media screen and (-ms-high-contrast: black-on-white) {
+      color: black;
+    }
   }
-}
 
-.inheritSize {
-  width: inherit;
-  height: inherit;
-  display: block;
+  .inheritSize {
+    width: inherit;
+    height: inherit;
+    display: block;
+  }
 }

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

@@ -1,125 +1,127 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/animation';
 
-.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%;
+@layer kz-components {
+  .wrapper {
+    width: 100%;
+    margin: 0;
   }
 
-  svg {
-    color: $color-purple-800;
-    opacity: 70%;
+  .figure {
+    margin: 0;
+    position: relative;
   }
 
-  &:hover,
-  &:focus {
-    opacity: 100%;
-    background-color: $color-gray-200 !important;
-
-    svg {
+  // 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:hover {
-  .pausePlayButton {
-    opacity: 100%;
-  }
-}
 
-.aspectRatioWrapper {
-  margin: 0;
-  display: flex;
-  align-items: center;
-}
+    svg {
+      color: $color-purple-800;
+      opacity: 70%;
+    }
 
-.landscape {
-  aspect-ratio: 4/3;
+    &:hover,
+    &:focus {
+      opacity: 100%;
+      background-color: $color-gray-200 !important;
 
-  @supports not (aspect-ratio: auto) {
-    &::before {
-      float: left;
-      padding-top: 75%;
-      content: '';
+      svg {
+        opacity: 100%;
+      }
     }
+  }
 
-    &::after {
-      display: block;
-      content: '';
-      clear: both;
+  .figure:hover {
+    .pausePlayButton {
+      opacity: 100%;
     }
   }
-}
-
-.portrait {
-  aspect-ratio: 3/4;
 
-  @supports not (aspect-ratio: auto) {
-    &::before {
-      float: left;
-      padding-top: 133.33%;
-      content: '';
-    }
+  .aspectRatioWrapper {
+    margin: 0;
+    display: flex;
+    align-items: center;
+  }
 
-    &::after {
-      display: block;
-      content: '';
-      clear: both;
+  .landscape {
+    aspect-ratio: 4/3;
+
+    @supports not (aspect-ratio: auto) {
+      &::before {
+        float: left;
+        padding-top: 75%;
+        content: '';
+      }
+
+      &::after {
+        display: block;
+        content: '';
+        clear: both;
+      }
     }
   }
-}
-
-.square {
-  aspect-ratio: auto 1/1;
 
-  @supports not (aspect-ratio: auto) {
-    &::before {
-      float: left;
-      padding-top: 100%;
-      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;
+
+    @supports not (aspect-ratio: auto) {
+      &::before {
+        float: left;
+        padding-top: 100%;
+        content: '';
+      }
+
+      &::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;
+  // 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;
+  }
 }