mirror of
https://github.com/vector-im/element-web.git
synced 2024-11-16 05:04:57 +08:00
apply new pallete with 13 colors
This commit is contained in:
Bruno Windels
parent
558f8daeeb
commit
c1edd6d0b5
@ -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);
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user