cat-framework-core 0.5.2 → 0.6.1
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 +23 -0
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +1177 -373
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/index.css +215 -53
package/src/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap');
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Roboto+Condensed:wght@400;700&display=swap');
|
|
2
2
|
|
|
3
3
|
@tailwind base;
|
|
4
4
|
@tailwind components;
|
|
@@ -13,9 +13,11 @@
|
|
|
13
13
|
@layer base {
|
|
14
14
|
:root {
|
|
15
15
|
/* ── Brand Palette ── */
|
|
16
|
-
--primary:
|
|
16
|
+
--primary: 31 100% 51%; /* #FF8604 – Garfield Orange */
|
|
17
17
|
--primary-foreground: 0 0% 100%;
|
|
18
|
-
--primary-hover:
|
|
18
|
+
--primary-hover: 31 100% 43%;
|
|
19
|
+
--primary-light: 31 60% 89%; /* light tint for disabled/subtle */
|
|
20
|
+
--primary-lightest: 31 40% 96%; /* section backgrounds */
|
|
19
21
|
|
|
20
22
|
--secondary: 215 25% 35%; /* #42526E – Slate */
|
|
21
23
|
--secondary-foreground: 0 0% 100%;
|
|
@@ -25,7 +27,9 @@
|
|
|
25
27
|
|
|
26
28
|
/* ── Surfaces ── */
|
|
27
29
|
--background: 0 0% 100%;
|
|
30
|
+
--background-tinted: 214 50% 96%; /* subtle tinted sections */
|
|
28
31
|
--foreground: 216 43% 19%; /* #172B4D – Deep Navy */
|
|
32
|
+
--foreground-body: 216 30% 30%; /* body text (slightly lighter) */
|
|
29
33
|
|
|
30
34
|
--card: 0 0% 100%;
|
|
31
35
|
--card-foreground: 216 43% 19%;
|
|
@@ -42,46 +46,78 @@
|
|
|
42
46
|
|
|
43
47
|
--border: 220 13% 90%;
|
|
44
48
|
--input: 220 13% 90%;
|
|
45
|
-
--ring:
|
|
49
|
+
--ring: 31 100% 51%;
|
|
46
50
|
|
|
47
|
-
|
|
51
|
+
/* ── Border Radius ── */
|
|
52
|
+
--radius: 0.75rem; /* 12px – default */
|
|
53
|
+
--radius-button: 2rem; /* 32px – pill buttons */
|
|
54
|
+
--radius-card: 1rem; /* 16px – cards, images */
|
|
55
|
+
--radius-input: 0.375rem; /* 6px – inputs, selects */
|
|
56
|
+
--radius-overlay: 0.25rem; /* 4px – overlays, tooltips */
|
|
48
57
|
|
|
49
|
-
/* ──
|
|
58
|
+
/* ── Shadows ── */
|
|
59
|
+
--shadow-card: 0 1px 10px 0 rgba(0,0,0,0.08);
|
|
60
|
+
--shadow-elevated: 0 4px 20px 0 rgba(0,0,0,0.12);
|
|
61
|
+
|
|
62
|
+
/* ── Semantic / Signal ── */
|
|
50
63
|
--warning: 36 100% 50%;
|
|
51
64
|
--warning-foreground: 0 0% 10%;
|
|
52
|
-
--info:
|
|
65
|
+
--info: 31 100% 51%;
|
|
53
66
|
--info-foreground: 0 0% 100%;
|
|
54
67
|
--success: 153 56% 46%;
|
|
55
68
|
--success-foreground: 0 0% 100%;
|
|
56
69
|
|
|
57
|
-
/* ──
|
|
58
|
-
--
|
|
59
|
-
--
|
|
60
|
-
--
|
|
61
|
-
--
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
--
|
|
70
|
+
/* ── Signal Light (banners, backgrounds) ── */
|
|
71
|
+
--warning-light: 36 80% 90%;
|
|
72
|
+
--info-light: 31 60% 91%;
|
|
73
|
+
--success-light: 153 45% 89%;
|
|
74
|
+
--destructive-light: 0 60% 89%;
|
|
75
|
+
|
|
76
|
+
/* ── Disabled ── */
|
|
77
|
+
--disabled: 220 13% 90%;
|
|
78
|
+
--disabled-foreground: 0 0% 100%;
|
|
79
|
+
|
|
80
|
+
/* ── Spacing Scale (desktop) ── */
|
|
81
|
+
--space-xxs: 1rem; /* 16px */
|
|
82
|
+
--space-xs: 1.5rem; /* 24px */
|
|
83
|
+
--space-sm: 2rem; /* 32px */
|
|
84
|
+
--space-md: 2.5rem; /* 40px */
|
|
85
|
+
--space-lg: 3rem; /* 48px */
|
|
86
|
+
--space-xl: 4rem; /* 64px */
|
|
87
|
+
--space-2xl: 5rem; /* 80px */
|
|
88
|
+
--space-3xl: 6rem; /* 96px */
|
|
65
89
|
|
|
66
90
|
/* ── Transitions ── */
|
|
67
91
|
--transition-fast: 150ms ease;
|
|
68
92
|
--transition-base: 200ms ease;
|
|
69
93
|
|
|
70
|
-
/* ── Sidebar (
|
|
94
|
+
/* ── Sidebar (required by shadcn) ── */
|
|
71
95
|
--sidebar-background: 0 0% 98%;
|
|
72
96
|
--sidebar-foreground: 215 25% 35%;
|
|
73
|
-
--sidebar-primary:
|
|
97
|
+
--sidebar-primary: 31 100% 51%;
|
|
74
98
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
75
99
|
--sidebar-accent: 220 16% 96%;
|
|
76
100
|
--sidebar-accent-foreground: 215 25% 35%;
|
|
77
101
|
--sidebar-border: 220 13% 90%;
|
|
78
|
-
--sidebar-ring:
|
|
102
|
+
--sidebar-ring: 31 100% 51%;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* ── Mobile spacing overrides ── */
|
|
106
|
+
@media (max-width: 659px) {
|
|
107
|
+
:root {
|
|
108
|
+
--space-xs: 1rem; /* 16px */
|
|
109
|
+
--space-sm: 1.5rem; /* 24px */
|
|
110
|
+
--space-md: 2rem; /* 32px */
|
|
111
|
+
--space-lg: 2.5rem; /* 40px */
|
|
112
|
+
}
|
|
79
113
|
}
|
|
80
114
|
|
|
81
115
|
.dark {
|
|
82
|
-
--primary:
|
|
83
|
-
--primary-foreground:
|
|
84
|
-
--primary-hover:
|
|
116
|
+
--primary: 31 100% 60%;
|
|
117
|
+
--primary-foreground: 0 0% 10%;
|
|
118
|
+
--primary-hover: 31 100% 66%;
|
|
119
|
+
--primary-light: 31 40% 18%;
|
|
120
|
+
--primary-lightest: 31 30% 12%;
|
|
85
121
|
|
|
86
122
|
--secondary: 215 20% 55%;
|
|
87
123
|
--secondary-foreground: 0 0% 100%;
|
|
@@ -90,7 +126,9 @@
|
|
|
90
126
|
--accent-foreground: 0 0% 10%;
|
|
91
127
|
|
|
92
128
|
--background: 220 20% 8%;
|
|
129
|
+
--background-tinted: 220 18% 10%;
|
|
93
130
|
--foreground: 210 20% 92%;
|
|
131
|
+
--foreground-body: 210 15% 80%;
|
|
94
132
|
|
|
95
133
|
--card: 220 18% 12%;
|
|
96
134
|
--card-foreground: 210 20% 92%;
|
|
@@ -106,23 +144,34 @@
|
|
|
106
144
|
|
|
107
145
|
--border: 220 14% 20%;
|
|
108
146
|
--input: 220 14% 20%;
|
|
109
|
-
--ring:
|
|
147
|
+
--ring: 31 100% 60%;
|
|
148
|
+
|
|
149
|
+
--shadow-card: 0 1px 10px 0 rgba(0,0,0,0.25);
|
|
150
|
+
--shadow-elevated: 0 4px 20px 0 rgba(0,0,0,0.35);
|
|
110
151
|
|
|
111
152
|
--warning: 36 100% 55%;
|
|
112
153
|
--warning-foreground: 0 0% 10%;
|
|
113
|
-
--info:
|
|
154
|
+
--info: 31 100% 60%;
|
|
114
155
|
--info-foreground: 0 0% 100%;
|
|
115
156
|
--success: 153 56% 56%;
|
|
116
157
|
--success-foreground: 0 0% 10%;
|
|
117
158
|
|
|
159
|
+
--warning-light: 36 50% 18%;
|
|
160
|
+
--info-light: 31 40% 18%;
|
|
161
|
+
--success-light: 153 30% 16%;
|
|
162
|
+
--destructive-light: 0 40% 18%;
|
|
163
|
+
|
|
164
|
+
--disabled: 220 14% 25%;
|
|
165
|
+
--disabled-foreground: 220 10% 50%;
|
|
166
|
+
|
|
118
167
|
--sidebar-background: 220 18% 10%;
|
|
119
168
|
--sidebar-foreground: 210 20% 92%;
|
|
120
|
-
--sidebar-primary:
|
|
169
|
+
--sidebar-primary: 31 100% 60%;
|
|
121
170
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
122
171
|
--sidebar-accent: 220 14% 16%;
|
|
123
172
|
--sidebar-accent-foreground: 210 20% 92%;
|
|
124
173
|
--sidebar-border: 220 14% 20%;
|
|
125
|
-
--sidebar-ring:
|
|
174
|
+
--sidebar-ring: 31 100% 60%;
|
|
126
175
|
}
|
|
127
176
|
|
|
128
177
|
/* ============================================================
|
|
@@ -131,26 +180,50 @@
|
|
|
131
180
|
============================================================ */
|
|
132
181
|
[data-brand="webde"] {
|
|
133
182
|
--primary: 50 100% 50%; /* #FFD800 – WEB.DE Yellow */
|
|
134
|
-
--primary-foreground: 0 0% 10%;
|
|
183
|
+
--primary-foreground: 0 0% 10%;
|
|
135
184
|
--primary-hover: 50 100% 44%;
|
|
185
|
+
--primary-light: 50 60% 89%;
|
|
186
|
+
--primary-lightest: 50 40% 96%;
|
|
136
187
|
|
|
137
188
|
--secondary: 213 73% 44%; /* #1A73C7 – WEB.DE Blue */
|
|
138
189
|
--secondary-foreground: 0 0% 100%;
|
|
139
190
|
|
|
140
|
-
--accent: 213 73% 44%;
|
|
191
|
+
--accent: 213 73% 44%;
|
|
141
192
|
--accent-foreground: 0 0% 100%;
|
|
142
193
|
|
|
143
|
-
--
|
|
144
|
-
--
|
|
145
|
-
--
|
|
194
|
+
--background-tinted: 50 50% 96%; /* warm tinted sections */
|
|
195
|
+
--foreground: 0 0% 10%;
|
|
196
|
+
--foreground-body: 0 0% 24%;
|
|
197
|
+
--card-foreground: 0 0% 10%;
|
|
198
|
+
--popover-foreground: 0 0% 10%;
|
|
199
|
+
|
|
200
|
+
--muted: 0 0% 96%;
|
|
201
|
+
--muted-foreground: 0 0% 37%;
|
|
146
202
|
|
|
203
|
+
--border: 0 0% 84%;
|
|
204
|
+
--input: 0 0% 84%;
|
|
147
205
|
--ring: 50 100% 50%;
|
|
148
206
|
|
|
149
|
-
--
|
|
207
|
+
--radius-button: 2rem; /* pill buttons like GMX */
|
|
208
|
+
|
|
209
|
+
--destructive: 0 100% 42%;
|
|
210
|
+
--destructive-foreground: 0 0% 100%;
|
|
211
|
+
|
|
212
|
+
--warning: 47 100% 47%;
|
|
213
|
+
--warning-foreground: 0 0% 10%;
|
|
214
|
+
--success: 100 63% 44%;
|
|
150
215
|
--success-foreground: 0 0% 100%;
|
|
151
216
|
--info: 213 73% 44%;
|
|
152
217
|
--info-foreground: 0 0% 100%;
|
|
153
218
|
|
|
219
|
+
--warning-light: 47 90% 90%;
|
|
220
|
+
--info-light: 213 60% 91%;
|
|
221
|
+
--success-light: 100 48% 89%;
|
|
222
|
+
--destructive-light: 0 71% 89%;
|
|
223
|
+
|
|
224
|
+
--disabled: 50 40% 89%;
|
|
225
|
+
--disabled-foreground: 0 0% 100%;
|
|
226
|
+
|
|
154
227
|
--sidebar-primary: 50 100% 50%;
|
|
155
228
|
--sidebar-primary-foreground: 0 0% 10%;
|
|
156
229
|
--sidebar-ring: 50 100% 50%;
|
|
@@ -160,10 +233,13 @@
|
|
|
160
233
|
--primary: 50 100% 55%;
|
|
161
234
|
--primary-foreground: 0 0% 10%;
|
|
162
235
|
--primary-hover: 50 100% 62%;
|
|
236
|
+
--primary-light: 50 40% 18%;
|
|
237
|
+
--primary-lightest: 50 30% 12%;
|
|
163
238
|
--secondary: 213 73% 55%;
|
|
164
239
|
--secondary-foreground: 0 0% 100%;
|
|
165
240
|
--accent: 213 73% 55%;
|
|
166
241
|
--accent-foreground: 0 0% 100%;
|
|
242
|
+
--background-tinted: 50 20% 10%;
|
|
167
243
|
--ring: 50 100% 55%;
|
|
168
244
|
--sidebar-primary: 50 100% 55%;
|
|
169
245
|
--sidebar-ring: 50 100% 55%;
|
|
@@ -171,46 +247,132 @@
|
|
|
171
247
|
|
|
172
248
|
/* ============================================================
|
|
173
249
|
BRAND: GMX
|
|
174
|
-
Primary: #
|
|
250
|
+
Primary: #1e50a0 (GMX Blue) — Plasma Color System
|
|
251
|
+
Ref: CAT component library v6.0.2
|
|
175
252
|
============================================================ */
|
|
176
253
|
[data-brand="gmx"] {
|
|
177
|
-
|
|
254
|
+
/* ── Brand ── */
|
|
255
|
+
--primary: 215 68% 37%; /* #1e50a0 – b1-base */
|
|
178
256
|
--primary-foreground: 0 0% 100%;
|
|
179
|
-
--primary-hover:
|
|
257
|
+
--primary-hover: 215 68% 30%; /* #184080 – b1-dark20 */
|
|
258
|
+
--primary-light: 215 38% 89%; /* #d7e0ee – b1-light82 */
|
|
259
|
+
--primary-lightest: 215 37% 96%; /* #f2f5f9 – b1-light94 */
|
|
180
260
|
|
|
181
|
-
--secondary:
|
|
261
|
+
--secondary: 215 65% 46%; /* #2966c2 – b2-base */
|
|
182
262
|
--secondary-foreground: 0 0% 100%;
|
|
183
263
|
|
|
184
|
-
--accent:
|
|
185
|
-
--accent-foreground: 0 0%
|
|
264
|
+
--accent: 215 65% 46%;
|
|
265
|
+
--accent-foreground: 0 0% 100%;
|
|
266
|
+
|
|
267
|
+
/* ── Surfaces ── */
|
|
268
|
+
--background: 0 0% 100%; /* c1-base */
|
|
269
|
+
--background-tinted: 216 55% 95%; /* #EAF0F9 – backgrounds-3 */
|
|
270
|
+
--foreground: 0 0% 10%; /* #1a1a1a – c2-base */
|
|
271
|
+
--foreground-body: 0 0% 24%; /* #3c3c3c – c2-light15 */
|
|
272
|
+
|
|
273
|
+
--card: 0 0% 100%;
|
|
274
|
+
--card-foreground: 0 0% 24%; /* body text on cards */
|
|
186
275
|
|
|
187
|
-
--
|
|
188
|
-
--
|
|
189
|
-
|
|
276
|
+
--popover: 0 0% 100%;
|
|
277
|
+
--popover-foreground: 0 0% 10%;
|
|
278
|
+
|
|
279
|
+
--muted: 0 0% 95%; /* #f1f1f1 – c2-light94 */
|
|
280
|
+
--muted-foreground: 0 0% 37%; /* #5f5f5f – c2-light30 */
|
|
281
|
+
|
|
282
|
+
/* ── Borders ── */
|
|
283
|
+
--border: 0 0% 84%; /* #d6d6d6 – c2-light82 */
|
|
284
|
+
--input: 0 0% 84%;
|
|
285
|
+
--ring: 215 68% 37%;
|
|
286
|
+
|
|
287
|
+
/* ── Border Radius (GMX brand overrides) ── */
|
|
288
|
+
--radius: 1rem; /* 16px – cards/images */
|
|
289
|
+
--radius-button: 2rem; /* 32px – pill buttons (brand signature) */
|
|
290
|
+
--radius-card: 1rem; /* 16px – cards, teasers */
|
|
291
|
+
--radius-input: 0.25rem; /* 4px – inputs, selects */
|
|
292
|
+
--radius-overlay: 0.25rem; /* 4px – backdrop overlays */
|
|
190
293
|
|
|
191
|
-
|
|
294
|
+
/* ── Shadow (GMX spec) ── */
|
|
295
|
+
--shadow-card: 1px 1px 10px 0 rgba(0,0,0,0.10);
|
|
192
296
|
|
|
193
|
-
|
|
297
|
+
/* ── Signal Colors ── */
|
|
298
|
+
--destructive: 0 100% 42%; /* #d40000 – d1-base */
|
|
299
|
+
--destructive-foreground: 0 0% 100%;
|
|
300
|
+
|
|
301
|
+
--warning: 47 100% 47%; /* #f0bc00 – d2-base */
|
|
302
|
+
--warning-foreground: 0 0% 10%;
|
|
303
|
+
--success: 100 63% 44%; /* #5cb82a – d3-base */
|
|
194
304
|
--success-foreground: 0 0% 100%;
|
|
195
|
-
--info:
|
|
305
|
+
--info: 205 77% 48%; /* #1c8ad9 – d4-base */
|
|
196
306
|
--info-foreground: 0 0% 100%;
|
|
197
307
|
|
|
198
|
-
|
|
308
|
+
/* ── Signal Light ── */
|
|
309
|
+
--warning-light: 47 90% 90%; /* #fcf3d1 – d2-light82 */
|
|
310
|
+
--info-light: 205 71% 91%; /* #d6eaf8 – d4-light82 */
|
|
311
|
+
--success-light: 100 48% 89%; /* #e2f2d9 – d3-light82 */
|
|
312
|
+
--destructive-light: 0 71% 89%; /* #f7d1d1 – d1-light82 */
|
|
313
|
+
|
|
314
|
+
/* ── Disabled ── */
|
|
315
|
+
--disabled: 215 38% 89%; /* #d7e0ee – b1-light82 */
|
|
316
|
+
--disabled-foreground: 0 0% 100%;
|
|
317
|
+
|
|
318
|
+
--sidebar-primary: 215 68% 37%;
|
|
199
319
|
--sidebar-primary-foreground: 0 0% 100%;
|
|
200
|
-
--sidebar-ring:
|
|
320
|
+
--sidebar-ring: 215 68% 37%;
|
|
201
321
|
}
|
|
202
322
|
|
|
203
323
|
[data-brand="gmx"].dark {
|
|
204
|
-
--primary:
|
|
324
|
+
--primary: 215 68% 55%;
|
|
205
325
|
--primary-foreground: 0 0% 100%;
|
|
206
|
-
--primary-hover:
|
|
207
|
-
--
|
|
326
|
+
--primary-hover: 215 68% 48%;
|
|
327
|
+
--primary-light: 215 30% 20%;
|
|
328
|
+
--primary-lightest: 215 20% 12%;
|
|
329
|
+
|
|
330
|
+
--secondary: 215 65% 58%;
|
|
208
331
|
--secondary-foreground: 0 0% 100%;
|
|
209
|
-
|
|
210
|
-
--accent
|
|
211
|
-
--
|
|
212
|
-
|
|
213
|
-
--
|
|
332
|
+
|
|
333
|
+
--accent: 215 65% 58%;
|
|
334
|
+
--accent-foreground: 0 0% 100%;
|
|
335
|
+
|
|
336
|
+
--background: 220 20% 8%;
|
|
337
|
+
--background-tinted: 215 20% 10%;
|
|
338
|
+
--foreground: 0 0% 92%;
|
|
339
|
+
--foreground-body: 0 0% 85%;
|
|
340
|
+
|
|
341
|
+
--card: 220 18% 12%;
|
|
342
|
+
--card-foreground: 0 0% 85%;
|
|
343
|
+
|
|
344
|
+
--popover: 220 18% 12%;
|
|
345
|
+
--popover-foreground: 0 0% 92%;
|
|
346
|
+
|
|
347
|
+
--muted: 220 14% 16%;
|
|
348
|
+
--muted-foreground: 0 0% 55%;
|
|
349
|
+
|
|
350
|
+
--border: 220 14% 20%;
|
|
351
|
+
--input: 220 14% 20%;
|
|
352
|
+
--ring: 215 68% 55%;
|
|
353
|
+
|
|
354
|
+
--shadow-card: 1px 1px 10px 0 rgba(0,0,0,0.30);
|
|
355
|
+
|
|
356
|
+
--destructive: 0 80% 50%;
|
|
357
|
+
--destructive-foreground: 0 0% 100%;
|
|
358
|
+
|
|
359
|
+
--warning: 47 100% 55%;
|
|
360
|
+
--warning-foreground: 0 0% 10%;
|
|
361
|
+
--success: 100 63% 52%;
|
|
362
|
+
--success-foreground: 0 0% 10%;
|
|
363
|
+
--info: 205 77% 56%;
|
|
364
|
+
--info-foreground: 0 0% 100%;
|
|
365
|
+
|
|
366
|
+
--warning-light: 47 50% 18%;
|
|
367
|
+
--info-light: 205 40% 18%;
|
|
368
|
+
--success-light: 100 30% 16%;
|
|
369
|
+
--destructive-light: 0 40% 18%;
|
|
370
|
+
|
|
371
|
+
--disabled: 215 20% 25%;
|
|
372
|
+
--disabled-foreground: 215 15% 50%;
|
|
373
|
+
|
|
374
|
+
--sidebar-primary: 215 68% 55%;
|
|
375
|
+
--sidebar-ring: 215 68% 55%;
|
|
214
376
|
}
|
|
215
377
|
}
|
|
216
378
|
|