feat: more cleanup and added grey to COLORS
This commit is contained in:
William Grant
parent
a33e0345aa
commit
948a531eed
|
|
@ -33,18 +33,18 @@
|
|||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--color-gray-color);
|
||||
background: var(--gray-color);
|
||||
}
|
||||
|
||||
&.save {
|
||||
&:before {
|
||||
@include color-svg('../images/save.svg', white);
|
||||
@include color-svg('../images/save.svg', var(--white-color));
|
||||
}
|
||||
}
|
||||
|
||||
&.close {
|
||||
&:before {
|
||||
@include color-svg('../images/x.svg', white);
|
||||
@include color-svg('../images/x.svg', var(--white-color));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ type Colors = {
|
|||
TRANSPARENT: string;
|
||||
WHITE: string;
|
||||
BLACK: string;
|
||||
GREY: string;
|
||||
};
|
||||
|
||||
// Session Brand Color
|
||||
|
|
@ -59,6 +60,9 @@ const white = '#FFFFFF';
|
|||
// Black
|
||||
const black = '#000000';
|
||||
|
||||
// Grey
|
||||
const grey = '#616161';
|
||||
|
||||
const COLORS: Colors = {
|
||||
PRIMARY: {
|
||||
GREEN: primaryGreen,
|
||||
|
|
@ -78,6 +82,7 @@ const COLORS: Colors = {
|
|||
TRANSPARENT: transparent,
|
||||
WHITE: white,
|
||||
BLACK: black,
|
||||
GREY: grey,
|
||||
};
|
||||
|
||||
export type PrimaryColorStateType =
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export type ThemeGlobals = {
|
|||
'--transparent-color': string;
|
||||
'--white-color': string;
|
||||
'--black-color': string;
|
||||
'--grey-color': string;
|
||||
|
||||
/* Shadows */
|
||||
'--shadow-color': string;
|
||||
|
|
@ -47,6 +48,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
|
|||
'--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)`,
|
||||
|
|
@ -62,6 +64,9 @@ export const THEME_GLOBALS: ThemeGlobals = {
|
|||
'--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)',
|
||||
|
||||
// TODO Theming - Add selection colors for dark and light themes
|
||||
// Current light uses #00000088 and dark uses #FFFFFF88
|
||||
};
|
||||
|
||||
// These should only be needed for the global style (at root).
|
||||
|
|
|
|||
Loading…
Reference in New Issue