@kaizen/components 1.78.1 → 1.79.0

package/src/Tooltip/Tooltip.module.scss

@@ -6,179 +6,181 @@
 @import '../../styles/utils/layers';
 @import './variables';
 
-.tooltip {
-  position: relative; // Make this a positioned element so z-index works. (Note: Popper overrides this to absolute.)
-  pointer-events: none;
-  z-index: $ca-z-index-tooltip;
-}
+@layer kz-components {
+  .tooltip {
+    position: relative; // Make this a positioned element so z-index works. (Note: Popper overrides this to absolute.)
+    pointer-events: none;
+    z-index: $ca-z-index-tooltip;
+  }
+
+  .tooltipContent {
+    max-width: 400px;
+    padding: var(--spacing-8) calc(9rem / 16); // 8px 9px
+    color: $color-purple-800;
+    text-align: center;
+    font-family: $typography-paragraph-body-font-family;
+    font-size: $typography-heading-6-font-size;
+    font-weight: $typography-paragraph-body-font-weight;
+    letter-spacing: $typography-paragraph-body-letter-spacing;
+    line-height: $typography-paragraph-small-line-height;
+    border: var(--border-width-1) var(--border-solid-border-style);
+    border-radius: $border-solid-border-radius;
+    transition:
+      opacity $animation-duration-fast,
+      transform $animation-duration-fast;
+    box-shadow: $shadow-small-box-shadow;
+
+    &.default {
+      background-color: $color-white;
+      border-color: var(--color-gray-500);
+    }
 
-.tooltipContent {
-  max-width: 400px;
-  padding: var(--spacing-8) calc(9rem / 16); // 8px 9px
-  color: $color-purple-800;
-  text-align: center;
-  font-family: $typography-paragraph-body-font-family;
-  font-size: $typography-heading-6-font-size;
-  font-weight: $typography-paragraph-body-font-weight;
-  letter-spacing: $typography-paragraph-body-letter-spacing;
-  line-height: $typography-paragraph-small-line-height;
-  border: var(--border-width-1) var(--border-solid-border-style);
-  border-radius: $border-solid-border-radius;
-  transition:
-    opacity $animation-duration-fast,
-    transform $animation-duration-fast;
-  box-shadow: $shadow-small-box-shadow;
-
-  &.default {
-    background-color: $color-white;
-    border-color: var(--color-gray-500);
-  }
+    &.informative {
+      background-color: $color-blue-100;
+      border-color: var(--color-blue-400);
+    }
 
-  &.informative {
-    background-color: $color-blue-100;
-    border-color: var(--color-blue-400);
-  }
+    &.positive {
+      background-color: $color-green-100;
+      border-color: var(--color-green-500);
+    }
 
-  &.positive {
-    background-color: $color-green-100;
-    border-color: var(--color-green-500);
-  }
+    &.cautionary {
+      background-color: $color-yellow-100;
+      border-color: var(--color-yellow-700);
+    }
 
-  &.cautionary {
-    background-color: $color-yellow-100;
-    border-color: var(--color-yellow-700);
+    &.highlight {
+      background-color: $color-purple-100;
+      border-color: var(--color-purple-400);
+    }
   }
 
-  &.highlight {
-    background-color: $color-purple-100;
-    border-color: var(--color-purple-400);
-  }
-}
+  .arrow {
+    // Ensure the arrow always sits on top of the tooltipContent
+    z-index: 1;
 
-.arrow {
-  // Ensure the arrow always sits on top of the tooltipContent
-  z-index: 1;
+    // This is required by popper, otherwise positioning issues will exist.
+    // https://github.com/popperjs/react-popper/issues/354#issuecomment-616540651
+    position: absolute;
 
-  // This is required by popper, otherwise positioning issues will exist.
-  // https://github.com/popperjs/react-popper/issues/354#issuecomment-616540651
-  position: absolute;
+    [data-popper-placement^='top'] & {
+      bottom: 0;
+    }
 
-  [data-popper-placement^='top'] & {
-    bottom: 0;
-  }
+    [data-popper-placement^='bottom'] & {
+      top: 0;
 
-  [data-popper-placement^='bottom'] & {
-    top: 0;
+      // There is a conflict with the popper arrow styling, which also
+      // adds a transform to the arrow. Hence, we need this additional
+      // wrapper, just to rotate it.
+      .arrowInner {
+        transform: rotate(180deg);
+      }
+    }
+
+    [data-popper-placement^='left'] & {
+      right: 0;
 
-    // There is a conflict with the popper arrow styling, which also
-    // adds a transform to the arrow. Hence, we need this additional
-    // wrapper, just to rotate it.
-    .arrowInner {
-      transform: rotate(180deg);
+      .arrowInner {
+        transform: rotate(270deg);
+      }
     }
-  }
 
-  [data-popper-placement^='left'] & {
-    right: 0;
+    [data-popper-placement^='right'] & {
+      left: 0;
 
-    .arrowInner {
-      transform: rotate(270deg);
+      .arrowInner {
+        transform: rotate(90deg);
+      }
     }
   }
 
-  [data-popper-placement^='right'] & {
-    left: 0;
+  .arrowMain::before,
+  .arrowMain::after {
+    content: '';
+    position: absolute;
+    left: 50%;
+    border-left: calc(#{$arrow-width} / 2) solid transparent;
+    border-right: calc(#{$arrow-width} / 2) solid transparent;
+    margin-left: calc(#{$arrow-width} / -2);
+  }
 
-    .arrowInner {
-      transform: rotate(90deg);
+  .arrowMain {
+    // before styles
+    &.default::before {
+      border-top: $arrow-height solid var(--color-gray-500);
     }
-  }
-}
 
-.arrowMain::before,
-.arrowMain::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  border-left: calc(#{$arrow-width} / 2) solid transparent;
-  border-right: calc(#{$arrow-width} / 2) solid transparent;
-  margin-left: calc(#{$arrow-width} / -2);
-}
+    &.informative::before {
+      border-top: $arrow-height solid var(--color-blue-400);
+    }
 
-.arrowMain {
-  // before styles
-  &.default::before {
-    border-top: $arrow-height solid var(--color-gray-500);
-  }
+    &.positive::before {
+      border-top: $arrow-height solid var(--color-green-500);
+    }
 
-  &.informative::before {
-    border-top: $arrow-height solid var(--color-blue-400);
-  }
+    &.highlight::before {
+      border-top: $arrow-height solid var(--color-purple-400);
+    }
 
-  &.positive::before {
-    border-top: $arrow-height solid var(--color-green-500);
-  }
+    &.cautionary::before {
+      border-top: $arrow-height solid var(--color-yellow-700);
+    }
+    // after styles
+    &::after {
+      margin-top: -1.5px;
+    }
 
-  &.highlight::before {
-    border-top: $arrow-height solid var(--color-purple-400);
-  }
+    &.default::after {
+      border-top: $arrow-height solid white;
+    }
 
-  &.cautionary::before {
-    border-top: $arrow-height solid var(--color-yellow-700);
-  }
-  // after styles
-  &::after {
-    margin-top: -1.5px;
-  }
+    &.informative::after {
+      border-top: $arrow-height solid $color-blue-100;
+    }
 
-  &.default::after {
-    border-top: $arrow-height solid white;
-  }
+    &.positive::after {
+      border-top: $arrow-height solid $color-green-100;
+    }
 
-  &.informative::after {
-    border-top: $arrow-height solid $color-blue-100;
-  }
+    &.highlight::after {
+      border-top: $arrow-height solid $color-purple-100;
+    }
 
-  &.positive::after {
-    border-top: $arrow-height solid $color-green-100;
+    &.cautionary::after {
+      border-top: $arrow-height solid $color-yellow-100;
+    }
   }
 
-  &.highlight::after {
-    border-top: $arrow-height solid $color-purple-100;
+  .arrowShadow::before {
+    border-top: 0 solid $color-gray-300;
   }
 
-  &.cautionary::after {
-    border-top: $arrow-height solid $color-yellow-100;
+  // Triangle portion is a little darker to bring out shadow
+  .arrowShadow::after {
+    border-top: $arrow-height solid rgba($color-purple-800-rgb, 0.09);
+    margin-top: 1px;
+    filter: blur(4px);
   }
-}
 
-.arrowShadow::before {
-  border-top: 0 solid $color-gray-300;
-}
-
-// Triangle portion is a little darker to bring out shadow
-.arrowShadow::after {
-  border-top: $arrow-height solid rgba($color-purple-800-rgb, 0.09);
-  margin-top: 1px;
-  filter: blur(4px);
-}
-
-.displayInline {
-  display: inline;
-}
+  .displayInline {
+    display: inline;
+  }
 
-.displayBlock {
-  display: block;
-}
+  .displayBlock {
+    display: block;
+  }
 
-.displayInlineBlock {
-  display: inline-block;
-}
+  .displayInlineBlock {
+    display: inline-block;
+  }
 
-.displayFlex {
-  display: flex;
-}
+  .displayFlex {
+    display: flex;
+  }
 
-.displayInlineFlex {
-  display: inline-flex;
+  .displayInlineFlex {
+    display: inline-flex;
+  }
 }

package/src/VisuallyHidden/VisuallyHidden.module.scss

@@ -1,9 +1,11 @@
-.srOnly {
-  clip: rect(0 0 0 0);
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
+@layer kz-components {
+  .srOnly {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+  }
 }

package/src/Well/Well.module.css

@@ -1,106 +1,108 @@
-.container {
-  background-color: var(--background-color);
-  border-width: var(--border-width-1);
-  border-radius: var(--border-solid-border-radius);
-  border-style: var(--border-style);
-  margin-bottom: var(--spacing-24);
-  color: var(--color-purple-800);
-  border-color: var(--border-color);
-}
-
-.noMargin {
-  margin: 0;
-}
-
-.white {
-  --background-color: var(--color-white);
-  --border-color: var(--color-gray-500);
-}
-
-.gray {
-  --background-color: var(--color-gray-200);
-  --border-color: var(--color-gray-500);
-}
-
-.blue {
-  --background-color: var(--color-blue-100);
-  --border-color: var(--color-blue-400);
-}
-
-.yellow {
-  --background-color: var(--color-yellow-100);
-  --border-color: var(--color-yellow-700);
-}
-
-.orange {
-  --background-color: var(--color-orange-100);
-  --border-color: var(--color-orange-600);
-}
-
-.red {
-  --background-color: var(--color-red-100);
-  --border-color: var(--color-red-500);
-}
-
-.green {
-  --background-color: var(--color-green-100);
-  --border-color: var(--color-green-500);
-}
-
-.purple {
-  --background-color: var(--color-purple-100);
-  --border-color: var(--color-purple-400);
-}
-
-.positive {
-  --background-color: var(--color-green-100);
-  --border-color: var(--color-green-500);
-}
-
-/* // These are @deprecated but must come after `color` so not everything will default to white
+@layer kz-components {
+  .container {
+    background-color: var(--background-color);
+    border-width: var(--border-width-1);
+    border-radius: var(--border-solid-border-radius);
+    border-style: var(--border-style);
+    margin-bottom: var(--spacing-24);
+    color: var(--color-purple-800);
+    border-color: var(--border-color);
+  }
+
+  .noMargin {
+    margin: 0;
+  }
+
+  .white {
+    --background-color: var(--color-white);
+    --border-color: var(--color-gray-500);
+  }
+
+  .gray {
+    --background-color: var(--color-gray-200);
+    --border-color: var(--color-gray-500);
+  }
+
+  .blue {
+    --background-color: var(--color-blue-100);
+    --border-color: var(--color-blue-400);
+  }
+
+  .yellow {
+    --background-color: var(--color-yellow-100);
+    --border-color: var(--color-yellow-700);
+  }
+
+  .orange {
+    --background-color: var(--color-orange-100);
+    --border-color: var(--color-orange-600);
+  }
+
+  .red {
+    --background-color: var(--color-red-100);
+    --border-color: var(--color-red-500);
+  }
+
+  .green {
+    --background-color: var(--color-green-100);
+    --border-color: var(--color-green-500);
+  }
+
+  .purple {
+    --background-color: var(--color-purple-100);
+    --border-color: var(--color-purple-400);
+  }
+
+  .positive {
+    --background-color: var(--color-green-100);
+    --border-color: var(--color-green-500);
+  }
+
+  /* // These are @deprecated but must come after `color` so not everything will default to white
 // This will be @deprecated */
-.default {
-  --background-color: var(--color-gray-200);
-  --border-color: var(--color-gray-500);
-}
-
-.negative {
-  --background-color: var(--color-red-100);
-  --border-color: var(--color-red-500);
-}
-
-.informative {
-  --background-color: var(--color-blue-100);
-  --border-color: var(--color-blue-400);
-}
-
-.cautionary {
-  --background-color: var(--color-yellow-100);
-  --border-color: var(--color-yellow-700);
-}
-
-.assertive {
-  --background-color: var(--color-orange-100);
-  --border-color: var(--color-orange-600);
-}
-
-.prominent {
-  --background-color: var(--color-purple-100);
-  --border-color: var(--color-purple-400);
-}
-
-/* // @deprecated end
+  .default {
+    --background-color: var(--color-gray-200);
+    --border-color: var(--color-gray-500);
+  }
+
+  .negative {
+    --background-color: var(--color-red-100);
+    --border-color: var(--color-red-500);
+  }
+
+  .informative {
+    --background-color: var(--color-blue-100);
+    --border-color: var(--color-blue-400);
+  }
+
+  .cautionary {
+    --background-color: var(--color-yellow-100);
+    --border-color: var(--color-yellow-700);
+  }
+
+  .assertive {
+    --background-color: var(--color-orange-100);
+    --border-color: var(--color-orange-600);
+  }
+
+  .prominent {
+    --background-color: var(--color-purple-100);
+    --border-color: var(--color-purple-400);
+  }
+
+  /* // @deprecated end
 
 // Border Style Variations */
-.solid {
-  --border-style: solid;
-}
-
-.dashed {
-  --border-style: dashed;
-}
-
-.none {
-  --border-color: transparent;
-  --border-style: none;
+  .solid {
+    --border-style: solid;
+  }
+
+  .dashed {
+    --border-style: dashed;
+  }
+
+  .none {
+    --border-color: transparent;
+    --border-style: none;
+  }
 }

package/src/Workflow/subcomponents/Footer/components/FooterActions/FooterActions.module.css

@@ -1,15 +1,17 @@
-.footerAction {
-  display: flex;
-  flex-grow: 1;
-  flex-basis: auto;
-}
+@layer kz-components {
+  .footerAction {
+    display: flex;
+    flex-grow: 1;
+    flex-basis: auto;
+  }
 
-.footerActionPrevious {
-  grid-area: prev;
-  justify-content: start;
-}
+  .footerActionPrevious {
+    grid-area: prev;
+    justify-content: start;
+  }
 
-.footerActionNext {
-  grid-area: next;
-  justify-content: end;
+  .footerActionNext {
+    grid-area: next;
+    justify-content: end;
+  }
 }