Colors organization (#584)

* Add first pass secondary colors * Flesh out other properties * First font attempt * Update secondary COLORS.white value * v14.0.0-beta.0 * Revert defaultBorder changes * Fix theming equivalence * Update size snapshot * Update secondary colors * Update size snapshot * v14.0.0-beta.1 * refactor and cleanup * update white value and snapshot * change Backgroun to light suffix * added new type * fix colors stories * update artifacts * improve textColor typings * feedback comments * update snapshot * update snapshot * update sizesnapshot Co-authored-by: Michael Altamirano <[email protected]>
curology · Dec 4, 2020 · 2f152ae · 2f152ae
1 parent b9ab141
commit 2f152ae
Show file tree

Hide file tree

Showing 48 changed files with 1,074 additions and 1,356 deletions.
diff --git a/.size-snapshot.json b/.size-snapshot.json
diff --git a/src/constants/boxShadows/index.ts b/src/constants/boxShadows/index.ts
@@ -3,17 +3,18 @@
  */
 
 import { transparentize } from '../../utils';
-import COLORS from '../colors';
+// TODO: Add theme support for box shadow
+import PRIMARY_COLORS from '../colors/primary';
 
-const boxShadowColor = `${COLORS.primary}`;
+const boxShadowColor = `${PRIMARY_COLORS.primary}`;
 const boxShadowOverlayColor = '#505050';
 
 export const BASE_CONFIG = {
   clickable: `0px 8px 24px rgba(52, 51, 82, 0.05)`,
   clickableHover: `0px 8px 24px rgba(52, 51, 82, 0.10)`,
   message: `0 12px 20px 0 ${transparentize(boxShadowColor, 0.05)}`,
-  focus: `0px 0px 0px 2px ${COLORS.white}, 0px 0px 0px 4px ${COLORS.primary}`,
-  focusInner: `inset 0px 0px 0px 2px ${COLORS.primary}`,
+  focus: `0px 0px 0px 2px ${PRIMARY_COLORS.white}, 0px 0px 0px 4px ${PRIMARY_COLORS.primary}`,
+  focusInner: `inset 0px 0px 0px 2px ${PRIMARY_COLORS.primary}`,
 } as const;
 
 export const OLD_BASE_CONFIG = {

diff --git a/src/constants/colors/index.ts b/src/constants/colors/index.ts
diff --git a/src/constants/colors/primary.ts b/src/constants/colors/primary.ts
@@ -1,65 +1,41 @@
 import PropTypes from 'prop-types';
 
-import COLORS from '.';
-
 const PRIMARY_COLORS = {
-  // brand colors
-  primary: COLORS.purple100,
-  primaryTint1: COLORS.purple85,
-  primaryTint2: COLORS.purple70,
-  primaryTint3: COLORS.purple30,
-  primaryTint4: COLORS.purple15,
-  secondary: COLORS.lavender100,
-  secondaryTint1: COLORS.lavender80,
-  secondaryTint2: COLORS.lavender60,
-  secondaryTint3: COLORS.lavender10,
-  secondaryTint4: COLORS.lavender10,
-  tertiary: COLORS.purple4,
-  tertiaryTint1: COLORS.purple4,
-  tertiaryTint2: COLORS.purple4,
-  tertiaryTint3: COLORS.purple4,
-  tertiaryTint4: COLORS.purple4,
-
-  // general colors
-  success: COLORS.statusGreen,
-  successBackground: COLORS.statusGreenBackground,
-  successBorder: COLORS.statusGreenBorder,
-  info: COLORS.statusPurple,
-  infoBackground: COLORS.statusPurpleBackground,
-  infoBorder: COLORS.statusPurpleBorder,
-  error: COLORS.statusRed,
-  errorBackground: COLORS.statusRedBackground,
-  errorBorder: COLORS.statusRedBorder,
-  default: COLORS.purple70,
-  defaultBackground: COLORS.purple10,
-  defaultBorder: COLORS.purple15,
-  accent: COLORS.red,
-  disabled: COLORS.purple10,
-  failure: COLORS.red,
-  hover: COLORS.purple4,
-  warning: COLORS.yellowLight,
-
-  // ui colors
-  background: COLORS.purple4,
-  backgroundDark: COLORS.purple4,
-  border: COLORS.purple10,
-  divider: COLORS.purple10,
-
-  // form colors
-  radioBorder: COLORS.purple30,
-  radioBorderSelected: COLORS.lavender100,
-
-  // typography
-  textMuted: COLORS.purple70,
-  textGhost: COLORS.purple30,
-  textDisabled: COLORS.purple30,
-
-  // overlay
+  primary: '#332E54',
+  primaryTint1: '#524D6E',
+  primaryTint2: '#706D87',
+  primaryTint3: '#C3C0CD',
+  primaryTint4: '#E1E0E6',
+  secondary: '#A6A1E2',
+  secondaryTint1: '#B8B4E8',
+  secondaryTint2: '#CAC7EE',
+  secondaryTint3: '#EFEEF7',
+  secondaryTint4: '#EFEEF7',
+  tertiary: '#F8F8FA',
+  tertiaryTint1: '#F8F8FA',
+  tertiaryTint2: '#F8F8FA',
+  tertiaryTint3: '#F8F8FA',
+  tertiaryTint4: '#F8F8FA',
+  default: '#706D87',
+  defaultLight: '#EDEDF0',
+  defaultBorder: '#E1E0E6',
+  success: '#2B6E33',
+  successLight: '#EAF1EB',
+  successBorder: '#DFE9E0',
+  error: '#BD200F',
+  errorLight: '#F7EAE8',
+  errorBorder: '#F3DEDC',
+  info: '#554CB3',
+  infoLight: '#EEEDF7',
+  infoBorder: '#E5E3F3',
+  background: '#F8F8FA',
+  backgroundDark: '#F8F8FA',
   overlay: 'rgba(45, 45, 48, 0.7)',
-  overlaySolid: 'rgba(45, 45, 48, 1)',
-
-  black: COLORS.black,
-  white: COLORS.white,
+  overlaySolid: '#2D2D30',
+  border: '#EDEDF0',
+  textDisabled: '#C3C0CD',
+  black: '#000000',
+  white: '#FFFFFF',
   transparent: 'transparent',
 } as const;
 

diff --git a/src/constants/colors/secondary.ts b/src/constants/colors/secondary.ts
@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types';
 
 const SECONDARY_COLORS = {
-  // brand colors
   primary: '#2D2926',
   primaryTint1: '#2D2926',
   primaryTint2: '#2D2926',
@@ -17,45 +16,24 @@ const SECONDARY_COLORS = {
   tertiaryTint2: '#E5E2DF',
   tertiaryTint3: '#F2F0EF',
   tertiaryTint4: '#F2F0EF',
-
-  // general colors
+  default: '#2C2A25',
+  defaultLight: '#F0EEEC',
+  defaultBorder: '#F0EEEC',
   success: '#406237',
-  successBackground: '#ECEFEB',
+  successLight: '#ECEFEB',
   successBorder: '#ECEFEB',
-  info: '#2C2A25',
-  infoBackground: '#FDF9D3',
-  infoBorder: '#FDF9D3',
   error: '#A33F29',
-  errorBackground: '#F6ECEA',
+  errorLight: '#F6ECEA',
   errorBorder: '#F6ECEA',
-  default: '#2C2A25',
-  defaultBackground: '#F0EEEC',
-  defaultBorder: '#F0EEEC',
-  accent: '#F0EEEC',
-  disabled: '',
-  failure: '',
-  hover: '',
-  warning: '',
-
-  // ui colors
+  info: '#2C2A25',
+  infoLight: '#FDF9D3',
+  infoBorder: '#FDF9D3',
   background: '#FFFDF2',
   backgroundDark: '#C4BFB7',
-  border: '#E5E2DF',
-  divider: '#E5E2DF',
-
-  // form colors
-  radioBorder: '',
-  radioBorderSelected: '',
-
-  // typography
-  textMuted: '#2D2926',
-  textGhost: '#CBC5BF', // TODO: Delete?
-  textDisabled: '#CBC5BF',
-
-  // overlay
   overlay: 'rgba(45, 41, 38, 0.7)',
   overlaySolid: '#2D2926',
-
+  border: '#E5E2DF',
+  textDisabled: '#CBC5BF',
   black: '#2D2926',
   white: '#FFFDF2',
   transparent: 'transparent',

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,8 +1,6 @@
 export { default as ANIMATION } from './animation';
 export { default as BOX_SHADOWS } from './boxShadows';
 export { default as BREAKPOINTS } from './breakpoints';
-// TODO: Remove once all consumer usage is using theming
-export { default as COLORS } from './colors';
 export { default as FONTS } from './fonts';
 export { default as GRID } from './grid';
 export { default as LAYOUT } from './layout';