@casinogate/ui 2.0.9 → 2.0.10

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 (48) hide show
  1. package/dist/assets/css/root.css +304 -5
  2. package/dist/assets/css/tailwind/theme.css +24 -0
  3. package/dist/assets/css/tokens/primitives.css +14 -0
  4. package/dist/internal/utils/motion.d.ts +20 -0
  5. package/dist/internal/utils/motion.js +15 -0
  6. package/dist/primitives/app-shell/styles.js +4 -5
  7. package/dist/primitives/badge/styles.js +5 -4
  8. package/dist/primitives/breadcrumb/styles.js +1 -1
  9. package/dist/primitives/button/styles.js +5 -3
  10. package/dist/primitives/calendar/styles.js +2 -2
  11. package/dist/primitives/checkbox/components/checkbox.root.svelte +19 -6
  12. package/dist/primitives/checkbox/styles.js +1 -1
  13. package/dist/primitives/chip/styles.js +1 -1
  14. package/dist/primitives/collapsible/components/collapsaible.content.svelte +2 -1
  15. package/dist/primitives/collapsible/styles.js +2 -2
  16. package/dist/primitives/combobox/styles.js +1 -1
  17. package/dist/primitives/command/styles.js +2 -2
  18. package/dist/primitives/date-picker/styles.js +4 -3
  19. package/dist/primitives/dialog/styles.js +2 -0
  20. package/dist/primitives/drawer/styles.js +2 -2
  21. package/dist/primitives/dropdown/styles.js +2 -1
  22. package/dist/primitives/field/styles.js +1 -1
  23. package/dist/primitives/file-upload/styles.js +2 -2
  24. package/dist/primitives/input/styles.js +1 -1
  25. package/dist/primitives/navigation/components/navigation.content.svelte +2 -1
  26. package/dist/primitives/navigation/components/navigation.item.svelte +3 -2
  27. package/dist/primitives/navigation/components/navigation.root.svelte +2 -1
  28. package/dist/primitives/navigation/components/navigation.sub-content.svelte +10 -5
  29. package/dist/primitives/navigation/components/navigation.sub-trigger.svelte +18 -22
  30. package/dist/primitives/navigation/components/navigation.sub.svelte +3 -2
  31. package/dist/primitives/navigation/components/navigation.trigger.svelte +9 -11
  32. package/dist/primitives/navigation/styles.js +31 -12
  33. package/dist/primitives/pagination/styles.js +2 -2
  34. package/dist/primitives/pill/styles.js +2 -2
  35. package/dist/primitives/popover/styles.js +1 -0
  36. package/dist/primitives/segment/styles.js +4 -4
  37. package/dist/primitives/select/components/select.item.svelte +1 -1
  38. package/dist/primitives/select/styles.js +10 -5
  39. package/dist/primitives/skeleton/components/skeleton.svelte +18 -12
  40. package/dist/primitives/skeleton/styles.d.ts +40 -31
  41. package/dist/primitives/skeleton/styles.js +122 -17
  42. package/dist/primitives/skeleton/types.d.ts +4 -5
  43. package/dist/primitives/slider/styles.js +2 -2
  44. package/dist/primitives/switch/styles.js +2 -2
  45. package/dist/primitives/textarea/styles.js +1 -1
  46. package/dist/primitives/toast/styles.js +2 -2
  47. package/package.json +1 -1
  48. package/dist/assets/css/theme.css +0 -337
package/dist/assets/css/theme.css DELETED
@@ -1,337 +0,0 @@
1
- :root {
2
- /* Primary colors */
3
- --cg-ui-primary-hue: 220;
4
- --cg-ui-primary-saturation: 80%;
5
-
6
- --cg-ui-palette-primary-100: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 38%, 1);
7
- --cg-ui-palette-primary-80: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 50%, 1);
8
- --cg-ui-palette-primary-60: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 64%, 1);
9
- --cg-ui-palette-primary-40: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 94%, 1);
10
- --cg-ui-palette-primary-10: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 97%, 1);
11
-
12
- /* Neutral colors */
13
- --cg-ui-neutral-hue: 230;
14
- --cg-ui-neutral-saturation: 20%;
15
-
16
- --cg-ui-palette-neutral-100: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 12%, 1);
17
- --cg-ui-palette-neutral-80: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 20%, 1);
18
- --cg-ui-palette-neutral-60: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 40%, 1);
19
- --cg-ui-palette-neutral-50: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 58%, 1);
20
-
21
- /* Fixed colors */
22
- --cg-ui-palette-neutral-40: hsla(230, 20%, 78%, 1);
23
- --cg-ui-palette-neutral-20: hsla(230, 20%, 95%, 1);
24
- --cg-ui-palette-neutral-10: hsla(220, 20%, 98%, 1);
25
- --cg-ui-palette-neutral-0: hsla(0, 0%, 100%, 1);
26
- --cg-ui-palette-neutral-01: hsla(0, 0%, 100%, 0.1);
27
-
28
- /* System colors */
29
- --cg-ui-palette-system-error-100: hsla(2, 100%, 40%, 1);
30
- --cg-ui-palette-system-error-10: hsla(3, 67%, 93%, 1);
31
-
32
- --cg-ui-palette-system-warning-100: hsla(52, 100%, 50%, 1);
33
- --cg-ui-palette-system-warning-10: hsla(18, 88%, 94%, 1);
34
-
35
- --cg-ui-palette-system-success-100: hsla(162, 100%, 25%, 1);
36
- --cg-ui-palette-system-success-10: hsla(162, 64%, 94%, 1);
37
-
38
- --cg-ui-palette-system-info-100: hsla(232, 22%, 29%, 1);
39
- --cg-ui-palette-system-info-10: hsla(240, 12%, 93%, 1);
40
-
41
- /* Base numbers */
42
- --cg-ui-number-null: 0;
43
- --cg-ui-number-xxxs: 2;
44
- --cg-ui-number-xxs: 4;
45
- --cg-ui-number-xs: 6;
46
- --cg-ui-number-sm: 8;
47
- --cg-ui-number-md: 12;
48
- --cg-ui-number-lg: 16;
49
- --cg-ui-number-xl: 20;
50
- --cg-ui-number-2xl: 24;
51
- --cg-ui-number-xxl: 40;
52
- --cg-ui-number-2xxl: 48;
53
- --cg-ui-number-max: 360;
54
-
55
- /* Shadows */
56
- --cg-ui-shadow-base: rgba(0, 0, 0, 0.1) 0px 4px 12px;
57
- --cg-ui-shadow-toast: 0px 0px 8px 0px hsla(0, 0%, 0%, 0.2);
58
- --cg-ui-shadow-switch-thumb: 0px 1px 1px 0px hsla(0, 0%, 0%, 0.25);
59
- --cg-ui-shadow-segment-item: 0px 0px 4px 0px hsla(0, 0%, 0%, 0.1);
60
- --cg-ui-shadow-popover: var(--cg-ui-shadow-base);
61
- --cg-ui-shadow-dropdown: var(--cg-ui-shadow-base);
62
- --cg-ui-shadow-select: var(--cg-ui-shadow-base);
63
- --cg-ui-shadow-command: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
64
- --cg-ui-shadow-dialog: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
65
- --cg-ui-shadow-thumb:
66
- rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em, rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
67
- rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset;
68
-
69
- /* Font sizes, Line heights */
70
- --cg-ui-fz-base: 16;
71
-
72
- --cg-ui-fz-heading: calc(16 / var(--cg-ui-fz-base) * 1rem);
73
- --cg-ui-lh-heading: calc(22 / var(--cg-ui-fz-base) * 1rem);
74
-
75
- --cg-ui-fz-heading-2: calc(16 / var(--cg-ui-fz-base) * 1rem);
76
- --cg-ui-lh-heading-2: calc(18 / var(--cg-ui-fz-base) * 1rem);
77
-
78
- --cg-ui-fz-body: calc(14 / var(--cg-ui-fz-base) * 1rem);
79
- --cg-ui-lh-body: calc(18 / var(--cg-ui-fz-base) * 1rem);
80
-
81
- --cg-ui-fz-body-2: calc(14 / var(--cg-ui-fz-base) * 1rem);
82
- --cg-ui-lh-body-2: calc(16 / var(--cg-ui-fz-base) * 1rem);
83
-
84
- --cg-ui-fz-caption: calc(12 / var(--cg-ui-fz-base) * 1rem);
85
- --cg-ui-lh-caption: calc(18 / var(--cg-ui-fz-base) * 1rem);
86
-
87
- --cg-ui-fz-caption-2: calc(12 / var(--cg-ui-fz-base) * 1rem);
88
- --cg-ui-lh-caption-2: calc(16 / var(--cg-ui-fz-base) * 1rem);
89
-
90
- /* Z-index */
91
- --cg-ui-z-index-base: 0;
92
- --cg-ui-z-index-content: 1;
93
-
94
- /* Sticky/Fixed elements */
95
- --cg-ui-z-index-sticky: 10;
96
- --cg-ui-z-index-fixed: 20;
97
-
98
- /* Interactive overlays (low priority) */
99
- --cg-ui-z-index-dropdown: 50;
100
- --cg-ui-z-index-select: 50;
101
-
102
- /* Interactive overlays (medium priority) */
103
- --cg-ui-z-index-popover: 100;
104
- --cg-ui-z-index-collapsible: 100;
105
-
106
- /* Tooltips */
107
- --cg-ui-z-index-tooltip: 200;
108
-
109
- /* Navigation (if floating/overlay) */
110
- --cg-ui-z-index-navigation: 250;
111
-
112
- /* Modals & Dialogs */
113
- --cg-ui-z-index-modal: 300;
114
- --cg-ui-z-index-dialog: 300;
115
- --cg-ui-z-index-backdrop: 300;
116
-
117
- /* Notifications & Toasts */
118
- --cg-ui-z-index-toast: 400;
119
- --cg-ui-z-index-notification: 400;
120
-
121
- /* Critical UI (highest priority) */
122
- --cg-ui-z-index-critical: 500;
123
- --cg-ui-z-index-loading: 500;
124
-
125
- /* Semantic colors */
126
- --cg-ui-color-bg-main: var(--cg-ui-palette-neutral-20);
127
-
128
- --cg-ui-color-fg-darkest: var(--cg-ui-palette-neutral-100);
129
- --cg-ui-color-fg-dark: var(--cg-ui-palette-neutral-80);
130
- --cg-ui-color-fg-medium: var(--cg-ui-palette-neutral-60);
131
- --cg-ui-color-fg-regular: var(--cg-ui-palette-neutral-50);
132
- --cg-ui-color-fg-semilight: var(--cg-ui-palette-neutral-40);
133
- --cg-ui-color-fg-primary: var(--cg-ui-palette-primary-80);
134
- --cg-ui-color-fg-white: var(--cg-ui-palette-neutral-0);
135
- }
136
-
137
- .dark,
138
- [data-theme='dark'] {
139
- /* Primary colors */
140
- --cg-ui-primary-hue: 160;
141
- --cg-ui-primary-saturation: 80%;
142
-
143
- --cg-ui-palette-primary-100: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 28%, 1);
144
- --cg-ui-palette-primary-80: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 40%, 1);
145
- --cg-ui-palette-primary-60: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 64%, 1);
146
- --cg-ui-palette-primary-40: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 94%, 1);
147
- --cg-ui-palette-primary-10: hsla(var(--cg-ui-primary-hue), var(--cg-ui-primary-saturation), 97%, 1);
148
-
149
- /* Neutral colors */
150
- --cg-ui-neutral-hue: 225;
151
- --cg-ui-neutral-saturation: 50%;
152
-
153
- --cg-ui-palette-neutral-100: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 8%, 1);
154
- --cg-ui-palette-neutral-80: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 12%, 1);
155
- --cg-ui-palette-neutral-60: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 16%, 1);
156
- --cg-ui-palette-neutral-50: hsla(var(--cg-ui-neutral-hue), var(--cg-ui-neutral-saturation), 28%, 1);
157
-
158
- /* System colors */
159
- --cg-ui-palette-system-error-100: hsla(2, 100%, 40%, 1);
160
- --cg-ui-palette-system-error-10: hsla(3, 67%, 93%, 1);
161
-
162
- --cg-ui-palette-system-warning-100: hsla(32, 98%, 40%, 1);
163
- --cg-ui-palette-system-warning-10: hsla(18, 88%, 94%, 1);
164
-
165
- --cg-ui-palette-system-success-100: hsla(162, 100%, 25%, 1);
166
- --cg-ui-palette-system-success-10: hsla(162, 64%, 94%, 1);
167
-
168
- --cg-ui-palette-system-info-100: hsla(232, 22%, 29%, 1);
169
- --cg-ui-palette-system-info-10: hsla(240, 12%, 93%, 1);
170
-
171
- /* Semantic colors */
172
- --cg-ui-color-bg-main: var(--cg-ui-palette-neutral-80);
173
-
174
- --cg-ui-color-fg-darkest: var(--cg-ui-palette-neutral-10);
175
- --cg-ui-color-fg-dark: var(--cg-ui-palette-neutral-10);
176
- --cg-ui-color-fg-medium: var(--cg-ui-palette-neutral-40);
177
- --cg-ui-color-fg-regular: var(--cg-ui-palette-neutral-20);
178
- --cg-ui-color-fg-semilight: var(--cg-ui-palette-neutral-40);
179
- --cg-ui-color-fg-white: var(--cg-ui-palette-neutral-10);
180
- }
181
-
182
- @theme inline {
183
- /* --color-*: initial; */
184
-
185
- /* Primary colors */
186
- --color-primary-100: var(--cg-ui-palette-primary-100);
187
- --color-primary-80: var(--cg-ui-palette-primary-80);
188
- --color-primary-60: var(--cg-ui-palette-primary-60);
189
- --color-primary-40: var(--cg-ui-palette-primary-40);
190
- --color-primary-10: var(--cg-ui-palette-primary-10);
191
-
192
- /* Neutral colors */
193
- --color-neutral-100: var(--cg-ui-palette-neutral-100);
194
- --color-neutral-80: var(--cg-ui-palette-neutral-80);
195
- --color-neutral-60: var(--cg-ui-palette-neutral-60);
196
- --color-neutral-50: var(--cg-ui-palette-neutral-50);
197
- --color-neutral-40: var(--cg-ui-palette-neutral-40);
198
- --color-neutral-20: var(--cg-ui-palette-neutral-20);
199
- --color-neutral-10: var(--cg-ui-palette-neutral-10);
200
- --color-neutral-0: var(--cg-ui-palette-neutral-0);
201
-
202
- /* System colors */
203
- --color-system-error-100: var(--cg-ui-palette-system-error-100);
204
- --color-system-error-10: var(--cg-ui-palette-system-error-10);
205
- --color-system-warning-100: var(--cg-ui-palette-system-warning-100);
206
- --color-system-warning-10: var(--cg-ui-palette-system-warning-10);
207
- --color-system-success-100: var(--cg-ui-palette-system-success-100);
208
- --color-system-success-10: var(--cg-ui-palette-system-success-10);
209
- --color-system-info-100: var(--cg-ui-palette-system-info-100);
210
- --color-system-info-10: var(--cg-ui-palette-system-info-10);
211
-
212
- /* Surface */
213
- --color-surface-primary: var(--cg-ui-palette-primary-80);
214
- --color-surface-primary-active: var(--cg-ui-palette-primary-60);
215
- --color-surface-primary-light: var(--cg-ui-palette-primary-40);
216
- --color-surface-primary-light-active: var(--cg-ui-palette-primary-10);
217
- --color-surface-darkest: var(--cg-ui-palette-neutral-100);
218
- --color-surface-dark: var(--cg-ui-palette-neutral-80);
219
- --color-surface-regular: var(--cg-ui-palette-neutral-50);
220
- --color-surface-semilight: var(--cg-ui-palette-neutral-40);
221
- --color-surface-light: var(--cg-ui-palette-neutral-20);
222
- --color-surface-lightest: var(--cg-ui-palette-neutral-10);
223
- --color-surface-white: var(--cg-ui-palette-neutral-0);
224
- --color-surface-hover: var(--cg-ui-palette-neutral-01);
225
-
226
- /* Background */
227
- --color-bg-white: var(--cg-ui-palette-neutral-0);
228
- --color-bg-main: var(--cg-ui-color-bg-main);
229
- --color-bg-dark: var(--cg-ui-palette-neutral-100);
230
-
231
- /* Foreground */
232
- --color-fg-darkest: var(--cg-ui-color-fg-darkest);
233
- --color-fg-dark: var(--cg-ui-color-fg-dark);
234
- --color-fg-medium: var(--cg-ui-color-fg-medium);
235
- --color-fg-regular: var(--cg-ui-color-fg-regular);
236
- --color-fg-semilight: var(--cg-ui-color-fg-semilight);
237
- --color-fg-primary: var(--cg-ui-color-fg-primary);
238
- --color-fg-white: var(--cg-ui-color-fg-white);
239
- --color-fg-error: var(--cg-ui-palette-system-error-100);
240
- --color-fg-success: var(--cg-ui-palette-system-success-100);
241
- --color-fg-warning: var(--cg-ui-palette-system-warning-100);
242
-
243
- /* Stroke */
244
- --color-stroke-default: var(--cg-ui-palette-neutral-40);
245
- --color-stroke-minimum: var(--cg-ui-palette-neutral-10);
246
- --color-stroke-focus: var(--cg-ui-palette-primary-60);
247
- --color-stroke-primary: var(--cg-ui-palette-primary-80);
248
- --color-stroke-divider: var(--cg-ui-palette-neutral-20);
249
- --color-stroke-error: var(--cg-ui-palette-system-error-100);
250
-
251
- /* Icon */
252
- --color-icon-regular: var(--cg-ui-palette-neutral-50);
253
- --color-icon-default: var(--cg-ui-palette-neutral-40);
254
- --color-icon-primary: var(--cg-ui-palette-primary-80);
255
- --color-icon-focus: var(--cg-ui-palette-primary-60);
256
- --color-icon-white: var(--cg-ui-palette-neutral-0);
257
-
258
- /* States */
259
- --color-state-error: var(--cg-ui-palette-system-error-100);
260
- --color-state-error-light: var(--cg-ui-palette-system-error-10);
261
- --color-state-warning: var(--cg-ui-palette-system-warning-100);
262
- --color-state-warning-light: var(--cg-ui-palette-system-warning-10);
263
- --color-state-success: var(--cg-ui-palette-system-success-100);
264
- --color-state-success-light: var(--cg-ui-palette-system-success-10);
265
- --color-state-info: var(--cg-ui-palette-system-info-100);
266
- --color-state-info-light: var(--cg-ui-palette-system-info-10);
267
-
268
- /* Breakpoints */
269
- --breakpoint-phone-sm: 320px;
270
- --breakpoint-phone: 375px;
271
- --breakpoint-phone-lg: 425px;
272
- --breakpoint-tablet-sm: 640px;
273
- --breakpoint-tablet: 768px;
274
- --breakpoint-tablet-lg: 1024px;
275
- --breakpoint-desktop-sm: 1280px;
276
- --breakpoint-desktop: 1440px;
277
- --breakpoint-desktop-lg: 1920px;
278
-
279
- /* Blur Effects */
280
- --blur-*: initial;
281
-
282
- --blur-xxs: var(--cg-ui-number-xxs) * 1px;
283
- --blur-xs: calc(var(--cg-ui-number-xs) * 1px);
284
- --blur-sm: calc(var(--cg-ui-number-sm) * 1px);
285
- --blur-md: calc(var(--cg-ui-number-md) * 1px);
286
- --blur-lg: calc(var(--cg-ui-number-lg) * 1px);
287
- --blur-xl: calc(var(--cg-ui-number-xl) * 1px);
288
- --blur-2xl: calc(var(--cg-ui-number-2xl) * 1px);
289
-
290
- /* Radius */
291
- --radius-*: initial;
292
-
293
- --radius-null: calc(var(--cg-ui-number-null) * 1px);
294
- --radius-xxxs: calc(var(--cg-ui-number-xxxs) * 1px);
295
- --radius-xxs: calc(var(--cg-ui-number-xxs) * 1px);
296
- --radius-xs: calc(var(--cg-ui-number-xs) * 1px);
297
- --radius-sm: calc(var(--cg-ui-number-sm) * 1px);
298
- --radius-md: calc(var(--cg-ui-number-md) * 1px);
299
- --radius-lg: calc(var(--cg-ui-number-lg) * 1px);
300
- --radius-xl: calc(var(--cg-ui-number-xl) * 1px);
301
- --radius-2xl: calc(var(--cg-ui-number-2xl) * 1px);
302
- --radius-xxl: calc(var(--cg-ui-number-xxl) * 1px);
303
- --radius-2xxl: calc(var(--cg-ui-number-2xxl) * 1px);
304
- --radius-max: calc(var(--cg-ui-number-max) * 1px);
305
-
306
- /* Shadows */
307
- --shadow-*: initial;
308
-
309
- --shadow-base: var(--cg-ui-shadow-base);
310
- --shadow-toast: var(--cg-ui-shadow-toast);
311
- --shadow-switch-thumb: var(--cg-ui-shadow-switch-thumb);
312
- --shadow-segment-thumb: var(--cg-ui-shadow-segment-item);
313
- --shadow-popover: var(--cg-ui-shadow-popover);
314
- --shadow-select: var(--cg-ui-shadow-select);
315
- --shadow-dialog: var(--cg-ui-shadow-dialog);
316
- --shadow-dropdown: var(--cg-ui-shadow-dropdown);
317
- --shadow-thumb: var(--cg-ui-shadow-thumb);
318
-
319
- /* Font sizes, Line heights */
320
- --text-heading: var(--cg-ui-fz-heading);
321
- --text-heading--line-height: var(--cg-ui-lh-heading);
322
-
323
- --text-heading-2: var(--cg-ui-fz-heading-2);
324
- --text-heading-2--line-height: var(--cg-ui-lh-heading-2);
325
-
326
- --text-body: var(--cg-ui-fz-body);
327
- --text-body--line-height: var(--cg-ui-lh-body);
328
-
329
- --text-body-2: var(--cg-ui-fz-body-2);
330
- --text-body-2--line-height: var(--cg-ui-lh-body-2);
331
-
332
- --text-caption: var(--cg-ui-fz-caption);
333
- --text-caption--line-height: var(--cg-ui-lh-caption);
334
-
335
- --text-caption-2: var(--cg-ui-fz-caption-2);
336
- --text-caption-2--line-height: var(--cg-ui-lh-caption-2);
337
- }