Use new semantic tokens for avatar colors

Rather than hard-coding the avatar colors to base tokens
element-hq · Feb 1, 2024 · b0abdc3 · b0abdc3
1 parent d15fcf9
commit b0abdc3
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 36 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/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/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);

diff --git a/yarn.lock b/yarn.lock
@@ -3502,9 +3502,9 @@
   integrity sha512-FbtmBWCcSa2J4zL781Zf1p5YUBXQomPEcep9QZCfRfQgTxz3pJWiDFLebohZ9fFntX5ibzOkSsrJ0TEew8cAog==
 
 "@types/q@^1.5.1":
-  version "1.5.6"
-  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.6.tgz#a6edffe8283910e46dc7a573621f928e6b47fa56"
-  integrity sha512-IKjZ8RjTSwD4/YG+2gtj7BPFRB/lNbWKTiSj3M7U/TD2B7HfYCxvp2Zz6xA2WIY7pAuL1QOUPw8gQRbUrrq4fQ==
+  version "1.5.8"
+  resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.8.tgz#95f6c6a08f2ad868ba230ead1d2d7f7be3db3837"
+  integrity sha512-hroOstUScF6zhIi+5+x0dzqrHA1EJi+Irri6b1fxolMTqqHIV/Cg77EtnQcZqZCu8hR3mX2BzIxN4/GzI68Kfw==
 
 "@types/qs@*", "@types/qs@^6.9.5":
   version "6.9.8"
@@ -3721,10 +3721,10 @@
     "@typescript-eslint/types" "6.7.3"
     eslint-visitor-keys "^3.4.1"
 
-"@vector-im/compound-design-tokens@0.0.7":
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-0.0.7.tgz#b0716dd4782dd95900491e45b003b58f93748024"
-  integrity sha512-RCQc6qr+s8cp4xKbNi/I3OL43uPCH+N4L9vYf0r+qwRy4WCKdI4QL0TBTV4bOo8hF49z8e+BgU5ZIu5TVQXNMQ==
+"@vector-im/compound-design-tokens@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-1.0.0.tgz#4fe7744bbe0bd093b064d42ca8bb475862bb2ce7"
+  integrity sha512-/hKAxE/WsmnNZamlSmLoFeAhNDhRpFdJYuY8NrPLaS/dKS/QRnty6UYzs9yWOVNFeiBfkNsrb7wYIFMrYWSRJw==
   dependencies:
     svg2vectordrawable "^2.9.1"
-Original file line number
+Diff line change
@@ Expand Up @@
         &nbsp;
         <AvatarComponent {...args} id="6" />
         &nbsp;
-        <AvatarComponent {...args} id="7" />
-        &nbsp;
-        <AvatarComponent {...args} id="8" />
-        &nbsp;
       </>
     );
@@ Expand Down @@