zeus-ds
Version:
35+ customizable React components for dashboards and modern web applications. Built on top of Tailwind CSS and Radix UI.
209 lines (208 loc) • 6.12 kB
JavaScript
/** @type {import('tailwindcss').Config} */
const zeusTailwindPreset = {
theme: {
extend: {
fontFamily: {
'action': ['Montserrat', 'system-ui', 'sans-serif'],
'content': ['Mark Pro', 'system-ui', 'sans-serif'],
},
colors: {
// Zeus Brand Colors
purple: {
100: '#F9F8FA',
200: '#F0EFF3',
300: '#D8D2E3',
400: '#A08DBC',
500: '#654E85',
600: '#473264',
700: '#3E285A',
800: '#3C2658',
900: '#392354',
1000: '#311C4C',
},
pink: {
100: '#F6F4F7',
200: '#EDE8F0',
300: '#DBCFDF',
400: '#C6B2CD',
500: '#AF8FBA',
600: '#9460A4',
700: '#845693',
800: '#734A7F',
900: '#5E3D68',
1000: '#422B49',
},
blue: {
100: '#F3F9FD',
200: '#E6F2FA',
300: '#CAE4F5',
400: '#A9D5F0',
500: '#80C5EB',
600: '#42B4E6',
700: '#3BA1CE',
800: '#338BB2',
900: '#2A7291',
1000: '#1E5067',
},
// Semantic Colors
danger: {
100: '#FAF2F2',
200: '#E7B7B8',
300: '#CD2B31',
400: '#911E23',
},
success: {
100: '#F2F6F2',
200: '#B4D1B7',
300: '#009530',
400: '#006922',
},
warning: {
100: '#FFF7F2',
200: '#FFD2B4',
300: '#FF9900',
400: '#B46C00',
},
info: {
100: '#F3F4FD',
200: '#BCC1F5',
300: '#4963EA',
400: '#3446A5',
},
// Data Visualization Colors
violet: {
100: '#F6F2F8',
200: '#CFB5DC',
300: '#910DB2',
400: '#67097E',
},
olive: {
100: '#F4F5F2',
200: '#C1C8B7',
300: '#617A2B',
400: '#45561E',
},
yellow: {
100: '#FEF9F2',
200: '#F8E0B8',
300: '#F1BD35',
400: '#AA8625',
},
cobalt: {
100: '#F2F2FD',
200: '#B7B6F6',
300: '#2A26ED',
400: '#1E1BA8',
},
magenta: {
100: '#F5F3FD',
200: '#CABAF3',
300: '#8143E7',
400: '#5B2FA3',
},
teal: {
100: '#F2F9FA',
200: '#B5E1E6',
300: '#1CBEC9',
400: '#14868E',
},
// Neutral Colors
text: {
0: '#FFFFFF',
100: '#F2F2F2',
200: '#B5B5B5',
300: '#626262',
400: '#363636',
500: '#111213',
},
surface: {
0: '#FFFFFF',
100: '#FEFEFE',
200: '#FBFBFB',
300: '#F6F6F6',
400: '#AEAEAE',
},
background: {
100: '#FFFFFF',
200: '#FAFAFA',
300: '#F5F5F5',
400: '#F1F1F1',
500: '#EEEEEE',
600: '#EDEDED',
},
border: {
100: '#F9F9FA',
200: '#E8E8EA',
300: '#CBCCCF',
400: '#A3A4AB',
},
// Zeus Brand Shortcuts
zeus: {
primary: '#311C4C', // purple-1000
secondary: '#EDE8F0', // pink-200
},
},
animation: {
'hide': 'hide 150ms cubic-bezier(0.16, 1, 0.3, 1)',
'slide-down-and-fade': 'slideDownAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)',
'slide-left-and-fade': 'slideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)',
'slide-up-and-fade': 'slideUpAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)',
'slide-right-and-fade': 'slideRightAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)',
'accordion-open': 'accordionOpen 150ms cubic-bezier(0.87, 0, 0.13, 1)',
'accordion-close': 'accordionClose 150ms cubic-bezier(0.87, 0, 0.13, 1)',
'dialog-overlay-show': 'dialogOverlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
'dialog-content-show': 'dialogContentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)',
'drawer-slide-left-and-fade': 'drawerSlideLeftAndFade 150ms cubic-bezier(0.16, 1, 0.3, 1)',
'drawer-slide-right-and-fade': 'drawerSlideRightAndFade 150ms ease-in',
},
keyframes: {
hide: {
from: { opacity: '1' },
to: { opacity: '0' },
},
slideDownAndFade: {
from: { opacity: '0', transform: 'translateY(-6px)' },
to: { opacity: '1', transform: 'translateY(0)' },
},
slideLeftAndFade: {
from: { opacity: '0', transform: 'translateX(6px)' },
to: { opacity: '1', transform: 'translateX(0)' },
},
slideUpAndFade: {
from: { opacity: '0', transform: 'translateY(6px)' },
to: { opacity: '1', transform: 'translateY(0)' },
},
slideRightAndFade: {
from: { opacity: '0', transform: 'translateX(-6px)' },
to: { opacity: '1', transform: 'translateX(0)' },
},
accordionOpen: {
from: { height: '0px' },
to: { height: 'var(--radix-accordion-content-height)' },
},
accordionClose: {
from: { height: 'var(--radix-accordion-content-height)' },
to: { height: '0px' },
},
dialogOverlayShow: {
from: { opacity: '0' },
to: { opacity: '1' },
},
dialogContentShow: {
from: { opacity: '0', transform: 'translate(-50%, -45%) scale(0.95)' },
to: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' },
},
drawerSlideLeftAndFade: {
from: { opacity: '0', transform: 'translateX(100%)' },
to: { opacity: '1', transform: 'translateX(0)' },
},
drawerSlideRightAndFade: {
from: { opacity: '1', transform: 'translateX(0)' },
to: { opacity: '0', transform: 'translateX(100%)' },
},
},
},
},
plugins: [],
};
module.exports = { zeusTailwindPreset };