// White, black and gray
export const white = 'hsl(0, 0%, 100%)';
export const black = 'hsl(0, 0%, 0%)';
export const semiWhite = 'hsl(0, 0%, 98%)';
export const compositeGray = 'hsl(224, 33%, 14%)';
export const gray95 = 'hsl(0, 0%, 95%)';
export const gray80 = 'hsl(0, 0%, 80%)';
export const gray70 = 'hsl(0, 0%, 70%)';
export const gray50 = 'hsl(0, 0%, 50%)';
export const gray20 = 'hsl(0, 0%, 20%)';

// Color variables
export const actionColor = 'hsl(210, 100%, 50%)';
export const errorColor = 'hsl(0, 85%, 55%)';
export const successColor = 'hsl(150, 100%, 35%)';
export const warningColor = 'hsl(40, 100%, 50%)';

// Base sizes (px)
export const lineHeight = 36;
export const spacing = 4;

// Base  = fonts (px)
export const fontSmall = 12;
export const fontNormal = 14;
export const fontNormalBig = 16;
export const fontBig = 18;
export const fontBigger = 20;
export const fontBiggest = 28;

// App  = forms (px)
export const inputHeightBig = 40;

// App  = utils (px)
export const borderRadius = 8;

// Shadows
export const baseShadow = '0 1px 3px 0 rgba(0, 0, 0, .25), 0 4px 12px 0 rgba(0, 0, 0, .1)';

// Layout (px)
export const extraSmallDevices = 480;
export const smallDevices = 768;
export const mediumDevices = 1024;
export const largeDevices = 1280;
export const extraLargeDevices = 1440;
export const hslToHsla = (hsl, opacity) => hsl.replace('hsl', 'hsla')
  .replace(')', (match) => `, ${opacity}${match}`);