Use new semantic tokens for username colors (#12209)

* Use new semantic tokens for username colors

To match the tokens now used by the Compound Web avatar component

* Fix incorrect lock icon

* Update screenshots

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",

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;

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;
-    }
 }

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

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);

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;

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);
 /* ******************** */
 
 /**

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";

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"