Skip to content

Commit

Permalink
feat: more cleanup and added grey to COLORS
Browse files Browse the repository at this point in the history
  • Loading branch information
@yougotwill
yougotwill committed Oct 11, 2022
1 parent a33e034 commit 948a531
Show file tree
Hide file tree
Showing 4 changed files with 13 additions and 64 deletions.
6 changes: 3 additions & 3 deletions stylesheets/_lightbox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}
}
61 changes: 0 additions & 61 deletions ts/themes/SessionTheme.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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 */
Expand Down
5 changes: 5 additions & 0 deletions ts/themes/constants/colors.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ type Colors = {
TRANSPARENT: string;
WHITE: string;
BLACK: string;
GREY: string;
};

// Session Brand Color
Expand Down Expand Up @@ -59,6 +60,9 @@ const white = '#FFFFFF';
// Black
const black = '#000000';

// Grey
const grey = '#616161';

const COLORS: Colors = {
PRIMARY: {
GREEN: primaryGreen,
Expand All @@ -78,6 +82,7 @@ const COLORS: Colors = {
TRANSPARENT: transparent,
WHITE: white,
BLACK: black,
GREY: grey,
};

export type PrimaryColorStateType =
Expand Down
5 changes: 5 additions & 0 deletions ts/themes/globals.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export type ThemeGlobals = {
'--transparent-color': string;
'--white-color': string;
'--black-color': string;
'--grey-color': string;

/* Shadows */
'--shadow-color': string;
Expand Down Expand Up @@ -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)`,
Expand All @@ -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).
Expand Down

0 comments on commit 948a531

Please sign in to comment.