699 lines
30 KiB
TypeScript
699 lines
30 KiB
TypeScript
import React from 'react';
|
|
|
|
import { createGlobalStyle } from 'styled-components';
|
|
import { hexColorToRGB } from '../util/hexColorToRGB';
|
|
import { COLORS, THEMES } from './colors';
|
|
|
|
export const whiteColor = '#ffffff';
|
|
const whiteColorRGB = '255, 255, 255'; // we need rgb values if we want css variables within rgba
|
|
const blackColor = '#000000';
|
|
const blackColorRGB = '0, 0, 0'; // we need rgb values if we want css variables within rgba
|
|
const warning = '#e7b100';
|
|
const destructive = '#ff453a';
|
|
const destructiveAltColor = '#ff4538';
|
|
const destructiveAltColorRGB = '255, 69, 56';
|
|
const accentLightTheme = '#00e97b';
|
|
const accentDarkTheme = '#00f782';
|
|
const borderLightThemeColor = '#f1f1f1';
|
|
const borderDarkThemeColor = '#ffffff0F';
|
|
|
|
// THEME INDEPEDENT COLORS
|
|
const sessionBlack = '#282829';
|
|
const avatarBorderColor = '#00000059';
|
|
|
|
// Blacks
|
|
|
|
// Blues
|
|
const lightBlueColor = '#a2d2f4';
|
|
const darkBlueColor = '#2090ea';
|
|
|
|
// Greens
|
|
const sessionGreenColor = accentDarkTheme;
|
|
|
|
// Grays
|
|
const grayColor = '#616161';
|
|
const grayColorRBG = '97, 97, 97';
|
|
const lightGrayColor = '#8b8e91';
|
|
const lighterGrayColor = '#e9e9e9';
|
|
const lightestGrayColor = '#f3f3f3';
|
|
const darkGrayColor = '#414347';
|
|
const darkGrayColorRGB = '65, 67, 71';
|
|
const darkerGrayColor = '#2f2f2f';
|
|
const darkestGrayColor = '#17191d';
|
|
|
|
// Transparent
|
|
const transparentColor = 'transparent';
|
|
|
|
// DARK COLORS
|
|
const darkColorAccent = accentDarkTheme;
|
|
const darkColorAccentRGB = '0, 247, 130';
|
|
const darkColorAccentButton = accentDarkTheme;
|
|
const darkColorText = whiteColor;
|
|
const darkColorTextRGB = whiteColorRGB;
|
|
const darkColorTextOpposite = blackColor;
|
|
|
|
const darkColorTextSubtle = `${whiteColor}99`;
|
|
const darkColorTextAccent = accentDarkTheme;
|
|
const darkColorSessionShadow = `0 0 4px 0 ${whiteColor}33`;
|
|
const darkColorComposeViewBg = '#232323';
|
|
export const darkColorSentMessageBg = accentDarkTheme;
|
|
const darkColorClickableHovered = '#414347';
|
|
const darkColorSessionBorder = `1px solid ${borderDarkThemeColor}`;
|
|
const darkColorSessionBorderColor = borderDarkThemeColor;
|
|
const darkColorRecoveryPhraseBannerBg = '#1f1f1f';
|
|
const darkColorPillDivider = 'var(--color-darker-gray-color)';
|
|
const darkColorLastSeenIndicator = accentDarkTheme;
|
|
const darkColorQuoteBottomBarBg = '#404040';
|
|
const darkColorCellBackground = '#1b1b1b';
|
|
export const darkColorReceivedMessageBg = '#2d2d2d';
|
|
const darkColorReceivedMessageText = whiteColor;
|
|
|
|
const darkColorPillDividerText = '#a0a0a0';
|
|
const darkInputBackground = darkColorCellBackground;
|
|
const darkFilterSessionText = 'none';
|
|
const darkUnreadBorder = `4px solid ${accentDarkTheme}`;
|
|
|
|
const darkScrollbarThumb = darkGrayColor;
|
|
const darkFakeChatBubbleBg = '#212121';
|
|
|
|
const darkInboxBackground = '#171717';
|
|
const darkLeftPaneOverlayBg = darkInboxBackground;
|
|
const darkConversationItemSelected = '#404040';
|
|
const darkConversationItemHasUnread = '#2c2c2c';
|
|
const darkConversationList = '#1b1b1b';
|
|
|
|
const darkTextHighlight = `${whiteColor}88`;
|
|
const darkForegroundPrimary = whiteColor;
|
|
const darkBackgroundPrimary = darkGrayColor;
|
|
const darkButtonGreen = accentDarkTheme;
|
|
const darkModalBackground = '#101011';
|
|
|
|
const grey67 = '#434343';
|
|
const darkMessageRequestBannerBackground = darkConversationItemHasUnread;
|
|
const darkMessageRequestBannerIconBackground = grey67;
|
|
const darkMessageRequestBannerUnreadBackground = grey67;
|
|
const darkMessageRequestBannerIcon = '#adadad';
|
|
|
|
export const switchHtmlToDarkTheme = () => {
|
|
document.documentElement.style.setProperty('--color-accent', darkColorAccent);
|
|
document.documentElement.style.setProperty('--color-accent-rgb', darkColorAccentRGB);
|
|
document.documentElement.style.setProperty('--color-accent-button', darkColorAccentButton);
|
|
document.documentElement.style.setProperty('--color-text', darkColorText);
|
|
document.documentElement.style.setProperty('--color-text-rgb', darkColorTextRGB);
|
|
document.documentElement.style.setProperty('--color-text-menu-highlighted', lightColorText);
|
|
document.documentElement.style.setProperty('--color-text-subtle', darkColorTextSubtle);
|
|
document.documentElement.style.setProperty('--color-text-accent', darkColorTextAccent);
|
|
document.documentElement.style.setProperty('--color-text-opposite', darkColorTextOpposite);
|
|
document.documentElement.style.setProperty('--color-session-shadow', darkColorSessionShadow);
|
|
document.documentElement.style.setProperty(
|
|
'--color-compose-view-button-background',
|
|
darkColorComposeViewBg
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-sent-message-background',
|
|
darkColorSentMessageBg
|
|
);
|
|
document.documentElement.style.setProperty('--color-sent-message-text', sessionBlack);
|
|
document.documentElement.style.setProperty(
|
|
'--color-clickable-hovered',
|
|
darkColorClickableHovered
|
|
);
|
|
document.documentElement.style.setProperty('--color-session-border', darkColorSessionBorder);
|
|
document.documentElement.style.setProperty('--color-session-border', darkColorSessionBorderColor);
|
|
document.documentElement.style.setProperty(
|
|
'--color-recovery-phrase-banner-background',
|
|
darkColorRecoveryPhraseBannerBg
|
|
);
|
|
document.documentElement.style.setProperty('--color-pill-divider', darkColorPillDivider);
|
|
document.documentElement.style.setProperty(
|
|
'--color-last-seen-indicator',
|
|
darkColorLastSeenIndicator
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-quote-bottom-bar-background',
|
|
darkColorQuoteBottomBarBg
|
|
);
|
|
document.documentElement.style.setProperty('--color-cell-background', darkColorCellBackground);
|
|
document.documentElement.style.setProperty(
|
|
'--color-received-message-text',
|
|
darkColorReceivedMessageText
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-received-message-background',
|
|
darkColorReceivedMessageBg
|
|
);
|
|
document.documentElement.style.setProperty('--color-pill-divider-text', darkColorPillDividerText);
|
|
document.documentElement.style.setProperty('--color-input-background', darkInputBackground);
|
|
|
|
document.documentElement.style.setProperty('--filter-session-text', darkFilterSessionText);
|
|
document.documentElement.style.setProperty('--border-unread', darkUnreadBorder);
|
|
|
|
document.documentElement.style.setProperty('--color-scroll-bar-thumb', darkScrollbarThumb);
|
|
document.documentElement.style.setProperty(
|
|
'--color-fake-chat-bubble-background',
|
|
darkFakeChatBubbleBg
|
|
);
|
|
document.documentElement.style.setProperty('--color-inbox-background', darkInboxBackground);
|
|
document.documentElement.style.setProperty(
|
|
'--color-left-pane-overlay-background',
|
|
darkLeftPaneOverlayBg
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-conversation-item-selected',
|
|
darkConversationItemSelected
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-conversation-item-has-unread',
|
|
darkConversationItemHasUnread
|
|
);
|
|
document.documentElement.style.setProperty('--color-conversation-list', darkConversationList);
|
|
|
|
document.documentElement.style.setProperty('--color-text-highlight', darkTextHighlight);
|
|
document.documentElement.style.setProperty('--color-foreground-primary', darkForegroundPrimary);
|
|
document.documentElement.style.setProperty('--color-background-primary', darkBackgroundPrimary);
|
|
document.documentElement.style.setProperty('--color-button-green', darkButtonGreen);
|
|
document.documentElement.style.setProperty('--color-modal-background', darkModalBackground);
|
|
document.documentElement.style.setProperty('--border-session', darkColorSessionBorder);
|
|
|
|
document.documentElement.style.setProperty(
|
|
'--color-request-banner-background',
|
|
darkMessageRequestBannerBackground
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-request-banner-icon-background',
|
|
darkMessageRequestBannerIconBackground
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-request-banner-unread-background',
|
|
darkMessageRequestBannerUnreadBackground
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-request-banner-icon',
|
|
darkMessageRequestBannerIcon
|
|
);
|
|
};
|
|
|
|
// LIGHT COLORS
|
|
const lightColorAccent = accentLightTheme;
|
|
const lightColorAccentRGB = '0, 233, 123';
|
|
const lightColorAccentButton = blackColor;
|
|
const lightColorText = blackColor;
|
|
const lightColorTextRGB = blackColorRGB;
|
|
const lightColorTextOpposite = whiteColor;
|
|
const lightColorTextSubtle = `${blackColor}99`;
|
|
const lightColorTextAccent = accentLightTheme;
|
|
const lightColorSessionShadow = `0 0 4px 0 ${blackColor}5E`;
|
|
const lightColorComposeViewBg = '#efefef';
|
|
export const lightColorSentMessageBg = accentLightTheme;
|
|
const lightColorClickableHovered = '#dfdfdf';
|
|
const lightColorSessionBorderColor = borderLightThemeColor;
|
|
const lightColorSessionBorder = `1px solid ${lightColorSessionBorderColor}`;
|
|
const lightColorRecoveryPhraseBannerBg = whiteColor;
|
|
const lightColorPillDivider = `${blackColor}1A`;
|
|
const lightColorLastSeenIndicator = blackColor;
|
|
const lightColorQuoteBottomBarBg = '#f0f0f0';
|
|
const lightColorCellBackground = '#f9f9f9';
|
|
export const lightColorReceivedMessageBg = '#f5f5f5';
|
|
const lightColorReceivedMessageText = blackColor;
|
|
|
|
const lightColorPillDividerText = '#555555';
|
|
|
|
const lightInputBackground = '#efefef';
|
|
const lightFilterSessionText = 'brightness(0) saturate(100%)';
|
|
const lightUnreadBorder = `4px solid ${accentLightTheme}`;
|
|
|
|
const lightScrollbarThumb = darkGrayColor;
|
|
const lightFakeChatBubbleBg = '#f5f5f5';
|
|
|
|
const lightInboxBackground = whiteColor;
|
|
const lightLeftPaneOverlayBg = lightInboxBackground;
|
|
const lightConversationItemSelected = '#f0f0f0';
|
|
const lightConversationItemHasUnread = '#fcfcfc';
|
|
const lightConversationList = '#f9f9f9';
|
|
|
|
const lightTextHighlight = `${blackColor}88`;
|
|
const lightForegroundPrimary = whiteColor;
|
|
const lightBackgroundPrimary = '#272726';
|
|
const lightButtonGreen = '#272726';
|
|
const lightModalBackground = '#fcfcfc';
|
|
|
|
const lightMessageRequestBannerBackground = lightColorQuoteBottomBarBg;
|
|
const lightMessageRequestBannerIconBackground = '#585858';
|
|
const lightMessageRequestBannerUnreadBackground = lightColorClickableHovered;
|
|
const lightMessageRequestBannerIcon = whiteColor;
|
|
|
|
export const switchHtmlToLightTheme = () => {
|
|
document.documentElement.style.setProperty('--color-accent', lightColorAccent);
|
|
document.documentElement.style.setProperty('--color-accent-rgb', lightColorAccentRGB);
|
|
document.documentElement.style.setProperty('--color-accent-button', lightColorAccentButton);
|
|
document.documentElement.style.setProperty('--color-text', lightColorText);
|
|
document.documentElement.style.setProperty('--color-text-rgb', lightColorTextRGB);
|
|
document.documentElement.style.setProperty('--color-text-menu-highlighted', lightColorText);
|
|
document.documentElement.style.setProperty('--color-text-subtle', lightColorTextSubtle);
|
|
document.documentElement.style.setProperty('--color-text-accent', lightColorTextAccent);
|
|
document.documentElement.style.setProperty('--color-text-opposite', lightColorTextOpposite);
|
|
|
|
document.documentElement.style.setProperty('--color-session-shadow', lightColorSessionShadow);
|
|
document.documentElement.style.setProperty(
|
|
'--color-compose-view-button-background',
|
|
lightColorComposeViewBg
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-sent-message-background',
|
|
lightColorSentMessageBg
|
|
);
|
|
// TODO: This might be wrong. Didn't merge correctly.
|
|
document.documentElement.style.setProperty('--color-sent-message-text', blackColor);
|
|
document.documentElement.style.setProperty(
|
|
'--color-clickable-hovered',
|
|
lightColorClickableHovered
|
|
);
|
|
document.documentElement.style.setProperty('--color-session-border', lightColorSessionBorder);
|
|
document.documentElement.style.setProperty(
|
|
'--color-session-border',
|
|
lightColorSessionBorderColor
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-recovery-phrase-banner-background',
|
|
lightColorRecoveryPhraseBannerBg
|
|
);
|
|
document.documentElement.style.setProperty('--color-pill-divider', lightColorPillDivider);
|
|
document.documentElement.style.setProperty(
|
|
'--color-last-seen-indicator',
|
|
lightColorLastSeenIndicator
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-quote-bottom-bar-background',
|
|
lightColorQuoteBottomBarBg
|
|
);
|
|
document.documentElement.style.setProperty('--color-cell-background', lightColorCellBackground);
|
|
document.documentElement.style.setProperty(
|
|
'--color-received-message-text',
|
|
lightColorReceivedMessageText
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-received-message-background',
|
|
lightColorReceivedMessageBg
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-pill-divider-text',
|
|
lightColorPillDividerText
|
|
);
|
|
document.documentElement.style.setProperty('--color-input-background', lightInputBackground);
|
|
document.documentElement.style.setProperty('--filter-session-text', lightFilterSessionText);
|
|
document.documentElement.style.setProperty('--border-unread', lightUnreadBorder);
|
|
|
|
document.documentElement.style.setProperty('--color-scroll-bar-thumb', lightScrollbarThumb);
|
|
document.documentElement.style.setProperty(
|
|
'--color-fake-chat-bubble-background',
|
|
lightFakeChatBubbleBg
|
|
);
|
|
document.documentElement.style.setProperty('--color-inbox-background', lightInboxBackground);
|
|
document.documentElement.style.setProperty(
|
|
'--color-left-pane-overlay-background',
|
|
lightLeftPaneOverlayBg
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-conversation-item-selected',
|
|
lightConversationItemSelected
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-conversation-item-has-unread',
|
|
lightConversationItemHasUnread
|
|
);
|
|
document.documentElement.style.setProperty('--color-conversation-list', lightConversationList);
|
|
|
|
document.documentElement.style.setProperty('--color-text-highlight', lightTextHighlight);
|
|
document.documentElement.style.setProperty('--color-foreground-primary', lightForegroundPrimary);
|
|
document.documentElement.style.setProperty('--color-background-primary', lightBackgroundPrimary);
|
|
document.documentElement.style.setProperty('--color-button-green', lightButtonGreen);
|
|
document.documentElement.style.setProperty('--color-modal-background', lightModalBackground);
|
|
document.documentElement.style.setProperty('--border-session', lightColorSessionBorder);
|
|
document.documentElement.style.setProperty(
|
|
'--color-request-banner-background',
|
|
lightMessageRequestBannerBackground
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-request-banner-icon-background',
|
|
lightMessageRequestBannerIconBackground
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-request-banner-unread-background',
|
|
lightMessageRequestBannerUnreadBackground
|
|
);
|
|
document.documentElement.style.setProperty(
|
|
'--color-request-banner-icon',
|
|
lightMessageRequestBannerIcon
|
|
);
|
|
};
|
|
|
|
// default to classic light theme
|
|
export const SessionGlobalStyles = createGlobalStyle`
|
|
html {
|
|
/* Old Theme Variables */
|
|
/* FONTS */
|
|
--font-default: 'Roboto';
|
|
--font-font-accent: 'Loor';
|
|
--font-font-mono: 'SpaceMono';
|
|
--font-size-xs: 11px;
|
|
--font-size-sm: 13px;
|
|
--font-size-md: 15px;
|
|
--font-size-lg: 17px;
|
|
--font-size-h1: 30px;
|
|
--font-size-h2: 24px;
|
|
--font-size-h3: 20px;
|
|
--font-size-h4: 16px;
|
|
|
|
/* MARGINS */
|
|
--margins-xs: 5px;
|
|
--margins-sm: 10px;
|
|
--margins-md: 15px;
|
|
--margins-lg: 20px;
|
|
|
|
/* PADDING */
|
|
// TODO Theming - review and update after Audric has done link preview fix
|
|
--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
|
|
--border-radius-message-box: 16px;
|
|
|
|
/* SIZES */
|
|
--main-view-header-height: 63px;
|
|
|
|
/* ANIMATIONS */
|
|
--default-duration: 0.25s;
|
|
|
|
/* FILTERS */
|
|
--filter-session-text: ${lightFilterSessionText};
|
|
|
|
/* BORDERS */
|
|
--border-unread: ${lightUnreadBorder};
|
|
--border-session: ${lightColorSessionBorder};
|
|
|
|
/* CONSTANTS */
|
|
--composition-container-height: 60px;
|
|
--search-input-height: 34px;
|
|
|
|
/* COLORS NOT CHANGING BETWEEN THEMES */
|
|
--color-black-color: ${blackColor};
|
|
--color-black-color-rgb: ${blackColorRGB};
|
|
--color-light-black-color: ${`rgba(${blackColorRGB}, 0.2)`};
|
|
--color-lighter-black-color: ${`rgba(${blackColorRGB}, 0.15)`};
|
|
--color-darkest-black-color: ${`rgba(${blackColorRGB}, 0.6)`};
|
|
--color-session-green-color: ${sessionGreenColor};
|
|
|
|
--color-white-color: ${whiteColor};
|
|
--color-white-color-rgb: ${whiteColorRGB};
|
|
--color-lighter-white-color: ${`rgba(${whiteColorRGB}, 0.15)`};
|
|
--color-darkest-white-color: ${`rgba(${whiteColorRGB}, 0.85)`};
|
|
|
|
--color-gray-color: ${grayColor};
|
|
--color-gray-color-rgb: ${grayColorRBG};
|
|
--color-light-gray-color: ${lightGrayColor};
|
|
--color-lighter-gray-color: ${lighterGrayColor};
|
|
--color-lightest-gray-color: ${lightestGrayColor};
|
|
--color-dark-gray-color: ${darkGrayColor};
|
|
--color-dark-gray-color-rgb: ${darkGrayColorRGB};
|
|
--color-darker-gray-color: ${darkerGrayColor};
|
|
--color-darkest-gray-color: ${darkestGrayColor};
|
|
--color-light-blue-color: ${lightBlueColor};
|
|
--color-dark-blue-color: ${darkBlueColor};
|
|
--color-transparent-color: ${transparentColor};
|
|
|
|
--color-warning: ${warning};
|
|
--color-destructive: ${destructive};
|
|
--color-destructive-alt: ${destructiveAltColor};
|
|
--color-destructive-alt-rgb: ${destructiveAltColorRGB};
|
|
/* COLORS */
|
|
--color-accent: ${lightColorAccent};
|
|
--color-accent-rgb: ${lightColorAccentRGB};
|
|
--color-accent-button: ${lightColorAccentButton};
|
|
|
|
--color-text: ${lightColorText};
|
|
--color-text-rgb: ${lightColorTextRGB};
|
|
--color-text-subtle: ${lightColorTextSubtle};
|
|
--color-text-accent: ${lightColorTextAccent};
|
|
--color-text-opposite: ${lightColorTextOpposite};
|
|
|
|
--color-session-shadow: ${lightColorSessionShadow};
|
|
--color-compose-view-button-background: ${lightColorComposeViewBg};
|
|
--color-sent-message-background: ${lightColorSentMessageBg};
|
|
--color-sent-message-text: ${blackColor};
|
|
--color-clickable-hovered: ${lightColorClickableHovered};
|
|
--color-session-border: ${lightColorSessionBorderColor};
|
|
--color-recovery-phrase-banner-background: ${lightColorRecoveryPhraseBannerBg};
|
|
--color-pill-divider: ${lightColorPillDivider};
|
|
--color-last-seen-indicator: ${lightColorLastSeenIndicator};
|
|
--color-quote-bottom-bar-background: ${lightColorQuoteBottomBarBg};
|
|
--color-cell-background: ${lightColorCellBackground};
|
|
--color-pill-divider-text: ${lightColorPillDividerText};
|
|
--color-input-background: ${lightInputBackground};
|
|
--color-scroll-bar-thumb: ${lightScrollbarThumb};
|
|
--color-fake-chat-bubble-background: ${lightFakeChatBubbleBg};
|
|
--color-inbox-background: ${lightInboxBackground};
|
|
--color-left-pane-overlay-background: ${lightLeftPaneOverlayBg};
|
|
--color-conversation-item-selected: ${lightConversationItemSelected};
|
|
--color-conversation-item-has-unread: ${lightConversationItemHasUnread};
|
|
--color-conversation-list: ${lightConversationList};
|
|
--color-text-highlight: ${lightTextHighlight};
|
|
--color-foreground-primary: ${lightForegroundPrimary};
|
|
--color-background-primary: ${lightBackgroundPrimary};
|
|
--color-button-green: ${lightButtonGreen};
|
|
--color-modal-background: ${lightModalBackground};
|
|
--color-avatar-border-color: ${avatarBorderColor};
|
|
|
|
/* New Theme Variables */
|
|
/* Colors */
|
|
--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};
|
|
/* TODO Theming this should be overridable */
|
|
--primary-color: ${THEMES.CLASSIC_LIGHT.PRIMARY};
|
|
--danger-color: ${THEMES.CLASSIC_LIGHT.DANGER};
|
|
--transparent-color: ${COLORS.TRANSPARENT};
|
|
--white-color: ${COLORS.WHITE};
|
|
--black-color: ${COLORS.BLACK};
|
|
|
|
/* Backgrounds */
|
|
--background-primary-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
|
|
--background-secondary-color: ${THEMES.CLASSIC_LIGHT.COLOR5};
|
|
|
|
/* Text */
|
|
--text-primary-color: ${THEMES.CLASSIC_LIGHT.COLOR0};
|
|
--text-secondary-color: ${THEMES.CLASSIC_LIGHT.COLOR1};
|
|
|
|
/* Borders */
|
|
--border-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
|
|
|
|
/* Modals */
|
|
/* TODO Theming Clarify what those transparent colors mean */
|
|
|
|
/* Text Box */
|
|
/* Also used for inputs specifically password box input */
|
|
--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 */
|
|
--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 */
|
|
--menu-button-background-color: ${THEMES.CLASSIC_LIGHT.COLOR0};
|
|
--menu-button-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR1};
|
|
/* TODO Theming Make a icon fill varible that uses the background color? */
|
|
--menu-button-icon-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
|
|
|
|
/* 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: ${THEMES.CLASSIC_LIGHT.COLOR4};
|
|
--chat-buttons-background-hover-color: ${THEMES.CLASSIC_LIGHT.COLOR3};
|
|
--chat-buttons-icon-color: var(--text-primary-color);
|
|
|
|
/* Settings Tabs */
|
|
--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);
|
|
|
|
/* TODO Theming probably consolidate this */
|
|
/* Buttons */
|
|
/* Outline (Default) */
|
|
--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);
|
|
/* TODO Theming we might not need this */
|
|
--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(--text-secondary-color);
|
|
|
|
/* TODO Theming are solid buttons ever disabled? */
|
|
/* Solid */
|
|
/* TODO Theming - Should Pills have their own colors */
|
|
/* Also used for Pills */
|
|
--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};
|
|
/* TODO Theming - Only light themes have shadows? */
|
|
--button-solid-shadow-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.25);
|
|
|
|
/* Simple */
|
|
--button-simple-text-color: var(--text-primary-color);
|
|
--button-simple-disabled-color: var(--text-primary-color);
|
|
|
|
/* Icons */
|
|
--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);
|
|
|
|
/* TODO Theming Consolidate with code */
|
|
/* Conversation Tab */
|
|
/* This is also user for Overlay Tabs, Contact Rows, Convesation List Items, Message Search Results, Session Search Input?, Message Requests Banner, Member List Item, Contact List Items, Message Right Click Highlighting etc. */
|
|
--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);
|
|
/* TODO Theming account for overriding */
|
|
--conversation-tab-color-strip-color: var(--primary-color);
|
|
|
|
/* Search Bar */
|
|
--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 Bars */
|
|
/* TODO Theming think this is the track? Should add thumb and other scroll colors here */
|
|
/* Default */
|
|
--scroll-bar-fill-color: var(--text-secondary-color);
|
|
/* Zoom Bar */
|
|
--zoom-bar-interval-color: var(--text-secondary-color);
|
|
/* TODO Theming think this is the thumb? */
|
|
--zoom-bar-selector-color: var(--primary-color);
|
|
|
|
/* Toggle Switch */
|
|
--toggle-switch-ball-color: var(--white-color);
|
|
--toggle-switch-ball-shadow-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.15);
|
|
/* TODO Theming think this should be white instead of transparent */
|
|
--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);
|
|
|
|
/* TODO Theming Think this is part of the Convesations Tab */
|
|
/* Unread Messages Alert */
|
|
--unread-messages-alert-background-color: var(--primary-color);
|
|
--unread-messages-alert-text-color: var(--text-primary-color);
|
|
|
|
/* toggles between the Light and Dark mode for a Theme */
|
|
/* Color Mode Button */
|
|
--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);
|
|
|
|
/* Path Button */
|
|
--button-path-default-color: ${COLORS.PATH.DEFAULT};
|
|
--button-path-connecting-color: ${COLORS.PATH.CONNECTING};
|
|
--button-path-error-color: ${COLORS.PATH.ERROR};
|
|
|
|
/* Emoji Reaction Bar */
|
|
--emoji-reaction-bar-background-color: ${THEMES.CLASSIC_LIGHT.COLOR4};
|
|
/* NOTE only used for + icon */
|
|
--emoji-reaction-bar-icon-background-color: var(--background-primary-color);
|
|
--emoji-reaction-bar-icon-color: var(--text-primary-color);
|
|
|
|
/* TODO Theming - Should Pills have their own colors? */
|
|
|
|
/* Modals */
|
|
--modal-background-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.3);
|
|
--modal-background-content-color: ${THEMES.CLASSIC_LIGHT.COLOR6};
|
|
--modal-text-color: var(--text-primary-color);
|
|
--modal-text-danger-color: var(--danger-color);
|
|
--modal-drop-shadow: 0px 0px 10px rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22);
|
|
|
|
/* Toasts */
|
|
--toast-progress-color: rgba(${hexColorToRGB(THEMES.CLASSIC_LIGHT.COLOR0)}, 0.1);
|
|
|
|
/* Right Panel Items */
|
|
/* Also used for Session Dropdown */
|
|
--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 Text Logo */
|
|
/* Loads SVG as IMG and uses a filter to change 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);
|
|
|
|
/* Right Click / Context Menu) */
|
|
--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);
|
|
--context-menu-shadow-color: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22);
|
|
|
|
/* 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: rgba(${hexColorToRGB(COLORS.BLACK)}, 0.06);
|
|
|
|
/* Shadows */
|
|
/* Used across all themes */
|
|
--shadow-color: var(--black-color);
|
|
--drop-shadow: 0 0 4px 0 var(--shadow-color);
|
|
|
|
/* Suggestions i.e. Mentions and Emojis */
|
|
--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;
|
|
|
|
/* Lightbox */
|
|
--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);
|
|
|
|
/* Inputs */
|
|
/* Also used for some TextAreas */
|
|
--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);
|
|
|
|
};
|
|
`;
|
|
|
|
export const SessionTheme = ({ children }: { children: any }) => (
|
|
<>
|
|
<SessionGlobalStyles />
|
|
{children}
|
|
</>
|
|
);
|