@kaizen/components 1.70.8 → 1.70.10

package/package.json

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

package/src/Avatar/Avatar.module.css

@@ -0,0 +1,138 @@
+.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: rgba(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);
+}

package/src/Avatar/Avatar.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { Textfit } from 'react-textfit'
 import { Icon } from '~components/__rc__/Icon'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './Avatar.module.scss'
+import styles from './Avatar.module.css'
 
 export type AvatarSizes = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'
 
@@ -153,14 +153,17 @@ export const Avatar = ({
         isCompany && styles.company,
         isPersonal && styles.personal,
         isOtherUser && styles.otherUser,
-        (avatarState === 'loading' || avatarState === 'error') && styles.loading,
       )}
       {...restProps}
     >
       {avatarState !== 'none' && (
         <img
           ref={image}
-          className={classnames(styles.avatarImage, isCompany && styles.companyAvatarImage)}
+          className={classnames(
+            styles.avatarImage,
+            isCompany && styles.companyAvatarImage,
+            (avatarState === 'loading' || avatarState === 'error') && styles.loading,
+          )}
           src={avatarSrc}
           onError={onImageFailure}
           onLoad={onImageSuccess}

package/src/AvatarGroup/AvatarGroup.module.css

@@ -0,0 +1,57 @@
+.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/AvatarGroup/AvatarGroup.tsx

@@ -2,7 +2,7 @@ import React, { type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { Avatar, type CompanyAvatarProps, type GenericAvatarProps } from '~components/Avatar'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './AvatarGroup.module.scss'
+import styles from './AvatarGroup.module.css'
 
 export type AvatarGroupAvatarProps =
   | Omit<GenericAvatarProps, 'size'>

package/src/Badge/Badge.module.css

@@ -0,0 +1,101 @@
+.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;
+}
+
+.default {
+  color: var(--color-purple-800);
+}
+
+.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/Badge/Badge.tsx

@@ -1,7 +1,7 @@
 import React, { useLayoutEffect, useState, type HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './Badge.module.scss'
+import styles from './Badge.module.css'
 
 type BadgeCommonProps = {
   children?: string

package/src/Brand/Brand.tsx

@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { BrandCollectiveIntelligence } from './BrandCollectiveIntelligence'
-import styles from './Brand.module.scss'
+import styles from './Brand.module.css'
 
 type MeaningfulSVG = { 'role': 'img'; 'aria-label': string; 'alt'?: never }
 type DecorativeSVG = { 'role': 'presentation'; 'aria-label'?: never; 'alt'?: never }

package/src/BrandMoment/{BrandMoment.module.scss → BrandMoment.module.css}

@@ -1,12 +1,3 @@
-@import '~@kaizen/design-tokens/sass/spacing';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/layout';
-
-$breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and replace this out
-
-// --------------------------------
-// Body
-// --------------------------------
 .body {
   width: 100%;
   min-height: 100vh;
@@ -38,67 +29,58 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
   --brand-moment-background-color: var(--color-red-100);
 }
 
-// --------------------------------
-// Reusable container
-// --------------------------------
 .container {
-  max-width: $layout-content-max-width;
+  max-width: var(--layout-content-max-width);
   margin: 0 auto;
-  padding: 0 $spacing-md;
+  padding: 0 var(--spacing-24);
 }
 
-@media (min-width: $layout-breakpoints-large) {
+@media (width >= 1080px) {
   .container {
-    padding: 0 $spacing-xxl;
+    padding: 0 var(--spacing-64);
   }
 }
 
-@media (min-width: $breakpoint-xl) {
+@media (width >= 1366px) {
   .container {
-    padding: 0 $spacing-xxxxl;
+    padding: 0 var(--spacing-80);
   }
 }
 
-// --------------------------------
-// Header
-// --------------------------------
 .header {
   inline-size: 100%;
-  margin-block-end: $spacing-md;
+  margin-block-end: var(--spacing-24);
 }
 
-// --------------------------------
-// Main
-// --------------------------------
 .main {
   flex: 1 0 auto;
   display: flex;
   align-items: center;
-  margin-block-end: $spacing-xxl;
+  margin-block-end: var(--spacing-64);
 }
 
 .mainInner {
   display: grid;
   grid-template-columns: 1fr;
-  gap: $spacing-xl $spacing-lg;
+  gap: var(--spacing-48) var(--spacing-32);
   align-items: center;
 }
 
-@media (min-width: $layout-breakpoints-medium) {
+@media (width >= 768px) {
   .mainInner {
-    row-gap: $spacing-xxl;
+    row-gap: var(--spacing-64);
   }
 }
 
-@media (min-width: $layout-breakpoints-large) {
+@media (width >= 1080px) {
   .mainInner {
     grid-template-columns: 1fr 1fr;
   }
 }
 
-@media (min-width: $breakpoint-xl) {
+@media (width >= 1366px) {
   .mainInner {
-    column-gap: $spacing-xxxxl;
+    column-gap: var(--spacing-80);
   }
 }
 
@@ -124,33 +106,33 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
 }
 
 .subtitle {
-  margin-bottom: $spacing-12;
+  margin-bottom: var(--spacing-12);
 }
 
 .title {
-  margin-bottom: $spacing-lg;
+  margin-bottom: var(--spacing-32);
 }
 
 .textBody {
-  margin-bottom: $spacing-lg;
+  margin-bottom: var(--spacing-32);
 }
 
 .secondaryAction {
-  margin-block-start: $spacing-sm;
+  margin-block-start: var(--spacing-12);
 }
 
-@media (min-width: $layout-breakpoints-medium) {
+@media (width >= 768px) {
   .actions {
     display: flex;
   }
 
   .secondaryAction {
     margin-block-start: 0;
-    margin-inline-start: $spacing-sm;
+    margin-inline-start: var(--spacing-12);
   }
 }
 
-@media (min-width: $layout-breakpoints-large) {
+@media (width >= 1080px) {
   .left {
     justify-content: flex-end;
   }
@@ -160,9 +142,6 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
   }
 }
 
-// --------------------------------
-// Footer
-// --------------------------------
 .footer {
   flex: 0 0 auto;
 }
@@ -170,10 +149,10 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
 .footerInner {
   display: flex;
   flex-direction: column;
-  border-block-start: 1px solid $color-purple-800;
-  border-inline-start: 1px solid $color-purple-800;
-  padding: $spacing-sm $spacing-md;
-  margin-block-end: $spacing-lg;
+  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 {
@@ -185,18 +164,18 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
 .footerTextContainer {
   flex: 1 1 auto;
   order: 1;
-  margin-block-end: $spacing-md;
+  margin-block-end: var(--spacing-24);
 }
 
 .poweredByLogo {
-  margin-inline-start: $spacing-xs;
+  margin-inline-start: var(--spacing-6);
 
   > img {
     max-width: 133px;
   }
 }
 
-@media (min-width: $layout-breakpoints-large) {
+@media (width >= 1080px) {
   .footerInner {
     flex-direction: row;
     align-items: center;
@@ -205,7 +184,7 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
   .footerTextContainer {
     order: initial;
     margin-block-end: 0;
-    margin-inline-start: $spacing-md;
+    margin-inline-start: var(--spacing-24);
   }
 
   .poweredByContainer {

package/src/BrandMoment/BrandMoment.tsx

@@ -7,7 +7,7 @@ import { Text } from '~components/Text'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
 import { assetUrl } from '~components/utils/hostedAssets'
 import { useMediaQueries } from '~components/utils/useMediaQueries'
-import styles from './BrandMoment.module.scss'
+import styles from './BrandMoment.module.css'
 
 type DeprecatedMoodProps = {
   /** @deprecated Use `variant` instead */

package/src/ButtonGroup/ButtonGroup.module.css

@@ -0,0 +1,48 @@
+.buttonGroup {
+  --focus-ring-offset: 1px;
+  --focus-ring-offset-inner: calc(-1 * var(--focus-ring-offset));
+
+  display: inline-flex;
+}
+
+.child {
+  border-radius: 0;
+}
+
+.child:focus-visible::after {
+  border-radius: 0;
+}
+
+.child:not(.firstChild) {
+  border-inline-start: 1px solid var(--color-blue-300);
+}
+
+.child:not(.firstChild, .lastChild) {
+  &:focus-visible {
+    &::after {
+      inset-inline: var(--focus-ring-offset-inner);
+    }
+  }
+}
+
+.child.firstChild {
+  border-start-start-radius: var(--border-focus-ring-border-radius);
+  border-end-start-radius: var(--border-focus-ring-border-radius);
+}
+
+.child.firstChild:focus-visible::after {
+  border-start-start-radius: var(--border-focus-ring-border-radius);
+  border-end-start-radius: var(--border-focus-ring-border-radius);
+  inset-inline-end: var(--focus-ring-offset-inner);
+}
+
+.child.lastChild {
+  border-start-end-radius: var(--border-focus-ring-border-radius);
+  border-end-end-radius: var(--border-focus-ring-border-radius);
+}
+
+.child.lastChild:focus-visible::after {
+  border-start-end-radius: var(--border-focus-ring-border-radius);
+  border-end-end-radius: var(--border-focus-ring-border-radius);
+  inset-inline-start: var(--focus-ring-offset-inner);
+}

package/src/ButtonGroup/ButtonGroup.tsx

@@ -6,7 +6,7 @@ import {
 } from '~components/Filter/FilterButton/subcomponents/FilterButtonBase'
 import { Tooltip, type TooltipProps } from '~components/Tooltip'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './ButtonGroup.module.scss'
+import styles from './ButtonGroup.module.css'
 
 const isFilterButton = (node: React.ReactNode): node is React.ReactElement<FilterButtonBaseProps> =>
   React.isValidElement(node) && node.type === FilterButtonBase

package/src/Tile/TileGrid/TileGrid.module.scss

@@ -4,6 +4,8 @@
 
 .grid {
   list-style-type: none;
+  padding-inline-start: 0;
+  margin-block: 0;
   display: grid;
   // the more we shave off the width here,
   // the less the tiles will grow when they lose one from the row

package/dist/cjs/Avatar/Avatar.module.scss.cjs

@@ -1,20 +0,0 @@
-'use strict';
-
-var styles = {
-  "wrapper": "Avatar-module_wrapper__LY2q2",
-  "small": "Avatar-module_small__PeksS",
-  "personal": "Avatar-module_personal__2U7--",
-  "otherUser": "Avatar-module_otherUser__b-drl",
-  "company": "Avatar-module_company__2qtJE",
-  "initials": "Avatar-module_initials__VDY2Q",
-  "medium": "Avatar-module_medium__Vy3V8",
-  "large": "Avatar-module_large__qiNWs",
-  "xlarge": "Avatar-module_xlarge__Vx4IG",
-  "xxlarge": "Avatar-module_xxlarge__oOoGq",
-  "avatarImage": "Avatar-module_avatarImage__FuULy",
-  "loading": "Avatar-module_loading__i9V-D",
-  "companyAvatarImage": "Avatar-module_companyAvatarImage__7rlfG",
-  "fallbackIcon": "Avatar-module_fallbackIcon__MPWxq",
-  "longName": "Avatar-module_longName__31Yuf"
-};
-module.exports = styles;

package/dist/cjs/AvatarGroup/AvatarGroup.module.scss.cjs

@@ -1,11 +0,0 @@
-'use strict';
-
-var styles = {
-  "AvatarGroup": "AvatarGroup-module_AvatarGroup__bdL0o",
-  "AvatarCounter": "AvatarGroup-module_AvatarCounter__PKFzl",
-  "small": "AvatarGroup-module_small__7uv8k",
-  "AvatarGroupItem": "AvatarGroup-module_AvatarGroupItem__xQol-",
-  "medium": "AvatarGroup-module_medium__af52y",
-  "large": "AvatarGroup-module_large__HN9Yy"
-};
-module.exports = styles;

package/dist/cjs/Badge/Badge.module.scss.cjs

@@ -1,14 +0,0 @@
-'use strict';
-
-var styles = {
-  "badge": "Badge-module_badge__CRtsW",
-  "large": "Badge-module_large__0QOpY",
-  "default": "Badge-module_default__k4Kcf",
-  "active": "Badge-module_active__-e-i2",
-  "reversed": "Badge-module_reversed__OgQLB",
-  "dark": "Badge-module_dark__RH34a",
-  "dot": "Badge-module_dot__BOKL1",
-  "animation": "Badge-module_animation__NTy6C",
-  "animationOn": "Badge-module_animationOn__nWK38"
-};
-module.exports = styles;