diff --git a/package.json b/package.json index 1ec022e0..8f5526d8 100644 --- 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 index 0ebe18d8..1a69c50c 100644 Binary files a/playwright/visual.test.ts-snapshots/Avatar-All-Avatars-1-chromium-linux.png and b/playwright/visual.test.ts-snapshots/Avatar-All-Avatars-1-chromium-linux.png differ diff --git a/playwright/visual.test.ts-snapshots/Avatar-Large-No-Image-Fallback-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Avatar-Large-No-Image-Fallback-1-chromium-linux.png index a1b14105..77ca955c 100644 Binary files a/playwright/visual.test.ts-snapshots/Avatar-Large-No-Image-Fallback-1-chromium-linux.png and b/playwright/visual.test.ts-snapshots/Avatar-Large-No-Image-Fallback-1-chromium-linux.png differ 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 index 7fb323ba..6f586ff3 100644 Binary files a/playwright/visual.test.ts-snapshots/Avatar-No-Image-Fallback-1-chromium-linux.png and b/playwright/visual.test.ts-snapshots/Avatar-No-Image-Fallback-1-chromium-linux.png differ diff --git a/src/components/Alert/__snapshots__/Alert.test.tsx.snap b/src/components/Alert/__snapshots__/Alert.test.tsx.snap index 42806f29..ca12a758 100644 --- 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`] = ` @@ -83,15 +77,14 @@ exports[`Alert > renders actions 1`] = ` > @@ -109,15 +102,14 @@ exports[`Alert > renders critical 1`] = `
renders critical 1`] = ` >
@@ -177,24 +168,18 @@ exports[`Alert > renders info 1`] = ` @@ -229,15 +214,14 @@ exports[`Alert > renders info 1`] = ` > @@ -255,15 +239,14 @@ exports[`Alert > renders success 1`] = `
renders success 1`] = ` >
diff --git a/src/components/Avatar/Avatar.module.css b/src/components/Avatar/Avatar.module.css index b55884f2..d88e75d8 100644 --- 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 index f1fc54c1..a68c97de 100644 --- a/src/components/Avatar/Avatar.stories.tsx +++ b/src/components/Avatar/Avatar.stories.tsx @@ -78,10 +78,6 @@ const ImageLessCollection: StoryFn = (args) => (     - -   - -   ); diff --git a/src/components/Avatar/Avatar.test.tsx b/src/components/Avatar/Avatar.test.tsx index 2e178228..934c06ec 100644 --- 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 index 83f5bdc8..172b4c71 100644 --- 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`] = ` diff --git a/src/components/Avatar/__snapshots__/AvatarStack.test.tsx.snap b/src/components/Avatar/__snapshots__/AvatarStack.test.tsx.snap index 5c98ec08..8227eaa3 100644 --- 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`] = ` { return sum + char.charCodeAt(0); diff --git a/src/components/Button/IconButton/__snapshots__/IconButton.test.tsx.snap b/src/components/Button/IconButton/__snapshots__/IconButton.test.tsx.snap index d8ee8100..b1cadf39 100644 --- a/src/components/Button/IconButton/__snapshots__/IconButton.test.tsx.snap +++ b/src/components/Button/IconButton/__snapshots__/IconButton.test.tsx.snap @@ -15,23 +15,20 @@ exports[`IconButton > renders a Default IconButton 1`] = ` > @@ -54,23 +51,20 @@ exports[`IconButton > renders a DefaultDisabled IconButton 1`] = ` > @@ -95,23 +89,20 @@ exports[`IconButton > renders a WithCriticalIndicator IconButton 1`] = ` > @@ -136,23 +127,20 @@ exports[`IconButton > renders a WithIndicator IconButton 1`] = ` > @@ -177,23 +165,20 @@ exports[`IconButton > renders a WithIndicatorDisabled IconButton 1`] = ` > @@ -218,23 +203,20 @@ exports[`IconButton > renders a WithSuccessIndicator IconButton 1`] = ` > diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/__snapshots__/Button.test.tsx.snap index baf2d1d2..4831b1fc 100644 --- a/src/components/Button/__snapshots__/Button.test.tsx.snap +++ b/src/components/Button/__snapshots__/Button.test.tsx.snap @@ -15,21 +15,6 @@ exports[`Button > renders a Default button 1`] = ` `; -exports[`Button > renders a Destructive button 1`] = ` -
- -
-`; - exports[`Button > renders a Disabled button 1`] = `
diff --git a/src/components/Form/Controls/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/src/components/Form/Controls/Checkbox/__snapshots__/Checkbox.test.tsx.snap index 86235e3f..98f4cf11 100644 --- a/src/components/Form/Controls/Checkbox/__snapshots__/Checkbox.test.tsx.snap +++ b/src/components/Form/Controls/Checkbox/__snapshots__/Checkbox.test.tsx.snap @@ -15,15 +15,14 @@ exports[`Checkbox > renders 1`] = `
diff --git a/src/components/Form/Controls/Password/__snapshots__/Password.test.tsx.snap b/src/components/Form/Controls/Password/__snapshots__/Password.test.tsx.snap index 390abfd0..a2083e77 100644 --- a/src/components/Form/Controls/Password/__snapshots__/Password.test.tsx.snap +++ b/src/components/Form/Controls/Password/__snapshots__/Password.test.tsx.snap @@ -21,15 +21,14 @@ exports[`PasswordControl > switches the input type > invisible 1`] = ` @@ -58,15 +57,14 @@ exports[`PasswordControl > switches the input type > invisible 2`] = ` @@ -95,15 +93,14 @@ exports[`PasswordControl > switches the input type > visible 1`] = ` diff --git a/src/components/Icon/IndicatorIcon/__snapshots__/IndicatorIcon.test.tsx.snap b/src/components/Icon/IndicatorIcon/__snapshots__/IndicatorIcon.test.tsx.snap index a937c8d5..b38edf0a 100644 --- a/src/components/Icon/IndicatorIcon/__snapshots__/IndicatorIcon.test.tsx.snap +++ b/src/components/Icon/IndicatorIcon/__snapshots__/IndicatorIcon.test.tsx.snap @@ -8,15 +8,14 @@ exports[`IconButton > renders a Default IconButton 1`] = ` > @@ -32,15 +31,14 @@ exports[`IconButton > renders a WithCriticalIndicator IconButton 1`] = ` > @@ -56,15 +54,14 @@ exports[`IconButton > renders a WithIndicator IconButton 1`] = ` > @@ -80,15 +77,14 @@ exports[`IconButton > renders a WithSuccessIndicator IconButton 1`] = ` > diff --git a/src/components/Menu/MenuItem.test.tsx b/src/components/Menu/MenuItem.test.tsx index d5cafabd..a6a11987 100644 --- a/src/components/Menu/MenuItem.test.tsx +++ b/src/components/Menu/MenuItem.test.tsx @@ -19,7 +19,7 @@ import { render } from "@testing-library/react"; import React from "react"; import LeaveIcon from "@vector-im/compound-design-tokens/icons/leave.svg"; import UserProfileIcon from "@vector-im/compound-design-tokens/icons/user-profile.svg"; -import MicOnOutlineIcon from "@vector-im/compound-design-tokens/icons/mic-on-outline.svg"; +import MicOnIcon from "@vector-im/compound-design-tokens/icons/mic-on.svg"; import { MenuItem } from "./MenuItem"; import { Text } from "../Typography/Text"; @@ -63,7 +63,7 @@ describe("MenuItem", () => { it("renders without a label", () => { const { asFragment } = render( - {}}> + {}}> Imagine that there might be a volume slider here in place of the label , ); diff --git a/src/components/Menu/__snapshots__/DrawerMenu.test.tsx.snap b/src/components/Menu/__snapshots__/DrawerMenu.test.tsx.snap index 73614b7b..331bceb1 100644 --- a/src/components/Menu/__snapshots__/DrawerMenu.test.tsx.snap +++ b/src/components/Menu/__snapshots__/DrawerMenu.test.tsx.snap @@ -19,23 +19,20 @@ exports[`DrawerMenu > renders 1`] = ` renders 1`] = ` @@ -72,23 +68,17 @@ exports[`DrawerMenu > renders 1`] = ` renders 1`] = ` diff --git a/src/components/Menu/__snapshots__/FloatingMenu.test.tsx.snap b/src/components/Menu/__snapshots__/FloatingMenu.test.tsx.snap index 187b0d8b..ef545136 100644 --- a/src/components/Menu/__snapshots__/FloatingMenu.test.tsx.snap +++ b/src/components/Menu/__snapshots__/FloatingMenu.test.tsx.snap @@ -21,23 +21,20 @@ exports[`FloatingMenu > renders 1`] = ` renders 1`] = ` @@ -74,23 +70,17 @@ exports[`FloatingMenu > renders 1`] = ` renders 1`] = ` diff --git a/src/components/Menu/__snapshots__/MenuItem.test.tsx.snap b/src/components/Menu/__snapshots__/MenuItem.test.tsx.snap index 6d447e56..670696fe 100644 --- a/src/components/Menu/__snapshots__/MenuItem.test.tsx.snap +++ b/src/components/Menu/__snapshots__/MenuItem.test.tsx.snap @@ -10,23 +10,17 @@ exports[`MenuItem > renders 1`] = ` renders 1`] = ` @@ -66,15 +59,14 @@ exports[`MenuItem > renders a Critical Disabled menu item 1`] = ` renders a Critical Disabled menu item 1`] = ` renders a Critical menu item 1`] = ` renders a Critical menu item 1`] = ` renders a Primary Disabled menu item 1`] = ` renders a Primary Disabled menu item 1`] = ` renders a Primary menu item 1`] = ` renders a Primary menu item 1`] = ` renders a menu item with a long label 1`] = ` renders a menu item with a long label 1`] = ` renders a menu item with a long label and children 1`] = ` renders a menu item with a long label and children 1`] = ` renders with a child 1`] = ` renders with a child 1`] = ` renders with an component as an Icon 1`] = ` renders without a label 1`] = ` Imagine that there might be a volume slider here in place of the label diff --git a/src/components/Menu/__snapshots__/ToggleMenuItem.test.tsx.snap b/src/components/Menu/__snapshots__/ToggleMenuItem.test.tsx.snap index 63df1f8b..4392edd9 100644 --- a/src/components/Menu/__snapshots__/ToggleMenuItem.test.tsx.snap +++ b/src/components/Menu/__snapshots__/ToggleMenuItem.test.tsx.snap @@ -11,15 +11,14 @@ exports[`ToggleMenuItem > renders 1`] = ` renders 1`] = ` > opens tooltip on focus where trigger is non interactive 1`] = > @@ -92,23 +89,20 @@ exports[`Tooltip > overrides default tab index for non interactive triggers 1`] > @@ -162,23 +156,20 @@ exports[`Tooltip > renders open by default 1`] = ` > @@ -216,23 +207,20 @@ exports[`Tooltip > renders with caption 1`] = ` > diff --git a/yarn.lock b/yarn.lock index d5d692e8..6ef1e859 100644 --- 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"