@agorapulse/ui-theme 20.1.16 → 20.1.18
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/agorapulse-ui-theme-20.1.18.tgz +0 -0
- package/assets/style/_tooltip.scss +19 -0
- package/assets/style/lovable/lovable-button.css +446 -0
- package/assets/style/lovable/lovable-input.css +119 -0
- package/assets/style/lovable/lovable-radio.css +109 -0
- package/assets/style/lovable/lovable-toggle.css +161 -0
- package/assets/style/lovable/tailwind.config.ts +431 -0
- package/package.json +1 -1
- package/agorapulse-ui-theme-20.1.16.tgz +0 -0
|
Binary file
|
|
@@ -20,6 +20,25 @@
|
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
|
|
23
|
+
&.ap-predefined-tooltip {
|
|
24
|
+
max-width: 256px;
|
|
25
|
+
width: 256px;
|
|
26
|
+
max-height: 280px;
|
|
27
|
+
border-radius: var(--ref-border-radius-sm);
|
|
28
|
+
background: var(--ref-color-white);
|
|
29
|
+
|
|
30
|
+
/* Shadow/Low (default) */
|
|
31
|
+
box-shadow: 0 4px 25px -2px rgba(52, 69, 99, 0.15), 0 4px 6px -2px rgba(52, 69, 99, 0.15);
|
|
32
|
+
|
|
33
|
+
.ap-content-container.ap-content-predefined-container {
|
|
34
|
+
padding: 0;
|
|
35
|
+
|
|
36
|
+
.ap-tooltip-arrow {
|
|
37
|
+
color: var(--ref-color-white);
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
23
42
|
.ap-content-container {
|
|
24
43
|
padding: var(--ref-spacing-xxs) var(--ref-spacing-xs);
|
|
25
44
|
border-radius: var(--ref-border-radius-md);
|
|
@@ -0,0 +1,446 @@
|
|
|
1
|
+
/* Agorapulse Button Styles */
|
|
2
|
+
|
|
3
|
+
@keyframes slide {
|
|
4
|
+
0% {
|
|
5
|
+
left: calc(var(--comp-button-padding-vertical) * -1 - 50px);
|
|
6
|
+
}
|
|
7
|
+
100% {
|
|
8
|
+
left: 100%;
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.ap-button-container {
|
|
13
|
+
display: inline-block;
|
|
14
|
+
position: relative;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.ap-button {
|
|
18
|
+
border: none;
|
|
19
|
+
border-radius: var(--comp-button-border-radius);
|
|
20
|
+
padding: var(--comp-button-padding-horizontal) var(--comp-button-padding-vertical);
|
|
21
|
+
position: relative;
|
|
22
|
+
overflow: hidden;
|
|
23
|
+
display: flex;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
align-items: center;
|
|
26
|
+
gap: var(--comp-split-button-spacing);
|
|
27
|
+
font-size: var(--comp-button-text-size);
|
|
28
|
+
font-family: var(--comp-button-text-font-family);
|
|
29
|
+
line-height: var(--comp-button-text-line-height);
|
|
30
|
+
font-weight: var(--comp-button-text-weight);
|
|
31
|
+
max-height: var(--comp-button-height);
|
|
32
|
+
min-height: var(--comp-button-height);
|
|
33
|
+
white-space: nowrap;
|
|
34
|
+
text-overflow: ellipsis;
|
|
35
|
+
width: 100%;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.ap-button:not(:disabled):not(.loading):hover {
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.ap-button:disabled {
|
|
43
|
+
pointer-events: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.ap-button.loading {
|
|
47
|
+
pointer-events: none;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.ap-button:focus:not(:disabled):not(:active):not(.loading) {
|
|
51
|
+
outline: 2px solid var(--ref-color-electric-blue-100);
|
|
52
|
+
outline-offset: 1px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.ap-button.inverse {
|
|
56
|
+
flex-direction: row-reverse;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.ap-button-icon {
|
|
60
|
+
width: 16px;
|
|
61
|
+
min-width: 16px;
|
|
62
|
+
max-width: 16px;
|
|
63
|
+
height: 16px;
|
|
64
|
+
min-height: 16px;
|
|
65
|
+
max-height: 16px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Primary Orange */
|
|
69
|
+
.ap-button.primary.orange {
|
|
70
|
+
background: var(--ref-color-orange-100);
|
|
71
|
+
color: var(--ref-color-white);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.ap-button.primary.orange:hover:not(:disabled):not(.loading) {
|
|
75
|
+
background-color: var(--ref-color-orange-80);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.ap-button.primary.orange:active:not(:disabled):not(.loading) {
|
|
79
|
+
background-color: var(--ref-color-orange-60);
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.ap-button.primary.orange:disabled {
|
|
83
|
+
background-color: var(--ref-color-orange-20);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.ap-button.primary.orange.loading {
|
|
87
|
+
background-color: var(--ref-color-orange-60);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Primary Blue */
|
|
91
|
+
.ap-button.primary.blue {
|
|
92
|
+
background: var(--ref-color-electric-blue-100);
|
|
93
|
+
color: var(--ref-color-white);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.ap-button.primary.blue:hover:not(:disabled):not(.loading) {
|
|
97
|
+
background-color: var(--ref-color-electric-blue-80);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.ap-button.primary.blue:active:not(:disabled):not(.loading) {
|
|
101
|
+
background-color: var(--ref-color-electric-blue-60);
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.ap-button.primary.blue:disabled {
|
|
105
|
+
background-color: var(--ref-color-electric-blue-20);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.ap-button.primary.blue.loading {
|
|
109
|
+
background-color: var(--ref-color-electric-blue-60);
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
/* Secondary Orange */
|
|
113
|
+
.ap-button.secondary.orange {
|
|
114
|
+
background: var(--ref-color-orange-10);
|
|
115
|
+
color: var(--ref-color-orange-100);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.ap-button.secondary.orange:hover:not(:disabled):not(.loading) {
|
|
119
|
+
background-color: var(--ref-color-orange-20);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.ap-button.secondary.orange:active:not(:disabled):not(.loading) {
|
|
123
|
+
background-color: var(--ref-color-orange-40);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.ap-button.secondary.orange:disabled {
|
|
127
|
+
background-color: var(--ref-color-orange-10);
|
|
128
|
+
color: var(--ref-color-orange-20);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.ap-button.secondary.orange.loading {
|
|
132
|
+
background-color: var(--ref-color-orange-40);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* Secondary Blue */
|
|
136
|
+
.ap-button.secondary.blue {
|
|
137
|
+
background: var(--ref-color-electric-blue-10);
|
|
138
|
+
color: var(--ref-color-electric-blue-100);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.ap-button.secondary.blue:hover:not(:disabled):not(.loading) {
|
|
142
|
+
background-color: var(--ref-color-electric-blue-20);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.ap-button.secondary.blue:active:not(:disabled):not(.loading) {
|
|
146
|
+
background-color: var(--ref-color-electric-blue-40);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.ap-button.secondary.blue:disabled {
|
|
150
|
+
background-color: var(--ref-color-electric-blue-10);
|
|
151
|
+
color: var(--ref-color-electric-blue-20);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.ap-button.secondary.blue.loading {
|
|
155
|
+
background-color: var(--ref-color-electric-blue-40);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
/* Ghost Grey */
|
|
159
|
+
.ap-button.ghost.grey {
|
|
160
|
+
background: transparent;
|
|
161
|
+
color: var(--ref-color-grey-80);
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.ap-button.ghost.grey:hover:not(:disabled):not(.loading) {
|
|
165
|
+
background-color: var(--ref-color-grey-05);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.ap-button.ghost.grey:active:not(:disabled):not(.loading) {
|
|
169
|
+
background-color: var(--ref-color-grey-10);
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.ap-button.ghost.grey:disabled {
|
|
173
|
+
color: var(--ref-color-grey-20);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.ap-button.ghost.grey.loading {
|
|
177
|
+
color: var(--ref-color-grey-40);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/* Ghost Blue */
|
|
181
|
+
.ap-button.ghost.blue {
|
|
182
|
+
background: transparent;
|
|
183
|
+
color: var(--ref-color-electric-blue-100);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.ap-button.ghost.blue:hover:not(:disabled):not(.loading) {
|
|
187
|
+
background-color: var(--ref-color-electric-blue-10);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.ap-button.ghost.blue:active:not(:disabled):not(.loading) {
|
|
191
|
+
background-color: var(--ref-color-electric-blue-20);
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.ap-button.ghost.blue:disabled {
|
|
195
|
+
color: var(--ref-color-electric-blue-20);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.ap-button.ghost.blue.loading {
|
|
199
|
+
color: var(--ref-color-electric-blue-40);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
/* Ghost Red */
|
|
203
|
+
.ap-button.ghost.red {
|
|
204
|
+
background: transparent;
|
|
205
|
+
color: var(--ref-color-red-100);
|
|
206
|
+
}
|
|
207
|
+
|
|
208
|
+
.ap-button.ghost.red:hover:not(:disabled):not(.loading) {
|
|
209
|
+
background-color: var(--ref-color-red-10);
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
.ap-button.ghost.red:active:not(:disabled):not(.loading) {
|
|
213
|
+
background-color: var(--ref-color-red-20);
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
.ap-button.ghost.red:disabled {
|
|
217
|
+
color: var(--ref-color-red-20);
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.ap-button.ghost.red.loading {
|
|
221
|
+
color: var(--ref-color-red-40);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
/* Ghost Green */
|
|
225
|
+
.ap-button.ghost.green {
|
|
226
|
+
background: transparent;
|
|
227
|
+
color: var(--ref-color-green-100);
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
.ap-button.ghost.green:hover:not(:disabled):not(.loading) {
|
|
231
|
+
background-color: var(--ref-color-green-10);
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
.ap-button.ghost.green:active:not(:disabled):not(.loading) {
|
|
235
|
+
background-color: var(--ref-color-green-20);
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.ap-button.ghost.green:disabled {
|
|
239
|
+
color: var(--ref-color-green-20);
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.ap-button.ghost.green.loading {
|
|
243
|
+
color: var(--ref-color-green-40);
|
|
244
|
+
}
|
|
245
|
+
|
|
246
|
+
/* Stroked Grey */
|
|
247
|
+
.ap-button.stroked.grey {
|
|
248
|
+
background: var(--ref-color-white);
|
|
249
|
+
border: 1px solid var(--ref-color-grey-20);
|
|
250
|
+
color: var(--ref-color-grey-80);
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.ap-button.stroked.grey:hover:not(:disabled):not(.loading) {
|
|
254
|
+
border-color: var(--ref-color-grey-40);
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.ap-button.stroked.grey:active:not(:disabled):not(.loading) {
|
|
258
|
+
border-color: var(--ref-color-grey-60);
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
.ap-button.stroked.grey:disabled {
|
|
262
|
+
border-color: var(--ref-color-grey-20);
|
|
263
|
+
color: var(--ref-color-grey-20);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.ap-button.stroked.grey.loading {
|
|
267
|
+
border-color: var(--ref-color-grey-20);
|
|
268
|
+
color: var(--ref-color-grey-40);
|
|
269
|
+
}
|
|
270
|
+
|
|
271
|
+
/* Stroked Blue */
|
|
272
|
+
.ap-button.stroked.blue {
|
|
273
|
+
background: var(--ref-color-white);
|
|
274
|
+
border: 1px solid var(--ref-color-electric-blue-60);
|
|
275
|
+
color: var(--ref-color-electric-blue-100);
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.ap-button.stroked.blue:hover:not(:disabled):not(.loading) {
|
|
279
|
+
border-color: var(--ref-color-electric-blue-80);
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.ap-button.stroked.blue:active:not(:disabled):not(.loading) {
|
|
283
|
+
border-color: var(--ref-color-electric-blue-100);
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
.ap-button.stroked.blue:disabled {
|
|
287
|
+
border-color: var(--ref-color-electric-blue-20);
|
|
288
|
+
color: var(--ref-color-electric-blue-20);
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
.ap-button.stroked.blue.loading {
|
|
292
|
+
border-color: var(--ref-color-electric-blue-20);
|
|
293
|
+
color: var(--ref-color-electric-blue-40);
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
/* Stroked Red */
|
|
297
|
+
.ap-button.stroked.red {
|
|
298
|
+
background: var(--ref-color-white);
|
|
299
|
+
border: 1px solid var(--ref-color-red-60);
|
|
300
|
+
color: var(--ref-color-red-100);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.ap-button.stroked.red:hover:not(:disabled):not(.loading) {
|
|
304
|
+
border-color: var(--ref-color-red-80);
|
|
305
|
+
}
|
|
306
|
+
|
|
307
|
+
.ap-button.stroked.red:active:not(:disabled):not(.loading) {
|
|
308
|
+
border-color: var(--ref-color-red-100);
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
.ap-button.stroked.red:disabled {
|
|
312
|
+
border-color: var(--ref-color-red-20);
|
|
313
|
+
color: var(--ref-color-red-20);
|
|
314
|
+
}
|
|
315
|
+
|
|
316
|
+
.ap-button.stroked.red.loading {
|
|
317
|
+
border-color: var(--ref-color-red-20);
|
|
318
|
+
color: var(--ref-color-red-40);
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
/* Stroked Transparent */
|
|
322
|
+
.ap-button.transparent {
|
|
323
|
+
background: transparent;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
/* Mermaid */
|
|
327
|
+
.ap-button.mermaid {
|
|
328
|
+
background: linear-gradient(90deg, #578fff 0%, #df52ff 100%);
|
|
329
|
+
color: var(--ref-color-grey-100);
|
|
330
|
+
position: relative;
|
|
331
|
+
z-index: 1;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.ap-button.mermaid::after {
|
|
335
|
+
content: '';
|
|
336
|
+
position: absolute;
|
|
337
|
+
top: 1px;
|
|
338
|
+
left: 1px;
|
|
339
|
+
right: 1px;
|
|
340
|
+
bottom: 1px;
|
|
341
|
+
background: var(--ref-color-white);
|
|
342
|
+
border-radius: calc(var(--ref-border-radius-sm) - 1px);
|
|
343
|
+
z-index: -1;
|
|
344
|
+
pointer-events: none;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
.ap-button.mermaid > * {
|
|
348
|
+
position: relative;
|
|
349
|
+
z-index: 1;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
.ap-button.mermaid:hover:not(:disabled):not(.loading)::after {
|
|
353
|
+
background: var(--ref-color-mermaid-10);
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
.ap-button.mermaid:active:not(:disabled):not(.loading)::after {
|
|
357
|
+
background: var(--ref-color-mermaid-20);
|
|
358
|
+
}
|
|
359
|
+
|
|
360
|
+
.ap-button.mermaid:disabled {
|
|
361
|
+
background: linear-gradient(90deg, var(--ref-color-mermaid-gradient-from40) 0%, var(--ref-color-mermaid-gradient-to40) 100%);
|
|
362
|
+
color: var(--ref-color-grey-20);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
.ap-button.mermaid.loading {
|
|
366
|
+
background: linear-gradient(90deg, var(--ref-color-mermaid-gradient-from40) 0%, var(--ref-color-mermaid-gradient-to40) 100%);
|
|
367
|
+
color: var(--ref-color-grey-40);
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
/* Locked */
|
|
371
|
+
.ap-button.locked {
|
|
372
|
+
background-color: var(--ref-color-purple-10);
|
|
373
|
+
color: var(--ref-color-purple-80);
|
|
374
|
+
}
|
|
375
|
+
|
|
376
|
+
.ap-button.locked:hover:not(:disabled):not(.loading) {
|
|
377
|
+
background-color: var(--ref-color-purple-20);
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.ap-button.locked:active:not(:disabled):not(.loading) {
|
|
381
|
+
background-color: var(--ref-color-purple-40);
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
/* Loading bar */
|
|
385
|
+
.ap-loading-bar {
|
|
386
|
+
position: absolute;
|
|
387
|
+
bottom: 0;
|
|
388
|
+
left: var(--comp-button-padding-vertical);
|
|
389
|
+
width: 50px;
|
|
390
|
+
height: 5px;
|
|
391
|
+
border-radius: 8px;
|
|
392
|
+
animation: slide 1.5s ease-in-out infinite;
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
.ap-button.primary.orange .ap-loading-bar {
|
|
396
|
+
background-color: var(--ref-color-orange-100);
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
.ap-button.primary.blue .ap-loading-bar {
|
|
400
|
+
background-color: var(--ref-color-electric-blue-100);
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.ap-button.secondary.orange .ap-loading-bar {
|
|
404
|
+
background-color: var(--ref-color-orange-100);
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.ap-button.secondary.blue .ap-loading-bar {
|
|
408
|
+
background-color: var(--ref-color-electric-blue-100);
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
.ap-button.ghost.grey .ap-loading-bar,
|
|
412
|
+
.ap-button.stroked.grey .ap-loading-bar {
|
|
413
|
+
background-color: var(--ref-color-grey-80);
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.ap-button.ghost.blue .ap-loading-bar,
|
|
417
|
+
.ap-button.stroked.blue .ap-loading-bar {
|
|
418
|
+
background-color: var(--ref-color-electric-blue-100);
|
|
419
|
+
}
|
|
420
|
+
|
|
421
|
+
.ap-button.ghost.red .ap-loading-bar,
|
|
422
|
+
.ap-button.stroked.red .ap-loading-bar {
|
|
423
|
+
background-color: var(--ref-color-red-100);
|
|
424
|
+
}
|
|
425
|
+
|
|
426
|
+
.ap-button.ghost.green .ap-loading-bar {
|
|
427
|
+
background-color: var(--ref-color-green-100);
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
.ap-button.mermaid .ap-loading-bar {
|
|
431
|
+
background: linear-gradient(90deg, var(--ref-color-mermaid-gradient-from) 0%, var(--ref-color-mermaid-gradient-to) 100%);
|
|
432
|
+
z-index: 2;
|
|
433
|
+
}
|
|
434
|
+
|
|
435
|
+
/* Locked icon */
|
|
436
|
+
.ap-locked-symbol {
|
|
437
|
+
position: absolute;
|
|
438
|
+
top: -6px;
|
|
439
|
+
right: -6px;
|
|
440
|
+
border-radius: 100%;
|
|
441
|
+
background: var(--ref-color-white);
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
.ap-locked-symbol svg {
|
|
445
|
+
color: var(--ref-color-purple-100);
|
|
446
|
+
}
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
/* Agorapulse Input Styles */
|
|
2
|
+
|
|
3
|
+
/* Form field container */
|
|
4
|
+
.ap-form-field {
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: column;
|
|
7
|
+
gap: var(--ref-spacing-xxs);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
/* Form label */
|
|
11
|
+
.ap-form-label {
|
|
12
|
+
font-family: var(--sys-text-style-body-font-family);
|
|
13
|
+
font-size: var(--sys-text-style-body-size);
|
|
14
|
+
font-weight: var(--sys-text-style-body-weight);
|
|
15
|
+
line-height: var(--sys-text-style-body-line-height);
|
|
16
|
+
color: var(--ref-color-grey-100);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Input group container */
|
|
20
|
+
.ap-input-group {
|
|
21
|
+
width: 100%;
|
|
22
|
+
display: inline-flex;
|
|
23
|
+
align-items: center;
|
|
24
|
+
height: var(--comp-input-height);
|
|
25
|
+
border: 1px solid var(--comp-input-border-default-color);
|
|
26
|
+
box-sizing: border-box;
|
|
27
|
+
border-radius: var(--comp-input-border-radius);
|
|
28
|
+
overflow: hidden;
|
|
29
|
+
background-color: var(--comp-input-fill-color);
|
|
30
|
+
gap: var(--ref-spacing-xxs);
|
|
31
|
+
padding: 0 var(--ref-spacing-xxs);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
/* Input group with disabled input */
|
|
35
|
+
.ap-input-group:has(input:disabled) {
|
|
36
|
+
background-color: var(--comp-input-fill-disabled-color);
|
|
37
|
+
color: var(--comp-input-text-disabled-color);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* Input group hover state */
|
|
41
|
+
.ap-input-group:hover:not(:has(input:disabled)) {
|
|
42
|
+
border-color: var(--comp-input-border-hover-color);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Input group focus state */
|
|
46
|
+
.ap-input-group:focus-within:not(:has(input:disabled)) {
|
|
47
|
+
border-color: var(--comp-input-border-focused-color);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Input group invalid state */
|
|
51
|
+
.ap-input-group.invalid,
|
|
52
|
+
.ap-input-group:has(input.invalid) {
|
|
53
|
+
border-color: var(--comp-input-border-error-color);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* Input group valid state */
|
|
57
|
+
.ap-input-group.valid,
|
|
58
|
+
.ap-input-group:has(input.valid) {
|
|
59
|
+
border-color: var(--comp-input-border-success-color);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* Input group with icon on right */
|
|
63
|
+
.ap-input-group.inverse {
|
|
64
|
+
flex-direction: row-reverse;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
/* Input element */
|
|
68
|
+
.ap-input {
|
|
69
|
+
flex: 1;
|
|
70
|
+
border: none !important;
|
|
71
|
+
outline: none;
|
|
72
|
+
background: transparent;
|
|
73
|
+
color: var(--comp-input-text-default-color);
|
|
74
|
+
font-family: var(--comp-input-text-font-family);
|
|
75
|
+
font-size: var(--comp-input-text-size);
|
|
76
|
+
font-weight: var(--comp-input-text-font-weight);
|
|
77
|
+
padding: 0;
|
|
78
|
+
min-width: 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/* Input inside input-group should never have border */
|
|
82
|
+
.ap-input-group .ap-input {
|
|
83
|
+
border: none !important;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.ap-input::placeholder {
|
|
87
|
+
color: var(--comp-input-text-placeholder-color);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.ap-input:disabled {
|
|
91
|
+
color: var(--comp-input-text-disabled-color);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
/* Input icon */
|
|
95
|
+
.ap-input-icon {
|
|
96
|
+
flex-shrink: 0;
|
|
97
|
+
width: var(--comp-input-icon-size);
|
|
98
|
+
height: var(--comp-input-icon-size);
|
|
99
|
+
color: var(--comp-input-icon-color);
|
|
100
|
+
pointer-events: none;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* Form message (error/success) */
|
|
104
|
+
.ap-form-message {
|
|
105
|
+
font-family: var(--sys-text-style-body-font-family);
|
|
106
|
+
font-size: var(--sys-text-style-caption-size);
|
|
107
|
+
line-height: var(--sys-text-style-caption-line-height);
|
|
108
|
+
display: flex;
|
|
109
|
+
align-items: center;
|
|
110
|
+
gap: var(--ref-spacing-xxs);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.ap-form-message.error {
|
|
114
|
+
color: var(--ref-color-red-100);
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
.ap-form-message.success {
|
|
118
|
+
color: var(--ref-color-green-100);
|
|
119
|
+
}
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
/* Agorapulse Radio Styles */
|
|
2
|
+
|
|
3
|
+
.ap-radio-container {
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
gap: var(--ref-spacing-xxs);
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.ap-radio-container:has(input:disabled) {
|
|
11
|
+
cursor: default;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
/* Label positioning */
|
|
15
|
+
.ap-radio-container.label-left {
|
|
16
|
+
flex-direction: row-reverse;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
/* Native radio input (visually hidden but accessible) */
|
|
20
|
+
.ap-radio-input {
|
|
21
|
+
transform: scale(0);
|
|
22
|
+
position: absolute;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Checked state */
|
|
26
|
+
.ap-radio-input:checked ~ .ap-radio-button {
|
|
27
|
+
border-color: var(--ref-color-electric-blue-100);
|
|
28
|
+
box-shadow: inset 0 0 0 3px var(--ref-color-white);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.ap-radio-input:checked ~ .ap-radio-button.disabled {
|
|
32
|
+
background: var(--ref-color-grey-40);
|
|
33
|
+
box-shadow: inset 0 0 0 3px var(--ref-color-grey-10);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.ap-radio-input:checked:focus ~ .ap-radio-button {
|
|
37
|
+
border-color: var(--ref-color-electric-blue-100);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* Disabled state */
|
|
41
|
+
.ap-radio-input:disabled ~ .ap-radio-button {
|
|
42
|
+
box-shadow: inset 0 0 0 16px var(--ref-color-grey-10);
|
|
43
|
+
border-color: var(--ref-color-grey-20);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.ap-radio-input:disabled ~ .ap-radio-label {
|
|
47
|
+
color: var(--ref-color-grey-60);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Focus state */
|
|
51
|
+
@media (hover: hover) {
|
|
52
|
+
.ap-radio-input:focus ~ .ap-radio-button {
|
|
53
|
+
outline: 3px solid var(--ref-color-electric-blue-100);
|
|
54
|
+
border-color: var(--ref-color-grey-80);
|
|
55
|
+
outline-offset: 1px;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Custom radio button visual */
|
|
60
|
+
.ap-radio-button {
|
|
61
|
+
width: 16px;
|
|
62
|
+
height: 16px;
|
|
63
|
+
min-width: 16px;
|
|
64
|
+
min-height: 16px;
|
|
65
|
+
border-radius: 100%;
|
|
66
|
+
border: 1px solid var(--ref-color-grey-60);
|
|
67
|
+
background: var(--ref-color-electric-blue-100);
|
|
68
|
+
box-shadow: inset 0 0 0 16px var(--ref-color-white);
|
|
69
|
+
transition: box-shadow var(--comp-radio-transition-duration);
|
|
70
|
+
flex-shrink: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.ap-radio-container:hover:not(:has(input:disabled)) .ap-radio-button {
|
|
74
|
+
border-color: var(--ref-color-grey-80);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* Label styling */
|
|
78
|
+
.ap-radio-label {
|
|
79
|
+
display: flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
font-family: var(--sys-text-style-body-font-family);
|
|
82
|
+
font-size: var(--sys-text-style-body-size);
|
|
83
|
+
font-weight: var(--sys-text-style-body-weight);
|
|
84
|
+
line-height: var(--sys-text-style-body-line-height);
|
|
85
|
+
color: var(--ref-color-grey-100);
|
|
86
|
+
user-select: none;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.ap-radio-label:empty {
|
|
90
|
+
display: none;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.ap-radio-label.disabled {
|
|
94
|
+
color: var(--ref-color-grey-60);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* Error state (for form validation) */
|
|
98
|
+
.ap-radio-container.error .ap-radio-button {
|
|
99
|
+
border-color: var(--ref-color-red-100);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.ap-radio-container.error .ap-radio-button:hover {
|
|
103
|
+
border-color: var(--ref-color-red-60);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.ap-radio-container.error .ap-radio-input:focus ~ .ap-radio-button {
|
|
107
|
+
outline-color: var(--ref-color-red-100);
|
|
108
|
+
border-color: var(--ref-color-red-60);
|
|
109
|
+
}
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
/* Agorapulse Toggle Styles */
|
|
2
|
+
|
|
3
|
+
.ap-toggle-container {
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
gap: var(--ref-spacing-xxs);
|
|
7
|
+
cursor: pointer;
|
|
8
|
+
font-family: var(--sys-text-style-body-font-family);
|
|
9
|
+
font-size: var(--sys-text-style-body-size);
|
|
10
|
+
line-height: var(--sys-text-style-body-line-height);
|
|
11
|
+
color: var(--ref-color-grey-100);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.ap-toggle-container:has(input:disabled) {
|
|
15
|
+
cursor: default;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Label positioning */
|
|
19
|
+
.ap-toggle-container.label-left {
|
|
20
|
+
flex-direction: row-reverse;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Native checkbox input (visually hidden but accessible) */
|
|
24
|
+
.ap-toggle-input {
|
|
25
|
+
border: 0;
|
|
26
|
+
clip: rect(0 0 0 0);
|
|
27
|
+
height: 1px;
|
|
28
|
+
margin: -1px;
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
padding: 0;
|
|
31
|
+
position: absolute;
|
|
32
|
+
width: 1px;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Focus state */
|
|
36
|
+
@media (hover: hover) {
|
|
37
|
+
.ap-toggle-input:focus:not(:disabled) ~ .ap-toggle-switch {
|
|
38
|
+
outline: 2px solid var(--ref-color-electric-blue-100);
|
|
39
|
+
outline-offset: 1px;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
/* Toggle switch visual */
|
|
44
|
+
.ap-toggle-switch {
|
|
45
|
+
box-sizing: content-box;
|
|
46
|
+
position: relative;
|
|
47
|
+
display: flex;
|
|
48
|
+
align-items: center;
|
|
49
|
+
padding: 2px;
|
|
50
|
+
width: 28px;
|
|
51
|
+
height: 12px;
|
|
52
|
+
border-radius: 16px;
|
|
53
|
+
background: var(--ref-color-grey-60);
|
|
54
|
+
transition: background-color 0.25s;
|
|
55
|
+
flex-shrink: 0;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
/* Hover state for unchecked */
|
|
59
|
+
.ap-toggle-container:hover:not(:has(input:disabled)) .ap-toggle-switch {
|
|
60
|
+
background: var(--ref-color-grey-80);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
/* Checked state */
|
|
64
|
+
.ap-toggle-input:checked ~ .ap-toggle-switch {
|
|
65
|
+
background: var(--ref-color-electric-blue-100);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Hover state for checked */
|
|
69
|
+
.ap-toggle-container:hover:not(:has(input:disabled)) .ap-toggle-input:checked ~ .ap-toggle-switch {
|
|
70
|
+
background: var(--ref-color-electric-blue-80);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Active state for checked */
|
|
74
|
+
.ap-toggle-container:active:not(:has(input:disabled)) .ap-toggle-input:checked ~ .ap-toggle-switch {
|
|
75
|
+
background: var(--ref-color-electric-blue-60);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Disabled state */
|
|
79
|
+
.ap-toggle-switch.disabled,
|
|
80
|
+
.ap-toggle-input:disabled ~ .ap-toggle-switch {
|
|
81
|
+
background: var(--ref-color-grey-20);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/* Toggle knob */
|
|
85
|
+
.ap-toggle-knob {
|
|
86
|
+
width: 12px;
|
|
87
|
+
height: 12px;
|
|
88
|
+
background: var(--ref-color-white);
|
|
89
|
+
border-radius: 100%;
|
|
90
|
+
position: absolute;
|
|
91
|
+
transition: left 0.25s ease-in-out;
|
|
92
|
+
left: 2px;
|
|
93
|
+
display: flex;
|
|
94
|
+
align-items: center;
|
|
95
|
+
justify-content: center;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Knob position when checked */
|
|
99
|
+
.ap-toggle-input:checked ~ .ap-toggle-switch .ap-toggle-knob {
|
|
100
|
+
left: 18px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* Toggle icon */
|
|
104
|
+
.ap-toggle-icon {
|
|
105
|
+
width: 10px;
|
|
106
|
+
height: 10px;
|
|
107
|
+
min-width: 10px;
|
|
108
|
+
max-width: 10px;
|
|
109
|
+
max-height: 10px;
|
|
110
|
+
position: absolute;
|
|
111
|
+
color: var(--ref-color-grey-80);
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
/* Hide check icon by default, show close icon */
|
|
115
|
+
.ap-toggle-icon-check {
|
|
116
|
+
display: none;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.ap-toggle-icon-close {
|
|
120
|
+
display: block;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
/* When checked: hide close icon, show check icon */
|
|
124
|
+
.ap-toggle-input:checked ~ .ap-toggle-switch .ap-toggle-icon-close {
|
|
125
|
+
display: none;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.ap-toggle-input:checked ~ .ap-toggle-switch .ap-toggle-icon-check {
|
|
129
|
+
display: block;
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
/* Icon color when checked */
|
|
133
|
+
.ap-toggle-input:checked ~ .ap-toggle-switch .ap-toggle-icon {
|
|
134
|
+
color: var(--ref-color-electric-blue-150);
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* Icon color when disabled */
|
|
138
|
+
.ap-toggle-switch.disabled .ap-toggle-icon,
|
|
139
|
+
.ap-toggle-input:disabled ~ .ap-toggle-switch .ap-toggle-icon {
|
|
140
|
+
color: var(--ref-color-grey-40);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
/* Label styling */
|
|
144
|
+
.ap-toggle-label {
|
|
145
|
+
display: flex;
|
|
146
|
+
align-items: center;
|
|
147
|
+
font-family: var(--sys-text-style-body-font-family);
|
|
148
|
+
font-size: var(--sys-text-style-body-size);
|
|
149
|
+
font-weight: var(--sys-text-style-body-weight);
|
|
150
|
+
line-height: var(--sys-text-style-body-line-height);
|
|
151
|
+
color: var(--ref-color-grey-100);
|
|
152
|
+
user-select: none;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.ap-toggle-label:empty {
|
|
156
|
+
display: none;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.ap-toggle-label.disabled {
|
|
160
|
+
color: var(--ref-color-grey-60);
|
|
161
|
+
}
|
|
@@ -0,0 +1,431 @@
|
|
|
1
|
+
import type { Config } from 'tailwindcss';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Tailwind CSS configuration for Agorapulse Design System
|
|
5
|
+
* Generated from libs/ui-theme design tokens
|
|
6
|
+
*
|
|
7
|
+
* This config uses CSS custom properties defined in desktop_variables.css
|
|
8
|
+
* to ensure consistency between Tailwind utilities and the design system.
|
|
9
|
+
*/
|
|
10
|
+
const config: Config = {
|
|
11
|
+
content: ['./apps/**/*.{html,ts}', './libs/**/*.{html,ts}'],
|
|
12
|
+
theme: {
|
|
13
|
+
// Override default font family
|
|
14
|
+
fontFamily: {
|
|
15
|
+
sans: ['var(--ref-font-family)', 'sans-serif'],
|
|
16
|
+
averta: ['var(--ref-font-family)', 'sans-serif'],
|
|
17
|
+
},
|
|
18
|
+
|
|
19
|
+
// Override default font sizes with design system values
|
|
20
|
+
fontSize: {
|
|
21
|
+
xs: ['var(--ref-font-size-xs)', { lineHeight: 'var(--ref-font-line-height-xs)' }], // 12px
|
|
22
|
+
sm: ['var(--ref-font-size-sm)', { lineHeight: 'var(--ref-font-line-height-sm)' }], // 14px
|
|
23
|
+
base: ['var(--ref-font-size-sm)', { lineHeight: 'var(--ref-font-line-height-sm)' }], // 14px (body)
|
|
24
|
+
md: ['var(--ref-font-size-md)', { lineHeight: 'var(--ref-font-line-height-md)' }], // 16px
|
|
25
|
+
lg: ['var(--ref-font-size-lg)', { lineHeight: 'var(--ref-font-line-height-lg)' }], // 18px
|
|
26
|
+
xl: ['var(--ref-font-size-xl)', { lineHeight: 'var(--ref-font-line-height-xl)' }], // 20px
|
|
27
|
+
'2xl': ['var(--ref-font-size-xxl)', { lineHeight: 'var(--ref-font-line-height-xl)' }], // 24px
|
|
28
|
+
'3xl': ['var(--ref-font-size-xxxl)', { lineHeight: 'var(--ref-font-line-height-xxl)' }], // 28px
|
|
29
|
+
},
|
|
30
|
+
|
|
31
|
+
// Override default font weights
|
|
32
|
+
fontWeight: {
|
|
33
|
+
normal: 'var(--ref-font-weight-regular)',
|
|
34
|
+
bold: 'var(--ref-font-weight-bold)',
|
|
35
|
+
extrabold: 'var(--ref-font-weight-extra-bold)',
|
|
36
|
+
black: 'var(--ref-font-weight-black)',
|
|
37
|
+
},
|
|
38
|
+
|
|
39
|
+
// Override default line heights
|
|
40
|
+
lineHeight: {
|
|
41
|
+
none: '1',
|
|
42
|
+
tight: 'var(--ref-font-line-height-xxs)', // 14px
|
|
43
|
+
snug: 'var(--ref-font-line-height-xs)', // 16px
|
|
44
|
+
normal: 'var(--ref-font-line-height-sm)', // 18px
|
|
45
|
+
relaxed: 'var(--ref-font-line-height-md)', // 20px
|
|
46
|
+
loose: 'var(--ref-font-line-height-lg)', // 24px
|
|
47
|
+
// Explicit sizes
|
|
48
|
+
xxs: 'var(--ref-font-line-height-xxs)', // 14px
|
|
49
|
+
xs: 'var(--ref-font-line-height-xs)', // 16px
|
|
50
|
+
sm: 'var(--ref-font-line-height-sm)', // 18px
|
|
51
|
+
md: 'var(--ref-font-line-height-md)', // 20px
|
|
52
|
+
lg: 'var(--ref-font-line-height-lg)', // 24px
|
|
53
|
+
xl: 'var(--ref-font-line-height-xl)', // 32px
|
|
54
|
+
'2xl': 'var(--ref-font-line-height-xxl)', // 36px
|
|
55
|
+
},
|
|
56
|
+
|
|
57
|
+
// Override default spacing scale
|
|
58
|
+
spacing: {
|
|
59
|
+
0: '0',
|
|
60
|
+
px: '1px',
|
|
61
|
+
0.5: '2px',
|
|
62
|
+
1: 'var(--ref-spacing-xxxs)', // 4px
|
|
63
|
+
2: 'var(--ref-spacing-xxs)', // 8px
|
|
64
|
+
3: 'var(--ref-spacing-xs)', // 12px
|
|
65
|
+
4: 'var(--ref-spacing-sm)', // 16px
|
|
66
|
+
6: 'var(--ref-spacing-md)', // 24px
|
|
67
|
+
8: 'var(--ref-spacing-lg)', // 32px
|
|
68
|
+
10: 'var(--ref-spacing-xl)', // 40px
|
|
69
|
+
12: 'var(--ref-spacing-xxl)', // 48px
|
|
70
|
+
15: 'var(--ref-spacing-xxxl)', // 60px
|
|
71
|
+
// Named spacing for semantic use
|
|
72
|
+
xxxs: 'var(--ref-spacing-xxxs)', // 4px
|
|
73
|
+
xxs: 'var(--ref-spacing-xxs)', // 8px
|
|
74
|
+
xs: 'var(--ref-spacing-xs)', // 12px
|
|
75
|
+
sm: 'var(--ref-spacing-sm)', // 16px
|
|
76
|
+
md: 'var(--ref-spacing-md)', // 24px
|
|
77
|
+
lg: 'var(--ref-spacing-lg)', // 32px
|
|
78
|
+
xl: 'var(--ref-spacing-xl)', // 40px
|
|
79
|
+
xxl: 'var(--ref-spacing-xxl)', // 48px
|
|
80
|
+
xxxl: 'var(--ref-spacing-xxxl)', // 60px
|
|
81
|
+
},
|
|
82
|
+
|
|
83
|
+
// Override default border radius
|
|
84
|
+
borderRadius: {
|
|
85
|
+
none: '0',
|
|
86
|
+
sm: 'var(--ref-border-radius-sm)', // 4px
|
|
87
|
+
DEFAULT: 'var(--ref-border-radius-sm)', // 4px
|
|
88
|
+
md: 'var(--ref-border-radius-md)', // 8px
|
|
89
|
+
lg: 'var(--sys-border-radius-lg)', // 8px
|
|
90
|
+
full: '9999px',
|
|
91
|
+
// Component-specific
|
|
92
|
+
button: 'var(--comp-button-border-radius)', // 4px
|
|
93
|
+
input: 'var(--comp-input-border-radius)', // 4px
|
|
94
|
+
tag: 'var(--comp-tag-border-radius)', // 4px
|
|
95
|
+
label: 'var(--comp-label-border-radius)', // 24px (pill)
|
|
96
|
+
snackbar: 'var(--comp-snackbar-border-radius)', // 8px
|
|
97
|
+
},
|
|
98
|
+
|
|
99
|
+
extend: {
|
|
100
|
+
// Extended color palette using CSS variables
|
|
101
|
+
colors: {
|
|
102
|
+
// Base colors
|
|
103
|
+
white: 'var(--ref-color-white)',
|
|
104
|
+
background: 'var(--ref-color-background)',
|
|
105
|
+
|
|
106
|
+
// Orange palette (brand primary)
|
|
107
|
+
orange: {
|
|
108
|
+
5: '#FFF7F4',
|
|
109
|
+
10: 'var(--ref-color-orange-10)',
|
|
110
|
+
20: 'var(--ref-color-orange-20)',
|
|
111
|
+
40: 'var(--ref-color-orange-40)',
|
|
112
|
+
60: 'var(--ref-color-orange-60)',
|
|
113
|
+
80: 'var(--ref-color-orange-80)',
|
|
114
|
+
100: 'var(--ref-color-orange-100)',
|
|
115
|
+
150: 'var(--ref-color-orange-150)',
|
|
116
|
+
DEFAULT: 'var(--ref-color-orange-100)',
|
|
117
|
+
},
|
|
118
|
+
|
|
119
|
+
// Electric Blue palette (accent)
|
|
120
|
+
'electric-blue': {
|
|
121
|
+
5: 'var(--ref-color-electric-blue-05)',
|
|
122
|
+
10: 'var(--ref-color-electric-blue-10)',
|
|
123
|
+
20: 'var(--ref-color-electric-blue-20)',
|
|
124
|
+
40: 'var(--ref-color-electric-blue-40)',
|
|
125
|
+
60: 'var(--ref-color-electric-blue-60)',
|
|
126
|
+
80: 'var(--ref-color-electric-blue-80)',
|
|
127
|
+
100: 'var(--ref-color-electric-blue-100)',
|
|
128
|
+
150: 'var(--ref-color-electric-blue-150)',
|
|
129
|
+
DEFAULT: 'var(--ref-color-electric-blue-100)',
|
|
130
|
+
},
|
|
131
|
+
|
|
132
|
+
// Soft Blue palette
|
|
133
|
+
'soft-blue': {
|
|
134
|
+
10: 'var(--ref-color-soft-blue-10)',
|
|
135
|
+
20: 'var(--ref-color-soft-blue-20)',
|
|
136
|
+
40: 'var(--ref-color-soft-blue-40)',
|
|
137
|
+
60: 'var(--ref-color-soft-blue-60)',
|
|
138
|
+
80: 'var(--ref-color-soft-blue-80)',
|
|
139
|
+
100: 'var(--ref-color-soft-blue-100)',
|
|
140
|
+
150: 'var(--ref-color-soft-blue-150)',
|
|
141
|
+
DEFAULT: 'var(--ref-color-soft-blue-100)',
|
|
142
|
+
},
|
|
143
|
+
|
|
144
|
+
// Grey palette
|
|
145
|
+
grey: {
|
|
146
|
+
5: 'var(--ref-color-grey-05)',
|
|
147
|
+
10: 'var(--ref-color-grey-10)',
|
|
148
|
+
20: 'var(--ref-color-grey-20)',
|
|
149
|
+
40: 'var(--ref-color-grey-40)',
|
|
150
|
+
60: 'var(--ref-color-grey-60)',
|
|
151
|
+
80: 'var(--ref-color-grey-80)',
|
|
152
|
+
100: 'var(--ref-color-grey-100)',
|
|
153
|
+
150: 'var(--ref-color-grey-150)',
|
|
154
|
+
bg: 'var(--ref-color-grey-bg)',
|
|
155
|
+
DEFAULT: 'var(--ref-color-grey-100)',
|
|
156
|
+
},
|
|
157
|
+
|
|
158
|
+
// Green palette (success)
|
|
159
|
+
green: {
|
|
160
|
+
10: 'var(--ref-color-green-10)',
|
|
161
|
+
20: 'var(--ref-color-green-20)',
|
|
162
|
+
40: 'var(--ref-color-green-40)',
|
|
163
|
+
60: 'var(--ref-color-green-60)',
|
|
164
|
+
80: 'var(--ref-color-green-80)',
|
|
165
|
+
100: 'var(--ref-color-green-100)',
|
|
166
|
+
150: 'var(--ref-color-green-150)',
|
|
167
|
+
DEFAULT: 'var(--ref-color-green-100)',
|
|
168
|
+
},
|
|
169
|
+
|
|
170
|
+
// Red palette (error)
|
|
171
|
+
red: {
|
|
172
|
+
10: 'var(--ref-color-red-10)',
|
|
173
|
+
20: 'var(--ref-color-red-20)',
|
|
174
|
+
40: 'var(--ref-color-red-40)',
|
|
175
|
+
60: 'var(--ref-color-red-60)',
|
|
176
|
+
80: 'var(--ref-color-red-80)',
|
|
177
|
+
100: 'var(--ref-color-red-100)',
|
|
178
|
+
150: 'var(--ref-color-red-150)',
|
|
179
|
+
DEFAULT: 'var(--ref-color-red-100)',
|
|
180
|
+
},
|
|
181
|
+
|
|
182
|
+
// Yellow palette (warning)
|
|
183
|
+
yellow: {
|
|
184
|
+
10: 'var(--ref-color-yellow-10)',
|
|
185
|
+
20: 'var(--ref-color-yellow-20)',
|
|
186
|
+
40: 'var(--ref-color-yellow-40)',
|
|
187
|
+
60: 'var(--ref-color-yellow-60)',
|
|
188
|
+
80: 'var(--ref-color-yellow-80)',
|
|
189
|
+
100: 'var(--ref-color-yellow-100)',
|
|
190
|
+
150: 'var(--ref-color-yellow-150)',
|
|
191
|
+
DEFAULT: 'var(--ref-color-yellow-100)',
|
|
192
|
+
},
|
|
193
|
+
|
|
194
|
+
// Tag Orange palette (distinct from brand orange)
|
|
195
|
+
'tag-orange': {
|
|
196
|
+
10: 'var(--ref-color-tag-orange-10)',
|
|
197
|
+
20: 'var(--ref-color-tag-orange-20)',
|
|
198
|
+
40: 'var(--ref-color-tag-orange-40)',
|
|
199
|
+
60: 'var(--ref-color-tag-orange-60)',
|
|
200
|
+
80: 'var(--ref-color-tag-orange-80)',
|
|
201
|
+
100: 'var(--ref-color-tag-orange-100)',
|
|
202
|
+
150: 'var(--ref-color-tag-orange-150)',
|
|
203
|
+
DEFAULT: 'var(--ref-color-tag-orange-100)',
|
|
204
|
+
},
|
|
205
|
+
|
|
206
|
+
// Purple palette (feature lock)
|
|
207
|
+
purple: {
|
|
208
|
+
5: 'var(--ref-color-purple-05)',
|
|
209
|
+
10: 'var(--ref-color-purple-10)',
|
|
210
|
+
20: 'var(--ref-color-purple-20)',
|
|
211
|
+
40: 'var(--ref-color-purple-40)',
|
|
212
|
+
60: 'var(--ref-color-purple-60)',
|
|
213
|
+
80: 'var(--ref-color-purple-80)',
|
|
214
|
+
100: 'var(--ref-color-purple-100)',
|
|
215
|
+
150: 'var(--ref-color-purple-150)',
|
|
216
|
+
DEFAULT: 'var(--ref-color-purple-100)',
|
|
217
|
+
},
|
|
218
|
+
|
|
219
|
+
// Mermaid (AI gradient colors)
|
|
220
|
+
mermaid: {
|
|
221
|
+
10: 'var(--ref-color-mermaid-10)',
|
|
222
|
+
20: 'var(--ref-color-mermaid-20)',
|
|
223
|
+
from: 'var(--ref-color-mermaid-gradient-from)',
|
|
224
|
+
to: 'var(--ref-color-mermaid-gradient-to)',
|
|
225
|
+
},
|
|
226
|
+
|
|
227
|
+
// Menthol palette
|
|
228
|
+
menthol: {
|
|
229
|
+
10: 'var(--ref-color-menthol-10)',
|
|
230
|
+
20: 'var(--ref-color-menthol-20)',
|
|
231
|
+
40: 'var(--ref-color-menthol-40)',
|
|
232
|
+
60: 'var(--ref-color-menthol-60)',
|
|
233
|
+
80: 'var(--ref-color-menthol-80)',
|
|
234
|
+
100: 'var(--ref-color-menthol-100)',
|
|
235
|
+
150: 'var(--ref-color-menthol-150)',
|
|
236
|
+
DEFAULT: 'var(--ref-color-menthol-100)',
|
|
237
|
+
},
|
|
238
|
+
|
|
239
|
+
// Social media colors
|
|
240
|
+
social: {
|
|
241
|
+
facebook: {
|
|
242
|
+
10: 'var(--ref-color-facebook-10)',
|
|
243
|
+
DEFAULT: 'var(--ref-color-facebook-100)',
|
|
244
|
+
},
|
|
245
|
+
instagram: {
|
|
246
|
+
10: 'var(--ref-color-instagram-10)',
|
|
247
|
+
DEFAULT: 'var(--ref-color-instagram-100)',
|
|
248
|
+
},
|
|
249
|
+
twitter: {
|
|
250
|
+
10: 'var(--ref-color-twitter-10)',
|
|
251
|
+
DEFAULT: 'var(--ref-color-twitter-100)',
|
|
252
|
+
},
|
|
253
|
+
x: {
|
|
254
|
+
DEFAULT: 'var(--ref-color-x-100)',
|
|
255
|
+
},
|
|
256
|
+
linkedin: {
|
|
257
|
+
10: 'var(--ref-color-linkedin-10)',
|
|
258
|
+
DEFAULT: 'var(--ref-color-linkedin-100)',
|
|
259
|
+
},
|
|
260
|
+
youtube: {
|
|
261
|
+
10: 'var(--ref-color-youtube-10)',
|
|
262
|
+
DEFAULT: 'var(--ref-color-youtube-100)',
|
|
263
|
+
},
|
|
264
|
+
tiktok: {
|
|
265
|
+
10: 'var(--ref-color-tiktok-default-10)',
|
|
266
|
+
DEFAULT: 'var(--ref-color-tiktok-default-100)',
|
|
267
|
+
blue: 'var(--ref-color-tiktok-blue-100)',
|
|
268
|
+
red: 'var(--ref-color-tiktok-red-100)',
|
|
269
|
+
},
|
|
270
|
+
pinterest: {
|
|
271
|
+
10: 'var(--ref-color-pinterest-10)',
|
|
272
|
+
DEFAULT: 'var(--ref-color-pinterest-100)',
|
|
273
|
+
},
|
|
274
|
+
reddit: {
|
|
275
|
+
DEFAULT: 'var(--ref-color-reddit-100)',
|
|
276
|
+
},
|
|
277
|
+
bluesky: {
|
|
278
|
+
10: 'var(--ref-color-bluesky-10)',
|
|
279
|
+
DEFAULT: 'var(--ref-color-bluesky-100)',
|
|
280
|
+
},
|
|
281
|
+
threads: {
|
|
282
|
+
10: 'var(--ref-color-threads-10)',
|
|
283
|
+
DEFAULT: 'var(--ref-color-threads-100)',
|
|
284
|
+
},
|
|
285
|
+
'google-my-business': {
|
|
286
|
+
10: 'var(--ref-color-google-my-business-10)',
|
|
287
|
+
DEFAULT: 'var(--ref-color-google-my-business-100)',
|
|
288
|
+
},
|
|
289
|
+
},
|
|
290
|
+
|
|
291
|
+
// Semantic system colors
|
|
292
|
+
main: {
|
|
293
|
+
DEFAULT: 'var(--sys-color-main-default-bg-default)',
|
|
294
|
+
hover: 'var(--sys-color-main-default-bg-hover)',
|
|
295
|
+
clicked: 'var(--sys-color-main-default-bg-clicked)',
|
|
296
|
+
disabled: 'var(--sys-color-main-default-bg-disabled)',
|
|
297
|
+
text: 'var(--sys-color-main-text)',
|
|
298
|
+
'light-bg': 'var(--sys-color-main-light-bg)',
|
|
299
|
+
'light-text': 'var(--sys-color-main-light-text)',
|
|
300
|
+
'on-main': 'var(--sys-color-main-default-text)',
|
|
301
|
+
},
|
|
302
|
+
|
|
303
|
+
accent: {
|
|
304
|
+
DEFAULT: 'var(--sys-color-accent-default-bg-default)',
|
|
305
|
+
hover: 'var(--sys-color-accent-default-bg-hover)',
|
|
306
|
+
clicked: 'var(--sys-color-accent-default-bg-clicked)',
|
|
307
|
+
disabled: 'var(--sys-color-accent-default-bg-disabled)',
|
|
308
|
+
text: 'var(--sys-color-accent-text)',
|
|
309
|
+
'light-bg': 'var(--sys-color-accent-light-bg)',
|
|
310
|
+
'light-text': 'var(--sys-color-accent-light-text)',
|
|
311
|
+
'on-accent': 'var(--sys-color-accent-default-text)',
|
|
312
|
+
},
|
|
313
|
+
|
|
314
|
+
error: {
|
|
315
|
+
DEFAULT: 'var(--sys-color-error-default-bg-default)',
|
|
316
|
+
hover: 'var(--sys-color-error-default-bg-hover)',
|
|
317
|
+
clicked: 'var(--sys-color-error-default-bg-clicked)',
|
|
318
|
+
disabled: 'var(--sys-color-error-default-bg-disabled)',
|
|
319
|
+
text: 'var(--sys-color-error-text)',
|
|
320
|
+
'light-bg': 'var(--sys-color-error-light-bg)',
|
|
321
|
+
'light-text': 'var(--sys-color-error-light-text)',
|
|
322
|
+
'on-error': 'var(--sys-color-error-default-text)',
|
|
323
|
+
},
|
|
324
|
+
|
|
325
|
+
warning: {
|
|
326
|
+
DEFAULT: 'var(--sys-color-warning-default-bg-default)',
|
|
327
|
+
hover: 'var(--sys-color-warning-default-bg-hover)',
|
|
328
|
+
clicked: 'var(--sys-color-warning-default-bg-clicked)',
|
|
329
|
+
disabled: 'var(--sys-color-warning-default-bg-disabled)',
|
|
330
|
+
text: 'var(--sys-color-warning-text)',
|
|
331
|
+
'light-bg': 'var(--sys-color-warning-light-bg)',
|
|
332
|
+
'light-text': 'var(--sys-color-warning-light-text)',
|
|
333
|
+
'on-warning': 'var(--sys-color-warning-default-text)',
|
|
334
|
+
},
|
|
335
|
+
|
|
336
|
+
success: {
|
|
337
|
+
DEFAULT: 'var(--sys-color-success-default-bg-default)',
|
|
338
|
+
hover: 'var(--sys-color-success-default-bg-hover)',
|
|
339
|
+
clicked: 'var(--sys-color-success-default-bg-clicked)',
|
|
340
|
+
disabled: 'var(--sys-color-success-default-bg-disabled)',
|
|
341
|
+
text: 'var(--sys-color-success-text)',
|
|
342
|
+
'light-bg': 'var(--sys-color-success-light-bg)',
|
|
343
|
+
'light-text': 'var(--sys-color-success-light-text)',
|
|
344
|
+
'on-success': 'var(--sys-color-success-default-text)',
|
|
345
|
+
},
|
|
346
|
+
|
|
347
|
+
'feature-lock': {
|
|
348
|
+
DEFAULT: 'var(--sys-color-feature-lock-default-bg-default)',
|
|
349
|
+
hover: 'var(--sys-color-feature-lock-default-bg-hover)',
|
|
350
|
+
clicked: 'var(--sys-color-feature-lock-default-bg-clicked)',
|
|
351
|
+
disabled: 'var(--sys-color-feature-lock-default-bg-disabled)',
|
|
352
|
+
text: 'var(--sys-color-feature-lock-text)',
|
|
353
|
+
'light-bg': 'var(--sys-color-feature-lock-light-bg)',
|
|
354
|
+
'light-text': 'var(--sys-color-feature-lock-light-text)',
|
|
355
|
+
'on-feature-lock': 'var(--sys-color-feature-lock-default-text)',
|
|
356
|
+
},
|
|
357
|
+
|
|
358
|
+
// Border colors
|
|
359
|
+
border: {
|
|
360
|
+
DEFAULT: 'var(--sys-border-color-default)',
|
|
361
|
+
active: 'var(--sys-border-color-active)',
|
|
362
|
+
error: 'var(--sys-border-color-error)',
|
|
363
|
+
},
|
|
364
|
+
|
|
365
|
+
// Text colors
|
|
366
|
+
text: {
|
|
367
|
+
DEFAULT: 'var(--sys-text-color-default)',
|
|
368
|
+
light: 'var(--sys-text-color-light)',
|
|
369
|
+
error: 'var(--sys-text-color-error)',
|
|
370
|
+
},
|
|
371
|
+
},
|
|
372
|
+
|
|
373
|
+
// Box shadow configurations
|
|
374
|
+
boxShadow: {
|
|
375
|
+
dropdown: 'var(--comp-action-dropdown-box-shadow)',
|
|
376
|
+
select: 'var(--comp-select-shadow)',
|
|
377
|
+
snackbar: 'var(--comp-snackbar-shadow)',
|
|
378
|
+
avatar: 'var(--comp-avatar-background-shadow)',
|
|
379
|
+
},
|
|
380
|
+
|
|
381
|
+
// Animation/transition durations
|
|
382
|
+
transitionDuration: {
|
|
383
|
+
xshort: 'var(--ref-animation-xshort)', // 75ms
|
|
384
|
+
short: 'var(--ref-animation-short)', // 150ms
|
|
385
|
+
normal: 'var(--ref-animation-normal)', // 250ms
|
|
386
|
+
long: 'var(--ref-animation-long)', // 400ms
|
|
387
|
+
DEFAULT: 'var(--ref-transition-duration)', // 250ms
|
|
388
|
+
},
|
|
389
|
+
|
|
390
|
+
// Background gradients
|
|
391
|
+
backgroundImage: {
|
|
392
|
+
'mermaid-gradient': 'var(--ref-color-mermaid-gradient-background)',
|
|
393
|
+
},
|
|
394
|
+
|
|
395
|
+
// Component-specific sizing
|
|
396
|
+
width: {
|
|
397
|
+
'input-default': 'var(--comp-input-width-default)', // 256px
|
|
398
|
+
snackbar: 'var(--comp-snackbar-width)', // 420px
|
|
399
|
+
'settings-md': 'var(--sys-settings-content-max-width-md)', // 700px
|
|
400
|
+
'settings-lg': 'var(--sys-settings-content-max-width-lg)', // 1200px
|
|
401
|
+
},
|
|
402
|
+
|
|
403
|
+
height: {
|
|
404
|
+
button: 'var(--comp-button-height)', // 36px
|
|
405
|
+
input: 'var(--comp-input-height)', // 36px
|
|
406
|
+
'icon-button': 'var(--comp-icon-button-height)', // 36px
|
|
407
|
+
badge: 'var(--comp-badge-height)', // 16px
|
|
408
|
+
counter: 'var(--comp-counter-height)', // 16px
|
|
409
|
+
label: 'var(--comp-label-height)', // 24px
|
|
410
|
+
tag: 'var(--comp-tag-height)', // 24px
|
|
411
|
+
status: 'var(--comp-status-height)', // 24px
|
|
412
|
+
'tag-mini': 'var(--comp-tag-mini-height)', // 18px
|
|
413
|
+
'select-one-line': 'var(--comp-select-one-line-height)', // 40px
|
|
414
|
+
'tabs-min': 'var(--comp-tabs-tab-min-height)', // 48px
|
|
415
|
+
},
|
|
416
|
+
|
|
417
|
+
// Min/max width utilities
|
|
418
|
+
maxWidth: {
|
|
419
|
+
'settings-md': 'var(--sys-settings-content-max-width-md)',
|
|
420
|
+
'settings-lg': 'var(--sys-settings-content-max-width-lg)',
|
|
421
|
+
},
|
|
422
|
+
|
|
423
|
+
minWidth: {
|
|
424
|
+
'counter-notif': 'var(--comp-counter-notif-min-width)',
|
|
425
|
+
},
|
|
426
|
+
},
|
|
427
|
+
},
|
|
428
|
+
plugins: [],
|
|
429
|
+
};
|
|
430
|
+
|
|
431
|
+
export default config;
|
package/package.json
CHANGED
|
Binary file
|