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

15
res/themes/dark/css/_dark.pcss
View file

@ -22,7 +22,7 @@ $separator: var(--cpd-color-alpha-gray-400);
/* ******************** */
$roomlist-bg-color: rgba(38, 40, 45, 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);
/* ******************** */
/**
@ -125,8 +125,8 @@ $roomheader-addroom-fg-color: $primary-content;
/* Rich-text-editor */
/* ******************** */
$pill-bg-color: $room-highlight-color;
$pill-hover-bg-color: #545a66;
$pill-bg-color: var(--cpd-color-gray-1000);
$pill-hover-bg-color: var(--cpd-color-gray-1100);
/* ******************** */
/* Inputs */
@ -150,7 +150,7 @@ $dialog-close-external-color: $primary-content;
/* ******************** */
$system: var(--cpd-color-bg-subtle-secondary);
$roomsublist-skeleton-ui-bg: linear-gradient(180deg, #3e444c 0%, #3e444c00 100%);
$roomtile-default-badge-bg-color: $input-darker-fg-color;
$roomtile-default-badge-bg-color: var(--cpd-color-icon-secondary);
/* ******************** */
/* Tabbed views */
@ -199,10 +199,9 @@ $voice-record-icon-color: $quaternary-content;
/* Bubble tiles */
/* ******************** */
$eventbubble-self-bg: #133a34;
$eventbubble-others-bg: #21262c;
$eventbubble-bg-hover: #1c2026;
$eventbubble-reply-color: #c1c6cd;
$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 */

5
res/themes/legacy-dark/css/_legacy-dark.pcss
View file

@ -28,8 +28,8 @@ $light-fg-color: $header-panel-text-secondary-color;
/* used for focusing form controls */
$focus-bg-color: $room-highlight-color;
$pill-bg-color: $room-highlight-color;
$pill-hover-bg-color: #545a66;
$pill-bg-color: var(--cpd-color-gray-1000);
$pill-hover-bg-color: var(--cpd-color-gray-1100);
/* informational plinth */
$info-plinth-bg-color: $header-panel-bg-color;
@ -217,7 +217,6 @@ $inlinecode-background-color: #2a3039;
$eventbubble-self-bg: #14322e;
$eventbubble-others-bg: $event-selected-color;
$eventbubble-bg-hover: #1c2026;
$eventbubble-reply-color: #c1c6cd;
/* Location sharing */
/* ******************** */

5
res/themes/legacy-light/css/_legacy-light.pcss
View file

@ -123,8 +123,8 @@ $rte-code-bg-color: rgba(0, 0, 0, 0.04);
$header-panel-text-primary-color: #91a1c0;
$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);
$topleftmenu-color: #212121;
$roomheader-bg-color: $primary-bg-color;
@ -311,7 +311,6 @@ $inlinecode-background-color: $header-panel-bg-color;
$eventbubble-self-bg: #f0fbf8;
$eventbubble-others-bg: $system;
$eventbubble-bg-hover: #fafbfd;
$eventbubble-reply-color: #c1c6cd;
/* pinned events indicator */
$pinned-color: $tertiary-content;

1
res/themes/light-custom/css/_custom.pcss
View file

@ -116,7 +116,6 @@ $settings-grey-fg-color: $primary-content;
$eventbubble-self-bg: var(--eventbubble-self-bg, $eventbubble-self-bg);
$eventbubble-others-bg: var(--eventbubble-others-bg, $eventbubble-others-bg);
$eventbubble-bg-hover: var(--eventbubble-bg-hover, $eventbubble-bg-hover);
$eventbubble-reply-color: var(--eventbubble-reply-color, $eventbubble-reply-color);
$reaction-row-button-selected-bg-color: var(
--reaction-row-button-selected-bg-color,

1
res/themes/light-high-contrast/css/_light-high-contrast.pcss
View file

@ -31,7 +31,6 @@ $button-secondary-bg-color: $accent-fg-color;
$message-action-bar-fg-color: $primary-content;
$voice-record-stop-border-color: $quinary-content;
$voice-record-icon-color: $tertiary-content;
$eventbubble-reply-color: $quaternary-content;
$roomtopic-color: $secondary-content;
/**

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 */