176 lines
5.3 KiB
JavaScript
176 lines
5.3 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
module.exports = {
|
|
content: [
|
|
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./src/components/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./src/layouts/**/*.{js,ts,jsx,tsx,mdx}',
|
|
'./src/app/**/*.{js,ts,jsx,tsx,mdx}',
|
|
],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Primary colors - BGN Biru Gelap (#071e49)
|
|
primary: {
|
|
50: '#f0f4ff',
|
|
100: '#e0e9ff',
|
|
200: '#c7d6ff',
|
|
300: '#a5b8ff',
|
|
400: '#8191ff',
|
|
500: '#5d6aff',
|
|
600: '#4c52ff',
|
|
700: '#3d3eeb',
|
|
800: '#2f32c7',
|
|
900: '#071e49', // BGN Biru Gelap - Main primary
|
|
950: '#051633',
|
|
},
|
|
// Secondary colors - BGN Biru Muda Pastel (#b5e0ea)
|
|
secondary: {
|
|
50: '#f0fbfc',
|
|
100: '#e0f6f8',
|
|
200: '#c7eef2',
|
|
300: '#b5e0ea', // BGN Biru Muda Pastel - Main secondary
|
|
400: '#8dd0dc',
|
|
500: '#5fb8c9',
|
|
600: '#4a9fb5',
|
|
700: '#3d8396',
|
|
800: '#356b7a',
|
|
900: '#2f5866',
|
|
950: '#1e3a44',
|
|
},
|
|
// Sidebar colors - BGN Biru Gelap variations
|
|
sidebar: {
|
|
50: '#f0f4ff',
|
|
100: '#e0e9ff',
|
|
200: '#c7d6ff',
|
|
300: '#a5b8ff',
|
|
400: '#8191ff',
|
|
500: '#5d6aff',
|
|
600: '#4c52ff',
|
|
700: '#3d3eeb',
|
|
800: '#2f32c7',
|
|
900: '#071e49', // BGN Biru Gelap - Main sidebar
|
|
950: '#051633',
|
|
},
|
|
// Accent colors based on BGN Biru Muda Pastel (#b5e0ea)
|
|
accent: {
|
|
50: '#f0fdff',
|
|
100: '#ccf7fe',
|
|
200: '#99effd',
|
|
300: '#60e2fa',
|
|
400: '#22ccf0',
|
|
500: '#b5e0ea', // BGN Biru Muda Pastel
|
|
600: '#0891b2',
|
|
700: '#0e7490',
|
|
800: '#155e75',
|
|
900: '#164e63',
|
|
950: '#083344',
|
|
},
|
|
// Gold colors based on BGN Emas (#d1b06c)
|
|
gold: {
|
|
50: '#fefdf8',
|
|
100: '#fdf9e8',
|
|
200: '#faf1c2',
|
|
300: '#f6e388',
|
|
400: '#f1d04b',
|
|
500: '#d1b06c', // BGN Emas
|
|
600: '#c19a3e',
|
|
700: '#a17c33',
|
|
800: '#85642f',
|
|
900: '#70532a',
|
|
950: '#412e15',
|
|
},
|
|
// Success colors - BGN Hijau Terang (#92d05d)
|
|
success: {
|
|
50: '#f4fdf0',
|
|
100: '#e6fbd9',
|
|
200: '#cef7b7',
|
|
300: '#adef85',
|
|
400: '#92d05d', // BGN Hijau Terang - Main success
|
|
500: '#6fb83f',
|
|
600: '#559530',
|
|
700: '#437428',
|
|
800: '#375c24',
|
|
900: '#2f4e21',
|
|
},
|
|
// BGN Gold/Emas colors (#d1b06c)
|
|
gold: {
|
|
50: '#fefbf3',
|
|
100: '#fdf4e1',
|
|
200: '#fae8c2',
|
|
300: '#f6d898',
|
|
400: '#f1c56c',
|
|
500: '#d1b06c', // BGN Emas - Main gold
|
|
600: '#b8955a',
|
|
700: '#9a7a4a',
|
|
800: '#7f6340',
|
|
900: '#6b5237',
|
|
950: '#3d2e1f',
|
|
},
|
|
warning: {
|
|
50: '#fffbeb',
|
|
100: '#fef3c7',
|
|
200: '#fde68a',
|
|
300: '#fcd34d',
|
|
400: '#fbbf24',
|
|
500: '#f59e0b',
|
|
600: '#d97706',
|
|
700: '#b45309',
|
|
800: '#92400e',
|
|
900: '#78350f',
|
|
},
|
|
error: {
|
|
50: '#fef2f2',
|
|
100: '#fee2e2',
|
|
200: '#fecaca',
|
|
300: '#fca5a5',
|
|
400: '#f87171',
|
|
500: '#ef4444',
|
|
600: '#dc2626',
|
|
700: '#b91c1c',
|
|
800: '#991b1b',
|
|
900: '#7f1d1d',
|
|
},
|
|
},
|
|
backgroundImage: {
|
|
'gradient-primary': 'linear-gradient(135deg, #071e49 0%, #2f32c7 100%)', // BGN Biru Gelap gradient
|
|
'gradient-secondary': 'linear-gradient(135deg, #b5e0ea 0%, #5fb8c9 100%)', // BGN Biru Muda gradient
|
|
'gradient-success': 'linear-gradient(135deg, #92d05d 0%, #6fb83f 100%)', // BGN Hijau gradient
|
|
'gradient-gold': 'linear-gradient(135deg, #d1b06c 0%, #b8955a 100%)', // BGN Emas gradient
|
|
'gradient-sidebar': 'linear-gradient(180deg, #071e49 0%, #2f32c7 100%)', // BGN sidebar gradient
|
|
},
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', 'sans-serif'],
|
|
display: ['Poppins', 'system-ui', 'sans-serif'],
|
|
},
|
|
fontSize: {
|
|
'xs': ['0.75rem', { lineHeight: '1rem' }],
|
|
'sm': ['0.875rem', { lineHeight: '1.25rem' }],
|
|
'base': ['1rem', { lineHeight: '1.5rem' }],
|
|
'lg': ['1.125rem', { lineHeight: '1.75rem' }],
|
|
'xl': ['1.25rem', { lineHeight: '1.75rem' }],
|
|
'2xl': ['1.5rem', { lineHeight: '2rem' }],
|
|
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
|
|
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
|
|
},
|
|
spacing: {
|
|
'18': '4.5rem',
|
|
'88': '22rem',
|
|
'128': '32rem',
|
|
},
|
|
borderRadius: {
|
|
'xl': '0.75rem',
|
|
'2xl': '1rem',
|
|
'3xl': '1.5rem',
|
|
},
|
|
boxShadow: {
|
|
'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
|
|
'medium': '0 4px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
|
|
'strong': '0 10px 40px -10px rgba(0, 0, 0, 0.15), 0 4px 25px -5px rgba(0, 0, 0, 0.1)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/forms'),
|
|
require('@tailwindcss/typography'),
|
|
],
|
|
} |