@agorapulse/ui-theme 20.1.18 → 20.1.20

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.
Files changed (49) hide show
  1. package/agorapulse-ui-theme-20.1.20.tgz +0 -0
  2. package/assets/desktop_variables.css +10 -0
  3. package/assets/mobile_variables.css +10 -0
  4. package/assets/style/_table.scss +5 -5
  5. package/assets/style/_tooltip.scss +6 -1
  6. package/assets/style/css-ui/_action-dropdown.scss +163 -0
  7. package/assets/style/css-ui/_avatar.scss +236 -0
  8. package/assets/style/css-ui/_badge.scss +28 -0
  9. package/assets/style/css-ui/_button.scss +261 -0
  10. package/assets/style/css-ui/_checkbox.scss +168 -0
  11. package/assets/style/css-ui/_counter.scss +76 -0
  12. package/assets/style/css-ui/_datepicker.scss +307 -0
  13. package/assets/style/css-ui/_dot-stepper.scss +67 -0
  14. package/assets/style/{_helpers.scss → css-ui/_helpers.scss} +14 -13
  15. package/assets/style/css-ui/_icon-button.scss +162 -0
  16. package/assets/style/css-ui/_infobox.scss +154 -0
  17. package/assets/style/css-ui/_input.scss +133 -0
  18. package/assets/style/css-ui/_label.scss +89 -0
  19. package/assets/style/css-ui/_link.scss +91 -0
  20. package/assets/style/css-ui/_loader.scss +178 -0
  21. package/assets/style/css-ui/_mixins.scss +50 -0
  22. package/assets/style/css-ui/_pagination.scss +177 -0
  23. package/assets/style/css-ui/_radio-card.scss +200 -0
  24. package/assets/style/css-ui/_radio.scss +111 -0
  25. package/assets/style/css-ui/_select.scss +656 -0
  26. package/assets/style/css-ui/_selection-dropdown.scss +183 -0
  27. package/assets/style/css-ui/_snackbar.scss +166 -0
  28. package/assets/style/css-ui/_split-button.scss +79 -0
  29. package/assets/style/css-ui/_status.scss +71 -0
  30. package/assets/style/css-ui/_stepper.scss +127 -0
  31. package/assets/style/css-ui/_table.scss +325 -0
  32. package/assets/style/css-ui/_tabs.scss +182 -0
  33. package/assets/style/css-ui/_tag.scss +169 -0
  34. package/assets/style/css-ui/_textarea.scss +121 -0
  35. package/assets/style/css-ui/_toggle.scss +136 -0
  36. package/assets/style/css-ui/_tooltip.scss +122 -0
  37. package/assets/style/{_mat-typography.scss → css-ui/_typography.scss} +34 -26
  38. package/assets/style/css-ui/index.css +4723 -0
  39. package/assets/style/css-ui/index.css.map +1 -0
  40. package/assets/style/css-ui/index.scss +34 -0
  41. package/assets/style/theme.scss +9 -2
  42. package/package.json +13 -2
  43. package/src/tokens/system/icon.json +33 -0
  44. package/agorapulse-ui-theme-20.1.18.tgz +0 -0
  45. package/assets/style/lovable/lovable-button.css +0 -446
  46. package/assets/style/lovable/lovable-input.css +0 -119
  47. package/assets/style/lovable/lovable-radio.css +0 -109
  48. package/assets/style/lovable/lovable-toggle.css +0 -161
  49. package/assets/style/lovable/tailwind.config.ts +0 -431
package/assets/style/lovable/tailwind.config.ts DELETED
@@ -1,431 +0,0 @@
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;