app/frontend/tailwind.config.ts

148 lines
5.2 KiB
TypeScript

import type { Config } from "tailwindcss";
export default {
content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
colors: {
// Primary colors (Rose)
primary: {
DEFAULT: "var(--color-primary)",
50: "var(--color-rose-50)",
100: "var(--color-primary-100)",
200: "var(--color-primary-200)",
300: "var(--color-primary-300)",
400: "var(--color-primary-400)",
500: "var(--color-primary-500)",
600: "var(--color-primary-600)",
700: "var(--color-primary-700)",
800: "var(--color-primary-800)",
900: "var(--color-primary-900)",
950: "var(--color-rose-950)",
},
// Secondary colors (Deluge)
secondary: {
DEFAULT: "var(--color-secondary)",
50: "var(--color-deluge-50)",
100: "var(--color-secondary-100)",
200: "var(--color-secondary-200)",
300: "var(--color-secondary-300)",
400: "var(--color-secondary-400)",
500: "var(--color-secondary-500)",
600: "var(--color-secondary-600)",
700: "var(--color-secondary-700)",
800: "var(--color-secondary-800)",
900: "var(--color-secondary-900)",
950: "var(--color-deluge-950)",
},
// Accent Blue (Malibu)
accent: {
DEFAULT: "var(--color-accent-blue)",
50: "var(--color-malibu-50)",
100: "var(--color-accent-blue-100)",
200: "var(--color-accent-blue-200)",
300: "var(--color-accent-blue-300)",
400: "var(--color-accent-blue-400)",
500: "var(--color-accent-blue-500)",
600: "var(--color-accent-blue-600)",
700: "var(--color-accent-blue-700)",
800: "var(--color-accent-blue-800)",
900: "var(--color-accent-blue-900)",
950: "var(--color-malibu-950)",
},
// Accent Yellow (Gamboge)
yellow: {
DEFAULT: "var(--color-accent-yellow)",
50: "var(--color-accent-yellow-50)",
100: "var(--color-accent-yellow-100)",
200: "var(--color-accent-yellow-200)",
300: "var(--color-accent-yellow-300)",
400: "var(--color-accent-yellow-400)",
500: "var(--color-accent-yellow-500)",
600: "var(--color-accent-yellow-600)",
700: "var(--color-accent-yellow-700)",
800: "var(--color-accent-yellow-800)",
900: "var(--color-accent-yellow-900)",
950: "var(--color-accent-yellow-950)",
},
// Grays (Ebony Clay)
gray: {
DEFAULT: "var(--color-gray-500)",
100: "var(--color-gray-100)",
200: "var(--color-gray-200)",
300: "var(--color-gray-300)",
400: "var(--color-gray-400)",
500: "var(--color-gray-500)",
600: "var(--color-gray-600)",
700: "var(--color-gray-700)",
800: "var(--color-gray-800)",
900: "var(--color-gray-900)",
950: "var(--color-ebony-clay-950)",
},
// Semantic colors
danger: {
DEFAULT: "var(--color-danger)",
50: "var(--color-danger-50)",
100: "var(--color-danger-100)",
200: "var(--color-danger-200)",
300: "var(--color-danger-300)",
400: "var(--color-danger-400)",
500: "var(--color-danger-500)",
600: "var(--color-danger-600)",
700: "var(--color-danger-700)",
800: "var(--color-danger-800)",
900: "var(--color-danger-900)",
950: "var(--color-danger-950)",
},
success: {
DEFAULT: "var(--color-success)",
50: "var(--color-success-50)",
100: "var(--color-success-100)",
200: "var(--color-success-200)",
300: "var(--color-success-300)",
400: "var(--color-success-400)",
500: "var(--color-success-500)",
600: "var(--color-success-600)",
700: "var(--color-success-700)",
800: "var(--color-success-800)",
900: "var(--color-success-900)",
950: "var(--color-success-950)",
},
warning: {
DEFAULT: "var(--color-warning)",
50: "var(--color-warning-50)",
100: "var(--color-warning-100)",
200: "var(--color-warning-200)",
300: "var(--color-warning-300)",
400: "var(--color-warning-400)",
500: "var(--color-warning-500)",
600: "var(--color-warning-600)",
700: "var(--color-warning-700)",
800: "var(--color-warning-800)",
900: "var(--color-warning-900)",
950: "var(--color-warning-950)",
},
// Legacy support
background: "var(--color-background)",
foreground: "var(--color-foreground)",
},
borderRadius: {
DEFAULT: "4px",
sm: "2px",
md: "4px",
lg: "8px",
xl: "12px",
"2xl": "16px",
},
fontFamily: {
default: ['"Anta"', 'serif'],
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
},
plugins: [],
} satisfies Config;