From b8ae09b9ae83e611b6dc362bb7bd4bffda0690c8 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Thu, 12 Dec 2024 08:19:42 +1100
Subject: [PATCH 01/29] Converted Avatar to css modules

---
 .../components/src/Avatar/Avatar.module.css   | 167 ++++++++++++++++++
 packages/components/src/Avatar/Avatar.tsx     |   2 +-
 2 files changed, 168 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/src/Avatar/Avatar.module.css

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
new file mode 100644
index 00000000000..634175a98af
--- /dev/null
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -0,0 +1,167 @@
+:root {
+  --avatar-sm: 1.25rem;
+  --avatar-md: 3rem;
+  --avatar-lg: 4.5rem;
+  --avatar-xl: 6rem;
+  --avatar-xxl: 7.75rem;
+}
+
+/* stylelint-disable no-descending-specificity */
+.wrapper {
+  background: var(--color-gray-300);
+  border-radius: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+
+  &:not(.small) {
+    box-shadow: var(--shadow-small-box-shadow);
+    border: 3px solid var(--color-white);
+  }
+
+  /*Themes*/
+  &.personal {
+    background: var(--color-orange-100);
+  }
+
+  &.otherUser {
+    background: var(--color-gray-300);
+  }
+
+  &.company {
+    border: 0;
+    background: var(--color-white);
+    padding: 6px;
+    border-radius: var(--border-solid-border-radius);
+  }
+
+  /* Sizes */
+  &.small {
+    width: var(--avatar-sm);
+    height: var(--avatar-sm);
+
+    .initials {
+      margin-bottom: -1px;
+    }
+
+    &.company {
+      padding: 0;
+    }
+  }
+
+  &.medium {
+    width: var(--avatar-md);
+    height: var(--avatar-md);
+
+    .initials {
+      margin-bottom: -1px;
+    }
+  }
+
+  &.large {
+    width: var(--avatar-lg);
+    height: var(--avatar-lg);
+  }
+
+  &.xlarge {
+    width: var(--avatar-xl);
+    height: var(--avatar-xl);
+  }
+
+  &.xxlarge {
+    width: var(--avatar-xxl);
+    height: var(--avatar-xxl);
+  }
+
+  & .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;
+  }
+}
+
+.avatarImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+
+  .loading & {
+    display: none;
+  }
+}
+
+.companyAvatarImage {
+  object-fit: contain;
+  box-sizing: border-box;
+  border-radius: 4px;
+}
+
+.fallbackIcon {
+  color: rgba(var(--color-purple-800-rgb), 0.7);
+  font-size: var(--avatar-fallback-icon-size);
+
+  .xxlarge & {
+    --avatar-fallback-icon-size: calc(#{var(--avatar-xxl)} * 0.8);
+  }
+
+  .xlarge & {
+    --avatar-fallback-icon-size: calc(#{var(--avatar-xl)} * 0.8);
+  }
+
+  .large & {
+    --avatar-fallback-icon-size: calc(#{var(--avatar-lg)} * 0.7);
+  }
+
+  .medium & {
+    --avatar-fallback-icon-size: calc(#{var(--avatar-md)} * 0.7);
+  }
+
+  .small & {
+    --avatar-fallback-icon-size: calc(#{var(--avatar-sm)} * 0.7);
+  }
+}
+
+.initials {
+  box-sizing: border-box;
+  color: var(--color-purple-800);
+  padding-left: 5px;
+  padding-right: 5px;
+  text-align: center;
+  width: 100%;
+  font-size: 22px;
+  font-family: var(--typography-heading-1-font-family);
+  font-weight: var(--typography-heading-1-font-weight);
+  letter-spacing: var(--typography-heading-3-letter-spacing);
+
+  /* Whitespace cropping */
+  &:not(.longName)::before {
+    content: '';
+    display: block;
+    margin-top: -0.001em;
+  }
+
+  .xlarge &,
+  .xxlarge & {
+    font-size: 34px;
+    letter-spacing: var(--typography-heading-1-letter-spacing);
+  }
+
+  .medium & {
+    font-size: 16px;
+    font-weight: var(--typography-heading-5-font-weight);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
+
+  .small & {
+    font-size: 8px;
+    font-weight: var(--typography-heading-5-font-weight);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
+}
+/* stylelint-enable no-descending-specificity */
diff --git a/packages/components/src/Avatar/Avatar.tsx b/packages/components/src/Avatar/Avatar.tsx
index 6ee24930e30..a4a5157608a 100644
--- a/packages/components/src/Avatar/Avatar.tsx
+++ b/packages/components/src/Avatar/Avatar.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { Textfit } from 'react-textfit'
 import { Icon } from '~components/__future__/Icon'
 import { 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'
 

From dc2e23369045ffa7dd6aa7130e1fc4c7c7610498 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Thu, 12 Dec 2024 11:56:38 +1100
Subject: [PATCH 02/29] Convert AvatarGroup

---
 .../components/src/Avatar/Avatar.module.css   |  6 +-
 .../src/AvatarGroup/AvatarGroup.module.css    | 69 +++++++++++++++++++
 .../src/AvatarGroup/AvatarGroup.tsx           |  2 +-
 3 files changed, 72 insertions(+), 5 deletions(-)
 create mode 100644 packages/components/src/AvatarGroup/AvatarGroup.module.css

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
index 634175a98af..4f1de8b802b 100644
--- a/packages/components/src/Avatar/Avatar.module.css
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -1,13 +1,11 @@
-:root {
+/* stylelint-disable no-descending-specificity */
+.wrapper {
   --avatar-sm: 1.25rem;
   --avatar-md: 3rem;
   --avatar-lg: 4.5rem;
   --avatar-xl: 6rem;
   --avatar-xxl: 7.75rem;
-}
 
-/* stylelint-disable no-descending-specificity */
-.wrapper {
   background: var(--color-gray-300);
   border-radius: 100%;
   box-sizing: border-box;
diff --git a/packages/components/src/AvatarGroup/AvatarGroup.module.css b/packages/components/src/AvatarGroup/AvatarGroup.module.css
new file mode 100644
index 00000000000..60a73d255ae
--- /dev/null
+++ b/packages/components/src/AvatarGroup/AvatarGroup.module.css
@@ -0,0 +1,69 @@
+.AvatarGroup {
+  --avatar-sm: 1.25rem;
+  --avatar-md: 3rem;
+  --avatar-lg: 4.5rem;
+  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;
+}
+
+.small {
+  .AvatarGroupItem + .AvatarGroupItem {
+    margin-inline-start: calc((var(--avatar-sm)) / -2);
+  }
+
+  .AvatarCounter {
+    box-shadow: none;
+    border: none;
+    width: var(--avatar-sm);
+    height: var(--avatar-sm);
+    font-family: var(--typography-heading-5-font-family);
+    font-size: 0.5rem;
+    font-weight: var(--typography-heading-5-font-weight);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
+}
+
+.medium {
+  .AvatarGroupItem + .AvatarGroupItem {
+    margin-inline-start: calc((var(--avatar-md)) / -2);
+  }
+
+  .AvatarCounter {
+    width: var(--avatar-md);
+    height: var(--avatar-md);
+    font-family: var(--typography-heading-5-font-family);
+    font-size: var(--typography-heading-5-font-size);
+    font-weight: var(--typography-heading-5-font-weight);
+    letter-spacing: var(--typography-heading-5-letter-spacing);
+  }
+}
+
+.large {
+  .AvatarGroupItem + .AvatarGroupItem {
+    margin-inline-start: calc((var(--avatar-lg)) / -2);
+  }
+
+  .AvatarCounter {
+    width: var(--avatar-lg);
+    height: var(--avatar-lg);
+    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);
+  }
+}
diff --git a/packages/components/src/AvatarGroup/AvatarGroup.tsx b/packages/components/src/AvatarGroup/AvatarGroup.tsx
index 125f32c0a9b..31b8d244f8a 100644
--- a/packages/components/src/AvatarGroup/AvatarGroup.tsx
+++ b/packages/components/src/AvatarGroup/AvatarGroup.tsx
@@ -2,7 +2,7 @@ import React, { HTMLAttributes } from 'react'
 import classnames from 'classnames'
 import { Avatar, CompanyAvatarProps, GenericAvatarProps } from '~components/Avatar'
 import { OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './AvatarGroup.module.scss'
+import styles from './AvatarGroup.module.css'
 
 export type AvatarGroupAvatarProps =
   | Omit<GenericAvatarProps, 'size'>

From 7c67045ac889d9d60e8c8ae00b95aa90236992ea Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Thu, 12 Dec 2024 15:21:15 +1100
Subject: [PATCH 03/29] Remove unused scss files

---
 .../components/src/Avatar/Avatar.module.scss  | 169 ------------------
 .../src/AvatarGroup/AvatarGroup.module.scss   |  79 --------
 2 files changed, 248 deletions(-)
 delete mode 100644 packages/components/src/Avatar/Avatar.module.scss
 delete mode 100644 packages/components/src/AvatarGroup/AvatarGroup.module.scss

diff --git a/packages/components/src/Avatar/Avatar.module.scss b/packages/components/src/Avatar/Avatar.module.scss
deleted file mode 100644
index b0dba7bbcba..00000000000
--- a/packages/components/src/Avatar/Avatar.module.scss
+++ /dev/null
@@ -1,169 +0,0 @@
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/shadow';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/border';
-
-$avatar-sm: 1.25rem;
-$avatar-md: 3rem;
-$avatar-lg: 4.5rem;
-$avatar-xl: 6rem;
-$avatar-xxl: 7.75rem;
-
-/* stylelint-disable no-descending-specificity */
-.wrapper {
-  background: $color-gray-300;
-  border-radius: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-  align-items: center;
-  display: flex;
-  justify-content: center;
-
-  &:not(.small) {
-    box-shadow: $shadow-small-box-shadow;
-    border: 3px solid $color-white;
-  }
-
-  // Themes
-  &.personal {
-    background: $color-orange-100;
-  }
-
-  &.otherUser {
-    background: $color-gray-300;
-  }
-
-  &.company {
-    border: 0;
-    background: $color-white;
-    padding: 6px;
-    border-radius: $border-solid-border-radius;
-  }
-
-  // Sizes
-  &.small {
-    width: $avatar-sm;
-    height: $avatar-sm;
-
-    .initials {
-      margin-bottom: -1px;
-    }
-
-    &.company {
-      padding: 0;
-    }
-  }
-
-  &.medium {
-    width: $avatar-md;
-    height: $avatar-md;
-
-    .initials {
-      margin-bottom: -1px;
-    }
-  }
-
-  &.large {
-    width: $avatar-lg;
-    height: $avatar-lg;
-  }
-
-  &.xlarge {
-    width: $avatar-xl;
-    height: $avatar-xl;
-  }
-
-  &.xxlarge {
-    width: $avatar-xxl;
-    height: $avatar-xxl;
-  }
-
-  & .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;
-  }
-}
-
-.avatarImage {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-
-  .loading & {
-    display: none;
-  }
-}
-
-.companyAvatarImage {
-  object-fit: contain;
-  box-sizing: border-box;
-  border-radius: 4px;
-}
-
-.fallbackIcon {
-  color: rgba($color-purple-800-rgb, 0.7);
-  font-size: var(--avatar-fallback-icon-size);
-
-  .xxlarge & {
-    --avatar-fallback-icon-size: calc(#{$avatar-xxl} * 0.8);
-  }
-
-  .xlarge & {
-    --avatar-fallback-icon-size: calc(#{$avatar-xl} * 0.8);
-  }
-
-  .large & {
-    --avatar-fallback-icon-size: calc(#{$avatar-lg} * 0.7);
-  }
-
-  .medium & {
-    --avatar-fallback-icon-size: calc(#{$avatar-md} * 0.7);
-  }
-
-  .small & {
-    --avatar-fallback-icon-size: calc(#{$avatar-sm} * 0.7);
-  }
-}
-
-.initials {
-  box-sizing: border-box;
-  color: $color-purple-800;
-  padding-left: 5px;
-  padding-right: 5px;
-  text-align: center;
-  width: 100%;
-  font-size: 22px;
-  font-family: $typography-heading-1-font-family;
-  font-weight: $typography-heading-1-font-weight;
-  letter-spacing: $typography-heading-3-letter-spacing;
-
-  // Whitespace cropping
-  &:not(.longName)::before {
-    content: '';
-    display: block;
-    margin-top: -0.001em;
-  }
-
-  .xlarge &,
-  .xxlarge & {
-    font-size: 34px;
-    letter-spacing: $typography-heading-1-letter-spacing;
-  }
-
-  .medium & {
-    font-size: 16px;
-    font-weight: $typography-heading-5-font-weight;
-    letter-spacing: $typography-heading-5-letter-spacing;
-  }
-
-  .small & {
-    font-size: 8px;
-    font-weight: $typography-heading-5-font-weight;
-    letter-spacing: $typography-heading-5-letter-spacing;
-  }
-}
-/* stylelint-enable no-descending-specificity */
diff --git a/packages/components/src/AvatarGroup/AvatarGroup.module.scss b/packages/components/src/AvatarGroup/AvatarGroup.module.scss
deleted file mode 100644
index e61319a504a..00000000000
--- a/packages/components/src/AvatarGroup/AvatarGroup.module.scss
+++ /dev/null
@@ -1,79 +0,0 @@
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/shadow';
-@import '~@kaizen/design-tokens/sass/color';
-
-// Vars
-$avatar-sm: 1.25rem;
-$avatar-md: 3rem;
-$avatar-lg: 4.5rem;
-
-@mixin overlap($size) {
-  margin-inline-start: calc(#{$size} / -2);
-}
-
-.AvatarGroup {
-  display: inline-flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.AvatarCounter {
-  direction: ltr;
-  align-items: center;
-  background: $color-gray-300;
-  border: 3px solid $color-white;
-  border-radius: 100%;
-  box-sizing: border-box;
-  box-shadow: $shadow-small-box-shadow;
-  display: flex;
-  justify-content: center;
-  overflow: hidden;
-}
-
-.small {
-  .AvatarGroupItem + .AvatarGroupItem {
-    @include overlap($avatar-sm);
-  }
-
-  .AvatarCounter {
-    box-shadow: none;
-    border: none;
-    width: $avatar-sm;
-    height: $avatar-sm;
-    font-family: $typography-heading-5-font-family;
-    font-size: 0.5rem;
-    font-weight: $typography-heading-5-font-weight;
-    letter-spacing: $typography-heading-5-letter-spacing;
-  }
-}
-
-.medium {
-  .AvatarGroupItem + .AvatarGroupItem {
-    @include overlap($avatar-md);
-  }
-
-  .AvatarCounter {
-    width: $avatar-md;
-    height: $avatar-md;
-    font-family: $typography-heading-5-font-family;
-    font-size: $typography-heading-5-font-size;
-    font-weight: $typography-heading-5-font-weight;
-    letter-spacing: $typography-heading-5-letter-spacing;
-  }
-}
-
-.large {
-  .AvatarGroupItem + .AvatarGroupItem {
-    @include overlap($avatar-lg);
-  }
-
-  .AvatarCounter {
-    width: $avatar-lg;
-    height: $avatar-lg;
-    font-family: $typography-heading-3-font-family;
-    font-size: $typography-heading-3-font-size;
-    font-weight: $typography-heading-3-font-weight;
-    letter-spacing: $typography-heading-3-letter-spacing;
-  }
-}

From cfae404a570a0817f1d642ab7c5de47add79190e Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Thu, 12 Dec 2024 16:26:28 +1100
Subject: [PATCH 04/29] Fix var() calls

---
 packages/components/src/Avatar/Avatar.module.css     | 12 ++++++------
 .../src/AvatarGroup/AvatarGroup.module.css           |  1 +
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
index 4f1de8b802b..3f196772e10 100644
--- a/packages/components/src/Avatar/Avatar.module.css
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -19,7 +19,7 @@
     border: 3px solid var(--color-white);
   }
 
-  /*Themes*/
+  /* Themes */
   &.personal {
     background: var(--color-orange-100);
   }
@@ -105,23 +105,23 @@
   font-size: var(--avatar-fallback-icon-size);
 
   .xxlarge & {
-    --avatar-fallback-icon-size: calc(#{var(--avatar-xxl)} * 0.8);
+    --avatar-fallback-icon-size: calc(var(--avatar-xxl) * 0.8);
   }
 
   .xlarge & {
-    --avatar-fallback-icon-size: calc(#{var(--avatar-xl)} * 0.8);
+    --avatar-fallback-icon-size: calc(var(--avatar-xl) * 0.8);
   }
 
   .large & {
-    --avatar-fallback-icon-size: calc(#{var(--avatar-lg)} * 0.7);
+    --avatar-fallback-icon-size: calc(var(--avatar-lg) * 0.7);
   }
 
   .medium & {
-    --avatar-fallback-icon-size: calc(#{var(--avatar-md)} * 0.7);
+    --avatar-fallback-icon-size: calc(var(--avatar-md) * 0.7);
   }
 
   .small & {
-    --avatar-fallback-icon-size: calc(#{var(--avatar-sm)} * 0.7);
+    --avatar-fallback-icon-size: calc(var(--avatar-sm) * 0.7);
   }
 }
 
diff --git a/packages/components/src/AvatarGroup/AvatarGroup.module.css b/packages/components/src/AvatarGroup/AvatarGroup.module.css
index 60a73d255ae..ab93fad56b7 100644
--- a/packages/components/src/AvatarGroup/AvatarGroup.module.css
+++ b/packages/components/src/AvatarGroup/AvatarGroup.module.css
@@ -2,6 +2,7 @@
   --avatar-sm: 1.25rem;
   --avatar-md: 3rem;
   --avatar-lg: 4.5rem;
+
   display: inline-flex;
   list-style: none;
   margin: 0;

From b09a21cee29b7e1f6a5c85ed37f1d034a6c83967 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Thu, 12 Dec 2024 15:17:31 +1100
Subject: [PATCH 05/29] Convert badge

---
 .../components/src/Badge/Badge.module.css     | 106 ++++++++++++++++++
 packages/components/src/Badge/Badge.tsx       |   2 +-
 2 files changed, 107 insertions(+), 1 deletion(-)
 create mode 100644 packages/components/src/Badge/Badge.module.css

diff --git a/packages/components/src/Badge/Badge.module.css b/packages/components/src/Badge/Badge.module.css
new file mode 100644
index 00000000000..39ced5d4415
--- /dev/null
+++ b/packages/components/src/Badge/Badge.module.css
@@ -0,0 +1,106 @@
+.badge {
+  --dt-color-background-default: var(--color-gray-300);
+  --small: var(--spacing-md);
+
+  --badge-duration-timing: (var(--animation-duration-slow) / 2)
+    var(--animation-easing-function-ease-in);
+
+  border-radius: var(--spacing-sm);
+  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-xs);
+  min-width: 8px;
+  text-align: center;
+}
+
+.badge.large {
+  display: inline-flex;
+  justify-content: center;
+  border-radius: var(--spacing-xl);
+  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 {
+  background-color: var(--dt-color-background-default);
+  color: var(--color-purple-800);
+}
+
+.active {
+  background-color: var(--color-blue-500);
+  color: var(--color-white);
+}
+
+.reversed.active {
+  background-color: var(--color-green-300);
+  color: var(--color-purple-800);
+}
+
+.dark {
+  background-color: rgba(var(--color-purple-700-rgb), 0.1);
+  color: var(--color-purple-800);
+}
+
+.dot {
+  background-color: var(--color-green-300);
+  padding: var(--spacing-xs);
+  min-width: unset;
+}
+
+.dot.large {
+  background-color: var(--color-green-300);
+  padding: 1.875rem;
+  width: unset;
+}
+
+.reversed.dot {
+  background-color: var(--color-green-300);
+}
+
+.reversed.dark {
+  background-color: var(--color-purple-700);
+  color: var(--color-white);
+}
+
+.reversed {
+  background-color: rgba(var(--color-white-rgb), 0.1);
+  color: var(--color-white);
+}
+
+.animation {
+  display: inherit;
+
+  .badge {
+    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);
+
+    &.dark {
+      background-color: rgba(var(--color-purple-700-rgb), 0.2);
+    }
+
+    &.active {
+      background-color: var(--color-blue-500);
+      color: var(--color-white);
+    }
+
+    &.dot {
+      background-color: var(--color-green-300);
+    }
+  }
+}
diff --git a/packages/components/src/Badge/Badge.tsx b/packages/components/src/Badge/Badge.tsx
index a8baded8c04..84dbf41c367 100644
--- a/packages/components/src/Badge/Badge.tsx
+++ b/packages/components/src/Badge/Badge.tsx
@@ -1,7 +1,7 @@
 import React, { HTMLAttributes, useLayoutEffect, useState } from 'react'
 import classnames from 'classnames'
 import { OverrideClassName } from '~components/types/OverrideClassName'
-import styles from './Badge.module.scss'
+import styles from './Badge.module.css'
 
 type BadgeCommonProps = {
   children?: string

From e5484fb7341c188798f64e185a0d65a04e0e8036 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Thu, 12 Dec 2024 15:21:53 +1100
Subject: [PATCH 06/29] remove unused scss file

---
 .../components/src/Badge/Badge.module.scss    | 113 ------------------
 1 file changed, 113 deletions(-)
 delete mode 100644 packages/components/src/Badge/Badge.module.scss

diff --git a/packages/components/src/Badge/Badge.module.scss b/packages/components/src/Badge/Badge.module.scss
deleted file mode 100644
index c9e5e3f315f..00000000000
--- a/packages/components/src/Badge/Badge.module.scss
+++ /dev/null
@@ -1,113 +0,0 @@
-@import '~@kaizen/design-tokens/sass/animation';
-@import '~@kaizen/design-tokens/sass/typography';
-@import '~@kaizen/design-tokens/sass/color';
-@import '~@kaizen/design-tokens/sass/spacing';
-
-$dt-color-background-default: $color-gray-300;
-
-$small: $spacing-md;
-
-.badge {
-  border-radius: $spacing-sm;
-  color: $color-purple-800;
-  display: inline-block;
-  position: relative;
-  font-family: $typography-paragraph-extra-small-font-family;
-  font-size: $typography-paragraph-extra-small-font-size;
-  font-weight: $typography-paragraph-bold-font-weight;
-  letter-spacing: $typography-paragraph-extra-small-letter-spacing;
-  line-height: $typography-paragraph-extra-small-line-height;
-  padding: 1px $spacing-xs;
-  min-width: 8px;
-  text-align: center;
-}
-
-.badge.large {
-  display: inline-flex;
-  justify-content: center;
-  border-radius: $spacing-xl;
-  font-size: $typography-data-medium-font-size;
-  line-height: $typography-data-medium-line-height;
-  letter-spacing: $typography-data-medium-letter-spacing;
-  padding: 2px 1.875rem;
-  width: 24px;
-}
-
-.default {
-  background-color: $dt-color-background-default;
-  color: $color-purple-800;
-}
-
-.active {
-  background-color: $color-blue-500;
-  color: $color-white;
-}
-
-.reversed.active {
-  background-color: $color-green-300;
-  color: $color-purple-800;
-}
-
-.dark {
-  background-color: rgba($color-purple-700-rgb, 0.1);
-  color: $color-purple-800;
-}
-
-.dot {
-  background-color: $color-green-300;
-  padding: $spacing-xs;
-  min-width: unset;
-}
-
-.dot.large {
-  background-color: $color-green-300;
-  padding: 1.875rem;
-  width: unset;
-}
-
-.reversed.dot {
-  background-color: $color-green-300;
-}
-
-.reversed.dark {
-  background-color: $color-purple-700;
-  color: $color-white;
-}
-
-.reversed {
-  background-color: rgba($color-white-rgb, 0.1);
-  color: $color-white;
-}
-
-$badge-duration-timing: ($animation-duration-slow / 2) $animation-easing-function-ease-in;
-
-$badge-transition:
-  transform $badge-duration-timing,
-  background-color $badge-duration-timing;
-
-.animation {
-  display: inherit;
-
-  .badge {
-    transition: $badge-transition;
-    transform-origin: center;
-    transform: scale3d(1, 1, 1);
-  }
-
-  &.animationOn .badge {
-    transform: scale3d(1.35, 1.35, 1.35);
-
-    &.dark {
-      background-color: rgba($color-purple-700-rgb, 0.2);
-    }
-
-    &.active {
-      background-color: $color-blue-500;
-      color: $color-white;
-    }
-
-    &.dot {
-      background-color: $color-green-300;
-    }
-  }
-}

From 2641e879c07652e2a89218434f559ca95a1a6b83 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Thu, 12 Dec 2024 15:43:02 +1100
Subject: [PATCH 07/29] Convert brand

---
 .../src/Brand/{Brand.module.scss => Brand.module.css}           | 0
 packages/components/src/Brand/Brand.tsx                         | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename packages/components/src/Brand/{Brand.module.scss => Brand.module.css} (100%)

diff --git a/packages/components/src/Brand/Brand.module.scss b/packages/components/src/Brand/Brand.module.css
similarity index 100%
rename from packages/components/src/Brand/Brand.module.scss
rename to packages/components/src/Brand/Brand.module.css
diff --git a/packages/components/src/Brand/Brand.tsx b/packages/components/src/Brand/Brand.tsx
index bd7eb00dfb3..7c30c9b43c8 100644
--- a/packages/components/src/Brand/Brand.tsx
+++ b/packages/components/src/Brand/Brand.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames'
 import { 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 }

From 84ec773493cb3f19bcf349077e71a8f2b758cc0d Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Thu, 12 Dec 2024 16:44:58 +1100
Subject: [PATCH 08/29] Fix formatting

---
 packages/components/src/Badge/Badge.module.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/Badge/Badge.module.css b/packages/components/src/Badge/Badge.module.css
index 39ced5d4415..8a8db94665d 100644
--- a/packages/components/src/Badge/Badge.module.css
+++ b/packages/components/src/Badge/Badge.module.css
@@ -1,7 +1,6 @@
 .badge {
   --dt-color-background-default: var(--color-gray-300);
   --small: var(--spacing-md);
-
   --badge-duration-timing: (var(--animation-duration-slow) / 2)
     var(--animation-easing-function-ease-in);
 

From d115a4d6c3e5f6d593455b1d91f603886d2dffbb Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Fri, 13 Dec 2024 11:40:21 +1100
Subject: [PATCH 09/29] Convert BrandMoment, ButtonGroup

---
 ...ent.module.scss => BrandMoment.module.css} | 74 ++++++++++---------
 .../src/BrandMoment/BrandMoment.tsx           |  2 +-
 .../src/ButtonGroup/ButtonGroup.module.css    | 49 ++++++++++++
 .../src/ButtonGroup/ButtonGroup.tsx           |  2 +-
 4 files changed, 90 insertions(+), 37 deletions(-)
 rename packages/components/src/BrandMoment/{BrandMoment.module.scss => BrandMoment.module.css} (63%)
 create mode 100644 packages/components/src/ButtonGroup/ButtonGroup.module.css

diff --git a/packages/components/src/BrandMoment/BrandMoment.module.scss b/packages/components/src/BrandMoment/BrandMoment.module.css
similarity index 63%
rename from packages/components/src/BrandMoment/BrandMoment.module.scss
rename to packages/components/src/BrandMoment/BrandMoment.module.css
index d11b0c69571..6c3f6746539 100644
--- a/packages/components/src/BrandMoment/BrandMoment.module.scss
+++ b/packages/components/src/BrandMoment/BrandMoment.module.css
@@ -1,12 +1,8 @@
-@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 +34,73 @@ $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-md);
 }
 
-@media (min-width: $layout-breakpoints-large) {
+@media (min-width: 1080px) {
   .container {
-    padding: 0 $spacing-xxl;
+    padding: 0 var(--spacing-xxl);
   }
 }
 
-@media (min-width: $breakpoint-xl) {
+@media (min-width: 1366px) {
   .container {
-    padding: 0 $spacing-xxxxl;
+    padding: 0 var(--spacing-xxxxl);
   }
 }
 
+/*
 // --------------------------------
 // Header
 // --------------------------------
+*/
 .header {
   inline-size: 100%;
-  margin-block-end: $spacing-md;
+  margin-block-end: var(--spacing-md);
 }
 
+/*
 // --------------------------------
 // Main
 // --------------------------------
+*/
 .main {
   flex: 1 0 auto;
   display: flex;
   align-items: center;
-  margin-block-end: $spacing-xxl;
+  margin-block-end: var(--spacing-xxl);
 }
 
 .mainInner {
   display: grid;
   grid-template-columns: 1fr;
-  gap: $spacing-xl $spacing-lg;
+  gap: var(--spacing-xl) var(--spacing-lg);
   align-items: center;
 }
 
-@media (min-width: $layout-breakpoints-medium) {
+@media (min-width: 768px) {
   .mainInner {
-    row-gap: $spacing-xxl;
+    row-gap: var(--spacing-xxl);
   }
 }
 
-@media (min-width: $layout-breakpoints-large) {
+@media (min-width: 1080px) {
   .mainInner {
     grid-template-columns: 1fr 1fr;
   }
 }
 
-@media (min-width: $breakpoint-xl) {
+@media (min-width: 1366px) {
   .mainInner {
-    column-gap: $spacing-xxxxl;
+    column-gap: var(--spacing-xxxxl);
   }
 }
 
@@ -124,33 +126,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-lg);
 }
 
 .textBody {
-  margin-bottom: $spacing-lg;
+  margin-bottom: var(--spacing-lg);
 }
 
 .secondaryAction {
-  margin-block-start: $spacing-sm;
+  margin-block-start: var(--spacing-sm);
 }
 
-@media (min-width: $layout-breakpoints-medium) {
+@media (min-width: 768px) {
   .actions {
     display: flex;
   }
 
   .secondaryAction {
     margin-block-start: 0;
-    margin-inline-start: $spacing-sm;
+    margin-inline-start: var(--spacing-sm);
   }
 }
 
-@media (min-width: $layout-breakpoints-large) {
+@media (min-width: 1080px) {
   .left {
     justify-content: flex-end;
   }
@@ -160,9 +162,11 @@ $breakpoint-xl: 1366px; // TODO: create an xl breakpoint in design-tokens and re
   }
 }
 
+/*
 // --------------------------------
 // Footer
 // --------------------------------
+*/
 .footer {
   flex: 0 0 auto;
 }
@@ -170,10 +174,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-sm) var(--spacing-md);
+  margin-block-end: var(--spacing-lg);
 }
 
 .poweredByContainer {
@@ -185,18 +189,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-md);
 }
 
 .poweredByLogo {
-  margin-inline-start: $spacing-xs;
+  margin-inline-start: var(--spacing-xs);
 
   > img {
     max-width: 133px;
   }
 }
 
-@media (min-width: $layout-breakpoints-large) {
+@media (min-width: 1080px) {
   .footerInner {
     flex-direction: row;
     align-items: center;
@@ -205,7 +209,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-md);
   }
 
   .poweredByContainer {
diff --git a/packages/components/src/BrandMoment/BrandMoment.tsx b/packages/components/src/BrandMoment/BrandMoment.tsx
index 4a30b1c7d9a..d3694819b25 100644
--- a/packages/components/src/BrandMoment/BrandMoment.tsx
+++ b/packages/components/src/BrandMoment/BrandMoment.tsx
@@ -7,7 +7,7 @@ import { Button, ButtonProps } from '~components/__actions__/v2'
 import { 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 */
diff --git a/packages/components/src/ButtonGroup/ButtonGroup.module.css b/packages/components/src/ButtonGroup/ButtonGroup.module.css
new file mode 100644
index 00000000000..5b9109f13c8
--- /dev/null
+++ b/packages/components/src/ButtonGroup/ButtonGroup.module.css
@@ -0,0 +1,49 @@
+.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) 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);
+}
diff --git a/packages/components/src/ButtonGroup/ButtonGroup.tsx b/packages/components/src/ButtonGroup/ButtonGroup.tsx
index c029ebbf670..bb46fd390cf 100644
--- a/packages/components/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/components/src/ButtonGroup/ButtonGroup.tsx
@@ -6,7 +6,7 @@ import {
 } from '~components/Filter/FilterButton/subcomponents/FilterButtonBase'
 import { Tooltip, TooltipProps } from '~components/__overlays__/Tooltip/v1'
 import { 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

From ab8913e103250d0c2085f01770f79630cbf22813 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Mon, 16 Dec 2024 13:22:33 +1100
Subject: [PATCH 10/29] Remove lint disable

---
 packages/components/src/Avatar/Avatar.module.css |  1 -
 .../src/BrandMoment/BrandMoment.module.css       | 16 ++++++++--------
 .../src/ButtonGroup/ButtonGroup.module.css       |  3 +--
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
index 3f196772e10..fdd5ff76473 100644
--- a/packages/components/src/Avatar/Avatar.module.css
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -162,4 +162,3 @@
     letter-spacing: var(--typography-heading-5-letter-spacing);
   }
 }
-/* stylelint-enable no-descending-specificity */
diff --git a/packages/components/src/BrandMoment/BrandMoment.module.css b/packages/components/src/BrandMoment/BrandMoment.module.css
index 6c3f6746539..d20650e938d 100644
--- a/packages/components/src/BrandMoment/BrandMoment.module.css
+++ b/packages/components/src/BrandMoment/BrandMoment.module.css
@@ -45,13 +45,13 @@
   padding: 0, var(--spacing-md);
 }
 
-@media (min-width: 1080px) {
+@media (width >= 1080px) {
   .container {
     padding: 0 var(--spacing-xxl);
   }
 }
 
-@media (min-width: 1366px) {
+@media (width >= 1366px) {
   .container {
     padding: 0 var(--spacing-xxxxl);
   }
@@ -86,19 +86,19 @@
   align-items: center;
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .mainInner {
     row-gap: var(--spacing-xxl);
   }
 }
 
-@media (min-width: 1080px) {
+@media (width >= 1080px) {
   .mainInner {
     grid-template-columns: 1fr 1fr;
   }
 }
 
-@media (min-width: 1366px) {
+@media (width >= 1366px) {
   .mainInner {
     column-gap: var(--spacing-xxxxl);
   }
@@ -141,7 +141,7 @@
   margin-block-start: var(--spacing-sm);
 }
 
-@media (min-width: 768px) {
+@media (width >= 768px) {
   .actions {
     display: flex;
   }
@@ -152,7 +152,7 @@
   }
 }
 
-@media (min-width: 1080px) {
+@media (width >= 1080px) {
   .left {
     justify-content: flex-end;
   }
@@ -200,7 +200,7 @@
   }
 }
 
-@media (min-width: 1080px) {
+@media (width >= 1080px) {
   .footerInner {
     flex-direction: row;
     align-items: center;
diff --git a/packages/components/src/ButtonGroup/ButtonGroup.module.css b/packages/components/src/ButtonGroup/ButtonGroup.module.css
index 5b9109f13c8..bc24f7fa0b6 100644
--- a/packages/components/src/ButtonGroup/ButtonGroup.module.css
+++ b/packages/components/src/ButtonGroup/ButtonGroup.module.css
@@ -1,6 +1,7 @@
 .buttonGroup {
   --focus-ring-offset: 1px;
   --focus-ring-offset-inner: calc(-1 * var(--focus-ring-offset));
+
   display: inline-flex;
 }
 
@@ -32,7 +33,6 @@
 .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);
 }
 
@@ -44,6 +44,5 @@
 .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);
 }

From e17572adf3e370d6d84eb0dc0939a0e909296be1 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Wed, 18 Dec 2024 15:18:58 +1100
Subject: [PATCH 11/29] Flattening

---
 packages/components/src/Avatar/Avatar.module.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
index fdd5ff76473..b986edfcba2 100644
--- a/packages/components/src/Avatar/Avatar.module.css
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -39,14 +39,14 @@
   &.small {
     width: var(--avatar-sm);
     height: var(--avatar-sm);
+  }
 
-    .initials {
-      margin-bottom: -1px;
-    }
+  &.small .initials {
+    margin-bottom: -1px;
+  }
 
-    &.company {
-      padding: 0;
-    }
+  &.small &.company {
+    padding: 0;
   }
 
   &.medium {

From 258b36f49921271ae4e54394334b676a5274e652 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Thu, 19 Dec 2024 09:02:25 +1100
Subject: [PATCH 12/29] Remove stylelint flags

---
 .../components/src/Avatar/Avatar.module.css   | 47 +++++++++----------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
index b986edfcba2..f7a8990815d 100644
--- a/packages/components/src/Avatar/Avatar.module.css
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -1,4 +1,3 @@
-/* stylelint-disable no-descending-specificity */
 .wrapper {
   --avatar-sm: 1.25rem;
   --avatar-md: 3rem;
@@ -41,23 +40,10 @@
     height: var(--avatar-sm);
   }
 
-  &.small .initials {
-    margin-bottom: -1px;
-  }
-
   &.small &.company {
     padding: 0;
   }
 
-  &.medium {
-    width: var(--avatar-md);
-    height: var(--avatar-md);
-
-    .initials {
-      margin-bottom: -1px;
-    }
-  }
-
   &.large {
     width: var(--avatar-lg);
     height: var(--avatar-lg);
@@ -72,16 +58,6 @@
     width: var(--avatar-xxl);
     height: var(--avatar-xxl);
   }
-
-  & .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;
-  }
 }
 
 .avatarImage {
@@ -162,3 +138,26 @@
     letter-spacing: var(--typography-heading-5-letter-spacing);
   }
 }
+
+.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;
+}
+
+.wrapper &.small .initials {
+  margin-bottom: -1px;
+}
+
+.wrapper &.medium {
+  width: var(--avatar-md);
+  height: var(--avatar-md);
+
+  .initials {
+    margin-bottom: -1px;
+  }
+}

From f3d42884760b1aaf45158cd8f65660911826dd8a Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Thu, 19 Dec 2024 09:08:21 +1100
Subject: [PATCH 13/29] Fix imports

---
 packages/components/src/Avatar/Avatar.tsx           | 2 +-
 packages/components/src/AvatarGroup/AvatarGroup.tsx | 2 +-
 packages/components/src/Badge/Badge.tsx             | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/Avatar/Avatar.tsx b/packages/components/src/Avatar/Avatar.tsx
index c2fde88555b..07dc2d0ff3d 100644
--- a/packages/components/src/Avatar/Avatar.tsx
+++ b/packages/components/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'
 
diff --git a/packages/components/src/AvatarGroup/AvatarGroup.tsx b/packages/components/src/AvatarGroup/AvatarGroup.tsx
index 4c0ffcc0830..38dda7e545e 100644
--- a/packages/components/src/AvatarGroup/AvatarGroup.tsx
+++ b/packages/components/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'>
diff --git a/packages/components/src/Badge/Badge.tsx b/packages/components/src/Badge/Badge.tsx
index 78d7bfce369..f543e9c3c8c 100644
--- a/packages/components/src/Badge/Badge.tsx
+++ b/packages/components/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

From 9f729c98f248b2b57929a75c7155d77d1dda6d22 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Thu, 19 Dec 2024 12:49:36 +1100
Subject: [PATCH 14/29] Replace tshirt sizes and px literals with rem vars

---
 .../components/src/Avatar/Avatar.module.css   |  4 +--
 .../components/src/Badge/Badge.module.css     | 10 +++---
 .../src/BrandMoment/BrandMoment.module.css    | 34 +++++++++----------
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
index f7a8990815d..f33528fe9a4 100644
--- a/packages/components/src/Avatar/Avatar.module.css
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -30,7 +30,7 @@
   &.company {
     border: 0;
     background: var(--color-white);
-    padding: 6px;
+    padding: var(--spacing-6);
     border-radius: var(--border-solid-border-radius);
   }
 
@@ -73,7 +73,7 @@
 .companyAvatarImage {
   object-fit: contain;
   box-sizing: border-box;
-  border-radius: 4px;
+  border-radius: var(--spacing-4);
 }
 
 .fallbackIcon {
diff --git a/packages/components/src/Badge/Badge.module.css b/packages/components/src/Badge/Badge.module.css
index 8a8db94665d..e3b02d16dfd 100644
--- a/packages/components/src/Badge/Badge.module.css
+++ b/packages/components/src/Badge/Badge.module.css
@@ -1,10 +1,10 @@
 .badge {
   --dt-color-background-default: var(--color-gray-300);
-  --small: var(--spacing-md);
+  --small: var(--spacing-24);
   --badge-duration-timing: (var(--animation-duration-slow) / 2)
     var(--animation-easing-function-ease-in);
 
-  border-radius: var(--spacing-sm);
+  border-radius: var(--spacing-12);
   color: var(--color-purple-800);
   display: inline-block;
   position: relative;
@@ -13,7 +13,7 @@
   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-xs);
+  padding: 1px var(--spacing-6);
   min-width: 8px;
   text-align: center;
 }
@@ -21,7 +21,7 @@
 .badge.large {
   display: inline-flex;
   justify-content: center;
-  border-radius: var(--spacing-xl);
+  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);
@@ -51,7 +51,7 @@
 
 .dot {
   background-color: var(--color-green-300);
-  padding: var(--spacing-xs);
+  padding: var(--spacing-6);
   min-width: unset;
 }
 
diff --git a/packages/components/src/BrandMoment/BrandMoment.module.css b/packages/components/src/BrandMoment/BrandMoment.module.css
index d20650e938d..f1e2da2b758 100644
--- a/packages/components/src/BrandMoment/BrandMoment.module.css
+++ b/packages/components/src/BrandMoment/BrandMoment.module.css
@@ -42,18 +42,18 @@
 .container {
   max-width: var(--layout-content-max-width);
   margin: 0 auto;
-  padding: 0, var(--spacing-md);
+  padding: 0, var(--spacing-24);
 }
 
 @media (width >= 1080px) {
   .container {
-    padding: 0 var(--spacing-xxl);
+    padding: 0 3.75rem;
   }
 }
 
 @media (width >= 1366px) {
   .container {
-    padding: 0 var(--spacing-xxxxl);
+    padding: 0 5.25rem;
   }
 }
 
@@ -64,7 +64,7 @@
 */
 .header {
   inline-size: 100%;
-  margin-block-end: var(--spacing-md);
+  margin-block-end: var(--spacing-24);
 }
 
 /*
@@ -76,19 +76,19 @@
   flex: 1 0 auto;
   display: flex;
   align-items: center;
-  margin-block-end: var(--spacing-xxl);
+  margin-block-end: 3.75rem;
 }
 
 .mainInner {
   display: grid;
   grid-template-columns: 1fr;
-  gap: var(--spacing-xl) var(--spacing-lg);
+  gap: var(--spacing-48) 2.25rem;
   align-items: center;
 }
 
 @media (width >= 768px) {
   .mainInner {
-    row-gap: var(--spacing-xxl);
+    row-gap: 3.75rem;
   }
 }
 
@@ -100,7 +100,7 @@
 
 @media (width >= 1366px) {
   .mainInner {
-    column-gap: var(--spacing-xxxxl);
+    column-gap: 5.25rem;
   }
 }
 
@@ -130,15 +130,15 @@
 }
 
 .title {
-  margin-bottom: var(--spacing-lg);
+  margin-bottom: 2.25rem;
 }
 
 .textBody {
-  margin-bottom: var(--spacing-lg);
+  margin-bottom: 2.25rem;
 }
 
 .secondaryAction {
-  margin-block-start: var(--spacing-sm);
+  margin-block-start: var(--spacing-12);
 }
 
 @media (width >= 768px) {
@@ -148,7 +148,7 @@
 
   .secondaryAction {
     margin-block-start: 0;
-    margin-inline-start: var(--spacing-sm);
+    margin-inline-start: var(--spacing-12);
   }
 }
 
@@ -176,8 +176,8 @@
   flex-direction: column;
   border-block-start: 1px solid var(--color-purple-800);
   border-inline-start: 1px solid var(--color-purple-800);
-  padding: var(--spacing-sm) var(--spacing-md);
-  margin-block-end: var(--spacing-lg);
+  padding: var(--spacing-12) var(--spacing-24);
+  margin-block-end: 2.25rem;
 }
 
 .poweredByContainer {
@@ -189,11 +189,11 @@
 .footerTextContainer {
   flex: 1 1 auto;
   order: 1;
-  margin-block-end: var(--spacing-md);
+  margin-block-end: var(--spacing-24);
 }
 
 .poweredByLogo {
-  margin-inline-start: var(--spacing-xs);
+  margin-inline-start: var(--spacing-6);
 
   > img {
     max-width: 133px;
@@ -209,7 +209,7 @@
   .footerTextContainer {
     order: initial;
     margin-block-end: 0;
-    margin-inline-start: var(--spacing-md);
+    margin-inline-start: var(--spacing-24);
   }
 
   .poweredByContainer {

From 5b86fc633623329b5f117c112ed01a21fbac65f6 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Thu, 19 Dec 2024 13:01:10 +1100
Subject: [PATCH 15/29] Replace font px literals with typography vars

---
 packages/components/src/Avatar/Avatar.module.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
index f33528fe9a4..bbb5be79821 100644
--- a/packages/components/src/Avatar/Avatar.module.css
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -108,7 +108,7 @@
   padding-right: 5px;
   text-align: center;
   width: 100%;
-  font-size: 22px;
+  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);
@@ -122,18 +122,18 @@
 
   .xlarge &,
   .xxlarge & {
-    font-size: 34px;
+    font-size: var(--typography-heading-1-font-size);
     letter-spacing: var(--typography-heading-1-letter-spacing);
   }
 
   .medium & {
-    font-size: 16px;
+    font-size: var(--typography-heading-5-font-size);
     font-weight: var(--typography-heading-5-font-weight);
     letter-spacing: var(--typography-heading-5-letter-spacing);
   }
 
   .small & {
-    font-size: 8px;
+    font-size: 0.5rem;
     font-weight: var(--typography-heading-5-font-weight);
     letter-spacing: var(--typography-heading-5-letter-spacing);
   }

From ffe62e6ed19d3f2a291dd2f11937f07cad4896bb Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Fri, 20 Dec 2024 08:29:54 +1100
Subject: [PATCH 16/29] Add changeset

---
 .changeset/lazy-toes-fetch.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/lazy-toes-fetch.md

diff --git a/.changeset/lazy-toes-fetch.md b/.changeset/lazy-toes-fetch.md
new file mode 100644
index 00000000000..d62d18fa171
--- /dev/null
+++ b/.changeset/lazy-toes-fetch.md
@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+Initial conversion of SCSS to CSS

From 99b4910f86f1be33365c5dd9389634dd34bfd600 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Mon, 23 Dec 2024 09:07:45 +1100
Subject: [PATCH 17/29] pr feedback

---
 .../components/src/Avatar/Avatar.module.css   | 47 +++++++------------
 .../src/AvatarGroup/AvatarGroup.module.css    | 26 +++++-----
 .../components/src/Badge/Badge.module.css     |  4 +-
 .../src/BrandMoment/BrandMoment.module.css    |  2 +-
 4 files changed, 31 insertions(+), 48 deletions(-)

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
index bbb5be79821..e7963cd4a99 100644
--- a/packages/components/src/Avatar/Avatar.module.css
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -1,9 +1,5 @@
 .wrapper {
-  --avatar-sm: 1.25rem;
-  --avatar-md: 3rem;
-  --avatar-lg: 4.5rem;
-  --avatar-xl: 6rem;
-  --avatar-xxl: 7.75rem;
+  --avatar-x-y: 1.5rem;
 
   background: var(--color-gray-300);
   border-radius: 100%;
@@ -12,6 +8,8 @@
   align-items: center;
   display: flex;
   justify-content: center;
+  width: var(--avatar-x-y);
+  height: var(--avatar-x-y);
 
   &:not(.small) {
     box-shadow: var(--shadow-small-box-shadow);
@@ -36,27 +34,27 @@
 
   /* Sizes */
   &.small {
-    width: var(--avatar-sm);
-    height: var(--avatar-sm);
+    --avatar-x-y: 1.25rem;
   }
 
   &.small &.company {
     padding: 0;
   }
 
+  &.medium {
+    --avatar-x-y: 3rem;
+  }
+
   &.large {
-    width: var(--avatar-lg);
-    height: var(--avatar-lg);
+    --avatar-x-y: 4.5rem;
   }
 
   &.xlarge {
-    width: var(--avatar-xl);
-    height: var(--avatar-xl);
+    --avatar-x-y: 6rem;
   }
 
   &.xxlarge {
-    width: var(--avatar-xxl);
-    height: var(--avatar-xxl);
+    --avatar-x-y: 7.75rem;
   }
 }
 
@@ -80,24 +78,15 @@
   color: rgba(var(--color-purple-800-rgb), 0.7);
   font-size: var(--avatar-fallback-icon-size);
 
+  .xlarge &,
   .xxlarge & {
-    --avatar-fallback-icon-size: calc(var(--avatar-xxl) * 0.8);
-  }
-
-  .xlarge & {
-    --avatar-fallback-icon-size: calc(var(--avatar-xl) * 0.8);
+    --avatar-fallback-icon-size: calc(var(--avatar-x-y) * 0.8);
   }
 
+  .small &,
+  .medium &,
   .large & {
-    --avatar-fallback-icon-size: calc(var(--avatar-lg) * 0.7);
-  }
-
-  .medium & {
-    --avatar-fallback-icon-size: calc(var(--avatar-md) * 0.7);
-  }
-
-  .small & {
-    --avatar-fallback-icon-size: calc(var(--avatar-sm) * 0.7);
+    --avatar-fallback-icon-size: calc(var(--avatar-x-y) * 0.7);
   }
 }
 
@@ -154,8 +143,8 @@
 }
 
 .wrapper &.medium {
-  width: var(--avatar-md);
-  height: var(--avatar-md);
+  width: var(--avatar-x-y);
+  height: var(--avatar-x-y);
 
   .initials {
     margin-bottom: -1px;
diff --git a/packages/components/src/AvatarGroup/AvatarGroup.module.css b/packages/components/src/AvatarGroup/AvatarGroup.module.css
index ab93fad56b7..1b94d3f72fa 100644
--- a/packages/components/src/AvatarGroup/AvatarGroup.module.css
+++ b/packages/components/src/AvatarGroup/AvatarGroup.module.css
@@ -20,18 +20,20 @@
   display: flex;
   justify-content: center;
   overflow: hidden;
+  width: var(--avatar-x-y, 1.25rem);
+  height: var(--avatar-x-y, 1.25rem);
+}
+
+.AvatarGroupItem + .AvatarGroupItem {
+  margin-inline-start: calc((var(--avatar-x-y)) / -2);
 }
 
 .small {
-  .AvatarGroupItem + .AvatarGroupItem {
-    margin-inline-start: calc((var(--avatar-sm)) / -2);
-  }
+  --avatar-x-y: 1.25rem;
 
   .AvatarCounter {
     box-shadow: none;
     border: none;
-    width: var(--avatar-sm);
-    height: var(--avatar-sm);
     font-family: var(--typography-heading-5-font-family);
     font-size: 0.5rem;
     font-weight: var(--typography-heading-5-font-weight);
@@ -40,13 +42,9 @@
 }
 
 .medium {
-  .AvatarGroupItem + .AvatarGroupItem {
-    margin-inline-start: calc((var(--avatar-md)) / -2);
-  }
+  --avatar-x-y: 3rem;
 
   .AvatarCounter {
-    width: var(--avatar-md);
-    height: var(--avatar-md);
     font-family: var(--typography-heading-5-font-family);
     font-size: var(--typography-heading-5-font-size);
     font-weight: var(--typography-heading-5-font-weight);
@@ -55,13 +53,11 @@
 }
 
 .large {
-  .AvatarGroupItem + .AvatarGroupItem {
-    margin-inline-start: calc((var(--avatar-lg)) / -2);
-  }
+  --avatar-x-y: 4.5rem;
 
   .AvatarCounter {
-    width: var(--avatar-lg);
-    height: var(--avatar-lg);
+    width: var(--avatar-x-y);
+    height: var(--avatar-x-y);
     font-family: var(--typography-heading-3-font-family);
     font-size: var(--typography-heading-3-font-size);
     font-weight: var(--typography-heading-3-font-weight);
diff --git a/packages/components/src/Badge/Badge.module.css b/packages/components/src/Badge/Badge.module.css
index e3b02d16dfd..b8fa11b2a36 100644
--- a/packages/components/src/Badge/Badge.module.css
+++ b/packages/components/src/Badge/Badge.module.css
@@ -1,6 +1,4 @@
 .badge {
-  --dt-color-background-default: var(--color-gray-300);
-  --small: var(--spacing-24);
   --badge-duration-timing: (var(--animation-duration-slow) / 2)
     var(--animation-easing-function-ease-in);
 
@@ -16,6 +14,7 @@
   padding: 1px var(--spacing-6);
   min-width: 8px;
   text-align: center;
+  background-color: var(--badge-background-color, var(--color-gray-300));
 }
 
 .badge.large {
@@ -30,7 +29,6 @@
 }
 
 .default {
-  background-color: var(--dt-color-background-default);
   color: var(--color-purple-800);
 }
 
diff --git a/packages/components/src/BrandMoment/BrandMoment.module.css b/packages/components/src/BrandMoment/BrandMoment.module.css
index f1e2da2b758..611e4ee9982 100644
--- a/packages/components/src/BrandMoment/BrandMoment.module.css
+++ b/packages/components/src/BrandMoment/BrandMoment.module.css
@@ -42,7 +42,7 @@
 .container {
   max-width: var(--layout-content-max-width);
   margin: 0 auto;
-  padding: 0, var(--spacing-24);
+  padding: 0 var(--spacing-24);
 }
 
 @media (width >= 1080px) {

From 623df0567b2c389eba672cf2cda99678fd06ed16 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Mon, 23 Dec 2024 15:01:58 +1100
Subject: [PATCH 18/29] PR feedback

---
 .../components/src/Avatar/Avatar.module.css   | 130 ++++++++----------
 .../src/AvatarGroup/AvatarGroup.module.css    |   6 -
 .../components/src/Badge/Badge.module.css     |  83 +++++------
 .../src/BrandMoment/BrandMoment.module.css    |  43 ++----
 .../src/ButtonGroup/ButtonGroup.module.css    |   2 +-
 5 files changed, 107 insertions(+), 157 deletions(-)

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
index e7963cd4a99..4d58c786f5e 100644
--- a/packages/components/src/Avatar/Avatar.module.css
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -11,51 +11,50 @@
   width: var(--avatar-x-y);
   height: var(--avatar-x-y);
 
-  &:not(.small) {
-    box-shadow: var(--shadow-small-box-shadow);
-    border: 3px solid var(--color-white);
-  }
+  box-shadow: var(--shadow-small-box-shadow);
+  border: 3px solid var(--color-white);
+}
 
-  /* Themes */
-  &.personal {
-    background: var(--color-orange-100);
-  }
+.wrapper.small {
+  box-shadow: none;
+  border: none;
+  --avatar-x-y: 1.25rem;
+}
 
-  &.otherUser {
-    background: var(--color-gray-300);
-  }
+/* Themes */
+.wrapper .personal {
+  background: var(--color-orange-100);
+}
 
-  &.company {
-    border: 0;
-    background: var(--color-white);
-    padding: var(--spacing-6);
-    border-radius: var(--border-solid-border-radius);
-  }
+.wrapper .otherUser {
+  background: var(--color-gray-300);
+}
 
-  /* Sizes */
-  &.small {
-    --avatar-x-y: 1.25rem;
-  }
+.wrapper .company {
+  border: 0;
+  background: var(--color-white);
+  padding: var(--spacing-6);
+  border-radius: var(--border-solid-border-radius);
+}
 
-  &.small &.company {
-    padding: 0;
-  }
+.wrapper .small .company {
+  padding: 0;
+}
 
-  &.medium {
-    --avatar-x-y: 3rem;
-  }
+.wrapper .medium {
+  --avatar-x-y: 3rem;
+}
 
-  &.large {
-    --avatar-x-y: 4.5rem;
-  }
+.wrapper .large {
+  --avatar-x-y: 4.5rem;
+}
 
-  &.xlarge {
-    --avatar-x-y: 6rem;
-  }
+.wrapper .xlarge {
+  --avatar-x-y: 6rem;
+}
 
-  &.xxlarge {
-    --avatar-x-y: 7.75rem;
-  }
+.wrapper .xxlarge {
+  --avatar-x-y: 7.75rem;
 }
 
 .avatarImage {
@@ -89,7 +88,6 @@
     --avatar-fallback-icon-size: calc(var(--avatar-x-y) * 0.7);
   }
 }
-
 .initials {
   box-sizing: border-box;
   color: var(--color-purple-800);
@@ -101,34 +99,36 @@
   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;
+}
 
-  /* Whitespace cropping */
-  &:not(.longName)::before {
-    content: '';
-    display: block;
-    margin-top: -0.001em;
-  }
+.initials::before {
+  content: '';
+  display: block;
+  margin-top: -0.001em;
+}
 
-  .xlarge &,
-  .xxlarge & {
-    font-size: var(--typography-heading-1-font-size);
-    letter-spacing: var(--typography-heading-1-letter-spacing);
-  }
+.wrapper .xlarge .initials,
+.wrapper .xxlarge .initials {
+  font-size: var(--typography-heading-1-font-size);
+  letter-spacing: var(--typography-heading-1-letter-spacing);
+}
 
-  .medium & {
-    font-size: var(--typography-heading-5-font-size);
-    font-weight: var(--typography-heading-5-font-weight);
-    letter-spacing: var(--typography-heading-5-letter-spacing);
-  }
+.wrapper .medium .initials {
+  font-size: var(--typography-heading-5-font-size);
+  font-weight: var(--typography-heading-5-font-weight);
+  letter-spacing: var(--typography-heading-5-letter-spacing);
+}
 
-  .small & {
-    font-size: 0.5rem;
-    font-weight: var(--typography-heading-5-font-weight);
-    letter-spacing: var(--typography-heading-5-letter-spacing);
-  }
+.wrapper .small .initials {
+  font-size: 0.5rem;
+  font-weight: var(--typography-heading-5-font-weight);
+  letter-spacing: var(--typography-heading-5-letter-spacing);
 }
 
-.wrapper & .initials {
+.wrapper .initials {
   text-decoration: none;
   speak-as: spell-out;
 
@@ -138,15 +138,7 @@
   border-bottom: none;
 }
 
-.wrapper &.small .initials {
+.wrapper.small,
+.wrapper.medium .initials {
   margin-bottom: -1px;
 }
-
-.wrapper &.medium {
-  width: var(--avatar-x-y);
-  height: var(--avatar-x-y);
-
-  .initials {
-    margin-bottom: -1px;
-  }
-}
diff --git a/packages/components/src/AvatarGroup/AvatarGroup.module.css b/packages/components/src/AvatarGroup/AvatarGroup.module.css
index 1b94d3f72fa..3351092d137 100644
--- a/packages/components/src/AvatarGroup/AvatarGroup.module.css
+++ b/packages/components/src/AvatarGroup/AvatarGroup.module.css
@@ -1,8 +1,4 @@
 .AvatarGroup {
-  --avatar-sm: 1.25rem;
-  --avatar-md: 3rem;
-  --avatar-lg: 4.5rem;
-
   display: inline-flex;
   list-style: none;
   margin: 0;
@@ -56,8 +52,6 @@
   --avatar-x-y: 4.5rem;
 
   .AvatarCounter {
-    width: var(--avatar-x-y);
-    height: var(--avatar-x-y);
     font-family: var(--typography-heading-3-font-family);
     font-size: var(--typography-heading-3-font-size);
     font-weight: var(--typography-heading-3-font-weight);
diff --git a/packages/components/src/Badge/Badge.module.css b/packages/components/src/Badge/Badge.module.css
index b8fa11b2a36..34a06905b38 100644
--- a/packages/components/src/Badge/Badge.module.css
+++ b/packages/components/src/Badge/Badge.module.css
@@ -1,7 +1,4 @@
 .badge {
-  --badge-duration-timing: (var(--animation-duration-slow) / 2)
-    var(--animation-easing-function-ease-in);
-
   border-radius: var(--spacing-12);
   color: var(--color-purple-800);
   display: inline-block;
@@ -15,6 +12,21 @@
   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);
+  }
 }
 
 .badge.large {
@@ -33,71 +45,48 @@
 }
 
 .active {
-  background-color: var(--color-blue-500);
+  --badge-background-color: var(--color-blue-500);
   color: var(--color-white);
 }
 
-.reversed.active {
-  background-color: var(--color-green-300);
-  color: var(--color-purple-800);
-}
-
 .dark {
-  background-color: rgba(var(--color-purple-700-rgb), 0.1);
+  --badge-background-color: rgba(var(--color-purple-700-rgb), 0.1);
   color: var(--color-purple-800);
 }
 
 .dot {
-  background-color: var(--color-green-300);
+  --badge-background-color: var(--color-green-300);
   padding: var(--spacing-6);
   min-width: unset;
 }
 
 .dot.large {
-  background-color: var(--color-green-300);
   padding: 1.875rem;
   width: unset;
 }
-
-.reversed.dot {
-  background-color: var(--color-green-300);
+.animation {
+  display: inherit;
 }
 
-.reversed.dark {
-  background-color: var(--color-purple-700);
-  color: var(--color-white);
+.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);
 }
 
-.reversed {
-  background-color: rgba(var(--color-white-rgb), 0.1);
-  color: var(--color-white);
+.animation.animationOn .badge {
+  transform: scale3d(1.35, 1.35, 1.35);
 }
 
-.animation {
-  display: inherit;
-
-  .badge {
-    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);
-
-    &.dark {
-      background-color: rgba(var(--color-purple-700-rgb), 0.2);
-    }
-
-    &.active {
-      background-color: var(--color-blue-500);
-      color: var(--color-white);
-    }
+.animation.animationOn .badge.dark {
+  --badge-background-color: rgba(var(--color-purple-700-rgb), 0.2);
+}
 
-    &.dot {
-      background-color: var(--color-green-300);
-    }
-  }
+.animation.animationOn .badge.active {
+  --badge-background-color: var(--color-blue-500);
+  color: var(--color-white);
 }
diff --git a/packages/components/src/BrandMoment/BrandMoment.module.css b/packages/components/src/BrandMoment/BrandMoment.module.css
index 611e4ee9982..2c70a8fb5ca 100644
--- a/packages/components/src/BrandMoment/BrandMoment.module.css
+++ b/packages/components/src/BrandMoment/BrandMoment.module.css
@@ -1,8 +1,3 @@
-/*
-// --------------------------------
-// Body
-// --------------------------------
-*/
 .body {
   width: 100%;
   min-height: 100vh;
@@ -34,11 +29,6 @@
   --brand-moment-background-color: var(--color-red-100);
 }
 
-/*
-// --------------------------------
-// Reusable container
-// --------------------------------
-*/
 .container {
   max-width: var(--layout-content-max-width);
   margin: 0 auto;
@@ -47,48 +37,38 @@
 
 @media (width >= 1080px) {
   .container {
-    padding: 0 3.75rem;
+    padding: 0 var(--spacing-64);
   }
 }
 
 @media (width >= 1366px) {
   .container {
-    padding: 0 5.25rem;
+    padding: 0 var(--spacing-80);
   }
 }
 
-/*
-// --------------------------------
-// Header
-// --------------------------------
-*/
 .header {
   inline-size: 100%;
   margin-block-end: var(--spacing-24);
 }
 
-/*
-// --------------------------------
-// Main
-// --------------------------------
-*/
 .main {
   flex: 1 0 auto;
   display: flex;
   align-items: center;
-  margin-block-end: 3.75rem;
+  margin-block-end: var(--spacing-64);
 }
 
 .mainInner {
   display: grid;
   grid-template-columns: 1fr;
-  gap: var(--spacing-48) 2.25rem;
+  gap: var(--spacing-48) var(--spacing-32);
   align-items: center;
 }
 
 @media (width >= 768px) {
   .mainInner {
-    row-gap: 3.75rem;
+    row-gap: var(--spacing-64);
   }
 }
 
@@ -100,7 +80,7 @@
 
 @media (width >= 1366px) {
   .mainInner {
-    column-gap: 5.25rem;
+    column-gap: var(--spacing-80);
   }
 }
 
@@ -130,11 +110,11 @@
 }
 
 .title {
-  margin-bottom: 2.25rem;
+  margin-bottom: var(--spacing-32);
 }
 
 .textBody {
-  margin-bottom: 2.25rem;
+  margin-bottom: var(--spacing-32);
 }
 
 .secondaryAction {
@@ -162,11 +142,6 @@
   }
 }
 
-/*
-// --------------------------------
-// Footer
-// --------------------------------
-*/
 .footer {
   flex: 0 0 auto;
 }
@@ -177,7 +152,7 @@
   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: 2.25rem;
+  margin-block-end: var(--spacing-32);
 }
 
 .poweredByContainer {
diff --git a/packages/components/src/ButtonGroup/ButtonGroup.module.css b/packages/components/src/ButtonGroup/ButtonGroup.module.css
index bc24f7fa0b6..bf3dcea3d49 100644
--- a/packages/components/src/ButtonGroup/ButtonGroup.module.css
+++ b/packages/components/src/ButtonGroup/ButtonGroup.module.css
@@ -20,7 +20,7 @@
 .child:not(.firstChild, .lastChild) {
   &:focus-visible {
     &::after {
-      inset-inline: var(--focus-ring-offset-inner) var(--focus-ring-offset-inner);
+      inset-inline: var(--focus-ring-offset-inner);
     }
   }
 }

From 3f90b0c081266ee026ec424f3f06282dfd38fdd8 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Mon, 23 Dec 2024 15:06:32 +1100
Subject: [PATCH 19/29] Fix formatting

---
 .../components/src/Avatar/Avatar.module.css   | 24 ++++++++++---------
 .../components/src/Badge/Badge.module.css     | 11 ++++++++-
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
index 4d58c786f5e..c9038c7bd9e 100644
--- a/packages/components/src/Avatar/Avatar.module.css
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -10,7 +10,6 @@
   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);
 }
@@ -18,6 +17,7 @@
 .wrapper.small {
   box-shadow: none;
   border: none;
+
   --avatar-x-y: 1.25rem;
 }
 
@@ -88,6 +88,7 @@
     --avatar-fallback-icon-size: calc(var(--avatar-x-y) * 0.7);
   }
 }
+
 .initials {
   box-sizing: border-box;
   color: var(--color-purple-800);
@@ -100,6 +101,7 @@
   font-weight: var(--typography-heading-1-font-weight);
   letter-spacing: var(--typography-heading-3-letter-spacing);
 }
+
 .initials.longName::before {
   content: none;
 }
@@ -110,6 +112,16 @@
   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;
+}
+
 .wrapper .xlarge .initials,
 .wrapper .xxlarge .initials {
   font-size: var(--typography-heading-1-font-size);
@@ -128,16 +140,6 @@
   letter-spacing: var(--typography-heading-5-letter-spacing);
 }
 
-.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;
-}
-
 .wrapper.small,
 .wrapper.medium .initials {
   margin-bottom: -1px;
diff --git a/packages/components/src/Badge/Badge.module.css b/packages/components/src/Badge/Badge.module.css
index 34a06905b38..973b3845143 100644
--- a/packages/components/src/Badge/Badge.module.css
+++ b/packages/components/src/Badge/Badge.module.css
@@ -15,16 +15,19 @@
 
   .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);
   }
 }
@@ -46,16 +49,19 @@
 
 .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;
 }
@@ -64,6 +70,7 @@
   padding: 1.875rem;
   width: unset;
 }
+
 .animation {
   display: inherit;
 }
@@ -71,6 +78,7 @@
 .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);
@@ -88,5 +96,6 @@
 
 .animation.animationOn .badge.active {
   --badge-background-color: var(--color-blue-500);
+
   color: var(--color-white);
 }

From b91b8a2261d7a99e906421d5aa9496ff94df649c Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Tue, 24 Dec 2024 11:31:57 +1100
Subject: [PATCH 20/29] Simplification

---
 .../components/src/Avatar/Avatar.module.css   | 75 ++++++++-----------
 .../src/AvatarGroup/AvatarGroup.module.css    | 43 ++++++-----
 .../components/src/Badge/Badge.module.css     | 10 +--
 3 files changed, 61 insertions(+), 67 deletions(-)

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
index c9038c7bd9e..50230c040d5 100644
--- a/packages/components/src/Avatar/Avatar.module.css
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -14,49 +14,48 @@
   border: 3px solid var(--color-white);
 }
 
-.wrapper.small {
+.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 */
-.wrapper .personal {
+.personal {
   background: var(--color-orange-100);
 }
 
-.wrapper .otherUser {
+.otherUser {
   background: var(--color-gray-300);
 }
 
-.wrapper .company {
+.company {
   border: 0;
   background: var(--color-white);
   padding: var(--spacing-6);
   border-radius: var(--border-solid-border-radius);
 }
 
-.wrapper .small .company {
+.small .company {
   padding: 0;
 }
 
-.wrapper .medium {
-  --avatar-x-y: 3rem;
-}
-
-.wrapper .large {
-  --avatar-x-y: 4.5rem;
-}
-
-.wrapper .xlarge {
-  --avatar-x-y: 6rem;
-}
-
-.wrapper .xxlarge {
-  --avatar-x-y: 7.75rem;
-}
-
 .avatarImage {
   width: 100%;
   height: 100%;
@@ -75,18 +74,12 @@
 
 .fallbackIcon {
   color: rgba(var(--color-purple-800-rgb), 0.7);
-  font-size: var(--avatar-fallback-icon-size);
-
-  .xlarge &,
-  .xxlarge & {
-    --avatar-fallback-icon-size: calc(var(--avatar-x-y) * 0.8);
-  }
+  font-size: calc(var(--avatar-x-y) * 0.7);
+}
 
-  .small &,
-  .medium &,
-  .large & {
-    --avatar-fallback-icon-size: calc(var(--avatar-x-y) * 0.7);
-  }
+.xlarge .fallbackIcon,
+.xxlarge .fallbackIcon {
+  font-size: calc(var(--avatar-x-y) * 0.8);
 }
 
 .initials {
@@ -122,25 +115,23 @@
   border-bottom: none;
 }
 
-.wrapper .xlarge .initials,
-.wrapper .xxlarge .initials {
+.xlarge .initials,
+.xxlarge .initials {
   font-size: var(--typography-heading-1-font-size);
   letter-spacing: var(--typography-heading-1-letter-spacing);
 }
 
-.wrapper .medium .initials {
+.medium .initials {
   font-size: var(--typography-heading-5-font-size);
-  font-weight: var(--typography-heading-5-font-weight);
-  letter-spacing: var(--typography-heading-5-letter-spacing);
 }
 
-.wrapper .small .initials {
+.small .initials {
   font-size: 0.5rem;
-  font-weight: var(--typography-heading-5-font-weight);
-  letter-spacing: var(--typography-heading-5-letter-spacing);
 }
 
-.wrapper.small,
-.wrapper.medium .initials {
+.small,
+.medium .initials {
   margin-bottom: -1px;
+  font-weight: var(--typography-heading-5-font-weight);
+  letter-spacing: var(--typography-heading-5-letter-spacing);
 }
diff --git a/packages/components/src/AvatarGroup/AvatarGroup.module.css b/packages/components/src/AvatarGroup/AvatarGroup.module.css
index 3351092d137..f294c19da44 100644
--- a/packages/components/src/AvatarGroup/AvatarGroup.module.css
+++ b/packages/components/src/AvatarGroup/AvatarGroup.module.css
@@ -26,35 +26,38 @@
 
 .small {
   --avatar-x-y: 1.25rem;
+}
 
-  .AvatarCounter {
-    box-shadow: none;
-    border: none;
-    font-family: var(--typography-heading-5-font-family);
-    font-size: 0.5rem;
-    font-weight: var(--typography-heading-5-font-weight);
-    letter-spacing: var(--typography-heading-5-letter-spacing);
-  }
+.small .AvatarCounter {
+  box-shadow: none;
+  border: none;
+  font-size: 0.5rem;
+  font-weight: var(--typography-heading-5-font-weight);
+  letter-spacing: var(--typography-heading-5-letter-spacing);
 }
 
 .medium {
   --avatar-x-y: 3rem;
+}
 
-  .AvatarCounter {
-    font-family: var(--typography-heading-5-font-family);
-    font-size: var(--typography-heading-5-font-size);
-    font-weight: var(--typography-heading-5-font-weight);
-    letter-spacing: var(--typography-heading-5-letter-spacing);
-  }
+.medium .AvatarCounter {
+  font-size: var(--typography-heading-5-font-size);
+}
+
+.small,
+.medium .AvatarCounter {
+  font-family: var(--typography-heading-5-font-family);
+  font-weight: var(--typography-heading-5-font-weight);
+  letter-spacing: var(--typography-heading-5-letter-spacing);
 }
 
 .large {
   --avatar-x-y: 4.5rem;
+}
 
-  .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);
-  }
+.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);
 }
diff --git a/packages/components/src/Badge/Badge.module.css b/packages/components/src/Badge/Badge.module.css
index 973b3845143..61a6210c12a 100644
--- a/packages/components/src/Badge/Badge.module.css
+++ b/packages/components/src/Badge/Badge.module.css
@@ -32,7 +32,7 @@
   }
 }
 
-.badge.large {
+.large {
   display: inline-flex;
   justify-content: center;
   border-radius: var(--spacing-48);
@@ -66,7 +66,7 @@
   min-width: unset;
 }
 
-.dot.large {
+.dot .large {
   padding: 1.875rem;
   width: unset;
 }
@@ -86,15 +86,15 @@
   transform: scale3d(1, 1, 1);
 }
 
-.animation.animationOn .badge {
+.animationOn .badge {
   transform: scale3d(1.35, 1.35, 1.35);
 }
 
-.animation.animationOn .badge.dark {
+.animationOn .badge .dark {
   --badge-background-color: rgba(var(--color-purple-700-rgb), 0.2);
 }
 
-.animation.animationOn .badge.active {
+.animationOn .badge .active {
   --badge-background-color: var(--color-blue-500);
 
   color: var(--color-white);

From 36921e6ccf16459be802e31c0b6c72e1f96f5f4a Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Wed, 8 Jan 2025 09:27:38 +1100
Subject: [PATCH 21/29] Badge fix

---
 packages/components/src/Badge/Badge.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/Badge/Badge.module.css b/packages/components/src/Badge/Badge.module.css
index 61a6210c12a..c897d678705 100644
--- a/packages/components/src/Badge/Badge.module.css
+++ b/packages/components/src/Badge/Badge.module.css
@@ -66,7 +66,7 @@
   min-width: unset;
 }
 
-.dot .large {
+.dot.large {
   padding: 1.875rem;
   width: unset;
 }

From 592b797966b3e290b4e5e486d0e7f53d10519be5 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Wed, 8 Jan 2025 09:30:14 +1100
Subject: [PATCH 22/29] Linting

---
 packages/components/src/Avatar/Avatar.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
index 50230c040d5..04e7675fb04 100644
--- a/packages/components/src/Avatar/Avatar.module.css
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -36,6 +36,7 @@
 .xxlarge {
   --avatar-x-y: 7.75rem;
 }
+
 /* Themes */
 .personal {
   background: var(--color-orange-100);

From 736f37bd43d023004f2aaacf18a0142cd823ae3e Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Wed, 8 Jan 2025 14:41:16 +1100
Subject: [PATCH 23/29] test

---
 packages/components/src/Avatar/Avatar.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
index 04e7675fb04..ac8bea17b0b 100644
--- a/packages/components/src/Avatar/Avatar.module.css
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -130,7 +130,7 @@
   font-size: 0.5rem;
 }
 
-.small,
+.small .initials,
 .medium .initials {
   margin-bottom: -1px;
   font-weight: var(--typography-heading-5-font-weight);

From 6fae2decaea6892881b62736058a3b6a948e1481 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Wed, 8 Jan 2025 15:37:10 +1100
Subject: [PATCH 24/29] Fixed specificity

---
 packages/components/src/Avatar/Avatar.module.css           | 4 ++--
 packages/components/src/AvatarGroup/AvatarGroup.module.css | 4 +---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
index ac8bea17b0b..b23b7adabc8 100644
--- a/packages/components/src/Avatar/Avatar.module.css
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -130,8 +130,8 @@
   font-size: 0.5rem;
 }
 
-.small .initials,
-.medium .initials {
+.small.initials,
+.medium.initials {
   margin-bottom: -1px;
   font-weight: var(--typography-heading-5-font-weight);
   letter-spacing: var(--typography-heading-5-letter-spacing);
diff --git a/packages/components/src/AvatarGroup/AvatarGroup.module.css b/packages/components/src/AvatarGroup/AvatarGroup.module.css
index f294c19da44..fb327b9a3f9 100644
--- a/packages/components/src/AvatarGroup/AvatarGroup.module.css
+++ b/packages/components/src/AvatarGroup/AvatarGroup.module.css
@@ -32,8 +32,6 @@
   box-shadow: none;
   border: none;
   font-size: 0.5rem;
-  font-weight: var(--typography-heading-5-font-weight);
-  letter-spacing: var(--typography-heading-5-letter-spacing);
 }
 
 .medium {
@@ -44,7 +42,7 @@
   font-size: var(--typography-heading-5-font-size);
 }
 
-.small,
+.small .AvatarCounter,
 .medium .AvatarCounter {
   font-family: var(--typography-heading-5-font-family);
   font-weight: var(--typography-heading-5-font-weight);

From f6a78f0c7e2904effe54939a64848d007ffcd5cd Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Wed, 8 Jan 2025 16:33:49 +1100
Subject: [PATCH 25/29] Refix specificity

---
 packages/components/src/Avatar/Avatar.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
index b23b7adabc8..ac8bea17b0b 100644
--- a/packages/components/src/Avatar/Avatar.module.css
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -130,8 +130,8 @@
   font-size: 0.5rem;
 }
 
-.small.initials,
-.medium.initials {
+.small .initials,
+.medium .initials {
   margin-bottom: -1px;
   font-weight: var(--typography-heading-5-font-weight);
   letter-spacing: var(--typography-heading-5-letter-spacing);

From 5d6e5f3358e0ec92285f144c7df9085c289ec038 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Thu, 9 Jan 2025 11:10:03 +1100
Subject: [PATCH 26/29] Fix specificity, simplify Avatar

---
 packages/components/src/Avatar/Avatar.module.css | 8 ++++----
 packages/components/src/Avatar/Avatar.tsx        | 7 +++++--
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/Avatar/Avatar.module.css b/packages/components/src/Avatar/Avatar.module.css
index ac8bea17b0b..1b955a437d0 100644
--- a/packages/components/src/Avatar/Avatar.module.css
+++ b/packages/components/src/Avatar/Avatar.module.css
@@ -53,7 +53,7 @@
   border-radius: var(--border-solid-border-radius);
 }
 
-.small .company {
+.small.company {
   padding: 0;
 }
 
@@ -61,10 +61,10 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+}
 
-  .loading & {
-    display: none;
-  }
+.avatarImage.loading {
+  display: none;
 }
 
 .companyAvatarImage {
diff --git a/packages/components/src/Avatar/Avatar.tsx b/packages/components/src/Avatar/Avatar.tsx
index 07dc2d0ff3d..e4ff1164d70 100644
--- a/packages/components/src/Avatar/Avatar.tsx
+++ b/packages/components/src/Avatar/Avatar.tsx
@@ -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}

From f75cd11a76784c2910ced6f15e97993724e40bd7 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Fri, 10 Jan 2025 11:29:57 +1100
Subject: [PATCH 27/29] Fix selectors, buttonGroup use css module

---
 .../components/src/Badge/Badge.module.css     | 25 +++++++++----------
 .../src/ButtonGroup/ButtonGroup.tsx           |  2 +-
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/Badge/Badge.module.css b/packages/components/src/Badge/Badge.module.css
index c897d678705..8a5cab42ba3 100644
--- a/packages/components/src/Badge/Badge.module.css
+++ b/packages/components/src/Badge/Badge.module.css
@@ -12,26 +12,25 @@
   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);
+.reversed {
+  --badge-background-color: rgba(var(--color-white-rgb), 0.1);
 
-    color: var(--color-white);
-  }
+  color: var(--color-white);
+}
 
-  .reversed.active {
-    --badge-background-color: var(--color-green-300);
+.reversed.active {
+  --badge-background-color: var(--color-green-300);
 
-    color: var(--color-purple-800);
-  }
+  color: var(--color-purple-800);
+}
 
-  .reversed.dark {
-    --badge-background-color: var(--color-purple-700);
+.reversed.dark {
+  --badge-background-color: var(--color-purple-700);
 
-    color: var(--color-white);
-  }
+  color: var(--color-white);
 }
-
 .large {
   display: inline-flex;
   justify-content: center;
diff --git a/packages/components/src/ButtonGroup/ButtonGroup.tsx b/packages/components/src/ButtonGroup/ButtonGroup.tsx
index 5e4e21802df..3945288f50e 100644
--- a/packages/components/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/components/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

From 6bc6c8fe6b283886587fc00a59212293d0fdaea1 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Fri, 10 Jan 2025 11:32:46 +1100
Subject: [PATCH 28/29] linting

---
 packages/components/src/Badge/Badge.module.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/Badge/Badge.module.css b/packages/components/src/Badge/Badge.module.css
index 8a5cab42ba3..be9b4f7e66d 100644
--- a/packages/components/src/Badge/Badge.module.css
+++ b/packages/components/src/Badge/Badge.module.css
@@ -31,6 +31,7 @@
 
   color: var(--color-white);
 }
+
 .large {
   display: inline-flex;
   justify-content: center;

From 56d9708337eb6ca38dc56220487e168ead60ae61 Mon Sep 17 00:00:00 2001
From: Christian Moore <christian.moore@cultureamp.com>
Date: Mon, 13 Jan 2025 14:15:28 +1100
Subject: [PATCH 29/29] PR fixes

---
 .../components/src/AvatarGroup/AvatarGroup.module.css  | 10 +++-------
 packages/components/src/Badge/Badge.module.css         |  4 ++--
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/packages/components/src/AvatarGroup/AvatarGroup.module.css b/packages/components/src/AvatarGroup/AvatarGroup.module.css
index fb327b9a3f9..ad00235f951 100644
--- a/packages/components/src/AvatarGroup/AvatarGroup.module.css
+++ b/packages/components/src/AvatarGroup/AvatarGroup.module.css
@@ -18,6 +18,9 @@
   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 {
@@ -42,13 +45,6 @@
   font-size: var(--typography-heading-5-font-size);
 }
 
-.small .AvatarCounter,
-.medium .AvatarCounter {
-  font-family: var(--typography-heading-5-font-family);
-  font-weight: var(--typography-heading-5-font-weight);
-  letter-spacing: var(--typography-heading-5-letter-spacing);
-}
-
 .large {
   --avatar-x-y: 4.5rem;
 }
diff --git a/packages/components/src/Badge/Badge.module.css b/packages/components/src/Badge/Badge.module.css
index be9b4f7e66d..a029f3513f6 100644
--- a/packages/components/src/Badge/Badge.module.css
+++ b/packages/components/src/Badge/Badge.module.css
@@ -90,11 +90,11 @@
   transform: scale3d(1.35, 1.35, 1.35);
 }
 
-.animationOn .badge .dark {
+.animationOn .badge.dark {
   --badge-background-color: rgba(var(--color-purple-700-rgb), 0.2);
 }
 
-.animationOn .badge .active {
+.animationOn .badge.active {
   --badge-background-color: var(--color-blue-500);
 
   color: var(--color-white);