@kaizen/components 1.78.1 → 1.79.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.78.1",
+  "version": "1.79.0",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/src/Avatar/Avatar.module.css

@@ -1,138 +1,140 @@
-.wrapper {
-  --avatar-x-y: 1.5rem;
-
-  background: var(--color-gray-300);
-  border-radius: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  width: var(--avatar-x-y);
-  height: var(--avatar-x-y);
-  box-shadow: var(--shadow-small-box-shadow);
-  border: 3px solid var(--color-white);
-}
-
-.small {
-  box-shadow: none;
-  border: none;
-
-  --avatar-x-y: 1.25rem;
-}
-
-.medium {
-  --avatar-x-y: 3rem;
-}
-
-.large {
-  --avatar-x-y: 4.5rem;
-}
-
-.xlarge {
-  --avatar-x-y: 6rem;
-}
-
-.xxlarge {
-  --avatar-x-y: 7.75rem;
-}
-
-/* Themes */
-.personal {
-  background: var(--color-orange-100);
-}
-
-.otherUser {
-  background: var(--color-gray-300);
-}
-
-.company {
-  border: 0;
-  background: var(--color-white);
-  padding: var(--spacing-6);
-  border-radius: var(--border-solid-border-radius);
-}
-
-.small.company {
-  padding: 0;
-}
-
-.avatarImage {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.avatarImage.loading {
-  display: none;
-}
-
-.companyAvatarImage {
-  object-fit: contain;
-  box-sizing: border-box;
-  border-radius: var(--spacing-4);
-}
-
-.fallbackIcon {
-  color: rgb(var(--color-purple-800-rgb), 0.7);
-  font-size: calc(var(--avatar-x-y) * 0.7);
-}
-
-.xlarge .fallbackIcon,
-.xxlarge .fallbackIcon {
-  font-size: calc(var(--avatar-x-y) * 0.8);
-}
-
-.initials {
-  box-sizing: border-box;
-  color: var(--color-purple-800);
-  padding-left: 5px;
-  padding-right: 5px;
-  text-align: center;
-  width: 100%;
-  font-size: var(--typography-heading-3-font-size);
-  font-family: var(--typography-heading-1-font-family);
-  font-weight: var(--typography-heading-1-font-weight);
-  letter-spacing: var(--typography-heading-3-letter-spacing);
-}
-
-.initials.longName::before {
-  content: none;
-}
-
-.initials::before {
-  content: '';
-  display: block;
-  margin-top: -0.001em;
-}
-
-.wrapper .initials {
-  text-decoration: none;
-  speak-as: spell-out;
-
-  /* to override materialize.css global styling in performance-ui,
+@layer kz-components {
+  .wrapper {
+    --avatar-x-y: 1.5rem;
+
+    background: var(--color-gray-300);
+    border-radius: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    width: var(--avatar-x-y);
+    height: var(--avatar-x-y);
+    box-shadow: var(--shadow-small-box-shadow);
+    border: 3px solid var(--color-white);
+  }
+
+  .small {
+    box-shadow: none;
+    border: none;
+
+    --avatar-x-y: 1.25rem;
+  }
+
+  .medium {
+    --avatar-x-y: 3rem;
+  }
+
+  .large {
+    --avatar-x-y: 4.5rem;
+  }
+
+  .xlarge {
+    --avatar-x-y: 6rem;
+  }
+
+  .xxlarge {
+    --avatar-x-y: 7.75rem;
+  }
+
+  /* Themes */
+  .personal {
+    background: var(--color-orange-100);
+  }
+
+  .otherUser {
+    background: var(--color-gray-300);
+  }
+
+  .company {
+    border: 0;
+    background: var(--color-white);
+    padding: var(--spacing-6);
+    border-radius: var(--border-solid-border-radius);
+  }
+
+  .small.company {
+    padding: 0;
+  }
+
+  .avatarImage {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .avatarImage.loading {
+    display: none;
+  }
+
+  .companyAvatarImage {
+    object-fit: contain;
+    box-sizing: border-box;
+    border-radius: var(--spacing-4);
+  }
+
+  .fallbackIcon {
+    color: rgb(var(--color-purple-800-rgb), 0.7);
+    font-size: calc(var(--avatar-x-y) * 0.7);
+  }
+
+  .xlarge .fallbackIcon,
+  .xxlarge .fallbackIcon {
+    font-size: calc(var(--avatar-x-y) * 0.8);
+  }
+
+  .initials {
+    box-sizing: border-box;
+    color: var(--color-purple-800);
+    padding-left: 5px;
+    padding-right: 5px;
+    text-align: center;
+    width: 100%;
+    font-size: var(--typography-heading-3-font-size);
+    font-family: var(--typography-heading-1-font-family);
+    font-weight: var(--typography-heading-1-font-weight);
+    letter-spacing: var(--typography-heading-3-letter-spacing);
+  }
+
+  .initials.longName::before {
+    content: none;
+  }
+
+  .initials::before {
+    content: '';
+    display: block;
+    margin-top: -0.001em;
+  }
+
+  .wrapper .initials {
+    text-decoration: none;
+    speak-as: spell-out;
+
+    /* to override materialize.css global styling in performance-ui,
   * which sets a border-bottom on abbr tags
   */
-  border-bottom: none;
-}
-
-.xlarge .initials,
-.xxlarge .initials {
-  font-size: var(--typography-heading-1-font-size);
-  letter-spacing: var(--typography-heading-1-letter-spacing);
-}
-
-.medium .initials {
-  font-size: var(--typography-heading-5-font-size);
-}
-
-.small .initials {
-  font-size: 0.5rem;
-}
-
-.small .initials,
-.medium .initials {
-  margin-bottom: -1px;
-  font-weight: var(--typography-heading-5-font-weight);
-  letter-spacing: var(--typography-heading-5-letter-spacing);
+    border-bottom: none;
+  }
+
+  .xlarge .initials,
+  .xxlarge .initials {
+    font-size: var(--typography-heading-1-font-size);
+    letter-spacing: var(--typography-heading-1-letter-spacing);
+  }
+
+  .medium .initials {
+    font-size: var(--typography-heading-5-font-size);
+  }
+
+  .small .initials {
+    font-size: 0.5rem;
+  }
+
+  .small .initials,
+  .medium .initials {
+    margin-bottom: -1px;
+    font-weight: var(--typography-heading-5-font-weight);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
 }

package/src/AvatarGroup/AvatarGroup.module.css

@@ -1,57 +1,59 @@
-.AvatarGroup {
-  display: inline-flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.AvatarCounter {
-  direction: ltr;
-  align-items: center;
-  background: var(--color-gray-300);
-  border: 3px solid var(--color-white);
-  border-radius: 100%;
-  box-sizing: border-box;
-  box-shadow: var(--shadow-small-box-shadow);
-  display: flex;
-  justify-content: center;
-  overflow: hidden;
-  width: var(--avatar-x-y, 1.25rem);
-  height: var(--avatar-x-y, 1.25rem);
-  font-family: var(--typography-heading-5-font-family);
-  font-weight: var(--typography-heading-5-font-weight);
-  letter-spacing: var(--typography-heading-5-letter-spacing);
-}
-
-.AvatarGroupItem + .AvatarGroupItem {
-  margin-inline-start: calc((var(--avatar-x-y)) / -2);
-}
-
-.small {
-  --avatar-x-y: 1.25rem;
-}
-
-.small .AvatarCounter {
-  box-shadow: none;
-  border: none;
-  font-size: 0.5rem;
-}
-
-.medium {
-  --avatar-x-y: 3rem;
-}
-
-.medium .AvatarCounter {
-  font-size: var(--typography-heading-5-font-size);
-}
-
-.large {
-  --avatar-x-y: 4.5rem;
-}
-
-.large .AvatarCounter {
-  font-family: var(--typography-heading-3-font-family);
-  font-size: var(--typography-heading-3-font-size);
-  font-weight: var(--typography-heading-3-font-weight);
-  letter-spacing: var(--typography-heading-3-letter-spacing);
+@layer kz-components {
+  .AvatarGroup {
+    display: inline-flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .AvatarCounter {
+    direction: ltr;
+    align-items: center;
+    background: var(--color-gray-300);
+    border: 3px solid var(--color-white);
+    border-radius: 100%;
+    box-sizing: border-box;
+    box-shadow: var(--shadow-small-box-shadow);
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    width: var(--avatar-x-y, 1.25rem);
+    height: var(--avatar-x-y, 1.25rem);
+    font-family: var(--typography-heading-5-font-family);
+    font-weight: var(--typography-heading-5-font-weight);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
+
+  .AvatarGroupItem + .AvatarGroupItem {
+    margin-inline-start: calc((var(--avatar-x-y)) / -2);
+  }
+
+  .small {
+    --avatar-x-y: 1.25rem;
+  }
+
+  .small .AvatarCounter {
+    box-shadow: none;
+    border: none;
+    font-size: 0.5rem;
+  }
+
+  .medium {
+    --avatar-x-y: 3rem;
+  }
+
+  .medium .AvatarCounter {
+    font-size: var(--typography-heading-5-font-size);
+  }
+
+  .large {
+    --avatar-x-y: 4.5rem;
+  }
+
+  .large .AvatarCounter {
+    font-family: var(--typography-heading-3-font-family);
+    font-size: var(--typography-heading-3-font-size);
+    font-weight: var(--typography-heading-3-font-weight);
+    letter-spacing: var(--typography-heading-3-letter-spacing);
+  }
 }

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: 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);
+@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;
+  }
 }