@descope/web-components-ui 1.0.91 → 1.0.93
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/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',
|