@descope/web-components-ui 1.0.273 → 1.0.275
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +202 -101
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.esm.js +247 -112
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/2481.js +1 -1
- package/dist/umd/button-selection-group-fields-descope-button-selection-group-item-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/button-selection-group-fields/descope-button-selection-group-item/ButtonSelectionGroupItemClass.js +5 -0
- package/src/components/descope-grid/GridClass.js +7 -5
- package/src/components/descope-password/PasswordClass.js +2 -4
- package/src/darkTheme.js +48 -0
- package/src/helpers/themeHelpers/colorsHelpers.js +77 -9
- package/src/index.d.ts +2 -2
- package/src/index.js +1 -0
- package/src/theme/components/badge.js +1 -1
- package/src/theme/components/button.js +7 -5
- package/src/theme/components/buttonSelectionGroup/buttonSelectionGroupItem.js +9 -4
- package/src/theme/components/comboBox.js +1 -1
- package/src/theme/components/container.js +1 -1
- package/src/theme/components/divider.js +1 -1
- package/src/theme/components/grid.js +10 -10
- package/src/theme/components/inputWrapper.js +10 -10
- package/src/theme/components/loader/loaderLinear.js +1 -1
- package/src/theme/components/modal.js +1 -1
- package/src/theme/components/multiSelectComboBox.js +2 -2
- package/src/theme/components/password.js +1 -0
- package/src/theme/components/switchToggle.js +3 -4
- package/src/theme/components/text.js +2 -2
- package/src/theme/components/textArea.js +0 -7
- package/src/theme/globals.js +36 -11
package/dist/cjs/index.cjs.js
CHANGED
@@ -358,25 +358,93 @@ const createHelperVars = (theme, prefix) => {
|
|
358
358
|
return [res.theme, res.useVars, res.vars];
|
359
359
|
};
|
360
360
|
|
361
|
-
const
|
362
|
-
|
363
|
-
|
361
|
+
const colorGaps = {
|
362
|
+
darkLight: 0.4,
|
363
|
+
highlight: 0.8,
|
364
|
+
contrast: 1,
|
365
|
+
edgeColor: {
|
366
|
+
darkLight: 0.25,
|
367
|
+
highlight: 0.1,
|
368
|
+
},
|
369
|
+
};
|
370
|
+
|
371
|
+
const darken = (c, percentage) => c.darken(percentage).hex();
|
372
|
+
|
373
|
+
const contrast = (c) => {
|
364
374
|
const isDark = c.isDark();
|
365
375
|
return c
|
366
|
-
.mix(Color(isDark ? 'white' : 'black'),
|
376
|
+
.mix(Color(isDark ? 'white' : 'black'), colorGaps.contrast)
|
367
377
|
.saturate(1)
|
368
378
|
.hex();
|
369
379
|
};
|
370
380
|
|
371
|
-
const
|
381
|
+
const lighten = (c, percentage) => {
|
382
|
+
const isDark = c.lightness() < 0.5;
|
383
|
+
|
384
|
+
if (isDark) {
|
385
|
+
return c.lightness(percentage * 100).hex();
|
386
|
+
}
|
387
|
+
|
388
|
+
return c.lighten(percentage).hex();
|
389
|
+
};
|
390
|
+
|
391
|
+
const isNearBlack = (color) => color.luminosity() < 0.01;
|
392
|
+
const isNearWhite = (color) => color.luminosity() > 0.99;
|
393
|
+
|
394
|
+
const generateDarkColor = (color, theme) => {
|
395
|
+
if (color.dark) return color.dark;
|
396
|
+
|
397
|
+
if (theme === 'dark') {
|
398
|
+
return isNearWhite(color)
|
399
|
+
? darken(color, colorGaps.edgeColor.darkLight)
|
400
|
+
: lighten(color, colorGaps.darkLight);
|
401
|
+
}
|
402
|
+
|
403
|
+
return isNearBlack(color)
|
404
|
+
? lighten(color, colorGaps.edgeColor.darkLight)
|
405
|
+
: darken(color, colorGaps.darkLight);
|
406
|
+
};
|
407
|
+
|
408
|
+
const generateLightColor = (color, theme) => {
|
409
|
+
if (color.light) return color.light;
|
410
|
+
|
411
|
+
if (theme === 'dark') {
|
412
|
+
return isNearBlack(color)
|
413
|
+
? lighten(color, colorGaps.edgeColor.darkLight)
|
414
|
+
: darken(color, colorGaps.darkLight);
|
415
|
+
}
|
416
|
+
|
417
|
+
return isNearWhite(color)
|
418
|
+
? darken(color, colorGaps.edgeColor.darkLight)
|
419
|
+
: lighten(color, colorGaps.darkLight);
|
420
|
+
};
|
421
|
+
|
422
|
+
const generateHighlightColor = (color, theme) => {
|
423
|
+
if (color.highlight) return color.highlight;
|
424
|
+
|
425
|
+
if (theme === 'dark') {
|
426
|
+
return isNearBlack(color)
|
427
|
+
? lighten(color, colorGaps.edgeColor.highlight)
|
428
|
+
: darken(color, colorGaps.highlight);
|
429
|
+
}
|
430
|
+
|
431
|
+
return isNearWhite(color)
|
432
|
+
? darken(color, colorGaps.edgeColor.highlight)
|
433
|
+
: lighten(color, colorGaps.highlight);
|
434
|
+
};
|
435
|
+
|
436
|
+
const genColor = (color, theme) => {
|
372
437
|
const mainColor = new Color(color.main || color);
|
373
438
|
|
374
|
-
|
439
|
+
const res = {
|
375
440
|
main: mainColor.hex(),
|
376
|
-
dark:
|
377
|
-
light:
|
378
|
-
|
441
|
+
dark: generateDarkColor(mainColor, theme),
|
442
|
+
light: generateLightColor(mainColor, theme),
|
443
|
+
highlight: generateHighlightColor(mainColor, theme),
|
444
|
+
contrast: color.contrast || contrast(mainColor),
|
379
445
|
};
|
446
|
+
|
447
|
+
return res;
|
380
448
|
};
|
381
449
|
|
382
450
|
const genColors = (colors) => {
|
@@ -391,17 +459,43 @@ const genColors = (colors) => {
|
|
391
459
|
|
392
460
|
const direction = 'ltr';
|
393
461
|
|
394
|
-
const colors =
|
462
|
+
const colors = {
|
395
463
|
surface: {
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
464
|
+
dark: '#636c74',
|
465
|
+
main: '#ffffff',
|
466
|
+
light: '#cfd3d7',
|
467
|
+
highlight: '#f4f5f6',
|
468
|
+
contrast: '#181a1c',
|
469
|
+
},
|
470
|
+
primary: {
|
471
|
+
main: '#006af5',
|
472
|
+
dark: '#004094',
|
473
|
+
light: '#71aeff',
|
474
|
+
highlight: '#f0f6ff',
|
475
|
+
contrast: '#ffffff',
|
476
|
+
},
|
477
|
+
secondary: {
|
478
|
+
dark: '#6410bc',
|
479
|
+
main: '#802ed6',
|
480
|
+
light: '#be89f5',
|
481
|
+
highlight: '#ede7f6',
|
482
|
+
contrast: '#ffffff',
|
483
|
+
},
|
484
|
+
success: {
|
485
|
+
main: '#008000',
|
486
|
+
dark: '#005700',
|
487
|
+
light: '#8bc38b',
|
488
|
+
highlight: '#f5faf5',
|
489
|
+
contrast: '#ffffff',
|
490
|
+
},
|
491
|
+
error: {
|
492
|
+
main: '#e21d12',
|
493
|
+
dark: '#b3170f',
|
494
|
+
light: '#f4807a',
|
495
|
+
highlight: '#fef1f1',
|
496
|
+
contrast: '#ffffff',
|
497
|
+
},
|
498
|
+
};
|
405
499
|
|
406
500
|
const fonts = {
|
407
501
|
font1: {
|
@@ -2566,15 +2660,15 @@ loadingIndicatorStyles = `
|
|
2566
2660
|
}
|
2567
2661
|
`;
|
2568
2662
|
|
2569
|
-
const globalRefs$
|
2663
|
+
const globalRefs$h = getThemeRefs(globals);
|
2570
2664
|
const compVars$4 = ButtonClass.cssVarList;
|
2571
2665
|
|
2572
2666
|
const mode = {
|
2573
|
-
primary: globalRefs$
|
2574
|
-
secondary: globalRefs$
|
2575
|
-
success: globalRefs$
|
2576
|
-
error: globalRefs$
|
2577
|
-
surface: globalRefs$
|
2667
|
+
primary: globalRefs$h.colors.primary,
|
2668
|
+
secondary: globalRefs$h.colors.secondary,
|
2669
|
+
success: globalRefs$h.colors.success,
|
2670
|
+
error: globalRefs$h.colors.error,
|
2671
|
+
surface: globalRefs$h.colors.surface,
|
2578
2672
|
};
|
2579
2673
|
|
2580
2674
|
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$F);
|
@@ -2582,15 +2676,15 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, c
|
|
2582
2676
|
const button = {
|
2583
2677
|
...helperTheme$3,
|
2584
2678
|
|
2585
|
-
[compVars$4.fontFamily]: globalRefs$
|
2679
|
+
[compVars$4.fontFamily]: globalRefs$h.fonts.font1.family,
|
2586
2680
|
|
2587
2681
|
[compVars$4.cursor]: 'pointer',
|
2588
2682
|
[compVars$4.hostHeight]: '3em',
|
2589
2683
|
[compVars$4.hostWidth]: 'auto',
|
2590
|
-
[compVars$4.hostDirection]: globalRefs$
|
2684
|
+
[compVars$4.hostDirection]: globalRefs$h.direction,
|
2591
2685
|
|
2592
|
-
[compVars$4.borderRadius]: globalRefs$
|
2593
|
-
[compVars$4.borderWidth]: globalRefs$
|
2686
|
+
[compVars$4.borderRadius]: globalRefs$h.radius.sm,
|
2687
|
+
[compVars$4.borderWidth]: globalRefs$h.border.xs,
|
2594
2688
|
[compVars$4.borderStyle]: 'solid',
|
2595
2689
|
[compVars$4.borderColor]: 'transparent',
|
2596
2690
|
|
@@ -2633,10 +2727,10 @@ const button = {
|
|
2633
2727
|
},
|
2634
2728
|
|
2635
2729
|
_disabled: {
|
2636
|
-
[helperVars$3.main]: globalRefs$
|
2637
|
-
[helperVars$3.dark]: globalRefs$
|
2638
|
-
[helperVars$3.light]: globalRefs$
|
2639
|
-
[helperVars$3.contrast]: globalRefs$
|
2730
|
+
[helperVars$3.main]: globalRefs$h.colors.surface.light,
|
2731
|
+
[helperVars$3.dark]: globalRefs$h.colors.surface.dark,
|
2732
|
+
[helperVars$3.light]: globalRefs$h.colors.surface.light,
|
2733
|
+
[helperVars$3.contrast]: globalRefs$h.colors.surface.main,
|
2640
2734
|
},
|
2641
2735
|
|
2642
2736
|
variant: {
|
@@ -2656,12 +2750,14 @@ const button = {
|
|
2656
2750
|
|
2657
2751
|
outline: {
|
2658
2752
|
[compVars$4.labelTextColor]: helperRefs$3.main,
|
2659
|
-
[compVars$4.borderColor]:
|
2753
|
+
[compVars$4.borderColor]: helperRefs$3.main,
|
2660
2754
|
_hover: {
|
2661
2755
|
[compVars$4.labelTextColor]: helperRefs$3.dark,
|
2756
|
+
[compVars$4.borderColor]: helperRefs$3.dark,
|
2662
2757
|
},
|
2663
2758
|
_active: {
|
2664
2759
|
[compVars$4.labelTextColor]: helperRefs$3.main,
|
2760
|
+
[compVars$4.borderColor]: helperRefs$3.main,
|
2665
2761
|
},
|
2666
2762
|
},
|
2667
2763
|
|
@@ -2672,13 +2768,13 @@ const button = {
|
|
2672
2768
|
[compVars$4.labelTextDecoration]: 'underline',
|
2673
2769
|
},
|
2674
2770
|
_active: {
|
2675
|
-
[compVars$4.labelTextColor]: helperRefs$3.
|
2771
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
2676
2772
|
},
|
2677
2773
|
},
|
2678
2774
|
},
|
2679
2775
|
|
2680
2776
|
_focused: {
|
2681
|
-
[compVars$4.outlineColor]:
|
2777
|
+
[compVars$4.outlineColor]: helperRefs$3.light,
|
2682
2778
|
},
|
2683
2779
|
};
|
2684
2780
|
|
@@ -2932,21 +3028,21 @@ const TextFieldClass = compose(
|
|
2932
3028
|
);
|
2933
3029
|
|
2934
3030
|
const componentName$D = getComponentName('input-wrapper');
|
2935
|
-
const globalRefs$
|
3031
|
+
const globalRefs$g = getThemeRefs(globals);
|
2936
3032
|
|
2937
3033
|
const [theme$1, refs, vars$w] = createHelperVars(
|
2938
3034
|
{
|
2939
|
-
labelTextColor: globalRefs$
|
2940
|
-
valueTextColor: globalRefs$
|
2941
|
-
placeholderTextColor: globalRefs$
|
3035
|
+
labelTextColor: globalRefs$g.colors.surface.dark,
|
3036
|
+
valueTextColor: globalRefs$g.colors.surface.contrast,
|
3037
|
+
placeholderTextColor: globalRefs$g.colors.surface.dark,
|
2942
3038
|
requiredIndicator: "'*'",
|
2943
|
-
errorMessageTextColor: globalRefs$
|
3039
|
+
errorMessageTextColor: globalRefs$g.colors.error.main,
|
2944
3040
|
|
2945
|
-
borderWidth: globalRefs$
|
2946
|
-
borderRadius: globalRefs$
|
3041
|
+
borderWidth: globalRefs$g.border.xs,
|
3042
|
+
borderRadius: globalRefs$g.radius.xs,
|
2947
3043
|
borderColor: 'transparent',
|
2948
3044
|
|
2949
|
-
outlineWidth: globalRefs$
|
3045
|
+
outlineWidth: globalRefs$g.border.sm,
|
2950
3046
|
outlineStyle: 'solid',
|
2951
3047
|
outlineColor: 'transparent',
|
2952
3048
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -2957,11 +3053,11 @@ const [theme$1, refs, vars$w] = createHelperVars(
|
|
2957
3053
|
horizontalPadding: '0.5em',
|
2958
3054
|
verticalPadding: '0.5em',
|
2959
3055
|
|
2960
|
-
backgroundColor: globalRefs$
|
3056
|
+
backgroundColor: globalRefs$g.colors.surface.main,
|
2961
3057
|
|
2962
|
-
fontFamily: globalRefs$
|
3058
|
+
fontFamily: globalRefs$g.fonts.font1.family,
|
2963
3059
|
|
2964
|
-
direction: globalRefs$
|
3060
|
+
direction: globalRefs$g.direction,
|
2965
3061
|
|
2966
3062
|
overlayOpacity: '0.3',
|
2967
3063
|
|
@@ -2977,27 +3073,27 @@ const [theme$1, refs, vars$w] = createHelperVars(
|
|
2977
3073
|
},
|
2978
3074
|
|
2979
3075
|
_focused: {
|
2980
|
-
outlineColor: globalRefs$
|
3076
|
+
outlineColor: globalRefs$g.colors.surface.light,
|
2981
3077
|
_invalid: {
|
2982
|
-
outlineColor: globalRefs$
|
3078
|
+
outlineColor: globalRefs$g.colors.error.main,
|
2983
3079
|
},
|
2984
3080
|
},
|
2985
3081
|
|
2986
3082
|
_bordered: {
|
2987
|
-
outlineWidth: globalRefs$
|
2988
|
-
borderColor: globalRefs$
|
3083
|
+
outlineWidth: globalRefs$g.border.xs,
|
3084
|
+
borderColor: globalRefs$g.colors.surface.light,
|
2989
3085
|
borderStyle: 'solid',
|
2990
3086
|
_invalid: {
|
2991
|
-
borderColor: globalRefs$
|
3087
|
+
borderColor: globalRefs$g.colors.error.main,
|
2992
3088
|
},
|
2993
3089
|
},
|
2994
3090
|
|
2995
3091
|
_disabled: {
|
2996
|
-
labelTextColor: globalRefs$
|
2997
|
-
borderColor: globalRefs$
|
2998
|
-
valueTextColor: globalRefs$
|
2999
|
-
placeholderTextColor: globalRefs$
|
3000
|
-
backgroundColor: globalRefs$
|
3092
|
+
labelTextColor: globalRefs$g.colors.surface.light,
|
3093
|
+
borderColor: globalRefs$g.colors.surface.light,
|
3094
|
+
valueTextColor: globalRefs$g.colors.surface.light,
|
3095
|
+
placeholderTextColor: globalRefs$g.colors.surface.light,
|
3096
|
+
backgroundColor: globalRefs$g.colors.surface.main,
|
3001
3097
|
},
|
3002
3098
|
},
|
3003
3099
|
componentName$D
|
@@ -3140,10 +3236,7 @@ const PasswordClass = compose(
|
|
3140
3236
|
labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
|
3141
3237
|
errorMessageTextColor: { ...errorMessage$a, property: 'color' },
|
3142
3238
|
|
3143
|
-
inputValueTextColor:
|
3144
|
-
{ ...inputElement$2, property: 'color' },
|
3145
|
-
{ ...revealButtonIcon, property: 'color' },
|
3146
|
-
],
|
3239
|
+
inputValueTextColor: { ...inputElement$2, property: 'color' },
|
3147
3240
|
inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
3148
3241
|
|
3149
3242
|
revealButtonOffset: [
|
@@ -3151,6 +3244,7 @@ const PasswordClass = compose(
|
|
3151
3244
|
{ ...revealButtonContainer, property: 'margin-left' },
|
3152
3245
|
],
|
3153
3246
|
revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
|
3247
|
+
revealButtonColor: { ...revealButtonIcon, property: 'color' },
|
3154
3248
|
},
|
3155
3249
|
}),
|
3156
3250
|
draggableMixin,
|
@@ -3217,7 +3311,7 @@ const PasswordClass = compose(
|
|
3217
3311
|
})
|
3218
3312
|
);
|
3219
3313
|
|
3220
|
-
const globalRefs$
|
3314
|
+
const globalRefs$f = getThemeRefs(globals);
|
3221
3315
|
const vars$u = PasswordClass.cssVarList;
|
3222
3316
|
|
3223
3317
|
const password = {
|
@@ -3241,8 +3335,9 @@ const password = {
|
|
3241
3335
|
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
3242
3336
|
[vars$u.inputOutlineColor]: refs.outlineColor,
|
3243
3337
|
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
3244
|
-
[vars$u.revealButtonOffset]: globalRefs$
|
3338
|
+
[vars$u.revealButtonOffset]: globalRefs$f.spacing.md,
|
3245
3339
|
[vars$u.revealButtonSize]: refs.toggleButtonSize,
|
3340
|
+
[vars$u.revealButtonColor]: refs.placeholderTextColor,
|
3246
3341
|
};
|
3247
3342
|
|
3248
3343
|
var password$1 = /*#__PURE__*/Object.freeze({
|
@@ -3464,7 +3559,6 @@ const TextAreaClass = compose(
|
|
3464
3559
|
})
|
3465
3560
|
);
|
3466
3561
|
|
3467
|
-
const globalRefs$f = getThemeRefs(globals);
|
3468
3562
|
const vars$r = TextAreaClass.cssVarList;
|
3469
3563
|
|
3470
3564
|
const textArea = {
|
@@ -3495,10 +3589,6 @@ const textArea = {
|
|
3495
3589
|
center: { [vars$r.inputTextAlign]: 'center' },
|
3496
3590
|
},
|
3497
3591
|
|
3498
|
-
_disabled: {
|
3499
|
-
[vars$r.inputBackgroundColor]: globalRefs$f.colors.surface.light,
|
3500
|
-
},
|
3501
|
-
|
3502
3592
|
_readonly: {
|
3503
3593
|
[vars$r.inputResizeType]: 'none',
|
3504
3594
|
},
|
@@ -3912,7 +4002,7 @@ const switchToggle = {
|
|
3912
4002
|
[vars$p.trackBorderStyle]: refs.borderStyle,
|
3913
4003
|
[vars$p.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
3914
4004
|
[vars$p.trackBorderColor]: refs.borderColor,
|
3915
|
-
[vars$p.trackBackgroundColor]:
|
4005
|
+
[vars$p.trackBackgroundColor]: refs.backgroundColor,
|
3916
4006
|
[vars$p.trackBorderRadius]: globalRefs$e.radius.md,
|
3917
4007
|
[vars$p.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
3918
4008
|
[vars$p.trackHeight]: checkboxHeight,
|
@@ -3921,7 +4011,7 @@ const switchToggle = {
|
|
3921
4011
|
[vars$p.knobRadius]: '50%',
|
3922
4012
|
[vars$p.knobTopOffset]: '1px',
|
3923
4013
|
[vars$p.knobLeftOffset]: knobMargin,
|
3924
|
-
[vars$p.knobColor]: refs.
|
4014
|
+
[vars$p.knobColor]: refs.labelTextColor,
|
3925
4015
|
[vars$p.knobTransitionDuration]: '0.3s',
|
3926
4016
|
|
3927
4017
|
[vars$p.labelTextColor]: refs.labelTextColor,
|
@@ -3933,7 +4023,6 @@ const switchToggle = {
|
|
3933
4023
|
|
3934
4024
|
_checked: {
|
3935
4025
|
[vars$p.trackBorderColor]: refs.borderColor,
|
3936
|
-
[vars$p.trackBackgroundColor]: refs.backgroundColor,
|
3937
4026
|
[vars$p.knobLeftOffset]: `calc(100% - var(${vars$p.knobSize}) - ${knobMargin})`,
|
3938
4027
|
[vars$p.knobColor]: refs.valueTextColor,
|
3939
4028
|
[vars$p.knobTextColor]: refs.valueTextColor,
|
@@ -3941,7 +4030,7 @@ const switchToggle = {
|
|
3941
4030
|
|
3942
4031
|
_disabled: {
|
3943
4032
|
[vars$p.knobColor]: globalRefs$e.colors.surface.light,
|
3944
|
-
[vars$p.trackBorderColor]: globalRefs$e.colors.surface.
|
4033
|
+
[vars$p.trackBorderColor]: globalRefs$e.colors.surface.light,
|
3945
4034
|
[vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
|
3946
4035
|
[vars$p.labelTextColor]: refs.labelTextColor,
|
3947
4036
|
_checked: {
|
@@ -4049,7 +4138,7 @@ const container = {
|
|
4049
4138
|
|
4050
4139
|
[compVars$3.hostWidth]: '100%',
|
4051
4140
|
[compVars$3.boxShadow]: 'none',
|
4052
|
-
[compVars$3.backgroundColor]: globalRefs$d.colors.surface.
|
4141
|
+
[compVars$3.backgroundColor]: globalRefs$d.colors.surface.main,
|
4053
4142
|
[compVars$3.color]: globalRefs$d.colors.surface.contrast,
|
4054
4143
|
[compVars$3.borderRadius]: '0px',
|
4055
4144
|
[compVars$3.hostDirection]: globalRefs$d.direction,
|
@@ -4358,10 +4447,10 @@ const text$2 = {
|
|
4358
4447
|
|
4359
4448
|
mode: {
|
4360
4449
|
primary: {
|
4361
|
-
[vars$k.textColor]: globalRefs$c.colors.
|
4450
|
+
[vars$k.textColor]: globalRefs$c.colors.surface.contrast,
|
4362
4451
|
},
|
4363
4452
|
secondary: {
|
4364
|
-
[vars$k.textColor]: globalRefs$c.colors.
|
4453
|
+
[vars$k.textColor]: globalRefs$c.colors.surface.dark,
|
4365
4454
|
},
|
4366
4455
|
error: {
|
4367
4456
|
[vars$k.textColor]: globalRefs$c.colors.error.main,
|
@@ -4627,7 +4716,7 @@ const divider = {
|
|
4627
4716
|
[compVars$2.flexDirection]: 'row',
|
4628
4717
|
[compVars$2.alignSelf]: 'stretch',
|
4629
4718
|
[compVars$2.hostWidth]: '100%',
|
4630
|
-
[compVars$2.stripeColor]: globalRefs$a.colors.surface.
|
4719
|
+
[compVars$2.stripeColor]: globalRefs$a.colors.surface.light,
|
4631
4720
|
[compVars$2.stripeColorOpacity]: '0.5',
|
4632
4721
|
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
4633
4722
|
[compVars$2.labelTextWidth]: 'fit-content',
|
@@ -5006,7 +5095,7 @@ const loaderLinear = {
|
|
5006
5095
|
[vars$g.barColor]: globalRefs$9.colors.surface.contrast,
|
5007
5096
|
[vars$g.barWidth]: '20%',
|
5008
5097
|
|
5009
|
-
[vars$g.barBackgroundColor]: globalRefs$9.colors.surface.
|
5098
|
+
[vars$g.barBackgroundColor]: globalRefs$9.colors.surface.light,
|
5010
5099
|
[vars$g.barBorderRadius]: '4px',
|
5011
5100
|
|
5012
5101
|
[vars$g.animationDuration]: '2s',
|
@@ -5504,7 +5593,7 @@ const comboBox = {
|
|
5504
5593
|
[vars$e.inputBackgroundColor]: refs.backgroundColor,
|
5505
5594
|
[vars$e.inputHorizontalPadding]: refs.horizontalPadding,
|
5506
5595
|
[vars$e.inputHeight]: refs.inputHeight,
|
5507
|
-
[vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.
|
5596
|
+
[vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.dark,
|
5508
5597
|
[vars$e.inputDropdownButtonCursor]: 'pointer',
|
5509
5598
|
[vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
|
5510
5599
|
[vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
|
@@ -7776,6 +7865,7 @@ class RawSelectItem extends createBaseClass({
|
|
7776
7865
|
`;
|
7777
7866
|
|
7778
7867
|
forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
|
7868
|
+
forwardAttrs(this.baseElement, this, { includeAttrs: ['focused', 'active'] });
|
7779
7869
|
}
|
7780
7870
|
|
7781
7871
|
handleFocus() {
|
@@ -7824,6 +7914,10 @@ const ButtonSelectionGroupItemClass = compose(
|
|
7824
7914
|
selector: () => ButtonClass.componentName,
|
7825
7915
|
property: ButtonClass.cssVarList.borderRadius,
|
7826
7916
|
},
|
7917
|
+
outlineColor: {
|
7918
|
+
selector: () => ButtonClass.componentName,
|
7919
|
+
property: ButtonClass.cssVarList.outlineColor,
|
7920
|
+
},
|
7827
7921
|
},
|
7828
7922
|
}),
|
7829
7923
|
draggableMixin,
|
@@ -7836,20 +7930,25 @@ const vars$8 = ButtonSelectionGroupItemClass.cssVarList;
|
|
7836
7930
|
|
7837
7931
|
const buttonSelectionGroupItem = {
|
7838
7932
|
[vars$8.hostDirection]: 'inherit',
|
7839
|
-
[vars$8.backgroundColor]: globalRefs$6.colors.surface.
|
7933
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
|
7840
7934
|
[vars$8.labelTextColor]: globalRefs$6.colors.surface.contrast,
|
7841
|
-
[vars$8.borderColor]: globalRefs$6.colors.surface.
|
7935
|
+
[vars$8.borderColor]: globalRefs$6.colors.surface.light,
|
7842
7936
|
[vars$8.borderStyle]: 'solid',
|
7843
7937
|
[vars$8.borderRadius]: globalRefs$6.radius.sm,
|
7938
|
+
[vars$8.outlineColor]: 'transparent',
|
7844
7939
|
|
7845
7940
|
_hover: {
|
7846
|
-
[vars$8.backgroundColor]:
|
7941
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.highlight,
|
7942
|
+
},
|
7943
|
+
|
7944
|
+
_focused: {
|
7945
|
+
[vars$8.outlineColor]: globalRefs$6.colors.surface.light,
|
7847
7946
|
},
|
7848
7947
|
|
7849
7948
|
_selected: {
|
7850
7949
|
[vars$8.borderColor]: globalRefs$6.colors.surface.contrast,
|
7851
7950
|
[vars$8.backgroundColor]: globalRefs$6.colors.surface.contrast,
|
7852
|
-
[vars$8.labelTextColor]: globalRefs$6.colors.surface.
|
7951
|
+
[vars$8.labelTextColor]: globalRefs$6.colors.surface.main,
|
7853
7952
|
},
|
7854
7953
|
};
|
7855
7954
|
|
@@ -8540,7 +8639,7 @@ const globalRefs$4 = getThemeRefs(globals);
|
|
8540
8639
|
const compVars = ModalClass.cssVarList;
|
8541
8640
|
|
8542
8641
|
const modal = {
|
8543
|
-
[compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.
|
8642
|
+
[compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.main,
|
8544
8643
|
[compVars.overlayShadow]: globalRefs$4.shadow.wide['2xl'],
|
8545
8644
|
[compVars.overlayWidth]: '540px',
|
8546
8645
|
};
|
@@ -8765,12 +8864,11 @@ const GridClass = compose(
|
|
8765
8864
|
],
|
8766
8865
|
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
8767
8866
|
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
8768
|
-
|
8769
|
-
|
8770
|
-
|
8771
|
-
|
8867
|
+
borderColor: { ...host$1, property: 'border-color' },
|
8868
|
+
borderWidth: { ...host$1, property: 'border-width' },
|
8869
|
+
borderStyle: { ...host$1, property: 'border-style' },
|
8870
|
+
borderRadius: { ...host$1, property: 'border-radius' },
|
8772
8871
|
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
8773
|
-
selectedTextColor: { ...selectedRow, property: 'color' },
|
8774
8872
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
8775
8873
|
separatorColor: [
|
8776
8874
|
{ ...firstRow, property: 'border-bottom-color' },
|
@@ -8795,6 +8893,9 @@ const GridClass = compose(
|
|
8795
8893
|
}
|
8796
8894
|
vaadin-grid-cell-content {
|
8797
8895
|
display: flex;
|
8896
|
+
}
|
8897
|
+
vaadin-grid::part(selected-row-cell) {
|
8898
|
+
background-image: none;
|
8798
8899
|
}
|
8799
8900
|
`,
|
8800
8901
|
excludeAttrsSync: ['columns', 'tabindex'],
|
@@ -8810,28 +8911,28 @@ const grid = {
|
|
8810
8911
|
[vars$4.hostHeight]: '100%',
|
8811
8912
|
[vars$4.hostMinHeight]: '400px',
|
8812
8913
|
[vars$4.fontWeight]: '400',
|
8813
|
-
[vars$4.backgroundColor]: globalRefs$3.colors.surface.
|
8914
|
+
[vars$4.backgroundColor]: globalRefs$3.colors.surface.main,
|
8814
8915
|
|
8815
8916
|
[vars$4.fontSize]: refs.fontSize,
|
8816
8917
|
[vars$4.fontFamily]: refs.fontFamily,
|
8817
8918
|
|
8818
|
-
[vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.
|
8919
|
+
[vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.light,
|
8819
8920
|
[vars$4.activeSortIndicator]: globalRefs$3.colors.surface.dark,
|
8820
|
-
[vars$4.resizeHandleColor]: globalRefs$3.colors.surface.
|
8921
|
+
[vars$4.resizeHandleColor]: globalRefs$3.colors.surface.light,
|
8821
8922
|
|
8822
|
-
[vars$4.
|
8823
|
-
[vars$4.
|
8824
|
-
[vars$4.
|
8825
|
-
[vars$4.
|
8923
|
+
[vars$4.borderWidth]: refs.borderWidth,
|
8924
|
+
[vars$4.borderStyle]: refs.borderStyle,
|
8925
|
+
[vars$4.borderRadius]: refs.borderRadius,
|
8926
|
+
[vars$4.borderColor]: 'transparent',
|
8826
8927
|
|
8827
8928
|
[vars$4.headerRowTextColor]: globalRefs$3.colors.surface.dark,
|
8828
|
-
[vars$4.separatorColor]: globalRefs$3.colors.surface.
|
8929
|
+
[vars$4.separatorColor]: globalRefs$3.colors.surface.light,
|
8829
8930
|
|
8830
8931
|
[vars$4.valueTextColor]: globalRefs$3.colors.surface.contrast,
|
8831
|
-
[vars$4.selectedBackgroundColor]: globalRefs$3.colors.
|
8932
|
+
[vars$4.selectedBackgroundColor]: globalRefs$3.colors.surface.highlight,
|
8832
8933
|
|
8833
8934
|
_bordered: {
|
8834
|
-
[vars$4.
|
8935
|
+
[vars$4.borderColor]: refs.borderColor,
|
8835
8936
|
},
|
8836
8937
|
};
|
8837
8938
|
|
@@ -9642,7 +9743,7 @@ const multiSelectComboBox = {
|
|
9642
9743
|
[vars$2.inputHorizontalPadding]: refs.horizontalPadding,
|
9643
9744
|
[vars$2.inputVerticalPadding]: refs.verticalPadding,
|
9644
9745
|
[vars$2.inputHeight]: refs.inputHeight,
|
9645
|
-
[vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.
|
9746
|
+
[vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.dark,
|
9646
9747
|
[vars$2.inputDropdownButtonCursor]: 'pointer',
|
9647
9748
|
[vars$2.inputDropdownButtonSize]: refs.toggleButtonSize,
|
9648
9749
|
[vars$2.inputDropdownButtonOffset]: globalRefs$1.spacing.xs,
|
@@ -9650,7 +9751,7 @@ const multiSelectComboBox = {
|
|
9650
9751
|
[vars$2.overlayItemPaddingInlineEnd]: globalRefs$1.spacing.lg,
|
9651
9752
|
[vars$2.chipFontSize]: refs.chipFontSize,
|
9652
9753
|
[vars$2.chipTextColor]: globalRefs$1.colors.surface.contrast,
|
9653
|
-
[vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.
|
9754
|
+
[vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.light,
|
9654
9755
|
|
9655
9756
|
_readonly: {
|
9656
9757
|
[vars$2.inputDropdownButtonCursor]: 'default',
|
@@ -9761,7 +9862,7 @@ const badge = {
|
|
9761
9862
|
default: {
|
9762
9863
|
[vars$1.textColor]: globalRefs.colors.surface.dark,
|
9763
9864
|
_bordered: {
|
9764
|
-
[vars$1.borderColor]: globalRefs.colors.surface.
|
9865
|
+
[vars$1.borderColor]: globalRefs.colors.surface.light,
|
9765
9866
|
},
|
9766
9867
|
},
|
9767
9868
|
primary: {
|