astralkit 0.3.0 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +44 -0
- package/LICENSE +34 -34
- package/README.md +71 -58
- package/astralkit-theme-v4.css +618 -612
- package/astralkit-theme.css +618 -610
- package/astralkit-utilities.css +543 -543
- package/lib/utils.js +28 -28
- package/package.json +53 -45
- package/palettes.css +299 -299
- package/primitives/accounts.css +435 -435
- package/primitives/animations.css +136 -136
- package/primitives/avatar.css +410 -410
- package/primitives/badges.css +231 -231
- package/primitives/effects.css +388 -388
- package/primitives/focus.css +25 -25
- package/primitives/forms.css +2155 -2155
- package/primitives/icons.css +90 -90
- package/primitives/layout.css +217 -217
- package/primitives/mobile.css +557 -557
- package/primitives/navigation.css +1057 -1057
- package/primitives/sidebar.css +1819 -1819
- package/primitives/typography.css +324 -324
- package/tailwind.cjs +416 -416
- package/tailwind.js +491 -491
package/palettes.css
CHANGED
|
@@ -1,299 +1,299 @@
|
|
|
1
|
-
/* ══════════════════════════════════════════════════════════
|
|
2
|
-
AstralKit Preset Theme Palettes
|
|
3
|
-
|
|
4
|
-
Usage: Add data-ak-theme="palette-name" to <html> or any container.
|
|
5
|
-
Example: <html data-ak-theme="ocean-blue">
|
|
6
|
-
|
|
7
|
-
Each palette overrides the 11 core semantic color variables.
|
|
8
|
-
All 90+ component tokens derive from these automatically.
|
|
9
|
-
|
|
10
|
-
Palettes follow the 60-30-10 rule:
|
|
11
|
-
- 60% bg/surface (dominant canvas)
|
|
12
|
-
- 30% borders/secondary text/cards
|
|
13
|
-
- 10% primary accent (CTAs, links, focus rings)
|
|
14
|
-
══════════════════════════════════════════════════════════ */
|
|
15
|
-
|
|
16
|
-
/* ══════════════════════════════════════════════════════════
|
|
17
|
-
DECORATIVE GLOW RECIPES (black & white by default)
|
|
18
|
-
|
|
19
|
-
Used on dark banner panels (bg-[#0a0a0a]) to add soft ambient
|
|
20
|
-
depth without introducing color. These are tokenless gradients
|
|
21
|
-
because CSS variables can't be used inside url()/gradient()
|
|
22
|
-
strings inline in React style props reliably.
|
|
23
|
-
|
|
24
|
-
Canonical white-glow pattern used by Relay, Thrust, Vector,
|
|
25
|
-
Beacon, Bastion, Tessera banners. Apply via inline style:
|
|
26
|
-
|
|
27
|
-
— Top-right primary glow (stronger):
|
|
28
|
-
background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 65%);
|
|
29
|
-
className: absolute -top-40 -right-32 w-[44rem] h-[44rem] rounded-full opacity-50 blur-3xl
|
|
30
|
-
|
|
31
|
-
— Bottom-left secondary glow (softer):
|
|
32
|
-
background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 65%);
|
|
33
|
-
className: absolute -bottom-40 -left-32 w-[36rem] h-[36rem] rounded-full opacity-40 blur-3xl
|
|
34
|
-
|
|
35
|
-
— Middle accent (optional, subtle):
|
|
36
|
-
background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
|
|
37
|
-
className: absolute top-1/3 -right-20 w-[24rem] h-[24rem] rounded-full opacity-25 blur-3xl
|
|
38
|
-
|
|
39
|
-
For dark-mode dot-grid textures:
|
|
40
|
-
backgroundImage: radial-gradient(#ffffff 1px, transparent 1px);
|
|
41
|
-
backgroundSize: 28px 28px or 32px 32px;
|
|
42
|
-
className: absolute inset-0 opacity-10
|
|
43
|
-
|
|
44
|
-
For light-mode dot-grid textures (on bg-ak-surface / bg-ak-bg):
|
|
45
|
-
backgroundImage: radial-gradient(#000000 1px, transparent 1px);
|
|
46
|
-
backgroundSize: 24px 24px;
|
|
47
|
-
className: absolute inset-0 opacity-[0.05] or opacity-[0.06]
|
|
48
|
-
|
|
49
|
-
For light-mode neutral glows (on bg-ak-surface):
|
|
50
|
-
Top-right: radial-gradient(circle, #000 0%, transparent 65%) at opacity-[0.05]
|
|
51
|
-
Bottom-left: radial-gradient(circle, #000 0%, transparent 65%) at opacity-[0.035]
|
|
52
|
-
|
|
53
|
-
DO NOT introduce hue-tinted glows (orange, sky, teal, etc) in
|
|
54
|
-
Ready screens. If a palette needs warmth, define it as a preset
|
|
55
|
-
below and let the theme system propagate. Decorative glows on
|
|
56
|
-
dark banners stay white-alpha; decorative glows on light surfaces
|
|
57
|
-
stay black-alpha.
|
|
58
|
-
══════════════════════════════════════════════════════════ */
|
|
59
|
-
|
|
60
|
-
/* ─── Light Palettes ─── */
|
|
61
|
-
|
|
62
|
-
[data-ak-theme="ocean-blue"] {
|
|
63
|
-
--color-ak-bg: #FFFFFE;
|
|
64
|
-
--color-ak-surface: #D8EEFE;
|
|
65
|
-
--color-ak-surface-2: #E8F3FD;
|
|
66
|
-
--color-ak-text: #094067;
|
|
67
|
-
--color-ak-text-secondary: #5F6C7B;
|
|
68
|
-
--color-ak-text-muted: #8899A6;
|
|
69
|
-
--color-ak-primary: #3DA9FC;
|
|
70
|
-
--color-ak-primary-hover: #2B96E8;
|
|
71
|
-
--color-ak-primary-active: #1E83D4;
|
|
72
|
-
--color-ak-on-primary: #ffffff;
|
|
73
|
-
--color-ak-border: #C4DFF3;
|
|
74
|
-
--color-ak-border-subtle: #E0EFF9;
|
|
75
|
-
--color-ak-border-strong: #90B4CE;
|
|
76
|
-
--color-ak-border-focus: #3DA9FC;
|
|
77
|
-
--color-ak-text-link: #3DA9FC;
|
|
78
|
-
--color-ak-danger: #EF4565;
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
[data-ak-theme="forest-gold"] {
|
|
82
|
-
--color-ak-bg: #F2F7F5;
|
|
83
|
-
--color-ak-surface: #FFFFFF;
|
|
84
|
-
--color-ak-surface-2: #E8F0ED;
|
|
85
|
-
--color-ak-text: #00473E;
|
|
86
|
-
--color-ak-text-secondary: #475D5B;
|
|
87
|
-
--color-ak-text-muted: #7A8E8C;
|
|
88
|
-
--color-ak-primary: #FAAE2B;
|
|
89
|
-
--color-ak-primary-hover: #E89D1A;
|
|
90
|
-
--color-ak-primary-active: #D18C0E;
|
|
91
|
-
--color-ak-on-primary: #00473E;
|
|
92
|
-
--color-ak-border: #C9D5D2;
|
|
93
|
-
--color-ak-border-subtle: #DDE6E3;
|
|
94
|
-
--color-ak-border-strong: #A0B2AE;
|
|
95
|
-
--color-ak-border-focus: #FAAE2B;
|
|
96
|
-
--color-ak-text-link: #00473E;
|
|
97
|
-
--color-ak-danger: #FA5246;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
[data-ak-theme="minimal-violet"] {
|
|
101
|
-
--color-ak-bg: #FFFFFE;
|
|
102
|
-
--color-ak-surface: #F0EEFA;
|
|
103
|
-
--color-ak-surface-2: #E8E6F4;
|
|
104
|
-
--color-ak-text: #2B2C34;
|
|
105
|
-
--color-ak-text-secondary: #555660;
|
|
106
|
-
--color-ak-text-muted: #8788A0;
|
|
107
|
-
--color-ak-primary: #6246EA;
|
|
108
|
-
--color-ak-primary-hover: #5035D1;
|
|
109
|
-
--color-ak-primary-active: #4028B8;
|
|
110
|
-
--color-ak-on-primary: #ffffff;
|
|
111
|
-
--color-ak-border: #D1D1E9;
|
|
112
|
-
--color-ak-border-subtle: #E4E4F0;
|
|
113
|
-
--color-ak-border-strong: #ABABCD;
|
|
114
|
-
--color-ak-border-focus: #6246EA;
|
|
115
|
-
--color-ak-text-link: #6246EA;
|
|
116
|
-
--color-ak-danger: #E45858;
|
|
117
|
-
}
|
|
118
|
-
|
|
119
|
-
[data-ak-theme="warm-earth"] {
|
|
120
|
-
--color-ak-bg: #F8F5F2;
|
|
121
|
-
--color-ak-surface: #FFFFFF;
|
|
122
|
-
--color-ak-surface-2: #F0EDE9;
|
|
123
|
-
--color-ak-text: #232323;
|
|
124
|
-
--color-ak-text-secondary: #4A4A4A;
|
|
125
|
-
--color-ak-text-muted: #888888;
|
|
126
|
-
--color-ak-primary: #078080;
|
|
127
|
-
--color-ak-primary-hover: #066D6D;
|
|
128
|
-
--color-ak-primary-active: #055A5A;
|
|
129
|
-
--color-ak-on-primary: #ffffff;
|
|
130
|
-
--color-ak-border: #E8E2DB;
|
|
131
|
-
--color-ak-border-subtle: #F0ECE6;
|
|
132
|
-
--color-ak-border-strong: #CFC5B8;
|
|
133
|
-
--color-ak-border-focus: #078080;
|
|
134
|
-
--color-ak-text-link: #078080;
|
|
135
|
-
--color-ak-danger: #F45D48;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
[data-ak-theme="tangerine"] {
|
|
139
|
-
--color-ak-bg: #EFF0F3;
|
|
140
|
-
--color-ak-surface: #FFFFFE;
|
|
141
|
-
--color-ak-surface-2: #E5E6E9;
|
|
142
|
-
--color-ak-text: #0D0D0D;
|
|
143
|
-
--color-ak-text-secondary: #2A2A2A;
|
|
144
|
-
--color-ak-text-muted: #777777;
|
|
145
|
-
--color-ak-primary: #FF8E3C;
|
|
146
|
-
--color-ak-primary-hover: #E87D2E;
|
|
147
|
-
--color-ak-primary-active: #D16C20;
|
|
148
|
-
--color-ak-on-primary: #0D0D0D;
|
|
149
|
-
--color-ak-border: #DDDDE2;
|
|
150
|
-
--color-ak-border-subtle: #EBEBEF;
|
|
151
|
-
--color-ak-border-strong: #C0C0C8;
|
|
152
|
-
--color-ak-border-focus: #FF8E3C;
|
|
153
|
-
--color-ak-text-link: #0D0D0D;
|
|
154
|
-
--color-ak-danger: #D9376E;
|
|
155
|
-
}
|
|
156
|
-
|
|
157
|
-
[data-ak-theme="slate-pro"] {
|
|
158
|
-
--color-ak-bg: #F8FAFC;
|
|
159
|
-
--color-ak-surface: #FFFFFF;
|
|
160
|
-
--color-ak-surface-2: #F1F5F9;
|
|
161
|
-
--color-ak-text: #0F172A;
|
|
162
|
-
--color-ak-text-secondary: #475569;
|
|
163
|
-
--color-ak-text-muted: #94A3B8;
|
|
164
|
-
--color-ak-primary: #2563EB;
|
|
165
|
-
--color-ak-primary-hover: #1D4FD7;
|
|
166
|
-
--color-ak-primary-active: #1E40AF;
|
|
167
|
-
--color-ak-on-primary: #ffffff;
|
|
168
|
-
--color-ak-border: #E2E8F0;
|
|
169
|
-
--color-ak-border-subtle: #F1F5F9;
|
|
170
|
-
--color-ak-border-strong: #CBD5E1;
|
|
171
|
-
--color-ak-border-focus: #2563EB;
|
|
172
|
-
--color-ak-text-link: #2563EB;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
[data-ak-theme="emerald-saas"] {
|
|
176
|
-
--color-ak-bg: #F9FAFB;
|
|
177
|
-
--color-ak-surface: #FFFFFF;
|
|
178
|
-
--color-ak-surface-2: #F3F4F6;
|
|
179
|
-
--color-ak-text: #111827;
|
|
180
|
-
--color-ak-text-secondary: #4B5563;
|
|
181
|
-
--color-ak-text-muted: #9CA3AF;
|
|
182
|
-
--color-ak-primary: #059669;
|
|
183
|
-
--color-ak-primary-hover: #047857;
|
|
184
|
-
--color-ak-primary-active: #065F46;
|
|
185
|
-
--color-ak-on-primary: #ffffff;
|
|
186
|
-
--color-ak-border: #E5E7EB;
|
|
187
|
-
--color-ak-border-subtle: #F3F4F6;
|
|
188
|
-
--color-ak-border-strong: #D1D5DB;
|
|
189
|
-
--color-ak-border-focus: #059669;
|
|
190
|
-
--color-ak-text-link: #059669;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
[data-ak-theme="astral-violet"] {
|
|
194
|
-
--color-ak-bg: #FAF9F7;
|
|
195
|
-
--color-ak-surface: #FFFFFF;
|
|
196
|
-
--color-ak-surface-2: #F4F2F9;
|
|
197
|
-
--color-ak-text: #150A35;
|
|
198
|
-
--color-ak-text-secondary: #544D6B;
|
|
199
|
-
--color-ak-text-muted: #8B849E;
|
|
200
|
-
--color-ak-primary: #6933FF;
|
|
201
|
-
--color-ak-primary-hover: #5A24F0;
|
|
202
|
-
--color-ak-primary-active: #4B18DE;
|
|
203
|
-
--color-ak-on-primary: #ffffff;
|
|
204
|
-
--color-ak-border: #E6E3EE;
|
|
205
|
-
--color-ak-border-subtle: #F0EEF5;
|
|
206
|
-
--color-ak-border-strong: #C8C3D6;
|
|
207
|
-
--color-ak-border-focus: #6933FF;
|
|
208
|
-
--color-ak-text-link: #6933FF;
|
|
209
|
-
}
|
|
210
|
-
|
|
211
|
-
/* ─── Dark Palettes ─── */
|
|
212
|
-
|
|
213
|
-
[data-ak-theme="midnight"] {
|
|
214
|
-
--color-ak-bg: #16161A;
|
|
215
|
-
--color-ak-surface: #242629;
|
|
216
|
-
--color-ak-surface-2: #2E3035;
|
|
217
|
-
--color-ak-text: #FFFFFE;
|
|
218
|
-
--color-ak-text-secondary: #94A1B2;
|
|
219
|
-
--color-ak-text-muted: #6B7280;
|
|
220
|
-
--color-ak-primary: #7F5AF0;
|
|
221
|
-
--color-ak-primary-hover: #9B7BF5;
|
|
222
|
-
--color-ak-primary-active: #6B46DC;
|
|
223
|
-
--color-ak-on-primary: #16161A;
|
|
224
|
-
--color-ak-border: rgba(255, 255, 255, 0.10);
|
|
225
|
-
--color-ak-border-subtle: rgba(255, 255, 255, 0.06);
|
|
226
|
-
--color-ak-border-strong: rgba(255, 255, 255, 0.16);
|
|
227
|
-
--color-ak-border-focus: #7F5AF0;
|
|
228
|
-
--color-ak-text-link: #7F5AF0;
|
|
229
|
-
--color-ak-hover: rgba(255,255,255,0.04);
|
|
230
|
-
--color-ak-active: rgba(255,255,255,0.08);
|
|
231
|
-
--shadow-ak-xs: none;
|
|
232
|
-
--shadow-ak-sm: none;
|
|
233
|
-
}
|
|
234
|
-
|
|
235
|
-
[data-ak-theme="ember-dark"] {
|
|
236
|
-
--color-ak-bg: #0F0E17;
|
|
237
|
-
--color-ak-surface: #1A1925;
|
|
238
|
-
--color-ak-surface-2: #252433;
|
|
239
|
-
--color-ak-text: #FFFFFE;
|
|
240
|
-
--color-ak-text-secondary: #A7A9BE;
|
|
241
|
-
--color-ak-text-muted: #6E7089;
|
|
242
|
-
--color-ak-primary: #FF8906;
|
|
243
|
-
--color-ak-primary-hover: #FFa033;
|
|
244
|
-
--color-ak-primary-active: #E67A00;
|
|
245
|
-
--color-ak-on-primary: #0F0E17;
|
|
246
|
-
--color-ak-border: rgba(255, 255, 255, 0.10);
|
|
247
|
-
--color-ak-border-subtle: rgba(255, 255, 255, 0.06);
|
|
248
|
-
--color-ak-border-strong: rgba(255, 255, 255, 0.16);
|
|
249
|
-
--color-ak-border-focus: #FF8906;
|
|
250
|
-
--color-ak-text-link: #FF8906;
|
|
251
|
-
--color-ak-hover: rgba(255,255,255,0.04);
|
|
252
|
-
--color-ak-active: rgba(255,255,255,0.08);
|
|
253
|
-
--shadow-ak-xs: none;
|
|
254
|
-
--shadow-ak-sm: none;
|
|
255
|
-
}
|
|
256
|
-
|
|
257
|
-
[data-ak-theme="obsidian"] {
|
|
258
|
-
--color-ak-bg: #09090B;
|
|
259
|
-
--color-ak-surface: #18181B;
|
|
260
|
-
--color-ak-surface-2: #27272A;
|
|
261
|
-
--color-ak-text: #FAFAFA;
|
|
262
|
-
--color-ak-text-secondary: #A1A1AA;
|
|
263
|
-
--color-ak-text-muted: #71717A;
|
|
264
|
-
--color-ak-primary: #60A5FA;
|
|
265
|
-
--color-ak-primary-hover: #93C5FD;
|
|
266
|
-
--color-ak-primary-active: #3B82F6;
|
|
267
|
-
--color-ak-on-primary: #09090B;
|
|
268
|
-
--color-ak-border: rgba(255, 255, 255, 0.10);
|
|
269
|
-
--color-ak-border-subtle: rgba(255, 255, 255, 0.06);
|
|
270
|
-
--color-ak-border-strong: rgba(255, 255, 255, 0.16);
|
|
271
|
-
--color-ak-border-focus: #60A5FA;
|
|
272
|
-
--color-ak-text-link: #60A5FA;
|
|
273
|
-
--color-ak-hover: rgba(255,255,255,0.04);
|
|
274
|
-
--color-ak-active: rgba(255,255,255,0.08);
|
|
275
|
-
--shadow-ak-xs: none;
|
|
276
|
-
--shadow-ak-sm: none;
|
|
277
|
-
}
|
|
278
|
-
|
|
279
|
-
[data-ak-theme="deep-teal"] {
|
|
280
|
-
--color-ak-bg: #004643;
|
|
281
|
-
--color-ak-surface: #00332F;
|
|
282
|
-
--color-ak-surface-2: #0A5854;
|
|
283
|
-
--color-ak-text: #FFFFFE;
|
|
284
|
-
--color-ak-text-secondary: #ABD1C6;
|
|
285
|
-
--color-ak-text-muted: #7AAA9E;
|
|
286
|
-
--color-ak-primary: #F9BC60;
|
|
287
|
-
--color-ak-primary-hover: #FAC97A;
|
|
288
|
-
--color-ak-primary-active: #E8AA4E;
|
|
289
|
-
--color-ak-on-primary: #004643;
|
|
290
|
-
--color-ak-border: rgba(255, 255, 255, 0.10);
|
|
291
|
-
--color-ak-border-subtle: rgba(255, 255, 255, 0.06);
|
|
292
|
-
--color-ak-border-strong: rgba(255, 255, 255, 0.16);
|
|
293
|
-
--color-ak-border-focus: #F9BC60;
|
|
294
|
-
--color-ak-text-link: #F9BC60;
|
|
295
|
-
--color-ak-hover: rgba(255,255,255,0.04);
|
|
296
|
-
--color-ak-active: rgba(255,255,255,0.08);
|
|
297
|
-
--shadow-ak-xs: none;
|
|
298
|
-
--shadow-ak-sm: none;
|
|
299
|
-
}
|
|
1
|
+
/* ══════════════════════════════════════════════════════════
|
|
2
|
+
AstralKit Preset Theme Palettes
|
|
3
|
+
|
|
4
|
+
Usage: Add data-ak-theme="palette-name" to <html> or any container.
|
|
5
|
+
Example: <html data-ak-theme="ocean-blue">
|
|
6
|
+
|
|
7
|
+
Each palette overrides the 11 core semantic color variables.
|
|
8
|
+
All 90+ component tokens derive from these automatically.
|
|
9
|
+
|
|
10
|
+
Palettes follow the 60-30-10 rule:
|
|
11
|
+
- 60% bg/surface (dominant canvas)
|
|
12
|
+
- 30% borders/secondary text/cards
|
|
13
|
+
- 10% primary accent (CTAs, links, focus rings)
|
|
14
|
+
══════════════════════════════════════════════════════════ */
|
|
15
|
+
|
|
16
|
+
/* ══════════════════════════════════════════════════════════
|
|
17
|
+
DECORATIVE GLOW RECIPES (black & white by default)
|
|
18
|
+
|
|
19
|
+
Used on dark banner panels (bg-[#0a0a0a]) to add soft ambient
|
|
20
|
+
depth without introducing color. These are tokenless gradients
|
|
21
|
+
because CSS variables can't be used inside url()/gradient()
|
|
22
|
+
strings inline in React style props reliably.
|
|
23
|
+
|
|
24
|
+
Canonical white-glow pattern used by Relay, Thrust, Vector,
|
|
25
|
+
Beacon, Bastion, Tessera banners. Apply via inline style:
|
|
26
|
+
|
|
27
|
+
— Top-right primary glow (stronger):
|
|
28
|
+
background: radial-gradient(circle, rgba(255,255,255,0.45) 0%, transparent 65%);
|
|
29
|
+
className: absolute -top-40 -right-32 w-[44rem] h-[44rem] rounded-full opacity-50 blur-3xl
|
|
30
|
+
|
|
31
|
+
— Bottom-left secondary glow (softer):
|
|
32
|
+
background: radial-gradient(circle, rgba(255,255,255,0.35) 0%, transparent 65%);
|
|
33
|
+
className: absolute -bottom-40 -left-32 w-[36rem] h-[36rem] rounded-full opacity-40 blur-3xl
|
|
34
|
+
|
|
35
|
+
— Middle accent (optional, subtle):
|
|
36
|
+
background: radial-gradient(circle, rgba(255,255,255,0.25) 0%, transparent 70%);
|
|
37
|
+
className: absolute top-1/3 -right-20 w-[24rem] h-[24rem] rounded-full opacity-25 blur-3xl
|
|
38
|
+
|
|
39
|
+
For dark-mode dot-grid textures:
|
|
40
|
+
backgroundImage: radial-gradient(#ffffff 1px, transparent 1px);
|
|
41
|
+
backgroundSize: 28px 28px or 32px 32px;
|
|
42
|
+
className: absolute inset-0 opacity-10
|
|
43
|
+
|
|
44
|
+
For light-mode dot-grid textures (on bg-ak-surface / bg-ak-bg):
|
|
45
|
+
backgroundImage: radial-gradient(#000000 1px, transparent 1px);
|
|
46
|
+
backgroundSize: 24px 24px;
|
|
47
|
+
className: absolute inset-0 opacity-[0.05] or opacity-[0.06]
|
|
48
|
+
|
|
49
|
+
For light-mode neutral glows (on bg-ak-surface):
|
|
50
|
+
Top-right: radial-gradient(circle, #000 0%, transparent 65%) at opacity-[0.05]
|
|
51
|
+
Bottom-left: radial-gradient(circle, #000 0%, transparent 65%) at opacity-[0.035]
|
|
52
|
+
|
|
53
|
+
DO NOT introduce hue-tinted glows (orange, sky, teal, etc) in
|
|
54
|
+
Ready screens. If a palette needs warmth, define it as a preset
|
|
55
|
+
below and let the theme system propagate. Decorative glows on
|
|
56
|
+
dark banners stay white-alpha; decorative glows on light surfaces
|
|
57
|
+
stay black-alpha.
|
|
58
|
+
══════════════════════════════════════════════════════════ */
|
|
59
|
+
|
|
60
|
+
/* ─── Light Palettes ─── */
|
|
61
|
+
|
|
62
|
+
[data-ak-theme="ocean-blue"] {
|
|
63
|
+
--color-ak-bg: #FFFFFE;
|
|
64
|
+
--color-ak-surface: #D8EEFE;
|
|
65
|
+
--color-ak-surface-2: #E8F3FD;
|
|
66
|
+
--color-ak-text: #094067;
|
|
67
|
+
--color-ak-text-secondary: #5F6C7B;
|
|
68
|
+
--color-ak-text-muted: #8899A6;
|
|
69
|
+
--color-ak-primary: #3DA9FC;
|
|
70
|
+
--color-ak-primary-hover: #2B96E8;
|
|
71
|
+
--color-ak-primary-active: #1E83D4;
|
|
72
|
+
--color-ak-on-primary: #ffffff;
|
|
73
|
+
--color-ak-border: #C4DFF3;
|
|
74
|
+
--color-ak-border-subtle: #E0EFF9;
|
|
75
|
+
--color-ak-border-strong: #90B4CE;
|
|
76
|
+
--color-ak-border-focus: #3DA9FC;
|
|
77
|
+
--color-ak-text-link: #3DA9FC;
|
|
78
|
+
--color-ak-danger: #EF4565;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
[data-ak-theme="forest-gold"] {
|
|
82
|
+
--color-ak-bg: #F2F7F5;
|
|
83
|
+
--color-ak-surface: #FFFFFF;
|
|
84
|
+
--color-ak-surface-2: #E8F0ED;
|
|
85
|
+
--color-ak-text: #00473E;
|
|
86
|
+
--color-ak-text-secondary: #475D5B;
|
|
87
|
+
--color-ak-text-muted: #7A8E8C;
|
|
88
|
+
--color-ak-primary: #FAAE2B;
|
|
89
|
+
--color-ak-primary-hover: #E89D1A;
|
|
90
|
+
--color-ak-primary-active: #D18C0E;
|
|
91
|
+
--color-ak-on-primary: #00473E;
|
|
92
|
+
--color-ak-border: #C9D5D2;
|
|
93
|
+
--color-ak-border-subtle: #DDE6E3;
|
|
94
|
+
--color-ak-border-strong: #A0B2AE;
|
|
95
|
+
--color-ak-border-focus: #FAAE2B;
|
|
96
|
+
--color-ak-text-link: #00473E;
|
|
97
|
+
--color-ak-danger: #FA5246;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
[data-ak-theme="minimal-violet"] {
|
|
101
|
+
--color-ak-bg: #FFFFFE;
|
|
102
|
+
--color-ak-surface: #F0EEFA;
|
|
103
|
+
--color-ak-surface-2: #E8E6F4;
|
|
104
|
+
--color-ak-text: #2B2C34;
|
|
105
|
+
--color-ak-text-secondary: #555660;
|
|
106
|
+
--color-ak-text-muted: #8788A0;
|
|
107
|
+
--color-ak-primary: #6246EA;
|
|
108
|
+
--color-ak-primary-hover: #5035D1;
|
|
109
|
+
--color-ak-primary-active: #4028B8;
|
|
110
|
+
--color-ak-on-primary: #ffffff;
|
|
111
|
+
--color-ak-border: #D1D1E9;
|
|
112
|
+
--color-ak-border-subtle: #E4E4F0;
|
|
113
|
+
--color-ak-border-strong: #ABABCD;
|
|
114
|
+
--color-ak-border-focus: #6246EA;
|
|
115
|
+
--color-ak-text-link: #6246EA;
|
|
116
|
+
--color-ak-danger: #E45858;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
[data-ak-theme="warm-earth"] {
|
|
120
|
+
--color-ak-bg: #F8F5F2;
|
|
121
|
+
--color-ak-surface: #FFFFFF;
|
|
122
|
+
--color-ak-surface-2: #F0EDE9;
|
|
123
|
+
--color-ak-text: #232323;
|
|
124
|
+
--color-ak-text-secondary: #4A4A4A;
|
|
125
|
+
--color-ak-text-muted: #888888;
|
|
126
|
+
--color-ak-primary: #078080;
|
|
127
|
+
--color-ak-primary-hover: #066D6D;
|
|
128
|
+
--color-ak-primary-active: #055A5A;
|
|
129
|
+
--color-ak-on-primary: #ffffff;
|
|
130
|
+
--color-ak-border: #E8E2DB;
|
|
131
|
+
--color-ak-border-subtle: #F0ECE6;
|
|
132
|
+
--color-ak-border-strong: #CFC5B8;
|
|
133
|
+
--color-ak-border-focus: #078080;
|
|
134
|
+
--color-ak-text-link: #078080;
|
|
135
|
+
--color-ak-danger: #F45D48;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
[data-ak-theme="tangerine"] {
|
|
139
|
+
--color-ak-bg: #EFF0F3;
|
|
140
|
+
--color-ak-surface: #FFFFFE;
|
|
141
|
+
--color-ak-surface-2: #E5E6E9;
|
|
142
|
+
--color-ak-text: #0D0D0D;
|
|
143
|
+
--color-ak-text-secondary: #2A2A2A;
|
|
144
|
+
--color-ak-text-muted: #777777;
|
|
145
|
+
--color-ak-primary: #FF8E3C;
|
|
146
|
+
--color-ak-primary-hover: #E87D2E;
|
|
147
|
+
--color-ak-primary-active: #D16C20;
|
|
148
|
+
--color-ak-on-primary: #0D0D0D;
|
|
149
|
+
--color-ak-border: #DDDDE2;
|
|
150
|
+
--color-ak-border-subtle: #EBEBEF;
|
|
151
|
+
--color-ak-border-strong: #C0C0C8;
|
|
152
|
+
--color-ak-border-focus: #FF8E3C;
|
|
153
|
+
--color-ak-text-link: #0D0D0D;
|
|
154
|
+
--color-ak-danger: #D9376E;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
[data-ak-theme="slate-pro"] {
|
|
158
|
+
--color-ak-bg: #F8FAFC;
|
|
159
|
+
--color-ak-surface: #FFFFFF;
|
|
160
|
+
--color-ak-surface-2: #F1F5F9;
|
|
161
|
+
--color-ak-text: #0F172A;
|
|
162
|
+
--color-ak-text-secondary: #475569;
|
|
163
|
+
--color-ak-text-muted: #94A3B8;
|
|
164
|
+
--color-ak-primary: #2563EB;
|
|
165
|
+
--color-ak-primary-hover: #1D4FD7;
|
|
166
|
+
--color-ak-primary-active: #1E40AF;
|
|
167
|
+
--color-ak-on-primary: #ffffff;
|
|
168
|
+
--color-ak-border: #E2E8F0;
|
|
169
|
+
--color-ak-border-subtle: #F1F5F9;
|
|
170
|
+
--color-ak-border-strong: #CBD5E1;
|
|
171
|
+
--color-ak-border-focus: #2563EB;
|
|
172
|
+
--color-ak-text-link: #2563EB;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
[data-ak-theme="emerald-saas"] {
|
|
176
|
+
--color-ak-bg: #F9FAFB;
|
|
177
|
+
--color-ak-surface: #FFFFFF;
|
|
178
|
+
--color-ak-surface-2: #F3F4F6;
|
|
179
|
+
--color-ak-text: #111827;
|
|
180
|
+
--color-ak-text-secondary: #4B5563;
|
|
181
|
+
--color-ak-text-muted: #9CA3AF;
|
|
182
|
+
--color-ak-primary: #059669;
|
|
183
|
+
--color-ak-primary-hover: #047857;
|
|
184
|
+
--color-ak-primary-active: #065F46;
|
|
185
|
+
--color-ak-on-primary: #ffffff;
|
|
186
|
+
--color-ak-border: #E5E7EB;
|
|
187
|
+
--color-ak-border-subtle: #F3F4F6;
|
|
188
|
+
--color-ak-border-strong: #D1D5DB;
|
|
189
|
+
--color-ak-border-focus: #059669;
|
|
190
|
+
--color-ak-text-link: #059669;
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
[data-ak-theme="astral-violet"] {
|
|
194
|
+
--color-ak-bg: #FAF9F7;
|
|
195
|
+
--color-ak-surface: #FFFFFF;
|
|
196
|
+
--color-ak-surface-2: #F4F2F9;
|
|
197
|
+
--color-ak-text: #150A35;
|
|
198
|
+
--color-ak-text-secondary: #544D6B;
|
|
199
|
+
--color-ak-text-muted: #8B849E;
|
|
200
|
+
--color-ak-primary: #6933FF;
|
|
201
|
+
--color-ak-primary-hover: #5A24F0;
|
|
202
|
+
--color-ak-primary-active: #4B18DE;
|
|
203
|
+
--color-ak-on-primary: #ffffff;
|
|
204
|
+
--color-ak-border: #E6E3EE;
|
|
205
|
+
--color-ak-border-subtle: #F0EEF5;
|
|
206
|
+
--color-ak-border-strong: #C8C3D6;
|
|
207
|
+
--color-ak-border-focus: #6933FF;
|
|
208
|
+
--color-ak-text-link: #6933FF;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
/* ─── Dark Palettes ─── */
|
|
212
|
+
|
|
213
|
+
[data-ak-theme="midnight"] {
|
|
214
|
+
--color-ak-bg: #16161A;
|
|
215
|
+
--color-ak-surface: #242629;
|
|
216
|
+
--color-ak-surface-2: #2E3035;
|
|
217
|
+
--color-ak-text: #FFFFFE;
|
|
218
|
+
--color-ak-text-secondary: #94A1B2;
|
|
219
|
+
--color-ak-text-muted: #6B7280;
|
|
220
|
+
--color-ak-primary: #7F5AF0;
|
|
221
|
+
--color-ak-primary-hover: #9B7BF5;
|
|
222
|
+
--color-ak-primary-active: #6B46DC;
|
|
223
|
+
--color-ak-on-primary: #16161A;
|
|
224
|
+
--color-ak-border: rgba(255, 255, 255, 0.10);
|
|
225
|
+
--color-ak-border-subtle: rgba(255, 255, 255, 0.06);
|
|
226
|
+
--color-ak-border-strong: rgba(255, 255, 255, 0.16);
|
|
227
|
+
--color-ak-border-focus: #7F5AF0;
|
|
228
|
+
--color-ak-text-link: #7F5AF0;
|
|
229
|
+
--color-ak-hover: rgba(255,255,255,0.04);
|
|
230
|
+
--color-ak-active: rgba(255,255,255,0.08);
|
|
231
|
+
--shadow-ak-xs: none;
|
|
232
|
+
--shadow-ak-sm: none;
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
[data-ak-theme="ember-dark"] {
|
|
236
|
+
--color-ak-bg: #0F0E17;
|
|
237
|
+
--color-ak-surface: #1A1925;
|
|
238
|
+
--color-ak-surface-2: #252433;
|
|
239
|
+
--color-ak-text: #FFFFFE;
|
|
240
|
+
--color-ak-text-secondary: #A7A9BE;
|
|
241
|
+
--color-ak-text-muted: #6E7089;
|
|
242
|
+
--color-ak-primary: #FF8906;
|
|
243
|
+
--color-ak-primary-hover: #FFa033;
|
|
244
|
+
--color-ak-primary-active: #E67A00;
|
|
245
|
+
--color-ak-on-primary: #0F0E17;
|
|
246
|
+
--color-ak-border: rgba(255, 255, 255, 0.10);
|
|
247
|
+
--color-ak-border-subtle: rgba(255, 255, 255, 0.06);
|
|
248
|
+
--color-ak-border-strong: rgba(255, 255, 255, 0.16);
|
|
249
|
+
--color-ak-border-focus: #FF8906;
|
|
250
|
+
--color-ak-text-link: #FF8906;
|
|
251
|
+
--color-ak-hover: rgba(255,255,255,0.04);
|
|
252
|
+
--color-ak-active: rgba(255,255,255,0.08);
|
|
253
|
+
--shadow-ak-xs: none;
|
|
254
|
+
--shadow-ak-sm: none;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
[data-ak-theme="obsidian"] {
|
|
258
|
+
--color-ak-bg: #09090B;
|
|
259
|
+
--color-ak-surface: #18181B;
|
|
260
|
+
--color-ak-surface-2: #27272A;
|
|
261
|
+
--color-ak-text: #FAFAFA;
|
|
262
|
+
--color-ak-text-secondary: #A1A1AA;
|
|
263
|
+
--color-ak-text-muted: #71717A;
|
|
264
|
+
--color-ak-primary: #60A5FA;
|
|
265
|
+
--color-ak-primary-hover: #93C5FD;
|
|
266
|
+
--color-ak-primary-active: #3B82F6;
|
|
267
|
+
--color-ak-on-primary: #09090B;
|
|
268
|
+
--color-ak-border: rgba(255, 255, 255, 0.10);
|
|
269
|
+
--color-ak-border-subtle: rgba(255, 255, 255, 0.06);
|
|
270
|
+
--color-ak-border-strong: rgba(255, 255, 255, 0.16);
|
|
271
|
+
--color-ak-border-focus: #60A5FA;
|
|
272
|
+
--color-ak-text-link: #60A5FA;
|
|
273
|
+
--color-ak-hover: rgba(255,255,255,0.04);
|
|
274
|
+
--color-ak-active: rgba(255,255,255,0.08);
|
|
275
|
+
--shadow-ak-xs: none;
|
|
276
|
+
--shadow-ak-sm: none;
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
[data-ak-theme="deep-teal"] {
|
|
280
|
+
--color-ak-bg: #004643;
|
|
281
|
+
--color-ak-surface: #00332F;
|
|
282
|
+
--color-ak-surface-2: #0A5854;
|
|
283
|
+
--color-ak-text: #FFFFFE;
|
|
284
|
+
--color-ak-text-secondary: #ABD1C6;
|
|
285
|
+
--color-ak-text-muted: #7AAA9E;
|
|
286
|
+
--color-ak-primary: #F9BC60;
|
|
287
|
+
--color-ak-primary-hover: #FAC97A;
|
|
288
|
+
--color-ak-primary-active: #E8AA4E;
|
|
289
|
+
--color-ak-on-primary: #004643;
|
|
290
|
+
--color-ak-border: rgba(255, 255, 255, 0.10);
|
|
291
|
+
--color-ak-border-subtle: rgba(255, 255, 255, 0.06);
|
|
292
|
+
--color-ak-border-strong: rgba(255, 255, 255, 0.16);
|
|
293
|
+
--color-ak-border-focus: #F9BC60;
|
|
294
|
+
--color-ak-text-link: #F9BC60;
|
|
295
|
+
--color-ak-hover: rgba(255,255,255,0.04);
|
|
296
|
+
--color-ak-active: rgba(255,255,255,0.08);
|
|
297
|
+
--shadow-ak-xs: none;
|
|
298
|
+
--shadow-ak-sm: none;
|
|
299
|
+
}
|