@descope/web-components-ui 1.0.127 → 1.0.129
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +40 -36
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +40 -36
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/481.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-password/PasswordClass.js +4 -0
- package/src/theme/components/button.js +4 -5
- package/src/theme/components/inputWrapper.js +4 -5
- package/src/theme/components/password.js +4 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -1576,15 +1576,15 @@ const loadingIndicatorStyles = `
|
|
1576
1576
|
}
|
1577
1577
|
`;
|
1578
1578
|
|
1579
|
-
const globalRefs$
|
1579
|
+
const globalRefs$c = getThemeRefs(globals);
|
1580
1580
|
const compVars$2 = ButtonClass.cssVarList;
|
1581
1581
|
|
1582
1582
|
const mode = {
|
1583
|
-
primary: globalRefs$
|
1584
|
-
secondary: globalRefs$
|
1585
|
-
success: globalRefs$
|
1586
|
-
error: globalRefs$
|
1587
|
-
surface: globalRefs$
|
1583
|
+
primary: globalRefs$c.colors.primary,
|
1584
|
+
secondary: globalRefs$c.colors.secondary,
|
1585
|
+
success: globalRefs$c.colors.success,
|
1586
|
+
error: globalRefs$c.colors.error,
|
1587
|
+
surface: globalRefs$c.colors.surface
|
1588
1588
|
};
|
1589
1589
|
|
1590
1590
|
const [helperTheme$3, helperRefs$3, helperVars$2] = createHelperVars({ mode }, componentName$o);
|
@@ -1595,11 +1595,11 @@ const horizontalPaddingRatio = 2;
|
|
1595
1595
|
const button = {
|
1596
1596
|
...helperTheme$3,
|
1597
1597
|
|
1598
|
-
[compVars$2.fontFamily]: globalRefs$
|
1598
|
+
[compVars$2.fontFamily]: globalRefs$c.fonts.font1.family,
|
1599
1599
|
|
1600
1600
|
[compVars$2.cursor]: 'pointer',
|
1601
1601
|
|
1602
|
-
[compVars$2.borderRadius]: globalRefs$
|
1602
|
+
[compVars$2.borderRadius]: globalRefs$c.radius.sm,
|
1603
1603
|
[compVars$2.borderWidth]: '2px',
|
1604
1604
|
[compVars$2.borderStyle]: 'solid',
|
1605
1605
|
[compVars$2.borderColor]: 'transparent',
|
@@ -1615,11 +1615,10 @@ const button = {
|
|
1615
1615
|
[compVars$2.outlineColor]: 'transparent',
|
1616
1616
|
|
1617
1617
|
size: {
|
1618
|
-
xs: { [compVars$2.fontSize]: '
|
1619
|
-
sm: { [compVars$2.fontSize]: '
|
1620
|
-
md: { [compVars$2.fontSize]: '
|
1621
|
-
lg: { [compVars$2.fontSize]: '
|
1622
|
-
xl: { [compVars$2.fontSize]: '25px' }
|
1618
|
+
xs: { [compVars$2.fontSize]: '12px' },
|
1619
|
+
sm: { [compVars$2.fontSize]: '14px' },
|
1620
|
+
md: { [compVars$2.fontSize]: '16px' },
|
1621
|
+
lg: { [compVars$2.fontSize]: '18px' }
|
1623
1622
|
},
|
1624
1623
|
|
1625
1624
|
_fullWidth: {
|
@@ -1894,35 +1893,34 @@ const TextFieldClass = compose(
|
|
1894
1893
|
);
|
1895
1894
|
|
1896
1895
|
const componentName$m = getComponentName('input-wrapper');
|
1897
|
-
const globalRefs$
|
1896
|
+
const globalRefs$b = getThemeRefs(globals);
|
1898
1897
|
|
1899
1898
|
const [theme$1, refs, vars$k] = createHelperVars({
|
1900
|
-
labelTextColor: globalRefs$
|
1901
|
-
valueTextColor: globalRefs$
|
1902
|
-
placeholderTextColor: globalRefs$
|
1899
|
+
labelTextColor: globalRefs$b.colors.surface.contrast,
|
1900
|
+
valueTextColor: globalRefs$b.colors.surface.contrast,
|
1901
|
+
placeholderTextColor: globalRefs$b.colors.surface.main,
|
1903
1902
|
requiredIndicator: "'*'",
|
1904
1903
|
|
1905
|
-
borderWidth: globalRefs$
|
1906
|
-
borderRadius: globalRefs$
|
1904
|
+
borderWidth: globalRefs$b.border.xs,
|
1905
|
+
borderRadius: globalRefs$b.radius.xs,
|
1907
1906
|
borderColor: 'transparent',
|
1908
1907
|
|
1909
|
-
outlineWidth: globalRefs$
|
1908
|
+
outlineWidth: globalRefs$b.border.sm,
|
1910
1909
|
outlineStyle: 'solid',
|
1911
1910
|
outlineColor: 'transparent',
|
1912
1911
|
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
1913
1912
|
|
1914
1913
|
inputHeight: '2em',
|
1915
1914
|
|
1916
|
-
backgroundColor: globalRefs$
|
1915
|
+
backgroundColor: globalRefs$b.colors.surface.light,
|
1917
1916
|
|
1918
|
-
fontFamily: globalRefs$
|
1917
|
+
fontFamily: globalRefs$b.fonts.font1.family,
|
1919
1918
|
|
1920
1919
|
size: {
|
1921
|
-
xs: { fontSize: '
|
1922
|
-
sm: { fontSize: '
|
1923
|
-
md: { fontSize: '
|
1924
|
-
lg: { fontSize: '
|
1925
|
-
xl: { fontSize: '25px' }
|
1920
|
+
xs: { fontSize: '12px' },
|
1921
|
+
sm: { fontSize: '14px' },
|
1922
|
+
md: { fontSize: '16px' },
|
1923
|
+
lg: { fontSize: '18px' }
|
1926
1924
|
},
|
1927
1925
|
|
1928
1926
|
_fullWidth: {
|
@@ -1930,26 +1928,26 @@ const [theme$1, refs, vars$k] = createHelperVars({
|
|
1930
1928
|
},
|
1931
1929
|
|
1932
1930
|
_focused: {
|
1933
|
-
outlineColor: globalRefs$
|
1931
|
+
outlineColor: globalRefs$b.colors.surface.main,
|
1934
1932
|
_invalid: {
|
1935
|
-
outlineColor: globalRefs$
|
1933
|
+
outlineColor: globalRefs$b.colors.error.main,
|
1936
1934
|
}
|
1937
1935
|
},
|
1938
1936
|
|
1939
1937
|
_bordered: {
|
1940
|
-
outlineWidth: globalRefs$
|
1941
|
-
borderColor: globalRefs$
|
1938
|
+
outlineWidth: globalRefs$b.border.xs,
|
1939
|
+
borderColor: globalRefs$b.colors.surface.main,
|
1942
1940
|
borderStyle: 'solid',
|
1943
1941
|
_invalid: {
|
1944
|
-
borderColor: globalRefs$
|
1942
|
+
borderColor: globalRefs$b.colors.error.main,
|
1945
1943
|
}
|
1946
1944
|
},
|
1947
1945
|
|
1948
1946
|
_disabled: {
|
1949
|
-
labelTextColor: globalRefs$
|
1950
|
-
valueTextColor: globalRefs$
|
1951
|
-
placeholderTextColor: globalRefs$
|
1952
|
-
backgroundColor: globalRefs$
|
1947
|
+
labelTextColor: globalRefs$b.colors.surface.main,
|
1948
|
+
valueTextColor: globalRefs$b.colors.surface.dark,
|
1949
|
+
placeholderTextColor: globalRefs$b.colors.surface.dark,
|
1950
|
+
backgroundColor: globalRefs$b.colors.surface.main
|
1953
1951
|
}
|
1954
1952
|
}, componentName$m);
|
1955
1953
|
|
@@ -2029,6 +2027,7 @@ const {
|
|
2029
2027
|
inputField: inputField$3,
|
2030
2028
|
inputElement,
|
2031
2029
|
inputElementPlaceholder,
|
2030
|
+
revealButtonContainer,
|
2032
2031
|
revealButtonIcon,
|
2033
2032
|
label: label$7,
|
2034
2033
|
requiredIndicator: requiredIndicator$6,
|
@@ -2039,6 +2038,7 @@ const {
|
|
2039
2038
|
inputField: { selector: '::part(input-field)' },
|
2040
2039
|
inputElement: { selector: '> input' },
|
2041
2040
|
inputElementPlaceholder: { selector: '> input:placeholder-shown' },
|
2041
|
+
revealButtonContainer: { selector: () => '::part(reveal-button)' },
|
2042
2042
|
revealButtonIcon: { selector: () => '::part(reveal-button)::before' },
|
2043
2043
|
label: { selector: '::part(label)' },
|
2044
2044
|
requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
|
@@ -2084,6 +2084,8 @@ const PasswordClass = compose(
|
|
2084
2084
|
{ ...revealButtonIcon, property: 'color' }
|
2085
2085
|
],
|
2086
2086
|
inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
2087
|
+
|
2088
|
+
revealButtonOffset: { ...revealButtonContainer, property: 'margin' }
|
2087
2089
|
}
|
2088
2090
|
}),
|
2089
2091
|
draggableMixin,
|
@@ -2145,6 +2147,7 @@ const PasswordClass = compose(
|
|
2145
2147
|
})
|
2146
2148
|
);
|
2147
2149
|
|
2150
|
+
const globalRefs$a = getThemeRefs(globals);
|
2148
2151
|
const vars$i = PasswordClass.cssVarList;
|
2149
2152
|
|
2150
2153
|
const password = {
|
@@ -2165,6 +2168,7 @@ const password = {
|
|
2165
2168
|
[vars$i.inputOutlineStyle]: refs.outlineStyle,
|
2166
2169
|
[vars$i.inputOutlineColor]: refs.outlineColor,
|
2167
2170
|
[vars$i.inputOutlineOffset]: refs.outlineOffset,
|
2171
|
+
[vars$i.revealButtonOffset]: globalRefs$a.spacing.md
|
2168
2172
|
};
|
2169
2173
|
|
2170
2174
|
var password$1 = /*#__PURE__*/Object.freeze({
|