apply new pallete with 13 colors
This commit is contained in:
Bruno Windels
parent
558f8daeeb
commit
c1edd6d0b5
2 changed files with 73 additions and 101 deletions
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue