@cfx-dev/ui-components 1.0.1 → 1.1.0

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 (61) hide show
  1. package/README.md +38 -38
  2. package/dist/Button.module-Cv-7p0xt.js +16 -0
  3. package/dist/assets/Button.css +1 -1
  4. package/dist/assets/Flex.css +1 -1
  5. package/dist/assets/Flyout.css +1 -1
  6. package/dist/assets/Input.css +1 -1
  7. package/dist/assets/Island.css +1 -1
  8. package/dist/assets/Pad.css +1 -1
  9. package/dist/assets/Popover.css +1 -1
  10. package/dist/assets/RichInput.css +1 -1
  11. package/dist/assets/Spacer.css +1 -1
  12. package/dist/assets/Textarea.css +1 -1
  13. package/dist/assets/global.css +1 -1
  14. package/dist/components/Button/Button.d.ts +1 -1
  15. package/dist/components/Button/Button.js +1 -1
  16. package/dist/components/Button/ButtonBar.js +1 -1
  17. package/dist/components/Flyout/Flyout.js +39 -39
  18. package/dist/components/Input/Input.d.ts +0 -1
  19. package/dist/components/Input/Input.js +58 -61
  20. package/dist/components/Input/RichInput.js +27 -27
  21. package/dist/components/InputDropzone/InputDropzone.js +122 -119
  22. package/dist/components/InputDropzone/ItemPreview.js +1 -1
  23. package/dist/components/Island/Island.js +23 -23
  24. package/dist/components/Layout/Flex/Flex.d.ts +1 -1
  25. package/dist/components/Layout/Flex/Flex.js +44 -43
  26. package/dist/components/Layout/Pad/Pad.d.ts +1 -1
  27. package/dist/components/Layout/Pad/Pad.js +30 -29
  28. package/dist/components/Modal/Modal.d.ts +2 -0
  29. package/dist/components/Modal/Modal.js +25 -23
  30. package/dist/components/Overlay/Overlay.js +13 -13
  31. package/dist/components/Popover/Popover.js +18 -18
  32. package/dist/components/Select/Select.d.ts +1 -1
  33. package/dist/components/Select/Select.js +239 -229
  34. package/dist/components/Spacer/Spacer.d.ts +1 -1
  35. package/dist/components/Spacer/Spacer.js +13 -12
  36. package/dist/components/Table/Table.js +41 -35
  37. package/dist/components/Text/Text.types.d.ts +1 -1
  38. package/dist/components/Textarea/Textarea.d.ts +0 -1
  39. package/dist/components/Textarea/Textarea.js +37 -40
  40. package/dist/iconBase-Bipuk9tK.js +112 -0
  41. package/dist/main.d.ts +1 -1
  42. package/dist/main.js +112 -113
  43. package/dist/style-guide/Icons/IconDisplayGrid.js +3 -3
  44. package/dist/style-guide/Icons/Icons.d.ts +14 -13
  45. package/dist/style-guide/Icons/Icons.js +36 -7
  46. package/dist/style-guide/Icons/NewIcons/UpArrow.d.ts +5 -0
  47. package/dist/style-guide/Icons/NewIcons/UpArrow.js +27 -0
  48. package/dist/styles-scss/_ui.scss +167 -195
  49. package/dist/styles-scss/assets/images/checkered_dark.svg +7 -7
  50. package/dist/styles-scss/assets/images/checkered_light.svg +7 -7
  51. package/dist/styles-scss/global.scss +73 -75
  52. package/dist/styles-scss/theme_dark.scss +24 -24
  53. package/dist/styles-scss/theme_light.scss +54 -54
  54. package/dist/styles-scss/themes.scss +2 -2
  55. package/dist/styles-scss/tokens.scss +272 -274
  56. package/dist/utils/string.d.ts +16 -1
  57. package/dist/utils/string.js +46 -39
  58. package/package.json +71 -72
  59. package/dist/Button.module-Z6njvP9Z.js +0 -17
  60. package/dist/Icons-CIXYyG0c.js +0 -106
  61. package/dist/index.esm-BkynlSN6.js +0 -72
package/dist/styles-scss/tokens.scss CHANGED
@@ -1,274 +1,272 @@
1
- /**
2
- * Look for usages by searching for `ui.color-token('name')`
3
- */
4
- @mixin color-tokens() {
5
- // Asset images
6
- @include ui.def('asset-image-bgpat', url(assets/images/bgpat.png));
7
-
8
- @include ui.def('checkered-pattern', url(assets/images/checkered_dark.svg));
9
- // /Asset images
10
-
11
-
12
- @include ui.define-color-token('shadow-small', rgba(0, 0, 0, .5));
13
- @include ui.def('shadow-small', 0 2.5px 5px ui.color-token('shadow-small'));
14
-
15
- @include ui.define-color-token('shadow-large', rgba(0, 0, 0, .5));
16
- @include ui.def('shadow-large', 0 ui.q(2) ui.q(8) 2px ui.color-token('shadow-large'));
17
-
18
-
19
- @include ui.define-color-token('text', ui.color('main', 950 ));
20
- @include ui.def ('text-opacity-10', .10);
21
- @include ui.define-color-token('text-a10', ui.color('main', 950, .10));
22
- @include ui.def ('text-opacity-25', .25);
23
- @include ui.define-color-token('text-a25', ui.color('main', 950, .25));
24
- @include ui.def ('text-opacity-50', .50);
25
- @include ui.define-color-token('text-a50', ui.color('main', 950, .50));
26
- @include ui.def ('text-opacity-75', .75);
27
- @include ui.define-color-token('text-a75', ui.color('main', 950, .75));
28
-
29
- @include ui.define-color-token('text-warning', ui.color('warning'));
30
-
31
- @include ui.define-color-token('link-hover-decoration', ui.color('main', 950));
32
-
33
- @include ui.define-color-token('li-marker', ui.color('main', 950, .75));
34
-
35
- @include ui.define-color-token('kbd-border', ui.color('main', 300));
36
- @include ui.define-color-token('kbd-background', ui.color('main', 200));
37
-
38
- @include ui.define-color-token('scrollbar', ui.color('main', 950, .1));
39
- @include ui.define-color-token('scrollbar-hover', ui.color('main', 950, .25));
40
- @include ui.define-color-token('scrollbar-active', ui.color('main', 950, .5));
41
-
42
- @include ui.define-color-token('backdrop', ui.color('main', $alpha: .75));
43
- @include ui.define-color-token('backdrop-100', ui.color('main', $alpha: .25));
44
- @include ui.define-color-token('backdrop-200', ui.color('main', $alpha: .5));
45
- @include ui.define-color-token('backdrop-300', ui.color('main', $alpha: .75));
46
-
47
- @include ui.define-color-token('backdrop-shader', ui.color('main', $alpha: .75));
48
-
49
-
50
- // COMPONENTS
51
- @include ui.define-color-token('avatar-background', ui.color('main'));
52
-
53
-
54
- @include ui.define-color-token('badge-text', ui.color('main', 900));
55
- @include ui.define-color-token('badge-border', ui.color('main', 300));
56
- @include ui.define-color-token('badge-background', ui.color('main', 200));
57
-
58
- @include ui.define-color-token('badge-primary-border', ui.color('primary', 50));
59
- @include ui.define-color-token('badge-primary-background', ui.color('primary'));
60
-
61
-
62
- @include ui.define-color-token('button-focus-outline', ui.color('primary', 'pure', .5));
63
-
64
- @include ui.define-color-token('button-text', ui.color('main', 950));
65
- @include ui.define-color-token('button-border', transparent);
66
- @include ui.define-color-token('button-background', ui.color('main', 950, .15));
67
- @include ui.define-color-token('button-hover-border', ui.color('main', 950, .05));
68
- @include ui.define-color-token('button-hover-background', ui.color('main', 950, .1));
69
- @include ui.define-color-token('button-active-border', ui.color('main', 950, .15));
70
- @include ui.define-color-token('button-active-background', transparent);
71
-
72
- @include ui.define-color-token('button-primary-text', ui.color('main', 950));
73
- @include ui.define-color-token('button-primary-border', ui.color('primary'));
74
- @include ui.define-color-token('button-primary-background', ui.color('primary'));
75
- @include ui.define-color-token('button-primary-hover-text', ui.color('main', 950));
76
- @include ui.define-color-token('button-primary-hover-border', ui.color('primary'));
77
- @include ui.define-color-token('button-primary-hover-background', ui.color('primary', 400));
78
- @include ui.define-color-token('button-primary-active-text', ui.color('main', 950));
79
- @include ui.define-color-token('button-primary-active-border', ui.color('primary'));
80
- @include ui.define-color-token('button-primary-active-background', transparent);
81
-
82
-
83
- @include ui.define-color-token('checkbox-focus-outline', ui.color('primary', 'pure', .5));
84
- @include ui.define-color-token('checkbox-indicator', ui.color('main', 800));
85
-
86
- @include ui.define-color-token('checkbox-text', ui.color('main', 950));
87
- @include ui.define-color-token('checkbox-border', ui.color('main', 950, .25));
88
- @include ui.define-color-token('checkbox-background', ui.color('main', 950, .1));
89
- @include ui.define-color-token('checkbox-hover-background', ui.color('main', 950, .05));
90
-
91
-
92
- @include ui.define-color-token('flyout-backdrop-background', ui.color('main', 100, .9));
93
- @include ui.define-color-token('flyout-holder-border', ui.color('main', 100, .25));
94
- @include ui.define-color-token('flyout-holder-blur-background', ui.color('main', 50, .75));
95
- @include ui.define-color-token('flyout-holder-unblur-background', ui.color('main'));
96
-
97
-
98
- @include ui.define-color-token('indicator-bright', ui.color('primary'));
99
- @include ui.define-color-token('indicator-dim', transparent);
100
-
101
-
102
- @include ui.define-color-token('info-panel-border', ui.color('main', 950, .1));
103
- @include ui.define-color-token('info-panel-background', ui.color('main', 950, .1));
104
-
105
- @include ui.define-color-token('info-panel-error-border', ui.color('error', $alpha: .8));
106
- @include ui.define-color-token('info-panel-error-background', ui.color('error', $alpha: .4));
107
-
108
- @include ui.define-color-token('info-panel-success-border', ui.color('success', $alpha: .8));
109
- @include ui.define-color-token('info-panel-success-background', ui.color('success', $alpha: .4));
110
-
111
- @include ui.define-color-token('info-panel-warning-border', ui.color('warning', $alpha: .8));
112
- @include ui.define-color-token('info-panel-warning-background', ui.color('warning', $alpha: .4));
113
-
114
-
115
- @include ui.define-color-token('input-placeholder-text', ui.color('main', 950, .5));
116
- @include ui.define-color-token('input-description-text', ui.color('main', 950, .5));
117
- @include ui.define-color-token('input-label-text', ui.color('main', 950));
118
-
119
- @include ui.define-color-token('input-text', ui.color('main', 950));
120
- @include ui.define-color-token('input-background', ui.color('main', 950, .1));
121
-
122
- @include ui.define-color-token('input-border', ui.color('main', 950, .25));
123
- @include ui.define-color-token('input-hover-border', ui.color('main', 950, .5));
124
- @include ui.define-color-token('input-focus-border', ui.color('primary'));
125
-
126
- @include ui.define-color-token('input-disabled-border', ui.color('main', 950, .05));
127
- @include ui.define-color-token('input-disabled-label-text', ui.color('main', 950, .5));
128
-
129
-
130
- @include ui.define-color-token('island-border', ui.color('main', 50, .25));
131
- @include ui.define-color-token('island-blur-background', ui.color('main', 50, .75));
132
- @include ui.define-color-token('island-unblur-background', ui.color('main', 50, .95));
133
-
134
-
135
- @include ui.define-color-token('loaf-text', ui.color('main', 950, .5));
136
- @include ui.define-color-token('loaf-background', ui.color('main', 950, .05));
137
- @include ui.define-color-token('loaf-bright-text', ui.color('main', 950));
138
-
139
- @include ui.define-color-token('loaf-gold-text', ui.color('aurum', 500, .5));
140
- @include ui.define-color-token('loaf-gold-background', ui.color('main', 950, .05));
141
- @include ui.define-color-token('loaf-gold-bright-text', ui.color('aurum', 500));
142
-
143
- @include ui.define-color-token('loaf-error-text', ui.color('error', 500));
144
- @include ui.define-color-token('loaf-error-background', ui.color('error', 500, .15));
145
- @include ui.define-color-token('loaf-error-bright-text', ui.color('error', 500));
146
-
147
-
148
- @include ui.define-color-token('modal-border', ui.color('main', 950, .15));
149
- @include ui.define-color-token('modal-background', ui.color('main'));
150
- @include ui.define-color-token('modal-footer-background', ui.color('main', 50, .95));
151
-
152
-
153
- @include ui.define-color-token('navlist-item-border', ui.color('main', 950, .1));
154
- @include ui.define-color-token('navlist-item-background', transparent);
155
- @include ui.define-color-token('navlist-item-active-border', transparent);
156
- @include ui.define-color-token('navlist-item-active-background', ui.color('main', 950, .1));
157
- @include ui.define-color-token('navlist-item-hover-border', transparent);
158
- @include ui.define-color-token('navlist-item-hover-background', ui.color('main', 950, .2));
159
-
160
-
161
- @include ui.define-color-token('overlay-backdrop-background', ui.color('main', 50, .95));
162
-
163
-
164
- @include ui.define-color-token('popover-background', ui.color('main', 50));
165
-
166
-
167
- @include ui.define-color-token('premium-badge-text', ui.color('main', 'pure'));
168
- @include ui.define-color-token('premium-badge-background', ui.color('main'));
169
-
170
- @include ui.define-color-token('premium-badge-pt-gradient-1', darken(#f50551, 15%));
171
- @include ui.define-color-token('premium-badge-pt-gradient-2', #f50551);
172
-
173
- @include ui.define-color-token('premium-badge-au-gradient-1', ui.color('aurum', 200));
174
- @include ui.define-color-token('premium-badge-au-gradient-2', ui.color('aurum', 'pure', 1));
175
-
176
- @include ui.define-color-token('premium-badge-ag-gradient-1', ui.color('silver', 200));
177
- @include ui.define-color-token('premium-badge-ag-gradient-2', ui.color('silver', 'pure', 1));
178
-
179
-
180
- @include ui.define-color-token('select-option-background', ui.color('main'));
181
- @include ui.define-color-token('select-text', ui.color('main', 950));
182
- @include ui.define-color-token('select-background', ui.color('main', 950, .1));
183
- @include ui.define-color-token('select-border', ui.color('main', 950, .25));
184
-
185
- @include ui.define-color-token('select-hover-border', ui.color('main', 950, .5));
186
- @include ui.define-color-token('select-focus-border', ui.color('primary'));
187
-
188
-
189
- @include ui.define-color-token('separator-text', ui.color('main', 950, .25));
190
- @include ui.define-color-token('separator-background', ui.color('main', 950, .1));
191
-
192
-
193
- @include ui.define-color-token('switch-description-text', ui.color('main', 950, .5));
194
- @include ui.define-color-token('switch-border', ui.color('main', 950, .25));
195
- @include ui.define-color-token('switch-background', ui.color('main', 950, .1));
196
-
197
- @include ui.define-color-token('switch-hover-background', ui.color('main', 200));
198
-
199
- @include ui.define-color-token('switch-active-text', ui.color('main'));
200
- @include ui.define-color-token('switch-active-background', ui.color('main', 950, .75));
201
-
202
-
203
- @include ui.define-color-token('title-text', ui.color('main'));
204
- @include ui.define-color-token('title-background', ui.color('main', 950));
205
-
206
-
207
- @include ui.define-color-token('server-icon-loader-background', ui.color('main', $alpha: .5));
208
-
209
-
210
- @include ui.define-color-token('server-banner-background-from', ui.color('main', $alpha: .75));
211
- @include ui.define-color-token('server-banner-background-to', ui.color('main', $alpha: .95));
212
-
213
-
214
- @include ui.define-color-token('server-review-background', ui.color('main', 'pure', .5));
215
- @include ui.define-color-token('server-review-form-background', ui.color('main', 100, .5));
216
-
217
-
218
- @include ui.define-color-token('server-item-border', ui.color('main', 100, 1));
219
- @include ui.define-color-token('server-item-description-text', ui.color('main', 950, .5));
220
- @include ui.define-color-token('server-item-players-text', ui.color('main', 950, .5));
221
-
222
- @include ui.define-color-token('server-item-standalone-background', ui.color('main', 'pure'));
223
- @include ui.define-color-token('server-item-standalone-hover-background', ui.color('main', 50));
224
-
225
- @include ui.define-color-token('server-item-background', ui.color('main', 'pure', .5));
226
- @include ui.define-color-token('server-item-hover-background', ui.color('main', 50, .5));
227
-
228
- @include ui.define-color-token('server-item-platinum-background', ui.color('primary', 'pure', .1));
229
-
230
- @include ui.define-color-token('server-item-density-background-from', ui.color('success'));
231
- @include ui.define-color-token('server-item-density-background-via', ui.color('warning'));
232
- @include ui.define-color-token('server-item-density-background-to', ui.color('error'));
233
-
234
-
235
- @include ui.define-color-token('server-filters-sort-item-background', transparent);
236
- @include ui.define-color-token('server-filters-sort-item-hover-background', ui.color('main', 'pure', 1));
237
- @include ui.define-color-token('server-filters-sort-item-active-background', ui.color('main', 'pure', .5));
238
-
239
- @include ui.define-color-token('server-filters-faucet-background', transparent);
240
- @include ui.define-color-token('server-filters-faucet-hover-background', ui.color('main', 200, .5));
241
- @include ui.define-color-token('server-filters-faucet-inclusive-background', ui.color('success', $alpha: .5));
242
- @include ui.define-color-token('server-filters-faucet-inclusive-hover-background', ui.color('success', $alpha: .4));
243
- @include ui.define-color-token('server-filters-faucet-exclusive-background', ui.color('error', $alpha: .5));
244
- @include ui.define-color-token('server-filters-faucet-exclusive-hover-background', ui.color('error', $alpha: .4));
245
-
246
-
247
- @include ui.define-color-token('platform-status-background', ui.color('bg', 'pure', .5));
248
- @include ui.define-color-token('platform-status-border', transparent);
249
- @include ui.define-color-token('platform-status-shadow', transparent);
250
- @include ui.define-color-token('platform-status-warning-border', ui.color('warning'));
251
- @include ui.define-color-token('platform-status-warning-shadow', ui.color('warning', 'pure', .25));
252
- @include ui.define-color-token('platform-status-error-border', ui.color('error'));
253
- @include ui.define-color-token('platform-status-error-shadow', ui.color('primary', 'pure', .5));
254
-
255
-
256
- @include ui.define-color-token('interactive-list-background', ui.color('main', 100, 1));
257
- @include ui.define-color-token('interactive-list-item-background', transparent);
258
- @include ui.define-color-token('interactive-list-item-hover-background', ui.color('main', 200, 1));
259
- @include ui.define-color-token('interactive-list-item-active-background', ui.color('main', 200, .5));
260
-
261
-
262
- @include ui.define-color-token('carousel-selector-item-progress-background', ui.color('main', 500, .25));
263
-
264
-
265
- @include ui.define-color-token('outlined-hover-border', ui.color('main', 500, .25));
266
-
267
-
268
- @include ui.define-color-token('tabular-item-decorator-active-background', ui.color('main', 950, .5));
269
- @include ui.define-color-token('tabular-item-decorator-hover-background', ui.color('main', 950, .1));
270
-
271
-
272
- @include ui.define-color-token('play-button-background-1', rgba(255, 143, 178, 1));
273
- @include ui.define-color-token('play-button-background-2', rgba(170, 49, 146, 1));
274
- }
1
+ /**
2
+ * Look for usages by searching for `ui.color-token('name')`
3
+ */
4
+ @mixin color-tokens() {
5
+ // Asset images
6
+ @include ui.def('asset-image-bgpat', url(assets/images/bgpat.png));
7
+
8
+ @include ui.def('checkered-pattern', url(assets/images/checkered_dark.svg));
9
+ // /Asset images
10
+
11
+
12
+ @include ui.define-color-token('shadow-small', rgba(0, 0, 0, .5));
13
+ @include ui.def('shadow-small', 0 2.5px 5px ui.color-token('shadow-small'));
14
+
15
+ @include ui.define-color-token('shadow-large', rgba(0, 0, 0, .5));
16
+ @include ui.def('shadow-large', 0 ui.q(2) ui.q(8) 2px ui.color-token('shadow-large'));
17
+
18
+
19
+ @include ui.define-color-token('text', ui.color('main', 950 ));
20
+ @include ui.def ('text-opacity-10', .10);
21
+ @include ui.define-color-token('text-a10', ui.color('main', 950, .10));
22
+ @include ui.def ('text-opacity-25', .25);
23
+ @include ui.define-color-token('text-a25', ui.color('main', 950, .25));
24
+ @include ui.def ('text-opacity-50', .50);
25
+ @include ui.define-color-token('text-a50', ui.color('main', 950, .50));
26
+ @include ui.def ('text-opacity-75', .75);
27
+ @include ui.define-color-token('text-a75', ui.color('main', 950, .75));
28
+
29
+ @include ui.define-color-token('text-warning', ui.color('warning'));
30
+
31
+ @include ui.define-color-token('link-hover-decoration', ui.color('main', 950));
32
+
33
+ @include ui.define-color-token('li-marker', ui.color('main', 950, .75));
34
+
35
+ @include ui.define-color-token('kbd-border', ui.color('main', 300));
36
+ @include ui.define-color-token('kbd-background', ui.color('main', 200));
37
+
38
+ @include ui.define-color-token('scrollbar', ui.color('main', 950, .1));
39
+ @include ui.define-color-token('scrollbar-hover', ui.color('main', 950, .25));
40
+ @include ui.define-color-token('scrollbar-active', ui.color('main', 950, .5));
41
+
42
+ @include ui.define-color-token('backdrop', ui.color('main', $alpha: .75));
43
+ @include ui.define-color-token('backdrop-100', ui.color('main', $alpha: .25));
44
+ @include ui.define-color-token('backdrop-200', ui.color('main', $alpha: .5));
45
+ @include ui.define-color-token('backdrop-300', ui.color('main', $alpha: .75));
46
+
47
+ @include ui.define-color-token('backdrop-shader', ui.color('main', $alpha: .75));
48
+
49
+
50
+ // COMPONENTS
51
+ @include ui.define-color-token('avatar-background', ui.color('main'));
52
+
53
+
54
+ @include ui.define-color-token('badge-text', ui.color('main', 900));
55
+ @include ui.define-color-token('badge-border', ui.color('main', 300));
56
+ @include ui.define-color-token('badge-background', ui.color('main', 200));
57
+
58
+ @include ui.define-color-token('badge-primary-border', ui.color('primary', 50));
59
+ @include ui.define-color-token('badge-primary-background', ui.color('primary'));
60
+
61
+
62
+ @include ui.define-color-token('button-focus-outline', ui.color('primary', 'pure', .5));
63
+
64
+ @include ui.define-color-token('button-text', ui.color('main', 950));
65
+ @include ui.define-color-token('button-border', transparent);
66
+ @include ui.define-color-token('button-background', ui.color('main', 950, .15));
67
+ @include ui.define-color-token('button-hover-border', ui.color('main', 950, .05));
68
+ @include ui.define-color-token('button-hover-background', ui.color('main', 950, .1));
69
+ @include ui.define-color-token('button-active-border', ui.color('main', 950, .15));
70
+ @include ui.define-color-token('button-active-background', transparent);
71
+
72
+ @include ui.define-color-token('button-primary-text', ui.color('main', 950));
73
+ @include ui.define-color-token('button-primary-border', ui.color('primary'));
74
+ @include ui.define-color-token('button-primary-background', ui.color('primary'));
75
+ @include ui.define-color-token('button-primary-hover-text', ui.color('main', 950));
76
+ @include ui.define-color-token('button-primary-hover-border', ui.color('primary'));
77
+ @include ui.define-color-token('button-primary-hover-background', ui.color('primary', 400));
78
+ @include ui.define-color-token('button-primary-active-text', ui.color('main', 950));
79
+ @include ui.define-color-token('button-primary-active-border', ui.color('primary'));
80
+ @include ui.define-color-token('button-primary-active-background', transparent);
81
+
82
+
83
+ @include ui.define-color-token('checkbox-focus-outline', ui.color('primary', 'pure', .5));
84
+ @include ui.define-color-token('checkbox-indicator', ui.color('main', 800));
85
+
86
+ @include ui.define-color-token('checkbox-text', ui.color('main', 950));
87
+ @include ui.define-color-token('checkbox-border', ui.color('main', 950, .25));
88
+ @include ui.define-color-token('checkbox-background', ui.color('main', 950, .1));
89
+ @include ui.define-color-token('checkbox-hover-background', ui.color('main', 950, .05));
90
+
91
+
92
+ @include ui.define-color-token('flyout-backdrop-background', ui.color('main', 100, .9));
93
+ @include ui.define-color-token('flyout-holder-border', ui.color('main', 100, .25));
94
+ @include ui.define-color-token('flyout-holder-blur-background', ui.color('main', 50));
95
+ @include ui.define-color-token('flyout-holder-unblur-background', ui.color('main'));
96
+
97
+
98
+ @include ui.define-color-token('indicator-bright', ui.color('primary'));
99
+ @include ui.define-color-token('indicator-dim', transparent);
100
+
101
+
102
+ @include ui.define-color-token('info-panel-border', ui.color('main', 950, .1));
103
+ @include ui.define-color-token('info-panel-background', ui.color('main', 950, .1));
104
+
105
+ @include ui.define-color-token('info-panel-error-border', ui.color('error', $alpha: .8));
106
+ @include ui.define-color-token('info-panel-error-background', ui.color('error', $alpha: .4));
107
+
108
+ @include ui.define-color-token('info-panel-success-border', ui.color('success', $alpha: .8));
109
+ @include ui.define-color-token('info-panel-success-background', ui.color('success', $alpha: .4));
110
+
111
+ @include ui.define-color-token('info-panel-warning-border', ui.color('warning', $alpha: .8));
112
+ @include ui.define-color-token('info-panel-warning-background', ui.color('warning', $alpha: .4));
113
+
114
+
115
+ @include ui.define-color-token('input-placeholder-text', ui.color('main', 950, .5));
116
+ @include ui.define-color-token('input-description-text', ui.color('main', 950, .5));
117
+ @include ui.define-color-token('input-label-text', ui.color('main', 950));
118
+
119
+ @include ui.define-color-token('input-text', ui.color('main', 950));
120
+ @include ui.define-color-token('input-background', ui.color('main', 950, .1));
121
+
122
+ @include ui.define-color-token('input-border', ui.color('main', 950, .25));
123
+ @include ui.define-color-token('input-hover-border', ui.color('main', 950, .5));
124
+ @include ui.define-color-token('input-focus-border', ui.color('primary'));
125
+
126
+ @include ui.define-color-token('input-disabled-border', ui.color('main', 950, .05));
127
+ @include ui.define-color-token('input-disabled-label-text', ui.color('main', 950, .5));
128
+
129
+
130
+ @include ui.define-color-token('island-background', ui.color('main', 50));
131
+
132
+
133
+ @include ui.define-color-token('loaf-text', ui.color('main', 950, .5));
134
+ @include ui.define-color-token('loaf-background', ui.color('main', 950, .05));
135
+ @include ui.define-color-token('loaf-bright-text', ui.color('main', 950));
136
+
137
+ @include ui.define-color-token('loaf-gold-text', ui.color('aurum', 500, .5));
138
+ @include ui.define-color-token('loaf-gold-background', ui.color('main', 950, .05));
139
+ @include ui.define-color-token('loaf-gold-bright-text', ui.color('aurum', 500));
140
+
141
+ @include ui.define-color-token('loaf-error-text', ui.color('error', 500));
142
+ @include ui.define-color-token('loaf-error-background', ui.color('error', 500, .15));
143
+ @include ui.define-color-token('loaf-error-bright-text', ui.color('error', 500));
144
+
145
+
146
+ @include ui.define-color-token('modal-border', ui.color('main', 950, .15));
147
+ @include ui.define-color-token('modal-background', ui.color('main'));
148
+ @include ui.define-color-token('modal-footer-background', ui.color('main', 50, .95));
149
+
150
+
151
+ @include ui.define-color-token('navlist-item-border', ui.color('main', 950, .1));
152
+ @include ui.define-color-token('navlist-item-background', transparent);
153
+ @include ui.define-color-token('navlist-item-active-border', transparent);
154
+ @include ui.define-color-token('navlist-item-active-background', ui.color('main', 950, .1));
155
+ @include ui.define-color-token('navlist-item-hover-border', transparent);
156
+ @include ui.define-color-token('navlist-item-hover-background', ui.color('main', 950, .2));
157
+
158
+
159
+ @include ui.define-color-token('overlay-backdrop-background', ui.color('main', 50, .95));
160
+
161
+
162
+ @include ui.define-color-token('popover-background', ui.color('main', 50));
163
+
164
+
165
+ @include ui.define-color-token('premium-badge-text', ui.color('main', 'pure'));
166
+ @include ui.define-color-token('premium-badge-background', ui.color('main'));
167
+
168
+ @include ui.define-color-token('premium-badge-pt-gradient-1', darken(#f50551, 15%));
169
+ @include ui.define-color-token('premium-badge-pt-gradient-2', #f50551);
170
+
171
+ @include ui.define-color-token('premium-badge-au-gradient-1', ui.color('aurum', 200));
172
+ @include ui.define-color-token('premium-badge-au-gradient-2', ui.color('aurum', 'pure', 1));
173
+
174
+ @include ui.define-color-token('premium-badge-ag-gradient-1', ui.color('silver', 200));
175
+ @include ui.define-color-token('premium-badge-ag-gradient-2', ui.color('silver', 'pure', 1));
176
+
177
+
178
+ @include ui.define-color-token('select-option-background', ui.color('main'));
179
+ @include ui.define-color-token('select-text', ui.color('main', 950));
180
+ @include ui.define-color-token('select-background', ui.color('main', 950, .1));
181
+ @include ui.define-color-token('select-border', ui.color('main', 950, .25));
182
+
183
+ @include ui.define-color-token('select-hover-border', ui.color('main', 950, .5));
184
+ @include ui.define-color-token('select-focus-border', ui.color('primary'));
185
+
186
+
187
+ @include ui.define-color-token('separator-text', ui.color('main', 950, .25));
188
+ @include ui.define-color-token('separator-background', ui.color('main', 950, .1));
189
+
190
+
191
+ @include ui.define-color-token('switch-description-text', ui.color('main', 950, .5));
192
+ @include ui.define-color-token('switch-border', ui.color('main', 950, .25));
193
+ @include ui.define-color-token('switch-background', ui.color('main', 950, .1));
194
+
195
+ @include ui.define-color-token('switch-hover-background', ui.color('main', 200));
196
+
197
+ @include ui.define-color-token('switch-active-text', ui.color('main'));
198
+ @include ui.define-color-token('switch-active-background', ui.color('main', 950, .75));
199
+
200
+
201
+ @include ui.define-color-token('title-text', ui.color('main'));
202
+ @include ui.define-color-token('title-background', ui.color('main', 950));
203
+
204
+
205
+ @include ui.define-color-token('server-icon-loader-background', ui.color('main', $alpha: .5));
206
+
207
+
208
+ @include ui.define-color-token('server-banner-background-from', ui.color('main', $alpha: .75));
209
+ @include ui.define-color-token('server-banner-background-to', ui.color('main', $alpha: .95));
210
+
211
+
212
+ @include ui.define-color-token('server-review-background', ui.color('main', 'pure', .5));
213
+ @include ui.define-color-token('server-review-form-background', ui.color('main', 100, .5));
214
+
215
+
216
+ @include ui.define-color-token('server-item-border', ui.color('main', 100, 1));
217
+ @include ui.define-color-token('server-item-description-text', ui.color('main', 950, .5));
218
+ @include ui.define-color-token('server-item-players-text', ui.color('main', 950, .5));
219
+
220
+ @include ui.define-color-token('server-item-standalone-background', ui.color('main'));
221
+ @include ui.define-color-token('server-item-standalone-hover-background', ui.color('main', 100));
222
+
223
+ @include ui.define-color-token('server-item-background', transparent);
224
+ @include ui.define-color-token('server-item-hover-background', ui.color('main', 100));
225
+
226
+ @include ui.define-color-token('server-item-platinum-background', ui.color('primary', 'pure', .1));
227
+
228
+ @include ui.define-color-token('server-item-density-background-from', ui.color('success'));
229
+ @include ui.define-color-token('server-item-density-background-via', ui.color('warning'));
230
+ @include ui.define-color-token('server-item-density-background-to', ui.color('error'));
231
+
232
+
233
+ @include ui.define-color-token('server-filters-sort-item-background', transparent);
234
+ @include ui.define-color-token('server-filters-sort-item-hover-background', ui.color('main', 'pure', 1));
235
+ @include ui.define-color-token('server-filters-sort-item-active-background', ui.color('main', 'pure', .5));
236
+
237
+ @include ui.define-color-token('server-filters-faucet-background', transparent);
238
+ @include ui.define-color-token('server-filters-faucet-hover-background', ui.color('main', 200, .5));
239
+ @include ui.define-color-token('server-filters-faucet-inclusive-background', ui.color('success', $alpha: .5));
240
+ @include ui.define-color-token('server-filters-faucet-inclusive-hover-background', ui.color('success', $alpha: .4));
241
+ @include ui.define-color-token('server-filters-faucet-exclusive-background', ui.color('error', $alpha: .5));
242
+ @include ui.define-color-token('server-filters-faucet-exclusive-hover-background', ui.color('error', $alpha: .4));
243
+
244
+
245
+ @include ui.define-color-token('platform-status-background', ui.color('bg', 'pure', .5));
246
+ @include ui.define-color-token('platform-status-border', transparent);
247
+ @include ui.define-color-token('platform-status-shadow', transparent);
248
+ @include ui.define-color-token('platform-status-warning-border', ui.color('warning'));
249
+ @include ui.define-color-token('platform-status-warning-shadow', ui.color('warning', 'pure', .25));
250
+ @include ui.define-color-token('platform-status-error-border', ui.color('error'));
251
+ @include ui.define-color-token('platform-status-error-shadow', ui.color('primary', 'pure', .5));
252
+
253
+
254
+ @include ui.define-color-token('interactive-list-background', ui.color('main', 100, 1));
255
+ @include ui.define-color-token('interactive-list-item-background', transparent);
256
+ @include ui.define-color-token('interactive-list-item-hover-background', ui.color('main', 200, 1));
257
+ @include ui.define-color-token('interactive-list-item-active-background', ui.color('main', 200, .5));
258
+
259
+
260
+ @include ui.define-color-token('carousel-selector-item-progress-background', ui.color('main', 500, .25));
261
+
262
+
263
+ @include ui.define-color-token('outlined-hover-border', ui.color('main', 500, .25));
264
+
265
+
266
+ @include ui.define-color-token('tabular-item-decorator-active-background', ui.color('main', 950, .5));
267
+ @include ui.define-color-token('tabular-item-decorator-hover-background', ui.color('main', 950, .1));
268
+
269
+
270
+ @include ui.define-color-token('play-button-background-1', rgba(255, 143, 178, 1));
271
+ @include ui.define-color-token('play-button-background-2', rgba(170, 49, 146, 1));
272
+ }
package/dist/utils/string.d.ts CHANGED
@@ -1,4 +1,19 @@
1
- export declare function unicodeCharAt(string: string, index: number): string;
1
+ export declare const CHAR_REGEX: RegExp;
2
+ /**
3
+ * Splits the input `text` into parts based on the provided `indices`.
4
+ *
5
+ * Each index in `indices` indicates a position in the string where a split should occur.
6
+ *
7
+ * If `unicodeIndices` is set to `true`, the function will correctly handle Unicode characters.
8
+ *
9
+ * TODO(aleksandr.kukhta): correctly split zalgo-ified text, if that's even possible
10
+ *
11
+ * For example:
12
+ * ```ts
13
+ * const result = splitByIndices('hello world', [5]);
14
+ * // result will be Map { 0 => 'hello', 5 => ' world' }
15
+ * ```
16
+ */
2
17
  export declare function splitByIndices(text: string, indices: number[], unicodeIndices?: boolean): Map<number, string>;
3
18
  export declare function replaceRange(str: string, replacement: string, start: number, end: number): string;
4
19
  export declare function normalizeSlashes(str: string): string;