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

package/src/Tooltip/Tooltip.module.scss

@@ -6,181 +6,179 @@
 @import '../../styles/utils/layers';
 @import './variables';
 
-@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);
-    }
-
-    &.informative {
-      background-color: $color-blue-100;
-      border-color: var(--color-blue-400);
-    }
-
-    &.positive {
-      background-color: $color-green-100;
-      border-color: var(--color-green-500);
-    }
-
-    &.cautionary {
-      background-color: $color-yellow-100;
-      border-color: var(--color-yellow-700);
-    }
+.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;
+}
 
-    &.highlight {
-      background-color: $color-purple-100;
-      border-color: var(--color-purple-400);
-    }
+.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);
   }
 
-  .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;
-
-    [data-popper-placement^='top'] & {
-      bottom: 0;
-    }
-
-    [data-popper-placement^='bottom'] & {
-      top: 0;
+  &.informative {
+    background-color: $color-blue-100;
+    border-color: var(--color-blue-400);
+  }
 
-      // 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);
-      }
-    }
+  &.positive {
+    background-color: $color-green-100;
+    border-color: var(--color-green-500);
+  }
 
-    [data-popper-placement^='left'] & {
-      right: 0;
+  &.cautionary {
+    background-color: $color-yellow-100;
+    border-color: var(--color-yellow-700);
+  }
 
-      .arrowInner {
-        transform: rotate(270deg);
-      }
-    }
+  &.highlight {
+    background-color: $color-purple-100;
+    border-color: var(--color-purple-400);
+  }
+}
 
-    [data-popper-placement^='right'] & {
-      left: 0;
+.arrow {
+  // Ensure the arrow always sits on top of the tooltipContent
+  z-index: 1;
 
-      .arrowInner {
-        transform: rotate(90deg);
-      }
-    }
-  }
+  // This is required by popper, otherwise positioning issues will exist.
+  // https://github.com/popperjs/react-popper/issues/354#issuecomment-616540651
+  position: absolute;
 
-  .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);
+  [data-popper-placement^='top'] & {
+    bottom: 0;
   }
 
-  .arrowMain {
-    // before styles
-    &.default::before {
-      border-top: $arrow-height solid var(--color-gray-500);
-    }
+  [data-popper-placement^='bottom'] & {
+    top: 0;
 
-    &.informative::before {
-      border-top: $arrow-height solid var(--color-blue-400);
+    // 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);
     }
+  }
 
-    &.positive::before {
-      border-top: $arrow-height solid var(--color-green-500);
-    }
+  [data-popper-placement^='left'] & {
+    right: 0;
 
-    &.highlight::before {
-      border-top: $arrow-height solid var(--color-purple-400);
+    .arrowInner {
+      transform: rotate(270deg);
     }
+  }
 
-    &.cautionary::before {
-      border-top: $arrow-height solid var(--color-yellow-700);
-    }
-    // after styles
-    &::after {
-      margin-top: -1.5px;
-    }
+  [data-popper-placement^='right'] & {
+    left: 0;
 
-    &.default::after {
-      border-top: $arrow-height solid white;
+    .arrowInner {
+      transform: rotate(90deg);
     }
+  }
+}
 
-    &.informative::after {
-      border-top: $arrow-height solid $color-blue-100;
-    }
+.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);
+}
 
-    &.positive::after {
-      border-top: $arrow-height solid $color-green-100;
-    }
+.arrowMain {
+  // before styles
+  &.default::before {
+    border-top: $arrow-height solid var(--color-gray-500);
+  }
 
-    &.highlight::after {
-      border-top: $arrow-height solid $color-purple-100;
-    }
+  &.informative::before {
+    border-top: $arrow-height solid var(--color-blue-400);
+  }
 
-    &.cautionary::after {
-      border-top: $arrow-height solid $color-yellow-100;
-    }
+  &.positive::before {
+    border-top: $arrow-height solid var(--color-green-500);
   }
 
-  .arrowShadow::before {
-    border-top: 0 solid $color-gray-300;
+  &.highlight::before {
+    border-top: $arrow-height solid var(--color-purple-400);
   }
 
-  // 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);
+  &.cautionary::before {
+    border-top: $arrow-height solid var(--color-yellow-700);
+  }
+  // after styles
+  &::after {
+    margin-top: -1.5px;
   }
 
-  .displayInline {
-    display: inline;
+  &.default::after {
+    border-top: $arrow-height solid white;
   }
 
-  .displayBlock {
-    display: block;
+  &.informative::after {
+    border-top: $arrow-height solid $color-blue-100;
   }
 
-  .displayInlineBlock {
-    display: inline-block;
+  &.positive::after {
+    border-top: $arrow-height solid $color-green-100;
   }
 
-  .displayFlex {
-    display: flex;
+  &.highlight::after {
+    border-top: $arrow-height solid $color-purple-100;
   }
 
-  .displayInlineFlex {
-    display: inline-flex;
+  &.cautionary::after {
+    border-top: $arrow-height solid $color-yellow-100;
   }
 }
+
+.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;
+}
+
+.displayBlock {
+  display: block;
+}
+
+.displayInlineBlock {
+  display: inline-block;
+}
+
+.displayFlex {
+  display: flex;
+}
+
+.displayInlineFlex {
+  display: inline-flex;
+}

package/src/VisuallyHidden/VisuallyHidden.module.scss

@@ -1,11 +1,9 @@
-@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;
-  }
+.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,108 +1,106 @@
-@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
+.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,17 +1,15 @@
-@layer kz-components {
-  .footerAction {
-    display: flex;
-    flex-grow: 1;
-    flex-basis: auto;
-  }
+.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;
 }