@descope/web-components-ui 1.0.238 → 1.0.239
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +132 -126
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +132 -126
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-modal-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-modal/ModalClass.js +4 -1
- package/src/theme/components/modal.js +5 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -2505,15 +2505,15 @@ loadingIndicatorStyles = `
|
|
2505
2505
|
}
|
2506
2506
|
`;
|
2507
2507
|
|
2508
|
-
const globalRefs$
|
2508
|
+
const globalRefs$h = getThemeRefs(globals);
|
2509
2509
|
const compVars$4 = ButtonClass.cssVarList;
|
2510
2510
|
|
2511
2511
|
const mode = {
|
2512
|
-
primary: globalRefs$
|
2513
|
-
secondary: globalRefs$
|
2514
|
-
success: globalRefs$
|
2515
|
-
error: globalRefs$
|
2516
|
-
surface: globalRefs$
|
2512
|
+
primary: globalRefs$h.colors.primary,
|
2513
|
+
secondary: globalRefs$h.colors.secondary,
|
2514
|
+
success: globalRefs$h.colors.success,
|
2515
|
+
error: globalRefs$h.colors.error,
|
2516
|
+
surface: globalRefs$h.colors.surface,
|
2517
2517
|
};
|
2518
2518
|
|
2519
2519
|
const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, componentName$B);
|
@@ -2521,15 +2521,15 @@ const [helperTheme$3, helperRefs$3, helperVars$3] = createHelperVars({ mode }, c
|
|
2521
2521
|
const button = {
|
2522
2522
|
...helperTheme$3,
|
2523
2523
|
|
2524
|
-
[compVars$4.fontFamily]: globalRefs$
|
2524
|
+
[compVars$4.fontFamily]: globalRefs$h.fonts.font1.family,
|
2525
2525
|
|
2526
2526
|
[compVars$4.cursor]: 'pointer',
|
2527
2527
|
[compVars$4.hostHeight]: '3em',
|
2528
2528
|
[compVars$4.hostWidth]: 'auto',
|
2529
|
-
[compVars$4.hostDirection]: globalRefs$
|
2529
|
+
[compVars$4.hostDirection]: globalRefs$h.direction,
|
2530
2530
|
|
2531
|
-
[compVars$4.borderRadius]: globalRefs$
|
2532
|
-
[compVars$4.borderWidth]: globalRefs$
|
2531
|
+
[compVars$4.borderRadius]: globalRefs$h.radius.sm,
|
2532
|
+
[compVars$4.borderWidth]: globalRefs$h.border.xs,
|
2533
2533
|
[compVars$4.borderStyle]: 'solid',
|
2534
2534
|
[compVars$4.borderColor]: 'transparent',
|
2535
2535
|
|
@@ -2565,10 +2565,10 @@ const button = {
|
|
2565
2565
|
},
|
2566
2566
|
|
2567
2567
|
_disabled: {
|
2568
|
-
[helperVars$3.main]: globalRefs$
|
2569
|
-
[helperVars$3.dark]: globalRefs$
|
2570
|
-
[helperVars$3.light]: globalRefs$
|
2571
|
-
[helperVars$3.contrast]: globalRefs$
|
2568
|
+
[helperVars$3.main]: globalRefs$h.colors.surface.main,
|
2569
|
+
[helperVars$3.dark]: globalRefs$h.colors.surface.dark,
|
2570
|
+
[helperVars$3.light]: globalRefs$h.colors.surface.light,
|
2571
|
+
[helperVars$3.contrast]: globalRefs$h.colors.surface.contrast,
|
2572
2572
|
},
|
2573
2573
|
|
2574
2574
|
variant: {
|
@@ -2610,7 +2610,7 @@ const button = {
|
|
2610
2610
|
},
|
2611
2611
|
|
2612
2612
|
_focused: {
|
2613
|
-
[compVars$4.outlineColor]: globalRefs$
|
2613
|
+
[compVars$4.outlineColor]: globalRefs$h.colors.surface.main,
|
2614
2614
|
},
|
2615
2615
|
};
|
2616
2616
|
|
@@ -2864,21 +2864,21 @@ const TextFieldClass = compose(
|
|
2864
2864
|
);
|
2865
2865
|
|
2866
2866
|
const componentName$z = getComponentName('input-wrapper');
|
2867
|
-
const globalRefs$
|
2867
|
+
const globalRefs$g = getThemeRefs(globals);
|
2868
2868
|
|
2869
2869
|
const [theme$1, refs, vars$t] = createHelperVars(
|
2870
2870
|
{
|
2871
|
-
labelTextColor: globalRefs$
|
2872
|
-
valueTextColor: globalRefs$
|
2873
|
-
placeholderTextColor: globalRefs$
|
2871
|
+
labelTextColor: globalRefs$g.colors.surface.contrast,
|
2872
|
+
valueTextColor: globalRefs$g.colors.surface.contrast,
|
2873
|
+
placeholderTextColor: globalRefs$g.colors.surface.main,
|
2874
2874
|
requiredIndicator: "'*'",
|
2875
|
-
errorMessageTextColor: globalRefs$
|
2875
|
+
errorMessageTextColor: globalRefs$g.colors.error.main,
|
2876
2876
|
|
2877
|
-
borderWidth: globalRefs$
|
2878
|
-
borderRadius: globalRefs$
|
2877
|
+
borderWidth: globalRefs$g.border.xs,
|
2878
|
+
borderRadius: globalRefs$g.radius.xs,
|
2879
2879
|
borderColor: 'transparent',
|
2880
2880
|
|
2881
|
-
outlineWidth: globalRefs$
|
2881
|
+
outlineWidth: globalRefs$g.border.sm,
|
2882
2882
|
outlineStyle: 'solid',
|
2883
2883
|
outlineColor: 'transparent',
|
2884
2884
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
@@ -2889,11 +2889,11 @@ const [theme$1, refs, vars$t] = createHelperVars(
|
|
2889
2889
|
horizontalPadding: '0.5em',
|
2890
2890
|
verticalPadding: '0.5em',
|
2891
2891
|
|
2892
|
-
backgroundColor: globalRefs$
|
2892
|
+
backgroundColor: globalRefs$g.colors.surface.light,
|
2893
2893
|
|
2894
|
-
fontFamily: globalRefs$
|
2894
|
+
fontFamily: globalRefs$g.fonts.font1.family,
|
2895
2895
|
|
2896
|
-
direction: globalRefs$
|
2896
|
+
direction: globalRefs$g.direction,
|
2897
2897
|
|
2898
2898
|
size: {
|
2899
2899
|
xs: { fontSize: '12px' },
|
@@ -2907,27 +2907,27 @@ const [theme$1, refs, vars$t] = createHelperVars(
|
|
2907
2907
|
},
|
2908
2908
|
|
2909
2909
|
_focused: {
|
2910
|
-
outlineColor: globalRefs$
|
2910
|
+
outlineColor: globalRefs$g.colors.surface.main,
|
2911
2911
|
_invalid: {
|
2912
|
-
outlineColor: globalRefs$
|
2912
|
+
outlineColor: globalRefs$g.colors.error.main,
|
2913
2913
|
},
|
2914
2914
|
},
|
2915
2915
|
|
2916
2916
|
_bordered: {
|
2917
|
-
outlineWidth: globalRefs$
|
2918
|
-
borderColor: globalRefs$
|
2917
|
+
outlineWidth: globalRefs$g.border.xs,
|
2918
|
+
borderColor: globalRefs$g.colors.surface.main,
|
2919
2919
|
borderStyle: 'solid',
|
2920
2920
|
_invalid: {
|
2921
|
-
borderColor: globalRefs$
|
2921
|
+
borderColor: globalRefs$g.colors.error.main,
|
2922
2922
|
},
|
2923
2923
|
},
|
2924
2924
|
|
2925
2925
|
_disabled: {
|
2926
|
-
labelTextColor: globalRefs$
|
2927
|
-
borderColor: globalRefs$
|
2928
|
-
valueTextColor: globalRefs$
|
2929
|
-
placeholderTextColor: globalRefs$
|
2930
|
-
backgroundColor: globalRefs$
|
2926
|
+
labelTextColor: globalRefs$g.colors.surface.main,
|
2927
|
+
borderColor: globalRefs$g.colors.surface.main,
|
2928
|
+
valueTextColor: globalRefs$g.colors.surface.dark,
|
2929
|
+
placeholderTextColor: globalRefs$g.colors.surface.dark,
|
2930
|
+
backgroundColor: globalRefs$g.colors.surface.main,
|
2931
2931
|
},
|
2932
2932
|
},
|
2933
2933
|
componentName$z
|
@@ -3142,7 +3142,7 @@ const PasswordClass = compose(
|
|
3142
3142
|
})
|
3143
3143
|
);
|
3144
3144
|
|
3145
|
-
const globalRefs$
|
3145
|
+
const globalRefs$f = getThemeRefs(globals);
|
3146
3146
|
const vars$r = PasswordClass.cssVarList;
|
3147
3147
|
|
3148
3148
|
const password = {
|
@@ -3166,7 +3166,7 @@ const password = {
|
|
3166
3166
|
[vars$r.inputOutlineStyle]: refs.outlineStyle,
|
3167
3167
|
[vars$r.inputOutlineColor]: refs.outlineColor,
|
3168
3168
|
[vars$r.inputOutlineOffset]: refs.outlineOffset,
|
3169
|
-
[vars$r.revealButtonOffset]: globalRefs$
|
3169
|
+
[vars$r.revealButtonOffset]: globalRefs$f.spacing.md,
|
3170
3170
|
[vars$r.revealButtonSize]: refs.toggleButtonSize,
|
3171
3171
|
};
|
3172
3172
|
|
@@ -3388,7 +3388,7 @@ const TextAreaClass = compose(
|
|
3388
3388
|
})
|
3389
3389
|
);
|
3390
3390
|
|
3391
|
-
const globalRefs$
|
3391
|
+
const globalRefs$e = getThemeRefs(globals);
|
3392
3392
|
const vars$o = TextAreaClass.cssVarList;
|
3393
3393
|
|
3394
3394
|
const textArea = {
|
@@ -3415,7 +3415,7 @@ const textArea = {
|
|
3415
3415
|
[vars$o.inputMinHeight]: '5em',
|
3416
3416
|
|
3417
3417
|
_disabled: {
|
3418
|
-
[vars$o.inputBackgroundColor]: globalRefs$
|
3418
|
+
[vars$o.inputBackgroundColor]: globalRefs$e.colors.surface.light,
|
3419
3419
|
},
|
3420
3420
|
|
3421
3421
|
_readonly: {
|
@@ -3814,7 +3814,7 @@ const SwitchToggleClass = compose(
|
|
3814
3814
|
const knobMargin = '2px';
|
3815
3815
|
const checkboxHeight = '1.25em';
|
3816
3816
|
|
3817
|
-
const globalRefs$
|
3817
|
+
const globalRefs$d = getThemeRefs(globals);
|
3818
3818
|
const vars$m = SwitchToggleClass.cssVarList;
|
3819
3819
|
|
3820
3820
|
const switchToggle = {
|
@@ -3832,7 +3832,7 @@ const switchToggle = {
|
|
3832
3832
|
[vars$m.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
3833
3833
|
[vars$m.trackBorderColor]: refs.borderColor,
|
3834
3834
|
[vars$m.trackBackgroundColor]: 'none',
|
3835
|
-
[vars$m.trackBorderRadius]: globalRefs$
|
3835
|
+
[vars$m.trackBorderRadius]: globalRefs$d.radius.md,
|
3836
3836
|
[vars$m.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
3837
3837
|
[vars$m.trackHeight]: checkboxHeight,
|
3838
3838
|
|
@@ -3859,19 +3859,19 @@ const switchToggle = {
|
|
3859
3859
|
},
|
3860
3860
|
|
3861
3861
|
_disabled: {
|
3862
|
-
[vars$m.knobColor]: globalRefs$
|
3863
|
-
[vars$m.trackBorderColor]: globalRefs$
|
3864
|
-
[vars$m.trackBackgroundColor]: globalRefs$
|
3862
|
+
[vars$m.knobColor]: globalRefs$d.colors.surface.light,
|
3863
|
+
[vars$m.trackBorderColor]: globalRefs$d.colors.surface.main,
|
3864
|
+
[vars$m.trackBackgroundColor]: globalRefs$d.colors.surface.main,
|
3865
3865
|
[vars$m.labelTextColor]: refs.labelTextColor,
|
3866
3866
|
_checked: {
|
3867
|
-
[vars$m.knobColor]: globalRefs$
|
3868
|
-
[vars$m.trackBackgroundColor]: globalRefs$
|
3867
|
+
[vars$m.knobColor]: globalRefs$d.colors.surface.light,
|
3868
|
+
[vars$m.trackBackgroundColor]: globalRefs$d.colors.surface.main,
|
3869
3869
|
},
|
3870
3870
|
},
|
3871
3871
|
|
3872
3872
|
_invalid: {
|
3873
|
-
[vars$m.trackBorderColor]: globalRefs$
|
3874
|
-
[vars$m.knobColor]: globalRefs$
|
3873
|
+
[vars$m.trackBorderColor]: globalRefs$d.colors.error.main,
|
3874
|
+
[vars$m.knobColor]: globalRefs$d.colors.error.main,
|
3875
3875
|
},
|
3876
3876
|
};
|
3877
3877
|
|
@@ -3935,7 +3935,7 @@ const ContainerClass = compose(
|
|
3935
3935
|
componentNameValidationMixin
|
3936
3936
|
)(RawContainer);
|
3937
3937
|
|
3938
|
-
const globalRefs$
|
3938
|
+
const globalRefs$c = getThemeRefs(globals);
|
3939
3939
|
|
3940
3940
|
const compVars$3 = ContainerClass.cssVarList;
|
3941
3941
|
|
@@ -3967,8 +3967,8 @@ const container = {
|
|
3967
3967
|
|
3968
3968
|
[compVars$3.hostWidth]: '100%',
|
3969
3969
|
[compVars$3.boxShadow]: 'none',
|
3970
|
-
[compVars$3.backgroundColor]: globalRefs$
|
3971
|
-
[compVars$3.color]: globalRefs$
|
3970
|
+
[compVars$3.backgroundColor]: globalRefs$c.colors.surface.light,
|
3971
|
+
[compVars$3.color]: globalRefs$c.colors.surface.contrast,
|
3972
3972
|
[compVars$3.borderRadius]: '0px',
|
3973
3973
|
|
3974
3974
|
verticalPadding: {
|
@@ -4015,30 +4015,30 @@ const container = {
|
|
4015
4015
|
|
4016
4016
|
shadow: {
|
4017
4017
|
sm: {
|
4018
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
4018
|
+
[compVars$3.boxShadow]: `${globalRefs$c.shadow.wide.sm} ${shadowColor$1}, ${globalRefs$c.shadow.narrow.sm} ${shadowColor$1}`,
|
4019
4019
|
},
|
4020
4020
|
md: {
|
4021
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
4021
|
+
[compVars$3.boxShadow]: `${globalRefs$c.shadow.wide.md} ${shadowColor$1}, ${globalRefs$c.shadow.narrow.md} ${shadowColor$1}`,
|
4022
4022
|
},
|
4023
4023
|
lg: {
|
4024
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
4024
|
+
[compVars$3.boxShadow]: `${globalRefs$c.shadow.wide.lg} ${shadowColor$1}, ${globalRefs$c.shadow.narrow.lg} ${shadowColor$1}`,
|
4025
4025
|
},
|
4026
4026
|
xl: {
|
4027
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
4027
|
+
[compVars$3.boxShadow]: `${globalRefs$c.shadow.wide.xl} ${shadowColor$1}, ${globalRefs$c.shadow.narrow.xl} ${shadowColor$1}`,
|
4028
4028
|
},
|
4029
4029
|
'2xl': {
|
4030
4030
|
[helperVars$2.shadowColor]: '#00000050', // mimic daisyUI shadow settings
|
4031
|
-
[compVars$3.boxShadow]: `${globalRefs$
|
4031
|
+
[compVars$3.boxShadow]: `${globalRefs$c.shadow.wide['2xl']} ${shadowColor$1}`,
|
4032
4032
|
},
|
4033
4033
|
},
|
4034
4034
|
|
4035
4035
|
borderRadius: {
|
4036
|
-
sm: { [compVars$3.borderRadius]: globalRefs$
|
4037
|
-
md: { [compVars$3.borderRadius]: globalRefs$
|
4038
|
-
lg: { [compVars$3.borderRadius]: globalRefs$
|
4039
|
-
xl: { [compVars$3.borderRadius]: globalRefs$
|
4040
|
-
'2xl': { [compVars$3.borderRadius]: globalRefs$
|
4041
|
-
'3xl': { [compVars$3.borderRadius]: globalRefs$
|
4036
|
+
sm: { [compVars$3.borderRadius]: globalRefs$c.radius.sm },
|
4037
|
+
md: { [compVars$3.borderRadius]: globalRefs$c.radius.md },
|
4038
|
+
lg: { [compVars$3.borderRadius]: globalRefs$c.radius.lg },
|
4039
|
+
xl: { [compVars$3.borderRadius]: globalRefs$c.radius.xl },
|
4040
|
+
'2xl': { [compVars$3.borderRadius]: globalRefs$c.radius['2xl'] },
|
4041
|
+
'3xl': { [compVars$3.borderRadius]: globalRefs$c.radius['3xl'] },
|
4042
4042
|
},
|
4043
4043
|
};
|
4044
4044
|
|
@@ -4207,64 +4207,64 @@ const TextClass = compose(
|
|
4207
4207
|
customTextMixin
|
4208
4208
|
)(RawText);
|
4209
4209
|
|
4210
|
-
const globalRefs$
|
4210
|
+
const globalRefs$b = getThemeRefs(globals);
|
4211
4211
|
const vars$i = TextClass.cssVarList;
|
4212
4212
|
|
4213
4213
|
const text$2 = {
|
4214
|
-
[vars$i.hostDirection]: globalRefs$
|
4214
|
+
[vars$i.hostDirection]: globalRefs$b.direction,
|
4215
4215
|
[vars$i.textLineHeight]: '1.35em',
|
4216
4216
|
[vars$i.textAlign]: 'left',
|
4217
|
-
[vars$i.textColor]: globalRefs$
|
4217
|
+
[vars$i.textColor]: globalRefs$b.colors.surface.dark,
|
4218
4218
|
variant: {
|
4219
4219
|
h1: {
|
4220
|
-
[vars$i.fontSize]: globalRefs$
|
4221
|
-
[vars$i.fontWeight]: globalRefs$
|
4222
|
-
[vars$i.fontFamily]: globalRefs$
|
4220
|
+
[vars$i.fontSize]: globalRefs$b.typography.h1.size,
|
4221
|
+
[vars$i.fontWeight]: globalRefs$b.typography.h1.weight,
|
4222
|
+
[vars$i.fontFamily]: globalRefs$b.typography.h1.font,
|
4223
4223
|
},
|
4224
4224
|
h2: {
|
4225
|
-
[vars$i.fontSize]: globalRefs$
|
4226
|
-
[vars$i.fontWeight]: globalRefs$
|
4227
|
-
[vars$i.fontFamily]: globalRefs$
|
4225
|
+
[vars$i.fontSize]: globalRefs$b.typography.h2.size,
|
4226
|
+
[vars$i.fontWeight]: globalRefs$b.typography.h2.weight,
|
4227
|
+
[vars$i.fontFamily]: globalRefs$b.typography.h2.font,
|
4228
4228
|
},
|
4229
4229
|
h3: {
|
4230
|
-
[vars$i.fontSize]: globalRefs$
|
4231
|
-
[vars$i.fontWeight]: globalRefs$
|
4232
|
-
[vars$i.fontFamily]: globalRefs$
|
4230
|
+
[vars$i.fontSize]: globalRefs$b.typography.h3.size,
|
4231
|
+
[vars$i.fontWeight]: globalRefs$b.typography.h3.weight,
|
4232
|
+
[vars$i.fontFamily]: globalRefs$b.typography.h3.font,
|
4233
4233
|
},
|
4234
4234
|
subtitle1: {
|
4235
|
-
[vars$i.fontSize]: globalRefs$
|
4236
|
-
[vars$i.fontWeight]: globalRefs$
|
4237
|
-
[vars$i.fontFamily]: globalRefs$
|
4235
|
+
[vars$i.fontSize]: globalRefs$b.typography.subtitle1.size,
|
4236
|
+
[vars$i.fontWeight]: globalRefs$b.typography.subtitle1.weight,
|
4237
|
+
[vars$i.fontFamily]: globalRefs$b.typography.subtitle1.font,
|
4238
4238
|
},
|
4239
4239
|
subtitle2: {
|
4240
|
-
[vars$i.fontSize]: globalRefs$
|
4241
|
-
[vars$i.fontWeight]: globalRefs$
|
4242
|
-
[vars$i.fontFamily]: globalRefs$
|
4240
|
+
[vars$i.fontSize]: globalRefs$b.typography.subtitle2.size,
|
4241
|
+
[vars$i.fontWeight]: globalRefs$b.typography.subtitle2.weight,
|
4242
|
+
[vars$i.fontFamily]: globalRefs$b.typography.subtitle2.font,
|
4243
4243
|
},
|
4244
4244
|
body1: {
|
4245
|
-
[vars$i.fontSize]: globalRefs$
|
4246
|
-
[vars$i.fontWeight]: globalRefs$
|
4247
|
-
[vars$i.fontFamily]: globalRefs$
|
4245
|
+
[vars$i.fontSize]: globalRefs$b.typography.body1.size,
|
4246
|
+
[vars$i.fontWeight]: globalRefs$b.typography.body1.weight,
|
4247
|
+
[vars$i.fontFamily]: globalRefs$b.typography.body1.font,
|
4248
4248
|
},
|
4249
4249
|
body2: {
|
4250
|
-
[vars$i.fontSize]: globalRefs$
|
4251
|
-
[vars$i.fontWeight]: globalRefs$
|
4252
|
-
[vars$i.fontFamily]: globalRefs$
|
4250
|
+
[vars$i.fontSize]: globalRefs$b.typography.body2.size,
|
4251
|
+
[vars$i.fontWeight]: globalRefs$b.typography.body2.weight,
|
4252
|
+
[vars$i.fontFamily]: globalRefs$b.typography.body2.font,
|
4253
4253
|
},
|
4254
4254
|
},
|
4255
4255
|
|
4256
4256
|
mode: {
|
4257
4257
|
primary: {
|
4258
|
-
[vars$i.textColor]: globalRefs$
|
4258
|
+
[vars$i.textColor]: globalRefs$b.colors.primary.main,
|
4259
4259
|
},
|
4260
4260
|
secondary: {
|
4261
|
-
[vars$i.textColor]: globalRefs$
|
4261
|
+
[vars$i.textColor]: globalRefs$b.colors.secondary.main,
|
4262
4262
|
},
|
4263
4263
|
error: {
|
4264
|
-
[vars$i.textColor]: globalRefs$
|
4264
|
+
[vars$i.textColor]: globalRefs$b.colors.error.main,
|
4265
4265
|
},
|
4266
4266
|
success: {
|
4267
|
-
[vars$i.textColor]: globalRefs$
|
4267
|
+
[vars$i.textColor]: globalRefs$b.colors.success.main,
|
4268
4268
|
},
|
4269
4269
|
},
|
4270
4270
|
|
@@ -4364,14 +4364,14 @@ const LinkClass = compose(
|
|
4364
4364
|
componentNameValidationMixin
|
4365
4365
|
)(RawLink);
|
4366
4366
|
|
4367
|
-
const globalRefs$
|
4367
|
+
const globalRefs$a = getThemeRefs(globals);
|
4368
4368
|
const vars$h = LinkClass.cssVarList;
|
4369
4369
|
|
4370
4370
|
const link = {
|
4371
|
-
[vars$h.hostDirection]: globalRefs$
|
4371
|
+
[vars$h.hostDirection]: globalRefs$a.direction,
|
4372
4372
|
[vars$h.cursor]: 'pointer',
|
4373
4373
|
|
4374
|
-
[vars$h.textColor]: globalRefs$
|
4374
|
+
[vars$h.textColor]: globalRefs$a.colors.primary.main,
|
4375
4375
|
|
4376
4376
|
textAlign: {
|
4377
4377
|
right: { [vars$h.textAlign]: 'right' },
|
@@ -4385,16 +4385,16 @@ const link = {
|
|
4385
4385
|
|
4386
4386
|
mode: {
|
4387
4387
|
primary: {
|
4388
|
-
[vars$h.textColor]: globalRefs$
|
4388
|
+
[vars$h.textColor]: globalRefs$a.colors.primary.main,
|
4389
4389
|
},
|
4390
4390
|
secondary: {
|
4391
|
-
[vars$h.textColor]: globalRefs$
|
4391
|
+
[vars$h.textColor]: globalRefs$a.colors.secondary.main,
|
4392
4392
|
},
|
4393
4393
|
error: {
|
4394
|
-
[vars$h.textColor]: globalRefs$
|
4394
|
+
[vars$h.textColor]: globalRefs$a.colors.error.main,
|
4395
4395
|
},
|
4396
4396
|
success: {
|
4397
|
-
[vars$h.textColor]: globalRefs$
|
4397
|
+
[vars$h.textColor]: globalRefs$a.colors.success.main,
|
4398
4398
|
},
|
4399
4399
|
},
|
4400
4400
|
};
|
@@ -4505,7 +4505,7 @@ const DividerClass = compose(
|
|
4505
4505
|
componentNameValidationMixin
|
4506
4506
|
)(RawDivider);
|
4507
4507
|
|
4508
|
-
const globalRefs$
|
4508
|
+
const globalRefs$9 = getThemeRefs(globals);
|
4509
4509
|
const compVars$2 = DividerClass.cssVarList;
|
4510
4510
|
|
4511
4511
|
const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
@@ -4519,12 +4519,12 @@ const [helperTheme$1, helperRefs$1, helperVars$1] = createHelperVars(
|
|
4519
4519
|
const divider = {
|
4520
4520
|
...helperTheme$1,
|
4521
4521
|
|
4522
|
-
[compVars$2.hostDirection]: globalRefs$
|
4522
|
+
[compVars$2.hostDirection]: globalRefs$9.direction,
|
4523
4523
|
[compVars$2.alignItems]: 'center',
|
4524
4524
|
[compVars$2.flexDirection]: 'row',
|
4525
4525
|
[compVars$2.alignSelf]: 'stretch',
|
4526
4526
|
[compVars$2.hostWidth]: '100%',
|
4527
|
-
[compVars$2.stripeColor]: globalRefs$
|
4527
|
+
[compVars$2.stripeColor]: globalRefs$9.colors.surface.main,
|
4528
4528
|
[compVars$2.stripeColorOpacity]: '0.5',
|
4529
4529
|
[compVars$2.stripeHorizontalThickness]: helperRefs$1.thickness,
|
4530
4530
|
[compVars$2.labelTextWidth]: 'fit-content',
|
@@ -4829,17 +4829,17 @@ const LoaderLinearClass = compose(
|
|
4829
4829
|
componentNameValidationMixin
|
4830
4830
|
)(RawLoaderLinear);
|
4831
4831
|
|
4832
|
-
const globalRefs$
|
4832
|
+
const globalRefs$8 = getThemeRefs(globals);
|
4833
4833
|
const vars$e = LoaderLinearClass.cssVarList;
|
4834
4834
|
|
4835
4835
|
const loaderLinear = {
|
4836
4836
|
[vars$e.hostDisplay]: 'inline-block',
|
4837
4837
|
[vars$e.hostWidth]: '100%',
|
4838
4838
|
|
4839
|
-
[vars$e.barColor]: globalRefs$
|
4839
|
+
[vars$e.barColor]: globalRefs$8.colors.surface.contrast,
|
4840
4840
|
[vars$e.barWidth]: '20%',
|
4841
4841
|
|
4842
|
-
[vars$e.barBackgroundColor]: globalRefs$
|
4842
|
+
[vars$e.barBackgroundColor]: globalRefs$8.colors.surface.main,
|
4843
4843
|
[vars$e.barBorderRadius]: '4px',
|
4844
4844
|
|
4845
4845
|
[vars$e.animationDuration]: '2s',
|
@@ -4856,10 +4856,10 @@ const loaderLinear = {
|
|
4856
4856
|
|
4857
4857
|
mode: {
|
4858
4858
|
primary: {
|
4859
|
-
[vars$e.barColor]: globalRefs$
|
4859
|
+
[vars$e.barColor]: globalRefs$8.colors.primary.main,
|
4860
4860
|
},
|
4861
4861
|
secondary: {
|
4862
|
-
[vars$e.barColor]: globalRefs$
|
4862
|
+
[vars$e.barColor]: globalRefs$8.colors.secondary.main,
|
4863
4863
|
},
|
4864
4864
|
},
|
4865
4865
|
|
@@ -4920,18 +4920,18 @@ const LoaderRadialClass = compose(
|
|
4920
4920
|
componentNameValidationMixin
|
4921
4921
|
)(RawLoaderRadial);
|
4922
4922
|
|
4923
|
-
const globalRefs$
|
4923
|
+
const globalRefs$7 = getThemeRefs(globals);
|
4924
4924
|
const compVars$1 = LoaderRadialClass.cssVarList;
|
4925
4925
|
|
4926
4926
|
const [helperTheme, helperRefs, helperVars] = createHelperVars(
|
4927
4927
|
{
|
4928
|
-
spinnerColor: globalRefs$
|
4928
|
+
spinnerColor: globalRefs$7.colors.surface.contrast,
|
4929
4929
|
mode: {
|
4930
4930
|
primary: {
|
4931
|
-
spinnerColor: globalRefs$
|
4931
|
+
spinnerColor: globalRefs$7.colors.primary.main,
|
4932
4932
|
},
|
4933
4933
|
secondary: {
|
4934
|
-
spinnerColor: globalRefs$
|
4934
|
+
spinnerColor: globalRefs$7.colors.secondary.main,
|
4935
4935
|
},
|
4936
4936
|
},
|
4937
4937
|
},
|
@@ -5344,7 +5344,7 @@ const ComboBoxClass = compose(
|
|
5344
5344
|
})
|
5345
5345
|
);
|
5346
5346
|
|
5347
|
-
const globalRefs$
|
5347
|
+
const globalRefs$6 = getThemeRefs(globals);
|
5348
5348
|
const vars$c = ComboBoxClass.cssVarList;
|
5349
5349
|
|
5350
5350
|
const comboBox = {
|
@@ -5368,12 +5368,12 @@ const comboBox = {
|
|
5368
5368
|
[vars$c.inputBackgroundColor]: refs.backgroundColor,
|
5369
5369
|
[vars$c.inputHorizontalPadding]: refs.horizontalPadding,
|
5370
5370
|
[vars$c.inputHeight]: refs.inputHeight,
|
5371
|
-
[vars$c.inputDropdownButtonColor]: globalRefs$
|
5371
|
+
[vars$c.inputDropdownButtonColor]: globalRefs$6.colors.surface.contrast,
|
5372
5372
|
[vars$c.inputDropdownButtonCursor]: 'pointer',
|
5373
5373
|
[vars$c.inputDropdownButtonSize]: refs.toggleButtonSize,
|
5374
|
-
[vars$c.inputDropdownButtonOffset]: globalRefs$
|
5375
|
-
[vars$c.overlayItemPaddingInlineStart]: globalRefs$
|
5376
|
-
[vars$c.overlayItemPaddingInlineEnd]: globalRefs$
|
5374
|
+
[vars$c.inputDropdownButtonOffset]: globalRefs$6.spacing.xs,
|
5375
|
+
[vars$c.overlayItemPaddingInlineStart]: globalRefs$6.spacing.xs,
|
5376
|
+
[vars$c.overlayItemPaddingInlineEnd]: globalRefs$6.spacing.lg,
|
5377
5377
|
|
5378
5378
|
_readonly: {
|
5379
5379
|
[vars$c.inputDropdownButtonCursor]: 'default',
|
@@ -7692,26 +7692,26 @@ const ButtonSelectionGroupItemClass = compose(
|
|
7692
7692
|
componentNameValidationMixin
|
7693
7693
|
)(RawSelectItem);
|
7694
7694
|
|
7695
|
-
const globalRefs$
|
7695
|
+
const globalRefs$5 = getThemeRefs(globals);
|
7696
7696
|
|
7697
7697
|
const vars$6 = ButtonSelectionGroupItemClass.cssVarList;
|
7698
7698
|
|
7699
7699
|
const buttonSelectionGroupItem = {
|
7700
7700
|
[vars$6.hostDirection]: 'inherit',
|
7701
|
-
[vars$6.backgroundColor]: globalRefs$
|
7702
|
-
[vars$6.labelTextColor]: globalRefs$
|
7703
|
-
[vars$6.borderColor]: globalRefs$
|
7701
|
+
[vars$6.backgroundColor]: globalRefs$5.colors.surface.light,
|
7702
|
+
[vars$6.labelTextColor]: globalRefs$5.colors.surface.contrast,
|
7703
|
+
[vars$6.borderColor]: globalRefs$5.colors.surface.main,
|
7704
7704
|
[vars$6.borderStyle]: 'solid',
|
7705
|
-
[vars$6.borderRadius]: globalRefs$
|
7705
|
+
[vars$6.borderRadius]: globalRefs$5.radius.sm,
|
7706
7706
|
|
7707
7707
|
_hover: {
|
7708
7708
|
[vars$6.backgroundColor]: '#f4f5f5', // can we take it from the palette?
|
7709
7709
|
},
|
7710
7710
|
|
7711
7711
|
_selected: {
|
7712
|
-
[vars$6.borderColor]: globalRefs$
|
7713
|
-
[vars$6.backgroundColor]: globalRefs$
|
7714
|
-
[vars$6.labelTextColor]: globalRefs$
|
7712
|
+
[vars$6.borderColor]: globalRefs$5.colors.surface.contrast,
|
7713
|
+
[vars$6.backgroundColor]: globalRefs$5.colors.surface.contrast,
|
7714
|
+
[vars$6.labelTextColor]: globalRefs$5.colors.surface.light,
|
7715
7715
|
},
|
7716
7716
|
};
|
7717
7717
|
|
@@ -8056,7 +8056,7 @@ const ButtonSelectionGroupClass = compose(
|
|
8056
8056
|
})
|
8057
8057
|
);
|
8058
8058
|
|
8059
|
-
const globalRefs$
|
8059
|
+
const globalRefs$4 = getThemeRefs(globals);
|
8060
8060
|
const vars$5 = ButtonSelectionGroupClass.cssVarList;
|
8061
8061
|
|
8062
8062
|
const buttonSelectionGroup = {
|
@@ -8065,7 +8065,7 @@ const buttonSelectionGroup = {
|
|
8065
8065
|
[vars$5.labelTextColor]: refs.labelTextColor,
|
8066
8066
|
[vars$5.labelRequiredIndicator]: refs.requiredIndicator,
|
8067
8067
|
[vars$5.errorMessageTextColor]: refs.errorMessageTextColor,
|
8068
|
-
[vars$5.itemsSpacing]: globalRefs$
|
8068
|
+
[vars$5.itemsSpacing]: globalRefs$4.spacing.sm,
|
8069
8069
|
[vars$5.hostWidth]: refs.width,
|
8070
8070
|
};
|
8071
8071
|
|
@@ -8153,7 +8153,10 @@ const ModalClass = compose(
|
|
8153
8153
|
property: 'display',
|
8154
8154
|
important: true,
|
8155
8155
|
},
|
8156
|
-
backgroundColor:
|
8156
|
+
backgroundColor: [
|
8157
|
+
{ selector: () => '::part(content)', property: 'background-color' },
|
8158
|
+
{ selector: () => '::part(overlay)', property: 'background-color' },
|
8159
|
+
],
|
8157
8160
|
width: { selector: () => '::part(overlay)', property: 'width' },
|
8158
8161
|
shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
|
8159
8162
|
},
|
@@ -8175,9 +8178,12 @@ const ModalClass = compose(
|
|
8175
8178
|
})
|
8176
8179
|
);
|
8177
8180
|
|
8181
|
+
const globalRefs$3 = getThemeRefs(globals);
|
8182
|
+
|
8178
8183
|
const compVars = ModalClass.cssVarList;
|
8179
8184
|
|
8180
8185
|
const modal = {
|
8186
|
+
[compVars.overlayBackgroundColor]: globalRefs$3.colors.surface.light,
|
8181
8187
|
[compVars.overlayShadow]: 'none',
|
8182
8188
|
[compVars.overlayWidth]: '700px',
|
8183
8189
|
};
|