@descope/web-components-ui 1.0.56 → 1.0.58
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +294 -271
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/832.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-divider/Divider.js +7 -0
- package/src/components/descope-link/Link.js +1 -1
- package/src/components/descope-passcode/Passcode.js +64 -59
- package/src/componentsHelpers/createStyleMixin/helpers.js +5 -1
- package/src/componentsHelpers/createStyleMixin/index.js +103 -98
- package/src/theme/components/divider.js +3 -0
- package/src/theme/globals.js +1 -0
package/dist/index.esm.js
CHANGED
@@ -32,7 +32,11 @@ const createCssSelector = (
|
|
32
32
|
) =>
|
33
33
|
typeof relativeSelectorOrSelectorFn === 'function'
|
34
34
|
? relativeSelectorOrSelectorFn(baseSelector)
|
35
|
-
: `${baseSelector}${
|
35
|
+
: `${baseSelector}${
|
36
|
+
/^[A-Za-z]/.test(relativeSelectorOrSelectorFn)
|
37
|
+
? ` ${relativeSelectorOrSelectorFn}`
|
38
|
+
: relativeSelectorOrSelectorFn
|
39
|
+
}`;
|
36
40
|
|
37
41
|
class StyleBuilder {
|
38
42
|
constructor() {
|
@@ -110,110 +114,115 @@ const matchHostStyle = (mappingObj = {}) => [
|
|
110
114
|
|
111
115
|
const createStyleMixin =
|
112
116
|
({ mappings = {}, nestedMappings = {} }) =>
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
117
|
+
(superclass) => {
|
118
|
+
const styleAttributes = Object.keys(mappings).map((key) =>
|
119
|
+
kebabCaseJoin('st', key)
|
120
|
+
);
|
121
|
+
return class CustomStyleMixinClass extends superclass {
|
122
|
+
static get observedAttributes() {
|
123
|
+
const superAttrs = superclass.observedAttributes || [];
|
124
|
+
return [...superAttrs, ...styleAttributes];
|
125
|
+
}
|
122
126
|
|
123
|
-
|
124
|
-
|
125
|
-
|
127
|
+
static get cssVarList() {
|
128
|
+
return createCssVarsList(superclass.componentName, {
|
129
|
+
...mappings,
|
130
|
+
...nestedMappings
|
131
|
+
});
|
132
|
+
}
|
126
133
|
|
127
|
-
|
134
|
+
#styleEle = null;
|
128
135
|
|
129
|
-
|
130
|
-
|
136
|
+
constructor() {
|
137
|
+
super();
|
131
138
|
|
132
|
-
|
133
|
-
|
134
|
-
|
139
|
+
this.#createComponentStyle();
|
140
|
+
this.#createAttrOverrideStyle();
|
141
|
+
}
|
135
142
|
|
136
|
-
|
137
|
-
|
138
|
-
|
143
|
+
#createAttrOverrideStyle() {
|
144
|
+
this.#styleEle = document.createElement('style');
|
145
|
+
this.#styleEle.id = 'style-mixin-overrides';
|
139
146
|
|
140
|
-
|
141
|
-
|
142
|
-
|
147
|
+
this.#styleEle.innerText = '* {}';
|
148
|
+
this.shadowRoot.prepend(this.#styleEle);
|
149
|
+
}
|
143
150
|
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
151
|
+
#updateAttrOverrideStyle(attrName, value) {
|
152
|
+
const style = this.#styleEle.sheet?.cssRules[0].style;
|
153
|
+
const varName = getCssVarName(
|
154
|
+
superclass.componentName,
|
155
|
+
attrName.replace(/^st-/, '')
|
156
|
+
);
|
150
157
|
|
151
|
-
|
152
|
-
|
153
|
-
|
158
|
+
if (value) style?.setProperty(varName, value);
|
159
|
+
else style?.removeProperty(varName);
|
160
|
+
}
|
154
161
|
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
162
|
+
#createComponentStyle() {
|
163
|
+
const themeStyle = document.createElement('style');
|
164
|
+
themeStyle.id = 'style-mixin-component';
|
165
|
+
themeStyle.innerHTML = createStyle(
|
166
|
+
superclass.componentName,
|
167
|
+
this.baseSelector,
|
168
|
+
mappings
|
169
|
+
);
|
170
|
+
this.shadowRoot.prepend(themeStyle);
|
171
|
+
}
|
165
172
|
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
173
|
+
#createComponentNestingStyle() {
|
174
|
+
// we need these selectors to be more specific from the theme selectors
|
175
|
+
// in order to do it, we are repeating the class name for specificity
|
176
|
+
const numOfClassNameSpecifier = 3;
|
170
177
|
|
171
|
-
|
172
|
-
|
178
|
+
const rootNode = this.shadowRoot.host.getRootNode();
|
179
|
+
const styleId = `${superclass.componentName}-style-mixin-component`;
|
173
180
|
|
174
|
-
|
175
|
-
|
181
|
+
const className = superclass.componentName;
|
182
|
+
this.shadowRoot.host.classList.add(className);
|
176
183
|
|
177
|
-
|
184
|
+
if (rootNode.querySelector(`style#${styleId}`)) return;
|
178
185
|
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
+
const themeStyle = document.createElement('style');
|
187
|
+
themeStyle.id = styleId;
|
188
|
+
themeStyle.innerHTML = createStyle(
|
189
|
+
superclass.componentName,
|
190
|
+
`${superclass.componentName}${Array(numOfClassNameSpecifier)
|
191
|
+
.fill(`.${className}`)
|
192
|
+
.join('')}`,
|
193
|
+
nestedMappings
|
194
|
+
);
|
186
195
|
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
}
|
196
|
+
// rootNode can be either a shadow DOM or a light DOM
|
197
|
+
if (rootNode.nodeName === '#document') {
|
198
|
+
rootNode.head.append(themeStyle);
|
199
|
+
} else {
|
200
|
+
rootNode.append(themeStyle);
|
193
201
|
}
|
202
|
+
}
|
194
203
|
|
195
|
-
|
196
|
-
|
204
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
205
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
197
206
|
|
198
|
-
|
199
|
-
|
200
|
-
}
|
207
|
+
if (styleAttributes.includes(attrName)) {
|
208
|
+
this.#updateAttrOverrideStyle(attrName, newValue);
|
201
209
|
}
|
210
|
+
}
|
202
211
|
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
212
|
+
connectedCallback() {
|
213
|
+
super.connectedCallback?.();
|
214
|
+
if (this.shadowRoot.isConnected) {
|
215
|
+
this.#createComponentNestingStyle();
|
207
216
|
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
}
|
217
|
+
Array.from(this.attributes).forEach((attr) => {
|
218
|
+
if (styleAttributes.includes(attr.nodeName)) {
|
219
|
+
this.#updateAttrOverrideStyle(attr.nodeName, attr.value);
|
220
|
+
}
|
221
|
+
});
|
214
222
|
}
|
215
|
-
}
|
223
|
+
}
|
216
224
|
};
|
225
|
+
};
|
217
226
|
|
218
227
|
const draggableMixin = (superclass) =>
|
219
228
|
class DraggableMixinClass extends superclass {
|
@@ -1063,11 +1072,53 @@ const enforceNestingElementsStylesMixin =
|
|
1063
1072
|
};
|
1064
1073
|
};
|
1065
1074
|
|
1066
|
-
const componentName$a = getComponentName('
|
1067
|
-
|
1075
|
+
const componentName$a = getComponentName('text');
|
1076
|
+
|
1077
|
+
class RawText extends DescopeBaseClass {
|
1068
1078
|
static get componentName() {
|
1069
1079
|
return componentName$a;
|
1070
1080
|
}
|
1081
|
+
constructor() {
|
1082
|
+
super();
|
1083
|
+
const template = document.createElement('template');
|
1084
|
+
template.innerHTML = `<slot></slot>`;
|
1085
|
+
|
1086
|
+
this.attachShadow({ mode: 'open' });
|
1087
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
1088
|
+
|
1089
|
+
this.baseSelector = ':host > slot';
|
1090
|
+
}
|
1091
|
+
}
|
1092
|
+
|
1093
|
+
const Text = compose(
|
1094
|
+
createStyleMixin({
|
1095
|
+
mappings: {
|
1096
|
+
fontFamily: {},
|
1097
|
+
lineHeight: {},
|
1098
|
+
fontStyle: {},
|
1099
|
+
fontSize: {},
|
1100
|
+
fontWeight: {},
|
1101
|
+
width: {},
|
1102
|
+
color: {},
|
1103
|
+
letterSpacing: {},
|
1104
|
+
textShadow: {},
|
1105
|
+
borderWidth: {},
|
1106
|
+
borderStyle: {},
|
1107
|
+
borderColor: {},
|
1108
|
+
textTransform: {},
|
1109
|
+
textAlign: matchHostStyle(),
|
1110
|
+
display: matchHostStyle()
|
1111
|
+
}
|
1112
|
+
}),
|
1113
|
+
draggableMixin,
|
1114
|
+
componentNameValidationMixin
|
1115
|
+
)(RawText);
|
1116
|
+
|
1117
|
+
const componentName$9 = getComponentName('divider');
|
1118
|
+
class RawDivider extends DescopeBaseClass {
|
1119
|
+
static get componentName() {
|
1120
|
+
return componentName$9;
|
1121
|
+
}
|
1071
1122
|
constructor() {
|
1072
1123
|
super();
|
1073
1124
|
const template = document.createElement('template');
|
@@ -1130,57 +1181,21 @@ const Divider = compose(
|
|
1130
1181
|
backgroundColor: [before, after],
|
1131
1182
|
opacity: [before, after],
|
1132
1183
|
textWidth: { ...slotted, property: 'width' }
|
1184
|
+
},
|
1185
|
+
nestedMappings: {
|
1186
|
+
fontStyle: {
|
1187
|
+
selector: Text.componentName,
|
1188
|
+
property: Text.cssVarList.fontStyle
|
1189
|
+
}
|
1133
1190
|
}
|
1134
1191
|
}),
|
1135
1192
|
draggableMixin,
|
1136
1193
|
componentNameValidationMixin
|
1137
1194
|
)(RawDivider);
|
1138
1195
|
|
1139
|
-
|
1196
|
+
customElements.define(componentName$a, Text);
|
1140
1197
|
|
1141
|
-
|
1142
|
-
static get componentName() {
|
1143
|
-
return componentName$9;
|
1144
|
-
}
|
1145
|
-
constructor() {
|
1146
|
-
super();
|
1147
|
-
const template = document.createElement('template');
|
1148
|
-
template.innerHTML = `<slot></slot>`;
|
1149
|
-
|
1150
|
-
this.attachShadow({ mode: 'open' });
|
1151
|
-
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
1152
|
-
|
1153
|
-
this.baseSelector = ':host > slot';
|
1154
|
-
}
|
1155
|
-
}
|
1156
|
-
|
1157
|
-
const Text = compose(
|
1158
|
-
createStyleMixin({
|
1159
|
-
mappings: {
|
1160
|
-
fontFamily: {},
|
1161
|
-
lineHeight: {},
|
1162
|
-
fontStyle: {},
|
1163
|
-
fontSize: {},
|
1164
|
-
fontWeight: {},
|
1165
|
-
width: {},
|
1166
|
-
color: {},
|
1167
|
-
letterSpacing: {},
|
1168
|
-
textShadow: {},
|
1169
|
-
borderWidth: {},
|
1170
|
-
borderStyle: {},
|
1171
|
-
borderColor: {},
|
1172
|
-
textTransform: {},
|
1173
|
-
textAlign: matchHostStyle(),
|
1174
|
-
display: matchHostStyle()
|
1175
|
-
}
|
1176
|
-
}),
|
1177
|
-
draggableMixin,
|
1178
|
-
componentNameValidationMixin
|
1179
|
-
)(RawText);
|
1180
|
-
|
1181
|
-
customElements.define(componentName$9, Text);
|
1182
|
-
|
1183
|
-
customElements.define(componentName$a, Divider);
|
1198
|
+
customElements.define(componentName$9, Divider);
|
1184
1199
|
|
1185
1200
|
const componentName$8 = getComponentName('email-field');
|
1186
1201
|
|
@@ -1312,7 +1327,7 @@ const Link = compose(
|
|
1312
1327
|
},
|
1313
1328
|
nestedMappings: {
|
1314
1329
|
color: {
|
1315
|
-
selector:
|
1330
|
+
selector: Text.componentName,
|
1316
1331
|
property: Text.cssVarList.color
|
1317
1332
|
}
|
1318
1333
|
}
|
@@ -1664,21 +1679,21 @@ class PasscodeInternal extends HTMLElement {
|
|
1664
1679
|
const componentName$3 = getComponentName('passcode');
|
1665
1680
|
|
1666
1681
|
const customMixin = (superclass) =>
|
1667
|
-
|
1668
|
-
|
1669
|
-
|
1670
|
-
|
1682
|
+
class DraggableMixinClass extends superclass {
|
1683
|
+
constructor() {
|
1684
|
+
super();
|
1685
|
+
}
|
1671
1686
|
|
1672
|
-
|
1673
|
-
|
1674
|
-
|
1687
|
+
get digits() {
|
1688
|
+
return Number.parseInt(this.getAttribute('digits')) || 6;
|
1689
|
+
}
|
1675
1690
|
|
1676
|
-
|
1677
|
-
|
1678
|
-
|
1691
|
+
connectedCallback() {
|
1692
|
+
super.connectedCallback?.();
|
1693
|
+
const template = document.createElement('template');
|
1679
1694
|
|
1680
|
-
|
1681
|
-
|
1695
|
+
//forward required & pattern TODO use forwardAttrs
|
1696
|
+
template.innerHTML = `
|
1682
1697
|
<${componentName$4}
|
1683
1698
|
bordered="true"
|
1684
1699
|
name="code"
|
@@ -1689,47 +1704,52 @@ const customMixin = (superclass) =>
|
|
1689
1704
|
></${componentName$4}>
|
1690
1705
|
`;
|
1691
1706
|
|
1692
|
-
|
1693
|
-
|
1694
|
-
|
1707
|
+
// we are adding a slot under vaadin-text-field, it should reflect all descope-passcode children to be under vaadin-text-field, this is why it has a name & slot
|
1708
|
+
const slotEle = Object.assign(document.createElement('slot'), {
|
1709
|
+
name: 'input',
|
1710
|
+
slot: 'input',
|
1711
|
+
part: 'input'
|
1712
|
+
});
|
1713
|
+
this.proxyElement.appendChild(slotEle);
|
1695
1714
|
|
1696
|
-
|
1697
|
-
|
1698
|
-
|
1715
|
+
// we want to control when the element is out of focus
|
1716
|
+
// so the validations will be triggered blur event is dispatched from descope-passcode internal (and not every time focusing a digit)
|
1717
|
+
this.proxyElement._setFocused = () => {};
|
1699
1718
|
|
1700
|
-
|
1701
|
-
|
1719
|
+
this.shadowRoot.host.appendChild(template.content.cloneNode(true));
|
1720
|
+
this.inputElement = this.querySelector(componentName$4);
|
1702
1721
|
|
1703
|
-
|
1704
|
-
|
1705
|
-
|
1706
|
-
|
1707
|
-
|
1708
|
-
|
1722
|
+
// we want to trigger validation only when dispatching a blur event from the descope-passcode-internal
|
1723
|
+
this.inputElement.addEventListener('blur', () => {
|
1724
|
+
this.proxyElement.validate();
|
1725
|
+
});
|
1726
|
+
}
|
1727
|
+
};
|
1709
1728
|
|
1710
|
-
const { borderStyle, borderWidth, ...restTextFieldMappings } =
|
1729
|
+
const { borderStyle, borderWidth, ...restTextFieldMappings } =
|
1730
|
+
textFieldMappings;
|
1711
1731
|
|
1712
1732
|
const Passcode = compose(
|
1713
|
-
|
1714
|
-
|
1715
|
-
|
1716
|
-
|
1717
|
-
|
1718
|
-
|
1719
|
-
|
1720
|
-
|
1721
|
-
|
1722
|
-
|
1723
|
-
|
1724
|
-
|
1725
|
-
|
1726
|
-
|
1727
|
-
|
1733
|
+
createStyleMixin({
|
1734
|
+
mappings: {
|
1735
|
+
...restTextFieldMappings
|
1736
|
+
},
|
1737
|
+
nestedMappings: {
|
1738
|
+
borderColor: {
|
1739
|
+
selector: TextField.componentName,
|
1740
|
+
property: TextField.cssVarList.borderColor
|
1741
|
+
}
|
1742
|
+
}
|
1743
|
+
}),
|
1744
|
+
draggableMixin,
|
1745
|
+
inputMixin,
|
1746
|
+
componentNameValidationMixin,
|
1747
|
+
customMixin
|
1728
1748
|
)(
|
1729
|
-
|
1730
|
-
|
1731
|
-
|
1732
|
-
|
1749
|
+
createProxy({
|
1750
|
+
slots: [],
|
1751
|
+
wrappedEleName: 'vaadin-text-field',
|
1752
|
+
style: () => `
|
1733
1753
|
:host {
|
1734
1754
|
--vaadin-field-default-width: auto;
|
1735
1755
|
}
|
@@ -1749,9 +1769,9 @@ const Passcode = compose(
|
|
1749
1769
|
|
1750
1770
|
${overrides$3}
|
1751
1771
|
`,
|
1752
|
-
|
1753
|
-
|
1754
|
-
|
1772
|
+
excludeAttrsSync: ['tabindex'],
|
1773
|
+
componentName: componentName$3
|
1774
|
+
})
|
1755
1775
|
);
|
1756
1776
|
|
1757
1777
|
const overrides$3 = `
|
@@ -2136,6 +2156,99 @@ const genColors = (colors) => {
|
|
2136
2156
|
}, {});
|
2137
2157
|
};
|
2138
2158
|
|
2159
|
+
const globalRefs$7 = getThemeRefs(globals);
|
2160
|
+
const vars$c = Button.cssVarList;
|
2161
|
+
|
2162
|
+
const mode = {
|
2163
|
+
primary: globalRefs$7.colors.primary,
|
2164
|
+
secondary: globalRefs$7.colors.secondary,
|
2165
|
+
success: globalRefs$7.colors.success,
|
2166
|
+
error: globalRefs$7.colors.error,
|
2167
|
+
surface: globalRefs$7.colors.surface
|
2168
|
+
};
|
2169
|
+
|
2170
|
+
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$i);
|
2171
|
+
|
2172
|
+
const button = {
|
2173
|
+
...helperTheme$1,
|
2174
|
+
|
2175
|
+
size: {
|
2176
|
+
xs: {
|
2177
|
+
[vars$c.height]: '10px',
|
2178
|
+
[vars$c.fontSize]: '10px',
|
2179
|
+
[vars$c.padding]: `0 ${globalRefs$7.spacing.xs}`
|
2180
|
+
},
|
2181
|
+
sm: {
|
2182
|
+
[vars$c.height]: '20px',
|
2183
|
+
[vars$c.fontSize]: '10px',
|
2184
|
+
[vars$c.padding]: `0 ${globalRefs$7.spacing.sm}`
|
2185
|
+
},
|
2186
|
+
md: {
|
2187
|
+
[vars$c.height]: '30px',
|
2188
|
+
[vars$c.fontSize]: '14px',
|
2189
|
+
[vars$c.padding]: `0 ${globalRefs$7.spacing.md}`
|
2190
|
+
},
|
2191
|
+
lg: {
|
2192
|
+
[vars$c.height]: '40px',
|
2193
|
+
[vars$c.fontSize]: '20px',
|
2194
|
+
[vars$c.padding]: `0 ${globalRefs$7.spacing.lg}`
|
2195
|
+
},
|
2196
|
+
xl: {
|
2197
|
+
[vars$c.height]: '50px',
|
2198
|
+
[vars$c.fontSize]: '25px',
|
2199
|
+
[vars$c.padding]: `0 ${globalRefs$7.spacing.xl}`
|
2200
|
+
}
|
2201
|
+
},
|
2202
|
+
|
2203
|
+
[vars$c.borderRadius]: globalRefs$7.radius.lg,
|
2204
|
+
[vars$c.cursor]: 'pointer',
|
2205
|
+
[vars$c.borderWidth]: '2px',
|
2206
|
+
[vars$c.borderStyle]: 'solid',
|
2207
|
+
[vars$c.borderColor]: 'transparent',
|
2208
|
+
|
2209
|
+
_fullWidth: {
|
2210
|
+
[vars$c.width]: '100%'
|
2211
|
+
},
|
2212
|
+
_loading: {
|
2213
|
+
[vars$c.cursor]: 'wait'
|
2214
|
+
},
|
2215
|
+
|
2216
|
+
variant: {
|
2217
|
+
contained: {
|
2218
|
+
[vars$c.color]: helperRefs$1.contrast,
|
2219
|
+
[vars$c.backgroundColor]: helperRefs$1.main,
|
2220
|
+
_hover: {
|
2221
|
+
[vars$c.backgroundColor]: helperRefs$1.dark
|
2222
|
+
},
|
2223
|
+
_loading: {
|
2224
|
+
[vars$c.backgroundColor]: helperRefs$1.main
|
2225
|
+
}
|
2226
|
+
},
|
2227
|
+
outline: {
|
2228
|
+
[vars$c.color]: helperRefs$1.main,
|
2229
|
+
[vars$c.borderColor]: helperRefs$1.main,
|
2230
|
+
_hover: {
|
2231
|
+
[vars$c.color]: helperRefs$1.dark,
|
2232
|
+
[vars$c.borderColor]: helperRefs$1.dark,
|
2233
|
+
_error: {
|
2234
|
+
[vars$c.color]: helperRefs$1.error
|
2235
|
+
}
|
2236
|
+
}
|
2237
|
+
},
|
2238
|
+
link: {
|
2239
|
+
[vars$c.color]: helperRefs$1.main,
|
2240
|
+
[vars$c.padding]: 0,
|
2241
|
+
[vars$c.margin]: 0,
|
2242
|
+
[vars$c.lineHeight]: helperRefs$1.height,
|
2243
|
+
[vars$c.borderRadius]: 0,
|
2244
|
+
_hover: {
|
2245
|
+
[vars$c.color]: helperRefs$1.main,
|
2246
|
+
[vars$c.textDecoration]: 'underline'
|
2247
|
+
}
|
2248
|
+
}
|
2249
|
+
}
|
2250
|
+
};
|
2251
|
+
|
2139
2252
|
const colors = genColors({
|
2140
2253
|
surface: {
|
2141
2254
|
main: 'lightgray',
|
@@ -2239,99 +2352,6 @@ var globals = {
|
|
2239
2352
|
fonts
|
2240
2353
|
};
|
2241
2354
|
|
2242
|
-
const globalRefs$7 = getThemeRefs(globals);
|
2243
|
-
const vars$c = Button.cssVarList;
|
2244
|
-
|
2245
|
-
const mode = {
|
2246
|
-
primary: globalRefs$7.colors.primary,
|
2247
|
-
secondary: globalRefs$7.colors.secondary,
|
2248
|
-
success: globalRefs$7.colors.success,
|
2249
|
-
error: globalRefs$7.colors.error,
|
2250
|
-
surface: globalRefs$7.colors.surface
|
2251
|
-
};
|
2252
|
-
|
2253
|
-
const [helperTheme$1, helperRefs$1] = createHelperVars({ mode }, componentName$i);
|
2254
|
-
|
2255
|
-
const button = {
|
2256
|
-
...helperTheme$1,
|
2257
|
-
|
2258
|
-
size: {
|
2259
|
-
xs: {
|
2260
|
-
[vars$c.height]: '10px',
|
2261
|
-
[vars$c.fontSize]: '10px',
|
2262
|
-
[vars$c.padding]: `0 ${globalRefs$7.spacing.xs}`
|
2263
|
-
},
|
2264
|
-
sm: {
|
2265
|
-
[vars$c.height]: '20px',
|
2266
|
-
[vars$c.fontSize]: '10px',
|
2267
|
-
[vars$c.padding]: `0 ${globalRefs$7.spacing.sm}`
|
2268
|
-
},
|
2269
|
-
md: {
|
2270
|
-
[vars$c.height]: '30px',
|
2271
|
-
[vars$c.fontSize]: '14px',
|
2272
|
-
[vars$c.padding]: `0 ${globalRefs$7.spacing.md}`
|
2273
|
-
},
|
2274
|
-
lg: {
|
2275
|
-
[vars$c.height]: '40px',
|
2276
|
-
[vars$c.fontSize]: '20px',
|
2277
|
-
[vars$c.padding]: `0 ${globalRefs$7.spacing.lg}`
|
2278
|
-
},
|
2279
|
-
xl: {
|
2280
|
-
[vars$c.height]: '50px',
|
2281
|
-
[vars$c.fontSize]: '25px',
|
2282
|
-
[vars$c.padding]: `0 ${globalRefs$7.spacing.xl}`
|
2283
|
-
}
|
2284
|
-
},
|
2285
|
-
|
2286
|
-
[vars$c.borderRadius]: globalRefs$7.radius.lg,
|
2287
|
-
[vars$c.cursor]: 'pointer',
|
2288
|
-
[vars$c.borderWidth]: '2px',
|
2289
|
-
[vars$c.borderStyle]: 'solid',
|
2290
|
-
[vars$c.borderColor]: 'transparent',
|
2291
|
-
|
2292
|
-
_fullWidth: {
|
2293
|
-
[vars$c.width]: '100%'
|
2294
|
-
},
|
2295
|
-
_loading: {
|
2296
|
-
[vars$c.cursor]: 'wait'
|
2297
|
-
},
|
2298
|
-
|
2299
|
-
variant: {
|
2300
|
-
contained: {
|
2301
|
-
[vars$c.color]: helperRefs$1.contrast,
|
2302
|
-
[vars$c.backgroundColor]: helperRefs$1.main,
|
2303
|
-
_hover: {
|
2304
|
-
[vars$c.backgroundColor]: helperRefs$1.dark
|
2305
|
-
},
|
2306
|
-
_loading: {
|
2307
|
-
[vars$c.backgroundColor]: helperRefs$1.main
|
2308
|
-
}
|
2309
|
-
},
|
2310
|
-
outline: {
|
2311
|
-
[vars$c.color]: helperRefs$1.main,
|
2312
|
-
[vars$c.borderColor]: helperRefs$1.main,
|
2313
|
-
_hover: {
|
2314
|
-
[vars$c.color]: helperRefs$1.dark,
|
2315
|
-
[vars$c.borderColor]: helperRefs$1.dark,
|
2316
|
-
_error: {
|
2317
|
-
[vars$c.color]: helperRefs$1.error
|
2318
|
-
}
|
2319
|
-
}
|
2320
|
-
},
|
2321
|
-
link: {
|
2322
|
-
[vars$c.color]: helperRefs$1.main,
|
2323
|
-
[vars$c.padding]: 0,
|
2324
|
-
[vars$c.margin]: 0,
|
2325
|
-
[vars$c.lineHeight]: helperRefs$1.height,
|
2326
|
-
[vars$c.borderRadius]: 0,
|
2327
|
-
_hover: {
|
2328
|
-
[vars$c.color]: helperRefs$1.main,
|
2329
|
-
[vars$c.textDecoration]: 'underline'
|
2330
|
-
}
|
2331
|
-
}
|
2332
|
-
}
|
2333
|
-
};
|
2334
|
-
|
2335
2355
|
const globalRefs$6 = getThemeRefs(globals);
|
2336
2356
|
|
2337
2357
|
const vars$b = TextField.cssVarList;
|
@@ -2720,6 +2740,9 @@ const divider = {
|
|
2720
2740
|
[vars$2.flexDirection]: 'column',
|
2721
2741
|
[vars$2.minHeight]: '200px',
|
2722
2742
|
[vars$2.textWidth]: 'max-content'
|
2743
|
+
},
|
2744
|
+
_italic: {
|
2745
|
+
[vars$2.fontStyle]: 'italic'
|
2723
2746
|
}
|
2724
2747
|
};
|
2725
2748
|
|