@gssfed/vital-ui-kit-react/src/base/theme/theme.js

Vital UI Kit for React!

// @flow

// color palette
export const primary100 = '#D9ECFF';
export const primary200 = '#A6D2FF';
export const primary300 = '#73B9FE';
export const primary400 = '#419FFE';
export const primary500 = '#0E86FE';
export const primary600 = '#016DD8';
export const primary700 = '#0153A5';
export const primary800 = '#003A73';
export const primary900 = '#002040';

export const secondary100 = '#F7F9FE';
export const secondary200 = '#EEF2FC';
export const secondary300 = '#D8E3F6';
export const secondary400 = '#C4D2EB';
export const secondary500 = '#95ACD4';
export const secondary600 = '#7189B6';
export const secondary700 = '#456297';
export const secondary800 = '#2A487F';
export const secondary900 = '#1E3768';

export const grey100 = '#F8F8F8';
export const grey200 = '#F0F0F0';
export const grey300 = '#dddddd';
export const grey400 = '#cccccc';
export const grey500 = '#aaaaaa';
export const grey600 = '#888888';
export const grey700 = '#555555';
export const grey800 = '#333333';
export const grey900 = '#0D0D0D';

// default color
export const white = '#ffffff';
export const primary = primary500;
export const secondary = secondary500;

export const info = '#00C3FF';
export const success = '#2BCD86';
export const alarm = '#EB5000';
export const warning = '#FFB400';

export const defaultTransition = 'all 120ms ease-out';

// ----- break point ----- //
export const bp = {
  desktop: '1440px',
  padLand: '1024px',
  padMiddle: ' 800px',
  padPortrait: ' 768px',
  phoneLand: ' 667px',
  phoneMiddle: ' 480px',
  phonePortrait: ' 320px',
};