vira
Version:
A simple and highly versatile design system using element-vir.
180 lines (179 loc) • 5.74 kB
JavaScript
import { defineCssVars } from 'lit-css-vars';
/**
* The base Vira color theme palette.
*
* @category Color
*/
export const viraColorPalette = defineCssVars({
'vira-red-100': '#FFF6F5',
'vira-red-150': '#FFEDEB',
'vira-red-200': '#FFE4E1',
'vira-red-250': '#FFDCD8',
'vira-red-300': '#FFD1CB',
'vira-red-350': '#FFC1B8',
'vira-red-400': '#FFA79B',
'vira-red-450': '#FF8274',
'vira-red-500': '#FF564A',
'vira-red-550': '#F43A32',
'vira-red-600': '#E2322C',
'vira-red-650': '#D02C27',
'vira-red-700': '#BB2520',
'vira-red-750': '#9E231D',
'vira-red-800': '#82211A',
'vira-red-850': '#701A13',
'vira-red-900': '#611710',
'vira-red-950': '#52140D',
'vira-red-1000': '#43130D',
'vira-yellow-100': '#FEF9E4',
'vira-yellow-150': '#FDF2D1',
'vira-yellow-200': '#FDEABF',
'vira-yellow-250': '#FEE2AD',
'vira-yellow-300': '#FDD89B',
'vira-yellow-350': '#FAC986',
'vira-yellow-400': '#EFB669',
'vira-yellow-450': '#E29D34',
'vira-yellow-500': '#CE8800',
'vira-yellow-550': '#BB7B00',
'vira-yellow-600': '#AC7100',
'vira-yellow-650': '#9E6800',
'vira-yellow-700': '#8C5C00',
'vira-yellow-750': '#794D00',
'vira-yellow-800': '#683E00',
'vira-yellow-850': '#5B3301',
'vira-yellow-900': '#502A05',
'vira-yellow-950': '#442308',
'vira-yellow-1000': '#381D0B',
'vira-green-100': '#EBFFEE',
'vira-green-150': '#DDFBE2',
'vira-green-200': '#CDF8D6',
'vira-green-250': '#BFF5CC',
'vira-green-300': '#AFF0C0',
'vira-green-350': '#9AE8B1',
'vira-green-400': '#7FD99C',
'vira-green-450': '#52C87F',
'vira-green-500': '#1BB565',
'vira-green-550': '#04A559',
'vira-green-600': '#009852',
'vira-green-650': '#008C4A',
'vira-green-700': '#007C41',
'vira-green-750': '#016A38',
'vira-green-800': '#095831',
'vira-green-850': '#024B29',
'vira-green-900': '#014024',
'vira-green-950': '#02371F',
'vira-green-1000': '#062D1B',
'vira-teal-100': '#E8FEFD',
'vira-teal-150': '#D9FAF8',
'vira-teal-200': '#C9F6F3',
'vira-teal-250': '#BAF2ED',
'vira-teal-300': '#A9EDE6',
'vira-teal-350': '#95E4DB',
'vira-teal-400': '#79D5CA',
'vira-teal-450': '#47C3B7',
'vira-teal-500': '#00B0A4',
'vira-teal-550': '#00A094',
'vira-teal-600': '#009389',
'vira-teal-650': '#00877D',
'vira-teal-700': '#00786F',
'vira-teal-750': '#00665F',
'vira-teal-800': '#01554F',
'vira-teal-850': '#004843',
'vira-teal-900': '#003E3A',
'vira-teal-950': '#033531',
'vira-teal-1000': '#072B29',
'vira-blue-100': '#F5F9FF',
'vira-blue-150': '#EAF3FF',
'vira-blue-200': '#E0EDFF',
'vira-blue-250': '#D6E7FF',
'vira-blue-300': '#CBDFFF',
'vira-blue-350': '#B9D4FF',
'vira-blue-400': '#9EC3FF',
'vira-blue-450': '#7AADFF',
'vira-blue-500': '#5697FF',
'vira-blue-550': '#4988ED',
'vira-blue-600': '#427DDC',
'vira-blue-650': '#3B72CA',
'vira-blue-700': '#3365B6',
'vira-blue-750': '#2D569A',
'vira-blue-800': '#27487E',
'vira-blue-850': '#203D6C',
'vira-blue-900': '#1B345D',
'vira-blue-950': '#172C4F',
'vira-blue-1000': '#142540',
'vira-brand-100': '#F5F9FF',
'vira-brand-150': '#EAF3FF',
'vira-brand-200': '#E0EDFF',
'vira-brand-250': '#D6E7FF',
'vira-brand-300': '#CBDFFF',
'vira-brand-350': '#B9D4FF',
'vira-brand-400': '#9EC3FF',
'vira-brand-450': '#7AADFF',
'vira-brand-500': '#5697FF',
'vira-brand-550': '#4988ED',
'vira-brand-600': '#427DDC',
'vira-brand-650': '#3B72CA',
'vira-brand-700': '#3365B6',
'vira-brand-750': '#2D569A',
'vira-brand-800': '#27487E',
'vira-brand-850': '#203D6C',
'vira-brand-900': '#1B345D',
'vira-brand-950': '#172C4F',
'vira-brand-1000': '#142540',
'vira-purple-100': '#F9F7FF',
'vira-purple-150': '#F3EFFF',
'vira-purple-200': '#EDE8FF',
'vira-purple-250': '#E6E1FF',
'vira-purple-300': '#DED8FF',
'vira-purple-350': '#D2CBFF',
'vira-purple-400': '#C1B7FF',
'vira-purple-450': '#AD9BFF',
'vira-purple-500': '#9B80FF',
'vira-purple-550': '#8D6EF4',
'vira-purple-600': '#8265E3',
'vira-purple-650': '#775BD1',
'vira-purple-700': '#6A50BB',
'vira-purple-750': '#5A459E',
'vira-purple-800': '#4A3B82',
'vira-purple-850': '#3E3170',
'vira-purple-900': '#352A61',
'vira-purple-950': '#2D2452',
'vira-purple-1000': '#251F43',
'vira-pink-100': '#FEF5FF',
'vira-pink-150': '#FFEAFF',
'vira-pink-200': '#FFE0FC',
'vira-pink-250': '#FFD7F8',
'vira-pink-300': '#FFCBF2',
'vira-pink-350': '#FFB9E9',
'vira-pink-400': '#FF9BDF',
'vira-pink-450': '#FF6DD6',
'vira-pink-500': '#F04AC5',
'vira-pink-550': '#DD3EB4',
'vira-pink-600': '#CC37A7',
'vira-pink-650': '#BC3099',
'vira-pink-700': '#A82988',
'vira-pink-750': '#8F2674',
'vira-pink-800': '#752361',
'vira-pink-850': '#641C53',
'vira-pink-900': '#561848',
'vira-pink-950': '#49153E',
'vira-pink-1000': '#3B1333',
'vira-grey-100': '#F9F9F9',
'vira-grey-150': '#F2F2F2',
'vira-grey-200': '#EBEBEB',
'vira-grey-250': '#E5E5E5',
'vira-grey-300': '#DEDEDE',
'vira-grey-350': '#D2D2D2',
'vira-grey-400': '#C2C2C2',
'vira-grey-450': '#ADADAD',
'vira-grey-500': '#999999',
'vira-grey-550': '#8A8A8A',
'vira-grey-600': '#7F7F7F',
'vira-grey-650': '#747474',
'vira-grey-700': '#676767',
'vira-grey-750': '#585858',
'vira-grey-800': '#494949',
'vira-grey-850': '#3E3E3E',
'vira-grey-900': '#353535',
'vira-grey-950': '#2D2D2D',
'vira-grey-1000': '#252525',
});