@descope/web-components-ui 1.0.273 → 1.0.275
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/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: {
|