|
|
|
@ -4,45 +4,12 @@ import { createGlobalStyle } from 'styled-components';
|
|
|
|
|
import { classicLight } from './';
|
|
|
|
|
import { declareCSSVariables, THEME_GLOBALS } from './globals';
|
|
|
|
|
|
|
|
|
|
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 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';
|
|
|
|
|
|
|
|
|
|
// default to classic light theme
|
|
|
|
|
export const SessionGlobalStyles = createGlobalStyle`
|
|
|
|
|
html {
|
|
|
|
@ -83,37 +50,9 @@ export const SessionGlobalStyles = createGlobalStyle`
|
|
|
|
|
--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-avatar-border-color: ${avatarBorderColor};
|
|
|
|
|
|
|
|
|
|
/* New Theme */
|
|
|
|
|