Make sure all the CSS variables used exist (& upgrade the design toke…

…ns) (#68) * Add stylelint rules to ensure we're not using undefined variables * Fix undefined variables usage & bump design tokens * Fix the IconButton height on Safari & update the test snapshots * Fix the Button icon class
element-hq · Sep 8, 2023 · 3fa6216 · 3fa6216
1 parent 492e8ba
commit 3fa6216
Show file tree

Hide file tree

Showing 21 changed files with 107 additions and 87 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -1,4 +1,14 @@
 {
   "extends": "stylelint-config-standard",
+  "plugins": ["stylelint-value-no-unknown-custom-properties"],
+  "rules": {
+    "csstools/value-no-unknown-custom-properties": [true, {
+      "importFrom": [
+        "./src/styles/global.css",
+        "./node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-common.css",
+        "./node_modules/@vector-im/compound-design-tokens/assets/web/css/cpd-light-mq.css"
+      ]
+    }]
+  },
   "ignoreFiles": ["dist/**/*.css"]
 }
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "prettier": "npx prettier --write .",
     "lint": "yarn lint:js && yarn lint:styles",
     "lint:js": "eslint --max-warnings=0 .",
-    "lint:styles": "npx stylelint src/**/*.css",
+    "lint:styles": "npx stylelint 'src/**/*.css'",
     "test": "vitest",
     "prepercy": "node scripts/disableStoryStore7.js && yarn build-storybook",
     "percy": "percy storybook ./storybook-static",
@@ -71,7 +71,7 @@
     "@types/testing-library__jest-dom": "^5.14.9",
     "@typescript-eslint/eslint-plugin": "^6.2.1",
     "@typescript-eslint/parser": "^6.2.1",
-    "@vector-im/compound-design-tokens": "0.0.3",
+    "@vector-im/compound-design-tokens": "0.0.5",
     "@vitejs/plugin-react": "^4.0.4",
     "@vitest/coverage-v8": "^0.33.0",
     "browserslist-to-esbuild": "^1.2.0",
@@ -89,6 +89,7 @@
     "storybook": "^7.0.27",
     "stylelint": "^15.10.2",
     "stylelint-config-standard": "^34.0.0",
+    "stylelint-value-no-unknown-custom-properties": "^4.0.0",
     "typescript": "^5.1.6",
     "vite": "^4.4.8",
     "vite-plugin-dts": "^3.4.0",
@@ -106,7 +107,7 @@
     "@fontsource/inter": "^5",
     "@types/react": "*",
     "@types/react-dom": "*",
-    "@vector-im/compound-design-tokens": "^0.0.3",
+    "@vector-im/compound-design-tokens": "^0.0.5",
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },

diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap
@@ -9,14 +9,14 @@ exports[`Alert > renders 1`] = `
     <svg
       aria-hidden="true"
       class="_icon_6cfd7b"
-      fill="currentColor"
+      fill="none"
       height="24"
       viewBox="0 0 24 24"
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        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 22Z"
+        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 22Z"
         fill="currentColor"
       />
     </svg>

diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css
@@ -17,7 +17,7 @@ limitations under the License.
 .button {
   border-radius: var(--cpd-radius-pill-effect);
   cursor: pointer;
-  -webkit-appeareance: none;
+  appearance: none;
   display: flex;
   align-items: center;
   gap: var(--cpd-space-2x);
@@ -38,7 +38,7 @@ limitations under the License.
   min-height: var(--cpd-space-12x);
 }
 
-.button[data-size="lg"].hasIcon {
+.button[data-size="lg"].has-icon {
   padding-inline-start: var(--cpd-space-9x);
 }
 
@@ -48,7 +48,7 @@ limitations under the License.
   min-height: var(--cpd-space-9x);
 }
 
-.button[data-size="sm"].hasIcon {
+.button[data-size="sm"].has-icon {
   padding-inline-start: var(--cpd-space-5x);
 }
 

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -18,7 +18,7 @@ import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { Button as ButtonComponent } from "./Button";
-import VisibilityVisibleIcon from "@vector-im/compound-design-tokens/icons/visibility-visible.svg";
+import VisibilityOnIcon from "@vector-im/compound-design-tokens/icons/visibility-on.svg";
 
 export default {
   title: "Button",
@@ -35,7 +35,7 @@ export default {
 const Template: StoryFn<typeof ButtonComponent> = (args) => (
   <div style={{ display: "flex", gap: 8 }}>
     <ButtonComponent {...args}>Click me!</ButtonComponent>
-    <ButtonComponent Icon={VisibilityVisibleIcon} {...args}>
+    <ButtonComponent Icon={VisibilityOnIcon} {...args}>
       Click me!
     </ButtonComponent>
   </div>

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -57,7 +57,7 @@ export const Button = <C extends React.ElementType = "button">({
 }: PropsWithChildren<ButtonProps<C>>): React.ReactElement => {
   const Component = as || "button";
   const classes = classNames(styles.button, className, {
-    [styles.hasIcon]: Icon,
+    [styles["has-icon"]]: Icon,
   });
   const iconSize = size === "lg" ? 24 : 20;
 

diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Button > accepts an icon 1`] = `
 <DocumentFragment>
   <button
-    class="_button_2a1efe _hasIcon_2a1efe"
+    class="_button_2a1efe _has-icon_2a1efe"
     data-kind="primary"
     data-size="lg"
     role="button"
@@ -12,14 +12,14 @@ exports[`Button > accepts an icon 1`] = `
     <svg
       aria-hidden="true"
       class="_icon_2a1efe"
-      fill="currentColor"
+      fill="none"
       height="24"
       viewBox="0 0 24 24"
       width="24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="m2.975 16.3-1.45 4.95a.936.936 0 0 0 .25 1 .936.936 0 0 0 1 .25l4.95-1.45a10.23 10.23 0 0 0 2.1.712c.717.159 1.45.238 2.2.238a9.738 9.738 0 0 0 3.9-.788 10.098 10.098 0 0 0 3.175-2.137c.9-.9 1.612-1.958 2.137-3.175a9.738 9.738 0 0 0 .788-3.9 9.738 9.738 0 0 0-.787-3.9A10.099 10.099 0 0 0 19.1 4.925c-.9-.9-1.958-1.612-3.175-2.137a9.738 9.738 0 0 0-3.9-.788 9.738 9.738 0 0 0-3.9.788A10.099 10.099 0 0 0 4.95 4.925c-.9.9-1.613 1.958-2.138 3.175a9.738 9.738 0 0 0-.787 3.9 10.179 10.179 0 0 0 .95 4.3Z"
+        d="M1.50002 21.25L2.95002 16.3C2.63335 15.6167 2.39585 14.9167 2.23752 14.2C2.07918 13.4833 2.00002 12.75 2.00002 12C2.00002 10.6167 2.26252 9.31667 2.78752 8.1C3.31252 6.88333 4.02502 5.825 4.92502 4.925C5.82502 4.025 6.88335 3.3125 8.10002 2.7875C9.31668 2.2625 10.6167 2 12 2C13.3833 2 14.6834 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.6834 21.7375 13.3833 22 12 22C11.25 22 10.5167 21.9208 9.80002 21.7625C9.08335 21.6042 8.38335 21.3667 7.70002 21.05L2.75002 22.5C2.36668 22.6167 2.03335 22.5333 1.75002 22.25C1.46668 21.9667 1.38335 21.6333 1.50002 21.25ZM3.95002 20.05L7.15002 19.1C7.23335 19.0667 7.32502 19.0458 7.42502 19.0375C7.52502 19.0292 7.61668 19.025 7.70002 19.025C7.85002 19.025 7.99585 19.0375 8.13752 19.0625C8.27918 19.0875 8.41668 19.1333 8.55002 19.2C9.08335 19.4667 9.64168 19.6667 10.225 19.8C10.8083 19.9333 11.4 20 12 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.76668 4 7.87502 4.775 6.32502 6.325C4.77502 7.875 4.00002 9.76667 4.00002 12C4.00002 12.6 4.06668 13.1917 4.20002 13.775C4.33335 14.3583 4.53335 14.9167 4.80002 15.45C4.91668 15.6667 4.97918 15.8958 4.98752 16.1375C4.99585 16.3792 4.96668 16.6167 4.90002 16.85L3.95002 20.05Z"
         fill="currentColor"
       />
     </svg>

diff --git a/src/components/Checkbox/Checkbox.module.css b/src/components/Checkbox/Checkbox.module.css
@@ -95,8 +95,8 @@ limitations under the License.
 
 .checkbox[data-kind] [type="checkbox"][disabled] + .checkbox-ui {
   border-color: var(--cpd-color-border-disabled);
-  background: var(--cpd-border-disabled);
-  color: var(--color-text-disabled);
+  background: var(--cpd-color-bg-canvas-disabled);
+  color: var(--cpd-color-text-disabled);
 }
 
 .checkbox[data-kind] [type="checkbox"][disabled]:checked + .checkbox-ui {

diff --git a/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -15,14 +15,14 @@ exports[`Checkbox > renders 1`] = `
       <svg
         aria-hidden="true"
         class="_checkbox-check_399c3c"
-        fill="currentColor"
+        fill="none"
         height="1em"
         viewBox="0 0 24 24"
         width="1em"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.878.878 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.713-.275.291 0 .529.092.712.275.183.183.275.42.275.713 0 .291-.092.529-.275.712l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
+          d="M9.55003 17.575C9.4167 17.575 9.2917 17.5542 9.17503 17.5125C9.05836 17.4709 8.95003 17.4 8.85003 17.3L4.55003 13C4.3667 12.8167 4.2792 12.5792 4.28753 12.2875C4.29586 11.9959 4.3917 11.7584 4.57503 11.575C4.75836 11.3917 4.9917 11.3 5.27503 11.3C5.55836 11.3 5.7917 11.3917 5.97503 11.575L9.55003 15.15L18.025 6.67502C18.2084 6.49169 18.4459 6.40002 18.7375 6.40002C19.0292 6.40002 19.2667 6.49169 19.45 6.67502C19.6334 6.85836 19.725 7.09586 19.725 7.38752C19.725 7.67919 19.6334 7.91669 19.45 8.10002L10.25 17.3C10.15 17.4 10.0417 17.4709 9.92503 17.5125C9.80836 17.5542 9.68336 17.575 9.55003 17.575Z"
           fill="currentColor"
         />
       </svg>

diff --git a/src/components/Form/Controls/Password/Password.tsx b/src/components/Form/Controls/Password/Password.tsx
@@ -18,19 +18,19 @@ import React, { forwardRef, PropsWithChildren, useReducer } from "react";
 import { ActionControl } from "../../../ActionControl/ActionControl";
 import { Control } from "../../Control";
 
-import VisibilityVisible from "@vector-im/compound-design-tokens/icons/visibility-visible.svg";
-import VisibilityInvisible from "@vector-im/compound-design-tokens/icons/visibility-invisible.svg";
+import VisibilityOn from "@vector-im/compound-design-tokens/icons/visibility-on.svg";
+import VisibilityOff from "@vector-im/compound-design-tokens/icons/visibility-off.svg";
 
 const showState = {
   isHidden: true,
-  icon: VisibilityVisible,
+  icon: VisibilityOn,
   label: "Show",
   type: "password",
 };
 
 const hideState = {
   isHidden: false,
-  icon: VisibilityInvisible,
+  icon: VisibilityOff,
   label: "Hide",
   type: "text",
 };

diff --git a/src/components/Form/form.module.css b/src/components/Form/form.module.css
@@ -47,7 +47,7 @@ limitations under the License.
 }
 
 .label[data-invalid] {
-  color: var(--cpd-color-text-action-critical);
+  color: var(--cpd-color-text-critical-primary);
 }
 
 /* Currently working everywhere but on Firefox (only behind a labs flag)
@@ -63,7 +63,7 @@ https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility */
 
 .control {
   border: 1px solid var(--cpd-color-border-interactive-primary);
-  background: var(--cpd-color-bg-canvas);
+  background: var(--cpd-color-bg-canvas-default);
   border-radius: 0.5rem;
   padding: var(--cpd-space-3x) var(--cpd-space-4x);
   box-sizing: border-box;
@@ -87,7 +87,7 @@ input:focus ~ .control {
 
 .control[data-invalid],
 input[data-invalid] ~ .control {
-  border-color: var(--cpd-color-text-action-critical);
+  border-color: var(--cpd-color-text-critical-primary);
 }
 
 .control:disabled,

diff --git a/src/components/IconButton/IconButton.module.css b/src/components/IconButton/IconButton.module.css
@@ -20,6 +20,7 @@ limitations under the License.
   );
 
   width: var(--cpd-icon-button-size);
+  height: var(--cpd-icon-button-size);
   padding: calc(var(--cpd-icon-button-size) * 0.125);
   aspect-ratio: 1 / 1;
   color: var(--cpd-color-icon-tertiary);

diff --git a/src/components/IconButton/IconButton.stories.tsx b/src/components/IconButton/IconButton.stories.tsx
@@ -19,7 +19,7 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { IconButton as IconButtonComponent } from "./IconButton";
 
-import UserIcon from "@vector-im/compound-design-tokens/icons/user.svg";
+import UserIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg";
 
 export default {
   title: "IconButton",

diff --git a/src/components/IconButton/IconButton.test.tsx b/src/components/IconButton/IconButton.test.tsx
@@ -20,7 +20,7 @@ import React from "react";
 
 import { IconButton } from "./IconButton";
 
-import UserIcon from "@vector-im/compound-design-tokens/icons/user.svg";
+import UserIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg";
 
 describe("IconButton", () => {
   it("renders", () => {

diff --git a/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap b/src/components/IconButton/__snapshots__/IconButton.test.tsx.snap
@@ -8,17 +8,23 @@ exports[`IconButton > renders 1`] = `
   >
     <svg
       class="cpd-icon"
-      fill="currentColor"
+      fill="none"
       height="1em"
       viewBox="0 0 24 24"
       width="1em"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="m5.84 17.108.008.01.01-.008a10.422 10.422 0 0 1 2.846-1.536A9.725 9.725 0 0 1 12 15.012c1.149 0 2.247.188 3.296.562a10.42 10.42 0 0 1 2.846 1.536l.01.007.008-.009a7.742 7.742 0 0 0 1.364-2.329A7.85 7.85 0 0 0 20.012 12c0-2.22-.78-4.11-2.34-5.671C16.11 4.768 14.22 3.988 12 3.988c-2.22 0-4.11.78-5.671 2.34C4.768 7.89 3.988 9.78 3.988 12c0 .985.162 1.911.488 2.78.325.867.78 1.644 1.364 2.328Zm6.16-4.12c-.98 0-1.806-.337-2.479-1.01-.672-.672-1.009-1.498-1.009-2.478 0-.98.337-1.806 1.01-2.479.672-.672 1.498-1.008 2.478-1.008.98 0 1.806.336 2.479 1.008.672.673 1.009 1.499 1.009 2.479s-.337 1.806-1.01 2.479c-.672.672-1.498 1.009-2.478 1.009Zm0 9a9.725 9.725 0 0 1-3.895-.787 10.087 10.087 0 0 1-3.171-2.135 10.087 10.087 0 0 1-2.135-3.171A9.725 9.725 0 0 1 2.013 12c0-1.382.262-2.68.786-3.895a10.086 10.086 0 0 1 2.135-3.171 10.086 10.086 0 0 1 3.171-2.135A9.725 9.725 0 0 1 12 2.013c1.382 0 2.68.262 3.895.786a10.087 10.087 0 0 1 3.171 2.135c.899.899 1.61 1.956 2.135 3.171A9.725 9.725 0 0 1 21.988 12a9.73 9.73 0 0 1-.787 3.895 10.087 10.087 0 0 1-2.135 3.171 10.087 10.087 0 0 1-3.171 2.135 9.725 9.725 0 0 1-3.895.787Z"
+        d="M9.175 13.825C9.95833 14.6083 10.9 15 12 15C13.1 15 14.0417 14.6083 14.825 13.825C15.6083 13.0417 16 12.1 16 11C16 9.9 15.6083 8.95833 14.825 8.175C14.0417 7.39167 13.1 7 12 7C10.9 7 9.95833 7.39167 9.175 8.175C8.39167 8.95833 8 9.9 8 11C8 12.1 8.39167 13.0417 9.175 13.825ZM13.4125 12.4125C13.0208 12.8042 12.55 13 12 13C11.45 13 10.9792 12.8042 10.5875 12.4125C10.1958 12.0208 10 11.55 10 11C10 10.45 10.1958 9.97917 10.5875 9.5875C10.9792 9.19583 11.45 9 12 9C12.55 9 13.0208 9.19583 13.4125 9.5875C13.8042 9.97917 14 10.45 14 11C14 11.55 13.8042 12.0208 13.4125 12.4125Z"
+        fill="currentColor"
+      />
+      <path
+        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 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12Z"
+        fill="currentColor"
+      />
+      <path
+        d="M16.2297 18.7917C15.7472 18.6085 15.2623 18.4571 14.775 18.3375C13.8583 18.1125 12.9333 18 12 18C11.0667 18 10.1417 18.1125 9.225 18.3375C8.73774 18.4571 8.25283 18.6085 7.77028 18.7917C7.12696 18.3902 6.54483 17.8998 6.04104 17.3378C6.93176 16.9259 7.83474 16.6092 8.75 16.3875C9.81667 16.1292 10.9 16 12 16C13.1 16 14.1833 16.1292 15.25 16.3875C16.1653 16.6092 17.0682 16.9259 17.959 17.3378C17.4552 17.8998 16.873 18.3902 16.2297 18.7917Z"
         fill="currentColor"
-        stroke="currentColor"
-        stroke-width="0.025"
       />
     </svg>
   </button>

diff --git a/src/components/Radio/Radio.module.css b/src/components/Radio/Radio.module.css
@@ -102,8 +102,8 @@ limitations under the License.
 
 .radio[data-kind] [type="radio"][disabled] + .radio-ui {
   border-color: var(--cpd-color-border-disabled);
-  background: var(--cpd-border-disabled);
-  color: var(--color-text-disabled);
+  background: var(--cpd-color-bg-canvas-disabled);
+  color: var(--cpd-color-text-disabled);
 }
 
 .radio[data-kind] [type="radio"][disabled]:checked + .radio-ui {

diff --git a/src/components/Tooltip/Tooltip.module.css b/src/components/Tooltip/Tooltip.module.css
@@ -27,7 +27,7 @@ limitations under the License.
 }
 
 .shortcut {
-  font-weight: (--cpd-font-weight-normal);
+  font-weight: var(--cpd-font-weight-regular);
   color: var(--cpd-color-text-secondary);
 }
 

diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -20,7 +20,7 @@ import { Meta, StoryFn } from "@storybook/react";
 import { Tooltip as TooltipComponent } from "./Tooltip";
 import { IconButton } from "../IconButton/IconButton";
 
-import UserIcon from "@vector-im/compound-design-tokens/icons/user.svg";
+import UserIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg";
 
 export default {
   title: "Tooltip",