You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
256 lines
8.1 KiB
TypeScript
256 lines
8.1 KiB
TypeScript
import { isTestIntegration } from '../shared/env_vars';
|
|
import { hexColorToRGB } from '../util/hexColorToRGB';
|
|
import { COLORS } from './constants/colors';
|
|
import { ThemeColorVariables } from './variableColors';
|
|
|
|
function setDuration(duration: number | string) {
|
|
return `${!isTestIntegration() ? duration : typeof duration === 'string' ? '0s' : '0'}`;
|
|
}
|
|
|
|
export function pxValueToNumber(value: string) {
|
|
const numberValue = Number(value.replace('px', ''));
|
|
if (Number.isNaN(numberValue)) {
|
|
throw new Error('Invalid number value');
|
|
}
|
|
return numberValue;
|
|
}
|
|
|
|
// These variables are independent of the current theme
|
|
type ThemeGlobals = {
|
|
/* Fonts */
|
|
'--font-default': string;
|
|
'--font-accent': string;
|
|
'--font-mono': string;
|
|
|
|
'--font-size-xl': string;
|
|
'--font-size-lg': string;
|
|
'--font-size-md': string;
|
|
'--font-size-sm': string;
|
|
'--font-size-xs': string;
|
|
|
|
'--font-size-h1': string;
|
|
'--font-size-h2': string;
|
|
'--font-size-h3': string;
|
|
'--font-size-h4': string;
|
|
|
|
/* Margins */
|
|
'--margins-3xl': string;
|
|
'--margins-2xl': string;
|
|
'--margins-xl': string;
|
|
'--margins-lg': string;
|
|
'--margins-md': string;
|
|
'--margins-sm': string;
|
|
'--margins-xs': string;
|
|
'--margins-xxs': string;
|
|
|
|
/* Padding */
|
|
'--padding-message-content': string;
|
|
'--padding-link-preview': string;
|
|
'--width-avatar-group-msg-list': string;
|
|
|
|
/* Border Radius */
|
|
'--border-radius': string;
|
|
'--border-radius-message-box': string;
|
|
|
|
/* Sizes */
|
|
'--main-view-header-height': string;
|
|
'--composition-container-height': string;
|
|
'--search-input-height': string;
|
|
|
|
/* Durations */
|
|
'--default-duration': string;
|
|
'--default-duration-seconds': string;
|
|
'--duration-message-highlight': string;
|
|
'--duration-message-highlight-seconds': string;
|
|
'--duration-typing-animation': string;
|
|
'--duration-session-spinner': string;
|
|
'--duration-spinner': string;
|
|
'--duration-pulse': string;
|
|
'--duration-right-panel': string;
|
|
'--duration-onion-status-glow': string;
|
|
'--duration-progress-bar': string;
|
|
'--duration-onboarding-container': string;
|
|
'--duration-modal-error-faded': string;
|
|
'--duration-modal-error-shown': string;
|
|
'--duration-modal-to-inbox': string;
|
|
'--duration-session-logo-text': string;
|
|
|
|
/* Colors */
|
|
'--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;
|
|
'--grey-color': string;
|
|
|
|
/* Shadows */
|
|
'--shadow-color': string;
|
|
'--drop-shadow': string;
|
|
'--context-menu-shadow-color': string;
|
|
'--scroll-button-shadow': 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;
|
|
|
|
/* Avatar Border */
|
|
'--avatar-border-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 */
|
|
'--message-link-preview-background-color': string;
|
|
|
|
/* Right Panel */
|
|
'--right-panel-width': string;
|
|
'--right-panel-height': string;
|
|
'--right-panel-attachment-width': string;
|
|
'--right-panel-attachment-height': string;
|
|
|
|
/* Left Panel */
|
|
'--left-panel-width': string;
|
|
|
|
/* Actions panel (the 80px of the 380px of the left pane) */
|
|
'--actions-panel-width': string;
|
|
|
|
/* Main panel */
|
|
'--main-panel-content-width': string;
|
|
|
|
/* Contact Row */
|
|
'--contact-row-height': string;
|
|
'--contact-row-break-height': string;
|
|
};
|
|
|
|
type Theme = ThemeGlobals | ThemeColorVariables;
|
|
|
|
export type ThemeKeys = keyof ThemeGlobals | keyof ThemeColorVariables;
|
|
|
|
export function getThemeValue(key: ThemeKeys) {
|
|
return getComputedStyle(document.documentElement).getPropertyValue(key);
|
|
}
|
|
|
|
export function setThemeValues(variables: Theme) {
|
|
// eslint-disable-next-line no-restricted-syntax
|
|
for (const [key, value] of Object.entries(variables)) {
|
|
document.documentElement.style.setProperty(key, value);
|
|
}
|
|
}
|
|
|
|
// These are only set once in the global style (at root).
|
|
export const THEME_GLOBALS: ThemeGlobals = {
|
|
'--font-default': 'Roboto',
|
|
'--font-accent': 'Loor',
|
|
'--font-mono': 'SpaceMono',
|
|
|
|
'--font-size-xl': '19px',
|
|
'--font-size-lg': '17px',
|
|
'--font-size-md': '15px',
|
|
'--font-size-sm': '13px',
|
|
'--font-size-xs': '11px',
|
|
|
|
'--font-size-h1': '30px',
|
|
'--font-size-h2': '24px',
|
|
'--font-size-h3': '20px',
|
|
'--font-size-h4': '16px',
|
|
|
|
'--margins-3xl': '35px',
|
|
'--margins-2xl': '30px',
|
|
'--margins-xl': '25px',
|
|
'--margins-lg': '20px',
|
|
'--margins-md': '15px',
|
|
'--margins-sm': '10px',
|
|
'--margins-xs': '5px',
|
|
'--margins-xxs': '2.5px',
|
|
|
|
'--padding-message-content': '7px 13px',
|
|
'--padding-link-preview': '-7px -13px 7px -13px', // bottom has positive value because a link preview has always a body below
|
|
'--width-avatar-group-msg-list': '46px', // the width used by the avatar (and its margins when rendered as part of a group.)
|
|
|
|
'--border-radius': '5px',
|
|
'--border-radius-message-box': '16px',
|
|
|
|
'--main-view-header-height': '68px',
|
|
'--composition-container-height': '60px',
|
|
'--search-input-height': '34px',
|
|
|
|
'--default-duration': setDuration('0.25s'),
|
|
'--default-duration-seconds': setDuration(0.25), // framer-motion requires a number
|
|
'--duration-message-highlight': setDuration('1s'),
|
|
'--duration-message-highlight-seconds': setDuration(1),
|
|
'--duration-typing-animation': setDuration('1600ms'),
|
|
'--duration-session-spinner': setDuration('0.6s'),
|
|
'--duration-spinner': setDuration('3000ms'),
|
|
'--duration-pulse': setDuration('1s'),
|
|
'--duration-right-panel': setDuration('0.3s'),
|
|
'--duration-onion-status-glow': setDuration(10),
|
|
'--duration-progress-bar': setDuration(0.5),
|
|
'--duration-onboarding-container': setDuration(1),
|
|
'--duration-modal-error-faded': setDuration('100ms'),
|
|
'--duration-modal-error-shown': setDuration(0.25),
|
|
'--duration-modal-to-inbox': setDuration('0.1s'),
|
|
'--duration-session-logo-text': setDuration('0s'),
|
|
|
|
'--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,
|
|
'--grey-color': COLORS.GREY,
|
|
|
|
'--shadow-color': 'var(--black-color)',
|
|
'--drop-shadow': '0 0 4px 0 var(--shadow-color)',
|
|
'--context-menu-shadow-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`,
|
|
'--scroll-button-shadow': `0 0 7px 0 rgba(${hexColorToRGB(COLORS.BLACK)}, 0.5)`,
|
|
|
|
'--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.6)`,
|
|
'--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)',
|
|
|
|
'--avatar-border-color': 'var(--transparent-color)',
|
|
|
|
'--message-link-preview-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06)`,
|
|
|
|
'--right-panel-width': '420px',
|
|
'--right-panel-height': '100%',
|
|
'--right-panel-attachment-width': 'calc(var(--right-panel-width) - 2 * var(--margins-2xl) - 7px)',
|
|
'--right-panel-attachment-height':
|
|
'calc(var(--right-panel-height) - 2 * var(--margins-2xl) -7px)',
|
|
|
|
'--left-panel-width': '380px',
|
|
'--actions-panel-width': '80px',
|
|
'--main-panel-content-width': 'calc(100vw - var(--left-panel-width))',
|
|
|
|
'--contact-row-height': '60px',
|
|
'--contact-row-break-height': '20px',
|
|
};
|