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

package/src/Link/Link.module.css

@@ -1,116 +1,114 @@
-@layer kz-components {
-  .link {
-    color: var(--link-text-color, var(--color-blue-500));
-    font-family: var(--typography-paragraph-body-font-family);
-    font-size: var(--link-font-size, inherit);
-    line-height: var(--link-line-height, inherit);
-    font-weight: var(--typography-paragraph-body-font-weight);
-    text-decoration: none;
-    position: relative;
-    white-space: nowrap;
-    outline: 0;
-  }
-
-  .link[data-focus-visible] {
-    outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
-      var(--color-blue-500);
-    outline-offset: 3px;
-  }
-
-  .isUnderlined {
-    border-bottom: var(--spacing-1) solid var(--link-text-color, var(--color-blue-500));
-  }
-
-  .icon > * {
-    vertical-align: text-bottom;
-    font-size: var(--icon-font-size, 1em);
-  }
-
-  .iconStart {
-    margin-inline-start: var(--text-icon-gap, 0.5em);
-  }
-
-  .iconEnd {
-    margin-inline-end: var(--text-icon-gap, 0.5em);
-  }
-
-  .primary[data-hovered] {
-    --link-text-color: var(--color-blue-600);
-  }
-
-  .primary[data-pressed] {
-    --link-text-color: var(--color-blue-700);
-  }
-
-  .secondary {
-    --link-text-color: var(--color-purple-800);
-  }
-
-  .secondary[data-hovered] {
-    --link-text-color: var(--color-gray-600);
-  }
-
-  .secondary[data-pressed] {
-    --link-text-color: var(--color-black);
-  }
-
-  [class*='extra-small'] .link.isInline,
-  .extra-small {
-    --link-font-size: var(--typography-paragraph-extra-small-font-size);
-    --link-line-height: var(--typography-paragraph-extra-small-line-height);
-    --icon-font-size: 0.875rem;
-    --text-icon-gap: var(--spacing-2);
-  }
-
-  [class*='body'] .link.isInline,
-  .body {
-    --link-font-size: var(--typography-paragraph-body-font-size);
-    --link-line-height: var(--typography-paragraph-body-line-height);
-    --icon-font-size: 1.25rem;
-    --text-icon-gap: var(--spacing-6);
-  }
-
-  [class*='intro-lede'] .link.isInline,
-  .intro-lede {
-    --link-font-size: var(--typography-paragraph-intro-lede-font-size);
-    --link-line-height: var(--typography-paragraph-intro-lede-line-height);
-    --icon-font-size: 1.5rem;
-    --text-icon-gap: var(--spacing-8);
-  }
-
-  [class*='small']:not([class*='extra-small']) .link.isInline,
-  .small {
-    --link-font-size: var(--typography-paragraph-small-font-size);
-    --link-line-height: var(--typography-paragraph-small-line-height);
-    --icon-font-size: 1rem;
-    --text-icon-gap: var(--spacing-4);
-  }
-
-  .white {
-    --link-text-color: var(--color-white);
-  }
-
-  .white[data-focus-visible] {
-    outline-color: var(--color-blue-300);
-  }
-
-  .white.isDisabled {
-    --link-text-color: rgb(var(--color-white-rgb), 0.2);
-  }
-
-  .reversed {
-    --link-text-color: var(--color-white);
-  }
-
-  .reversed[data-focus-visible] {
-    outline-color: var(--color-blue-300);
-  }
-
-  .link.isDisabled {
-    --link-text-color: var(--color-gray-400);
-  }
-
-  .reversed.isDisabled {
-    --link-text-color: rgb(var(--color-white-rgb), 0.2);
-  }
+.link {
+  color: var(--link-text-color, var(--color-blue-500));
+  font-family: var(--typography-paragraph-body-font-family);
+  font-size: var(--link-font-size, inherit);
+  line-height: var(--link-line-height, inherit);
+  font-weight: var(--typography-paragraph-body-font-weight);
+  text-decoration: none;
+  position: relative;
+  white-space: nowrap;
+  outline: 0;
+}
+
+.link[data-focus-visible] {
+  outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
+    var(--color-blue-500);
+  outline-offset: 3px;
+}
+
+.isUnderlined {
+  border-bottom: var(--spacing-1) solid var(--link-text-color, var(--color-blue-500));
+}
+
+.icon > * {
+  vertical-align: text-bottom;
+  font-size: var(--icon-font-size, 1em);
+}
+
+.iconStart {
+  margin-inline-start: var(--text-icon-gap, 0.5em);
+}
+
+.iconEnd {
+  margin-inline-end: var(--text-icon-gap, 0.5em);
+}
+
+.primary[data-hovered] {
+  --link-text-color: var(--color-blue-600);
+}
+
+.primary[data-pressed] {
+  --link-text-color: var(--color-blue-700);
+}
+
+.secondary {
+  --link-text-color: var(--color-purple-800);
+}
+
+.secondary[data-hovered] {
+  --link-text-color: var(--color-gray-600);
+}
+
+.secondary[data-pressed] {
+  --link-text-color: var(--color-black);
+}
+
+[class*='extra-small'] .link.isInline,
+.extra-small {
+  --link-font-size: var(--typography-paragraph-extra-small-font-size);
+  --link-line-height: var(--typography-paragraph-extra-small-line-height);
+  --icon-font-size: 0.875rem;
+  --text-icon-gap: var(--spacing-2);
+}
+
+[class*='body'] .link.isInline,
+.body {
+  --link-font-size: var(--typography-paragraph-body-font-size);
+  --link-line-height: var(--typography-paragraph-body-line-height);
+  --icon-font-size: 1.25rem;
+  --text-icon-gap: var(--spacing-6);
+}
+
+[class*='intro-lede'] .link.isInline,
+.intro-lede {
+  --link-font-size: var(--typography-paragraph-intro-lede-font-size);
+  --link-line-height: var(--typography-paragraph-intro-lede-line-height);
+  --icon-font-size: 1.5rem;
+  --text-icon-gap: var(--spacing-8);
+}
+
+[class*='small']:not([class*='extra-small']) .link.isInline,
+.small {
+  --link-font-size: var(--typography-paragraph-small-font-size);
+  --link-line-height: var(--typography-paragraph-small-line-height);
+  --icon-font-size: 1rem;
+  --text-icon-gap: var(--spacing-4);
+}
+
+.white {
+  --link-text-color: var(--color-white);
+}
+
+.white[data-focus-visible] {
+  outline-color: var(--color-blue-300);
+}
+
+.white.isDisabled {
+  --link-text-color: rgba(var(--color-white-rgb), 0.2);
+}
+
+.reversed {
+  --link-text-color: var(--color-white);
+}
+
+.reversed[data-focus-visible] {
+  outline-color: var(--color-blue-300);
+}
+
+.link.isDisabled {
+  --link-text-color: var(--color-gray-400);
+}
+
+.reversed.isDisabled {
+  --link-text-color: rgba(var(--color-white-rgb), 0.2);
 }

package/src/LinkButton/LinkButton.module.css

@@ -1,6 +1,4 @@
-@layer kz-components {
-  .linkButton {
-    /* Reset */
-    text-decoration: inherit;
-  }
+.linkButton {
+  /* Reset */
+  text-decoration: inherit;
 }

package/src/Loading/LoadingGraphic/LoadingGraphic.module.scss

@@ -1,19 +1,17 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '../mixins';
 
-@layer kz-components {
-  .loadingGraphic {
-    @extend %loadingBase;
+.loadingGraphic {
+  @extend %loadingBase;
 
-    background-color: rgba($color-gray-600-rgb, 0.1);
-    border-radius: 50%;
-  }
+  background-color: rgba($color-gray-600-rgb, 0.1);
+  border-radius: 50%;
+}
 
-  .isReversed {
-    background-color: rgba($color-white-rgb, 0.1);
-  }
+.isReversed {
+  background-color: rgba($color-white-rgb, 0.1);
+}
 
-  .isAnimated {
-    @extend %loadingAnimated;
-  }
+.isAnimated {
+  @extend %loadingAnimated;
 }

package/src/Loading/LoadingHeading/LoadingHeading.module.scss

@@ -2,61 +2,59 @@
 @import '~@kaizen/design-tokens/sass/typography';
 @import '../mixins';
 
-@layer kz-components {
-  .loadingHeading {
-    @extend %loadingBase;
+.loadingHeading {
+  @extend %loadingBase;
 
-    background-color: rgba($color-gray-500-rgb, 0.2);
-  }
+  background-color: rgba($color-gray-500-rgb, 0.2);
+}
 
-  .isAnimated {
-    @extend %loadingAnimated;
-  }
+.isAnimated {
+  @extend %loadingAnimated;
+}
 
-  .display-0 {
-    height: $typography-display-0-font-size;
-    margin-bottom: calc(#{$typography-display-0-line-height} - #{$typography-display-0-font-size});
-  }
+.display-0 {
+  height: $typography-display-0-font-size;
+  margin-bottom: calc(#{$typography-display-0-line-height} - #{$typography-display-0-font-size});
+}
 
-  .heading-1 {
-    height: $typography-heading-1-font-size;
-    margin-bottom: calc(#{$typography-heading-1-line-height} - #{$typography-heading-1-font-size});
-  }
+.heading-1 {
+  height: $typography-heading-1-font-size;
+  margin-bottom: calc(#{$typography-heading-1-line-height} - #{$typography-heading-1-font-size});
+}
 
-  .heading-2 {
-    height: $typography-heading-2-font-size;
-    margin-bottom: calc(#{$typography-heading-2-line-height} - #{$typography-heading-2-font-size});
-  }
+.heading-2 {
+  height: $typography-heading-2-font-size;
+  margin-bottom: calc(#{$typography-heading-2-line-height} - #{$typography-heading-2-font-size});
+}
 
-  .heading-3 {
-    height: $typography-heading-3-font-size;
-    margin-bottom: calc(#{$typography-heading-3-line-height} - #{$typography-heading-3-font-size});
-  }
+.heading-3 {
+  height: $typography-heading-3-font-size;
+  margin-bottom: calc(#{$typography-heading-3-line-height} - #{$typography-heading-3-font-size});
+}
 
-  .heading-4 {
-    height: $typography-heading-4-font-size;
-    margin-bottom: calc(#{$typography-heading-4-line-height} - #{$typography-heading-4-font-size});
-  }
+.heading-4 {
+  height: $typography-heading-4-font-size;
+  margin-bottom: calc(#{$typography-heading-4-line-height} - #{$typography-heading-4-font-size});
+}
 
-  .heading-5 {
-    height: $typography-heading-5-font-size;
-    margin-bottom: calc(#{$typography-heading-5-line-height} - #{$typography-heading-5-font-size});
-  }
+.heading-5 {
+  height: $typography-heading-5-font-size;
+  margin-bottom: calc(#{$typography-heading-5-line-height} - #{$typography-heading-5-font-size});
+}
 
-  .heading-6 {
-    height: $typography-heading-6-font-size;
-    margin-bottom: calc(#{$typography-heading-6-line-height} - #{$typography-heading-6-font-size});
-  }
+.heading-6 {
+  height: $typography-heading-6-font-size;
+  margin-bottom: calc(#{$typography-heading-6-line-height} - #{$typography-heading-6-font-size});
+}
 
-  .isReversed {
-    background-color: rgba($color-white-rgb, 0.2);
-  }
+.isReversed {
+  background-color: rgba($color-white-rgb, 0.2);
+}
 
-  .link {
-    background-color: rgba($color-blue-500-rgb, 0.2);
+.link {
+  background-color: rgba($color-blue-500-rgb, 0.2);
 
-    &.isReversed {
-      background-color: rgba($color-white-rgb, 0.65);
-    }
+  &.isReversed {
+    background-color: rgba($color-white-rgb, 0.65);
   }
 }

package/src/Loading/LoadingInput/LoadingInput.module.scss

@@ -1,18 +1,16 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '../mixins';
 
-@layer kz-components {
-  .loadingInput {
-    @extend %loadingBase;
+.loadingInput {
+  @extend %loadingBase;
 
-    background-color: rgba($color-gray-600-rgb, 0.1);
-  }
+  background-color: rgba($color-gray-600-rgb, 0.1);
+}
 
-  .isAnimated {
-    @extend %loadingAnimated;
-  }
+.isAnimated {
+  @extend %loadingAnimated;
+}
 
-  .isReversed {
-    background-color: rgba($color-white-rgb, 0.1);
-  }
+.isReversed {
+  background-color: rgba($color-white-rgb, 0.1);
 }

package/src/Loading/LoadingParagraph/LoadingParagraph.module.scss

@@ -2,51 +2,49 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '../mixins';
 
-@layer kz-components {
-  .loadingParagraph {
-    @extend %loadingBase;
-
-    background-color: $color-gray-300;
-    height: calc(#{$spacing-md} * 0.625);
-    margin-bottom: calc(#{$spacing-md} * 0.5);
-  }
-
-  .isReversed {
-    background-color: rgba($color-white-rgb, 0.1);
-  }
-
-  .isLink {
-    background-color: rgba($color-blue-500-rgb, 0.2);
-  }
-
-  .isLink.isReversed {
-    background-color: rgba($color-white-rgb, 0.65);
-  }
-
-  .isAnimated {
-    @extend %loadingAnimated;
-  }
-
-  .isCentered {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  .isInline {
-    display: inline-block;
-    margin-bottom: calc(#{$spacing-md} * 0.35);
-  }
-
-  .isInline + .isInline {
-    margin-inline-start: $spacing-md;
-  }
-
-  .noBottomMargin {
-    margin-bottom: 0;
-  }
-
-  // We double the class selector to increase specificity above rules like `h1.default-style`
-  .inheritBaseline.inheritBaseline {
-    position: static;
-  }
+.loadingParagraph {
+  @extend %loadingBase;
+
+  background-color: $color-gray-300;
+  height: calc(#{$spacing-md} * 0.625);
+  margin-bottom: calc(#{$spacing-md} * 0.5);
+}
+
+.isReversed {
+  background-color: rgba($color-white-rgb, 0.1);
+}
+
+.isLink {
+  background-color: rgba($color-blue-500-rgb, 0.2);
+}
+
+.isLink.isReversed {
+  background-color: rgba($color-white-rgb, 0.65);
+}
+
+.isAnimated {
+  @extend %loadingAnimated;
+}
+
+.isCentered {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.isInline {
+  display: inline-block;
+  margin-bottom: calc(#{$spacing-md} * 0.35);
+}
+
+.isInline + .isInline {
+  margin-inline-start: $spacing-md;
+}
+
+.noBottomMargin {
+  margin-bottom: 0;
+}
+
+// We double the class selector to increase specificity above rules like `h1.default-style`
+.inheritBaseline.inheritBaseline {
+  position: static;
 }

package/src/Loading/LoadingSpinner/LoadingSpinner.module.css

@@ -1,30 +1,28 @@
-@layer kz-components {
-  .loadingSpinner {
-    --loading-spinner-size: 48px;
+.loadingSpinner {
+  --loading-spinner-size: 48px;
 
-    display: flex;
-    width: var(--loading-spinner-size);
-    height: var(--loading-spinner-size);
-  }
+  display: flex;
+  width: var(--loading-spinner-size);
+  height: var(--loading-spinner-size);
+}
 
-  .xs {
-    --loading-spinner-size: 16px;
-  }
+.xs {
+  --loading-spinner-size: 16px;
+}
 
-  .sm {
-    --loading-spinner-size: 24px;
-  }
+.sm {
+  --loading-spinner-size: 24px;
+}
 
-  .md {
-    --loading-spinner-size: 48px;
-  }
+.md {
+  --loading-spinner-size: 48px;
+}
 
-  .spinner {
-    animation: spinner var(--animation-duration-deliberate)
-      var(--animation-easing-function-ease-in-out) infinite;
-    width: 100%;
-    height: 100%;
-  }
+.spinner {
+  animation: spinner var(--animation-duration-deliberate)
+    var(--animation-easing-function-ease-in-out) infinite;
+  width: 100%;
+  height: 100%;
 }
 
 @keyframes spinner {

package/src/Loading/_mixins.scss

@@ -2,17 +2,9 @@
 @import '~@kaizen/design-tokens/sass/spacing';
 @import '~@kaizen/design-tokens/sass/border';
 
-@layer kz-components {
-  %loadingBase {
-    border-radius: $border-solid-border-radius;
-    top: calc(#{$spacing-md} * 0.175);
-  }
-
-  %loadingAnimated {
-    animation-name: fade-in-out;
-    animation-duration: calc(#{$animation-duration-deliberate} * 2);
-    animation-iteration-count: infinite;
-  }
+%loadingBase {
+  border-radius: $border-solid-border-radius;
+  top: calc(#{$spacing-md} * 0.175);
 }
 
 @keyframes fade-in-out {
@@ -28,3 +20,9 @@
     opacity: 60%;
   }
 }
+
+%loadingAnimated {
+  animation-name: fade-in-out;
+  animation-duration: calc(#{$animation-duration-deliberate} * 2);
+  animation-iteration-count: infinite;
+}

package/src/Menu/subcomponents/MenuDropdown/MenuDropdown.module.scss

@@ -3,24 +3,22 @@
 @import '~@kaizen/design-tokens/sass/shadow';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  $menu-container-width: 248px;
-  $dropdown-index: 1000;
+$menu-container-width: 248px;
+$dropdown-index: 1000;
 
-  .menuContainer {
-    z-index: $dropdown-index;
-    box-sizing: border-box;
-    background: $color-white;
-    color: $color-purple-800;
-    border-radius: $border-solid-border-radius;
-    box-shadow: $shadow-large-box-shadow;
-    max-height: 22rem;
-    overflow: auto;
-    padding: $spacing-xs 0;
-    text-align: start;
-  }
+.menuContainer {
+  z-index: $dropdown-index;
+  box-sizing: border-box;
+  background: $color-white;
+  color: $color-purple-800;
+  border-radius: $border-solid-border-radius;
+  box-shadow: $shadow-large-box-shadow;
+  max-height: 22rem;
+  overflow: auto;
+  padding: $spacing-xs 0;
+  text-align: start;
+}
 
-  .defaultWidth {
-    width: $menu-container-width;
-  }
+.defaultWidth {
+  width: $menu-container-width;
 }

package/src/Menu/subcomponents/MenuHeading/MenuHeading.module.scss

@@ -1,13 +1,11 @@
 @import '~@kaizen/design-tokens/sass/color';
 @import '~@kaizen/design-tokens/sass/spacing';
 
-@layer kz-components {
-  $gutter: calc(#{$spacing-md} * 1 / 6);
+$gutter: calc(#{$spacing-md} * 1 / 6);
 
-  .heading {
-    padding: 10px $spacing-sm 5px;
-    color: $color-purple-800;
-    margin: 0 $gutter;
-    display: block;
-  }
+.heading {
+  padding: 10px $spacing-sm 5px;
+  color: $color-purple-800;
+  margin: 0 $gutter;
+  display: block;
 }