feat: global variables and classic light and dark use new system
William Grant
3 years ago
parent
2f0e993af3
commit
8c97cbcafa
@ -0,0 +1,144 @@
|
||||
import { hexColorToRGB } from '../util/hexColorToRGB';
|
||||
import { COLORS, THEMES } from './constants/colors';
|
||||
import { ThemeColorVariables } from './variableColors';
|
||||
|
||||
export const classicDark: ThemeColorVariables = {
|
||||
'--primary-color': THEMES.CLASSIC_DARK.PRIMARY,
|
||||
'--danger-color': THEMES.CLASSIC_DARK.DANGER,
|
||||
'--disabled-color': THEMES.CLASSIC_DARK.DISABLED,
|
||||
|
||||
'--background-primary-color': THEMES.CLASSIC_DARK.COLOR1,
|
||||
'--background-secondary-color': THEMES.CLASSIC_DARK.COLOR0,
|
||||
|
||||
'--text-primary-color': THEMES.CLASSIC_DARK.COLOR6,
|
||||
'--text-secondary-color': THEMES.CLASSIC_DARK.COLOR5,
|
||||
|
||||
'--border-color': THEMES.CLASSIC_DARK.COLOR3,
|
||||
|
||||
'--text-box-background-color': 'var(--background-secondary-color)',
|
||||
'--text-box-text-control-color': 'var(--text-secondary-color)',
|
||||
'--text-box-text-user-color': 'var(--text-primary-color)',
|
||||
'--text-box-border-color': 'var(--border-color)',
|
||||
|
||||
'--message-bubbles-sent-background-color': 'var(--primary-color)',
|
||||
'--message-bubbles-received-background-color': THEMES.CLASSIC_DARK.COLOR2,
|
||||
'--message-bubbles-sent-text-color': 'var(--background-primary-color)',
|
||||
'--message-bubbles-received-text-color': 'var(--text-primary-color)',
|
||||
|
||||
'--menu-button-background-color': 'var(--primary-color)',
|
||||
'--menu-button-background-hover-color': THEMES.CLASSIC_DARK.COLOR4,
|
||||
'--menu-button-icon-color': THEMES.CLASSIC_DARK.COLOR6,
|
||||
|
||||
'--chat-buttons-background-color': THEMES.CLASSIC_DARK.COLOR2,
|
||||
'--chat-buttons-background-hover-color': THEMES.CLASSIC_DARK.COLOR3,
|
||||
'--chat-buttons-icon-color': 'var(--text-primary-color)',
|
||||
|
||||
'--settings-tab-background-color': 'var(--background-primary-color)',
|
||||
'--settings-tab-background-hover-color': THEMES.CLASSIC_DARK.COLOR2,
|
||||
'--settings-tab-background-selected-color': THEMES.CLASSIC_DARK.COLOR3,
|
||||
'--settings-tab-text-color': 'var(--text-primary-color)',
|
||||
|
||||
'--button-outline-background-color': 'var(--transparent-color)',
|
||||
'--button-outline-background-hover-color': `rgba(${hexColorToRGB(
|
||||
THEMES.CLASSIC_DARK.COLOR6
|
||||
)}, 0.3)`,
|
||||
'--button-outline-text-color': 'var(--text-primary-color)',
|
||||
'--button-outline-text-hover-color': 'var(--text-primary-color)',
|
||||
'--button-outline-border-color': 'var(--text-primary-color)',
|
||||
'--button-outline-border-hover-color': 'var(--text-primary-color)',
|
||||
'--button-outline-disabled-color': 'var(--disabled-color)',
|
||||
|
||||
'--button-solid-background-color': THEMES.CLASSIC_DARK.COLOR3,
|
||||
'--button-solid-background-hover-color': THEMES.CLASSIC_DARK.COLOR4,
|
||||
'--button-solid-text-color': 'var(--text-primary-color)',
|
||||
'--button-solid-text-hover-color': 'var(--text-primary-color)',
|
||||
'--button-solid-disabled-color': THEMES.CLASSIC_DARK.COLOR4,
|
||||
'--button-solid-shadow-color': 'none',
|
||||
|
||||
'--button-simple-text-color': 'var(--text-primary-color)',
|
||||
'--button-simple-disabled-color': 'var(--disabled-color)',
|
||||
|
||||
'--button-icon-background-color': 'var(--transparent-color)',
|
||||
'--button-icon-stroke-color': 'var(--text-secondary-color)',
|
||||
'--button-icon-stroke-hover-color': 'var(--text-primary-color)',
|
||||
'--button-icon-stroke-selected-color': 'var(--text-primary-color)',
|
||||
|
||||
'--conversation-tab-background-color': 'var(--background-primary-color)',
|
||||
'--conversation-tab-background-hover-color': THEMES.CLASSIC_DARK.COLOR2,
|
||||
'--conversation-tab-background-selected-color': THEMES.CLASSIC_DARK.COLOR3,
|
||||
'--conversation-tab-background-unread-color': THEMES.CLASSIC_DARK.COLOR2,
|
||||
'--conversation-tab-text-color': 'var(--text-secondary-color)',
|
||||
'--conversation-tab-text-selected-color': 'var(--text-primary-color)',
|
||||
'--conversation-tab-text-unread-color': 'var(--text-primary-color)',
|
||||
'--conversation-tab-text-secondary-color': 'var(--text-secondary-color)',
|
||||
'--conversation-tab-bubble-background-color': THEMES.CLASSIC_DARK.COLOR3,
|
||||
'--conversation-tab-bubble-text-color': 'var(--text-primary-color)',
|
||||
'--conversation-tab-color-strip-color': 'var(--primary-color)',
|
||||
|
||||
'--search-bar-background-color': 'var(--background-secondary-color)',
|
||||
'--search-bar-text-control-color': 'var(--text-secondary-color)',
|
||||
'--search-bar-text-user-color': 'var(--text-primary-color)',
|
||||
'--search-bar-icon-color': 'var(--text-secondary-color)',
|
||||
'--search-bar-icon-hover-color': 'var(--text-primary-color)',
|
||||
|
||||
'--scroll-bar-track-color': 'none',
|
||||
'--scroll-bar-thumb-color': THEMES.CLASSIC_DARK.COLOR3,
|
||||
'--scroll-bar-thumb-hover-color': THEMES.CLASSIC_DARK.COLOR4,
|
||||
|
||||
'--zoom-bar-track-color': THEMES.CLASSIC_DARK.COLOR3,
|
||||
'--zoom-bar-thumb-color': 'var(--primary-color)',
|
||||
'--zoom-bar-interval-color': 'var(--primary-color)',
|
||||
|
||||
'--toggle-switch-ball-color': 'var(--white-color)',
|
||||
'--toggle-switch-ball-shadow-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.15)`,
|
||||
'--toggle-switch-off-background-color': 'var(--transparent-color)',
|
||||
'--toggle-switch-off-border-color': 'var(--white-color)',
|
||||
'--toggle-switch-on-background-color': 'var(--primary-color)',
|
||||
'--toggle-switch-on-border-color': 'var(--transparent-color)',
|
||||
|
||||
'--unread-messages-alert-background-color': 'var(--primary-color)',
|
||||
'--unread-messages-alert-text-color': THEMES.CLASSIC_DARK.COLOR0,
|
||||
|
||||
'--button-color-mode-stroke-color': 'var(--text-primary-color)',
|
||||
'--button-color-mode-hover-color': 'var(--text-primary-color)',
|
||||
'--button-color-mode-fill-color': 'var(--text-primary-color)',
|
||||
|
||||
'--emoji-reaction-bar-background-color': THEMES.CLASSIC_DARK.COLOR2,
|
||||
'--emoji-reaction-bar-icon-background-color': 'var(--background-secondary-color)',
|
||||
'--emoji-reaction-bar-icon-color': 'var(--text-primary-color)',
|
||||
|
||||
'--modal-background-content-color': 'var(--background-primary-color)',
|
||||
'--modal-text-color': 'var(--text-primary-color)',
|
||||
'--modal-text-danger-color': 'var(--danger-color)',
|
||||
|
||||
'--toast-background-color': 'var(--background-primary-color)',
|
||||
'--toast-text-color': 'var(--text-primary-color)',
|
||||
'--toast-color-strip-color': 'var(--primary-color)',
|
||||
'--toast-progress-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)`,
|
||||
|
||||
'--right-panel-item-background-color': THEMES.CLASSIC_DARK.COLOR2,
|
||||
'--right-panel-item-background-hover-color': THEMES.CLASSIC_DARK.COLOR3,
|
||||
'--right-panel-item-text-color': 'var(--text-primary-color)',
|
||||
|
||||
'--session-logo-text-light-filter': 'none',
|
||||
'--session-logo-text-dark-filter': 'none',
|
||||
'--session-logo-text-current-filter': 'var(--session-logo-text-light-filter)',
|
||||
|
||||
'--context-menu-background-color': 'var(--background-primary-color)',
|
||||
'--context-menu-background-hover-color': 'var(--primary-color)',
|
||||
'--context-menu-text-color': 'var(--text-primary-color)',
|
||||
'--context-menu-text-hover-color': 'var(--black-color)',
|
||||
|
||||
'--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`,
|
||||
|
||||
'--suggestions-background-color': THEMES.CLASSIC_DARK.COLOR2,
|
||||
'--suggestions-background-hover-color': THEMES.CLASSIC_DARK.COLOR3,
|
||||
'--suggestions-text-color': 'var(--text-primary-color)',
|
||||
'--suggestions-shadow': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`,
|
||||
|
||||
'--input-background-color': 'var(--background-secondary-color)',
|
||||
'--input-background-hover-color': 'var(--background-primary-color)',
|
||||
'--input-text-placeholder-color': 'var(--text-secondary-color)',
|
||||
'--input-text-color': 'var(--text-primary-color)',
|
||||
'--input-border-color': 'var(--border-color)',
|
||||
};
|
||||
@ -0,0 +1,144 @@
|
||||
import { hexColorToRGB } from '../util/hexColorToRGB';
|
||||
import { COLORS, THEMES } from './constants/colors';
|
||||
import { ThemeColorVariables } from './variableColors';
|
||||
|
||||
export const classicLight: ThemeColorVariables = {
|
||||
'--primary-color': THEMES.CLASSIC_LIGHT.PRIMARY,
|
||||
'--danger-color': THEMES.CLASSIC_LIGHT.DANGER,
|
||||
'--disabled-color': THEMES.CLASSIC_LIGHT.DISABLED,
|
||||
|
||||
'--background-primary-color': THEMES.CLASSIC_LIGHT.COLOR6,
|
||||
'--background-secondary-color': THEMES.CLASSIC_LIGHT.COLOR5,
|
||||
|
||||
'--text-primary-color': THEMES.CLASSIC_LIGHT.COLOR0,
|
||||
'--text-secondary-color': THEMES.CLASSIC_LIGHT.COLOR1,
|
||||
|
||||
'--border-color': THEMES.CLASSIC_LIGHT.COLOR3,
|
||||
|
||||
'--text-box-background-color': 'var(--background-primary-color)',
|
||||
'--text-box-text-control-color': 'var(--text-secondary-color)',
|
||||
'--text-box-text-user-color': 'var(--text-primary-color)',
|
||||
'--text-box-border-color': THEMES.CLASSIC_LIGHT.COLOR2,
|
||||
|
||||
'--message-bubbles-sent-background-color': 'var(--primary-color)',
|
||||
'--message-bubbles-received-background-color': THEMES.CLASSIC_LIGHT.COLOR3,
|
||||
'--message-bubbles-sent-text-color': 'var(--text-primary-color)',
|
||||
'--message-bubbles-received-text-color': 'var(--text-primary-color)',
|
||||
|
||||
'--menu-button-background-color': THEMES.CLASSIC_LIGHT.COLOR0,
|
||||
'--menu-button-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR1,
|
||||
'--menu-button-icon-color': THEMES.CLASSIC_LIGHT.COLOR6,
|
||||
|
||||
'--chat-buttons-background-color': THEMES.CLASSIC_LIGHT.COLOR4,
|
||||
'--chat-buttons-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR3,
|
||||
'--chat-buttons-icon-color': 'var(--text-primary-color)',
|
||||
|
||||
'--settings-tab-background-color': 'var(--background-primary-color)',
|
||||
'--settings-tab-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR4,
|
||||
'--settings-tab-background-selected-color': THEMES.CLASSIC_LIGHT.COLOR3,
|
||||
'--settings-tab-text-color': 'var(--text-primary-color)',
|
||||
|
||||
'--button-outline-background-color': 'var(--transparent-color)',
|
||||
'--button-outline-background-hover-color': `rgba(${hexColorToRGB(
|
||||
THEMES.CLASSIC_LIGHT.COLOR0
|
||||
)}, 0.1)`,
|
||||
'--button-outline-text-color': 'var(--text-primary-color)',
|
||||
'--button-outline-text-hover-color': 'var(--text-primary-color)',
|
||||
'--button-outline-border-color': 'var(--text-primary-color)',
|
||||
'--button-outline-border-hover-color': 'var(--text-primary-color)',
|
||||
'--button-outline-disabled-color': 'var(--disabled-color)',
|
||||
|
||||
'--button-solid-background-color': 'var(--background-primary-color)',
|
||||
'--button-solid-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR4,
|
||||
'--button-solid-text-color': 'var(--text-primary-color)',
|
||||
'--button-solid-text-hover-color': 'var(--text-primary-color)',
|
||||
'--button-solid-disabled-color': THEMES.CLASSIC_LIGHT.COLOR4,
|
||||
'--button-solid-shadow-color': `rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.25)`,
|
||||
|
||||
'--button-simple-text-color': 'var(--text-primary-color)',
|
||||
'--button-simple-disabled-color': 'var(--disabled-color)',
|
||||
|
||||
'--button-icon-background-color': 'var(--transparent-color)',
|
||||
'--button-icon-stroke-color': 'var(--text-secondary-color)',
|
||||
'--button-icon-stroke-hover-color': 'var(--text-primary-color)',
|
||||
'--button-icon-stroke-selected-color': 'var(--text-primary-color)',
|
||||
|
||||
'--conversation-tab-background-color': THEMES.CLASSIC_LIGHT.COLOR6,
|
||||
'--conversation-tab-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR4,
|
||||
'--conversation-tab-background-selected-color': THEMES.CLASSIC_LIGHT.COLOR4,
|
||||
'--conversation-tab-background-unread-color': 'var(--background-primary-color)',
|
||||
'--conversation-tab-text-color': 'var(--text-secondary-color)',
|
||||
'--conversation-tab-text-selected-color': 'var(--text-primary-color)',
|
||||
'--conversation-tab-text-unread-color': 'var(--text-primary-color)',
|
||||
'--conversation-tab-text-secondary-color': 'var(--text-secondary-color)',
|
||||
'--conversation-tab-bubble-background-color': THEMES.CLASSIC_LIGHT.COLOR3,
|
||||
'--conversation-tab-bubble-text-color': 'var(--text-primary-color)',
|
||||
'--conversation-tab-color-strip-color': 'var(--primary-color)',
|
||||
|
||||
'--search-bar-background-color': 'var(--background-secondary-color)',
|
||||
'--search-bar-text-control-color': 'var(--text-secondary-color)',
|
||||
'--search-bar-text-user-color': 'var(--text-primary-color)',
|
||||
'--search-bar-icon-color': 'var(--text-secondary-color)',
|
||||
'--search-bar-icon-hover-color': 'var(--text-primary-color)',
|
||||
|
||||
'--scroll-bar-track-color': 'none',
|
||||
'--scroll-bar-thumb-color': THEMES.CLASSIC_LIGHT.COLOR2,
|
||||
'--scroll-bar-thumb-hover-color': THEMES.CLASSIC_LIGHT.COLOR1,
|
||||
|
||||
'--zoom-bar-track-color': THEMES.CLASSIC_LIGHT.COLOR3,
|
||||
'--zoom-bar-thumb-color': 'var(--primary-color)',
|
||||
'--zoom-bar-interval-color': 'var(--text-secondary-color)',
|
||||
|
||||
'--toggle-switch-ball-color': 'var(--white-color)',
|
||||
'--toggle-switch-ball-shadow-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.15)`,
|
||||
'--toggle-switch-off-background-color': 'var(--transparent-color)',
|
||||
'--toggle-switch-off-border-color': 'var(--border-color)',
|
||||
'--toggle-switch-on-background-color': 'var(--primary-color)',
|
||||
'--toggle-switch-on-border-color': 'var(--transparent-color)',
|
||||
|
||||
'--unread-messages-alert-background-color': 'var(--primary-color)',
|
||||
'--unread-messages-alert-text-color': THEMES.CLASSIC_LIGHT.COLOR0,
|
||||
|
||||
'--button-color-mode-stroke-color': 'var(--text-secondary-color)',
|
||||
'--button-color-mode-hover-color': 'var(--text-primary-color)',
|
||||
'--button-color-mode-fill-color': 'var(--transparent-color)',
|
||||
|
||||
'--emoji-reaction-bar-background-color': THEMES.CLASSIC_LIGHT.COLOR4,
|
||||
'--emoji-reaction-bar-icon-background-color': 'var(--background-primary-color)',
|
||||
'--emoji-reaction-bar-icon-color': 'var(--text-primary-color)',
|
||||
|
||||
'--modal-background-content-color': THEMES.CLASSIC_LIGHT.COLOR6,
|
||||
'--modal-text-color': 'var(--text-primary-color)',
|
||||
'--modal-text-danger-color': 'var(--danger-color)',
|
||||
|
||||
'--toast-background-color': 'var(--background-primary-color)',
|
||||
'--toast-text-color': 'var(--text-primary-color)',
|
||||
'--toast-color-strip-color': 'var(--primary-color)',
|
||||
'--toast-progress-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.1)`,
|
||||
|
||||
'--right-panel-item-background-color': 'var(--background-secondary-color)',
|
||||
'--right-panel-item-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR4,
|
||||
'--right-panel-item-text-color': 'var(--text-primary-color)',
|
||||
|
||||
'--session-logo-text-light-filter': 'brightness(0) saturate(100%)',
|
||||
'--session-logo-text-dark-filter': 'none',
|
||||
'--session-logo-text-current-filter': 'var(--session-logo-text-light-filter)',
|
||||
|
||||
'--context-menu-background-color': 'var(--background-primary-color)',
|
||||
'--context-menu-background-hover-color': 'var(--primary-color)',
|
||||
'--context-menu-text-color': 'var(--text-primary-color)',
|
||||
'--context-menu-text-hover-color': 'var(--black-color)',
|
||||
|
||||
'--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`,
|
||||
|
||||
'--suggestions-background-color': 'var(--background-secondary-color)',
|
||||
'--suggestions-background-hover-color': THEMES.CLASSIC_LIGHT.COLOR4,
|
||||
'--suggestions-text-color': 'var(--text-primary-color)',
|
||||
'--suggestions-shadow': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.24) 0px 3px 8px`,
|
||||
|
||||
'--input-background-color': 'var(--background-secondary-color)',
|
||||
'--input-background-hover-color': 'var(--background-secondary-color)',
|
||||
'--input-text-placeholder-color': 'var(--text-secondary-color)',
|
||||
'--input-text-color': 'var(--text-primary-color)',
|
||||
'--input-border-color': 'var(--border-color)',
|
||||
};
|
||||
@ -0,0 +1,75 @@
|
||||
import { hexColorToRGB } from '../util/hexColorToRGB';
|
||||
import { COLORS } from './constants/colors';
|
||||
|
||||
// For now this only keeps the colors
|
||||
// TODO Theming add margin, padding, font, variables here.
|
||||
export type ThemeGlobals = {
|
||||
'--green-color': string;
|
||||
'--blue-color': string;
|
||||
'--yellow-color': string;
|
||||
'--pink-color': string;
|
||||
'--purple-color': string;
|
||||
'--orange-color': string;
|
||||
'--red-color': string;
|
||||
'--transparent-color': string;
|
||||
'--white-color': string;
|
||||
'--black-color': string;
|
||||
|
||||
/* Shadows */
|
||||
'--shadow-color': string;
|
||||
'--drop-shadow': string;
|
||||
'--context-menu-shadow-color': string;
|
||||
|
||||
/* Path Button */
|
||||
'--button-path-default-color': string;
|
||||
'--button-path-connecting-color': string;
|
||||
'--button-path-error-color': string;
|
||||
|
||||
/* Modals */
|
||||
'--modal-background-color': string;
|
||||
'--modal-drop-shadow': string;
|
||||
|
||||
/* Lightbox */
|
||||
'--lightbox-background-color': string;
|
||||
'--lightbox-caption-background-color': string;
|
||||
'--lightbox-icon-stroke-color': string;
|
||||
};
|
||||
|
||||
// These are only set once in the global style (at root).
|
||||
export const THEME_GLOBALS: ThemeGlobals = {
|
||||
'--green-color': COLORS.PRIMARY.GREEN,
|
||||
'--blue-color': COLORS.PRIMARY.BLUE,
|
||||
'--yellow-color': COLORS.PRIMARY.YELLOW,
|
||||
'--pink-color': COLORS.PRIMARY.PINK,
|
||||
'--purple-color': COLORS.PRIMARY.PURPLE,
|
||||
'--orange-color': COLORS.PRIMARY.ORANGE,
|
||||
'--red-color': COLORS.PRIMARY.RED,
|
||||
'--transparent-color': COLORS.TRANSPARENT,
|
||||
'--white-color': COLORS.WHITE,
|
||||
'--black-color': COLORS.BLACK,
|
||||
|
||||
'--shadow-color': 'var(--black-color)',
|
||||
'--drop-shadow': `0 0 4px 0 var(--shadow-color)`,
|
||||
'--context-menu-shadow-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`,
|
||||
|
||||
'--button-path-default-color': COLORS.PATH.DEFAULT,
|
||||
'--button-path-connecting-color': COLORS.PATH.CONNECTING,
|
||||
'--button-path-error-color': COLORS.PATH.ERROR,
|
||||
|
||||
'--modal-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.3)`,
|
||||
'--modal-drop-shadow': `0px 0px 10px rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`,
|
||||
|
||||
'--lightbox-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.8)`,
|
||||
'--lightbox-caption-background-color': 'rgba(192, 192, 192, .40)',
|
||||
'--lightbox-icon-stroke-color': 'var(--white-color)',
|
||||
};
|
||||
|
||||
// These should only be needed for the global style (at root).
|
||||
export function declareCSSVariables(variables: Record<string, string>) {
|
||||
let output = '';
|
||||
for (const [key, value] of Object.entries(variables)) {
|
||||
console.log(`${key}: ${value}`);
|
||||
output += `${key}: ${value};\n`;
|
||||
}
|
||||
return output;
|
||||
}
|
||||
@ -0,0 +1,200 @@
|
||||
// Default Theme should be Classic Dark
|
||||
export type ThemeColorVariables = {
|
||||
'--primary-color': string;
|
||||
'--danger-color': string;
|
||||
'--disabled-color': string;
|
||||
|
||||
/* Backgrounds */
|
||||
'--background-primary-color': string;
|
||||
'--background-secondary-color': string;
|
||||
|
||||
/* Text */
|
||||
'--text-primary-color': string;
|
||||
'--text-secondary-color': string;
|
||||
|
||||
/* Borders */
|
||||
'--border-color': string;
|
||||
|
||||
/* Text Box */
|
||||
'--text-box-background-color': string;
|
||||
'--text-box-text-control-color': string;
|
||||
'--text-box-text-user-color': string;
|
||||
'--text-box-border-color': string;
|
||||
|
||||
/* Message Bubbles */
|
||||
'--message-bubbles-sent-background-color': string;
|
||||
'--message-bubbles-received-background-color': string;
|
||||
'--message-bubbles-sent-text-color': string;
|
||||
'--message-bubbles-received-text-color': string;
|
||||
|
||||
/* Menu Button */
|
||||
'--menu-button-background-color': string;
|
||||
'--menu-button-background-hover-color': string;
|
||||
/* TODO Theming Make a icon fill varible that uses the background color? */
|
||||
'--menu-button-icon-color': string;
|
||||
|
||||
/* Chat (Interaction) Buttons */
|
||||
/* Also used for Reaction Bar Buttons */
|
||||
/* Used for Link Preview Attachment Icons */
|
||||
/* Used for Media Grid Item Play Button */
|
||||
'--chat-buttons-background-color': string;
|
||||
'--chat-buttons-background-hover-color': string;
|
||||
'--chat-buttons-icon-color': string;
|
||||
|
||||
/* Settings Tabs */
|
||||
'--settings-tab-background-color': string;
|
||||
'--settings-tab-background-hover-color': string;
|
||||
'--settings-tab-background-selected-color': string;
|
||||
'--settings-tab-text-color': string;
|
||||
|
||||
/* TODO Theming probably consolidate this */
|
||||
/* Buttons */
|
||||
/* Outline (Default) */
|
||||
'--button-outline-background-color': string;
|
||||
'--button-outline-background-hover-color': string;
|
||||
'--button-outline-text-color': string;
|
||||
/* TODO Theming we might not need this */
|
||||
'--button-outline-text-hover-color': string;
|
||||
'--button-outline-border-color': string;
|
||||
'--button-outline-border-hover-color': string;
|
||||
'--button-outline-disabled-color': string;
|
||||
|
||||
/* Solid */
|
||||
/* TODO Theming - Should Pills have their own colors */
|
||||
/* Also used for Pills */
|
||||
'--button-solid-background-color': string;
|
||||
'--button-solid-background-hover-color': string;
|
||||
'--button-solid-text-color': string;
|
||||
'--button-solid-text-hover-color': string;
|
||||
/* Solid buttons stay the same and rely on the disabled pointer */
|
||||
'--button-solid-disabled-color': string;
|
||||
/* TODO Theming - Only light themes have shadows? */
|
||||
'--button-solid-shadow-color': string;
|
||||
|
||||
/* Simple */
|
||||
'--button-simple-text-color': string;
|
||||
'--button-simple-disabled-color': string;
|
||||
|
||||
/* Icons */
|
||||
'--button-icon-background-color': string;
|
||||
'--button-icon-stroke-color': string;
|
||||
'--button-icon-stroke-hover-color': string;
|
||||
'--button-icon-stroke-selected-color': string;
|
||||
|
||||
/* Conversation Tab */
|
||||
/* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Message Requests Banner, Member List Item, Contact List Items, Message Right Click Highlighting etc. */
|
||||
'--conversation-tab-background-color': string;
|
||||
'--conversation-tab-background-hover-color': string;
|
||||
'--conversation-tab-background-selected-color': string;
|
||||
'--conversation-tab-background-unread-color': string;
|
||||
'--conversation-tab-text-color': string;
|
||||
'--conversation-tab-text-selected-color': string;
|
||||
'--conversation-tab-text-unread-color': string;
|
||||
'--conversation-tab-text-secondary-color': string;
|
||||
'--conversation-tab-bubble-background-color': string;
|
||||
'--conversation-tab-bubble-text-color': string;
|
||||
'--conversation-tab-color-strip-color': string;
|
||||
|
||||
/* Search Bar */
|
||||
'--search-bar-background-color': string;
|
||||
'--search-bar-text-control-color': string;
|
||||
'--search-bar-text-user-color': string;
|
||||
'--search-bar-icon-color': string;
|
||||
'--search-bar-icon-hover-color': string;
|
||||
|
||||
/* Scroll Bars */
|
||||
'--scroll-bar-track-color': string;
|
||||
'--scroll-bar-thumb-color': string;
|
||||
'--scroll-bar-thumb-hover-color': string;
|
||||
|
||||
/* Zoom Bar */
|
||||
'--zoom-bar-track-color': string;
|
||||
'--zoom-bar-thumb-color': string;
|
||||
'--zoom-bar-interval-color': string;
|
||||
|
||||
/* Toggle Switch */
|
||||
'--toggle-switch-ball-color': string;
|
||||
'--toggle-switch-ball-shadow-color': string;
|
||||
/* TODO Theming think this should be white instead of transparent */
|
||||
'--toggle-switch-off-background-color': string;
|
||||
'--toggle-switch-off-border-color': string;
|
||||
'--toggle-switch-on-background-color': string;
|
||||
'--toggle-switch-on-border-color': string;
|
||||
|
||||
/* TODO Theming Think this is part of the Convesations Tab */
|
||||
/* Unread Messages Alert */
|
||||
'--unread-messages-alert-background-color': string;
|
||||
'--unread-messages-alert-text-color': string;
|
||||
|
||||
/* toggles between the Light and Dark mode for a Theme */
|
||||
/* Color Mode Button */
|
||||
'--button-color-mode-stroke-color': string;
|
||||
'--button-color-mode-hover-color': string;
|
||||
'--button-color-mode-fill-color': string;
|
||||
|
||||
/* Emoji Reaction Bar */
|
||||
'--emoji-reaction-bar-background-color': string;
|
||||
/* NOTE only used for + icon */
|
||||
'--emoji-reaction-bar-icon-background-color': string;
|
||||
'--emoji-reaction-bar-icon-color': string;
|
||||
|
||||
/* TODO Theming - Should Pills have their own colors? */
|
||||
|
||||
/* Modals */
|
||||
'--modal-background-content-color': string;
|
||||
'--modal-text-color': string;
|
||||
'--modal-text-danger-color': string;
|
||||
|
||||
/* Toasts */
|
||||
'--toast-background-color': string;
|
||||
'--toast-text-color': string;
|
||||
'--toast-color-strip-color': string;
|
||||
'--toast-progress-color': string;
|
||||
|
||||
/* Right Panel Items */
|
||||
/* Also used for Session Dropdown */
|
||||
'--right-panel-item-background-color': string;
|
||||
'--right-panel-item-background-hover-color': string;
|
||||
'--right-panel-item-text-color': string;
|
||||
|
||||
/* Session Text Logo */
|
||||
/* Loads SVG as IMG and uses a filter to change color */
|
||||
'--session-logo-text-light-filter': string;
|
||||
'--session-logo-text-dark-filter': string;
|
||||
'--session-logo-text-current-filter': string;
|
||||
|
||||
/* Right Click / Context Menu) */
|
||||
'--context-menu-background-color': string;
|
||||
'--context-menu-background-hover-color': string;
|
||||
'--context-menu-text-color': string;
|
||||
'--context-menu-text-hover-color': string;
|
||||
|
||||
/* Message Link Preview */
|
||||
/* Also used for Images */
|
||||
/* Also used for the Media Grid Items */
|
||||
/* Also used for Staged Generic Attachments */
|
||||
/* Also used for FileDropZone */
|
||||
/* Used for Quote References Not Found */
|
||||
/* Same for all Themes */
|
||||
'--message-link-preview-background-color': string;
|
||||
|
||||
/* Suggestions i.e. Mentions and Emojis */
|
||||
'--suggestions-background-color': string;
|
||||
'--suggestions-background-hover-color': string;
|
||||
'--suggestions-text-color': string;
|
||||
'--suggestions-shadow': string;
|
||||
|
||||
/* Inputs */
|
||||
/* Also used for some TextAreas */
|
||||
'--input-background-color': string;
|
||||
'--input-background-hover-color': string;
|
||||
'--input-text-placeholder-color': string;
|
||||
'--input-text-color': string;
|
||||
'--input-border-color': string;
|
||||
};
|
||||
|
||||
export function loadThemeColors(variables: ThemeColorVariables) {
|
||||
for (const [key, value] of Object.entries(variables)) {
|
||||
document.documentElement.style.setProperty(key, value);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue