apply new pallete with 13 colors

pull/21833/head
Bruno Windels 2019-10-01 15:31:43 +02:00
parent 558f8daeeb
commit c1edd6d0b5
2 changed files with 73 additions and 101 deletions

View File

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

View File

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