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

Use new semantic tokens for username colors #12209

Merged
merged 4 commits into from
Feb 6, 2024
Merged

Use new semantic tokens for username colors #12209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c17b3ce
Use new semantic tokens for username colors
robintown Feb 1, 2024
4ac7f89
Merge branch 'develop' into semantic-avatars
robintown Feb 6, 2024
723d2bf
Fix incorrect lock icon
robintown Feb 6, 2024
11801db
Update screenshots
robintown Feb 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading