imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refine the colors of some more components (#12343)

Browse source 
* Refine the colors of some more components

This is a reintroduction of https://github.com/matrix-org/matrix-react-sdk/pull/12255, and should be the last part of the Compound color refinement work (https://github.com/element-hq/element-web/issues/26992). I've updated the following components to reflect design decisions (https://www.figma.com/file/pqhlirZFEwEp5XpudSbiia/Theming-Web-templates?type=design&node-id=80-60219&mode=design&t=mjqwylUie1vRwzOV-0) that will help them fit in better with the new design system:

- Message bubbles
- Pills
- Sent indicators
- Jump to bottom/unread buttons
- Composer placeholder
- Notification badges
- Room sublists
- Verification shields
- Date separators
- Tooltips

Closes https://github.com/element-hq/element-web/issues/22122

* Update some screenshots
This commit is contained in:
Robin 2024-03-18 11:47:55 -04:00 • committed by GitHub
parent f765a44b46
commit 26b4d47af1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
49 changed files with 63 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

17
res/themes/light/css/_light.pcss
View file

@ -159,8 +159,8 @@ $roomheader-addroom-fg-color: #5c6470;
/* Rich-text-editor */
/* ******************** */
$pill-bg-color: #aaa;
$pill-hover-bg-color: #ccc;
$pill-bg-color: var(--cpd-color-gray-1000);
$pill-hover-bg-color: var(--cpd-color-gray-1100);
$rte-bg-color: #e9e9e9;
$rte-code-bg-color: rgba(0, 0, 0, 0.04);
/* ******************** */
@ -205,13 +205,13 @@ $imagebody-giflabel-color: $accent-fg-color;
/* ******************** */
$roomlist-bg-color: rgba(245, 245, 245, 0.9);
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, $background 0%, #ffffff00 100%);
$roomtile-default-badge-bg-color: $muted-fg-color;
$roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary);
/* ******************** */
/* e2e */
/* ******************** */
$e2e-verified-color: var(--cpd-color-green-900);
$e2e-warning-color: var(--cpd-color-red-900);
$e2e-verified-color: var(--cpd-color-icon-success-primary);
$e2e-warning-color: var(--cpd-color-icon-critical-primary);
$e2e-verified-color-light: var(--cpd-color-green-300);
$e2e-warning-color-light: var(--cpd-color-red-300);
/* ******************** */
@ -274,10 +274,9 @@ $voice-record-icon-color: $tertiary-content;
/* Bubble tiles */
/* ******************** */
$eventbubble-self-bg: #e7f8f3;
$eventbubble-others-bg: #e8edf4;
$eventbubble-bg-hover: #f6f7f8;
$eventbubble-reply-color: $quaternary-content;
$eventbubble-self-bg: var(--cpd-color-green-300);
$eventbubble-others-bg: var(--cpd-color-gray-300);
$eventbubble-bg-hover: var(--cpd-color-bg-subtle-secondary);
/* ******************** */
/* Lightbox */