basic-kit-theme/src/colours.js

The basic theme and theme specification for react-basic-kit

export const common = {
  white: 'hsl(0, 0%, 100%)',
  black: 'hsl(0, 0%, 0%)',
  transparent: 'transparent',
  current: 'current'
}

// Shamelessly pinched from tailwind, its a great scale. Thanks to a great team.
export const gray = {
  50: '#ffffff',
  75: '#fafbff',
  100: '#f7fafc',
  200: '#edf2f7',
  300: '#e2e8f0',
  400: '#cbd5e0',
  500: '#a0aec0',
  600: '#718096',
  700: '#4a5568',
  800: '#2d3748',
  900: '#1a202c'
}

// These scales are hurried, with colours taken from crayola colours.
// In all honesty they don't really fit too well and tailwind colours could be
// used again here. In any case, it doesn't matter too much at present as
// defining the schema is more important than the actual content right now.
export const red = {
  400: '#fe6f5e',
  500: '#fd0e35',
  600: '#ed0a3f',
  700: '#c62d42'
}

export const blue = {
  400: '#93ccea',
  500: '#4997d0',
  600: '#4570e6',
  700: '#00468C'
}

export const yellow = {
  400: '#fbe7b2',
  500: '#fbe870',
  600: '#fcd667',
  700: '#ffae42'
}

export const green = {
  400: '#93dfb8',
  500: '#33cc99',
  600: '#29AB87',
  700: '#00755e'
}

export const lightAlpha = {
  100: 'hsla(0, 100%, 100%, 0.03)',
  200: 'hsla(0, 100%, 100%, 0.12)',
  300: 'hsla(0, 100%, 100%, 0.20)',
  400: 'hsla(0, 100%, 100%, 0.32)',
  500: 'hsla(0, 100%, 100%, 0.48)',
  600: 'hsla(0, 100%, 100%, 0.62)',
  700: 'hsla(0, 100%, 100%, 0.80)',
  800: 'hsla(0, 100%, 100%, 0.88)',
  900: 'hsla(0, 100%, 100%, 0.92)'
}

export const darkAlpha = {
  100: 'hsla(0, 0%, 0%, 0.03)',
  200: 'hsla(0, 0%, 0%, 0.12)',
  300: 'hsla(0, 0%, 0%, 0.20)',
  400: 'hsla(0, 0%, 0%, 0.32)',
  500: 'hsla(0, 0%, 0%, 0.48)',
  600: 'hsla(0, 0%, 0%, 0.62)',
  700: 'hsla(0, 0%, 0%, 0.80)',
  800: 'hsla(0, 0%, 0%, 0.88)',
  900: 'hsla(0, 0%, 0%, 0.92)'
}