@cfx-dev/ui-components 2.0.4 → 2.0.6

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 (30) hide show
  1. package/dist/assets/Button.css +1 -1
  2. package/dist/assets/InfoPanel.css +1 -1
  3. package/dist/assets/Input.css +1 -1
  4. package/dist/assets/InputDropzone.css +1 -1
  5. package/dist/assets/NavList.css +1 -1
  6. package/dist/assets/Radio.css +1 -1
  7. package/dist/assets/RichInput.css +1 -1
  8. package/dist/assets/Select.css +1 -1
  9. package/dist/assets/Switch.css +1 -1
  10. package/dist/assets/Tabular.css +1 -1
  11. package/dist/assets/Textarea.css +1 -1
  12. package/dist/assets/ToggleGroup.css +1 -1
  13. package/dist/assets/global.css +1 -1
  14. package/dist/components/Button/Button.d.ts +3 -3
  15. package/dist/components/Button/Button.js +70 -68
  16. package/dist/components/Button/ButtonShowcase.js +43 -21
  17. package/dist/components/InfoPanel/InfoPanel.js +32 -32
  18. package/dist/components/Input/Input.js +46 -46
  19. package/dist/components/Input/RichInput.js +21 -21
  20. package/dist/components/InputDropzone/InputDropzone.js +1 -1
  21. package/dist/components/NavList/NavList.js +14 -14
  22. package/dist/components/Radio/Radio.js +20 -20
  23. package/dist/components/Select/Select.js +1 -1
  24. package/dist/components/Switch/Switch.js +21 -21
  25. package/dist/components/Tabular/Tabular.js +44 -44
  26. package/dist/components/Textarea/Textarea.js +25 -25
  27. package/dist/components/ToggleGroup/ToggleGroup.js +28 -28
  28. package/dist/styles-scss/_ui.scss +33 -1
  29. package/dist/styles-scss/tokens.scss +38 -24
  30. package/package.json +1 -1
package/dist/styles-scss/tokens.scss CHANGED
@@ -39,13 +39,13 @@
39
39
 
40
40
  @include ui.define-color-token('text', ui.color('primary', 'pure' ));
41
41
  @include ui.def ('text-opacity-10', .10);
42
- @include ui.define-color-token('text-a10', ui.color('primary', 'pure', .10));
42
+ @include ui.define-color-token('text-a10', ui.color('primary', $alpha: .10));
43
43
  @include ui.def ('text-opacity-25', .25);
44
- @include ui.define-color-token('text-a25', ui.color('primary', 'pure', .25));
44
+ @include ui.define-color-token('text-a25', ui.color('primary', $alpha: .25));
45
45
  @include ui.def ('text-opacity-50', .50);
46
- @include ui.define-color-token('text-a50', ui.color('primary', 'pure', .50));
46
+ @include ui.define-color-token('text-a50', ui.color('primary', $alpha: .50));
47
47
  @include ui.def ('text-opacity-75', .75);
48
- @include ui.define-color-token('text-a75', ui.color('primary', 'pure', .75));
48
+ @include ui.define-color-token('text-a75', ui.color('primary', $alpha: .75));
49
49
  }
50
50
 
51
51
  $offsets: (
@@ -104,21 +104,21 @@ $control-heights: (
104
104
  }
105
105
 
106
106
  @mixin input-tokens() {
107
- @include ui.define-color-token('input-placeholder', ui.color('primary', 'pure', .4));
108
- @include ui.define-color-token('input-placeholder-hover', ui.color('primary', 'pure', .6));
107
+ @include ui.define-color-token('input-placeholder', ui.color('primary', $alpha: .4));
108
+ @include ui.define-color-token('input-placeholder-hover', ui.color('primary', $alpha: .6));
109
109
 
110
110
  @include ui.define-color-token('input-text', ui.color('primary'));
111
111
  @include ui.define-color-token('input-background', ui.color('bg'));
112
112
 
113
113
  @include ui.def('input-border-size', 1px);
114
114
  @include ui.define-color-token('input-border', ui.color('bg-light'));
115
- @include ui.define-color-token('input-hover-border', ui.color('primary', 'pure', .1));
115
+ @include ui.define-color-token('input-hover-border', ui.color('primary', $alpha: .1));
116
116
  @include ui.define-color-token('input-focus-border', ui.color('bg-dark'));
117
117
  @include ui.define-color-token('input-disabled-border', ui.color('bg-light'));
118
118
  }
119
119
 
120
120
  @mixin accordion-tokens() {
121
- @include ui.define-color-token('accordion-border-color', ui.color('secondary', 'pure', .1));
121
+ @include ui.define-color-token('accordion-border-color', ui.color('secondary', $alpha: .1));
122
122
  @include ui.define-color-token('accordion-background', ui.color('bg'));
123
123
  }
124
124
 
@@ -175,6 +175,7 @@ $control-heights: (
175
175
  @include ui.def('scrollable-thumb-size', ui.q(1));
176
176
  @include ui.def('scrollable-thumb-x-offset', 0);
177
177
  @include ui.def('scrollable-thumb-y-offset', ui.q(1.5));
178
+ @include ui.define-color-token('scrollbar-track-background', ui.color('bg'));
178
179
  @include ui.define-color-token('scrollable-thumb-background', ui.color('secondary', $alpha: .4));
179
180
  @include ui.define-color-token('scrollable-thumb-hover-background', ui.color('secondary', $alpha: .6));
180
181
  @include ui.define-color-token('scrollable-thumb-active-background', ui.color('secondary', $alpha: .8));
@@ -192,27 +193,27 @@ $control-heights: (
192
193
  }
193
194
 
194
195
  @mixin button-tokens() {
195
- @include ui.define-color-token('button-focus-outline', ui.color('primary', 'pure', .5));
196
+ @include ui.define-color-token('button-focus-outline', ui.color('primary', $alpha: .5));
196
197
 
197
198
  @include ui.define-color-token('button-text', ui.color('primary'));
198
199
  @include ui.define-color-token('button-border', transparent);
199
- @include ui.define-color-token('button-background', ui.color('primary', 'pure', .15));
200
- @include ui.define-color-token('button-hover-border', ui.color('primary', 'pure', .05));
201
- @include ui.define-color-token('button-hover-background', ui.color('primary', 'pure', .1));
202
- @include ui.define-color-token('button-active-border', ui.color('primary', 'pure', .15));
200
+ @include ui.define-color-token('button-background', ui.color('primary', $alpha: .15));
201
+ @include ui.define-color-token('button-hover-border', ui.color('primary', $alpha: .05));
202
+ @include ui.define-color-token('button-hover-background', ui.color('primary', $alpha: .1));
203
+ @include ui.define-color-token('button-active-border', ui.color('primary', $alpha: .15));
203
204
  @include ui.define-color-token('button-active-background', transparent);
204
205
 
205
206
  @include ui.define-color-token('button-primary-text', ui.color('primary'));
206
207
  @include ui.define-color-token('button-primary-border', ui.color('accent'));
207
- @include ui.define-color-token('button-primary-background', ui.color('accent', 'pure', .4));
208
+ @include ui.define-color-token('button-primary-background', ui.color('accent', $alpha: .4));
208
209
  @include ui.define-color-token('button-primary-hover-text', ui.color('primary'));
209
210
  @include ui.define-color-token('button-primary-hover-border', ui.color('accent'));
210
211
  @include ui.define-color-token('button-primary-hover-background', ui.color('accent'));
211
212
  @include ui.define-color-token('button-primary-active-text', ui.color('primary'));
212
213
  @include ui.define-color-token('button-primary-active-border', transparent);
213
- @include ui.define-color-token('button-primary-active-background', ui.color('accent', 'pure', .6));
214
- @include ui.define-color-token('button-primary-disabled-text', ui.color('accent', 'pure', .4));
215
- @include ui.define-color-token('button-primary-disabled-border', ('accent', 'pure', .4));
214
+ @include ui.define-color-token('button-primary-active-background', ui.color('accent', $alpha: .6));
215
+ @include ui.define-color-token('button-primary-disabled-text', ui.color('accent', $alpha: .4));
216
+ @include ui.define-color-token('button-primary-disabled-border', ui.color('accent', $alpha: .4));
216
217
  @include ui.define-color-token('button-primary-disabled-background', transparent);
217
218
 
218
219
  @include ui.define-color-token('button-secondary-text', ui.color('primary'));
@@ -223,9 +224,9 @@ $control-heights: (
223
224
  @include ui.define-color-token('button-secondary-hover-background', ui.color('primary'));
224
225
  @include ui.define-color-token('button-secondary-active-text', ui.color('bg'));
225
226
  @include ui.define-color-token('button-secondary-active-border', transparent);
226
- @include ui.define-color-token('button-secondary-active-background', ui.color('primary', 'pure', .6));
227
- @include ui.define-color-token('button-secondary-disabled-text', ui.color('primary', 'pure', .4));
228
- @include ui.define-color-token('button-secondary-disabled-border', ('primary', 'pure', .4));
227
+ @include ui.define-color-token('button-secondary-active-background', ui.color('primary', $alpha: .6));
228
+ @include ui.define-color-token('button-secondary-disabled-text', ui.color('primary', $alpha: .4));
229
+ @include ui.define-color-token('button-secondary-disabled-border', ui.color('primary', $alpha: .4));
229
230
  @include ui.define-color-token('button-secondary-disabled-background', transparent);
230
231
 
231
232
  @include ui.define-color-token('button-onlight-text', ui.color('primary'));
@@ -236,10 +237,23 @@ $control-heights: (
236
237
  @include ui.define-color-token('button-onlight-hover-background', ui.color('bg-dark'));
237
238
  @include ui.define-color-token('button-onlight-active-text', ui.color('primary'));
238
239
  @include ui.define-color-token('button-onlight-active-border', transparent);
239
- @include ui.define-color-token('button-onlight-active-background', ui.color('bg-dark', 'pure', .6));
240
- @include ui.define-color-token('button-onlight-disabled-text', ui.color('bg-dark', 'pure', .4));
241
- @include ui.define-color-token('button-onlight-disabled-border', ('bg-dark', 'pure', .4));
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));
242
243
  @include ui.define-color-token('button-onlight-disabled-background', transparent);
244
+
245
+ @include ui.define-color-token('button-quicklink-text', ui.color('primary'));
246
+ @include ui.define-color-token('button-quicklink-border', transparent);
247
+ @include ui.define-color-token('button-quicklink-background', ui.color('bg-light'));
248
+ @include ui.define-color-token('button-quicklink-hover-text', ui.color('primary'));
249
+ @include ui.define-color-token('button-quicklink-hover-border', transparent);
250
+ @include ui.define-color-token('button-quicklink-hover-background', ui.color('accent'));
251
+ @include ui.define-color-token('button-quicklink-active-text', ui.color('primary'));
252
+ @include ui.define-color-token('button-quicklink-active-border', transparent);
253
+ @include ui.define-color-token('button-quicklink-active-background', ui.color('accent'));
254
+ @include ui.define-color-token('button-quicklink-disabled-text', ui.color('primary'));
255
+ @include ui.define-color-token('button-quicklink-disabled-border', transparent);
256
+ @include ui.define-color-token('button-quicklink-disabled-background', ui.color('bg-light'));
243
257
  }
244
258
 
245
259
  @mixin badge-tokens() {
@@ -295,7 +309,7 @@ $control-heights: (
295
309
  @include ui.define-color-token('avatar-background', ui.color('main'));
296
310
 
297
311
 
298
- @include ui.define-color-token('checkbox-focus-outline', ui.color('primary', 'pure', .5));
312
+ @include ui.define-color-token('checkbox-focus-outline', ui.color('primary', $alpha: .5));
299
313
  @include ui.define-color-token('checkbox-indicator', ui.color('primary', 800));
300
314
 
301
315
  @include ui.define-color-token('checkbox-text', ui.color('main', 950));
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cfx-dev/ui-components",
3
3
  "private": false,
4
- "version": "2.0.4",
4
+ "version": "2.0.6",
5
5
  "type": "module",
6
6
  "license": "MIT",
7
7
  "main": "dist/main.js",