envision theme

envision.ts

import twColors from 'tailwindcss/colors'

const colors = {
  'brand-50': 'hsl(189 17% 92%)',
  'brand-100': 'hsl(188 19% 84%)',
  'brand-200': 'hsl(190 18% 68%)',
  'brand-300': 'hsl(188 18% 52%)',
  'brand-400': 'hsl(189 30% 37%)',
  'brand-500': 'hsl(189 68% 21%)',
  'brand-600': 'hsl(189 67% 17%)',
  'brand-700': 'hsl(188 68% 12%)',
  'brand-800': 'hsl(190 67% 8%)',
  'brand-900': 'hsl(188 71% 4%)',
  'interactive-50': 'hsl(225 29% 95%)',
  'interactive-100': 'hsl(219 30% 89%)',
  'interactive-200': 'hsl(221 30% 78%)',
  'interactive-300': 'hsl(220 29% 66%)',
  'interactive-400': 'hsl(221 29% 55%)',
  'interactive-500': 'hsl(220 37% 44%)',
  'interactive-600': 'hsl(221 37% 35%)',
  'interactive-700': 'hsl(220 36% 26%)',
  'interactive-800': 'hsl(221 38% 18%)',
  'interactive-900': 'hsl(219 38% 9%)',
}

export const envision = {
  'brand-primary': colors['brand-500'],
  'brand-secondary': colors['brand-300'],

  'interactive-primary': colors['interactive-500'],
  'interactive-primary-foreground': twColors.white,
  'interactive-primary-hover': colors['interactive-600'],
  'interactive-primary-hover-foreground': twColors.white,

  'interactive-secondary': colors['interactive-100'],
  'interactive-secondary-foreground': colors['interactive-500'],
  'interactive-secondary-hover': colors['interactive-200'],
  'interactive-secondary-hover-foreground': colors['interactive-600'],

  'interactive-outline': 'transparent',
  'interactive-outline-foreground': colors['interactive-500'],
  'interactive-outline-hover': colors['interactive-200'],
  'interactive-outline-hover-foreground': colors['interactive-600'],

  'interactive-transparent': 'transparent',
  'interactive-transparent-foreground': colors['interactive-500'],
  'interactive-transparent-hover': colors['interactive-200'],
  'interactive-transparent-hover-foreground': colors['interactive-600'],

  'interactive-link': colors['interactive-500'],
  'interactive-link-hover': colors['interactive-600'],
  'interactive-link-focus': colors['interactive-600'],
  'interactive-link-disabled': twColors.gray['200'],

  'background-primary': twColors.white,
  'background-secondary': twColors.gray['100'],
  'background-contrast': colors['brand-100'],
  'background-inverse': colors['brand-800'],
  'background-negative': twColors.red['50'],
  'background-warning': twColors.yellow['50'],
  'background-informative': twColors.sky['50'],

  'foreground-primary': colors['brand-400'],
  'foreground-secondary': twColors.gray['800'],
  'foreground-primary-inverse': twColors.white,
  'foreground-secondary-inverse': colors['brand-300'],
  'foreground-positive': twColors.emerald['400'],
  'foreground-negative': twColors.red['400'],
  'foreground-warning': twColors.yellow['400'],
  'foreground-informative': twColors.sky['400'],
  'foreground-disabled': twColors.gray['200'],

  'text-primary': twColors.gray['800'],
  'text-secondary': twColors.gray['600'],
  'text-primary-inverse': twColors.white,
  'text-secondary-inverse': twColors.gray['200'],
  'text-positive': twColors.emerald['600'],
  'text-negative': twColors.red['600'],
  'text-warning': twColors.yellow['600'],
  'text-informative': twColors.sky['600'],
  'text-disabled': twColors.gray['300'],

  'border-interactive': twColors.sky['500'],
  'border-container': twColors.gray['200'],
  'border-decorative': colors['brand-500'],
  'border-input': twColors.gray['300'],
  'border-input-hover': twColors.gray['500'],
  'border-input-focus': twColors.sky['500'],
  'border-positive': twColors.emerald['500'],
  'border-negative': twColors.red['400'],
  'border-warning': twColors.yellow['500'],
  'border-informative': twColors.sky['500'],
  'border-input-disabled': twColors.gray['200'],
}