vega-frontend-monorepo/libs/tailwindcss-config/src/theme.js

192 lines
4.0 KiB
JavaScript

module.exports = {
screens: {
xs: '500px',
sm: '640px',
md: '768px',
lg: '960px',
xl: '1280px',
xxl: '1536px',
},
colors: {
transparent: 'transparent',
current: 'currentColor',
black: '#000000',
white: '#FFFFFF',
vega: {
// YELLOW
yellow: {
700: '#23290E',
650: '#515E1E',
600: '#7E932F',
550: '#ABC840',
DEFAULT: '#D7FB50',
500: '#D7FB50',
450: '#E0FC75',
400: '#E8FD9A',
350: '#F0FDBE',
300: '#F9FEE3',
},
// GREEN
green: {
700: '#012915',
650: '#015D30',
600: '#01914B',
550: '#01C566',
DEFAULT: '#00F780',
500: '#00F780',
450: '#37F99B',
400: '#6CFAB6',
350: '#A1FCD0',
300: '#D6FEEB',
},
// BLUE
blue: {
700: '#01142A',
650: '#012C60',
600: '#014595',
550: '#015ECB',
DEFAULT: '#0075FF',
500: '#0075FF',
450: '#3793FF',
400: '#6CAFFF',
350: '#A1CCFF',
300: '#D6E9FF',
},
// PURPLE
purple: {
700: '#15072A',
650: '#301060',
600: '#4B1895',
550: '#6620CB',
DEFAULT: '#8028FF',
500: '#8028FF',
450: '#9B56FF',
400: '#B683FF',
350: '#D0B0FF',
300: '#EBDDFF',
},
// PINK
pink: {
700: '#210215',
650: '#600330',
600: '#95054B',
550: '#CB0666',
DEFAULT: '#FF077F',
500: '#FF077F',
450: '#FF3C9A',
400: '#FF70B5',
350: '#FFA3D0',
300: '#FFD7EA',
},
// ORANGE
orange: {
700: '#2A1701',
650: '#603301',
600: '#954F01',
550: '#CB6C01',
DEFAULT: '#FF8700',
500: '#FF8700',
450: '#FFA137',
400: '#FFBA6C',
350: '#FFD3A1',
300: '#FFECD6',
},
// DARK
dark: {
100: '#161616',
150: '#262626',
200: '#404040',
300: '#8B8B8B',
400: '#C0C0C0',
},
// LIGHT
light: {
100: '#F0F0F0',
150: '#E9E9E9',
200: '#D2D2D2',
300: '#939393',
400: '#626262',
},
},
danger: '#FF077F',
warning: '#FF8700',
success: '#00F780',
},
fontFamily: {
mono: ['Roboto Mono', 'monospace'],
sans: [
'"Helvetica Neue"',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
alpha: [
'AlphaLyrae',
'"Helvetica Neue"',
'-apple-system',
'BlinkMacSystemFont',
'"Segoe UI"',
'Roboto',
'Arial',
'"Noto Sans"',
'sans-serif',
'"Apple Color Emoji"',
'"Segoe UI Emoji"',
'"Segoe UI Symbol"',
'"Noto Color Emoji"',
],
},
keyframes: {
rotate: {
'0%': {
transform: 'rotate(0deg)',
transformBox: 'fill-box',
transformOrigin: 'center',
},
'100%': {
transform: 'rotate(360deg)',
transformBox: 'fill-box',
transformOrigin: 'center',
},
},
wave: {
'0%': { transform: 'rotate( 0.0deg)' },
'10%': { transform: 'rotate(14.0deg)' },
'20%': { transform: 'rotate(-8.0deg)' },
'30%': { transform: 'rotate(14.0deg)' },
'40%': { transform: 'rotate(-4.0deg)' },
'50%': { transform: 'rotate(10.0deg)' },
'60%': { transform: 'rotate( 0.0deg)' },
'100%': { transform: 'rotate( 0.0deg)' },
},
progress: {
from: { width: '0' },
to: { width: '100%' },
},
},
animation: {
rotate: 'rotate 2s linear alternate infinite',
'rotate-back': 'rotate 2s linear reverse infinite',
wave: 'wave 2s linear infinite',
progress: 'progress 5s cubic-bezier(.39,.58,.57,1) 1',
},
data: {
selected: 'state~="checked"',
},
};