Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix issues with custom themes (#6937)

Browse Source 
Fallback to non-custom colors in custom themes

Signed-off-by: Šimon Brandner <simon.bra.ag@gmail.com>
This commit is contained in:
Šimon Brandner 2021-10-13 16:43:01 +02:00 committed by GitHub
parent a539eada69
commit 15076ce796
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
res/themes/legacy-light/css/_legacy-light.scss
View File

@ -12,9 +12,6 @@ $font-family: 'Nunito', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Arial
$monospace-font-family: 'Inconsolata', 'Twemoji', 'Apple Color Emoji', 'Segoe UI Emoji', 'Courier', monospace, 'Noto Color Emoji';
// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=557%3A0
$system: #F4F6FA;
// unified palette
// try to use these colors when possible
$accent-color: #03b381;
@ -32,12 +29,22 @@ $primary-bg-color: #ffffff;
$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
$light-fg-color: #747474;

22
res/themes/light-custom/css/_custom.scss
View File

@ -18,18 +18,18 @@ $font-family: var(--font-family, $font-family);
$monospace-font-family: var(--font-family-monospace, $monospace-font-family);
// Colors from Figma Compound https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=559%3A741
$accent: var(--accent);
$alert: var(--alert);
$links: var(--links);
$primary-content: var(--primary-content);
$secondary-content: var(--secondary-content);
$tertiary-content: var(--tertiary-content);
$quaternary-content: var(--quaternary-content);
$quinary-content: var(--quinary-content);
$system: var(--system);
$background: var(--background);
$accent: var(--accent, $accent);
$alert: var(--alert, $alert);
$links: var(--links, $links);
$primary-content: var(--primary-content, $primary-content);
$secondary-content: var(--secondary-content, $secondary-content);
$tertiary-content: var(--tertiary-content, $tertiary-content);
$quaternary-content: var(--quaternary-content, $quaternary-content);
$quinary-content: var(--quinary-content, $quinary-content);
$system: var(--system, $system);
$background: var(--background, $background);
$panels: rgba($system, 0.9);
$panel-base: var(--panel-base); // This color is not intended for use in the app
$panel-base: var(--panel-base, $tertiary-content); // This color is not intended for use in the app
$panel-selected: rgba($panel-base, 0.3);
$panel-hover: rgba($panel-base, 0.1);
$panel-actions: rgba($panel-base, 0.2);