OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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
pull/28217/head
Robin 2024-02-06 15:54:30 -05:00 committed by GitHub
parent a664172a22
commit 3052025dd0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 26 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

BIN
playwright/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 27 KiB

BIN
playwright/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

8
res/css/_common.pcss
View File

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

8
res/css/views/elements/_ReplyChain.pcss
View File

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

14
res/themes/legacy-light/css/_legacy-light.pcss
View File

@ -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

2
res/themes/light-custom/css/_custom.pcss
View File

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

14
res/themes/light-high-contrast/css/_light-high-contrast.pcss
View File

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

14
res/themes/light/css/_light.pcss
View File

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

6
src/components/views/right_panel/RoomSummaryCard.tsx
View File

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

8
yarn.lock
View File

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