@loadsmart/loadsmart-ui 6.0.15 → 6.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.
- package/dist/DragDropFile.context-c7cd1441.js.map +1 -1
- package/dist/components/Text/Text.d.ts +1 -1
- package/dist/index.js +198 -160
- package/dist/index.js.map +1 -1
- package/dist/miranda-compatibility.theme-22a9ce26.js +2 -0
- package/dist/miranda-compatibility.theme-22a9ce26.js.map +1 -0
- package/dist/{prop-82e9ff9d.js → prop-201ffe28.js} +2 -2
- package/dist/{prop-82e9ff9d.js.map → prop-201ffe28.js.map} +1 -1
- package/dist/testing/index.js +1 -1
- package/dist/theming/index.js +1 -1
- package/dist/theming/themes/alice.theme.d.ts +70 -15
- package/dist/theming/themes/loadsmart.theme.d.ts +70 -15
- package/dist/theming/themes/miranda-compatibility.theme.d.ts +141 -85
- package/dist/tools/index.js +1 -1
- package/package.json +17 -15
- package/src/common/CloseButton/CloseButton.tsx +4 -1
- package/src/common/SelectionWrapper.tsx +8 -0
- package/src/components/Button/Button.tsx +44 -21
- package/src/components/Calendar/Calendar.test.tsx +1 -1
- package/src/components/Card/Card.test.tsx +1 -1
- package/src/components/Checkbox/Checkbox.tsx +1 -1
- package/src/components/DatePicker/DatePicker.test.tsx +1 -1
- package/src/components/DatePicker/DateRangePicker.test.tsx +1 -1
- package/src/components/Dropdown/Dropdown.test.tsx +1 -1
- package/src/components/Dropdown/DropdownTrigger.tsx +9 -11
- package/src/components/EmptyState/EmptyState.test.tsx +1 -1
- package/src/components/HighlightMatch/HighlightMatch.test.tsx +1 -1
- package/src/components/IconFactory/IconFactory.test.tsx +1 -1
- package/src/components/Link/Link.tsx +9 -0
- package/src/components/Loaders/LoadingBar.test.tsx +1 -1
- package/src/components/Loaders/LoadingDots.test.tsx +1 -1
- package/src/components/Loaders/Spinner.test.tsx +1 -1
- package/src/components/Popover/Popover.test.tsx +1 -1
- package/src/components/Radio/Radio.tsx +1 -1
- package/src/components/Select/Select.test.tsx +1 -1
- package/src/components/Select/SelectTrigger.tsx +1 -1
- package/src/components/SideNavigation/Menu/MenuLink.tsx +4 -2
- package/src/components/Steps/Steps.test.tsx +1 -1
- package/src/components/Switch/Switch.test.tsx +1 -1
- package/src/components/Switch/Switch.tsx +3 -1
- package/src/components/Tag/Tag.tsx +24 -4
- package/src/components/TextField/TextField.tsx +5 -2
- package/src/components/Textarea/Textarea.tsx +5 -2
- package/src/components/ToggleGroup/Toggle.tsx +3 -1
- package/src/components/ToggleGroup/ToggleGroup.test.tsx +1 -1
- package/src/hooks/useFocusTrap/useFocusTrap.test.tsx +1 -1
- package/src/theming/themes/alice.theme.ts +83 -15
- package/src/theming/themes/loadsmart.theme.ts +85 -16
- package/src/theming/themes/miranda-compatibility.theme.ts +181 -113
- package/dist/miranda-compatibility.theme-f99913ed.js +0 -2
- package/dist/miranda-compatibility.theme-f99913ed.js.map +0 -1
|
@@ -179,6 +179,7 @@ const alice = {
|
|
|
179
179
|
'button-large-height': height('large'),
|
|
180
180
|
'button-large-padding-x': spacing('m'),
|
|
181
181
|
'button-large-padding-y': rem('14px'),
|
|
182
|
+
'button-outline-offset': '0',
|
|
182
183
|
|
|
183
184
|
// button primary
|
|
184
185
|
'button-primary-background': color('primary'),
|
|
@@ -199,7 +200,8 @@ const alice = {
|
|
|
199
200
|
'button-primary-color--active': color('neutral-white'),
|
|
200
201
|
'button-primary-color--disabled': color('neutral-white'),
|
|
201
202
|
|
|
202
|
-
'button-primary-outline':
|
|
203
|
+
'button-primary-outline': 'none',
|
|
204
|
+
'button-primary-box-shadow': shadow('glow-primary'),
|
|
203
205
|
|
|
204
206
|
// button secondary
|
|
205
207
|
'button-secondary-background': color('transparent'),
|
|
@@ -220,7 +222,8 @@ const alice = {
|
|
|
220
222
|
'button-secondary-color--active': color('accent', 0.6),
|
|
221
223
|
'button-secondary-color--disabled': color('primary'),
|
|
222
224
|
|
|
223
|
-
'button-secondary-outline':
|
|
225
|
+
'button-secondary-outline': 'none',
|
|
226
|
+
'button-secondary-box-shadow': shadow('glow-primary'),
|
|
224
227
|
|
|
225
228
|
// button secondary dark
|
|
226
229
|
'button-secondary-dark-background': color('transparent'),
|
|
@@ -241,6 +244,28 @@ const alice = {
|
|
|
241
244
|
'button-secondary-dark-color--active': color('accent', 0.6),
|
|
242
245
|
'button-secondary-dark-color--disabled': color('neutral-light'),
|
|
243
246
|
|
|
247
|
+
// button tertiary
|
|
248
|
+
'button-tertiary-background': color('transparent'),
|
|
249
|
+
'button-tertiary-background--hover': color('neutral', 0.2),
|
|
250
|
+
'button-tertiary-background--focus': color('neutral', 0.2),
|
|
251
|
+
'button-tertiary-background--active': color('transparent'),
|
|
252
|
+
'button-tertiary-background--disabled': color('transparent'),
|
|
253
|
+
|
|
254
|
+
'button-tertiary-border-color': color('transparent'),
|
|
255
|
+
'button-tertiary-border-color--hover': color('transparent'),
|
|
256
|
+
'button-tertiary-border-color--focus': color('transparent'),
|
|
257
|
+
'button-tertiary-border-color--active': color('accent', 0.6),
|
|
258
|
+
'button-tertiary-border-color--disabled': color('transparent'),
|
|
259
|
+
|
|
260
|
+
'button-tertiary-color': color('neutral-darker'),
|
|
261
|
+
'button-tertiary-color--hover': color('accent'),
|
|
262
|
+
'button-tertiary-color--focus': color('primary'),
|
|
263
|
+
'button-tertiary-color--active': color('accent', 0.6),
|
|
264
|
+
'button-tertiary-color--disabled': color('neutral-darker'),
|
|
265
|
+
|
|
266
|
+
'button-tertiary-outline': 'none',
|
|
267
|
+
'button-tertiary-box-shadow': 'none',
|
|
268
|
+
|
|
244
269
|
// button warning
|
|
245
270
|
'button-warning-background': color('transparent'),
|
|
246
271
|
'button-warning-background--hover': color('warning', 0.2),
|
|
@@ -260,7 +285,8 @@ const alice = {
|
|
|
260
285
|
'button-warning-color--active': color('warning'),
|
|
261
286
|
'button-warning-color--disabled': color('warning-dark'),
|
|
262
287
|
|
|
263
|
-
'button-warning-outline':
|
|
288
|
+
'button-warning-outline': 'none',
|
|
289
|
+
'button-warning-box-shadow': shadow('glow-warning'),
|
|
264
290
|
|
|
265
291
|
// button icon
|
|
266
292
|
'button-icon-border-radius': border.radius('circle'),
|
|
@@ -286,17 +312,18 @@ const alice = {
|
|
|
286
312
|
'button-icon-color--active': color('neutral-darkest'),
|
|
287
313
|
'button-icon-color--disabled': color('neutral-darkest'),
|
|
288
314
|
|
|
289
|
-
'button-icon-
|
|
315
|
+
'button-icon-box-shadow': shadow('glow-primary'),
|
|
316
|
+
'button-icon-outline': 'none',
|
|
290
317
|
|
|
291
318
|
// tag
|
|
292
319
|
'tag-border-radius': rem('30px'),
|
|
293
320
|
'tag-border-width': border.width('thin'),
|
|
294
|
-
'tag-font-weight': font.weight('bold'),
|
|
295
321
|
'tag-font-height': font.height('1'),
|
|
296
322
|
'tag-spacing': `0 ${spacing('s')}`,
|
|
297
|
-
'tag-spacing
|
|
323
|
+
'tag-removable-spacing': `0 ${spacing('xs')} 0 ${spacing('s')}`,
|
|
298
324
|
'tag-width': 'auto',
|
|
299
|
-
'tag-
|
|
325
|
+
'tag-box-shadow': shadow('glow-primary'),
|
|
326
|
+
'tag-outline-offset': '0',
|
|
300
327
|
|
|
301
328
|
'tag-remove-button-background': color('neutral-white'),
|
|
302
329
|
'tag-remove-button-border-radius': rem('24px'),
|
|
@@ -304,15 +331,18 @@ const alice = {
|
|
|
304
331
|
|
|
305
332
|
// tag small
|
|
306
333
|
'tag-small-font-size': font.size('6'),
|
|
334
|
+
'tag-small-font-weight': font.weight('bold'),
|
|
307
335
|
'tag-small-height': rem('16px'),
|
|
308
336
|
'tag-small-transform': 'uppercase',
|
|
309
337
|
'tag-small-leading-display': 'none',
|
|
310
338
|
'tag-small-remove-button-size': rem('0'),
|
|
311
339
|
'tag-small-remove-button-icon-size': rem('0'),
|
|
312
|
-
'tag-small-spacing
|
|
340
|
+
'tag-small-spacing': `0 ${spacing('s')}`,
|
|
341
|
+
'tag-small-removable-spacing': `0 ${spacing('s')}`,
|
|
313
342
|
|
|
314
343
|
// tag medium
|
|
315
344
|
'tag-font-size': font.size('5'),
|
|
345
|
+
'tag-font-weight': font.weight('bold'),
|
|
316
346
|
'tag-height': rem('24px'),
|
|
317
347
|
'tag-transform': 'none',
|
|
318
348
|
'tag-leading-display': 'inline-flex',
|
|
@@ -321,11 +351,13 @@ const alice = {
|
|
|
321
351
|
|
|
322
352
|
// tag large
|
|
323
353
|
'tag-large-font-size': font.size('4'),
|
|
354
|
+
'tag-large-font-weight': font.weight('bold'),
|
|
324
355
|
'tag-large-height': rem('32px'),
|
|
325
356
|
'tag-large-transform': 'none',
|
|
326
357
|
'tag-large-leading-display': 'inline-flex',
|
|
327
358
|
'tag-large-remove-button-size': rem('24px'),
|
|
328
359
|
'tag-large-remove-button-icon-size': rem('12px'),
|
|
360
|
+
'tag-large-spacing': `0 ${spacing('s')}`,
|
|
329
361
|
|
|
330
362
|
// tag default
|
|
331
363
|
'tag-default-background': color('neutral-light'),
|
|
@@ -340,6 +372,8 @@ const alice = {
|
|
|
340
372
|
'tag-default-border-color--hover': 'transparent',
|
|
341
373
|
'tag-default-border-color--focus': 'transparent',
|
|
342
374
|
|
|
375
|
+
'tag-default-outline': 'none',
|
|
376
|
+
|
|
343
377
|
// tag outline
|
|
344
378
|
'tag-outlined-background': color('transparent'),
|
|
345
379
|
'tag-outlined-background--hover': color('accent', 0.4),
|
|
@@ -353,6 +387,8 @@ const alice = {
|
|
|
353
387
|
'tag-outlined-border-color--hover': color('neutral-darkest'),
|
|
354
388
|
'tag-outlined-border-color--focus': color('neutral-darker'),
|
|
355
389
|
|
|
390
|
+
'tag-outline-outline': 'none',
|
|
391
|
+
|
|
356
392
|
// tag accent
|
|
357
393
|
'tag-accent-background': color('accent', 0.2),
|
|
358
394
|
'tag-accent-background--hover': color('accent', 0.4),
|
|
@@ -366,6 +402,8 @@ const alice = {
|
|
|
366
402
|
'tag-accent-border-color--hover': 'transparent',
|
|
367
403
|
'tag-accent-border-color--focus': 'transparent',
|
|
368
404
|
|
|
405
|
+
'tag-accent-outline': 'none',
|
|
406
|
+
|
|
369
407
|
// tag success
|
|
370
408
|
'tag-success-background': color('success-light'),
|
|
371
409
|
'tag-success-background--hover': color('success-light'),
|
|
@@ -379,6 +417,8 @@ const alice = {
|
|
|
379
417
|
'tag-success-border-color--hover': color('success-light'),
|
|
380
418
|
'tag-success-border-color--focus': color('success-light'),
|
|
381
419
|
|
|
420
|
+
'tag-success-outline': 'none',
|
|
421
|
+
|
|
382
422
|
// tag warning
|
|
383
423
|
'tag-warning-background': color('warning-light'),
|
|
384
424
|
'tag-warning-background--hover': color('warning-light'),
|
|
@@ -392,6 +432,8 @@ const alice = {
|
|
|
392
432
|
'tag-warning-border-color--hover': color('warning-light'),
|
|
393
433
|
'tag-warning-border-color--focus': color('warning-light'),
|
|
394
434
|
|
|
435
|
+
'tag-warning-outline': 'none',
|
|
436
|
+
|
|
395
437
|
// tag danger
|
|
396
438
|
'tag-danger-background': color('danger-light'),
|
|
397
439
|
'tag-danger-background--hover': color('danger-light'),
|
|
@@ -405,6 +447,8 @@ const alice = {
|
|
|
405
447
|
'tag-danger-border-color--hover': color('danger-light'),
|
|
406
448
|
'tag-danger-border-color--focus': color('danger-light'),
|
|
407
449
|
|
|
450
|
+
'tag-danger-outline': 'none',
|
|
451
|
+
|
|
408
452
|
// checkbox
|
|
409
453
|
'checkbox-color': color('neutral-darker'),
|
|
410
454
|
'checkbox-font-weight': font.weight('medium'),
|
|
@@ -412,7 +456,9 @@ const alice = {
|
|
|
412
456
|
|
|
413
457
|
'checkbox-selector-border-radius': border.radius('s'),
|
|
414
458
|
'checkbox-selector-size': rem('16px'),
|
|
415
|
-
'checkbox-selector-
|
|
459
|
+
'checkbox-selector-box-shadow': shadow('glow-primary'),
|
|
460
|
+
'checkbox-selector-outline': 'none',
|
|
461
|
+
'checkbox-selector-outline-offset': '0',
|
|
416
462
|
|
|
417
463
|
'checkbox-small-font-size': font.size('5'),
|
|
418
464
|
|
|
@@ -458,7 +504,7 @@ const alice = {
|
|
|
458
504
|
|
|
459
505
|
'radio-selector-border-radius': border.radius('circle'),
|
|
460
506
|
'radio-selector-size': rem('24px'),
|
|
461
|
-
'radio-selector-
|
|
507
|
+
'radio-selector-box-shadow': shadow('glow-primary'),
|
|
462
508
|
|
|
463
509
|
'radio-small-font-size': font.size('5'),
|
|
464
510
|
'radio-small-selector-size': rem('16px'),
|
|
@@ -526,7 +572,9 @@ const alice = {
|
|
|
526
572
|
'text-field-padding-x': spacing('s'),
|
|
527
573
|
'text-field-padding-y': spacing('s'),
|
|
528
574
|
|
|
529
|
-
'text-field-
|
|
575
|
+
'text-field-box-shadow': shadow('glow-primary'),
|
|
576
|
+
'text-field-outline': 'none',
|
|
577
|
+
'text-field-outline-offset': '0',
|
|
530
578
|
|
|
531
579
|
'text-field-small-height': height('small'),
|
|
532
580
|
'text-field-small-padding-x': spacing('s'),
|
|
@@ -560,7 +608,7 @@ const alice = {
|
|
|
560
608
|
'text-field-success-border-color': color('accent'),
|
|
561
609
|
'text-field-danger-border-color': color('danger'),
|
|
562
610
|
|
|
563
|
-
'text-field-dark-
|
|
611
|
+
'text-field-dark-box-shadow': color('neutral', 0.4),
|
|
564
612
|
|
|
565
613
|
// textarea
|
|
566
614
|
'textarea-border-radius': border.radius('s'),
|
|
@@ -572,7 +620,9 @@ const alice = {
|
|
|
572
620
|
'textarea-padding-x': spacing('s'),
|
|
573
621
|
'textarea-padding-y': spacing('s'),
|
|
574
622
|
|
|
575
|
-
'textarea-
|
|
623
|
+
'textarea-box-shadow': shadow('glow-primary'),
|
|
624
|
+
'textarea-outline': 'none',
|
|
625
|
+
'textarea-outline-offset': '0',
|
|
576
626
|
|
|
577
627
|
'textarea-small-padding-x': spacing('s'),
|
|
578
628
|
'textarea-small-padding-y': spacing('xs'),
|
|
@@ -605,7 +655,7 @@ const alice = {
|
|
|
605
655
|
'textarea-success-border-color': color('accent'),
|
|
606
656
|
'textarea-danger-border-color': color('danger'),
|
|
607
657
|
|
|
608
|
-
'textarea-dark-
|
|
658
|
+
'textarea-dark-box-shadow': color('neutral', 0.4),
|
|
609
659
|
|
|
610
660
|
// link
|
|
611
661
|
'link-font-size': font.size('3'),
|
|
@@ -615,6 +665,10 @@ const alice = {
|
|
|
615
665
|
'link-font-weight': font.weight('medium'),
|
|
616
666
|
'link-font-weight--hover': font.weight('bold'),
|
|
617
667
|
|
|
668
|
+
'link-box-shadow': shadow('glow-primary'),
|
|
669
|
+
'link-outline': 'none',
|
|
670
|
+
'link-outline-offset': '0',
|
|
671
|
+
|
|
618
672
|
// breadcrumbs
|
|
619
673
|
'breadcrumbs-font-size': font.size('2'),
|
|
620
674
|
'breadcrumbs-font-height': font.height('2'),
|
|
@@ -739,7 +793,9 @@ const alice = {
|
|
|
739
793
|
'switch-height': rem('22px'),
|
|
740
794
|
'switch-border-radius': rem('22px'),
|
|
741
795
|
|
|
742
|
-
'switch-
|
|
796
|
+
'switch-box-shadow': shadow('glow-primary'),
|
|
797
|
+
'switch-outline': 'none',
|
|
798
|
+
'switch-outline-offset': '0',
|
|
743
799
|
|
|
744
800
|
// Switch Large
|
|
745
801
|
'switch-large-width': rem('70px'),
|
|
@@ -880,11 +936,16 @@ const alice = {
|
|
|
880
936
|
'top-navigation-item-color--hover': color('primary'),
|
|
881
937
|
|
|
882
938
|
// Select
|
|
939
|
+
'select-trigger-height': '100%',
|
|
940
|
+
'select-trigger-border-color': color('neutral-lighter'),
|
|
883
941
|
'select-selected-option-check-color': color('accent'),
|
|
884
942
|
'select-selected-option-background-color': color('accent', 0.2),
|
|
885
943
|
|
|
886
944
|
// Toggle & Toggle Group
|
|
887
945
|
'toggle-text-transform': 'uppercase',
|
|
946
|
+
'toggle-box-shadow': shadow('glow-primary'),
|
|
947
|
+
'toggle-outline': 'none',
|
|
948
|
+
'toggle-outline-offset': '0',
|
|
888
949
|
'toggle-background-color': color('transparent'),
|
|
889
950
|
'toggle-background-color--hover': color('transparent'),
|
|
890
951
|
'toggle-background-color--focus': color('transparent'),
|
|
@@ -945,10 +1006,17 @@ const alice = {
|
|
|
945
1006
|
'toggle-group-single-padding': '3px',
|
|
946
1007
|
|
|
947
1008
|
// dropdown
|
|
1009
|
+
'dropdown-trigger-border-color': color('primary'),
|
|
1010
|
+
'dropdown-trigger-dark-border-color': color('neutral-light'),
|
|
1011
|
+
'dropdown-trigger-outlined-border-color': color('transparent'),
|
|
948
1012
|
'dropdown-trigger-expanded-color': color('accent'),
|
|
949
1013
|
'dropdown-trigger-height': height('default'),
|
|
950
1014
|
'dropdown-trigger-small-height': height('small'),
|
|
951
1015
|
'dropdown-trigger-large-height': height('large'),
|
|
1016
|
+
|
|
1017
|
+
'dropdown-trigger-box-shadow': shadow('glow-primary'),
|
|
1018
|
+
'dropdown-trigger-outline': 'none',
|
|
1019
|
+
'dropdown-trigger-outline-offset': '0',
|
|
952
1020
|
}
|
|
953
1021
|
|
|
954
1022
|
export default alice
|
|
@@ -176,6 +176,7 @@ const loadsmart = {
|
|
|
176
176
|
'button-large-height': height('large'),
|
|
177
177
|
'button-large-padding-x': spacing('m'),
|
|
178
178
|
'button-large-padding-y': rem('14px'),
|
|
179
|
+
'button-outline-offset': '0',
|
|
179
180
|
|
|
180
181
|
// button primary
|
|
181
182
|
'button-primary-background': color('primary'),
|
|
@@ -196,12 +197,13 @@ const loadsmart = {
|
|
|
196
197
|
'button-primary-color--active': color('neutral-white'),
|
|
197
198
|
'button-primary-color--disabled': color('neutral-white'),
|
|
198
199
|
|
|
199
|
-
'button-primary-outline':
|
|
200
|
+
'button-primary-outline': 'none',
|
|
201
|
+
'button-primary-box-shadow': shadow('glow-primary'),
|
|
200
202
|
|
|
201
203
|
// button secondary
|
|
202
204
|
'button-secondary-background': color('transparent'),
|
|
203
205
|
'button-secondary-background--hover': color('neutral', 0.2),
|
|
204
|
-
'button-secondary-background--focus': color('
|
|
206
|
+
'button-secondary-background--focus': color('transparent'),
|
|
205
207
|
'button-secondary-background--active': color('transparent'),
|
|
206
208
|
'button-secondary-background--disabled': color('transparent'),
|
|
207
209
|
|
|
@@ -217,7 +219,8 @@ const loadsmart = {
|
|
|
217
219
|
'button-secondary-color--active': color('accent', 0.6),
|
|
218
220
|
'button-secondary-color--disabled': color('neutral-darker'),
|
|
219
221
|
|
|
220
|
-
'button-secondary-outline':
|
|
222
|
+
'button-secondary-outline': 'none',
|
|
223
|
+
'button-secondary-box-shadow': shadow('glow-primary'),
|
|
221
224
|
|
|
222
225
|
// button secondary dark
|
|
223
226
|
'button-secondary-dark-background': color('transparent'),
|
|
@@ -238,6 +241,28 @@ const loadsmart = {
|
|
|
238
241
|
'button-secondary-dark-color--active': color('accent', 0.6),
|
|
239
242
|
'button-secondary-dark-color--disabled': color('neutral-light'),
|
|
240
243
|
|
|
244
|
+
// button tertiary
|
|
245
|
+
'button-tertiary-background': color('transparent'),
|
|
246
|
+
'button-tertiary-background--hover': color('neutral', 0.2),
|
|
247
|
+
'button-tertiary-background--focus': color('neutral', 0.2),
|
|
248
|
+
'button-tertiary-background--active': color('transparent'),
|
|
249
|
+
'button-tertiary-background--disabled': color('transparent'),
|
|
250
|
+
|
|
251
|
+
'button-tertiary-border-color': color('transparent'),
|
|
252
|
+
'button-tertiary-border-color--hover': color('transparent'),
|
|
253
|
+
'button-tertiary-border-color--focus': color('transparent'),
|
|
254
|
+
'button-tertiary-border-color--active': color('accent', 0.6),
|
|
255
|
+
'button-tertiary-border-color--disabled': color('transparent'),
|
|
256
|
+
|
|
257
|
+
'button-tertiary-color': color('neutral-darker'),
|
|
258
|
+
'button-tertiary-color--hover': color('accent'),
|
|
259
|
+
'button-tertiary-color--focus': color('primary'),
|
|
260
|
+
'button-tertiary-color--active': color('accent', 0.6),
|
|
261
|
+
'button-tertiary-color--disabled': color('neutral-darker'),
|
|
262
|
+
|
|
263
|
+
'button-tertiary-outline': 'none',
|
|
264
|
+
'button-tertiary-box-shadow': 'none',
|
|
265
|
+
|
|
241
266
|
// button warning
|
|
242
267
|
'button-warning-background': color('transparent'),
|
|
243
268
|
'button-warning-background--hover': color('warning', 0.2),
|
|
@@ -257,7 +282,8 @@ const loadsmart = {
|
|
|
257
282
|
'button-warning-color--active': color('warning'),
|
|
258
283
|
'button-warning-color--disabled': color('warning-dark'),
|
|
259
284
|
|
|
260
|
-
'button-warning-outline':
|
|
285
|
+
'button-warning-outline': 'none',
|
|
286
|
+
'button-warning-box-shadow': shadow('glow-warning'),
|
|
261
287
|
|
|
262
288
|
// button icon
|
|
263
289
|
'button-icon-border-radius': border.radius('circle'),
|
|
@@ -283,17 +309,18 @@ const loadsmart = {
|
|
|
283
309
|
'button-icon-color--active': color('neutral-darkest'),
|
|
284
310
|
'button-icon-color--disabled': color('neutral-darkest'),
|
|
285
311
|
|
|
286
|
-
'button-icon-
|
|
312
|
+
'button-icon-box-shadow': shadow('glow-primary'),
|
|
313
|
+
'button-icon-outline': 'none',
|
|
287
314
|
|
|
288
315
|
// tag
|
|
289
316
|
'tag-border-radius': rem('30px'),
|
|
290
317
|
'tag-border-width': border.width('thin'),
|
|
291
|
-
'tag-font-weight': font.weight('bold'),
|
|
292
318
|
'tag-font-height': font.height('1'),
|
|
293
319
|
'tag-spacing': `0 ${spacing('s')}`,
|
|
294
|
-
'tag-spacing
|
|
320
|
+
'tag-removable-spacing': `0 ${spacing('xs')} 0 ${spacing('s')}`,
|
|
295
321
|
'tag-width': 'auto',
|
|
296
|
-
'tag-
|
|
322
|
+
'tag-box-shadow': shadow('glow-primary'),
|
|
323
|
+
'tag-outline-offset': '0',
|
|
297
324
|
|
|
298
325
|
'tag-remove-button-background': color('neutral-white'),
|
|
299
326
|
'tag-remove-button-border-radius': rem('24px'),
|
|
@@ -301,15 +328,18 @@ const loadsmart = {
|
|
|
301
328
|
|
|
302
329
|
// tag small
|
|
303
330
|
'tag-small-font-size': font.size('6'),
|
|
331
|
+
'tag-small-font-weight': font.weight('bold'),
|
|
304
332
|
'tag-small-height': rem('16px'),
|
|
305
333
|
'tag-small-transform': 'uppercase',
|
|
306
334
|
'tag-small-leading-display': 'none',
|
|
307
335
|
'tag-small-remove-button-size': rem('0'),
|
|
308
336
|
'tag-small-remove-button-icon-size': rem('0'),
|
|
309
|
-
'tag-small-spacing
|
|
337
|
+
'tag-small-spacing': `0 ${spacing('s')}`,
|
|
338
|
+
'tag-small-removable-spacing': `0 ${spacing('s')}`,
|
|
310
339
|
|
|
311
340
|
// tag medium
|
|
312
341
|
'tag-font-size': font.size('5'),
|
|
342
|
+
'tag-font-weight': font.weight('bold'),
|
|
313
343
|
'tag-height': rem('24px'),
|
|
314
344
|
'tag-transform': 'none',
|
|
315
345
|
'tag-leading-display': 'inline-flex',
|
|
@@ -318,11 +348,13 @@ const loadsmart = {
|
|
|
318
348
|
|
|
319
349
|
// tag large
|
|
320
350
|
'tag-large-font-size': font.size('4'),
|
|
351
|
+
'tag-large-font-weight': font.weight('bold'),
|
|
321
352
|
'tag-large-height': rem('32px'),
|
|
322
353
|
'tag-large-transform': 'none',
|
|
323
354
|
'tag-large-leading-display': 'inline-flex',
|
|
324
355
|
'tag-large-remove-button-size': rem('24px'),
|
|
325
356
|
'tag-large-remove-button-icon-size': rem('12px'),
|
|
357
|
+
'tag-large-spacing': `0 ${spacing('s')}`,
|
|
326
358
|
|
|
327
359
|
// tag default
|
|
328
360
|
'tag-default-background': color('neutral-light'),
|
|
@@ -337,6 +369,8 @@ const loadsmart = {
|
|
|
337
369
|
'tag-default-border-color--hover': 'transparent',
|
|
338
370
|
'tag-default-border-color--focus': 'transparent',
|
|
339
371
|
|
|
372
|
+
'tag-default-outline': 'none',
|
|
373
|
+
|
|
340
374
|
// tag outline
|
|
341
375
|
'tag-outlined-background': color('transparent'),
|
|
342
376
|
'tag-outlined-background--hover': color('accent', 0.4),
|
|
@@ -350,6 +384,8 @@ const loadsmart = {
|
|
|
350
384
|
'tag-outlined-border-color--hover': color('neutral-darkest'),
|
|
351
385
|
'tag-outlined-border-color--focus': color('neutral-darker'),
|
|
352
386
|
|
|
387
|
+
'tag-outline-outline': 'none',
|
|
388
|
+
|
|
353
389
|
// tag accent
|
|
354
390
|
'tag-accent-background': color('accent', 0.2),
|
|
355
391
|
'tag-accent-background--hover': color('accent', 0.4),
|
|
@@ -363,6 +399,8 @@ const loadsmart = {
|
|
|
363
399
|
'tag-accent-border-color--hover': 'transparent',
|
|
364
400
|
'tag-accent-border-color--focus': 'transparent',
|
|
365
401
|
|
|
402
|
+
'tag-accent-outline': 'none',
|
|
403
|
+
|
|
366
404
|
// tag success
|
|
367
405
|
'tag-success-background': color('success-light'),
|
|
368
406
|
'tag-success-background--hover': color('success-light'),
|
|
@@ -376,6 +414,8 @@ const loadsmart = {
|
|
|
376
414
|
'tag-success-border-color--hover': color('success-light'),
|
|
377
415
|
'tag-success-border-color--focus': color('success-light'),
|
|
378
416
|
|
|
417
|
+
'tag-success-outline': 'none',
|
|
418
|
+
|
|
379
419
|
// tag warning
|
|
380
420
|
'tag-warning-background': color('warning-light'),
|
|
381
421
|
'tag-warning-background--hover': color('warning-light'),
|
|
@@ -389,6 +429,8 @@ const loadsmart = {
|
|
|
389
429
|
'tag-warning-border-color--hover': color('warning-light'),
|
|
390
430
|
'tag-warning-border-color--focus': color('warning-light'),
|
|
391
431
|
|
|
432
|
+
'tag-warning-outline': 'none',
|
|
433
|
+
|
|
392
434
|
// tag danger
|
|
393
435
|
'tag-danger-background': color('danger-light'),
|
|
394
436
|
'tag-danger-background--hover': color('danger-light'),
|
|
@@ -401,6 +443,9 @@ const loadsmart = {
|
|
|
401
443
|
'tag-danger-border-color': color('danger-light'),
|
|
402
444
|
'tag-danger-border-color--hover': color('danger-light'),
|
|
403
445
|
'tag-danger-border-color--focus': color('danger-light'),
|
|
446
|
+
|
|
447
|
+
'tag-danger-outline': 'none',
|
|
448
|
+
|
|
404
449
|
// checkbox
|
|
405
450
|
'checkbox-color': color('neutral-darker'),
|
|
406
451
|
'checkbox-font-weight': font.weight('medium'),
|
|
@@ -408,7 +453,9 @@ const loadsmart = {
|
|
|
408
453
|
|
|
409
454
|
'checkbox-selector-border-radius': border.radius('s'),
|
|
410
455
|
'checkbox-selector-size': rem('16px'),
|
|
411
|
-
'checkbox-selector-
|
|
456
|
+
'checkbox-selector-box-shadow': shadow('glow-primary'),
|
|
457
|
+
'checkbox-selector-outline': 'none',
|
|
458
|
+
'checkbox-selector-outline-offset': '0',
|
|
412
459
|
|
|
413
460
|
'checkbox-small-font-size': font.size('5'),
|
|
414
461
|
|
|
@@ -454,7 +501,7 @@ const loadsmart = {
|
|
|
454
501
|
|
|
455
502
|
'radio-selector-border-radius': border.radius('circle'),
|
|
456
503
|
'radio-selector-size': rem('24px'),
|
|
457
|
-
'radio-selector-
|
|
504
|
+
'radio-selector-box-shadow': shadow('glow-primary'),
|
|
458
505
|
|
|
459
506
|
'radio-small-font-size': font.size('5'),
|
|
460
507
|
'radio-small-selector-size': rem('16px'),
|
|
@@ -522,7 +569,9 @@ const loadsmart = {
|
|
|
522
569
|
'text-field-padding-x': spacing('s'),
|
|
523
570
|
'text-field-padding-y': spacing('s'),
|
|
524
571
|
|
|
525
|
-
'text-field-
|
|
572
|
+
'text-field-box-shadow': shadow('glow-primary'),
|
|
573
|
+
'text-field-outline': 'none',
|
|
574
|
+
'text-field-outline-offset': '0',
|
|
526
575
|
|
|
527
576
|
'text-field-small-height': height('small'),
|
|
528
577
|
'text-field-small-padding-x': spacing('s'),
|
|
@@ -556,7 +605,7 @@ const loadsmart = {
|
|
|
556
605
|
'text-field-success-border-color': color('accent'),
|
|
557
606
|
'text-field-danger-border-color': color('danger'),
|
|
558
607
|
|
|
559
|
-
'text-field-dark-
|
|
608
|
+
'text-field-dark-box-shadow': color('neutral', 0.4),
|
|
560
609
|
|
|
561
610
|
// textarea
|
|
562
611
|
'textarea-border-radius': border.radius('s'),
|
|
@@ -568,7 +617,9 @@ const loadsmart = {
|
|
|
568
617
|
'textarea-padding-x': spacing('s'),
|
|
569
618
|
'textarea-padding-y': spacing('s'),
|
|
570
619
|
|
|
571
|
-
'textarea-
|
|
620
|
+
'textarea-box-shadow': shadow('glow-primary'),
|
|
621
|
+
'textarea-outline': 'none',
|
|
622
|
+
'textarea-outline-offset': '0',
|
|
572
623
|
|
|
573
624
|
'textarea-small-padding-x': spacing('s'),
|
|
574
625
|
'textarea-small-padding-y': spacing('xs'),
|
|
@@ -601,7 +652,7 @@ const loadsmart = {
|
|
|
601
652
|
'textarea-success-border-color': color('accent'),
|
|
602
653
|
'textarea-danger-border-color': color('danger'),
|
|
603
654
|
|
|
604
|
-
'textarea-dark-
|
|
655
|
+
'textarea-dark-box-shadow': color('neutral', 0.4),
|
|
605
656
|
|
|
606
657
|
// link
|
|
607
658
|
'link-font-size': font.size('3'),
|
|
@@ -611,6 +662,10 @@ const loadsmart = {
|
|
|
611
662
|
'link-font-weight': font.weight('medium'),
|
|
612
663
|
'link-font-weight--hover': font.weight('bold'),
|
|
613
664
|
|
|
665
|
+
'link-box-shadow': shadow('glow-primary'),
|
|
666
|
+
'link-outline': 'none',
|
|
667
|
+
'link-outline-offset': '0',
|
|
668
|
+
|
|
614
669
|
// breadcrumbs
|
|
615
670
|
'breadcrumbs-font-size': font.size('2'),
|
|
616
671
|
'breadcrumbs-font-height': font.height('2'),
|
|
@@ -735,7 +790,9 @@ const loadsmart = {
|
|
|
735
790
|
'switch-height': rem('22px'),
|
|
736
791
|
'switch-border-radius': rem('22px'),
|
|
737
792
|
|
|
738
|
-
'switch-
|
|
793
|
+
'switch-box-shadow': shadow('glow-primary'),
|
|
794
|
+
'switch-outline': 'none',
|
|
795
|
+
'switch-outline-offset': '0',
|
|
739
796
|
|
|
740
797
|
// Switch Large
|
|
741
798
|
'switch-large-width': rem('70px'),
|
|
@@ -876,11 +933,16 @@ const loadsmart = {
|
|
|
876
933
|
'top-navigation-item-color--hover': color('primary'),
|
|
877
934
|
|
|
878
935
|
// Select
|
|
936
|
+
'select-trigger-height': '100%',
|
|
937
|
+
'select-trigger-border-color': color('neutral-lighter'),
|
|
879
938
|
'select-selected-option-check-color': color('accent'),
|
|
880
939
|
'select-selected-option-background-color': color('accent', 0.2),
|
|
881
940
|
|
|
882
941
|
// Toggle & Toggle Group
|
|
883
942
|
'toggle-text-transform': 'uppercase',
|
|
943
|
+
'toggle-box-shadow': shadow('glow-primary'),
|
|
944
|
+
'toggle-outline': 'none',
|
|
945
|
+
'toggle-outline-offset': '0',
|
|
884
946
|
'toggle-background-color': color('transparent'),
|
|
885
947
|
'toggle-background-color--hover': color('transparent'),
|
|
886
948
|
'toggle-background-color--focus': color('transparent'),
|
|
@@ -941,10 +1003,17 @@ const loadsmart = {
|
|
|
941
1003
|
'toggle-group-single-padding': '3px',
|
|
942
1004
|
|
|
943
1005
|
// dropdown
|
|
1006
|
+
'dropdown-trigger-border-color': color('primary'),
|
|
1007
|
+
'dropdown-trigger-dark-border-color': color('neutral-light'),
|
|
1008
|
+
'dropdown-trigger-outlined-border-color': color('transparent'),
|
|
944
1009
|
'dropdown-trigger-expanded-color': color('accent'),
|
|
945
1010
|
'dropdown-trigger-height': height('default'),
|
|
946
1011
|
'dropdown-trigger-small-height': height('small'),
|
|
947
1012
|
'dropdown-trigger-large-height': height('large'),
|
|
1013
|
+
|
|
1014
|
+
'dropdown-trigger-box-shadow': shadow('glow-primary'),
|
|
1015
|
+
'dropdown-trigger-outline': 'none',
|
|
1016
|
+
'dropdown-trigger-outline-offset': '0',
|
|
948
1017
|
}
|
|
949
1018
|
|
|
950
1019
|
export default loadsmart
|