Merge pull request #146 from element-hq/semantic-avatars

Use new semantic tokens for avatar colors
element-hq · Feb 2, 2024 · aee9da5 · aee9da5
2 parents d15fcf9 + c08e335
commit aee9da5
Show file tree

Hide file tree

Showing 25 changed files with 178 additions and 317 deletions.
diff --git a/package.json b/package.json
@@ -71,7 +71,7 @@
     "@types/react": "^18.2.21",
     "@typescript-eslint/eslint-plugin": "^6.7.0",
     "@typescript-eslint/parser": "^6.7.0",
-    "@vector-im/compound-design-tokens": "0.0.7",
+    "@vector-im/compound-design-tokens": "^1.0.0",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.34.4",
     "browserslist-to-esbuild": "^1.2.0",
@@ -116,7 +116,7 @@
     "@fontsource/inter": "^5",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@vector-im/compound-design-tokens": ">=0.0.6 <0.1.0",
+    "@vector-im/compound-design-tokens": ">=1.0.0 <2.0.0",
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },

diff --git a/playwright/visual.test.ts-snapshots/Avatar-All-Avatars-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Avatar-All-Avatars-1-chromium-linux.png
diff --git a/...ht/visual.test.ts-snapshots/Avatar-Large-No-Image-Fallback-1-chromium-linux.png b/...ht/visual.test.ts-snapshots/Avatar-Large-No-Image-Fallback-1-chromium-linux.png
diff --git a/playwright/visual.test.ts-snapshots/Avatar-No-Image-Fallback-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Avatar-No-Image-Fallback-1-chromium-linux.png
diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -9,24 +9,18 @@ exports[`Alert > renders actions 1`] = `
     <svg
       aria-hidden="true"
       class="_icon_6cfd7b"
-      fill="none"
+      fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M11.2875 7.2875C11.4792 7.09583 11.7167 7 12 7C12.2833 7 12.5208 7.09583 12.7125 7.2875C12.9042 7.47917 13 7.71667 13 8C13 8.28333 12.9042 8.52083 12.7125 8.7125C12.5208 8.90417 12.2833 9 12 9C11.7167 9 11.4792 8.90417 11.2875 8.7125C11.0958 8.52083 11 8.28333 11 8C11 7.71667 11.0958 7.47917 11.2875 7.2875Z"
-        fill="currentColor"
-      />
-      <path
-        d="M11.2875 11.2875C11.4792 11.0958 11.7167 11 12 11C12.2833 11 12.5208 11.0958 12.7125 11.2875C12.9042 11.4792 13 11.7167 13 12V16C13 16.2833 12.9042 16.5208 12.7125 16.7125C12.5208 16.9042 12.2833 17 12 17C11.7167 17 11.4792 16.9042 11.2875 16.7125C11.0958 16.5208 11 16.2833 11 16V12C11 11.7167 11.0958 11.4792 11.2875 11.2875Z"
-        fill="currentColor"
+        d="M11.287 7.287A.968.968 0 0 1 12 7c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 12 9a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 8c0-.283.096-.52.287-.713Zm0 4A.968.968 0 0 1 12 11c.283 0 .52.096.713.287.191.192.287.43.287.713v4a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 17a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 16v-4c0-.283.096-.52.287-.713Z"
       />
       <path
         clip-rule="evenodd"
-        d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z"
-        fill="currentColor"
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z"
         fill-rule="evenodd"
       />
     </svg>
@@ -83,15 +77,14 @@ exports[`Alert > renders actions 1`] = `
       >
         <svg
           class="cpd-icon"
-          fill="none"
+          fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M6.29289 6.29289C6.68342 5.90237 7.31658 5.90237 7.70711 6.29289L12 10.5858L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L13.4142 12L17.7071 16.2929C18.0976 16.6834 18.0976 17.3166 17.7071 17.7071C17.3166 18.0976 16.6834 18.0976 16.2929 17.7071L12 13.4142L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L10.5858 12L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289Z"
-            fill="currentColor"
+            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
           />
         </svg>
       </div>
@@ -109,15 +102,14 @@ exports[`Alert > renders critical 1`] = `
     <svg
       aria-hidden="true"
       class="_icon_6cfd7b"
-      fill="none"
+      fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M12 17C12.2833 17 12.5208 16.9042 12.7125 16.7125C12.9042 16.5208 13 16.2833 13 16C13 15.7167 12.9042 15.4792 12.7125 15.2875C12.5208 15.0958 12.2833 15 12 15C11.7167 15 11.4792 15.0958 11.2875 15.2875C11.0958 15.4792 11 15.7167 11 16C11 16.2833 11.0958 16.5208 11.2875 16.7125C11.4792 16.9042 11.7167 17 12 17ZM12 13C12.2833 13 12.5208 12.9042 12.7125 12.7125C12.9042 12.5208 13 12.2833 13 12V8C13 7.71667 12.9042 7.47917 12.7125 7.2875C12.5208 7.09583 12.2833 7 12 7C11.7167 7 11.4792 7.09583 11.2875 7.2875C11.0958 7.47917 11 7.71667 11 8V12C11 12.2833 11.0958 12.5208 11.2875 12.7125C11.4792 12.9042 11.7167 13 12 13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22Z"
-        fill="currentColor"
+        d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
       />
     </svg>
     <div
@@ -151,15 +143,14 @@ exports[`Alert > renders critical 1`] = `
       >
         <svg
           class="cpd-icon"
-          fill="none"
+          fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M6.29289 6.29289C6.68342 5.90237 7.31658 5.90237 7.70711 6.29289L12 10.5858L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L13.4142 12L17.7071 16.2929C18.0976 16.6834 18.0976 17.3166 17.7071 17.7071C17.3166 18.0976 16.6834 18.0976 16.2929 17.7071L12 13.4142L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L10.5858 12L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289Z"
-            fill="currentColor"
+            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
           />
         </svg>
       </div>
@@ -177,24 +168,18 @@ exports[`Alert > renders info 1`] = `
     <svg
       aria-hidden="true"
       class="_icon_6cfd7b"
-      fill="none"
+      fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M11.2875 7.2875C11.4792 7.09583 11.7167 7 12 7C12.2833 7 12.5208 7.09583 12.7125 7.2875C12.9042 7.47917 13 7.71667 13 8C13 8.28333 12.9042 8.52083 12.7125 8.7125C12.5208 8.90417 12.2833 9 12 9C11.7167 9 11.4792 8.90417 11.2875 8.7125C11.0958 8.52083 11 8.28333 11 8C11 7.71667 11.0958 7.47917 11.2875 7.2875Z"
-        fill="currentColor"
-      />
-      <path
-        d="M11.2875 11.2875C11.4792 11.0958 11.7167 11 12 11C12.2833 11 12.5208 11.0958 12.7125 11.2875C12.9042 11.4792 13 11.7167 13 12V16C13 16.2833 12.9042 16.5208 12.7125 16.7125C12.5208 16.9042 12.2833 17 12 17C11.7167 17 11.4792 16.9042 11.2875 16.7125C11.0958 16.5208 11 16.2833 11 16V12C11 11.7167 11.0958 11.4792 11.2875 11.2875Z"
-        fill="currentColor"
+        d="M11.287 7.287A.968.968 0 0 1 12 7c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 12 9a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 8c0-.283.096-.52.287-.713Zm0 4A.968.968 0 0 1 12 11c.283 0 .52.096.713.287.191.192.287.43.287.713v4a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 17a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 16v-4c0-.283.096-.52.287-.713Z"
       />
       <path
         clip-rule="evenodd"
-        d="M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12Z"
-        fill="currentColor"
+        d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z"
         fill-rule="evenodd"
       />
     </svg>
@@ -229,15 +214,14 @@ exports[`Alert > renders info 1`] = `
       >
         <svg
           class="cpd-icon"
-          fill="none"
+          fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M6.29289 6.29289C6.68342 5.90237 7.31658 5.90237 7.70711 6.29289L12 10.5858L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L13.4142 12L17.7071 16.2929C18.0976 16.6834 18.0976 17.3166 17.7071 17.7071C17.3166 18.0976 16.6834 18.0976 16.2929 17.7071L12 13.4142L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L10.5858 12L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289Z"
-            fill="currentColor"
+            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
           />
         </svg>
       </div>
@@ -255,15 +239,14 @@ exports[`Alert > renders success 1`] = `
     <svg
       aria-hidden="true"
       class="_icon_6cfd7b"
-      fill="none"
+      fill="currentColor"
       height="24"
       viewBox="0 0 24 24"
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M10.6 13.8L8.45 11.65C8.26667 11.4667 8.03333 11.375 7.75 11.375C7.46667 11.375 7.23333 11.4667 7.05 11.65C6.86667 11.8333 6.775 12.0667 6.775 12.35C6.775 12.6333 6.86667 12.8667 7.05 13.05L9.9 15.9C10.1 16.1 10.3333 16.2 10.6 16.2C10.8667 16.2 11.1 16.1 11.3 15.9L16.95 10.25C17.1333 10.0667 17.225 9.83333 17.225 9.55C17.225 9.26667 17.1333 9.03333 16.95 8.85C16.7667 8.66667 16.5333 8.575 16.25 8.575C15.9667 8.575 15.7333 8.66667 15.55 8.85L10.6 13.8ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z"
-        fill="currentColor"
+        d="m10.6 13.8-2.15-2.15a.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275.948.948 0 0 0-.275.7.95.95 0 0 0 .275.7L9.9 15.9c.2.2.433.3.7.3.267 0 .5-.1.7-.3l5.65-5.65a.948.948 0 0 0 .275-.7.948.948 0 0 0-.275-.7.948.948 0 0 0-.7-.275.948.948 0 0 0-.7.275L10.6 13.8ZM12 22a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20Z"
       />
     </svg>
     <div
@@ -297,15 +280,14 @@ exports[`Alert > renders success 1`] = `
       >
         <svg
           class="cpd-icon"
-          fill="none"
+          fill="currentColor"
           height="1em"
           viewBox="0 0 24 24"
           width="1em"
           xmlns="http://www.w3.org/2000/svg"
         >
           <path
-            d="M6.29289 6.29289C6.68342 5.90237 7.31658 5.90237 7.70711 6.29289L12 10.5858L16.2929 6.29289C16.6834 5.90237 17.3166 5.90237 17.7071 6.29289C18.0976 6.68342 18.0976 7.31658 17.7071 7.70711L13.4142 12L17.7071 16.2929C18.0976 16.6834 18.0976 17.3166 17.7071 17.7071C17.3166 18.0976 16.6834 18.0976 16.2929 17.7071L12 13.4142L7.70711 17.7071C7.31658 18.0976 6.68342 18.0976 6.29289 17.7071C5.90237 17.3166 5.90237 16.6834 6.29289 16.2929L10.5858 12L6.29289 7.70711C5.90237 7.31658 5.90237 6.68342 6.29289 6.29289Z"
-            fill="currentColor"
+            d="M6.293 6.293a1 1 0 0 1 1.414 0L12 10.586l4.293-4.293a1 1 0 1 1 1.414 1.414L13.414 12l4.293 4.293a1 1 0 0 1-1.414 1.414L12 13.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L10.586 12 6.293 7.707a1 1 0 0 1 0-1.414Z"
           />
         </svg>
       </div>

diff --git a/src/components/Avatar/Avatar.module.css b/src/components/Avatar/Avatar.module.css
@@ -66,43 +66,33 @@ button.avatar:disabled {
 }
 
 .avatar[data-color] {
-  --cpd-avatar-bg: var(--cpd-color-blue-300);
-  --cpd-avatar-color: var(--cpd-color-blue-1200);
+  --cpd-avatar-bg: var(--cpd-color-bg-decorative-1);
+  --cpd-avatar-color: var(--cpd-color-text-decorative-1);
 }
 
 .avatar[data-color="2"] {
-  --cpd-avatar-bg: var(--cpd-color-fuchsia-300);
-  --cpd-avatar-color: var(--cpd-color-fuchsia-1200);
+  --cpd-avatar-bg: var(--cpd-color-bg-decorative-2);
+  --cpd-avatar-color: var(--cpd-color-text-decorative-2);
 }
 
 .avatar[data-color="3"] {
-  --cpd-avatar-bg: var(--cpd-color-green-300);
-  --cpd-avatar-color: var(--cpd-color-green-1200);
+  --cpd-avatar-bg: var(--cpd-color-bg-decorative-3);
+  --cpd-avatar-color: var(--cpd-color-text-decorative-3);
 }
 
 .avatar[data-color="4"] {
-  --cpd-avatar-bg: var(--cpd-color-pink-300);
-  --cpd-avatar-color: var(--cpd-color-pink-1200);
+  --cpd-avatar-bg: var(--cpd-color-bg-decorative-4);
+  --cpd-avatar-color: var(--cpd-color-text-decorative-4);
 }
 
 .avatar[data-color="5"] {
-  --cpd-avatar-bg: var(--cpd-color-orange-300);
-  --cpd-avatar-color: var(--cpd-color-orange-1200);
+  --cpd-avatar-bg: var(--cpd-color-bg-decorative-5);
+  --cpd-avatar-color: var(--cpd-color-text-decorative-5);
 }
 
 .avatar[data-color="6"] {
-  --cpd-avatar-bg: var(--cpd-color-cyan-300);
-  --cpd-avatar-color: var(--cpd-color-cyan-1200);
-}
-
-.avatar[data-color="7"] {
-  --cpd-avatar-bg: var(--cpd-color-purple-300);
-  --cpd-avatar-color: var(--cpd-color-purple-1200);
-}
-
-.avatar[data-color="8"] {
-  --cpd-avatar-bg: var(--cpd-color-lime-300);
-  --cpd-avatar-color: var(--cpd-color-lime-1200);
+  --cpd-avatar-bg: var(--cpd-color-bg-decorative-6);
+  --cpd-avatar-color: var(--cpd-color-text-decorative-6);
 }
 
 .avatar[data-type="round"] {

diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
@@ -78,10 +78,6 @@ const ImageLessCollection: StoryFn<typeof AvatarComponent> = (args) => (
     &nbsp;
     <AvatarComponent {...args} id="6" />
     &nbsp;
-    <AvatarComponent {...args} id="7" />
-    &nbsp;
-    <AvatarComponent {...args} id="8" />
-    &nbsp;
   </>
 );
 

diff --git a/src/components/Avatar/Avatar.test.tsx b/src/components/Avatar/Avatar.test.tsx
@@ -60,12 +60,12 @@ describe("Avatar", () => {
   });
 
   it.each([
-    ["@bob:example.org", "8"],
+    ["@bob:example.org", "4"],
     ["@alice:example.org", "3"],
     ["@charlie:example.org", "5"],
-    ["@dan:example.org", "8"],
-    ["@elena:example.org", "2"],
-    ["@fanny:example.org", "1"],
+    ["@dan:example.org", "4"],
+    ["@elena:example.org", "4"],
+    ["@fanny:example.org", "3"],
   ])(
     "has a deterministic color based on the id passed to it, %s",
     (id, colorNumber) => {

diff --git a/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap b/src/components/Avatar/__snapshots__/Avatar.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`Avatar > renders the image-less avatar 1`] = `
   <span
     aria-label="@bob:example.org"
     class="_avatar_de1988 _avatar-imageless_de1988"
-    data-color="8"
+    data-color="4"
     data-type="round"
     role="img"
   >

diff --git a/src/components/Avatar/__snapshots__/AvatarStack.test.tsx.snap b/src/components/Avatar/__snapshots__/AvatarStack.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`AvatarStack > renders 1`] = `
     <span
       aria-label="@bob:example.org"
       class="_avatar_de1988 _avatar-imageless_de1988"
-      data-color="8"
+      data-color="4"
       data-type="round"
       role="img"
       style="--cpd-avatar-size: 32px;"

diff --git a/src/components/Avatar/useIdColorHash.ts b/src/components/Avatar/useIdColorHash.ts
@@ -22,7 +22,7 @@ limitations under the License.
  */
 export function useIdColorHash(id: string): number {
   const MIN = 1;
-  const MAX = 8;
+  const MAX = 6;
   // Sum up the values of all the char codes in the string
   const charCodeSum = id.split("").reduce((sum, char) => {
     return sum + char.charCodeAt(0);