element-portable/res/themes/light-custom/css/_custom.scss
Bruno Windels 01909f81c4 also theme values close to custom palette variables
these values are not exactly the same as the palette values,
so we're essentially flattening the color palette used in the
theme, but this is needed when assigning custom colors for it
to look good.
2019-09-26 16:16:05 +02:00

103 lines
4.5 KiB
SCSS

//
// PALETTE COLOR: accent color
$accent-color: var(--accent-color);
$button-bg-color: var(--accent-color);
$button-link-fg-color: var(--accent-color);
$button-primary-bg-color: var(--accent-color);
$input-valid-border-color: var(--accent-color);
$reaction-row-button-selected-border-color: var(--accent-color);
$roomsublist-chevron-color: var(--accent-color);
$tab-label-active-bg-color: var(--accent-color);
$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
//
// PALETTE COLOR: base color
$interactive-tooltip-bg-color: var(--base-color);
$tagpanel-bg-color: var(--base-color);
$tooltip-timeline-bg-color: var(--base-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);
// 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);
//
// 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
// was #212121
$roomtile-notified-color: var(--body-text-color);
$roomtile-selected-color: var(--body-text-color);
$topleftmenu-color: var(--body-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);
// was #4e5054
$authpage-lang-color: var(--body-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);
// was #747474
$light-fg-color: var(--body-contrast-color);
// was #777777
$blockquote-fg-color: var(--body-contrast-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);
//
// PALETTE COLOR: primary color
$accent-color-alt: var(--primary-color);
$input-focused-border-color: var(--primary-color);
//
// PALETTE COLOR: warning color
$button-danger-bg-color: var(--warning-color);
$event-highlight-fg-color: var(--warning-color);
$input-invalid-border-color: var(--warning-color);
$mention-user-pill-bg-color: var(--warning-color);
$notice-primary-color: var(--warning-color);
$pinned-unread-color: var(--warning-color);
$warning-color: var(--warning-color);
$button-danger-disabled-bg-color: var(--warning-color-50pct); // still needs alpha at 0.5