PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Merge pull request #6897 from SimonBrandner/task/colors-4

Browse source 
Color de-duplication #4
This commit is contained in:
David Baker 2021-10-15 16:07:07 +01:00 committed by GitHub
commit 4fb0d021ae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 37 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
res/css/structures/_SpacePanel.scss
View file

@ -19,7 +19,7 @@ $nestedHeight: 24px;
$gutterSize: 16px; $gutterSize: 16px;
$activeBorderTransparentGap: 1px; $activeBorderTransparentGap: 1px;
$activeBackgroundColor: $roomtile-selected-bg-color; $activeBackgroundColor: $panel-actions;
$activeBorderColor: $secondary-content; $activeBorderColor: $secondary-content;
.mx_SpacePanel { .mx_SpacePanel {

2
res/css/views/beta/_BetaCard.scss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_BetaCard { .mx_BetaCard {
margin-bottom: 20px; margin-bottom: 20px;
padding: 24px; padding: 24px;
background-color: $settings-profile-placeholder-bg-color; background-color: $system;
border-radius: 8px; border-radius: 8px;
box-sizing: border-box; box-sizing: border-box;

2
res/css/views/rooms/_RoomTile.scss
View file

@ -30,7 +30,7 @@ limitations under the License.
&:hover, &:hover,
&:focus-within, &:focus-within,
&.mx_RoomTile_hasMenuOpen { &.mx_RoomTile_hasMenuOpen {
background-color: $roomtile-selected-bg-color; background-color: $panel-actions;
border-radius: 8px; border-radius: 8px;
} }

2
res/css/views/settings/_AvatarSetting.scss
View file

@ -129,5 +129,5 @@ limitations under the License.
} }
.mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder { .mx_AvatarSetting_avatar .mx_AvatarSetting_avatarPlaceholder {
background-color: $settings-profile-placeholder-bg-color; background-color: $system;
} }

3
res/themes/dark/css/_dark.scss
View file

@ -100,7 +100,6 @@ $lightbox-background-bg-color: #000;
$lightbox-background-bg-opacity: 0.85; $lightbox-background-bg-opacity: 0.85;
$settings-grey-fg-color: #a2a2a2; $settings-grey-fg-color: #a2a2a2;
$settings-profile-placeholder-bg-color: $system;
$settings-profile-overlay-placeholder-fg-color: #454545; $settings-profile-overlay-placeholder-fg-color: #454545;
$settings-profile-button-bg-color: #e7e7e7; $settings-profile-button-bg-color: #e7e7e7;
$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color; $settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
@ -115,7 +114,6 @@ $groupheader-button-color: $header-panel-text-primary-color;
$rightpanel-button-color: $header-panel-text-primary-color; $rightpanel-button-color: $header-panel-text-primary-color;
$icon-button-color: $tertiary-content; $icon-button-color: $tertiary-content;
$roomtopic-color: $text-secondary-color; $roomtopic-color: $text-secondary-color;
$eventtile-meta-color: $roomtopic-color;
$header-divider-color: $header-panel-text-primary-color; $header-divider-color: $header-panel-text-primary-color;
$composer-e2e-icon-color: $header-panel-text-primary-color; $composer-e2e-icon-color: $header-panel-text-primary-color;
@ -134,7 +132,6 @@ $groupFilterPanel-divider-color: $roomlist-header-color;
$roomtile-preview-color: $secondary-content; $roomtile-preview-color: $secondary-content;
$roomtile-default-badge-bg-color: #61708b; $roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: rgba(141, 151, 165, 0.2);
// ******************** // ********************

20
res/themes/legacy-dark/css/_legacy-dark.scss
View file

@ -23,13 +23,7 @@ $tertiary-fg-color: $primary-fg-color;
$primary-bg-color: $bg-color; $primary-bg-color: $bg-color;
$muted-fg-color: $header-panel-text-primary-color; $muted-fg-color: $header-panel-text-primary-color;
// Legacy theme backports
$primary-content: $primary-fg-color;
$secondary-content: $secondary-fg-color;
$tertiary-content: $tertiary-fg-color;
$quaternary-content: #6F7882;
$quinary-content: $quaternary-content;
$background: $primary-bg-color;
// used for dialog box text // used for dialog box text
$light-fg-color: $header-panel-text-secondary-color; $light-fg-color: $header-panel-text-secondary-color;
@ -99,7 +93,6 @@ $lightbox-background-bg-color: #000;
$lightbox-background-bg-opacity: 0.85; $lightbox-background-bg-opacity: 0.85;
$settings-grey-fg-color: #a2a2a2; $settings-grey-fg-color: #a2a2a2;
$settings-profile-placeholder-bg-color: #e7e7e7;
$settings-profile-overlay-placeholder-fg-color: #454545; $settings-profile-overlay-placeholder-fg-color: #454545;
$settings-profile-button-bg-color: #e7e7e7; $settings-profile-button-bg-color: #e7e7e7;
$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color; $settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
@ -114,7 +107,6 @@ $groupheader-button-color: $header-panel-text-primary-color;
$rightpanel-button-color: $header-panel-text-primary-color; $rightpanel-button-color: $header-panel-text-primary-color;
$icon-button-color: $header-panel-text-primary-color; $icon-button-color: $header-panel-text-primary-color;
$roomtopic-color: $text-secondary-color; $roomtopic-color: $text-secondary-color;
$eventtile-meta-color: $roomtopic-color;
$header-divider-color: $header-panel-text-primary-color; $header-divider-color: $header-panel-text-primary-color;
$composer-e2e-icon-color: $header-panel-text-primary-color; $composer-e2e-icon-color: $header-panel-text-primary-color;
@ -223,6 +215,16 @@ $eventbubble-bg-hover: #1C2026;
$eventbubble-avatar-outline: $bg-color; $eventbubble-avatar-outline: $bg-color;
$eventbubble-reply-color: #C1C6CD; $eventbubble-reply-color: #C1C6CD;
// Legacy theme backports
$primary-content: $primary-fg-color;
$secondary-content: $secondary-fg-color;
$tertiary-content: $tertiary-fg-color;
$quaternary-content: #6F7882;
$quinary-content: $quaternary-content;
$background: $primary-bg-color;
$panel-actions: $roomtile-selected-bg-color;
// Legacy theme backports
// ***** Mixins! ***** // ***** Mixins! *****
@define-mixin mx_DialogButton { @define-mixin mx_DialogButton {

43
res/themes/legacy-light/css/_legacy-light.scss
View file

@ -28,24 +28,6 @@ $tertiary-fg-color: $primary-fg-color;
$primary-bg-color: #ffffff; $primary-bg-color: #ffffff;
$muted-fg-color: #61708b; // Commonly used in headings and relevant alt text $muted-fg-color: #61708b; // Commonly used in headings and relevant alt text
// Legacy theme backports
$accent: #0DBD8B;
$alert: #FF5B55;
$links: #0086e6;
$primary-content: $primary-fg-color;
$secondary-content: $secondary-fg-color;
$tertiary-content: $tertiary-fg-color;
$quaternary-content: #C1C6CD;
$quinary-content: #e3e8f0;
$system: #F4F6FA;
$background: $primary-bg-color;
$panels: rgba($system, 0.9);
$panel-base: #8D97A5; // This color is not intended for use in the app
$panel-selected: rgba($tertiary-content, 0.3);
$panel-hover: rgba($tertiary-content, 0.1);
$panel-actions: rgba($tertiary-content, 0.2);
$space-nav: rgba($tertiary-content, 0.15);
// used for dialog box text // used for dialog box text
$light-fg-color: #747474; $light-fg-color: #747474;
@ -164,7 +146,6 @@ $blockquote-bar-color: #ddd;
$blockquote-fg-color: #777; $blockquote-fg-color: #777;
$settings-grey-fg-color: #a2a2a2; $settings-grey-fg-color: #a2a2a2;
$settings-profile-placeholder-bg-color: #e7e7e7;
$settings-profile-overlay-placeholder-fg-color: #2e2f32; $settings-profile-overlay-placeholder-fg-color: #2e2f32;
$settings-profile-button-bg-color: #e7e7e7; $settings-profile-button-bg-color: #e7e7e7;
$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color; $settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
@ -188,13 +169,10 @@ $groupheader-button-color: #91a1c0;
$rightpanel-button-color: #91a1c0; $rightpanel-button-color: #91a1c0;
$icon-button-color: #91a1c0; $icon-button-color: #91a1c0;
$roomtopic-color: #9e9e9e; $roomtopic-color: #9e9e9e;
$eventtile-meta-color: $roomtopic-color;
$composer-e2e-icon-color: #91a1c0; $composer-e2e-icon-color: #91a1c0;
$header-divider-color: #91a1c0; $header-divider-color: #91a1c0;
$voipcall-plinth-color: $system;
// ******************** // ********************
$theme-button-bg-color: #e3e8f0; $theme-button-bg-color: #e3e8f0;
@ -216,8 +194,29 @@ $presence-online: $accent-color;
$presence-away: #d9b072; $presence-away: #d9b072;
$presence-offline: #e3e8f0; $presence-offline: #e3e8f0;
// Legacy theme backports
$accent: #0DBD8B;
$alert: #FF5B55;
$links: #0086e6;
$primary-content: $primary-fg-color;
$secondary-content: $secondary-fg-color;
$tertiary-content: $tertiary-fg-color;
$quaternary-content: #6F7882;
$quinary-content: $quaternary-content;
$system: #F4F6FA;
$background: $primary-bg-color;
$panels: rgba($system, 0.9);
$panel-base: #8D97A5; // This color is not intended for use in the app
$panel-selected: rgba($tertiary-content, 0.3);
$panel-hover: rgba($tertiary-content, 0.1);
$panel-actions: $roomtile-selected-bg-color;
$space-nav: rgba($tertiary-content, 0.15);
// Legacy theme backports
// ******************** // ********************
$voipcall-plinth-color: $system;
$username-variant1-color: #368bd6; $username-variant1-color: #368bd6;
$username-variant2-color: #ac3ba8; $username-variant2-color: #ac3ba8;
$username-variant3-color: #03b381; $username-variant3-color: #03b381;

2
res/themes/light-custom/css/_custom.scss
View file

@ -64,7 +64,7 @@ $authpage-modal-bg-color: var(--timeline-background-color-50pct); //still needs
$roomheader-bg-color: var(--timeline-background-color); $roomheader-bg-color: var(--timeline-background-color);
// //
// --roomlist-highlights-color // --roomlist-highlights-color
$roomtile-selected-bg-color: var(--roomlist-highlights-color); $panel-actions: var(--roomlist-highlights-color);
// //
// --sidebar-color // --sidebar-color
$groupFilterPanel-bg-color: var(--sidebar-color); $groupFilterPanel-bg-color: var(--sidebar-color);

3
res/themes/light/css/_light.scss
View file

@ -152,7 +152,6 @@ $blockquote-bar-color: #ddd;
$blockquote-fg-color: #777; $blockquote-fg-color: #777;
$settings-grey-fg-color: #a2a2a2; $settings-grey-fg-color: #a2a2a2;
$settings-profile-placeholder-bg-color: $system;
$settings-profile-overlay-placeholder-fg-color: #2e2f32; $settings-profile-overlay-placeholder-fg-color: #2e2f32;
$settings-profile-button-bg-color: #e7e7e7; $settings-profile-button-bg-color: #e7e7e7;
$settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color; $settings-profile-button-fg-color: $settings-profile-overlay-placeholder-fg-color;
@ -175,7 +174,6 @@ $groupheader-button-color: #91A1C0;
$rightpanel-button-color: #91A1C0; $rightpanel-button-color: #91A1C0;
$icon-button-color: $quaternary-content; $icon-button-color: $quaternary-content;
$roomtopic-color: #9e9e9e; $roomtopic-color: #9e9e9e;
$eventtile-meta-color: $roomtopic-color;
$composer-e2e-icon-color: #91A1C0; $composer-e2e-icon-color: #91A1C0;
$header-divider-color: #91A1C0; $header-divider-color: #91A1C0;
@ -196,7 +194,6 @@ $groupFilterPanel-divider-color: $roomlist-header-color;
$roomtile-preview-color: $secondary-content; $roomtile-preview-color: $secondary-content;
$roomtile-default-badge-bg-color: #61708b; $roomtile-default-badge-bg-color: #61708b;
$roomtile-selected-bg-color: #FFF;
$presence-online: $accent-color; $presence-online: $accent-color;
$presence-away: #d9b072; $presence-away: #d9b072;