Skip to content

Instantly share code, notes, and snippets.

@franklinjavier
Created April 11, 2024 20:22
Show Gist options
  • Save franklinjavier/ded923365ea28319f1b3b4f893357596 to your computer and use it in GitHub Desktop.
Save franklinjavier/ded923365ea28319f1b3b4f893357596 to your computer and use it in GitHub Desktop.
envision theme
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'],
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment