@descope/web-components-ui 1.0.91 → 1.0.93
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +244 -223
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-button/Button.js +39 -25
- package/src/components/descope-container/Container.js +1 -0
- package/src/components/descope-email-field/EmailField.js +1 -0
- package/src/components/descope-passcode/Passcode.js +42 -41
- package/src/components/descope-text-field/TextField.js +1 -0
- package/src/theme/components/button.js +31 -37
- package/src/theme/components/container.js +3 -0
- package/src/theme/components/divider.js +5 -4
- package/src/theme/globals.js +10 -6
package/dist/index.esm.js
CHANGED
@@ -1041,47 +1041,63 @@ const inputEventsDispatchingMixin = (superclass) => class InputEventsDispatching
|
|
1041
1041
|
|
1042
1042
|
const componentName$o = getComponentName('button');
|
1043
1043
|
|
1044
|
-
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1045
1044
|
const resetStyles = `
|
1046
1045
|
:host {
|
1047
1046
|
display: inline-block;
|
1048
1047
|
}
|
1049
|
-
vaadin-button {
|
1048
|
+
vaadin-button {
|
1049
|
+
margin: 0;
|
1050
|
+
min-width: 0;
|
1051
|
+
width: 100%;
|
1052
|
+
height: auto;
|
1053
|
+
}
|
1054
|
+
vaadin-button::part(label) {
|
1055
|
+
padding: 0;
|
1056
|
+
}
|
1050
1057
|
vaadin-button::part(prefix) {
|
1051
1058
|
margin-left: 0;
|
1052
1059
|
margin-right: 0;
|
1053
1060
|
}
|
1054
1061
|
`;
|
1062
|
+
|
1055
1063
|
const iconStyles = `
|
1056
1064
|
vaadin-button::part(prefix),
|
1057
1065
|
vaadin-button::part(label) {
|
1058
1066
|
display: flex;
|
1059
1067
|
justify-content: center;
|
1060
1068
|
align-items: center;
|
1061
|
-
gap: 5px;
|
1062
1069
|
}
|
1063
1070
|
`;
|
1064
1071
|
|
1065
|
-
const
|
1072
|
+
const editorOverrides = `vaadin-button::part(label) { pointer-events: none; }`;
|
1073
|
+
|
1074
|
+
const { host: host$9, label: label$6 } = {
|
1075
|
+
host: { selector: () => ':host' },
|
1066
1076
|
label: { selector: '::part(label)' },
|
1067
|
-
host: { selector: () => ':host' }
|
1068
1077
|
};
|
1069
1078
|
|
1070
1079
|
const Button = compose(
|
1071
1080
|
createStyleMixin({
|
1072
1081
|
mappings: {
|
1082
|
+
color: {},
|
1083
|
+
textDecoration: label$6,
|
1084
|
+
fontSize: {},
|
1085
|
+
cursor: {},
|
1073
1086
|
backgroundColor: {},
|
1074
1087
|
borderRadius: {},
|
1075
|
-
color: label$6,
|
1076
1088
|
borderColor: {},
|
1077
1089
|
borderStyle: {},
|
1078
1090
|
borderWidth: {},
|
1079
|
-
fontSize: {},
|
1080
|
-
height: {},
|
1081
1091
|
width: host$9,
|
1082
|
-
|
1083
|
-
|
1084
|
-
|
1092
|
+
gap: label$6,
|
1093
|
+
verticalPadding: [
|
1094
|
+
{ property: 'padding-top' },
|
1095
|
+
{ property: 'padding-bottom' },
|
1096
|
+
],
|
1097
|
+
horizontalPadding: [
|
1098
|
+
{ property: 'padding-left' },
|
1099
|
+
{ property: 'padding-right' },
|
1100
|
+
]
|
1085
1101
|
}
|
1086
1102
|
}),
|
1087
1103
|
draggableMixin,
|
@@ -1090,44 +1106,44 @@ const Button = compose(
|
|
1090
1106
|
createProxy({
|
1091
1107
|
slots: ['prefix', 'label', 'suffix'],
|
1092
1108
|
wrappedEleName: 'vaadin-button',
|
1093
|
-
style: () =>
|
1094
|
-
|
1109
|
+
style: () => `
|
1110
|
+
${resetStyles}
|
1111
|
+
${iconStyles}
|
1112
|
+
${loadingIndicatorStyles}
|
1113
|
+
${editorOverrides}
|
1114
|
+
`,
|
1095
1115
|
excludeAttrsSync: ['tabindex'],
|
1096
1116
|
componentName: componentName$o
|
1097
1117
|
})
|
1098
1118
|
);
|
1099
1119
|
|
1120
|
+
const { color, fontSize } = Button.cssVarList;
|
1100
1121
|
const loadingIndicatorStyles = `
|
1101
1122
|
@keyframes spin {
|
1102
1123
|
0% { -webkit-transform: rotate(0deg); }
|
1103
1124
|
100% { -webkit-transform: rotate(360deg); }
|
1104
1125
|
}
|
1105
1126
|
:host([loading="true"]) ::before {
|
1106
|
-
--marginRatio: 1.35;
|
1107
|
-
color: var(${Button.cssVarList.color});
|
1108
1127
|
animation: spin 2s linear infinite;
|
1109
1128
|
position: absolute;
|
1110
|
-
top: calc(50% - calc((var(${Button.cssVarList.height}) / var(--marginRatio)) / 2));
|
1111
|
-
left: calc(50% - calc((var(${Button.cssVarList.height}) / var(--marginRatio)) / 2));
|
1112
1129
|
content: '';
|
1113
1130
|
z-index: 1;
|
1114
1131
|
box-sizing: border-box;
|
1115
1132
|
border-radius: 50%;
|
1116
1133
|
border-bottom-color: transparent;
|
1117
1134
|
border-left-color: transparent;
|
1118
|
-
border-width: calc(var(${Button.cssVarList.height}) / 12);
|
1119
1135
|
border-style: solid;
|
1120
|
-
|
1121
|
-
|
1136
|
+
color: var(${color});
|
1137
|
+
top: calc(50% - (var(${fontSize}) / 2));
|
1138
|
+
left: calc(50% - (var(${fontSize}) / 2));
|
1139
|
+
border-width: calc(var(${fontSize}) / 10);
|
1140
|
+
width: var(${fontSize});
|
1141
|
+
height: var(${fontSize});
|
1122
1142
|
}
|
1123
1143
|
:host([loading="true"])::part(prefix),
|
1124
1144
|
:host([loading="true"])::part(label) {
|
1125
1145
|
visibility: hidden;
|
1126
1146
|
}
|
1127
|
-
|
1128
|
-
vaadin-button {
|
1129
|
-
width: 100%;
|
1130
|
-
}
|
1131
1147
|
`;
|
1132
1148
|
|
1133
1149
|
customElements.define(componentName$o, Button);
|
@@ -1663,6 +1679,7 @@ const Container = compose(
|
|
1663
1679
|
flexWrap: {},
|
1664
1680
|
|
1665
1681
|
backgroundColor: {},
|
1682
|
+
color: {},
|
1666
1683
|
borderRadius: {},
|
1667
1684
|
|
1668
1685
|
borderColor: {},
|
@@ -1897,6 +1914,7 @@ overrides$4 = `
|
|
1897
1914
|
vaadin-email-field {
|
1898
1915
|
margin: 0;
|
1899
1916
|
padding: 0;
|
1917
|
+
width: 100%;
|
1900
1918
|
}
|
1901
1919
|
vaadin-email-field::part(input-field) {
|
1902
1920
|
overflow: hidden;
|
@@ -2368,6 +2386,7 @@ overrides$2 = `
|
|
2368
2386
|
overflow: hidden;
|
2369
2387
|
padding: 0;
|
2370
2388
|
}
|
2389
|
+
vaadin-text-field[disabled] > input:placeholder-shown,
|
2371
2390
|
vaadin-text-field[readonly] > input:placeholder-shown {
|
2372
2391
|
opacity: 1;
|
2373
2392
|
}
|
@@ -2487,55 +2506,56 @@ const Passcode = compose(
|
|
2487
2506
|
}
|
2488
2507
|
|
2489
2508
|
descope-passcode-internal {
|
2490
|
-
|
2491
|
-
|
2492
|
-
|
2493
|
-
|
2494
|
-
|
2509
|
+
-webkit-mask-image: none;
|
2510
|
+
padding: 0;
|
2511
|
+
width: 100%;
|
2512
|
+
height: 100%;
|
2513
|
+
min-height: initial;
|
2495
2514
|
}
|
2496
2515
|
|
2497
|
-
|
2498
|
-
|
2499
|
-
|
2500
|
-
|
2516
|
+
descope-passcode-internal .wrapper {
|
2517
|
+
box-sizing: border-box;
|
2518
|
+
min-height: initial;
|
2519
|
+
height: 100%;
|
2520
|
+
justify-content: center;
|
2501
2521
|
}
|
2502
2522
|
|
2503
|
-
|
2504
|
-
|
2505
|
-
|
2523
|
+
descope-passcode-internal descope-text-field {
|
2524
|
+
width: var(${textVars$1.height})
|
2525
|
+
}
|
2506
2526
|
|
2507
2527
|
vaadin-text-field::part(input-field) {
|
2508
|
-
|
2509
|
-
|
2510
|
-
|
2511
|
-
|
2528
|
+
background-color: transparent;
|
2529
|
+
padding: 0;
|
2530
|
+
overflow: hidden;
|
2531
|
+
-webkit-mask-image: none;
|
2512
2532
|
}
|
2513
2533
|
|
2514
|
-
|
2515
|
-
|
2516
|
-
|
2517
|
-
|
2518
|
-
|
2534
|
+
vaadin-text-field {
|
2535
|
+
margin: 0;
|
2536
|
+
padding: 0;
|
2537
|
+
width: 100%
|
2538
|
+
}
|
2519
2539
|
|
2520
|
-
|
2521
|
-
|
2522
|
-
|
2540
|
+
vaadin-text-field::before {
|
2541
|
+
height: initial;
|
2542
|
+
}
|
2523
2543
|
|
2524
|
-
|
2525
|
-
|
2526
|
-
|
2527
|
-
|
2528
|
-
vaadin-text-field::part(input-field):focus {
|
2529
|
-
cursor: text;
|
2530
|
-
}
|
2544
|
+
vaadin-text-field[readonly] > input:placeholder-shown {
|
2545
|
+
opacity: 1;
|
2546
|
+
}
|
2531
2547
|
|
2532
|
-
|
2533
|
-
|
2534
|
-
|
2535
|
-
|
2536
|
-
|
2537
|
-
|
2538
|
-
|
2548
|
+
vaadin-text-field::part(input-field):focus {
|
2549
|
+
cursor: text;
|
2550
|
+
}
|
2551
|
+
|
2552
|
+
vaadin-text-field[required]::part(required-indicator)::after {
|
2553
|
+
font-size: "12px";
|
2554
|
+
content: "*";
|
2555
|
+
}
|
2556
|
+
vaadin-text-field[readonly]::part(input-field)::after {
|
2557
|
+
border: 0 solid;
|
2558
|
+
}
|
2539
2559
|
`,
|
2540
2560
|
excludeAttrsSync: ['tabindex'],
|
2541
2561
|
componentName: componentName$8
|
@@ -5032,15 +5052,19 @@ const spacing = {
|
|
5032
5052
|
};
|
5033
5053
|
|
5034
5054
|
const border = {
|
5035
|
-
|
5036
|
-
|
5037
|
-
|
5055
|
+
xs: '1px',
|
5056
|
+
sm: '2px',
|
5057
|
+
md: '3px',
|
5058
|
+
lg: '4px',
|
5059
|
+
xl: '5px'
|
5038
5060
|
};
|
5039
5061
|
|
5040
5062
|
const radius = {
|
5041
|
-
|
5042
|
-
|
5043
|
-
|
5063
|
+
xs: '5px',
|
5064
|
+
sm: '10px',
|
5065
|
+
md: '15px',
|
5066
|
+
lg: '20px',
|
5067
|
+
xl: '25px'
|
5044
5068
|
};
|
5045
5069
|
|
5046
5070
|
const shadow = {
|
@@ -5070,59 +5094,50 @@ var globals = {
|
|
5070
5094
|
fonts
|
5071
5095
|
};
|
5072
5096
|
|
5073
|
-
const globalRefs$
|
5097
|
+
const globalRefs$f = getThemeRefs(globals);
|
5074
5098
|
const vars$g = Button.cssVarList;
|
5075
5099
|
|
5076
5100
|
const mode = {
|
5077
|
-
primary: globalRefs$
|
5078
|
-
secondary: globalRefs$
|
5079
|
-
success: globalRefs$
|
5080
|
-
error: globalRefs$
|
5081
|
-
surface: globalRefs$
|
5101
|
+
primary: globalRefs$f.colors.primary,
|
5102
|
+
secondary: globalRefs$f.colors.secondary,
|
5103
|
+
success: globalRefs$f.colors.success,
|
5104
|
+
error: globalRefs$f.colors.error,
|
5105
|
+
surface: globalRefs$f.colors.surface
|
5082
5106
|
};
|
5083
5107
|
|
5084
5108
|
const [helperTheme$2, helperRefs$2] = createHelperVars({ mode }, componentName$o);
|
5085
5109
|
|
5110
|
+
const verticalPaddingRatio = 3;
|
5111
|
+
const horizontalPaddingRatio = 2;
|
5112
|
+
|
5086
5113
|
const button = {
|
5087
5114
|
...helperTheme$2,
|
5088
|
-
[vars$g.width]: 'fit-content',
|
5089
|
-
size: {
|
5090
|
-
xs: {
|
5091
|
-
[vars$g.height]: '10px',
|
5092
|
-
[vars$g.fontSize]: '10px',
|
5093
|
-
[vars$g.padding]: `0 ${globalRefs$e.spacing.xs}`
|
5094
|
-
},
|
5095
|
-
sm: {
|
5096
|
-
[vars$g.height]: '20px',
|
5097
|
-
[vars$g.fontSize]: '10px',
|
5098
|
-
[vars$g.padding]: `0 ${globalRefs$e.spacing.sm}`
|
5099
|
-
},
|
5100
|
-
md: {
|
5101
|
-
[vars$g.height]: '30px',
|
5102
|
-
[vars$g.fontSize]: '14px',
|
5103
|
-
[vars$g.padding]: `0 ${globalRefs$e.spacing.md}`
|
5104
|
-
},
|
5105
|
-
lg: {
|
5106
|
-
[vars$g.height]: '40px',
|
5107
|
-
[vars$g.fontSize]: '20px',
|
5108
|
-
[vars$g.padding]: `0 ${globalRefs$e.spacing.lg}`
|
5109
|
-
},
|
5110
|
-
xl: {
|
5111
|
-
[vars$g.height]: '50px',
|
5112
|
-
[vars$g.fontSize]: '25px',
|
5113
|
-
[vars$g.padding]: `0 ${globalRefs$e.spacing.xl}`
|
5114
|
-
}
|
5115
|
-
},
|
5116
5115
|
|
5117
|
-
[vars$g.borderRadius]: globalRefs$e.radius.lg,
|
5118
5116
|
[vars$g.cursor]: 'pointer',
|
5117
|
+
|
5118
|
+
[vars$g.borderRadius]: globalRefs$f.radius.sm,
|
5119
5119
|
[vars$g.borderWidth]: '2px',
|
5120
5120
|
[vars$g.borderStyle]: 'solid',
|
5121
5121
|
[vars$g.borderColor]: 'transparent',
|
5122
5122
|
|
5123
|
+
[vars$g.gap]: '0.25em',
|
5124
|
+
[vars$g.height]: '100%',
|
5125
|
+
|
5126
|
+
[vars$g.verticalPadding]: `calc(var(${vars$g.fontSize}) / ${verticalPaddingRatio})`,
|
5127
|
+
[vars$g.horizontalPadding]: `calc(var(${vars$g.fontSize}) / ${horizontalPaddingRatio})`,
|
5128
|
+
|
5129
|
+
size: {
|
5130
|
+
xs: { [vars$g.fontSize]: '12px' },
|
5131
|
+
sm: { [vars$g.fontSize]: '14px' },
|
5132
|
+
md: { [vars$g.fontSize]: '18px' },
|
5133
|
+
lg: { [vars$g.fontSize]: '22px' },
|
5134
|
+
xl: { [vars$g.fontSize]: '26px' }
|
5135
|
+
},
|
5136
|
+
|
5123
5137
|
_fullWidth: {
|
5124
5138
|
[vars$g.width]: '100%'
|
5125
5139
|
},
|
5140
|
+
|
5126
5141
|
_loading: {
|
5127
5142
|
[vars$g.cursor]: 'wait'
|
5128
5143
|
},
|
@@ -5134,33 +5149,36 @@ const button = {
|
|
5134
5149
|
_hover: {
|
5135
5150
|
[vars$g.backgroundColor]: helperRefs$2.dark
|
5136
5151
|
},
|
5137
|
-
|
5138
|
-
[vars$g.backgroundColor]: helperRefs$2.
|
5152
|
+
_active: {
|
5153
|
+
[vars$g.backgroundColor]: helperRefs$2.dark
|
5139
5154
|
}
|
5140
5155
|
},
|
5156
|
+
|
5141
5157
|
outline: {
|
5142
5158
|
[vars$g.color]: helperRefs$2.main,
|
5143
|
-
[vars$g.borderColor]:
|
5159
|
+
[vars$g.borderColor]: 'currentColor',
|
5144
5160
|
_hover: {
|
5145
5161
|
[vars$g.color]: helperRefs$2.dark,
|
5146
|
-
|
5147
|
-
|
5148
|
-
|
5149
|
-
}
|
5162
|
+
},
|
5163
|
+
_active: {
|
5164
|
+
[vars$g.color]: helperRefs$2.light,
|
5150
5165
|
}
|
5151
5166
|
},
|
5167
|
+
|
5152
5168
|
link: {
|
5153
5169
|
[vars$g.color]: helperRefs$2.main,
|
5154
|
-
[vars$g.lineHeight]: helperRefs$2.height,
|
5155
5170
|
_hover: {
|
5156
5171
|
[vars$g.color]: helperRefs$2.main,
|
5157
5172
|
[vars$g.textDecoration]: 'underline'
|
5173
|
+
},
|
5174
|
+
_active: {
|
5175
|
+
[vars$g.color]: helperRefs$2.dark
|
5158
5176
|
}
|
5159
5177
|
}
|
5160
5178
|
}
|
5161
5179
|
};
|
5162
5180
|
|
5163
|
-
const globalRefs$
|
5181
|
+
const globalRefs$e = getThemeRefs(globals);
|
5164
5182
|
|
5165
5183
|
const vars$f = TextField.cssVarList;
|
5166
5184
|
|
@@ -5169,44 +5187,44 @@ const textField = (vars) => ({
|
|
5169
5187
|
xs: {
|
5170
5188
|
[vars.height]: '14px',
|
5171
5189
|
[vars.fontSize]: '8px',
|
5172
|
-
[vars.padding]: `0 ${globalRefs$
|
5190
|
+
[vars.padding]: `0 ${globalRefs$e.spacing.xs}`
|
5173
5191
|
},
|
5174
5192
|
sm: {
|
5175
5193
|
[vars.height]: '20px',
|
5176
5194
|
[vars.fontSize]: '10px',
|
5177
|
-
[vars.padding]: `0 ${globalRefs$
|
5195
|
+
[vars.padding]: `0 ${globalRefs$e.spacing.sm}`
|
5178
5196
|
},
|
5179
5197
|
md: {
|
5180
5198
|
[vars.height]: '30px',
|
5181
5199
|
[vars.fontSize]: '14px',
|
5182
|
-
[vars.padding]: `0 ${globalRefs$
|
5200
|
+
[vars.padding]: `0 ${globalRefs$e.spacing.md}`
|
5183
5201
|
},
|
5184
5202
|
lg: {
|
5185
5203
|
[vars.height]: '40px',
|
5186
5204
|
[vars.fontSize]: '20px',
|
5187
|
-
[vars.padding]: `0 ${globalRefs$
|
5205
|
+
[vars.padding]: `0 ${globalRefs$e.spacing.lg}`
|
5188
5206
|
},
|
5189
5207
|
xl: {
|
5190
5208
|
[vars.height]: '50px',
|
5191
5209
|
[vars.fontSize]: '25px',
|
5192
|
-
[vars.padding]: `0 ${globalRefs$
|
5210
|
+
[vars.padding]: `0 ${globalRefs$e.spacing.xl}`
|
5193
5211
|
}
|
5194
5212
|
},
|
5195
5213
|
|
5196
|
-
[vars.color]: globalRefs$
|
5197
|
-
[vars.placeholderColor]: globalRefs$
|
5214
|
+
[vars.color]: globalRefs$e.colors.surface.contrast,
|
5215
|
+
[vars.placeholderColor]: globalRefs$e.colors.surface.main,
|
5198
5216
|
|
5199
|
-
[vars.backgroundColor]: globalRefs$
|
5217
|
+
[vars.backgroundColor]: globalRefs$e.colors.surface.light,
|
5200
5218
|
|
5201
5219
|
[vars.borderWidth]: '1px',
|
5202
5220
|
[vars.borderStyle]: 'solid',
|
5203
5221
|
[vars.borderColor]: 'transparent',
|
5204
|
-
[vars.borderRadius]: globalRefs$
|
5222
|
+
[vars.borderRadius]: globalRefs$e.radius.sm,
|
5205
5223
|
|
5206
5224
|
_disabled: {
|
5207
|
-
[vars.color]: globalRefs$
|
5208
|
-
[vars.placeholderColor]: globalRefs$
|
5209
|
-
[vars.backgroundColor]: globalRefs$
|
5225
|
+
[vars.color]: globalRefs$e.colors.surface.dark,
|
5226
|
+
[vars.placeholderColor]: globalRefs$e.colors.surface.light,
|
5227
|
+
[vars.backgroundColor]: globalRefs$e.colors.surface.main
|
5210
5228
|
},
|
5211
5229
|
|
5212
5230
|
_fullWidth: {
|
@@ -5216,24 +5234,24 @@ const textField = (vars) => ({
|
|
5216
5234
|
_focused: {
|
5217
5235
|
[vars.outlineWidth]: '2px',
|
5218
5236
|
[vars.outlineStyle]: 'solid',
|
5219
|
-
[vars.outlineColor]: globalRefs$
|
5237
|
+
[vars.outlineColor]: globalRefs$e.colors.surface.main
|
5220
5238
|
},
|
5221
5239
|
|
5222
5240
|
_bordered: {
|
5223
|
-
[vars.borderColor]: globalRefs$
|
5241
|
+
[vars.borderColor]: globalRefs$e.colors.surface.main
|
5224
5242
|
},
|
5225
5243
|
|
5226
5244
|
_invalid: {
|
5227
|
-
[vars.borderColor]: globalRefs$
|
5228
|
-
[vars.color]: globalRefs$
|
5229
|
-
[vars.outlineColor]: globalRefs$
|
5230
|
-
[vars.placeholderColor]: globalRefs$
|
5245
|
+
[vars.borderColor]: globalRefs$e.colors.error.main,
|
5246
|
+
[vars.color]: globalRefs$e.colors.error.main,
|
5247
|
+
[vars.outlineColor]: globalRefs$e.colors.error.light,
|
5248
|
+
[vars.placeholderColor]: globalRefs$e.colors.error.light
|
5231
5249
|
}
|
5232
5250
|
});
|
5233
5251
|
|
5234
5252
|
var textField$1 = textField(vars$f);
|
5235
5253
|
|
5236
|
-
const globalRefs$
|
5254
|
+
const globalRefs$d = getThemeRefs(globals);
|
5237
5255
|
|
5238
5256
|
const vars$e = PasswordField.cssVarList;
|
5239
5257
|
|
@@ -5241,11 +5259,11 @@ const passwordField = {
|
|
5241
5259
|
[vars$e.wrapperBorderStyle]: 'solid',
|
5242
5260
|
[vars$e.wrapperBorderWidth]: '1px',
|
5243
5261
|
[vars$e.wrapperBorderColor]: 'transparent',
|
5244
|
-
[vars$e.wrapperBorderRadius]: globalRefs$
|
5262
|
+
[vars$e.wrapperBorderRadius]: globalRefs$d.radius.sm,
|
5245
5263
|
|
5246
|
-
[vars$e.labelTextColor]: globalRefs$
|
5247
|
-
[vars$e.inputTextColor]: globalRefs$
|
5248
|
-
[vars$e.placeholderTextColor]: globalRefs$
|
5264
|
+
[vars$e.labelTextColor]: globalRefs$d.colors.surface.contrast,
|
5265
|
+
[vars$e.inputTextColor]: globalRefs$d.colors.surface.contrast,
|
5266
|
+
[vars$e.placeholderTextColor]: globalRefs$d.colors.surface.main,
|
5249
5267
|
|
5250
5268
|
[vars$e.pointerCursor]: 'pointer',
|
5251
5269
|
|
@@ -5276,7 +5294,7 @@ const passwordField = {
|
|
5276
5294
|
|
5277
5295
|
_bordered: {
|
5278
5296
|
[vars$e.padding]: `0 0.5em`,
|
5279
|
-
[vars$e.wrapperBorderColor]: globalRefs$
|
5297
|
+
[vars$e.wrapperBorderColor]: globalRefs$d.colors.surface.main
|
5280
5298
|
},
|
5281
5299
|
|
5282
5300
|
_fullWidth: {
|
@@ -5284,10 +5302,10 @@ const passwordField = {
|
|
5284
5302
|
},
|
5285
5303
|
|
5286
5304
|
_invalid: {
|
5287
|
-
[vars$e.labelTextColor]: globalRefs$
|
5288
|
-
[vars$e.inputTextColor]: globalRefs$
|
5289
|
-
[vars$e.placeholderTextColor]: globalRefs$
|
5290
|
-
[vars$e.wrapperBorderColor]: globalRefs$
|
5305
|
+
[vars$e.labelTextColor]: globalRefs$d.colors.error.main,
|
5306
|
+
[vars$e.inputTextColor]: globalRefs$d.colors.error.main,
|
5307
|
+
[vars$e.placeholderTextColor]: globalRefs$d.colors.error.light,
|
5308
|
+
[vars$e.wrapperBorderColor]: globalRefs$d.colors.error.main
|
5291
5309
|
},
|
5292
5310
|
};
|
5293
5311
|
|
@@ -5299,15 +5317,15 @@ const emailField = {
|
|
5299
5317
|
...textField(EmailField.cssVarList)
|
5300
5318
|
};
|
5301
5319
|
|
5302
|
-
const globalRefs$
|
5320
|
+
const globalRefs$c = getThemeRefs(globals);
|
5303
5321
|
const vars$d = TextArea.cssVarList;
|
5304
5322
|
|
5305
5323
|
const textArea = {
|
5306
|
-
[vars$d.color]: globalRefs$
|
5307
|
-
[vars$d.backgroundColor]: globalRefs$
|
5324
|
+
[vars$d.color]: globalRefs$c.colors.primary.main,
|
5325
|
+
[vars$d.backgroundColor]: globalRefs$c.colors.surface.light,
|
5308
5326
|
[vars$d.resize]: 'vertical',
|
5309
5327
|
|
5310
|
-
[vars$d.borderRadius]: globalRefs$
|
5328
|
+
[vars$d.borderRadius]: globalRefs$c.radius.sm,
|
5311
5329
|
[vars$d.borderWidth]: '1px',
|
5312
5330
|
[vars$d.borderStyle]: 'solid',
|
5313
5331
|
[vars$d.borderColor]: 'transparent',
|
@@ -5317,11 +5335,11 @@ const textArea = {
|
|
5317
5335
|
|
5318
5336
|
|
5319
5337
|
_bordered: {
|
5320
|
-
[vars$d.borderColor]: globalRefs$
|
5338
|
+
[vars$d.borderColor]: globalRefs$c.colors.surface.main
|
5321
5339
|
},
|
5322
5340
|
|
5323
5341
|
_focused: {
|
5324
|
-
[vars$d.outlineColor]: globalRefs$
|
5342
|
+
[vars$d.outlineColor]: globalRefs$c.colors.surface.main
|
5325
5343
|
},
|
5326
5344
|
|
5327
5345
|
_fullWidth: {
|
@@ -5333,26 +5351,26 @@ const textArea = {
|
|
5333
5351
|
},
|
5334
5352
|
|
5335
5353
|
_invalid: {
|
5336
|
-
[vars$d.outlineColor]: globalRefs$
|
5354
|
+
[vars$d.outlineColor]: globalRefs$c.colors.error.main
|
5337
5355
|
}
|
5338
5356
|
};
|
5339
5357
|
|
5340
|
-
const globalRefs$
|
5358
|
+
const globalRefs$b = getThemeRefs(globals);
|
5341
5359
|
const vars$c = Checkbox.cssVarList;
|
5342
5360
|
|
5343
5361
|
const checkbox = {
|
5344
|
-
[vars$c.checkboxBackgroundColor]: globalRefs$
|
5362
|
+
[vars$c.checkboxBackgroundColor]: globalRefs$b.colors.surface.main,
|
5345
5363
|
|
5346
5364
|
[vars$c.labelFontSize]: '12px',
|
5347
5365
|
[vars$c.labelFontWeight]: '400',
|
5348
|
-
[vars$c.labelTextColor]: globalRefs$
|
5366
|
+
[vars$c.labelTextColor]: globalRefs$b.colors.surface.contrast,
|
5349
5367
|
[vars$c.cursor]: 'pointer',
|
5350
5368
|
|
5351
5369
|
[vars$c.checkboxWidth]: 'calc(1em - 2px)',
|
5352
5370
|
[vars$c.checkboxHeight]: 'calc(1em - 2px)',
|
5353
5371
|
[vars$c.labelMargin]: 'calc(1em + 5px)',
|
5354
5372
|
|
5355
|
-
[vars$c.checkboxRadius]: globalRefs$
|
5373
|
+
[vars$c.checkboxRadius]: globalRefs$b.radius.sm,
|
5356
5374
|
|
5357
5375
|
size: {
|
5358
5376
|
xs: {
|
@@ -5387,24 +5405,24 @@ const checkbox = {
|
|
5387
5405
|
},
|
5388
5406
|
|
5389
5407
|
_checked: {
|
5390
|
-
[vars$c.checkboxBackgroundColor]: globalRefs$
|
5391
|
-
[vars$c.checkmarkTextColor]: globalRefs$
|
5408
|
+
[vars$c.checkboxBackgroundColor]: globalRefs$b.colors.primary.main,
|
5409
|
+
[vars$c.checkmarkTextColor]: globalRefs$b.colors.primary.contrast,
|
5392
5410
|
},
|
5393
5411
|
|
5394
5412
|
_disabled: {
|
5395
|
-
[vars$c.checkboxBackgroundColor]: globalRefs$
|
5413
|
+
[vars$c.checkboxBackgroundColor]: globalRefs$b.colors.surface.main,
|
5396
5414
|
},
|
5397
5415
|
|
5398
5416
|
_focused: {
|
5399
5417
|
[vars$c.checkboxOutlineWidth]: '2px',
|
5400
5418
|
[vars$c.checkboxOutlineOffset]: '1px',
|
5401
|
-
[vars$c.checkboxOutlineColor]: globalRefs$
|
5419
|
+
[vars$c.checkboxOutlineColor]: globalRefs$b.colors.primary.main,
|
5402
5420
|
[vars$c.checkboxOutlineStyle]: 'solid'
|
5403
5421
|
},
|
5404
5422
|
|
5405
5423
|
_invalid: {
|
5406
|
-
[vars$c.checkboxOutlineColor]: globalRefs$
|
5407
|
-
[vars$c.labelTextColor]: globalRefs$
|
5424
|
+
[vars$c.checkboxOutlineColor]: globalRefs$b.colors.error.main,
|
5425
|
+
[vars$c.labelTextColor]: globalRefs$b.colors.error.main
|
5408
5426
|
},
|
5409
5427
|
|
5410
5428
|
};
|
@@ -5413,7 +5431,7 @@ const knobMargin = '2px';
|
|
5413
5431
|
const checkboxHeight = '1.25em';
|
5414
5432
|
const trackBorderWidth = '2px';
|
5415
5433
|
|
5416
|
-
const globalRefs$
|
5434
|
+
const globalRefs$a = getThemeRefs(globals);
|
5417
5435
|
const vars$b = SwitchToggle.cssVarList;
|
5418
5436
|
|
5419
5437
|
const switchToggle = {
|
@@ -5429,21 +5447,21 @@ const switchToggle = {
|
|
5429
5447
|
|
5430
5448
|
[vars$b.trackBorderStyle]: 'solid',
|
5431
5449
|
[vars$b.trackBorderWidth]: trackBorderWidth,
|
5432
|
-
[vars$b.trackBorderColor]: globalRefs$
|
5450
|
+
[vars$b.trackBorderColor]: globalRefs$a.colors.surface.contrast,
|
5433
5451
|
|
5434
5452
|
[vars$b.trackBackgroundColor]: 'none',
|
5435
|
-
[vars$b.trackRadius]: globalRefs$
|
5453
|
+
[vars$b.trackRadius]: globalRefs$a.radius.md,
|
5436
5454
|
[vars$b.trackWidth]: '2.5em',
|
5437
5455
|
[vars$b.trackHeight]: checkboxHeight,
|
5438
5456
|
|
5439
5457
|
[vars$b.knobSize]: `calc(1em - ${knobMargin})`,
|
5440
5458
|
[vars$b.knobRadius]: '50%',
|
5441
5459
|
[vars$b.knobTopOffset]: '1px',
|
5442
|
-
[vars$b.knobColor]: globalRefs$
|
5460
|
+
[vars$b.knobColor]: globalRefs$a.colors.surface.contrast,
|
5443
5461
|
[vars$b.knobPosition]: knobMargin,
|
5444
5462
|
[vars$b.knobTransition]: '0.3s',
|
5445
5463
|
|
5446
|
-
[vars$b.labelTextColor]: globalRefs$
|
5464
|
+
[vars$b.labelTextColor]: globalRefs$a.colors.surface.contrast,
|
5447
5465
|
[vars$b.labelFontWeight]: '400',
|
5448
5466
|
[vars$b.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
|
5449
5467
|
[vars$b.labelMargin]: '0.25em',
|
@@ -5453,35 +5471,35 @@ const switchToggle = {
|
|
5453
5471
|
},
|
5454
5472
|
|
5455
5473
|
_checked: {
|
5456
|
-
[vars$b.trackBorderColor]: globalRefs$
|
5474
|
+
[vars$b.trackBorderColor]: globalRefs$a.colors.primary.main,
|
5457
5475
|
[vars$b.knobPosition]: `calc(100% - var(${vars$b.knobSize}) - ${knobMargin})`,
|
5458
|
-
[vars$b.knobColor]: globalRefs$
|
5459
|
-
[vars$b.knobTextColor]: globalRefs$
|
5476
|
+
[vars$b.knobColor]: globalRefs$a.colors.primary.main,
|
5477
|
+
[vars$b.knobTextColor]: globalRefs$a.colors.primary.contrast,
|
5460
5478
|
},
|
5461
5479
|
|
5462
5480
|
_disabled: {
|
5463
5481
|
[vars$b.cursor]: 'not-allowed', // todo: fix cursor
|
5464
|
-
[vars$b.knobColor]: globalRefs$
|
5465
|
-
[vars$b.trackBorderColor]: globalRefs$
|
5466
|
-
[vars$b.trackBackgroundColor]: globalRefs$
|
5482
|
+
[vars$b.knobColor]: globalRefs$a.colors.surface.main,
|
5483
|
+
[vars$b.trackBorderColor]: globalRefs$a.colors.surface.main,
|
5484
|
+
[vars$b.trackBackgroundColor]: globalRefs$a.colors.surface.light,
|
5467
5485
|
},
|
5468
5486
|
|
5469
5487
|
_focused: {
|
5470
5488
|
[vars$b.switchOutlineWidth]: '2px',
|
5471
5489
|
[vars$b.switchOutlineOffset]: '1px',
|
5472
|
-
[vars$b.switchOutlineColor]: globalRefs$
|
5490
|
+
[vars$b.switchOutlineColor]: globalRefs$a.colors.primary.main,
|
5473
5491
|
[vars$b.switchOutlineStyle]: 'solid'
|
5474
5492
|
},
|
5475
5493
|
|
5476
5494
|
_invalid: {
|
5477
|
-
[vars$b.switchOutlineColor]: globalRefs$
|
5478
|
-
[vars$b.trackBorderColor]: globalRefs$
|
5479
|
-
[vars$b.knobColor]: globalRefs$
|
5480
|
-
[vars$b.labelTextColor]: globalRefs$
|
5495
|
+
[vars$b.switchOutlineColor]: globalRefs$a.colors.error.main,
|
5496
|
+
[vars$b.trackBorderColor]: globalRefs$a.colors.error.main,
|
5497
|
+
[vars$b.knobColor]: globalRefs$a.colors.error.main,
|
5498
|
+
[vars$b.labelTextColor]: globalRefs$a.colors.error.main
|
5481
5499
|
},
|
5482
5500
|
};
|
5483
5501
|
|
5484
|
-
const globalRefs$
|
5502
|
+
const globalRefs$9 = getThemeRefs(globals);
|
5485
5503
|
|
5486
5504
|
const vars$a = Container.cssVarList;
|
5487
5505
|
|
@@ -5507,6 +5525,9 @@ const [helperTheme$1, helperRefs$1, helperVars] =
|
|
5507
5525
|
const container = {
|
5508
5526
|
...helperTheme$1,
|
5509
5527
|
[vars$a.width]: '100%',
|
5528
|
+
[vars$a.boxShadow]: 'none',
|
5529
|
+
[vars$a.backgroundColor]: globalRefs$9.colors.surface.light,
|
5530
|
+
[vars$a.color]: globalRefs$9.colors.surface.contrast,
|
5510
5531
|
verticalPadding: {
|
5511
5532
|
sm: { [vars$a.verticalPadding]: '5px' },
|
5512
5533
|
md: { [vars$a.verticalPadding]: '10px' },
|
@@ -5552,32 +5573,32 @@ const container = {
|
|
5552
5573
|
|
5553
5574
|
shadow: {
|
5554
5575
|
sm: {
|
5555
|
-
[vars$a.boxShadow]: `${globalRefs$
|
5576
|
+
[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.sm} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.sm} ${helperRefs$1.shadowColor}`
|
5556
5577
|
},
|
5557
5578
|
md: {
|
5558
|
-
[vars$a.boxShadow]: `${globalRefs$
|
5579
|
+
[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.md} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.md} ${helperRefs$1.shadowColor}`
|
5559
5580
|
},
|
5560
5581
|
lg: {
|
5561
|
-
[vars$a.boxShadow]: `${globalRefs$
|
5582
|
+
[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.lg} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.lg} ${helperRefs$1.shadowColor}`
|
5562
5583
|
},
|
5563
5584
|
xl: {
|
5564
|
-
[vars$a.boxShadow]: `${globalRefs$
|
5585
|
+
[vars$a.boxShadow]: `${globalRefs$9.shadow.wide.xl} ${helperRefs$1.shadowColor}, ${globalRefs$9.shadow.narrow.xl} ${helperRefs$1.shadowColor}`
|
5565
5586
|
},
|
5566
5587
|
'2xl': {
|
5567
5588
|
[helperVars.shadowColor]: '#00000050',
|
5568
|
-
[vars$a.boxShadow]: `${globalRefs$
|
5589
|
+
[vars$a.boxShadow]: `${globalRefs$9.shadow.wide['2xl']} ${helperRefs$1.shadowColor}`
|
5569
5590
|
},
|
5570
5591
|
},
|
5571
5592
|
|
5572
5593
|
borderRadius: {
|
5573
5594
|
sm: {
|
5574
|
-
[vars$a.borderRadius]: globalRefs$
|
5595
|
+
[vars$a.borderRadius]: globalRefs$9.radius.sm
|
5575
5596
|
},
|
5576
5597
|
md: {
|
5577
|
-
[vars$a.borderRadius]: globalRefs$
|
5598
|
+
[vars$a.borderRadius]: globalRefs$9.radius.md
|
5578
5599
|
},
|
5579
5600
|
lg: {
|
5580
|
-
[vars$a.borderRadius]: globalRefs$
|
5601
|
+
[vars$a.borderRadius]: globalRefs$9.radius.lg
|
5581
5602
|
},
|
5582
5603
|
}
|
5583
5604
|
};
|
@@ -5588,7 +5609,7 @@ const logo = {
|
|
5588
5609
|
[vars$9.fallbackUrl]: 'url(https://content.app.descope.com/assets/flows/noLogoPlaceholder.svg)'
|
5589
5610
|
};
|
5590
5611
|
|
5591
|
-
const globalRefs$
|
5612
|
+
const globalRefs$8 = getThemeRefs(globals);
|
5592
5613
|
|
5593
5614
|
const vars$8 = Text.cssVarList;
|
5594
5615
|
|
@@ -5596,56 +5617,56 @@ const text = {
|
|
5596
5617
|
[vars$8.lineHeight]: '1em',
|
5597
5618
|
[vars$8.display]: 'inline-block',
|
5598
5619
|
[vars$8.textAlign]: 'left',
|
5599
|
-
[vars$8.color]: globalRefs$
|
5620
|
+
[vars$8.color]: globalRefs$8.colors.surface.dark,
|
5600
5621
|
variant: {
|
5601
5622
|
h1: {
|
5602
|
-
[vars$8.fontSize]: globalRefs$
|
5603
|
-
[vars$8.fontWeight]: globalRefs$
|
5604
|
-
[vars$8.fontFamily]: globalRefs$
|
5623
|
+
[vars$8.fontSize]: globalRefs$8.typography.h1.size,
|
5624
|
+
[vars$8.fontWeight]: globalRefs$8.typography.h1.weight,
|
5625
|
+
[vars$8.fontFamily]: globalRefs$8.typography.h1.font
|
5605
5626
|
},
|
5606
5627
|
h2: {
|
5607
|
-
[vars$8.fontSize]: globalRefs$
|
5608
|
-
[vars$8.fontWeight]: globalRefs$
|
5609
|
-
[vars$8.fontFamily]: globalRefs$
|
5628
|
+
[vars$8.fontSize]: globalRefs$8.typography.h2.size,
|
5629
|
+
[vars$8.fontWeight]: globalRefs$8.typography.h2.weight,
|
5630
|
+
[vars$8.fontFamily]: globalRefs$8.typography.h2.font
|
5610
5631
|
},
|
5611
5632
|
h3: {
|
5612
|
-
[vars$8.fontSize]: globalRefs$
|
5613
|
-
[vars$8.fontWeight]: globalRefs$
|
5614
|
-
[vars$8.fontFamily]: globalRefs$
|
5633
|
+
[vars$8.fontSize]: globalRefs$8.typography.h3.size,
|
5634
|
+
[vars$8.fontWeight]: globalRefs$8.typography.h3.weight,
|
5635
|
+
[vars$8.fontFamily]: globalRefs$8.typography.h3.font
|
5615
5636
|
},
|
5616
5637
|
subtitle1: {
|
5617
|
-
[vars$8.fontSize]: globalRefs$
|
5618
|
-
[vars$8.fontWeight]: globalRefs$
|
5619
|
-
[vars$8.fontFamily]: globalRefs$
|
5638
|
+
[vars$8.fontSize]: globalRefs$8.typography.subtitle1.size,
|
5639
|
+
[vars$8.fontWeight]: globalRefs$8.typography.subtitle1.weight,
|
5640
|
+
[vars$8.fontFamily]: globalRefs$8.typography.subtitle1.font
|
5620
5641
|
},
|
5621
5642
|
subtitle2: {
|
5622
|
-
[vars$8.fontSize]: globalRefs$
|
5623
|
-
[vars$8.fontWeight]: globalRefs$
|
5624
|
-
[vars$8.fontFamily]: globalRefs$
|
5643
|
+
[vars$8.fontSize]: globalRefs$8.typography.subtitle2.size,
|
5644
|
+
[vars$8.fontWeight]: globalRefs$8.typography.subtitle2.weight,
|
5645
|
+
[vars$8.fontFamily]: globalRefs$8.typography.subtitle2.font
|
5625
5646
|
},
|
5626
5647
|
body1: {
|
5627
|
-
[vars$8.fontSize]: globalRefs$
|
5628
|
-
[vars$8.fontWeight]: globalRefs$
|
5629
|
-
[vars$8.fontFamily]: globalRefs$
|
5648
|
+
[vars$8.fontSize]: globalRefs$8.typography.body1.size,
|
5649
|
+
[vars$8.fontWeight]: globalRefs$8.typography.body1.weight,
|
5650
|
+
[vars$8.fontFamily]: globalRefs$8.typography.body1.font
|
5630
5651
|
},
|
5631
5652
|
body2: {
|
5632
|
-
[vars$8.fontSize]: globalRefs$
|
5633
|
-
[vars$8.fontWeight]: globalRefs$
|
5634
|
-
[vars$8.fontFamily]: globalRefs$
|
5653
|
+
[vars$8.fontSize]: globalRefs$8.typography.body2.size,
|
5654
|
+
[vars$8.fontWeight]: globalRefs$8.typography.body2.weight,
|
5655
|
+
[vars$8.fontFamily]: globalRefs$8.typography.body2.font
|
5635
5656
|
}
|
5636
5657
|
},
|
5637
5658
|
mode: {
|
5638
5659
|
primary: {
|
5639
|
-
[vars$8.color]: globalRefs$
|
5660
|
+
[vars$8.color]: globalRefs$8.colors.primary.main
|
5640
5661
|
},
|
5641
5662
|
secondary: {
|
5642
|
-
[vars$8.color]: globalRefs$
|
5663
|
+
[vars$8.color]: globalRefs$8.colors.secondary.main
|
5643
5664
|
},
|
5644
5665
|
error: {
|
5645
|
-
[vars$8.color]: globalRefs$
|
5666
|
+
[vars$8.color]: globalRefs$8.colors.error.main
|
5646
5667
|
},
|
5647
5668
|
success: {
|
5648
|
-
[vars$8.color]: globalRefs$
|
5669
|
+
[vars$8.color]: globalRefs$8.colors.success.main
|
5649
5670
|
}
|
5650
5671
|
},
|
5651
5672
|
textAlign: {
|
@@ -5668,7 +5689,7 @@ const text = {
|
|
5668
5689
|
}
|
5669
5690
|
};
|
5670
5691
|
|
5671
|
-
const globalRefs$
|
5692
|
+
const globalRefs$7 = getThemeRefs(globals);
|
5672
5693
|
const vars$7 = Link.cssVarList;
|
5673
5694
|
|
5674
5695
|
const link = {
|
@@ -5676,10 +5697,10 @@ const link = {
|
|
5676
5697
|
[vars$7.borderBottomWidth]: '2px',
|
5677
5698
|
[vars$7.borderBottomStyle]: 'solid',
|
5678
5699
|
[vars$7.borderBottomColor]: 'transparent',
|
5679
|
-
[vars$7.color]: globalRefs$
|
5700
|
+
[vars$7.color]: globalRefs$7.colors.primary.main,
|
5680
5701
|
|
5681
5702
|
_hover: {
|
5682
|
-
[vars$7.borderBottomColor]: globalRefs$
|
5703
|
+
[vars$7.borderBottomColor]: globalRefs$7.colors.primary.main
|
5683
5704
|
},
|
5684
5705
|
|
5685
5706
|
textAlign: {
|
@@ -5694,45 +5715,45 @@ const link = {
|
|
5694
5715
|
|
5695
5716
|
mode: {
|
5696
5717
|
primary: {
|
5697
|
-
[vars$7.color]: globalRefs$
|
5718
|
+
[vars$7.color]: globalRefs$7.colors.primary.main,
|
5698
5719
|
_hover: {
|
5699
|
-
[vars$7.borderBottomColor]: globalRefs$
|
5720
|
+
[vars$7.borderBottomColor]: globalRefs$7.colors.primary.main
|
5700
5721
|
}
|
5701
5722
|
},
|
5702
5723
|
secondary: {
|
5703
|
-
[vars$7.color]: globalRefs$
|
5724
|
+
[vars$7.color]: globalRefs$7.colors.secondary.main,
|
5704
5725
|
_hover: {
|
5705
|
-
[vars$7.borderBottomColor]: globalRefs$
|
5726
|
+
[vars$7.borderBottomColor]: globalRefs$7.colors.secondary.main
|
5706
5727
|
}
|
5707
5728
|
},
|
5708
5729
|
error: {
|
5709
|
-
[vars$7.color]: globalRefs$
|
5730
|
+
[vars$7.color]: globalRefs$7.colors.error.main,
|
5710
5731
|
_hover: {
|
5711
|
-
[vars$7.borderBottomColor]: globalRefs$
|
5732
|
+
[vars$7.borderBottomColor]: globalRefs$7.colors.error.main
|
5712
5733
|
}
|
5713
5734
|
},
|
5714
5735
|
success: {
|
5715
|
-
[vars$7.color]: globalRefs$
|
5736
|
+
[vars$7.color]: globalRefs$7.colors.success.main,
|
5716
5737
|
_hover: {
|
5717
|
-
[vars$7.borderBottomColor]: globalRefs$
|
5738
|
+
[vars$7.borderBottomColor]: globalRefs$7.colors.success.main
|
5718
5739
|
}
|
5719
5740
|
}
|
5720
5741
|
}
|
5721
5742
|
};
|
5722
5743
|
|
5744
|
+
const globalRefs$6 = getThemeRefs(globals);
|
5745
|
+
|
5723
5746
|
const vars$6 = Divider.cssVarList;
|
5724
5747
|
|
5725
5748
|
const thickness = '2px';
|
5726
5749
|
const textPaddingSize = '10px';
|
5727
5750
|
const [helperTheme, helperRefs] = createHelperVars({ thickness, textPaddingSize }, componentName$g);
|
5728
5751
|
|
5729
|
-
|
5730
5752
|
const divider = {
|
5731
5753
|
...helperTheme,
|
5732
5754
|
[vars$6.alignItems]: 'center',
|
5733
5755
|
[vars$6.dividerHeight]: helperRefs.thickness,
|
5734
|
-
[vars$6.backgroundColor]:
|
5735
|
-
[vars$6.opacity]: '0.2',
|
5756
|
+
[vars$6.backgroundColor]: globalRefs$6.colors.surface.main,
|
5736
5757
|
[vars$6.textPadding]: `0 ${helperRefs.textPaddingSize}`,
|
5737
5758
|
[vars$6.width]: '100%',
|
5738
5759
|
[vars$6.flexDirection]: 'row',
|