Fix issues with custom themes (#6937)

Fallback to non-custom colors in custom themes

Signed-off-by: Šimon Brandner <[email protected]>

Author: SimonBrandner

res/themes/legacy-light/css/_legacy-light.scss

@@ -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;

res/themes/light-custom/css/_custom.scss

@@ -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);