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

package/src/Badge/Badge.module.css

@@ -1,99 +1,97 @@
-@layer kz-components {
-  .badge {
-    border-radius: var(--spacing-12);
-    color: var(--color-purple-800);
-    display: inline-block;
-    position: relative;
-    font-family: var(--typography-paragraph-extra-small-font-family);
-    font-size: var(--typography-paragraph-extra-small-font-size);
-    font-weight: var(--typography-paragraph-bold-font-weight);
-    letter-spacing: var(--typography-paragraph-extra-small-letter-spacing);
-    line-height: var(--typography-paragraph-extra-small-line-height);
-    padding: 1px var(--spacing-6);
-    min-width: 8px;
-    text-align: center;
-    background-color: var(--badge-background-color, var(--color-gray-300));
-  }
-
-  .reversed {
-    --badge-background-color: rgb(var(--color-white-rgb), 0.1);
-
-    color: var(--color-white);
-  }
-
-  .reversed.active {
-    --badge-background-color: var(--color-green-300);
-
-    color: var(--color-purple-800);
-  }
-
-  .reversed.dark {
-    --badge-background-color: var(--color-purple-700);
-
-    color: var(--color-white);
-  }
-
-  .large {
-    display: inline-flex;
-    justify-content: center;
-    border-radius: var(--spacing-48);
-    font-size: var(--typography-data-medium-font-size);
-    line-height: var(--typography-data-medium-line-height);
-    letter-spacing: var(--typography-data-medium-letter-spacing);
-    padding: 2px 1.875rem;
-    width: 24px;
-  }
-
-  .active {
-    --badge-background-color: var(--color-blue-500);
-
-    color: var(--color-white);
-  }
-
-  .dark {
-    --badge-background-color: rgb(var(--color-purple-700-rgb), 0.1);
-
-    color: var(--color-purple-800);
-  }
-
-  .dot {
-    --badge-background-color: var(--color-green-300);
-
-    padding: var(--spacing-6);
-    min-width: unset;
-  }
-
-  .dot.large {
-    padding: 1.875rem;
-    width: unset;
-  }
-
-  .animation {
-    display: inherit;
-  }
-
-  .animation .badge {
-    --badge-duration-timing: (var(--animation-duration-slow) / 2)
-      var(--animation-easing-function-ease-in);
-
-    transition:
-      transform var(--badge-duration-timing),
-      background-color var(--badge-duration-timing);
-    transform-origin: center;
-    transform: scale3d(1, 1, 1);
-  }
-
-  .animationOn .badge {
-    transform: scale3d(1.35, 1.35, 1.35);
-  }
-
-  .animationOn .badge.dark {
-    --badge-background-color: rgb(var(--color-purple-700-rgb), 0.2);
-  }
-
-  .animationOn .badge.active {
-    --badge-background-color: var(--color-blue-500);
-
-    color: var(--color-white);
-  }
+.badge {
+  border-radius: var(--spacing-12);
+  color: var(--color-purple-800);
+  display: inline-block;
+  position: relative;
+  font-family: var(--typography-paragraph-extra-small-font-family);
+  font-size: var(--typography-paragraph-extra-small-font-size);
+  font-weight: var(--typography-paragraph-bold-font-weight);
+  letter-spacing: var(--typography-paragraph-extra-small-letter-spacing);
+  line-height: var(--typography-paragraph-extra-small-line-height);
+  padding: 1px var(--spacing-6);
+  min-width: 8px;
+  text-align: center;
+  background-color: var(--badge-background-color, var(--color-gray-300));
+}
+
+.reversed {
+  --badge-background-color: rgba(var(--color-white-rgb), 0.1);
+
+  color: var(--color-white);
+}
+
+.reversed.active {
+  --badge-background-color: var(--color-green-300);
+
+  color: var(--color-purple-800);
+}
+
+.reversed.dark {
+  --badge-background-color: var(--color-purple-700);
+
+  color: var(--color-white);
+}
+
+.large {
+  display: inline-flex;
+  justify-content: center;
+  border-radius: var(--spacing-48);
+  font-size: var(--typography-data-medium-font-size);
+  line-height: var(--typography-data-medium-line-height);
+  letter-spacing: var(--typography-data-medium-letter-spacing);
+  padding: 2px 1.875rem;
+  width: 24px;
+}
+
+.active {
+  --badge-background-color: var(--color-blue-500);
+
+  color: var(--color-white);
+}
+
+.dark {
+  --badge-background-color: rgba(var(--color-purple-700-rgb), 0.1);
+
+  color: var(--color-purple-800);
+}
+
+.dot {
+  --badge-background-color: var(--color-green-300);
+
+  padding: var(--spacing-6);
+  min-width: unset;
+}
+
+.dot.large {
+  padding: 1.875rem;
+  width: unset;
+}
+
+.animation {
+  display: inherit;
+}
+
+.animation .badge {
+  --badge-duration-timing: (var(--animation-duration-slow) / 2)
+    var(--animation-easing-function-ease-in);
+
+  transition:
+    transform var(--badge-duration-timing),
+    background-color var(--badge-duration-timing);
+  transform-origin: center;
+  transform: scale3d(1, 1, 1);
+}
+
+.animationOn .badge {
+  transform: scale3d(1.35, 1.35, 1.35);
+}
+
+.animationOn .badge.dark {
+  --badge-background-color: rgba(var(--color-purple-700-rgb), 0.2);
+}
+
+.animationOn .badge.active {
+  --badge-background-color: var(--color-blue-500);
+
+  color: var(--color-white);
 }

package/src/Brand/Brand.module.css

@@ -1,6 +1,4 @@
-@layer kz-components {
-  .img {
-    max-inline-size: 100%;
-    display: flex;
-  }
+.img {
+  max-inline-size: 100%;
+  display: flex;
 }

package/src/BrandMoment/BrandMoment.module.css

@@ -1,195 +1,193 @@
-@layer kz-components {
-  .body {
-    width: 100%;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    background-color: var(--brand-moment-background-color);
-  }
+.body {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--brand-moment-background-color);
+}
 
-  /** @deprecated */
-  .positive {
-    --brand-moment-background-color: var(--color-green-100);
-  }
+/** @deprecated */
+.positive {
+  --brand-moment-background-color: var(--color-green-100);
+}
 
-  .negative {
-    --brand-moment-background-color: var(--color-red-100);
-  }
+.negative {
+  --brand-moment-background-color: var(--color-red-100);
+}
 
-  /** end @deprecated */
-  .informative {
-    --brand-moment-background-color: var(--color-blue-100);
-  }
+/** end @deprecated */
+.informative {
+  --brand-moment-background-color: var(--color-blue-100);
+}
 
-  .success {
-    --brand-moment-background-color: var(--color-green-100);
-  }
+.success {
+  --brand-moment-background-color: var(--color-green-100);
+}
 
-  .warning {
-    --brand-moment-background-color: var(--color-red-100);
-  }
+.warning {
+  --brand-moment-background-color: var(--color-red-100);
+}
+
+.container {
+  max-width: var(--layout-content-max-width);
+  margin: 0 auto;
+  padding: 0 var(--spacing-24);
+}
 
+@media (width >= 1080px) {
   .container {
-    max-width: var(--layout-content-max-width);
-    margin: 0 auto;
-    padding: 0 var(--spacing-24);
+    padding: 0 var(--spacing-64);
   }
+}
 
-  @media (width >= 1080px) {
-    .container {
-      padding: 0 var(--spacing-64);
-    }
+@media (width >= 1366px) {
+  .container {
+    padding: 0 var(--spacing-80);
   }
+}
 
-  @media (width >= 1366px) {
-    .container {
-      padding: 0 var(--spacing-80);
-    }
-  }
+.header {
+  inline-size: 100%;
+  margin-block-end: var(--spacing-24);
+}
 
-  .header {
-    inline-size: 100%;
-    margin-block-end: var(--spacing-24);
-  }
+.main {
+  flex: 1 0 auto;
+  display: flex;
+  align-items: center;
+  margin-block-end: var(--spacing-64);
+}
 
-  .main {
-    flex: 1 0 auto;
-    display: flex;
-    align-items: center;
-    margin-block-end: var(--spacing-64);
-  }
+.mainInner {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--spacing-48) var(--spacing-32);
+  align-items: center;
+}
 
+@media (width >= 768px) {
   .mainInner {
-    display: grid;
-    grid-template-columns: 1fr;
-    gap: var(--spacing-48) var(--spacing-32);
-    align-items: center;
+    row-gap: var(--spacing-64);
   }
+}
 
-  @media (width >= 768px) {
-    .mainInner {
-      row-gap: var(--spacing-64);
-    }
+@media (width >= 1080px) {
+  .mainInner {
+    grid-template-columns: 1fr 1fr;
   }
+}
 
-  @media (width >= 1080px) {
-    .mainInner {
-      grid-template-columns: 1fr 1fr;
-    }
+@media (width >= 1366px) {
+  .mainInner {
+    column-gap: var(--spacing-80);
   }
+}
 
-  @media (width >= 1366px) {
-    .mainInner {
-      column-gap: var(--spacing-80);
-    }
-  }
+.left {
+  display: flex;
+  justify-content: center;
+}
 
-  .left {
-    display: flex;
-    justify-content: center;
-  }
+.leftInner {
+  width: 100%;
+  max-width: 525px;
+}
 
-  .leftInner {
-    width: 100%;
-    max-width: 525px;
-  }
+.right {
+  flex-direction: column;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
-  .right {
-    flex-direction: column;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
+.rightInner {
+  max-width: 543px;
+}
 
-  .rightInner {
-    max-width: 543px;
-  }
+.subtitle {
+  margin-bottom: var(--spacing-12);
+}
 
-  .subtitle {
-    margin-bottom: var(--spacing-12);
-  }
+.title {
+  margin-bottom: var(--spacing-32);
+}
 
-  .title {
-    margin-bottom: var(--spacing-32);
-  }
+.textBody {
+  margin-bottom: var(--spacing-32);
+}
 
-  .textBody {
-    margin-bottom: var(--spacing-32);
+.secondaryAction {
+  margin-block-start: var(--spacing-12);
+}
+
+@media (width >= 768px) {
+  .actions {
+    display: flex;
   }
 
   .secondaryAction {
-    margin-block-start: var(--spacing-12);
+    margin-block-start: 0;
+    margin-inline-start: var(--spacing-12);
   }
+}
 
-  @media (width >= 768px) {
-    .actions {
-      display: flex;
-    }
+@media (width >= 1080px) {
+  .left {
+    justify-content: flex-end;
+  }
 
-    .secondaryAction {
-      margin-block-start: 0;
-      margin-inline-start: var(--spacing-12);
-    }
+  .right {
+    align-items: flex-start;
   }
+}
 
-  @media (width >= 1080px) {
-    .left {
-      justify-content: flex-end;
-    }
+.footer {
+  flex: 0 0 auto;
+}
 
-    .right {
-      align-items: flex-start;
-    }
-  }
+.footerInner {
+  display: flex;
+  flex-direction: column;
+  border-block-start: 1px solid var(--color-purple-800);
+  border-inline-start: 1px solid var(--color-purple-800);
+  padding: var(--spacing-12) var(--spacing-24);
+  margin-block-end: var(--spacing-32);
+}
 
-  .footer {
-    flex: 0 0 auto;
-  }
+.poweredByContainer {
+  flex: 0 0 auto;
+  order: 2;
+  display: flex;
+}
 
-  .footerInner {
-    display: flex;
-    flex-direction: column;
-    border-block-start: 1px solid var(--color-purple-800);
-    border-inline-start: 1px solid var(--color-purple-800);
-    padding: var(--spacing-12) var(--spacing-24);
-    margin-block-end: var(--spacing-32);
-  }
+.footerTextContainer {
+  flex: 1 1 auto;
+  order: 1;
+  margin-block-end: var(--spacing-24);
+}
 
-  .poweredByContainer {
-    flex: 0 0 auto;
-    order: 2;
-    display: flex;
-  }
+.poweredByLogo {
+  margin-inline-start: var(--spacing-6);
 
-  .footerTextContainer {
-    flex: 1 1 auto;
-    order: 1;
-    margin-block-end: var(--spacing-24);
+  > img {
+    max-width: 133px;
   }
+}
 
-  .poweredByLogo {
-    margin-inline-start: var(--spacing-6);
+@media (width >= 1080px) {
+  .footerInner {
+    flex-direction: row;
+    align-items: center;
+  }
 
-    > img {
-      max-width: 133px;
-    }
+  .footerTextContainer {
+    order: initial;
+    margin-block-end: 0;
+    margin-inline-start: var(--spacing-24);
   }
 
-  @media (width >= 1080px) {
-    .footerInner {
-      flex-direction: row;
-      align-items: center;
-    }
-
-    .footerTextContainer {
-      order: initial;
-      margin-block-end: 0;
-      margin-inline-start: var(--spacing-24);
-    }
-
-    .poweredByContainer {
-      order: initial;
-    }
+  .poweredByContainer {
+    order: initial;
   }
 }