@kaizen/components 1.78.1 → 1.79.1

package/src/GuidanceBlock/GuidanceBlock.module.css

@@ -1,275 +1,277 @@
-.banner.noMaxWidth {
-  max-width: inherit;
-}
-
-.banner {
-  --border-width: var(--border-width-1);
-  --banner-padding: var(--spacing-lg);
-
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-12);
-  min-width: 320px;
-  max-width: var(--layout-breakpoints-large);
-  border: var(--border-width) var(--border-solid-border-style);
-  border-radius: var(--border-solid-border-radius);
-  padding: calc(var(--banner-padding) - var(--border-width));
-  box-shadow: var(--shadow-small-box-shadow);
-  position: relative;
-  top: -1px;
-  transition:
-    opacity var(--animation-duration-slow) ease,
-    margin-top var(--animation-duration-fast) var(--animation-duration-slow) ease;
-  color: var(--color-purple-800);
-
-  @media (width >= 1024px) {
-    min-height: calc(12rem - calc(var(--banner-padding) * 2));
-    flex-direction: row;
-    gap: var(--spacing-24);
-    width: auto;
-    align-items: center;
+@layer kz-components {
+  .banner.noMaxWidth {
+    max-width: inherit;
   }
 
-  @media (width <= 767px) {
-    min-width: unset;
-  }
-}
+  .banner {
+    --border-width: var(--border-width-1);
+    --banner-padding: var(--spacing-lg);
 
-.illustrationWrapper {
-  display: flex;
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-12);
+    min-width: 320px;
+    max-width: var(--layout-breakpoints-large);
+    border: var(--border-width) var(--border-solid-border-style);
+    border-radius: var(--border-solid-border-radius);
+    padding: calc(var(--banner-padding) - var(--border-width));
+    box-shadow: var(--shadow-small-box-shadow);
+    position: relative;
+    top: -1px;
+    transition:
+      opacity var(--animation-duration-slow) ease,
+      margin-top var(--animation-duration-fast) var(--animation-duration-slow) ease;
+    color: var(--color-purple-800);
 
-  @media (768px <= width <= 1023px) {
-    text-align: center;
-    justify-content: center;
-    align-self: center;
-    padding: var(--spacing-12);
-  }
+    @media (width >= 1024px) {
+      min-height: calc(12rem - calc(var(--banner-padding) * 2));
+      flex-direction: row;
+      gap: var(--spacing-24);
+      width: auto;
+      align-items: center;
+    }
 
-  @media (width <= 767px) {
-    display: none;
+    @media (width <= 767px) {
+      min-width: unset;
+    }
   }
-}
-
-.illustration {
-  --illustration-size: 155px;
-  --scene-illustration-size: 300px;
 
-  width: var(--illustration-size);
-  height: var(--illustration-size);
-
-  /* This has been created to handle scene illustrations consistently until the tile component is created */
-  .hasSceneIllustration & {
+  .illustrationWrapper {
     display: flex;
-    justify-content: center;
-    max-width: var(--scene-illustration-size);
-    max-height: var(--scene-illustration-size);
-    width: var(--scene-illustration-size);
-    height: auto;
 
-    figure {
-      max-height: 100%;
-      max-width: 100%;
-      aspect-ratio: 4/3;
+    @media (768px <= width <= 1023px) {
+      text-align: center;
+      justify-content: center;
+      align-self: center;
+      padding: var(--spacing-12);
     }
 
-    img {
-      height: 100%;
-      object-fit: contain;
-      object-position: center;
+    @media (width <= 767px) {
+      display: none;
     }
   }
-}
 
-.descriptionContainer {
-  flex: 1;
-  text-align: center;
-  align-self: center;
-  max-width: 780px;
+  .illustration {
+    --illustration-size: 155px;
+    --scene-illustration-size: 300px;
 
-  @media (width >= 1024px) {
-    padding: 0 var(--spacing-12);
-    text-align: start;
-  }
+    width: var(--illustration-size);
+    height: var(--illustration-size);
 
-  @media (width <= 767px) {
-    margin: var(--spacing-12);
-    max-width: 100%;
+    /* This has been created to handle scene illustrations consistently until the tile component is created */
+    .hasSceneIllustration & {
+      display: flex;
+      justify-content: center;
+      max-width: var(--scene-illustration-size);
+      max-height: var(--scene-illustration-size);
+      width: var(--scene-illustration-size);
+      height: auto;
+
+      figure {
+        max-height: 100%;
+        max-width: 100%;
+        aspect-ratio: 4/3;
+      }
+
+      img {
+        height: 100%;
+        object-fit: contain;
+        object-position: center;
+      }
+    }
   }
-}
 
-.descriptionAndActions {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-24);
-
-  @media (width <= 1023px) {
-    flex-direction: column;
-    width: 100%;
-    align-items: unset;
-  }
-}
+  .descriptionContainer {
+    flex: 1;
+    text-align: center;
+    align-self: center;
+    max-width: 780px;
 
-.buttonContainer {
-  display: flex;
-  justify-content: center;
-  flex-direction: row-reverse;
-  gap: var(--spacing-12);
-  min-width: max-content;
+    @media (width >= 1024px) {
+      padding: 0 var(--spacing-12);
+      text-align: start;
+    }
 
-  @media (width >= 768px) {
-    text-align: center;
+    @media (width <= 767px) {
+      margin: var(--spacing-12);
+      max-width: 100%;
+    }
   }
 
-  @media (width <= 767px) {
-    flex-direction: column;
-    width: 100%;
-    margin-top: var(--spacing-6);
+  .descriptionAndActions {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-24);
+
+    @media (width <= 1023px) {
+      flex-direction: column;
+      width: 100%;
+      align-items: unset;
+    }
   }
-}
 
-.hidden {
-  opacity: 0;
-  margin-bottom: 0;
-}
+  .buttonContainer {
+    display: flex;
+    justify-content: center;
+    flex-direction: row-reverse;
+    gap: var(--spacing-12);
+    min-width: max-content;
 
-.headingWrapper {
-  margin-bottom: var(--spacing-24);
-}
+    @media (width >= 768px) {
+      text-align: center;
+    }
 
-.default {
-  border-color: var(--color-gray-500);
-  background: var(--color-white);
-}
+    @media (width <= 767px) {
+      flex-direction: column;
+      width: 100%;
+      margin-top: var(--spacing-6);
+    }
+  }
 
-.positive {
-  border-color: var(--color-green-500);
-  background: var(--color-green-100);
-}
+  .hidden {
+    opacity: 0;
+    margin-bottom: 0;
+  }
 
-.negative,
-.assertive {
-  border-color: var(--color-red-500);
-  background: var(--color-red-100);
-}
+  .headingWrapper {
+    margin-bottom: var(--spacing-24);
+  }
 
-.informative {
-  border-color: var(--color-blue-400);
-  background: var(--color-blue-100);
-}
+  .default {
+    border-color: var(--color-gray-500);
+    background: var(--color-white);
+  }
 
-.cautionary {
-  border-color: var(--color-yellow-700);
-  background: var(--color-yellow-100);
-}
+  .positive {
+    border-color: var(--color-green-500);
+    background: var(--color-green-100);
+  }
 
-.prominent {
-  border-color: var(--color-purple-400);
-  background: var(--color-purple-100);
-}
+  .negative,
+  .assertive {
+    border-color: var(--color-red-500);
+    background: var(--color-red-100);
+  }
 
-.inline,
-.stacked {
-  flex-flow: row wrap;
-  align-items: unset;
-  gap: var(--spacing-24);
-  min-width: unset;
+  .informative {
+    border-color: var(--color-blue-400);
+    background: var(--color-blue-100);
+  }
 
-  @media (width <= 1023px) {
-    flex-direction: unset;
+  .cautionary {
+    border-color: var(--color-yellow-700);
+    background: var(--color-yellow-100);
   }
 
-  .illustrationWrapper {
-    margin-inline-end: var(--spacing-12);
+  .prominent {
+    border-color: var(--color-purple-400);
+    background: var(--color-purple-100);
+  }
 
-    @media (768px <= width <= 1023px) {
-      padding: 0;
-    }
+  .inline,
+  .stacked {
+    flex-flow: row wrap;
+    align-items: unset;
+    gap: var(--spacing-24);
+    min-width: unset;
 
-    @media (width <= 767px) {
-      display: flex;
+    @media (width <= 1023px) {
+      flex-direction: unset;
     }
-  }
 
-  .descriptionAndActions {
-    margin: auto 0;
-  }
+    .illustrationWrapper {
+      margin-inline-end: var(--spacing-12);
 
-  .descriptionContainer {
-    text-align: start;
-    max-width: unset;
-    min-width: 320px;
+      @media (768px <= width <= 1023px) {
+        padding: 0;
+      }
 
-    @media (width >= 1024px) {
-      padding: 0;
+      @media (width <= 767px) {
+        display: flex;
+      }
     }
 
-    @media (width <= 767px) {
-      margin: 0;
+    .descriptionAndActions {
+      margin: auto 0;
     }
-  }
 
-  .buttonContainer {
-    padding-inline-start: var(--spacing-12);
-    justify-content: flex-start;
-    width: unset;
-    min-width: unset;
+    .descriptionContainer {
+      text-align: start;
+      max-width: unset;
+      min-width: 320px;
 
-    @media (width <= 767px) {
-      flex-direction: row-reverse;
+      @media (width >= 1024px) {
+        padding: 0;
+      }
+
+      @media (width <= 767px) {
+        margin: 0;
+      }
     }
 
-    > * {
+    .buttonContainer {
+      padding-inline-start: var(--spacing-12);
+      justify-content: flex-start;
       width: unset;
-    }
-  }
+      min-width: unset;
 
-  &.hasSceneIllustration {
-    justify-content: center;
-  }
+      @media (width <= 767px) {
+        flex-direction: row-reverse;
+      }
 
-  &.centerContent {
-    flex-direction: column;
+      > * {
+        width: unset;
+      }
+    }
 
-    &.hasSceneIllustration .illustration {
-      width: 100%;
+    &.hasSceneIllustration {
+      justify-content: center;
     }
 
-    .illustrationWrapper {
-      margin: 0 auto;
-      align-self: center;
+    &.centerContent {
+      flex-direction: column;
+
+      &.hasSceneIllustration .illustration {
+        width: 100%;
+      }
+
+      .illustrationWrapper {
+        margin: 0 auto;
+        align-self: center;
+      }
+
+      .descriptionContainer {
+        text-align: center;
+        min-width: unset;
+      }
+
+      .buttonContainer {
+        padding: 0;
+        flex-direction: column;
+        min-width: unset;
+        justify-content: center;
+      }
     }
 
-    .descriptionContainer {
-      text-align: center;
-      min-width: unset;
+    &.centerContent.smallScreenTextAlignment {
+      .descriptionContainer {
+        text-align: start;
+      }
     }
+  }
 
-    .buttonContainer {
-      padding: 0;
+  /* stylelint-disable no-descending-specificity */
+  .stacked {
+    .descriptionAndActions {
       flex-direction: column;
-      min-width: unset;
-      justify-content: center;
+      align-items: unset;
     }
-  }
 
-  &.centerContent.smallScreenTextAlignment {
     .descriptionContainer {
-      text-align: start;
+      align-self: flex-start;
     }
   }
+  /* stylelint-enable no-descending-specificity */
 }
-
-/* stylelint-disable no-descending-specificity */
-.stacked {
-  .descriptionAndActions {
-    flex-direction: column;
-    align-items: unset;
-  }
-
-  .descriptionContainer {
-    align-self: flex-start;
-  }
-}
-/* stylelint-enable no-descending-specificity */

package/src/Heading/Heading.module.scss

@@ -8,106 +8,108 @@
   }
 }
 
-.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;
-}
-
-.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;
-}
+@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;
+  }
 
-.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;
-}
+  .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-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-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-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-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-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-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-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-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;
+  }
 
-.dark {
-  color: $color-purple-800;
-  opacity: 100%;
-}
+  .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;
+  }
 
-.dark-reduced-opacity {
-  color: $color-purple-800;
-  opacity: 70%;
-}
+  .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;
+  }
 
-.white {
-  color: $color-white;
-  opacity: 100%;
-}
+  .dark {
+    color: $color-purple-800;
+    opacity: 100%;
+  }
 
-.white-reduced-opacity {
-  color: $color-white;
-  opacity: 80%;
-}
+  .dark-reduced-opacity {
+    color: $color-purple-800;
+    opacity: 70%;
+  }
 
-.positive {
-  &.small {
-    color: $color-green-600;
+  .white {
+    color: $color-white;
+    opacity: 100%;
   }
 
-  &.large {
-    color: $color-green-500;
+  .white-reduced-opacity {
+    color: $color-white;
+    opacity: 80%;
   }
-}
 
-.negative {
-  &.small {
-    color: $color-red-600;
+  .positive {
+    &.small {
+      color: $color-green-600;
+    }
+
+    &.large {
+      color: $color-green-500;
+    }
   }
 
-  &.large {
-    color: $color-red-500;
+  .negative {
+    &.small {
+      color: $color-red-600;
+    }
+
+    &.large {
+      color: $color-red-500;
+    }
   }
 }