@cfx-dev/ui-components 4.3.7 → 4.3.9

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 (36) hide show
  1. package/dist/{Combination-BGYCZNoJ.js → Combination-DFb92tMK.js} +658 -655
  2. package/dist/assets/css/ToggleGroup.css +1 -1
  3. package/dist/assets/general/global.css +1 -1
  4. package/dist/assets/general/themes.css +1 -1
  5. package/dist/components/Accordion/AccordionShowcase.js +21 -9
  6. package/dist/components/Button/ButtonBar.d.ts +2 -0
  7. package/dist/components/Checkbox/Checkbox.js +2 -2
  8. package/dist/components/Dot/Dot.js +6 -4
  9. package/dist/components/DropdownSelect/DropdownSelect.js +4 -4
  10. package/dist/components/Link/LinkShowcase.js +8 -4
  11. package/dist/components/Modal/ModalShowcase.js +2 -1
  12. package/dist/components/Prose/Prose.d.ts +1 -2
  13. package/dist/components/Select/Select.js +3 -3
  14. package/dist/components/Skeleton/SkeletonShowcase.js +3 -2
  15. package/dist/components/Slider/Slider.js +2 -2
  16. package/dist/components/Switch/Switch.js +1 -1
  17. package/dist/components/Text/Text.types.d.ts +1 -0
  18. package/dist/components/Text/TextShowcase.js +1 -1
  19. package/dist/components/Title/Title.js +9 -4
  20. package/dist/{index-DlJ4qUbZ.js → index-BMU9X4M-.js} +1 -1
  21. package/dist/index-DCuJlMqr.js +239 -0
  22. package/dist/{index-CriGVLlo.js → index-DWzyrn_L.js} +1 -1
  23. package/dist/styles-scss/_colors.scss +50 -51
  24. package/dist/styles-scss/_typography.scss +25 -20
  25. package/dist/styles-scss/_ui.scss +115 -98
  26. package/dist/styles-scss/global.scss +13 -8
  27. package/dist/styles-scss/themes/theme_cfx.scss +15 -15
  28. package/dist/styles-scss/themes/theme_fivem.scss +12 -12
  29. package/dist/styles-scss/themes/theme_redm.scss +12 -12
  30. package/dist/styles-scss/themes/theme_wireframe.scss +12 -12
  31. package/dist/styles-scss/themes.scss +4 -4
  32. package/dist/styles-scss/tokens.scss +117 -118
  33. package/dist/utils/hooks/useClipboardComponent.d.ts +4 -1
  34. package/dist/utils/ui/ui.d.ts +2 -1
  35. package/package.json +5 -5
  36. package/dist/index-ByKwkZKY.js +0 -239
package/dist/styles-scss/tokens.scss CHANGED
@@ -1,5 +1,5 @@
1
- @use "sass:map";
2
- @use "ui";
1
+ @use 'sass:map';
2
+ @use 'ui';
3
3
 
4
4
  @mixin zindex-tokens() {
5
5
  @each $name, $value in ui.$zindexMap {
@@ -30,8 +30,8 @@
30
30
  }
31
31
 
32
32
  @mixin anchor-tokens() {
33
- @include ui.define-color-token('anchor-focus-outline', ui.color('primary', $alpha: .5));
34
- @include ui.def('anchor-outline-size', ui.q(.25));
33
+ @include ui.define-color-token('anchor-focus-outline', ui.color('primary', $alpha: 0.5));
34
+ @include ui.def('anchor-outline-size', ui.q(0.25));
35
35
  }
36
36
 
37
37
  @mixin border-radius-tokens() {
@@ -41,36 +41,36 @@
41
41
  }
42
42
 
43
43
  @mixin text-tokens() {
44
- @include ui.define-font-size('xxsmall', ui.q(1.875), 1.5);
45
- @include ui.define-font-size('xsmall', ui.q(2.25), 1.5);
46
- @include ui.define-font-size('small', ui.q(2.5), 1.5);
44
+ @include ui.define-font-size('xxsmall', ui.q(1.875), 1.5);
45
+ @include ui.define-font-size('xsmall', ui.q(2.25), 1.5);
46
+ @include ui.define-font-size('small', ui.q(2.5), 1.5);
47
47
 
48
48
  // normal is mirroring small, becouse it's the default size
49
- @include ui.define-font-size('normal', ui.q(2.5), 1.5);
50
- @include ui.define-font-size('medium', ui.q(3.125), 1.3);
51
- @include ui.define-font-size('large', ui.q(3.75), 1.3);
52
- @include ui.define-font-size('xlarge', ui.q(5), 1.3);
53
- @include ui.define-font-size('xxlarge', ui.q(6.25), 1.3);
54
- @include ui.define-font-size('xxxlarge', ui.q(8.75), 1.15);
55
- @include ui.def('font-weight-thin', 100);
56
- @include ui.def('font-weight-small', 300);
57
- @include ui.def('font-weight-normal', 400);
58
- @include ui.def('font-weight-bold', 700);
59
- @include ui.def('font-weight-bolder', 800);
60
- @include ui.def('font-weight-boldest', 900);
61
- @include ui.def('letter-spacing-normal', -0.025em);
62
- @include ui.def('letter-spacing-large', 0);
49
+ @include ui.define-font-size('normal', ui.q(2.5), 1.5);
50
+ @include ui.define-font-size('medium', ui.q(3.125), 1.3);
51
+ @include ui.define-font-size('large', ui.q(3.75), 1.3);
52
+ @include ui.define-font-size('xlarge', ui.q(5), 1.3);
53
+ @include ui.define-font-size('xxlarge', ui.q(6.25), 1.3);
54
+ @include ui.define-font-size('xxxlarge', ui.q(8.75), 1.15);
55
+ @include ui.def('font-weight-thin', 100);
56
+ @include ui.def('font-weight-small', 300);
57
+ @include ui.def('font-weight-normal', 400);
58
+ @include ui.def('font-weight-bold', 700);
59
+ @include ui.def('font-weight-bolder', 800);
60
+ @include ui.def('font-weight-boldest', 900);
61
+ @include ui.def('letter-spacing-normal', -0.025em);
62
+ @include ui.def('letter-spacing-large', 0);
63
63
  @include ui.def('font-family-primary', 'HelveticaNowText');
64
64
  @include ui.def('font-family-secondary', 'HelveticaNowDisplay');
65
- @include ui.define-color-token('text', ui.color('primary', 'pure' ));
66
- @include ui.def ('text-opacity-10', .10);
67
- @include ui.define-color-token('text-a10', ui.color('primary', $alpha: .10));
68
- @include ui.def ('text-opacity-25', .25);
69
- @include ui.define-color-token('text-a25', ui.color('primary', $alpha: .25));
70
- @include ui.def ('text-opacity-50', .50);
71
- @include ui.define-color-token('text-a50', ui.color('primary', $alpha: .50));
72
- @include ui.def ('text-opacity-75', .75);
73
- @include ui.define-color-token('text-a75', ui.color('primary', $alpha: .75));
65
+ @include ui.define-color-token('text', ui.color('primary', 'pure'));
66
+ @include ui.def('text-opacity-10', 0.1);
67
+ @include ui.define-color-token('text-a10', ui.color('primary', $alpha: 0.1));
68
+ @include ui.def('text-opacity-25', 0.25);
69
+ @include ui.define-color-token('text-a25', ui.color('primary', $alpha: 0.25));
70
+ @include ui.def('text-opacity-50', 0.5);
71
+ @include ui.define-color-token('text-a50', ui.color('primary', $alpha: 0.5));
72
+ @include ui.def('text-opacity-75', 0.75);
73
+ @include ui.define-color-token('text-a75', ui.color('primary', $alpha: 0.75));
74
74
  }
75
75
 
76
76
  @mixin offset-tokens() {
@@ -80,7 +80,7 @@
80
80
  }
81
81
 
82
82
  @mixin control-tokens() {
83
- @include ui.define-color-token('control-focus-outline', ui.color('primary', $alpha: .5));
83
+ @include ui.define-color-token('control-focus-outline', ui.color('primary', $alpha: 0.5));
84
84
 
85
85
  @each $name, $value in ui.$controlHeightsMap {
86
86
  @include ui.def('control-height-#{$name}', $value);
@@ -91,49 +91,49 @@
91
91
 
92
92
  @mixin checkbox-tokens() {
93
93
  @include ui.define-color-token('checkbox-focus-border-color', ui.color('primary'));
94
- @include ui.def('checkbox-focus-border-size', ui.q(.25));
94
+ @include ui.def('checkbox-focus-border-size', ui.q(0.25));
95
95
  }
96
96
 
97
97
  @mixin switch-tokens() {
98
98
  @include ui.define-color-token('switch-focus-border-color', ui.color('primary'));
99
- @include ui.def('switch-focus-border-size', ui.q(.25));
99
+ @include ui.def('switch-focus-border-size', ui.q(0.25));
100
100
  }
101
101
 
102
102
  @mixin input-dropzone-tokens() {
103
103
  @include ui.define-color-token('dropzone-focus-border-color', ui.color('primary'));
104
- @include ui.def('dropzone-focus-border-size', ui.q(.25));
104
+ @include ui.def('dropzone-focus-border-size', ui.q(0.25));
105
105
  @include ui.define-color-token('dropzone-border-color', ui.color('bg-light'));
106
106
  @include ui.def('dropzone-border-size', 1px);
107
107
  }
108
108
 
109
109
  @mixin input-tokens() {
110
- @include ui.define-color-token('input-placeholder', ui.color('primary', $alpha: .4));
111
- @include ui.define-color-token('input-placeholder-hover', ui.color('primary', $alpha: .6));
110
+ @include ui.define-color-token('input-placeholder', ui.color('primary', $alpha: 0.4));
111
+ @include ui.define-color-token('input-placeholder-hover', ui.color('primary', $alpha: 0.6));
112
112
  @include ui.define-color-token('input-text', ui.color('primary'));
113
113
  @include ui.define-color-token('input-background', ui.color('bg'));
114
114
  @include ui.def('input-border-size', 1px);
115
115
  @include ui.define-color-token('input-border', ui.color('bg-light'));
116
- @include ui.define-color-token('input-hover-border', ui.color('primary', $alpha: .1));
116
+ @include ui.define-color-token('input-hover-border', ui.color('primary', $alpha: 0.1));
117
117
  @include ui.define-color-token('input-focus-border', ui.color('bg-dark'));
118
118
  @include ui.define-color-token('input-disabled-border', ui.color('bg-light'));
119
- @include ui.define-color-token('input-onlight-border', ui.color('primary', $alpha: .1));
120
- @include ui.define-color-token('input-onlight-hover-border', ui.color('primary', $alpha: .2));
121
- @include ui.define-color-token('input-onlight-focus-border', ui.color('primary', $alpha: .2));
122
- @include ui.define-color-token('input-onlight-disabled-border', ui.color('primary', $alpha: .1));
119
+ @include ui.define-color-token('input-onlight-border', ui.color('primary', $alpha: 0.1));
120
+ @include ui.define-color-token('input-onlight-hover-border', ui.color('primary', $alpha: 0.2));
121
+ @include ui.define-color-token('input-onlight-focus-border', ui.color('primary', $alpha: 0.2));
122
+ @include ui.define-color-token('input-onlight-disabled-border', ui.color('primary', $alpha: 0.1));
123
123
  }
124
124
 
125
125
  @mixin accordion-tokens() {
126
- @include ui.define-color-token('accordion-border-color', ui.color('secondary', $alpha: .1));
126
+ @include ui.define-color-token('accordion-border-color', ui.color('secondary', $alpha: 0.1));
127
127
  @include ui.define-color-token('accordion-border-hover-color', ui.color('primary'));
128
128
  @include ui.def('accordion-border-size', 1px);
129
- @include ui.def('accordion-border-hover-size', ui.q(.25));
129
+ @include ui.def('accordion-border-hover-size', ui.q(0.25));
130
130
  }
131
131
 
132
132
  @mixin select-tokens() {
133
133
  @include ui.define-color-token('interactive-list-background', ui.color('bg-light'));
134
134
  @include ui.define-color-token('interactive-list-item-background', transparent);
135
135
  @include ui.define-color-token('interactive-list-item-hover-background', ui.color('bg-light', 700, 1));
136
- @include ui.define-color-token('interactive-list-item-active-background', ui.color('bg-light', 700, .5));
136
+ @include ui.define-color-token('interactive-list-item-active-background', ui.color('bg-light', 700, 0.5));
137
137
  }
138
138
 
139
139
  @mixin icon-tokens() {
@@ -143,32 +143,32 @@
143
143
  }
144
144
 
145
145
  @mixin info-panel-tokens() {
146
- @include ui.def('info-panel-focus-border-size', ui.q(.25));
147
- @include ui.define-color-token('info-panel-border', ui.color('primary', 950, .7));
148
- @include ui.define-color-token('info-panel-background', ui.color('primary', 950, .1));
149
- @include ui.define-color-token('info-panel-background-hover', ui.color('primary', 950, .2));
146
+ @include ui.def('info-panel-focus-border-size', ui.q(0.25));
147
+ @include ui.define-color-token('info-panel-border', ui.color('primary', 950, 0.7));
148
+ @include ui.define-color-token('info-panel-background', ui.color('primary', 950, 0.1));
149
+ @include ui.define-color-token('info-panel-background-hover', ui.color('primary', 950, 0.2));
150
150
  @include ui.define-color-token('info-panel-error-border', ui.color('red'));
151
- @include ui.define-color-token('info-panel-error-background', ui.color('red', $alpha: .2));
152
- @include ui.define-color-token('info-panel-error-background-hover', ui.color('red', $alpha: .4));
151
+ @include ui.define-color-token('info-panel-error-background', ui.color('red', $alpha: 0.2));
152
+ @include ui.define-color-token('info-panel-error-background-hover', ui.color('red', $alpha: 0.4));
153
153
  @include ui.define-color-token('info-panel-success-border', ui.color('green'));
154
- @include ui.define-color-token('info-panel-success-background', ui.color('green', $alpha: .2));
155
- @include ui.define-color-token('info-panel-success-background-hover', ui.color('green', $alpha: .4));
154
+ @include ui.define-color-token('info-panel-success-background', ui.color('green', $alpha: 0.2));
155
+ @include ui.define-color-token('info-panel-success-background-hover', ui.color('green', $alpha: 0.4));
156
156
  @include ui.define-color-token('info-panel-warning-border', ui.color('yellow'));
157
- @include ui.define-color-token('info-panel-warning-background', ui.color('yellow', $alpha: .2));
158
- @include ui.define-color-token('info-panel-warning-background-hover', ui.color('yellow', $alpha: .4));
157
+ @include ui.define-color-token('info-panel-warning-background', ui.color('yellow', $alpha: 0.2));
158
+ @include ui.define-color-token('info-panel-warning-background-hover', ui.color('yellow', $alpha: 0.4));
159
159
  }
160
160
 
161
161
  @mixin tabular-tokens() {
162
162
  @include ui.define-color-token('tabular-color-dark', ui.color('primary'));
163
163
  @include ui.define-color-token('tabular-color-light', ui.color('accent'));
164
- @include ui.def('tabular-notification-gap', ui.q(.75));
164
+ @include ui.def('tabular-notification-gap', ui.q(0.75));
165
165
  @include ui.def('tabular-small-item-height', ui.q(5));
166
166
  @include ui.def('tabular-small-item-padding', ui.offset('medium'));
167
167
  @include ui.def('tabular-medium-item-height', ui.q(7.5));
168
168
  @include ui.def('tabular-medium-item-padding', ui.offset('medium'));
169
169
  @include ui.def('tabular-large-item-height', ui.q(10));
170
170
  @include ui.def('tabular-large-item-padding', ui.offset('medium'));
171
- @include ui.def('tabular-item-border-size', ui.q(.25));
171
+ @include ui.def('tabular-item-border-size', ui.q(0.25));
172
172
  }
173
173
 
174
174
  @mixin modal-tokens() {
@@ -180,9 +180,9 @@
180
180
  @include ui.def('scrollable-thumb-x-offset', 0);
181
181
  @include ui.def('scrollable-thumb-y-offset', ui.q(1.5));
182
182
  @include ui.define-color-token('scrollbar-track-background', ui.color('bg'));
183
- @include ui.define-color-token('scrollable-thumb-background', ui.color('secondary', $alpha: .4));
184
- @include ui.define-color-token('scrollable-thumb-hover-background', ui.color('secondary', $alpha: .6));
185
- @include ui.define-color-token('scrollable-thumb-active-background', ui.color('secondary', $alpha: .8));
183
+ @include ui.define-color-token('scrollable-thumb-background', ui.color('secondary', $alpha: 0.4));
184
+ @include ui.define-color-token('scrollable-thumb-hover-background', ui.color('secondary', $alpha: 0.6));
185
+ @include ui.define-color-token('scrollable-thumb-active-background', ui.color('secondary', $alpha: 0.8));
186
186
  }
187
187
 
188
188
  @mixin avatar-tokens() {
@@ -197,25 +197,25 @@
197
197
  }
198
198
 
199
199
  @mixin button-tokens() {
200
- @include ui.define-color-token('button-focus-outline', ui.color('primary', $alpha: .5));
200
+ @include ui.define-color-token('button-focus-outline', ui.color('primary', $alpha: 0.5));
201
201
  @include ui.define-color-token('button-text', ui.color('primary'));
202
202
  @include ui.define-color-token('button-border', transparent);
203
- @include ui.define-color-token('button-background', ui.color('primary', $alpha: .15));
204
- @include ui.define-color-token('button-hover-border', ui.color('primary', $alpha: .05));
205
- @include ui.define-color-token('button-hover-background', ui.color('primary', $alpha: .1));
206
- @include ui.define-color-token('button-active-border', ui.color('primary', $alpha: .15));
203
+ @include ui.define-color-token('button-background', ui.color('primary', $alpha: 0.15));
204
+ @include ui.define-color-token('button-hover-border', ui.color('primary', $alpha: 0.05));
205
+ @include ui.define-color-token('button-hover-background', ui.color('primary', $alpha: 0.1));
206
+ @include ui.define-color-token('button-active-border', ui.color('primary', $alpha: 0.15));
207
207
  @include ui.define-color-token('button-active-background', transparent);
208
208
  @include ui.define-color-token('button-primary-text', ui.color('primary'));
209
209
  @include ui.define-color-token('button-primary-border', ui.color('accent'));
210
- @include ui.define-color-token('button-primary-background', ui.color('accent', $alpha: .4));
210
+ @include ui.define-color-token('button-primary-background', ui.color('accent', $alpha: 0.4));
211
211
  @include ui.define-color-token('button-primary-hover-text', ui.color('primary'));
212
212
  @include ui.define-color-token('button-primary-hover-border', ui.color('accent'));
213
213
  @include ui.define-color-token('button-primary-hover-background', ui.color('accent'));
214
214
  @include ui.define-color-token('button-primary-active-text', ui.color('primary'));
215
215
  @include ui.define-color-token('button-primary-active-border', transparent);
216
- @include ui.define-color-token('button-primary-active-background', ui.color('accent', $alpha: .6));
217
- @include ui.define-color-token('button-primary-disabled-text', ui.color('accent', $alpha: .4));
218
- @include ui.define-color-token('button-primary-disabled-border', ui.color('accent', $alpha: .4));
216
+ @include ui.define-color-token('button-primary-active-background', ui.color('accent', $alpha: 0.6));
217
+ @include ui.define-color-token('button-primary-disabled-text', ui.color('accent', $alpha: 0.4));
218
+ @include ui.define-color-token('button-primary-disabled-border', ui.color('accent', $alpha: 0.4));
219
219
  @include ui.define-color-token('button-primary-disabled-background', transparent);
220
220
  @include ui.define-color-token('button-secondary-text', ui.color('primary'));
221
221
  @include ui.define-color-token('button-secondary-border', ui.color('primary'));
@@ -225,9 +225,9 @@
225
225
  @include ui.define-color-token('button-secondary-hover-background', ui.color('primary'));
226
226
  @include ui.define-color-token('button-secondary-active-text', ui.color('bg'));
227
227
  @include ui.define-color-token('button-secondary-active-border', transparent);
228
- @include ui.define-color-token('button-secondary-active-background', ui.color('primary', $alpha: .6));
229
- @include ui.define-color-token('button-secondary-disabled-text', ui.color('primary', $alpha: .4));
230
- @include ui.define-color-token('button-secondary-disabled-border', ui.color('primary', $alpha: .4));
228
+ @include ui.define-color-token('button-secondary-active-background', ui.color('primary', $alpha: 0.6));
229
+ @include ui.define-color-token('button-secondary-disabled-text', ui.color('primary', $alpha: 0.4));
230
+ @include ui.define-color-token('button-secondary-disabled-border', ui.color('primary', $alpha: 0.4));
231
231
  @include ui.define-color-token('button-secondary-disabled-background', transparent);
232
232
  @include ui.define-color-token('button-onlight-text', ui.color('primary'));
233
233
  @include ui.define-color-token('button-onlight-border', ui.color('bg-dark'));
@@ -237,20 +237,20 @@
237
237
  @include ui.define-color-token('button-onlight-hover-background', ui.color('bg-dark'));
238
238
  @include ui.define-color-token('button-onlight-active-text', ui.color('primary'));
239
239
  @include ui.define-color-token('button-onlight-active-border', transparent);
240
- @include ui.define-color-token('button-onlight-active-background', ui.color('bg-dark', $alpha: .6));
241
- @include ui.define-color-token('button-onlight-disabled-text', ui.color('bg-dark', $alpha: .4));
242
- @include ui.define-color-token('button-onlight-disabled-border', ui.color('bg-dark', $alpha: .4));
240
+ @include ui.define-color-token('button-onlight-active-background', ui.color('bg-dark', $alpha: 0.6));
241
+ @include ui.define-color-token('button-onlight-disabled-text', ui.color('bg-dark', $alpha: 0.4));
242
+ @include ui.define-color-token('button-onlight-disabled-border', ui.color('bg-dark', $alpha: 0.4));
243
243
  @include ui.define-color-token('button-onlight-disabled-background', transparent);
244
244
  @include ui.define-color-token('button-linked-text', ui.color('tertiary'));
245
245
  @include ui.define-color-token('button-linked-border', transparent);
246
246
  @include ui.define-color-token('button-linked-background', transparent);
247
247
  @include ui.define-color-token('button-linked-hover-text', ui.color('accent'));
248
248
  @include ui.define-color-token('button-linked-hover-border', transparent);
249
- @include ui.define-color-token('button-linked-hover-background', #24293B);
249
+ @include ui.define-color-token('button-linked-hover-background', #24293b);
250
250
  @include ui.define-color-token('button-linked-active-text', ui.color('red'));
251
251
  @include ui.define-color-token('button-linked-active-border', transparent);
252
- @include ui.define-color-token('button-linked-active-background', #24293B);
253
- @include ui.define-color-token('button-linked-disabled-text', ui.color('primary', $alpha: .4));
252
+ @include ui.define-color-token('button-linked-active-background', #24293b);
253
+ @include ui.define-color-token('button-linked-disabled-text', ui.color('primary', $alpha: 0.4));
254
254
  @include ui.define-color-token('button-linked-disabled-border', transparent);
255
255
  @include ui.define-color-token('button-linked-disabled-background', transparent);
256
256
  @include ui.define-color-token('button-quicklink-text', ui.color('primary'));
@@ -269,22 +269,22 @@
269
269
 
270
270
  @mixin badge-tokens() {
271
271
  @include ui.define-color-token('badge-success-text', ui.color('green'));
272
- @include ui.define-color-token('badge-success-background', ui.color('green', $alpha: .2));
273
- @include ui.define-color-token('badge-success-background-hover', ui.color('green', $alpha: .4));
272
+ @include ui.define-color-token('badge-success-background', ui.color('green', $alpha: 0.2));
273
+ @include ui.define-color-token('badge-success-background-hover', ui.color('green', $alpha: 0.4));
274
274
  @include ui.define-color-token('badge-neutral-text', ui.color('secondary'));
275
- @include ui.define-color-token('badge-neutral-background', ui.color('secondary', $alpha: .2));
276
- @include ui.define-color-token('badge-neutral-background-hover', ui.color('secondary', $alpha: .4));
275
+ @include ui.define-color-token('badge-neutral-background', ui.color('secondary', $alpha: 0.2));
276
+ @include ui.define-color-token('badge-neutral-background-hover', ui.color('secondary', $alpha: 0.4));
277
277
  @include ui.define-color-token('badge-warning-text', ui.color('yellow'));
278
- @include ui.define-color-token('badge-warning-background', ui.color('yellow', $alpha: .2));
279
- @include ui.define-color-token('badge-warning-background-hover', ui.color('yellow', $alpha: .4));
278
+ @include ui.define-color-token('badge-warning-background', ui.color('yellow', $alpha: 0.2));
279
+ @include ui.define-color-token('badge-warning-background-hover', ui.color('yellow', $alpha: 0.4));
280
280
  @include ui.define-color-token('badge-error-text', ui.color('red'));
281
- @include ui.define-color-token('badge-error-background', ui.color('red', $alpha: .2));
282
- @include ui.define-color-token('badge-error-background-hover', ui.color('red', $alpha: .4));
281
+ @include ui.define-color-token('badge-error-background', ui.color('red', $alpha: 0.2));
282
+ @include ui.define-color-token('badge-error-background-hover', ui.color('red', $alpha: 0.4));
283
283
  }
284
284
 
285
285
  @mixin separator-tokens() {
286
- @include ui.define-color-token('separator-text', ui.color('secondary', $alpha: .4));
287
- @include ui.define-color-token('separator-background', ui.color('secondary', $alpha: .2));
286
+ @include ui.define-color-token('separator-text', ui.color('secondary', $alpha: 0.4));
287
+ @include ui.define-color-token('separator-background', ui.color('secondary', $alpha: 0.2));
288
288
  }
289
289
 
290
290
  /**
@@ -292,58 +292,57 @@
292
292
  * Look for usages by searching for `ui.color-token('name')`
293
293
  */
294
294
  @mixin color-tokens() {
295
- @include ui.define-color-token('li-marker', ui.color('main', 950, .75));
295
+ @include ui.define-color-token('li-marker', ui.color('main', 950, 0.75));
296
296
  @include ui.define-color-token('kbd-border', ui.color('main', 300));
297
297
  @include ui.define-color-token('kbd-background', ui.color('main', 200));
298
- @include ui.define-color-token('shadow-small', rgba(0, 0, 0, .5));
298
+ @include ui.define-color-token('shadow-small', rgba(0, 0, 0, 0.5));
299
299
  @include ui.def('shadow-small', 0 2.5px 5px ui.color-token('shadow-small'));
300
- @include ui.define-color-token('shadow-large', rgba(0, 0, 0, .5));
300
+ @include ui.define-color-token('shadow-large', rgba(0, 0, 0, 0.5));
301
301
  @include ui.def('shadow-large', 0 ui.q(2) ui.q(8) 2px ui.color-token('shadow-large'));
302
302
 
303
303
  // TODO: add text warning, success and error
304
304
 
305
305
  @include ui.define-color-token('link-hover-decoration', ui.color('primary', 950));
306
- @include ui.define-color-token('scrollbar', ui.color('secondary', $alpha: .4));
307
- @include ui.define-color-token('scrollbar-hover', ui.color('secondary', $alpha: .6));
308
- @include ui.define-color-token('scrollbar-active', ui.color('secondary', $alpha: .8));
309
- @include ui.define-color-token('backdrop', ui.color('bg', $alpha: .75));
310
- @include ui.define-color-token('backdrop-100', ui.color('bg', $alpha: .25));
311
- @include ui.define-color-token('backdrop-200', ui.color('bg', $alpha: .5));
312
- @include ui.define-color-token('backdrop-300', ui.color('bg', $alpha: .75));
313
- @include ui.define-color-token('backdrop-shader', ui.color('bg', $alpha: .75));
314
-
306
+ @include ui.define-color-token('scrollbar', ui.color('secondary', $alpha: 0.4));
307
+ @include ui.define-color-token('scrollbar-hover', ui.color('secondary', $alpha: 0.6));
308
+ @include ui.define-color-token('scrollbar-active', ui.color('secondary', $alpha: 0.8));
309
+ @include ui.define-color-token('backdrop', ui.color('bg', $alpha: 0.75));
310
+ @include ui.define-color-token('backdrop-100', ui.color('bg', $alpha: 0.25));
311
+ @include ui.define-color-token('backdrop-200', ui.color('bg', $alpha: 0.5));
312
+ @include ui.define-color-token('backdrop-300', ui.color('bg', $alpha: 0.75));
313
+ @include ui.define-color-token('backdrop-shader', ui.color('bg', $alpha: 0.75));
315
314
 
316
315
  // COMPONENTS
317
316
  @include ui.define-color-token('avatar-background', ui.color('main'));
318
- @include ui.define-color-token('checkbox-focus-outline', ui.color('primary', $alpha: .5));
317
+ @include ui.define-color-token('checkbox-focus-outline', ui.color('primary', $alpha: 0.5));
319
318
  @include ui.define-color-token('checkbox-indicator', ui.color('primary', 800));
320
319
  @include ui.define-color-token('checkbox-text', ui.color('main', 950));
321
- @include ui.define-color-token('checkbox-border', ui.color('main', 950, .25));
322
- @include ui.define-color-token('checkbox-background', ui.color('main', 950, .1));
323
- @include ui.define-color-token('checkbox-hover-background', ui.color('main', 950, .05));
324
- @include ui.define-color-token('flyout-backdrop-background', ui.color('main', 100, .9));
325
- @include ui.define-color-token('flyout-holder-border', ui.color('main', 100, .25));
326
- @include ui.define-color-token('flyout-holder-blur-background', ui.color('main', 50, .75));
320
+ @include ui.define-color-token('checkbox-border', ui.color('main', 950, 0.25));
321
+ @include ui.define-color-token('checkbox-background', ui.color('main', 950, 0.1));
322
+ @include ui.define-color-token('checkbox-hover-background', ui.color('main', 950, 0.05));
323
+ @include ui.define-color-token('flyout-backdrop-background', ui.color('main', 100, 0.9));
324
+ @include ui.define-color-token('flyout-holder-border', ui.color('main', 100, 0.25));
325
+ @include ui.define-color-token('flyout-holder-blur-background', ui.color('main', 50, 0.75));
327
326
  @include ui.define-color-token('flyout-holder-unblur-background', ui.color('main'));
328
327
  @include ui.define-color-token('indicator-bright', ui.color('primary'));
329
328
  @include ui.define-color-token('indicator-dim', transparent);
330
- @include ui.define-color-token('island-border', ui.color('main', 50, .25));
331
- @include ui.define-color-token('island-blur-background', ui.color('main', 50, .75));
332
- @include ui.define-color-token('island-unblur-background', ui.color('main', 50, .95));
333
- @include ui.define-color-token('loaf-text', ui.color('main', 950, .5));
334
- @include ui.define-color-token('loaf-background', ui.color('main', 950, .05));
329
+ @include ui.define-color-token('island-border', ui.color('main', 50, 0.25));
330
+ @include ui.define-color-token('island-blur-background', ui.color('main', 50, 0.75));
331
+ @include ui.define-color-token('island-unblur-background', ui.color('main', 50, 0.95));
332
+ @include ui.define-color-token('loaf-text', ui.color('main', 950, 0.5));
333
+ @include ui.define-color-token('loaf-background', ui.color('main', 950, 0.05));
335
334
  @include ui.define-color-token('loaf-bright-text', ui.color('main', 950));
336
- @include ui.define-color-token('loaf-gold-text', ui.color('aurum', 500, .5));
337
- @include ui.define-color-token('loaf-gold-background', ui.color('main', 950, .05));
335
+ @include ui.define-color-token('loaf-gold-text', ui.color('aurum', 500, 0.5));
336
+ @include ui.define-color-token('loaf-gold-background', ui.color('main', 950, 0.05));
338
337
  @include ui.define-color-token('loaf-gold-bright-text', ui.color('aurum', 500));
339
338
  @include ui.define-color-token('loaf-error-text', ui.color('error', 500));
340
- @include ui.define-color-token('loaf-error-background', ui.color('error', 500, .15));
339
+ @include ui.define-color-token('loaf-error-background', ui.color('error', 500, 0.15));
341
340
  @include ui.define-color-token('loaf-error-bright-text', ui.color('error', 500));
342
- @include ui.define-color-token('navlist-item-border', ui.color('main', 950, .1));
341
+ @include ui.define-color-token('navlist-item-border', ui.color('main', 950, 0.1));
343
342
  @include ui.define-color-token('navlist-item-background', transparent);
344
343
  @include ui.define-color-token('navlist-item-active-border', transparent);
345
- @include ui.define-color-token('navlist-item-active-background', ui.color('main', 950, .1));
344
+ @include ui.define-color-token('navlist-item-active-background', ui.color('main', 950, 0.1));
346
345
  @include ui.define-color-token('navlist-item-hover-border', transparent);
347
- @include ui.define-color-token('navlist-item-hover-background', ui.color('main', 950, .2));
348
- @include ui.define-color-token('overlay-backdrop-background', ui.color('bg', $alpha: .65));
346
+ @include ui.define-color-token('navlist-item-hover-background', ui.color('main', 950, 0.2));
347
+ @include ui.define-color-token('overlay-backdrop-background', ui.color('bg', $alpha: 0.65));
349
348
  }
package/dist/utils/hooks/useClipboardComponent.d.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import { default as React } from 'react';
2
2
 
3
+ export interface ClipboardType {
4
+ writeText: (text: string) => Promise<void>;
5
+ }
3
6
  export interface UseClipboardProps {
4
7
  hoverTitle?: string;
5
8
  copiedTitle: string;
@@ -11,5 +14,5 @@ export declare function useClipboardComponent(props: UseClipboardProps): {
11
14
  handleClick: () => void;
12
15
  title: string | undefined;
13
16
  copied: boolean;
14
- clipboardRef: React.RefObject<Clipboard | null>;
17
+ clipboardRef: React.RefObject<ClipboardType | null>;
15
18
  };
package/dist/utils/ui/ui.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { default as React } from 'react';
1
2
  import { BorderRadiusType, MPProps, OffsetType, ResponsiveOffsetType, ResponsiveValueType, TextSize, ZIndexType } from './ui.types';
2
3
 
3
4
  export declare namespace ui {
@@ -32,7 +33,7 @@ export declare namespace ui {
32
33
  export function getResponsiveClassnames<T = string | number>(name: string, value?: ResponsiveValueType<T>): string;
33
34
  export function getResponsiveFlatClassnames<T = string | number>(name: string, value?: ResponsiveValueType<T>, formatter?: (val: T) => string): string[];
34
35
  export function offsetResponsiveValueFormatter(value: OffsetType | number): string;
35
- export const getOffsetStyles: (name: string, value?: ResponsiveValueType<OffsetType | number>) => import("react").CSSProperties;
36
+ export const getOffsetStyles: (name: string, value?: ResponsiveValueType<OffsetType | number>) => React.CSSProperties;
36
37
  type CallbackType<T> = (name: string, value: ResponsiveOffsetType) => T;
37
38
  export function callAllMPProps<T extends object>(props: Partial<MPProps>, callback: CallbackType<T>): T;
38
39
  export const optimizeMPProps: (props: Partial<MPProps>) => Partial<MPProps>;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cfx-dev/ui-components",
3
3
  "private": false,
4
- "version": "4.3.7",
4
+ "version": "4.3.9",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "main": "dist/main.js",
@@ -43,8 +43,8 @@
43
43
  "react-window": "^1.8.8"
44
44
  },
45
45
  "devDependencies": {
46
- "@cfx-dev/eslint-config-ui": "^1.1.1",
47
- "@cfx-dev/stylelint-config-ui": "^1.0.0",
46
+ "@cfx-dev/eslint-config-ui": "^2.1.0",
47
+ "@cfx-dev/stylelint-config-ui": "^1.1.1",
48
48
  "@chromatic-com/storybook": "1.5.0",
49
49
  "@storybook/addon-essentials": "^8.1.5",
50
50
  "@storybook/addon-interactions": "^8.1.5",
@@ -59,8 +59,8 @@
59
59
  "@types/react-dom": "^19.0.0",
60
60
  "@types/react-window": "^1.8.8",
61
61
  "@vitejs/plugin-react": "^4.2.1",
62
- "eslint": "^8.57.0",
63
- "eslint-plugin-storybook": "^0.8.0",
62
+ "eslint": "^9.28.0",
63
+ "eslint-plugin-storybook": "^9.0.8",
64
64
  "glob": "^10.4.1",
65
65
  "remark-gfm": "^4.0.1",
66
66
  "sass": "^1.77.4",