chore(infra): update build config and deployment scripts
Update Docker configurations, nginx setup, and shared design tokens. Refresh lockfile.
This commit is contained in:
300
packages/shared/tailwind-config.mjs
Normal file
300
packages/shared/tailwind-config.mjs
Normal file
@@ -0,0 +1,300 @@
|
||||
/**
|
||||
* Shared Tailwind CSS Configuration
|
||||
* Designed for Enchun Digital Marketing website migration
|
||||
*
|
||||
* Source: Webflow CSS extraction
|
||||
* Date: 2026-01-31
|
||||
*/
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
const config = {
|
||||
darkMode: 'class', // Can use 'media' preference-based later
|
||||
content: [],
|
||||
theme: {
|
||||
extend: {
|
||||
// ============================================
|
||||
// 🎨 COLORS - From Webflow Extraction
|
||||
// ============================================
|
||||
|
||||
colors: {
|
||||
// Primary Colors (主要色)
|
||||
primary: {
|
||||
DEFAULT: '#3898EC',
|
||||
dark: '#0082F3',
|
||||
light: '#67AEE1',
|
||||
hover: '#2895F7',
|
||||
DEFAULTContrast: '#FFFFFF',
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: '#F39C12',
|
||||
light: '#F6C456',
|
||||
dark: '#D84038',
|
||||
hover: '#E08E0B',
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: '#D84038',
|
||||
light: '#F6C456',
|
||||
dark: '#EA384C',
|
||||
},
|
||||
|
||||
// Neutral Colors (中性色 - Mapped to Tailwind defaults)
|
||||
white: '#FFFFFF',
|
||||
black: '#000000',
|
||||
slate: {
|
||||
50: '#FAFAFA', // --color-gray-50
|
||||
100: '#F5F5F5', // --color-gray-100
|
||||
200: '#F3F3F3', // --color-gray-200
|
||||
300: '#EEEEEE', // --color-gray-300
|
||||
400: '#DDDDDD', // --color-gray-400
|
||||
500: '#C8C8C8', // --color-gray-500
|
||||
600: '#999999', // --color-gray-600 (text-muted)
|
||||
700: '#828282', // --color-gray-700
|
||||
800: '#758696', // --color-gray-800
|
||||
900: '#5D6C7B', // --color-gray-900
|
||||
950: '#4F4F4F', // --color-gray-950
|
||||
},
|
||||
|
||||
// Text Colors (文字色)
|
||||
text: {
|
||||
primary: '#333333', // --color-text-primary
|
||||
secondary: '#222222', // --color-text-secondary
|
||||
muted: '#999999', // --color-text-muted
|
||||
light: '#758696', // --color-text-light
|
||||
inverse: '#FFFFFF', // --color-text-inverse
|
||||
},
|
||||
|
||||
// Link Colors (連結色)
|
||||
link: {
|
||||
DEFAULT: '#3083BF',
|
||||
hover: '#23608C',
|
||||
},
|
||||
|
||||
// Border & Divider (邊框與分隔線)
|
||||
border: '#E2E8F0',
|
||||
divider: '#DDDDDD',
|
||||
|
||||
// Category Colors (文章分類)
|
||||
category: {
|
||||
google: '#67AEE1', // Google小學堂
|
||||
meta: '#8974DE', // Meta小學堂
|
||||
news: '#3083BF', // 行銷時事最前線
|
||||
enchun: '#3898EC', // 恩群數位最新公告
|
||||
},
|
||||
|
||||
// Badge Colors (標籤)
|
||||
badge: {
|
||||
hot: '#EA384C', // Hot 標籤 (紅)
|
||||
new: '#67AEE1', // New 標籤 (淡藍)
|
||||
},
|
||||
|
||||
// Special Colors
|
||||
background: '#F2F2F2', // Grey 6 - Main background from Webflow
|
||||
surface: '#FAFAFA',
|
||||
surface2: '#F3F3F3',
|
||||
},
|
||||
|
||||
// ============================================
|
||||
// 🔤 TYPOGRAPHY - From Webflow
|
||||
// ============================================
|
||||
|
||||
fontFamily: {
|
||||
sans: [
|
||||
'Noto Sans TC',
|
||||
'Quicksand',
|
||||
'Arial',
|
||||
'sans-serif',
|
||||
],
|
||||
heading: [
|
||||
'Noto Sans TC',
|
||||
'Quicksand',
|
||||
'Arial',
|
||||
'sans-serif',
|
||||
],
|
||||
accent: [
|
||||
'Quicksand',
|
||||
'Noto Sans TC',
|
||||
'sans-serif',
|
||||
],
|
||||
},
|
||||
|
||||
fontSize: {
|
||||
// Webflow-based scale
|
||||
'xs': ['0.75rem', { lineHeight: '1.5' }], // 12px
|
||||
'sm': ['0.875rem', { lineHeight: '1.5' }], // 14px
|
||||
'base': ['1rem', { lineHeight: '1.5' }], // 16px
|
||||
'lg': ['1.125rem', { lineHeight: '1.5' }], // 18px
|
||||
'xl': ['1.25rem', { lineHeight: '1.5' }], // 20px
|
||||
'2xl': ['1.5rem', { lineHeight: '1.5' }], // 24px
|
||||
'3xl': ['1.875rem', { lineHeight: '1.5' }], // 30px
|
||||
'4xl': ['2.25rem', { lineHeight: '1.5' }], // 36px
|
||||
'5xl': ['3rem', { lineHeight: '1.5' }], // 48px
|
||||
// Extra sizes
|
||||
'6xl': ['3.75rem', { lineHeight: '1' }], // 60px
|
||||
'7xl': ['4.5rem', { lineHeight: '1' }], // 72px
|
||||
},
|
||||
|
||||
fontWeight: {
|
||||
light: '300',
|
||||
normal: '400',
|
||||
medium: '500',
|
||||
semibold: '600',
|
||||
bold: '700',
|
||||
},
|
||||
|
||||
lineHeight: {
|
||||
tight: '1.25',
|
||||
snug: '1.375',
|
||||
normal: '1.5',
|
||||
relaxed: '1.625',
|
||||
loose: '2',
|
||||
},
|
||||
|
||||
// ============================================
|
||||
// 📏 SPACING - Tailwind Default + Custom
|
||||
// ============================================
|
||||
|
||||
spacing: {
|
||||
'18': '4.5rem', // 72px - container padding
|
||||
'20': '5rem', // 80px - section padding
|
||||
'24': '6rem', // 96px - large section
|
||||
'32': '8rem', // 128px - extra large section
|
||||
},
|
||||
|
||||
// ============================================
|
||||
// 📱 BREAKPOINTS - Webflow Original
|
||||
// ============================================
|
||||
|
||||
screens: {
|
||||
// Webflow breakpoints (max-width based)
|
||||
'xs': '479px', // < 479px (small mobile)
|
||||
'sm': '640px', // 640px+ (mobile landscape)
|
||||
'md': '768px', // 768px+ (tablet)
|
||||
'lg': '992px', // 992px+ (desktop - matches 991px closely)
|
||||
'xl': '1024px', // 1024px+ (large desktop)
|
||||
'2xl': '1280px', // 1280px+ (xlarge desktop)
|
||||
'3xl': '1536px', // 1536px+ (xxlarge desktop)
|
||||
},
|
||||
|
||||
// ============================================
|
||||
// 🔲 BORDER RADIUS
|
||||
// ============================================
|
||||
|
||||
borderRadius: {
|
||||
DEFAULT: '0.375rem', // 6px
|
||||
'none': '0',
|
||||
'sm': '0.125rem', // 2px
|
||||
DEFAULT: '0.375rem', // 6px
|
||||
'md': '0.5rem', // 8px
|
||||
'lg': '0.75rem', // 12px
|
||||
'xl': '1rem', // 16px
|
||||
'2xl': '1.5rem', // 24px
|
||||
'3xl': '2rem', // 32px
|
||||
'full': '9999px',
|
||||
},
|
||||
|
||||
// ============================================
|
||||
// 💫 SHADOWS
|
||||
// ============================================
|
||||
|
||||
boxShadow: {
|
||||
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
||||
DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06)',
|
||||
md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
|
||||
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
|
||||
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
|
||||
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
|
||||
inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
|
||||
},
|
||||
|
||||
// ============================================
|
||||
// ⏱ TRANSITIONS
|
||||
// ============================================
|
||||
|
||||
transitionDuration: {
|
||||
'150': '150ms',
|
||||
'200': '200ms',
|
||||
'250': '250ms',
|
||||
'300': '300ms',
|
||||
'350': '350ms',
|
||||
'400': '400ms',
|
||||
'500': '500ms',
|
||||
'600': '600ms',
|
||||
'700': '700ms',
|
||||
'1000': '1000ms',
|
||||
},
|
||||
|
||||
transitionTimingFunction: {
|
||||
DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
'in': 'cubic-bezier(0.4, 0, 1, 1)',
|
||||
'out': 'cubic-bezier(0, 0, 0.2, 1)',
|
||||
'in-out': 'cubic-bezier(0.4, 0, 0.6, 1)',
|
||||
},
|
||||
|
||||
// ============================================
|
||||
// 🎯 Z-INDEX LAYERS
|
||||
// ============================================
|
||||
|
||||
zIndex: {
|
||||
dropdown: 1000,
|
||||
sticky: 1020,
|
||||
modal: 1040,
|
||||
popover: 1060,
|
||||
tooltip: 1080,
|
||||
},
|
||||
|
||||
// ============================================
|
||||
// 📐 LAYOUT
|
||||
// ============================================
|
||||
|
||||
maxWidth: {
|
||||
'container': '1200px', // Max content width
|
||||
'container-sm': '640px',
|
||||
'container-md': '768px',
|
||||
'container-lg': '1024px',
|
||||
'container-xl': '1280px',
|
||||
},
|
||||
|
||||
// Container padding
|
||||
padding: {
|
||||
'container': '1.5rem', // 24px mobile
|
||||
'container-lg': '2rem', // 32px desktop
|
||||
},
|
||||
|
||||
// Grid (Webflow uses 12-column grid)
|
||||
gridTemplateColumns: {
|
||||
12: 'repeat(12, minmax(0, 1fr))',
|
||||
},
|
||||
gap: {
|
||||
'DEFAULT': '1.25rem', // 20px - Webflow grid gap
|
||||
'0': '0',
|
||||
'px': '1px',
|
||||
},
|
||||
|
||||
// ============================================
|
||||
// 🎨 COMPONENT SPECIFIC
|
||||
// ============================================
|
||||
|
||||
// Button styles
|
||||
keyframes: {
|
||||
fadeIn: {
|
||||
'0%': { opacity: '0' },
|
||||
'100%': { opacity: '1' },
|
||||
},
|
||||
slideUp: {
|
||||
'0%': { opacity: '0', transform: 'translateY(1rem)' },
|
||||
'100%': { opacity: '1', transform: 'translateY(0)' },
|
||||
},
|
||||
},
|
||||
|
||||
animation: {
|
||||
'fade-in': 'fadeIn 150ms ease-in-out',
|
||||
'slide-up': 'slideUp 250ms ease-in-out',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
require('@tailwindcss/typography'),
|
||||
],
|
||||
};
|
||||
|
||||
export default config;
|
||||
Reference in New Issue
Block a user