diff --git a/package.json b/package.json index 53013414717..1207fd49114 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,7 @@ "@matrix-org/spec": "^1.7.0", "@sentry/browser": "^7.0.0", "@testing-library/react-hooks": "^8.0.1", - "@vector-im/compound-design-tokens": "^0.1.0", + "@vector-im/compound-design-tokens": "^1.0.0", "@vector-im/compound-web": "3.0.1", "@zxcvbn-ts/core": "^3.0.4", "@zxcvbn-ts/language-common": "^3.0.4", diff --git a/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png b/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png index e5dae2a5d32..488132b30f3 100644 Binary files a/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png and b/playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png differ diff --git a/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png b/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png index d035a9c26a9..7d4e21e240a 100644 Binary files a/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png and b/playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png differ diff --git a/res/css/_common.pcss b/res/css/_common.pcss index 7979a04e347..855c64cb73f 100644 --- a/res/css/_common.pcss +++ b/res/css/_common.pcss @@ -710,14 +710,6 @@ legend { color: $username-variant6-color; } -.mx_Username_color7 { - color: $username-variant7-color; -} - -.mx_Username_color8 { - color: $username-variant8-color; -} - .mx_AppWarning, .mx_AppPermission { text-align: center; diff --git a/res/css/views/elements/_ReplyChain.pcss b/res/css/views/elements/_ReplyChain.pcss index e142ab128ca..55f32e3196f 100644 --- a/res/css/views/elements/_ReplyChain.pcss +++ b/res/css/views/elements/_ReplyChain.pcss @@ -55,12 +55,4 @@ limitations under the License. &.mx_ReplyChain_color6 { --username-color: $username-variant6-color; } - - &.mx_ReplyChain_color7 { - --username-color: $username-variant7-color; - } - - &.mx_ReplyChain_color8 { - --username-color: $username-variant8-color; - } } diff --git a/res/themes/legacy-light/css/_legacy-light.pcss b/res/themes/legacy-light/css/_legacy-light.pcss index b1bb34c18ef..290027e5841 100644 --- a/res/themes/legacy-light/css/_legacy-light.pcss +++ b/res/themes/legacy-light/css/_legacy-light.pcss @@ -190,14 +190,12 @@ $call-background: #15191e; $call-primary-content: #ffffff; $call-light-quaternary-content: #c1c6cd; -$username-variant1-color: var(--cpd-color-blue-1200); -$username-variant2-color: var(--cpd-color-fuchsia-1200); -$username-variant3-color: var(--cpd-color-green-1200); -$username-variant4-color: var(--cpd-color-pink-1200); -$username-variant5-color: var(--cpd-color-orange-1200); -$username-variant6-color: var(--cpd-color-cyan-1200); -$username-variant7-color: var(--cpd-color-purple-1200); -$username-variant8-color: var(--cpd-color-lime-1200); +$username-variant1-color: var(--cpd-color-text-decorative-1); +$username-variant2-color: var(--cpd-color-text-decorative-2); +$username-variant3-color: var(--cpd-color-text-decorative-3); +$username-variant4-color: var(--cpd-color-text-decorative-4); +$username-variant5-color: var(--cpd-color-text-decorative-5); +$username-variant6-color: var(--cpd-color-text-decorative-6); /** * Creating a `semantic` color scale. This will not be needed with the new diff --git a/res/themes/light-custom/css/_custom.pcss b/res/themes/light-custom/css/_custom.pcss index 87ed2ba5bea..5ecac33ffc3 100644 --- a/res/themes/light-custom/css/_custom.pcss +++ b/res/themes/light-custom/css/_custom.pcss @@ -117,8 +117,6 @@ $username-variant3-color: var(--username-colors_2, $username-variant3-color); $username-variant4-color: var(--username-colors_3, $username-variant4-color); $username-variant5-color: var(--username-colors_4, $username-variant5-color); $username-variant6-color: var(--username-colors_5, $username-variant6-color); -$username-variant7-color: var(--username-colors_6, $username-variant7-color); -$username-variant8-color: var(--username-colors_7, $username-variant8-color); /* --timeline-highlights-color */ $event-selected-color: var(--timeline-highlights-color); diff --git a/res/themes/light-high-contrast/css/_light-high-contrast.pcss b/res/themes/light-high-contrast/css/_light-high-contrast.pcss index 1562db5eab5..396b4946996 100644 --- a/res/themes/light-high-contrast/css/_light-high-contrast.pcss +++ b/res/themes/light-high-contrast/css/_light-high-contrast.pcss @@ -8,14 +8,12 @@ $tertiary-content: var(--cpd-color-gray-800); $quaternary-content: var(--cpd-color-gray-600); $quinary-content: var(--cpd-color-gray-400); -$username-variant1-color: var(--cpd-color-blue-1200); -$username-variant2-color: var(--cpd-color-fuchsia-1200); -$username-variant3-color: var(--cpd-color-green-1200); -$username-variant4-color: var(--cpd-color-pink-1200); -$username-variant5-color: var(--cpd-color-orange-1200); -$username-variant6-color: var(--cpd-color-cyan-1200); -$username-variant7-color: var(--cpd-color-purple-1200); -$username-variant8-color: var(--cpd-color-lime-1200); +$username-variant1-color: var(--cpd-color-text-decorative-1); +$username-variant2-color: var(--cpd-color-text-decorative-2); +$username-variant3-color: var(--cpd-color-text-decorative-3); +$username-variant4-color: var(--cpd-color-text-decorative-4); +$username-variant5-color: var(--cpd-color-text-decorative-5); +$username-variant6-color: var(--cpd-color-text-decorative-6); $accent-alt: $links; $input-border-color: $secondary-content; diff --git a/res/themes/light/css/_light.pcss b/res/themes/light/css/_light.pcss index c47f1910ab3..28834277200 100644 --- a/res/themes/light/css/_light.pcss +++ b/res/themes/light/css/_light.pcss @@ -39,14 +39,12 @@ $alert: var(--cpd-color-text-critical-primary); $links: var(--cpd-color-text-link-external); $link-external: var(--cpd-color-text-link-external); -$username-variant1-color: var(--cpd-color-blue-1200); -$username-variant2-color: var(--cpd-color-fuchsia-1200); -$username-variant3-color: var(--cpd-color-green-1200); -$username-variant4-color: var(--cpd-color-pink-1200); -$username-variant5-color: var(--cpd-color-orange-1200); -$username-variant6-color: var(--cpd-color-cyan-1200); -$username-variant7-color: var(--cpd-color-purple-1200); -$username-variant8-color: var(--cpd-color-lime-1200); +$username-variant1-color: var(--cpd-color-text-decorative-1); +$username-variant2-color: var(--cpd-color-text-decorative-2); +$username-variant3-color: var(--cpd-color-text-decorative-3); +$username-variant4-color: var(--cpd-color-text-decorative-4); +$username-variant5-color: var(--cpd-color-text-decorative-5); +$username-variant6-color: var(--cpd-color-text-decorative-6); /* ******************** */ /** diff --git a/src/components/views/right_panel/RoomSummaryCard.tsx b/src/components/views/right_panel/RoomSummaryCard.tsx index 4a6ea31b488..d6182e5e2e1 100644 --- a/src/components/views/right_panel/RoomSummaryCard.tsx +++ b/src/components/views/right_panel/RoomSummaryCard.tsx @@ -18,7 +18,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from "re import classNames from "classnames"; import { MenuItem, Tooltip, Separator, ToggleMenuItem, Text, Badge, Heading } from "@vector-im/compound-web"; import { Icon as SearchIcon } from "@vector-im/compound-design-tokens/icons/search.svg"; -import { Icon as FavouriteIcon } from "@vector-im/compound-design-tokens/icons/favourite-off.svg"; +import { Icon as FavouriteIcon } from "@vector-im/compound-design-tokens/icons/favourite.svg"; import { Icon as UserAddIcon } from "@vector-im/compound-design-tokens/icons/user-add.svg"; import { Icon as UserProfileSolidIcon } from "@vector-im/compound-design-tokens/icons/user-profile-solid.svg"; import { Icon as LinkIcon } from "@vector-im/compound-design-tokens/icons/link.svg"; @@ -27,8 +27,8 @@ import { Icon as ExportArchiveIcon } from "@vector-im/compound-design-tokens/ico import { Icon as LeaveIcon } from "@vector-im/compound-design-tokens/icons/leave.svg"; import { Icon as FilesIcon } from "@vector-im/compound-design-tokens/icons/files.svg"; import { Icon as PollsIcon } from "@vector-im/compound-design-tokens/icons/polls.svg"; -import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin-off.svg"; -import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock.svg"; +import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin.svg"; +import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock-solid.svg"; import { Icon as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg"; import { Icon as PublicIcon } from "@vector-im/compound-design-tokens/icons/public.svg"; import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg"; diff --git a/yarn.lock b/yarn.lock index c646e708a4b..b3bcce02ee0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3122,10 +3122,10 @@ resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406" integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ== -"@vector-im/compound-design-tokens@^0.1.0": - version "0.1.1" - resolved "https://registry.yarnpkg.com/@vector-im/compound-design-tokens/-/compound-design-tokens-0.1.1.tgz#4fcf1212e6cc11256c443dc3bb02a9cdd8f2356c" - integrity sha512-cZJFQS8FknJB2B9cgLmw1fqU1Dr3x/Bt9ZQu/zgioIRHpwnvhe/5EyBXgZY18UIp/+sks95tt5js+W3tjtcO1A== +"@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"