AetheL/tailwind.config.js at main · SuTang-vain/AetheL · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/** @type {import('tailwindcss').Config} */

export default {
  darkMode: "class",
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    container: {
      center: true,
    },
    extend: {
      colors: {
        background: '#fffaf4',
        'on-background': '#261815',
        surface: '#fffaf4',
        'on-surface': '#261815',
        'on-surface-variant': '#5a413b',
        'surface-dim': '#eed4cf',
        'surface-bright': '#fffaf4',
        'surface-container-lowest': '#ffffff',
        'surface-container-low': '#fff4ec',
        'surface-container': '#f5eee6',
        'surface-container-high': '#edf4ee',
        'surface-container-highest': '#e8f1ee',
        'surface-variant': '#eee5dc',
        'surface-tint': '#ad2c0d',
        primary: '#ad2c0d',
        'on-primary': '#ffffff',
        'primary-container': '#cf4425',
        'on-primary-container': '#fffbff',
        'primary-fixed': '#ffdad2',
        'primary-fixed-dim': '#ffb4a3',
        'inverse-primary': '#ffb4a3',
        secondary: '#3e6659',
        'on-secondary': '#ffffff',
        'secondary-container': '#c0ecdc',
        'on-secondary-container': '#264e42',
        tertiary: '#5c5977',
        'on-tertiary': '#ffffff',
        'tertiary-container': '#747191',
        'on-tertiary-container': '#fffbff',
        'tertiary-fixed': '#e4dfff',
        'tertiary-fixed-dim': '#c7c2e6',
        'inverse-surface': '#3c2d29',
        'inverse-on-surface': '#ffede9',
        outline: '#8e706a',
        'outline-variant': '#e2bfb7',
        error: '#ba1a1a',
        'on-error': '#ffffff',
        'error-container': '#ffdad6',
        'on-error-container': '#93000a',
      },
      fontFamily: {
        serif: ['Inter', 'system-ui', 'sans-serif'],
        sans: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'monospace'],
      },
      borderRadius: {
        glass: '24px',
      },
      spacing: {
        'glass-margin': '12px',
        'container-padding': '24px',
        'section-gap': '80px',
        gutter: '16px',
        unit: '8px',
      },
      animation: {
        'bubble-in': 'bubbleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)',
        'breathe': 'breathe 3s ease-in-out infinite',
        'float': 'float 6s ease-in-out infinite',
        'blob-drift': 'blobDrift 20s ease-in-out infinite',
      },
      keyframes: {
        bubbleIn: {
          '0%': { transform: 'scale(0)', opacity: '0' },
          '100%': { transform: 'scale(1)', opacity: '1' },
        },
        breathe: {
          '0%, 100%': { transform: 'scale(1)' },
          '50%': { transform: 'scale(1.02)' },
        },
        float: {
          '0%, 100%': { transform: 'translateY(0)' },
          '50%': { transform: 'translateY(-8px)' },
        },
        blobDrift: {
          '0%, 100%': { transform: 'translate(0, 0) scale(1)' },
          '33%': { transform: 'translate(30px, -20px) scale(1.05)' },
          '66%': { transform: 'translate(-20px, 15px) scale(0.95)' },
        },
      },
      boxShadow: {
        'glass': '0 8px 24px rgba(62, 102, 89, 0.055)',
        'glass-hover': '0 10px 28px rgba(62, 102, 89, 0.08)',
        'glow-primary': '0 8px 24px rgba(217, 35, 15, 0.22)',
        'glow-tertiary': '0 8px 24px rgba(116, 113, 145, 0.16)',
      },
    },
  },
  plugins: [],
};