@kaizen/components 1.78.0 → 1.79.0

package/src/Badge/Badge.module.css

@@ -1,97 +1,99 @@
-.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);
+@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);
+  }
 }

package/src/Brand/Brand.module.css

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

package/src/BrandMoment/BrandMoment.module.css

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