@descope/web-components-ui 1.0.272 → 1.0.274
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +128 -90
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.esm.js +176 -93
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/2481.js +1 -1
- package/dist/umd/7044.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/dist/umd/descope-notification-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-grid/descope-grid-text-column/GridTextColumnClass.js +1 -0
- package/src/components/descope-notification/NotificationClass.js +3 -0
- package/src/components/descope-password/PasswordClass.js +2 -4
- package/src/darkTheme.js +48 -0
- package/src/helpers/themeHelpers/colorsHelpers.js +2 -0
- 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 +9 -9
- 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 +34 -8
package/dist/cjs/index.cjs.js
CHANGED
@@ -358,6 +358,7 @@ const createHelperVars = (theme, prefix) => {
|
|
358
358
|
return [res.theme, res.useVars, res.vars];
|
359
359
|
};
|
360
360
|
|
361
|
+
// TODO: fix generated colors strategy
|
361
362
|
const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
|
362
363
|
const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
|
363
364
|
const genContrast = (c, percentage = 0.9) => {
|
@@ -375,6 +376,7 @@ const genColor = (color) => {
|
|
375
376
|
main: mainColor.hex(),
|
376
377
|
dark: color.dark || genDark(mainColor),
|
377
378
|
light: color.light || genLight(mainColor),
|
379
|
+
highlight: color.highlight || genLight(mainColor),
|
378
380
|
contrast: color.contrast || genContrast(mainColor),
|
379
381
|
};
|
380
382
|
};
|
@@ -393,14 +395,40 @@ const direction = 'ltr';
|
|
393
395
|
|
394
396
|
const colors = genColors({
|
395
397
|
surface: {
|
396
|
-
main: '
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
398
|
+
main: '#ffffff',
|
399
|
+
dark: '#636c74',
|
400
|
+
light: '#cfd3d7',
|
401
|
+
highlight: '#f4f5f6',
|
402
|
+
contrast: '#181a1c',
|
403
|
+
},
|
404
|
+
primary: {
|
405
|
+
main: '#006af5',
|
406
|
+
dark: '#004094',
|
407
|
+
light: '#71aeff',
|
408
|
+
highlight: '#f0f6ff',
|
409
|
+
contrast: '#ffffff',
|
410
|
+
},
|
411
|
+
secondary: {
|
412
|
+
main: '#802ed6',
|
413
|
+
dark: '#6410bc',
|
414
|
+
light: '#be89f5',
|
415
|
+
highlight: '#ede7f6',
|
416
|
+
contrast: '#ffffff',
|
417
|
+
},
|
418
|
+
success: {
|
419
|
+
main: '#008000',
|
420
|
+
dark: '#005700',
|
421
|
+
light: '#8bc38b',
|
422
|
+
highlight: '#f5faf5',
|
423
|
+
contrast: '#ffffff',
|
424
|
+
},
|
425
|
+
error: {
|
426
|
+
main: '#e21d12',
|
427
|
+
dark: '#b3170f',
|
428
|
+
light: '#f4807a',
|
429
|
+
highlight: '#fef1f1',
|
430
|
+
contrast: '#ffffff',
|
431
|
+
},
|
404
432
|
});
|
405
433
|
|
406
434
|
const fonts = {
|
@@ -2566,15 +2594,15 @@ loadingIndicatorStyles = `
|
|
2566
2594
|
}
|
2567
2595
|
`;
|
2568
2596
|
|
2569
|
-
const globalRefs$
|
2597
|
+
const globalRefs$h = getThemeRefs(globals);
|
2570
2598
|
const compVars$4 = ButtonClass.cssVarList;
|
2571
2599
|
|
2572
2600
|
const mode = {
|
2573
|
-
primary: globalRefs$
|
2574
|
-
secondary: globalRefs$
|
2575
|
-
success: globalRefs$
|
2576
|
-
error: globalRefs$
|
2577
|
-
surface: globalRefs$
|
2601
|
+
primary: globalRefs$h.colors.primary,
|
2602
|
+
secondary: globalRefs$h.colors.secondary,
|
2603
|
+
success: globalRefs$h.colors.success,
|
2604
|
+
error: globalRefs$h.colors.error,
|
2605
|
+
surface: globalRefs$h.colors.surface,
|
2578
2606
|
};
|
2579
2607
|
|
2580
2608
|
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$F);
|
@@ -2582,15 +2610,15 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, c
|
|
2582
2610
|
const button = {
|
2583
2611
|
...helperTheme$3,
|
2584
2612
|
|
2585
|
-
[compVars$4.fontFamily]: globalRefs$
|
2613
|
+
[compVars$4.fontFamily]: globalRefs$h.fonts.font1.family,
|
2586
2614
|
|
2587
2615
|
[compVars$4.cursor]: 'pointer',
|
2588
2616
|
[compVars$4.hostHeight]: '3em',
|
2589
2617
|
[compVars$4.hostWidth]: 'auto',
|
2590
|
-
[compVars$4.hostDirection]: globalRefs$
|
2618
|
+
[compVars$4.hostDirection]: globalRefs$h.direction,
|
2591
2619
|
|
2592
|
-
[compVars$4.borderRadius]: globalRefs$
|
2593
|
-
[compVars$4.borderWidth]: globalRefs$
|
2620
|
+
[compVars$4.borderRadius]: globalRefs$h.radius.sm,
|
2621
|
+
[compVars$4.borderWidth]: globalRefs$h.border.xs,
|
2594
2622
|
[compVars$4.borderStyle]: 'solid',
|
2595
2623
|
[compVars$4.borderColor]: 'transparent',
|
2596
2624
|
|
@@ -2633,10 +2661,10 @@ const button = {
|
|
2633
2661
|
},
|
2634
2662
|
|
2635
2663
|
_disabled: {
|
2636
|
-
[helperVars$3.main]: globalRefs$
|
2637
|
-
[helperVars$3.dark]: globalRefs$
|
2638
|
-
[helperVars$3.light]: globalRefs$
|
2639
|
-
[helperVars$3.contrast]: globalRefs$
|
2664
|
+
[helperVars$3.main]: globalRefs$h.colors.surface.light,
|
2665
|
+
[helperVars$3.dark]: globalRefs$h.colors.surface.dark,
|
2666
|
+
[helperVars$3.light]: globalRefs$h.colors.surface.light,
|
2667
|
+
[helperVars$3.contrast]: globalRefs$h.colors.surface.main,
|
2640
2668
|
},
|
2641
2669
|
|
2642
2670
|
variant: {
|
@@ -2656,12 +2684,14 @@ const button = {
|
|
2656
2684
|
|
2657
2685
|
outline: {
|
2658
2686
|
[compVars$4.labelTextColor]: helperRefs$3.main,
|
2659
|
-
[compVars$4.borderColor]:
|
2687
|
+
[compVars$4.borderColor]: helperRefs$3.main,
|
2660
2688
|
_hover: {
|
2661
2689
|
[compVars$4.labelTextColor]: helperRefs$3.dark,
|
2690
|
+
[compVars$4.borderColor]: helperRefs$3.dark,
|
2662
2691
|
},
|
2663
2692
|
_active: {
|
2664
2693
|
[compVars$4.labelTextColor]: helperRefs$3.main,
|
2694
|
+
[compVars$4.borderColor]: helperRefs$3.main,
|
2665
2695
|
},
|
2666
2696
|
},
|
2667
2697
|
|
@@ -2672,13 +2702,13 @@ const button = {
|
|
2672
2702
|
[compVars$4.labelTextDecoration]: 'underline',
|
2673
2703
|
},
|
2674
2704
|
_active: {
|
2675
|
-
[compVars$4.labelTextColor]: helperRefs$3.
|
2705
|
+
[compVars$4.labelTextColor]: helperRefs$3.main,
|
2676
2706
|
},
|
2677
2707
|
},
|
2678
2708
|
},
|
2679
2709
|
|
2680
2710
|
_focused: {
|
2681
|
-
[compVars$4.outlineColor]:
|
2711
|
+
[compVars$4.outlineColor]: helperRefs$3.light,
|
2682
2712
|
},
|
2683
2713
|
};
|
2684
2714
|
|
@@ -2932,21 +2962,21 @@ const TextFieldClass = compose(
|
|
2932
2962
|
);
|
2933
2963
|
|
2934
2964
|
const componentName$D = getComponentName('input-wrapper');
|
2935
|
-
const globalRefs$
|
2965
|
+
const globalRefs$g = getThemeRefs(globals);
|
2936
2966
|
|
2937
2967
|
const [theme$1, refs, vars$w] = createHelperVars(
|
2938
2968
|
{
|
2939
|
-
labelTextColor: globalRefs$
|
2940
|
-
valueTextColor: globalRefs$
|
2941
|
-
placeholderTextColor: globalRefs$
|
2969
|
+
labelTextColor: globalRefs$g.colors.surface.dark,
|
2970
|
+
valueTextColor: globalRefs$g.colors.surface.contrast,
|
2971
|
+
placeholderTextColor: globalRefs$g.colors.surface.dark,
|
2942
2972
|
requiredIndicator: "'*'",
|
2943
|
-
errorMessageTextColor: globalRefs$
|
2973
|
+
errorMessageTextColor: globalRefs$g.colors.error.main,
|
2944
2974
|
|
2945
|
-
borderWidth: globalRefs$
|
2946
|
-
borderRadius: globalRefs$
|
2975
|
+
borderWidth: globalRefs$g.border.xs,
|
2976
|
+
borderRadius: globalRefs$g.radius.xs,
|
2947
2977
|
borderColor: 'transparent',
|
2948
2978
|
|
2949
|
-
outlineWidth: globalRefs$
|
2979
|
+
outlineWidth: globalRefs$g.border.sm,
|
2950
2980
|
outlineStyle: 'solid',
|
2951
2981
|
outlineColor: 'transparent',
|
2952
2982
|
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 +2987,11 @@ const [theme$1, refs, vars$w] = createHelperVars(
|
|
2957
2987
|
horizontalPadding: '0.5em',
|
2958
2988
|
verticalPadding: '0.5em',
|
2959
2989
|
|
2960
|
-
backgroundColor: globalRefs$
|
2990
|
+
backgroundColor: globalRefs$g.colors.surface.main,
|
2961
2991
|
|
2962
|
-
fontFamily: globalRefs$
|
2992
|
+
fontFamily: globalRefs$g.fonts.font1.family,
|
2963
2993
|
|
2964
|
-
direction: globalRefs$
|
2994
|
+
direction: globalRefs$g.direction,
|
2965
2995
|
|
2966
2996
|
overlayOpacity: '0.3',
|
2967
2997
|
|
@@ -2977,27 +3007,27 @@ const [theme$1, refs, vars$w] = createHelperVars(
|
|
2977
3007
|
},
|
2978
3008
|
|
2979
3009
|
_focused: {
|
2980
|
-
outlineColor: globalRefs$
|
3010
|
+
outlineColor: globalRefs$g.colors.surface.light,
|
2981
3011
|
_invalid: {
|
2982
|
-
outlineColor: globalRefs$
|
3012
|
+
outlineColor: globalRefs$g.colors.error.main,
|
2983
3013
|
},
|
2984
3014
|
},
|
2985
3015
|
|
2986
3016
|
_bordered: {
|
2987
|
-
outlineWidth: globalRefs$
|
2988
|
-
borderColor: globalRefs$
|
3017
|
+
outlineWidth: globalRefs$g.border.xs,
|
3018
|
+
borderColor: globalRefs$g.colors.surface.light,
|
2989
3019
|
borderStyle: 'solid',
|
2990
3020
|
_invalid: {
|
2991
|
-
borderColor: globalRefs$
|
3021
|
+
borderColor: globalRefs$g.colors.error.main,
|
2992
3022
|
},
|
2993
3023
|
},
|
2994
3024
|
|
2995
3025
|
_disabled: {
|
2996
|
-
labelTextColor: globalRefs$
|
2997
|
-
borderColor: globalRefs$
|
2998
|
-
valueTextColor: globalRefs$
|
2999
|
-
placeholderTextColor: globalRefs$
|
3000
|
-
backgroundColor: globalRefs$
|
3026
|
+
labelTextColor: globalRefs$g.colors.surface.light,
|
3027
|
+
borderColor: globalRefs$g.colors.surface.light,
|
3028
|
+
valueTextColor: globalRefs$g.colors.surface.light,
|
3029
|
+
placeholderTextColor: globalRefs$g.colors.surface.light,
|
3030
|
+
backgroundColor: globalRefs$g.colors.surface.main,
|
3001
3031
|
},
|
3002
3032
|
},
|
3003
3033
|
componentName$D
|
@@ -3140,10 +3170,7 @@ const PasswordClass = compose(
|
|
3140
3170
|
labelRequiredIndicator: { ...requiredIndicator$a, property: 'content' },
|
3141
3171
|
errorMessageTextColor: { ...errorMessage$a, property: 'color' },
|
3142
3172
|
|
3143
|
-
inputValueTextColor:
|
3144
|
-
{ ...inputElement$2, property: 'color' },
|
3145
|
-
{ ...revealButtonIcon, property: 'color' },
|
3146
|
-
],
|
3173
|
+
inputValueTextColor: { ...inputElement$2, property: 'color' },
|
3147
3174
|
inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
3148
3175
|
|
3149
3176
|
revealButtonOffset: [
|
@@ -3151,6 +3178,7 @@ const PasswordClass = compose(
|
|
3151
3178
|
{ ...revealButtonContainer, property: 'margin-left' },
|
3152
3179
|
],
|
3153
3180
|
revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
|
3181
|
+
revealButtonColor: { ...revealButtonIcon, property: 'color' },
|
3154
3182
|
},
|
3155
3183
|
}),
|
3156
3184
|
draggableMixin,
|
@@ -3217,7 +3245,7 @@ const PasswordClass = compose(
|
|
3217
3245
|
})
|
3218
3246
|
);
|
3219
3247
|
|
3220
|
-
const globalRefs$
|
3248
|
+
const globalRefs$f = getThemeRefs(globals);
|
3221
3249
|
const vars$u = PasswordClass.cssVarList;
|
3222
3250
|
|
3223
3251
|
const password = {
|
@@ -3241,8 +3269,9 @@ const password = {
|
|
3241
3269
|
[vars$u.inputOutlineStyle]: refs.outlineStyle,
|
3242
3270
|
[vars$u.inputOutlineColor]: refs.outlineColor,
|
3243
3271
|
[vars$u.inputOutlineOffset]: refs.outlineOffset,
|
3244
|
-
[vars$u.revealButtonOffset]: globalRefs$
|
3272
|
+
[vars$u.revealButtonOffset]: globalRefs$f.spacing.md,
|
3245
3273
|
[vars$u.revealButtonSize]: refs.toggleButtonSize,
|
3274
|
+
[vars$u.revealButtonColor]: refs.placeholderTextColor,
|
3246
3275
|
};
|
3247
3276
|
|
3248
3277
|
var password$1 = /*#__PURE__*/Object.freeze({
|
@@ -3464,7 +3493,6 @@ const TextAreaClass = compose(
|
|
3464
3493
|
})
|
3465
3494
|
);
|
3466
3495
|
|
3467
|
-
const globalRefs$f = getThemeRefs(globals);
|
3468
3496
|
const vars$r = TextAreaClass.cssVarList;
|
3469
3497
|
|
3470
3498
|
const textArea = {
|
@@ -3495,10 +3523,6 @@ const textArea = {
|
|
3495
3523
|
center: { [vars$r.inputTextAlign]: 'center' },
|
3496
3524
|
},
|
3497
3525
|
|
3498
|
-
_disabled: {
|
3499
|
-
[vars$r.inputBackgroundColor]: globalRefs$f.colors.surface.light,
|
3500
|
-
},
|
3501
|
-
|
3502
3526
|
_readonly: {
|
3503
3527
|
[vars$r.inputResizeType]: 'none',
|
3504
3528
|
},
|
@@ -3912,7 +3936,7 @@ const switchToggle = {
|
|
3912
3936
|
[vars$p.trackBorderStyle]: refs.borderStyle,
|
3913
3937
|
[vars$p.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
3914
3938
|
[vars$p.trackBorderColor]: refs.borderColor,
|
3915
|
-
[vars$p.trackBackgroundColor]:
|
3939
|
+
[vars$p.trackBackgroundColor]: refs.backgroundColor,
|
3916
3940
|
[vars$p.trackBorderRadius]: globalRefs$e.radius.md,
|
3917
3941
|
[vars$p.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
3918
3942
|
[vars$p.trackHeight]: checkboxHeight,
|
@@ -3921,7 +3945,7 @@ const switchToggle = {
|
|
3921
3945
|
[vars$p.knobRadius]: '50%',
|
3922
3946
|
[vars$p.knobTopOffset]: '1px',
|
3923
3947
|
[vars$p.knobLeftOffset]: knobMargin,
|
3924
|
-
[vars$p.knobColor]: refs.
|
3948
|
+
[vars$p.knobColor]: refs.labelTextColor,
|
3925
3949
|
[vars$p.knobTransitionDuration]: '0.3s',
|
3926
3950
|
|
3927
3951
|
[vars$p.labelTextColor]: refs.labelTextColor,
|
@@ -3933,7 +3957,6 @@ const switchToggle = {
|
|
3933
3957
|
|
3934
3958
|
_checked: {
|
3935
3959
|
[vars$p.trackBorderColor]: refs.borderColor,
|
3936
|
-
[vars$p.trackBackgroundColor]: refs.backgroundColor,
|
3937
3960
|
[vars$p.knobLeftOffset]: `calc(100% - var(${vars$p.knobSize}) - ${knobMargin})`,
|
3938
3961
|
[vars$p.knobColor]: refs.valueTextColor,
|
3939
3962
|
[vars$p.knobTextColor]: refs.valueTextColor,
|
@@ -3941,7 +3964,7 @@ const switchToggle = {
|
|
3941
3964
|
|
3942
3965
|
_disabled: {
|
3943
3966
|
[vars$p.knobColor]: globalRefs$e.colors.surface.light,
|
3944
|
-
[vars$p.trackBorderColor]: globalRefs$e.colors.surface.
|
3967
|
+
[vars$p.trackBorderColor]: globalRefs$e.colors.surface.light,
|
3945
3968
|
[vars$p.trackBackgroundColor]: globalRefs$e.colors.surface.main,
|
3946
3969
|
[vars$p.labelTextColor]: refs.labelTextColor,
|
3947
3970
|
_checked: {
|
@@ -4049,7 +4072,7 @@ const container = {
|
|
4049
4072
|
|
4050
4073
|
[compVars$3.hostWidth]: '100%',
|
4051
4074
|
[compVars$3.boxShadow]: 'none',
|
4052
|
-
[compVars$3.backgroundColor]: globalRefs$d.colors.surface.
|
4075
|
+
[compVars$3.backgroundColor]: globalRefs$d.colors.surface.main,
|
4053
4076
|
[compVars$3.color]: globalRefs$d.colors.surface.contrast,
|
4054
4077
|
[compVars$3.borderRadius]: '0px',
|
4055
4078
|
[compVars$3.hostDirection]: globalRefs$d.direction,
|
@@ -4358,10 +4381,10 @@ const text$2 = {
|
|
4358
4381
|
|
4359
4382
|
mode: {
|
4360
4383
|
primary: {
|
4361
|
-
[vars$k.textColor]: globalRefs$c.colors.
|
4384
|
+
[vars$k.textColor]: globalRefs$c.colors.surface.contrast,
|
4362
4385
|
},
|
4363
4386
|
secondary: {
|
4364
|
-
[vars$k.textColor]: globalRefs$c.colors.
|
4387
|
+
[vars$k.textColor]: globalRefs$c.colors.surface.dark,
|
4365
4388
|
},
|
4366
4389
|
error: {
|
4367
4390
|
[vars$k.textColor]: globalRefs$c.colors.error.main,
|
@@ -4627,7 +4650,7 @@ const divider = {
|
|
4627
4650
|
[compVars$2.flexDirection]: 'row',
|
4628
4651
|
[compVars$2.alignSelf]: 'stretch',
|
4629
4652
|
[compVars$2.hostWidth]: '100%',
|
4630
|
-
[compVars$2.stripeColor]: globalRefs$a.colors.surface.
|
4653
|
+
[compVars$2.stripeColor]: globalRefs$a.colors.surface.light,
|
4631
4654
|
[compVars$2.stripeColorOpacity]: '0.5',
|
4632
4655
|
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
4633
4656
|
[compVars$2.labelTextWidth]: 'fit-content',
|
@@ -5006,7 +5029,7 @@ const loaderLinear = {
|
|
5006
5029
|
[vars$g.barColor]: globalRefs$9.colors.surface.contrast,
|
5007
5030
|
[vars$g.barWidth]: '20%',
|
5008
5031
|
|
5009
|
-
[vars$g.barBackgroundColor]: globalRefs$9.colors.surface.
|
5032
|
+
[vars$g.barBackgroundColor]: globalRefs$9.colors.surface.light,
|
5010
5033
|
[vars$g.barBorderRadius]: '4px',
|
5011
5034
|
|
5012
5035
|
[vars$g.animationDuration]: '2s',
|
@@ -5504,7 +5527,7 @@ const comboBox = {
|
|
5504
5527
|
[vars$e.inputBackgroundColor]: refs.backgroundColor,
|
5505
5528
|
[vars$e.inputHorizontalPadding]: refs.horizontalPadding,
|
5506
5529
|
[vars$e.inputHeight]: refs.inputHeight,
|
5507
|
-
[vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.
|
5530
|
+
[vars$e.inputDropdownButtonColor]: globalRefs$7.colors.surface.dark,
|
5508
5531
|
[vars$e.inputDropdownButtonCursor]: 'pointer',
|
5509
5532
|
[vars$e.inputDropdownButtonSize]: refs.toggleButtonSize,
|
5510
5533
|
[vars$e.inputDropdownButtonOffset]: globalRefs$7.spacing.xs,
|
@@ -7776,6 +7799,7 @@ class RawSelectItem extends createBaseClass({
|
|
7776
7799
|
`;
|
7777
7800
|
|
7778
7801
|
forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
|
7802
|
+
forwardAttrs(this.baseElement, this, { includeAttrs: ['focused', 'active'] });
|
7779
7803
|
}
|
7780
7804
|
|
7781
7805
|
handleFocus() {
|
@@ -7824,6 +7848,10 @@ const ButtonSelectionGroupItemClass = compose(
|
|
7824
7848
|
selector: () => ButtonClass.componentName,
|
7825
7849
|
property: ButtonClass.cssVarList.borderRadius,
|
7826
7850
|
},
|
7851
|
+
outlineColor: {
|
7852
|
+
selector: () => ButtonClass.componentName,
|
7853
|
+
property: ButtonClass.cssVarList.outlineColor,
|
7854
|
+
},
|
7827
7855
|
},
|
7828
7856
|
}),
|
7829
7857
|
draggableMixin,
|
@@ -7836,20 +7864,25 @@ const vars$8 = ButtonSelectionGroupItemClass.cssVarList;
|
|
7836
7864
|
|
7837
7865
|
const buttonSelectionGroupItem = {
|
7838
7866
|
[vars$8.hostDirection]: 'inherit',
|
7839
|
-
[vars$8.backgroundColor]: globalRefs$6.colors.surface.
|
7867
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.main,
|
7840
7868
|
[vars$8.labelTextColor]: globalRefs$6.colors.surface.contrast,
|
7841
|
-
[vars$8.borderColor]: globalRefs$6.colors.surface.
|
7869
|
+
[vars$8.borderColor]: globalRefs$6.colors.surface.light,
|
7842
7870
|
[vars$8.borderStyle]: 'solid',
|
7843
7871
|
[vars$8.borderRadius]: globalRefs$6.radius.sm,
|
7872
|
+
[vars$8.outlineColor]: 'transparent',
|
7844
7873
|
|
7845
7874
|
_hover: {
|
7846
|
-
[vars$8.backgroundColor]:
|
7875
|
+
[vars$8.backgroundColor]: globalRefs$6.colors.surface.highlight,
|
7876
|
+
},
|
7877
|
+
|
7878
|
+
_focused: {
|
7879
|
+
[vars$8.outlineColor]: globalRefs$6.colors.surface.light,
|
7847
7880
|
},
|
7848
7881
|
|
7849
7882
|
_selected: {
|
7850
7883
|
[vars$8.borderColor]: globalRefs$6.colors.surface.contrast,
|
7851
7884
|
[vars$8.backgroundColor]: globalRefs$6.colors.surface.contrast,
|
7852
|
-
[vars$8.labelTextColor]: globalRefs$6.colors.surface.
|
7885
|
+
[vars$8.labelTextColor]: globalRefs$6.colors.surface.main,
|
7853
7886
|
},
|
7854
7887
|
};
|
7855
7888
|
|
@@ -8540,7 +8573,7 @@ const globalRefs$4 = getThemeRefs(globals);
|
|
8540
8573
|
const compVars = ModalClass.cssVarList;
|
8541
8574
|
|
8542
8575
|
const modal = {
|
8543
|
-
[compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.
|
8576
|
+
[compVars.overlayBackgroundColor]: globalRefs$4.colors.surface.main,
|
8544
8577
|
[compVars.overlayShadow]: globalRefs$4.shadow.wide['2xl'],
|
8545
8578
|
[compVars.overlayWidth]: '540px',
|
8546
8579
|
};
|
@@ -8765,12 +8798,11 @@ const GridClass = compose(
|
|
8765
8798
|
],
|
8766
8799
|
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
8767
8800
|
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
8768
|
-
|
8769
|
-
|
8770
|
-
|
8771
|
-
|
8801
|
+
borderColor: { ...host$1, property: 'border-color' },
|
8802
|
+
borderWidth: { ...host$1, property: 'border-width' },
|
8803
|
+
borderStyle: { ...host$1, property: 'border-style' },
|
8804
|
+
borderRadius: { ...host$1, property: 'border-radius' },
|
8772
8805
|
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
8773
|
-
selectedTextColor: { ...selectedRow, property: 'color' },
|
8774
8806
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
8775
8807
|
separatorColor: [
|
8776
8808
|
{ ...firstRow, property: 'border-bottom-color' },
|
@@ -8795,6 +8827,9 @@ const GridClass = compose(
|
|
8795
8827
|
}
|
8796
8828
|
vaadin-grid-cell-content {
|
8797
8829
|
display: flex;
|
8830
|
+
}
|
8831
|
+
vaadin-grid::part(selected-row-cell) {
|
8832
|
+
background-image: none;
|
8798
8833
|
}
|
8799
8834
|
`,
|
8800
8835
|
excludeAttrsSync: ['columns', 'tabindex'],
|
@@ -8810,28 +8845,28 @@ const grid = {
|
|
8810
8845
|
[vars$4.hostHeight]: '100%',
|
8811
8846
|
[vars$4.hostMinHeight]: '400px',
|
8812
8847
|
[vars$4.fontWeight]: '400',
|
8813
|
-
[vars$4.backgroundColor]: globalRefs$3.colors.surface.
|
8848
|
+
[vars$4.backgroundColor]: globalRefs$3.colors.surface.main,
|
8814
8849
|
|
8815
8850
|
[vars$4.fontSize]: refs.fontSize,
|
8816
8851
|
[vars$4.fontFamily]: refs.fontFamily,
|
8817
8852
|
|
8818
|
-
[vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.
|
8853
|
+
[vars$4.sortIndicatorsColor]: globalRefs$3.colors.surface.light,
|
8819
8854
|
[vars$4.activeSortIndicator]: globalRefs$3.colors.surface.dark,
|
8820
|
-
[vars$4.resizeHandleColor]: globalRefs$3.colors.surface.
|
8855
|
+
[vars$4.resizeHandleColor]: globalRefs$3.colors.surface.light,
|
8821
8856
|
|
8822
|
-
[vars$4.
|
8823
|
-
[vars$4.
|
8824
|
-
[vars$4.
|
8825
|
-
[vars$4.
|
8857
|
+
[vars$4.borderWidth]: refs.borderWidth,
|
8858
|
+
[vars$4.borderStyle]: refs.borderStyle,
|
8859
|
+
[vars$4.borderRadius]: refs.borderRadius,
|
8860
|
+
[vars$4.borderColor]: 'transparent',
|
8826
8861
|
|
8827
8862
|
[vars$4.headerRowTextColor]: globalRefs$3.colors.surface.dark,
|
8828
|
-
[vars$4.separatorColor]: globalRefs$3.colors.surface.
|
8863
|
+
[vars$4.separatorColor]: globalRefs$3.colors.surface.light,
|
8829
8864
|
|
8830
8865
|
[vars$4.valueTextColor]: globalRefs$3.colors.surface.contrast,
|
8831
|
-
[vars$4.selectedBackgroundColor]: globalRefs$3.colors.
|
8866
|
+
[vars$4.selectedBackgroundColor]: globalRefs$3.colors.surface.highlight,
|
8832
8867
|
|
8833
8868
|
_bordered: {
|
8834
|
-
[vars$4.
|
8869
|
+
[vars$4.borderColor]: refs.borderColor,
|
8835
8870
|
},
|
8836
8871
|
};
|
8837
8872
|
|
@@ -9642,7 +9677,7 @@ const multiSelectComboBox = {
|
|
9642
9677
|
[vars$2.inputHorizontalPadding]: refs.horizontalPadding,
|
9643
9678
|
[vars$2.inputVerticalPadding]: refs.verticalPadding,
|
9644
9679
|
[vars$2.inputHeight]: refs.inputHeight,
|
9645
|
-
[vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.
|
9680
|
+
[vars$2.inputDropdownButtonColor]: globalRefs$1.colors.surface.dark,
|
9646
9681
|
[vars$2.inputDropdownButtonCursor]: 'pointer',
|
9647
9682
|
[vars$2.inputDropdownButtonSize]: refs.toggleButtonSize,
|
9648
9683
|
[vars$2.inputDropdownButtonOffset]: globalRefs$1.spacing.xs,
|
@@ -9650,7 +9685,7 @@ const multiSelectComboBox = {
|
|
9650
9685
|
[vars$2.overlayItemPaddingInlineEnd]: globalRefs$1.spacing.lg,
|
9651
9686
|
[vars$2.chipFontSize]: refs.chipFontSize,
|
9652
9687
|
[vars$2.chipTextColor]: globalRefs$1.colors.surface.contrast,
|
9653
|
-
[vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.
|
9688
|
+
[vars$2.chipBackgroundColor]: globalRefs$1.colors.surface.light,
|
9654
9689
|
|
9655
9690
|
_readonly: {
|
9656
9691
|
[vars$2.inputDropdownButtonCursor]: 'default',
|
@@ -9761,7 +9796,7 @@ const badge = {
|
|
9761
9796
|
default: {
|
9762
9797
|
[vars$1.textColor]: globalRefs.colors.surface.dark,
|
9763
9798
|
_bordered: {
|
9764
|
-
[vars$1.borderColor]: globalRefs.colors.surface.
|
9799
|
+
[vars$1.borderColor]: globalRefs.colors.surface.light,
|
9765
9800
|
},
|
9766
9801
|
},
|
9767
9802
|
primary: {
|
@@ -10020,6 +10055,9 @@ const NotificationMixin = (superclass) =>
|
|
10020
10055
|
'descope-notification-container'
|
10021
10056
|
);
|
10022
10057
|
|
10058
|
+
// we are overriding the container position to be absolute because we want to keep in inside the flow/widget boundaries
|
10059
|
+
NotificationMixinClass._container.style.position = 'absolute';
|
10060
|
+
|
10023
10061
|
// we're adding the container to body to avoid Vaadin's container's `openChanged`
|
10024
10062
|
// from breaking when trying to remove it directly from the body.
|
10025
10063
|
document.body.appendChild(NotificationMixinClass._container);
|