84 lines
3.4 KiB
JavaScript
84 lines
3.4 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
"./index.html",
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
|
],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Roboto', 'sans-serif'],
|
|
},
|
|
fontSize: {
|
|
'display-lg': ['57px', '64px'],
|
|
'display-md': ['45px', '52px'],
|
|
'display-sm': ['36px', '44px'],
|
|
'headline-lg': ['32px', '40px'],
|
|
'headline-md': ['28px', '36px'],
|
|
'headline-sm': ['24px', '32px'],
|
|
'title-lg': ['22px', '28px'],
|
|
'title-md': ['16px', '24px'],
|
|
'title-sm': ['14px', '20px'],
|
|
'label-lg': ['14px', '20px'],
|
|
'label-md': ['12px', '16px'],
|
|
'label-sm': ['11px', '16px'],
|
|
'body-lg': ['16px', '24px'],
|
|
'body-md': ['14px', '20px'],
|
|
'body-sm': ['12px', '16px'],
|
|
},
|
|
colors: {
|
|
// Material 3 Dark Theme approximation
|
|
'surface': '#141218', // Very dark background
|
|
'surface-container-low': '#1D1B20',
|
|
'surface-container': '#211F26', // Cards
|
|
'surface-container-high': '#2B2930', // Input fields
|
|
'on-surface': '#E6E0E9',
|
|
'on-surface-variant': '#CAC4D0',
|
|
|
|
// Using the Emerald scheme from previous request but mapped to M3 tokens
|
|
'primary': '#6EE7B7', // Emerald 300 (Light for dark mode)
|
|
'on-primary': '#003828', // Emerald 900
|
|
'primary-container': '#00513B', // Emerald 800
|
|
'on-primary-container': '#6EE7B7', // Emerald 300
|
|
|
|
'secondary': '#CCC2DC',
|
|
'secondary-container': '#4A4458',
|
|
'on-secondary-container': '#E8DEF8',
|
|
|
|
'tertiary': '#EFB8C8',
|
|
'tertiary-container': '#633B48',
|
|
|
|
'error': '#F2B8B5',
|
|
'error-container': '#8C1D18',
|
|
'on-error': '#601410',
|
|
'on-error-container': '#F9DEDC',
|
|
|
|
'outline': '#938F99',
|
|
'outline-variant': '#49454F'
|
|
},
|
|
boxShadow: {
|
|
'elevation-1': '0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15)',
|
|
'elevation-2': '0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15)',
|
|
'elevation-3': '0px 1px 3px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15)',
|
|
'elevation-4': '0px 2px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15)',
|
|
'elevation-5': '0px 4px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15)',
|
|
},
|
|
animation: {
|
|
ripple: 'ripple 600ms linear',
|
|
'menu-enter': 'menu-enter 200ms ease-out forwards',
|
|
},
|
|
keyframes: {
|
|
ripple: {
|
|
'0%': { transform: 'scale(0)', opacity: '0.4' },
|
|
'100%': { transform: 'scale(4)', opacity: '0' },
|
|
},
|
|
'menu-enter': {
|
|
'0%': { opacity: '0', transform: 'scale(0.95) translateX(-100%)' }, // maintain the translate relative to position
|
|
'100%': { opacity: '1', transform: 'scale(1) translateX(-100%)' },
|
|
}
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
}
|