You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
95 lines
3.0 KiB
95 lines
3.0 KiB
1 month ago
|
/** @type {import('tailwindcss').Config} */
|
||
|
|
export default {
|
||
|
|
content: [
|
||
|
|
"./index.html",
|
||
|
|
"./src/**/*.{js,ts,jsx,tsx}",
|
||
|
|
],
|
||
|
|
darkMode: 'class',
|
||
|
|
theme: {
|
||
|
|
extend: {
|
||
|
|
colors: {
|
||
|
|
binance: {
|
||
|
|
yellow: '#F0B90B',
|
||
|
|
gold: '#FFD000',
|
||
|
|
lightGold: '#F8D12F',
|
||
|
|
activeYellow: '#D0980B',
|
||
|
|
dark: '#222126',
|
||
|
|
darkCard: '#2B2F36',
|
||
|
|
ink: '#1E2026',
|
||
|
|
},
|
||
|
|
crypto: {
|
||
|
|
green: '#0ECB81',
|
||
|
|
red: '#F6465D',
|
||
|
|
},
|
||
|
|
focus: {
|
||
|
|
blue: '#1EAEDB',
|
||
|
|
},
|
||
|
|
border: {
|
||
|
|
light: '#E6E8EA',
|
||
|
|
gold: '#FFD000',
|
||
|
|
},
|
||
|
|
text: {
|
||
|
|
primary: '#1E2026',
|
||
|
|
secondary: '#32313A',
|
||
|
|
slate: '#848E9C',
|
||
|
|
steel: '#686A6C',
|
||
|
|
muted: '#777E90',
|
||
|
|
hoverDark: '#1A1A1A',
|
||
|
|
},
|
||
|
|
surface: {
|
||
|
|
snow: '#F5F5F5',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
fontFamily: {
|
||
|
|
binance: ['Arial', 'sans-serif'],
|
||
|
|
body: ['system-ui', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
|
||
|
|
},
|
||
|
|
fontSize: {
|
||
|
|
'display-hero': ['60px', { lineHeight: '1.08', fontWeight: '700' }],
|
||
|
|
'display-secondary': ['34px', { lineHeight: '1.00', fontWeight: '700' }],
|
||
|
|
'heading-1': ['28px', { lineHeight: '1.00', fontWeight: '500' }],
|
||
|
|
'heading-2': ['24px', { lineHeight: '1.00', fontWeight: '700' }],
|
||
|
|
'heading-3': ['24px', { lineHeight: '1.00', fontWeight: '600' }],
|
||
|
|
'heading-4': ['20px', { lineHeight: '1.25', fontWeight: '600' }],
|
||
|
|
'body-large': ['20px', { lineHeight: '1.50', fontWeight: '500' }],
|
||
|
|
'body': ['16px', { lineHeight: '1.50', fontWeight: '500' }],
|
||
|
|
'body-semibold': ['16px', { lineHeight: '1.30', fontWeight: '600' }],
|
||
|
|
'body-bold': ['16px', { lineHeight: '1.50', fontWeight: '700' }],
|
||
|
|
'button': ['16px', { lineHeight: '1.25', fontWeight: '600', letterSpacing: '0.16px' }],
|
||
|
|
'button-small': ['14.4px', { lineHeight: '1.60', fontWeight: '600', letterSpacing: '0.72px' }],
|
||
|
|
'caption': ['14px', { lineHeight: '1.43', fontWeight: '500' }],
|
||
|
|
'caption-semibold': ['14px', { lineHeight: '1.50', fontWeight: '600' }],
|
||
|
|
'small': ['12px', { lineHeight: '1.00', fontWeight: '600' }],
|
||
|
|
'tiny': ['11px', { lineHeight: '1.00', fontWeight: '500' }],
|
||
|
|
},
|
||
|
|
borderRadius: {
|
||
|
|
'pill': '50px',
|
||
|
|
'card': '12px',
|
||
|
|
'data': '8px',
|
||
|
|
'button': '6px',
|
||
|
|
},
|
||
|
|
boxShadow: {
|
||
|
|
'card': 'rgba(32, 32, 37, 0.05) 0px 3px 5px 0px',
|
||
|
|
'card-hover': 'rgba(8, 8, 8, 0.05) 0px 3px 5px 5px',
|
||
|
|
'pill': 'rgb(153,153,153) 0px 2px 10px -3px',
|
||
|
|
'heavy': 'rgba(0,0,0) 0px 32px 37px',
|
||
|
|
},
|
||
|
|
spacing: {
|
||
|
|
'1': '4px',
|
||
|
|
'2': '8px',
|
||
|
|
'3': '12px',
|
||
|
|
'4': '16px',
|
||
|
|
'5': '20px',
|
||
|
|
'6': '24px',
|
||
|
|
'7': '32px',
|
||
|
|
'8': '48px',
|
||
|
|
'9': '64px',
|
||
|
|
'10': '80px',
|
||
|
|
},
|
||
|
|
maxWidth: {
|
||
|
|
'container': '1200px',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
plugins: [],
|
||
|
|
}
|