Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 3052025

Browse files
robintownrobintown
authored
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
1 parent a664172 commit 3052025

File tree

11 files changed

+26
-50
lines changed

11 files changed

+26
-50
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
"@matrix-org/spec": "^1.7.0",
7474
"@sentry/browser": "^7.0.0",
7575
"@testing-library/react-hooks": "^8.0.1",
76-
"@vector-im/compound-design-tokens": "^0.1.0",
76+
"@vector-im/compound-design-tokens": "^1.0.0",
7777
"@vector-im/compound-web": "3.0.1",
7878
"@zxcvbn-ts/core": "^3.0.4",
7979
"@zxcvbn-ts/language-common": "^3.0.4",

‎playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png‎

26 Bytes
Loading

‎playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png‎

37 Bytes
Loading

‎res/css/_common.pcss‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -710,14 +710,6 @@ legend {
710710
color: $username-variant6-color;
711711
}
712712

713-
.mx_Username_color7 {
714-
color: $username-variant7-color;
715-
}
716-
717-
.mx_Username_color8 {
718-
color: $username-variant8-color;
719-
}
720-
721713
.mx_AppWarning,
722714
.mx_AppPermission {
723715
text-align: center;

‎res/css/views/elements/_ReplyChain.pcss‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,4 @@ limitations under the License.
5555
&.mx_ReplyChain_color6 {
5656
--username-color: $username-variant6-color;
5757
}
58-
59-
&.mx_ReplyChain_color7 {
60-
--username-color: $username-variant7-color;
61-
}
62-
63-
&.mx_ReplyChain_color8 {
64-
--username-color: $username-variant8-color;
65-
}
6658
}

‎res/themes/legacy-light/css/_legacy-light.pcss‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -190,14 +190,12 @@ $call-background: #15191e;
190190
$call-primary-content: #ffffff;
191191
$call-light-quaternary-content: #c1c6cd;
192192

193-
$username-variant1-color: var(--cpd-color-blue-1200);
194-
$username-variant2-color: var(--cpd-color-fuchsia-1200);
195-
$username-variant3-color: var(--cpd-color-green-1200);
196-
$username-variant4-color: var(--cpd-color-pink-1200);
197-
$username-variant5-color: var(--cpd-color-orange-1200);
198-
$username-variant6-color: var(--cpd-color-cyan-1200);
199-
$username-variant7-color: var(--cpd-color-purple-1200);
200-
$username-variant8-color: var(--cpd-color-lime-1200);
193+
$username-variant1-color: var(--cpd-color-text-decorative-1);
194+
$username-variant2-color: var(--cpd-color-text-decorative-2);
195+
$username-variant3-color: var(--cpd-color-text-decorative-3);
196+
$username-variant4-color: var(--cpd-color-text-decorative-4);
197+
$username-variant5-color: var(--cpd-color-text-decorative-5);
198+
$username-variant6-color: var(--cpd-color-text-decorative-6);
201199

202200
/**
203201
* Creating a `semantic` color scale. This will not be needed with the new

‎res/themes/light-custom/css/_custom.pcss‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,6 @@ $username-variant3-color: var(--username-colors_2, $username-variant3-color);
117117
$username-variant4-color: var(--username-colors_3, $username-variant4-color);
118118
$username-variant5-color: var(--username-colors_4, $username-variant5-color);
119119
$username-variant6-color: var(--username-colors_5, $username-variant6-color);
120-
$username-variant7-color: var(--username-colors_6, $username-variant7-color);
121-
$username-variant8-color: var(--username-colors_7, $username-variant8-color);
122120

123121
/* --timeline-highlights-color */
124122
$event-selected-color: var(--timeline-highlights-color);

‎res/themes/light-high-contrast/css/_light-high-contrast.pcss‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,12 @@ $tertiary-content: var(--cpd-color-gray-800);
88
$quaternary-content: var(--cpd-color-gray-600);
99
$quinary-content: var(--cpd-color-gray-400);
1010

11-
$username-variant1-color: var(--cpd-color-blue-1200);
12-
$username-variant2-color: var(--cpd-color-fuchsia-1200);
13-
$username-variant3-color: var(--cpd-color-green-1200);
14-
$username-variant4-color: var(--cpd-color-pink-1200);
15-
$username-variant5-color: var(--cpd-color-orange-1200);
16-
$username-variant6-color: var(--cpd-color-cyan-1200);
17-
$username-variant7-color: var(--cpd-color-purple-1200);
18-
$username-variant8-color: var(--cpd-color-lime-1200);
11+
$username-variant1-color: var(--cpd-color-text-decorative-1);
12+
$username-variant2-color: var(--cpd-color-text-decorative-2);
13+
$username-variant3-color: var(--cpd-color-text-decorative-3);
14+
$username-variant4-color: var(--cpd-color-text-decorative-4);
15+
$username-variant5-color: var(--cpd-color-text-decorative-5);
16+
$username-variant6-color: var(--cpd-color-text-decorative-6);
1917

2018
$accent-alt: $links;
2119
$input-border-color: $secondary-content;

‎res/themes/light/css/_light.pcss‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,12 @@ $alert: var(--cpd-color-text-critical-primary);
3939
$links: var(--cpd-color-text-link-external);
4040
$link-external: var(--cpd-color-text-link-external);
4141

42-
$username-variant1-color: var(--cpd-color-blue-1200);
43-
$username-variant2-color: var(--cpd-color-fuchsia-1200);
44-
$username-variant3-color: var(--cpd-color-green-1200);
45-
$username-variant4-color: var(--cpd-color-pink-1200);
46-
$username-variant5-color: var(--cpd-color-orange-1200);
47-
$username-variant6-color: var(--cpd-color-cyan-1200);
48-
$username-variant7-color: var(--cpd-color-purple-1200);
49-
$username-variant8-color: var(--cpd-color-lime-1200);
42+
$username-variant1-color: var(--cpd-color-text-decorative-1);
43+
$username-variant2-color: var(--cpd-color-text-decorative-2);
44+
$username-variant3-color: var(--cpd-color-text-decorative-3);
45+
$username-variant4-color: var(--cpd-color-text-decorative-4);
46+
$username-variant5-color: var(--cpd-color-text-decorative-5);
47+
$username-variant6-color: var(--cpd-color-text-decorative-6);
5048
/* ******************** */
5149

5250
/**

‎src/components/views/right_panel/RoomSummaryCard.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import React, { useCallback, useContext, useEffect, useMemo, useState } from "re
1818
import classNames from "classnames";
1919
import { MenuItem, Tooltip, Separator, ToggleMenuItem, Text, Badge, Heading } from "@vector-im/compound-web";
2020
import { Icon as SearchIcon } from "@vector-im/compound-design-tokens/icons/search.svg";
21-
import { Icon as FavouriteIcon } from "@vector-im/compound-design-tokens/icons/favourite-off.svg";
21+
import { Icon as FavouriteIcon } from "@vector-im/compound-design-tokens/icons/favourite.svg";
2222
import { Icon as UserAddIcon } from "@vector-im/compound-design-tokens/icons/user-add.svg";
2323
import { Icon as UserProfileSolidIcon } from "@vector-im/compound-design-tokens/icons/user-profile-solid.svg";
2424
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
2727
import { Icon as LeaveIcon } from "@vector-im/compound-design-tokens/icons/leave.svg";
2828
import { Icon as FilesIcon } from "@vector-im/compound-design-tokens/icons/files.svg";
2929
import { Icon as PollsIcon } from "@vector-im/compound-design-tokens/icons/polls.svg";
30-
import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin-off.svg";
31-
import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock.svg";
30+
import { Icon as PinIcon } from "@vector-im/compound-design-tokens/icons/pin.svg";
31+
import { Icon as LockIcon } from "@vector-im/compound-design-tokens/icons/lock-solid.svg";
3232
import { Icon as LockOffIcon } from "@vector-im/compound-design-tokens/icons/lock-off.svg";
3333
import { Icon as PublicIcon } from "@vector-im/compound-design-tokens/icons/public.svg";
3434
import { Icon as ErrorIcon } from "@vector-im/compound-design-tokens/icons/error.svg";

0 commit comments

Comments
 (0)