160 lines
4.8 KiB
JavaScript
Executable File
160 lines
4.8 KiB
JavaScript
Executable File
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
bg: {
|
|
base: 'var(--bg-base)',
|
|
surface: 'var(--bg-surface)',
|
|
elevated: 'var(--bg-elevated)',
|
|
card: 'var(--bg-card)',
|
|
'surface-hover': 'var(--bg-surface-hover)',
|
|
},
|
|
stroke: {
|
|
DEFAULT: 'var(--stroke-default)',
|
|
light: 'var(--stroke-light)',
|
|
},
|
|
fg: {
|
|
DEFAULT: 'var(--fg-default)',
|
|
sub: 'var(--fg-sub)',
|
|
disabled: 'var(--fg-disabled)',
|
|
},
|
|
color: {
|
|
accent: 'var(--color-accent)',
|
|
info: 'var(--color-info)',
|
|
tertiary: 'var(--color-tertiary)',
|
|
danger: 'var(--color-danger)',
|
|
warning: 'var(--color-warning)',
|
|
caution: 'var(--color-caution)',
|
|
success: 'var(--color-success)',
|
|
boom: {
|
|
DEFAULT: 'var(--color-boom)',
|
|
hover: 'var(--color-boom-hover)',
|
|
},
|
|
},
|
|
},
|
|
fontSize: {
|
|
'display-1': [
|
|
'3.75rem',
|
|
{ lineHeight: '1.3', letterSpacing: 'var(--letter-spacing-display)' },
|
|
],
|
|
'display-2': [
|
|
'2.5rem',
|
|
{ lineHeight: '1.3', letterSpacing: 'var(--letter-spacing-display)' },
|
|
],
|
|
'display-3': [
|
|
'2.25rem',
|
|
{ lineHeight: '1.4', letterSpacing: 'var(--letter-spacing-display)' },
|
|
],
|
|
'heading-1': [
|
|
'2rem',
|
|
{ lineHeight: '1.4', letterSpacing: 'var(--letter-spacing-heading)' },
|
|
],
|
|
'heading-2': [
|
|
'1.5rem',
|
|
{ lineHeight: '1.4', letterSpacing: 'var(--letter-spacing-heading)' },
|
|
],
|
|
'heading-3': [
|
|
'1.375rem',
|
|
{ lineHeight: '1.4', letterSpacing: 'var(--letter-spacing-heading)' },
|
|
],
|
|
'title-1': [
|
|
'1.125rem',
|
|
{ lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-navigation)' },
|
|
],
|
|
'title-2': [
|
|
'1rem',
|
|
{ lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-navigation)' },
|
|
],
|
|
'title-3': [
|
|
'0.875rem',
|
|
{ lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-navigation)' },
|
|
],
|
|
'title-4': [
|
|
'0.8125rem',
|
|
{ lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-navigation)' },
|
|
],
|
|
'title-5': [
|
|
'0.75rem',
|
|
{ lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-navigation)' },
|
|
],
|
|
'title-6': [
|
|
'0.6875rem',
|
|
{ lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-navigation)' },
|
|
],
|
|
'body-1': ['0.875rem', { lineHeight: '1.6', letterSpacing: 'var(--letter-spacing-body)' }],
|
|
'body-2': ['0.8125rem', { lineHeight: '1.6', letterSpacing: 'var(--letter-spacing-body)' }],
|
|
'label-1': ['0.75rem', { lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-label)' }],
|
|
'label-2': [
|
|
'0.6875rem',
|
|
{ lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-label)' },
|
|
],
|
|
caption: ['0.6875rem', { lineHeight: '1.5', letterSpacing: 'var(--letter-spacing-body)' }],
|
|
},
|
|
letterSpacing: {
|
|
display: 'var(--letter-spacing-display)',
|
|
heading: 'var(--letter-spacing-heading)',
|
|
body: 'var(--letter-spacing-body)',
|
|
navigation: 'var(--letter-spacing-navigation)',
|
|
label: 'var(--letter-spacing-label)',
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
'PretendardGOV',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'Apple SD Gothic Neo',
|
|
'Pretendard Variable',
|
|
'Pretendard',
|
|
'Roboto',
|
|
'Noto Sans KR',
|
|
'Segoe UI',
|
|
'Malgun Gothic',
|
|
'Apple Color Emoji',
|
|
'Segoe UI Emoji',
|
|
'Segoe UI Symbol',
|
|
'sans-serif',
|
|
],
|
|
mono: [
|
|
'PretendardGOV',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'Apple SD Gothic Neo',
|
|
'Pretendard Variable',
|
|
'Pretendard',
|
|
'Roboto',
|
|
'Noto Sans KR',
|
|
'Segoe UI',
|
|
'Malgun Gothic',
|
|
'Apple Color Emoji',
|
|
'Segoe UI Emoji',
|
|
'Segoe UI Symbol',
|
|
'sans-serif',
|
|
],
|
|
korean: [
|
|
'PretendardGOV',
|
|
'-apple-system',
|
|
'BlinkMacSystemFont',
|
|
'Apple SD Gothic Neo',
|
|
'Pretendard Variable',
|
|
'Pretendard',
|
|
'Roboto',
|
|
'Noto Sans KR',
|
|
'Segoe UI',
|
|
'Malgun Gothic',
|
|
'Apple Color Emoji',
|
|
'Segoe UI Emoji',
|
|
'Segoe UI Symbol',
|
|
'sans-serif',
|
|
],
|
|
},
|
|
borderRadius: {
|
|
sm: '6px',
|
|
md: '10px',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|