From c1edd6d0b52bc7aa0ef6992cb2ef77ecea4852e0 Mon Sep 17 00:00:00 2001 From: Bruno Windels Date: Tue, 1 Oct 2019 15:31:43 +0200 Subject: [PATCH] apply new pallete with 13 colors --- res/themes/light-custom/css/_custom.scss | 140 +++++++++--------- res/themes/light-custom/css/light-custom.scss | 34 ----- 2 files changed, 73 insertions(+), 101 deletions(-) diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index 1531afc7bb..5af7caa43e 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -1,5 +1,5 @@ // -// PALETTE COLOR: accent color +// --accent-color $accent-color: var(--accent-color); $button-bg-color: var(--accent-color); $button-link-fg-color: var(--accent-color); @@ -12,87 +12,93 @@ $togglesw-on-color: var(--accent-color); $username-variant3-color: var(--accent-color); $accent-color-50pct: var(--accent-color-50pct); //still needs alpha at .5 // -// PALETTE COLOR: background color -$authpage-body-bg-color: var(--background-color); -$avatar-bg-color: var(--background-color); -$button-secondary-bg-color: var(--background-color); -$field-focused-label-bg-color: var(--background-color); -$lightbox-border-color: var(--background-color); -$menu-bg-color: var(--background-color); -$message-action-bar-bg-color: var(--background-color); -$primary-bg-color: var(--background-color); -$roomtile-focused-bg-color: var(--background-color); -$roomtile-selected-bg-color: var(--background-color); -$togglesw-ball-color: var(--background-color); -$droptarget-bg-color: var(--background-color-50pct); //still needs alpha at .5 -$authpage-modal-bg-color: var(--background-color-50pct); //still needs alpha at .59 +// --timeline-background-color +$authpage-body-bg-color: var(--timeline-background-color); +$button-secondary-bg-color: var(--timeline-background-color); +$field-focused-label-bg-color: var(--timeline-background-color); +$lightbox-border-color: var(--timeline-background-color); +$menu-bg-color: var(--timeline-background-color); +$avatar-bg-color: var(--timeline-background-color); +$message-action-bar-bg-color: var(--timeline-background-color); +$primary-bg-color: var(--timeline-background-color); +$roomtile-focused-bg-color: var(--timeline-background-color); +$togglesw-ball-color: var(--timeline-background-color); +$droptarget-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .5 +$authpage-modal-bg-color: var(--timeline-background-color-50pct); //still needs alpha at .59 // -// PALETTE COLOR: base color -$interactive-tooltip-bg-color: var(--base-color); -$tagpanel-bg-color: var(--base-color); -$tooltip-timeline-bg-color: var(--base-color); +// --roomlist-highlights-color +$roomtile-selected-bg-color: var(--roomlist-highlights-color); // -// PALETTE COLOR: panel color -$event-selected-color: var(--panel-color); -$header-panel-bg-color: var(--panel-color); -$reaction-row-button-bg-color: var(--panel-color); -$panel-gradient: var(--panel-color-0pct), var(--panel-color); +// --sidebar-color +$interactive-tooltip-bg-color: var(--sidebar-color); +$tagpanel-bg-color: var(--sidebar-color); +$tooltip-timeline-bg-color: var(--sidebar-color); +$dialog-backdrop-color: var(--sidebar-color-50pct); +// +// --roomlist-background-color +$event-selected-color: var(--roomlist-background-color); +$header-panel-bg-color: var(--roomlist-background-color); +$reaction-row-button-bg-color: var(--roomlist-background-color); +$panel-gradient: var(--roomlist-background-color-0pct), var(--roomlist-background-color); // these were #f2f5f8 instead of #f3f8fd, but close enough -$dark-panel-bg-color: var(--panel-color); -$input-lighter-bg-color: var(--panel-color); -$plinth-bg-color: var(--panel-color); -$roomsublist-background: var(--panel-color); -$secondary-accent-color: var(--panel-color); -$selected-color: var(--panel-color); -$widget-menu-bar-bg-color: var(--panel-color); +$dark-panel-bg-color: var(--roomlist-background-color); +$input-lighter-bg-color: var(--roomlist-background-color); +$plinth-bg-color: var(--roomlist-background-color); +$roomsublist-background: var(--roomlist-background-color); +$secondary-accent-color: var(--roomlist-background-color); +$selected-color: var(--roomlist-background-color); +$widget-menu-bar-bg-color: var(--roomlist-background-color); // -// PALETTE COLOR: panel contrast color -$input-darker-bg-color: var(--panel-contrast-color); -$panel-divider-color: var(--panel-contrast-color);// originally #dee1f3, not #e3e8f0, but close enough -$primary-hairline-color: var(--panel-contrast-color);// originally #e5e5e5, not #e3e8f0, but close enough -// -// PALETTE COLOR: body text color -$message-action-bar-fg-color: var(--body-text-color); -$primary-fg-color: var(--body-text-color); -$settings-profile-overlay-placeholder-fg-color: var(--body-text-color); -$dialog-backdrop-color: var(--body-text-color-50pct); //still needs alpha at .38 -$roomtopic-color: var(--body-text-color-50pct); //still needs alpha at .5 -$tab-label-fg-color: var(--body-text-color); -$tab-label-icon-bg-color: var(--body-text-color); //was #454545 +// --timeline-text-color +$message-action-bar-fg-color: var(--timeline-text-color); +$primary-fg-color: var(--timeline-text-color); +$settings-profile-overlay-placeholder-fg-color: var(--timeline-text-color); +$roomtopic-color: var(--timeline-text-color-50pct); +$tab-label-fg-color: var(--timeline-text-color); +$tab-label-icon-bg-color: var(--timeline-text-color); //was #454545 // was #212121 -$roomtile-notified-color: var(--body-text-color); -$roomtile-selected-color: var(--body-text-color); -$topleftmenu-color: var(--body-text-color); +$topleftmenu-color: var(--timeline-text-color); // was #45474a -$dialog-title-fg-color: var(--body-text-color); -$roomheader-color: var(--body-text-color); -$tab-label-fg-color: var(--body-text-color); +$dialog-title-fg-color: var(--timeline-text-color); +$tab-label-fg-color: var(--timeline-text-color); // was #4e5054 -$authpage-lang-color: var(--body-text-color); +$authpage-lang-color: var(--timeline-text-color); +$roomheader-color: var(--timeline-text-color); // -// PALETTE COLOR: body contrast color -$authpage-secondary-color: var(--body-contrast-color); -$memberstatus-placeholder-color: var(--body-contrast-color); -$notice-secondary-color: var(--body-contrast-color); -$pinned-color: var(--body-contrast-color); -$roomsublist-label-fg-color: var(--body-contrast-color); -$roomtile-name-color: var(--body-contrast-color); -$settings-subsection-fg-color: var(--body-contrast-color); -$roomheader-addroom-bg-color: var(--body-contrast-color); +// --roomlist-text-color +$roomtile-notified-color: var(--roomlist-text-color); +$roomtile-selected-color: var(--roomlist-text-color); +// +// --roomlist-text-secondary-color +$roomsublist-label-fg-color: var(--roomlist-text-secondary-color); +$roomtile-name-color: var(--roomlist-text-secondary-color); +// +// --roomlist-separator-color +$input-darker-bg-color: var(--roomlist-separator-color); +$panel-divider-color: var(--roomlist-separator-color);// originally #dee1f3, but close enough +$primary-hairline-color: var(--roomlist-separator-color);// originally #e5e5e5, but close enough +// +// --timeline-text-secondary-color +$authpage-secondary-color: var(--timeline-text-secondary-color); +$memberstatus-placeholder-color: var(--timeline-text-secondary-color); +$notice-secondary-color: var(--timeline-text-secondary-color); +$pinned-color: var(--timeline-text-secondary-color); +$settings-subsection-fg-color: var(--timeline-text-secondary-color); +$roomheader-addroom-bg-color: var(--timeline-text-secondary-color); // was #747474 -$light-fg-color: var(--body-contrast-color); +$light-fg-color: var(--timeline-text-secondary-color); // was #777777 -$blockquote-fg-color: var(--body-contrast-color); +$blockquote-fg-color: var(--timeline-text-secondary-color); // was #888888 -$greyed-fg-color: var(--body-contrast-color); -$info-plinth-fg-color: var(--body-contrast-color); -$preview-widget-fg-color: var(--body-contrast-color); +$greyed-fg-color: var(--timeline-text-secondary-color); +$info-plinth-fg-color: var(--timeline-text-secondary-color); +$preview-widget-fg-color: var(--timeline-text-secondary-color); // -// PALETTE COLOR: primary color +// --primary-color $accent-color-alt: var(--primary-color); $input-focused-border-color: var(--primary-color); // -// PALETTE COLOR: warning color +// --warning-color $button-danger-bg-color: var(--warning-color); $event-highlight-fg-color: var(--warning-color); $input-invalid-border-color: var(--warning-color); diff --git a/res/themes/light-custom/css/light-custom.scss b/res/themes/light-custom/css/light-custom.scss index a75db83305..278ca5f0b1 100644 --- a/res/themes/light-custom/css/light-custom.scss +++ b/res/themes/light-custom/css/light-custom.scss @@ -3,37 +3,3 @@ @import "../../light/css/_light.scss"; @import "_custom.scss"; @import "../../../../res/css/_components.scss"; - -// defaults -body { - // fully opaque - --accent-color: #03b381; - --background-color: #ffffff; - --base-color: #27303a; - --panel-color: #f3f8fd; - --panel-contrast-color: #e3e8f0; - --body-text-color: #2e2f32; - --body-contrast-color: #61708b; - --primary-color: #368bd6; - --warning-color: #ff4b55; - // 0% opaque - --accent-color-0pct: #03b38100; - --background-color-0pct: #ffffff00; - --base-color-0pct: #27303a00; - --panel-color-0pct: #f3f8fd00; - --panel-contrast-color-0pct: #e3e8f000; - --body-text-color-0pct: #2e2f3200; - --body-contrast-color-0pct: #61708b00; - --primary-color-0pct: #368bd600; - --warning-color-0pct: #ff4b5500; - // 50% opaque - --accent-color-50pct: #03b3817f; - --background-color-50pct: #ffffff7f; - --base-color-50pct: #27303a7f; - --panel-color-50pct: #f3f8fd7f; - --panel-contrast-color-50pct: #e3e8f07f; - --body-text-color-50pct: #2e2f327f; - --body-contrast-color-50pct: #61708b7f; - --primary-color-50pct: #368bd67f; - --warning-color-50pct: #ff4b557f; -}