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

Commit

Permalink
Use new semantic tokens for username colors (#12209)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@robintown @andybalaam
robintown authored and andybalaam committed Feb 9, 2024
1 parent 0c56025 commit 562d5c0
Show file tree
Hide file tree
Showing 11 changed files with 26 additions and 50 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Binary file modified ...ht/snapshots/crypto/crypto.spec.ts/RoomSummaryCard-with-verified-e2ee-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...right/snapshots/right-panel/right-panel.spec.ts/with-name-and-address-linux.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 0 additions & 8 deletions res/css/_common.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 0 additions & 8 deletions res/css/views/elements/_ReplyChain.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 6 additions & 8 deletions res/themes/legacy-light/css/_legacy-light.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 0 additions & 2 deletions res/themes/light-custom/css/_custom.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
14 changes: 6 additions & 8 deletions res/themes/light-high-contrast/css/_light-high-contrast.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
14 changes: 6 additions & 8 deletions res/themes/light/css/_light.pcss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
/* ******************** */

/**
Expand Down
6 changes: 3 additions & 3 deletions src/components/views/right_panel/RoomSummaryCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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";
Expand Down
8 changes: 4 additions & 4 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand Down

0 comments on commit 562d5c0

Please sign in to comment.