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

Improve readability of badges and pills (#12360)

Browse source 
* Improve readability of badges and pills

Badges will now always use light theme colors so that they become white-on-gray in both themes, and the contrast of pills has been increased so that they use primary action colors as the background.

* Fix tests
This commit is contained in:
Robin 2024-03-21 20:27:13 -04:00 • committed by GitHub
parent ea3fff2d2f
commit a0795c7518
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 33 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

4
res/css/views/elements/_Pill.pcss
View file

@ -42,6 +42,10 @@ limitations under the License.
background-color: $pill-hover-bg-color !important; /* To override .markdown-body */
}
&:active {
background-color: $pill-press-bg-color !important; /* To override .markdown-body */
}
&.mx_UserPill_me:hover {
background-color: var(
--cpd-color-bg-critical-hovered

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

@ -125,8 +125,9 @@ $roomheader-addroom-fg-color: $primary-content;
/* Rich-text-editor */
/* ******************** */
$pill-bg-color: var(--cpd-color-gray-1000);
$pill-hover-bg-color: var(--cpd-color-gray-1100);
$pill-bg-color: var(--cpd-color-bg-action-primary-rest);
$pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered);
$pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed);
/* ******************** */
/* Inputs */

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

@ -28,8 +28,9 @@ $light-fg-color: $header-panel-text-secondary-color;
/* used for focusing form controls */
$focus-bg-color: $room-highlight-color;
$pill-bg-color: var(--cpd-color-gray-1000);
$pill-hover-bg-color: var(--cpd-color-gray-1100);
$pill-bg-color: var(--cpd-color-bg-action-primary-rest);
$pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered);
$pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed);
/* informational plinth */
$info-plinth-bg-color: $header-panel-bg-color;

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

@ -123,8 +123,9 @@ $rte-code-bg-color: rgba(0, 0, 0, 0.04);
$header-panel-text-primary-color: #91a1c0;
$pill-bg-color: var(--cpd-color-gray-1000);
$pill-hover-bg-color: var(--cpd-color-gray-1100);
$pill-bg-color: var(--cpd-color-bg-action-primary-rest);
$pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered);
$pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed);
$topleftmenu-color: #212121;
$roomheader-bg-color: $primary-bg-color;

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

@ -125,6 +125,7 @@ $reaction-row-button-selected-bg-color: var(
$menu-selected-color: var(--menu-selected-color, $menu-selected-color);
$pill-bg-color: var(--other-user-pill-bg-color, $pill-bg-color);
$pill-hover-bg-color: var(--other-user-pill-bg-color, $pill-hover-bg-color);
$pill-press-bg-color: var(--other-user-pill-bg-color, $pill-press-bg-color);
$icon-button-color: var(--icon-button-color, $icon-button-color);
$strong-input-border-color: var(--strong-input-border-color, $strong-input-border-color);

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

@ -159,8 +159,9 @@ $roomheader-addroom-fg-color: #5c6470;
/* Rich-text-editor */
/* ******************** */
$pill-bg-color: var(--cpd-color-gray-1000);
$pill-hover-bg-color: var(--cpd-color-gray-1100);
$pill-bg-color: var(--cpd-color-bg-action-primary-rest);
$pill-hover-bg-color: var(--cpd-color-bg-action-primary-hovered);
$pill-press-bg-color: var(--cpd-color-bg-action-primary-pressed);
$rte-bg-color: #e9e9e9;
$rte-code-bg-color: rgba(0, 0, 0, 0.04);
/* ******************** */