-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtailwind.config.js
More file actions
141 lines (140 loc) · 6.55 KB
/
Copy pathtailwind.config.js
File metadata and controls
141 lines (140 loc) · 6.55 KB
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
/** @type {import('tailwindcss').Config} */
import typography from '@tailwindcss/typography';
export default {
content: ['./src/**/*.{astro,html,js,ts,jsx,tsx,md,mdx}'],
darkMode: 'class',
theme: {
extend: {
colors: {
// ike Analytics brand palette v2 — teal-led "substructure" system.
// Key names kept stable (gold/red/teal) so existing ike-* utility
// classes across the site don't need a rename; values are retinted.
// gold's old role (primary accent) now carries Signal Teal; teal's
// old role (secondary/verified) now carries Deep Teal so the two
// channels stay visually distinct under the hood.
ike: {
black: '#0D0D0D',
white: '#F2F2F0',
gold: '#0A6D6F',
'gold-light': '#5FC7C9',
'gold-dark': '#063D3E',
red: '#8C3B39',
'red-light': '#B0534B',
'red-dark': '#5E211E',
teal: '#185856',
'teal-light': '#3D9C9E',
'teal-dark': '#0F3D3C',
},
// signal layer (matches Ike system semantics)
signal: {
gold: '#0A6D6F',
red: '#8C3B39',
teal: '#185856',
white: '#F2F2F0',
glow: '#5FC7C9',
},
// surface tokens
surface: {
dark: '#0D0D0D',
card: '#141414',
mid: '#1C1C1C',
border: '#2A2A2A',
'border-gold':'#0A6D6F40',
'border-red': '#8C3B3940',
'border-teal':'#18585640',
},
// Dark editorial canvas tokens — restyle WO-1
canvas: '#0A0A0A',
panel: '#111111',
cream: {
DEFAULT: '#F2F2F0',
dim: 'rgba(242,242,240,0.62)',
faint: 'rgba(242,242,240,0.40)',
},
mist: '#AFC5B9',
hairline: 'rgba(175,197,185,0.14)',
},
fontFamily: {
sans: ['Space Grotesk', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
display: ['JetBrains Mono', 'system-ui', 'monospace'],
},
backgroundImage: {
'ike-canvas': 'radial-gradient(ellipse at 30% 20%, rgba(10,109,111,0.08) 0%, transparent 55%), radial-gradient(ellipse at 70% 80%, rgba(61,156,158,0.07) 0%, transparent 55%), radial-gradient(ellipse at 80% 10%, rgba(140,59,57,0.06) 0%, transparent 50%), #0A0A0A',
'gold-glow': 'radial-gradient(ellipse at center, rgba(10,109,111,0.25) 0%, transparent 70%)',
'teal-glow': 'radial-gradient(ellipse at center, rgba(61,156,158,0.20) 0%, transparent 70%)',
'red-glow': 'radial-gradient(ellipse at center, rgba(140,59,57,0.20) 0%, transparent 70%)',
},
animation: {
'float': 'float 7s ease-in-out infinite',
'float-slow': 'float 11s ease-in-out infinite',
'pulse-slow': 'pulseSlow 4s ease-in-out infinite',
'pulse-gold': 'pulseGold 3s ease-in-out infinite alternate',
'pulse-teal': 'pulseTeal 4s ease-in-out infinite alternate',
'glow-gold': 'glowGold 2.5s ease-in-out infinite alternate',
'fade-up': 'fadeUp 0.5s ease-out',
'slide-up': 'slideUp 0.5s ease-out',
// Drift + float + shudder ported from boneface.css — restyle WO-1
'ike-drift-a': 'ikeDriftA 22s ease-in-out infinite',
'ike-drift-b': 'ikeDriftB 26s ease-in-out infinite',
'ike-drift-c': 'ikeDriftC 19s ease-in-out infinite',
'ike-drift-d': 'ikeDriftD 24s ease-in-out infinite',
'ike-float': 'ikeFloat 14s ease-in-out infinite',
'ike-shudder': 'ikeShudder 1.1s ease-out 1',
},
keyframes: {
float: { '0%,100%': { transform: 'translateY(0px)' }, '50%': { transform: 'translateY(-10px)' } },
pulseSlow: { '0%,100%': { opacity: '0.4' }, '50%': { opacity: '0.9' } },
pulseGold: { from: { opacity: '0.5' }, to: { opacity: '1' } },
pulseTeal: { from: { opacity: '0.4' }, to: { opacity: '0.9' } },
glowGold: { from: { boxShadow: '0 0 6px rgba(10,109,111,0.4)' }, to: { boxShadow: '0 0 18px rgba(10,109,111,0.8)' } },
fadeUp: { from: { opacity: '0', transform: 'translateY(16px)' }, to: { opacity: '1', transform: 'translateY(0)' } },
slideUp: { from: { opacity: '0', transform: 'translateY(20px)' }, to: { opacity: '1', transform: 'translateY(0)' } },
// Drift vocabulary ported verbatim from boneface.css — restyle WO-1
ikeDriftA: {
'0%, 100%': { transform: 'translate(0, 0) rotate(0deg)' },
'25%': { transform: 'translate(-8px, 5px) rotate(-1.4deg)' },
'50%': { transform: 'translate(6px, -6px) rotate(1.0deg)' },
'75%': { transform: 'translate(-4px, 7px) rotate(-0.8deg)' },
},
ikeDriftB: {
'0%, 100%': { transform: 'translate(0, 0) rotate(0deg)' },
'33%': { transform: 'translate(10px, -5px) rotate(1.6deg)' },
'66%': { transform: 'translate(-7px, 6px) rotate(-1.2deg)' },
},
ikeDriftC: {
'0%, 100%': { transform: 'translate(0, 0) rotate(0deg)' },
'50%': { transform: 'translate(5px, 10px) rotate(1.2deg)' },
},
ikeDriftD: {
'0%, 100%': { transform: 'translate(0, 0) rotate(0deg)' },
'40%': { transform: 'translate(-6px, 4px) rotate(-1.0deg)' },
'80%': { transform: 'translate(4px, -8px) rotate(0.8deg)' },
},
ikeFloat: {
'0%, 100%': { transform: 'rotate(-12deg) translate(0, 0)' },
'50%': { transform: 'rotate(-8deg) translate(0, -14px)' },
},
ikeShudder: {
'0%': { transform: 'translate(0, 0) rotate(0deg)' },
'20%': { transform: 'translate(-3px, 1px) rotate(-0.6deg)' },
'40%': { transform: 'translate(2px, -2px) rotate(0.4deg)' },
'60%': { transform: 'translate(-1px, 3px) rotate(-0.2deg)' },
'80%': { transform: 'translate(1px, -1px) rotate(0.3deg)' },
'100%': { transform: 'translate(0, 0) rotate(0deg)' },
},
},
boxShadow: {
'gold-sm': '0 0 8px rgba(10,109,111,0.35)',
'gold-md': '0 0 20px rgba(10,109,111,0.5)',
'gold-lg': '0 0 40px rgba(10,109,111,0.35)',
'teal-sm': '0 0 8px rgba(61,156,158,0.35)',
'teal-md': '0 0 20px rgba(61,156,158,0.5)',
'red-sm': '0 0 8px rgba(140,59,57,0.40)',
'red-md': '0 0 20px rgba(140,59,57,0.55)',
'card': '0 4px 24px rgba(0,0,0,0.6)',
},
},
},
plugins: [typography],
};