@descope/web-components-ui 1.0.114 → 1.0.115
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +1282 -1290
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -1
- package/dist/index.esm.js +1372 -1380
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/201.js +1 -0
- package/dist/umd/241.js +1 -1
- package/dist/umd/447.js +1 -1
- package/dist/umd/65.js +1 -1
- package/dist/umd/803.js +1 -1
- package/dist/umd/boolean-fields-descope-checkbox-index-js.js +1 -1
- package/dist/umd/boolean-fields-descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-combo-box-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-loader-linear-index-js.js +1 -1
- package/dist/umd/descope-loader-radial-index-js.js +1 -1
- package/dist/umd/descope-new-password-descope-new-password-internal-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-passcode-index-js.js +1 -1
- package/dist/umd/descope-phone-field-index-js.js +1 -1
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/boolean-fields/commonStyles.js +13 -5
- package/src/components/boolean-fields/descope-checkbox/CheckboxClass.js +40 -37
- package/src/components/boolean-fields/descope-switch-toggle/SwitchToggleClass.js +43 -37
- package/src/components/descope-button/ButtonClass.js +22 -6
- package/src/components/descope-combo-box/ComboBoxClass.js +49 -36
- package/src/components/descope-container/ContainerClass.js +4 -4
- package/src/components/descope-divider/DividerClass.js +74 -55
- package/src/components/descope-email-field/EmailFieldClass.js +11 -47
- package/src/components/descope-link/LinkClass.js +8 -5
- package/src/components/descope-loader-linear/LoaderLinearClass.js +16 -12
- package/src/components/descope-loader-radial/LoaderRadialClass.js +12 -11
- package/src/components/descope-new-password/NewPasswordClass.js +65 -51
- package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js +1 -1
- package/src/components/descope-number-field/NumberFieldClass.js +11 -43
- package/src/components/descope-passcode/PasscodeClass.js +36 -29
- package/src/components/descope-password-field/PasswordFieldClass.js +52 -41
- package/src/components/descope-phone-field/PhoneFieldClass.js +61 -41
- package/src/components/descope-text/TextClass.js +8 -8
- package/src/components/descope-text-area/TextAreaClass.js +50 -48
- package/src/components/descope-text-field/TextFieldClass.js +11 -53
- package/src/components/descope-text-field/textFieldMappings.js +66 -38
- package/src/helpers/themeHelpers/resetHelpers.js +76 -0
- package/src/index.d.ts +2 -1
- package/src/mixins/createStyleMixin/index.js +38 -27
- package/src/mixins/inputValidationMixin.js +4 -1
- package/src/mixins/proxyInputMixin.js +11 -3
- package/src/theme/components/button.js +31 -16
- package/src/theme/components/checkbox.js +18 -47
- package/src/theme/components/comboBox.js +24 -36
- package/src/theme/components/container.js +32 -45
- package/src/theme/components/divider.js +31 -20
- package/src/theme/components/emailField.js +21 -3
- package/src/theme/components/image.js +1 -1
- package/src/theme/components/index.js +4 -3
- package/src/theme/components/inputWrapper.js +72 -0
- package/src/theme/components/link.js +15 -22
- package/src/theme/components/loader/loaderLinear.js +19 -24
- package/src/theme/components/loader/loaderRadial.js +32 -47
- package/src/theme/components/logo.js +1 -1
- package/src/theme/components/newPassword.js +11 -26
- package/src/theme/components/numberField.js +21 -3
- package/src/theme/components/passcode.js +17 -28
- package/src/theme/components/passwordField.js +19 -65
- package/src/theme/components/phoneField.js +18 -57
- package/src/theme/components/switchToggle.js +20 -34
- package/src/theme/components/text.js +14 -9
- package/src/theme/components/textArea.js +20 -37
- package/src/theme/components/textField.js +21 -68
@@ -17,6 +17,7 @@ import * as comboBox from './comboBox';
|
|
17
17
|
import * as image from './image';
|
18
18
|
import * as phoneField from './phoneField';
|
19
19
|
import * as newPassword from './newPassword';
|
20
|
+
import * as inputWrapper from './inputWrapper';
|
20
21
|
|
21
22
|
const components = {
|
22
23
|
button,
|
@@ -39,11 +40,11 @@ const components = {
|
|
39
40
|
image,
|
40
41
|
phoneField,
|
41
42
|
newPassword,
|
42
|
-
|
43
|
-
|
43
|
+
inputWrapper,
|
44
|
+
};
|
44
45
|
|
45
46
|
const theme = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: components[comp].default }), {});
|
46
47
|
const vars = Object.keys(components).reduce((acc, comp) => ({ ...acc, [comp]: components[comp].vars }), {});
|
47
48
|
|
48
49
|
export default theme;
|
49
|
-
export { vars }
|
50
|
+
export { vars }
|
@@ -0,0 +1,72 @@
|
|
1
|
+
import globals from '../globals';
|
2
|
+
import { getThemeRefs } from '../../helpers/themeHelpers';
|
3
|
+
import { createHelperVars } from '../../helpers/themeHelpers';
|
4
|
+
import { getComponentName } from '../../helpers/componentHelpers';
|
5
|
+
|
6
|
+
const componentName = getComponentName('input-wrapper');
|
7
|
+
const globalRefs = getThemeRefs(globals);
|
8
|
+
|
9
|
+
const [theme, refs, vars] = createHelperVars({
|
10
|
+
labelTextColor: globalRefs.colors.surface.contrast,
|
11
|
+
valueTextColor: globalRefs.colors.surface.contrast,
|
12
|
+
placeholderTextColor: globalRefs.colors.surface.main,
|
13
|
+
requiredIndicator: "'*'",
|
14
|
+
|
15
|
+
borderWidth: globalRefs.border.xs,
|
16
|
+
borderRadius: globalRefs.radius.xs,
|
17
|
+
borderColor: 'transparent',
|
18
|
+
|
19
|
+
outlineWidth: globalRefs.border.sm,
|
20
|
+
outlineStyle: 'solid',
|
21
|
+
outlineColor: 'transparent',
|
22
|
+
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
23
|
+
|
24
|
+
inputHeight: '2em',
|
25
|
+
|
26
|
+
backgroundColor: globalRefs.colors.surface.light,
|
27
|
+
|
28
|
+
fontFamily: globalRefs.fonts.font1.family,
|
29
|
+
|
30
|
+
size: {
|
31
|
+
xs: { fontSize: '8px' },
|
32
|
+
sm: { fontSize: '10px' },
|
33
|
+
md: { fontSize: '14px' },
|
34
|
+
lg: { fontSize: '20px' },
|
35
|
+
xl: { fontSize: '25px' }
|
36
|
+
},
|
37
|
+
|
38
|
+
_fullWidth: {
|
39
|
+
width: '100%',
|
40
|
+
},
|
41
|
+
|
42
|
+
_focused: {
|
43
|
+
outlineColor: globalRefs.colors.surface.main,
|
44
|
+
_invalid: {
|
45
|
+
outlineColor: globalRefs.colors.error.light,
|
46
|
+
}
|
47
|
+
},
|
48
|
+
|
49
|
+
_bordered: {
|
50
|
+
borderColor: globalRefs.colors.surface.main,
|
51
|
+
borderStyle: 'solid',
|
52
|
+
_invalid: {
|
53
|
+
borderColor: globalRefs.colors.error.main,
|
54
|
+
}
|
55
|
+
},
|
56
|
+
|
57
|
+
_disabled: {
|
58
|
+
labelTextColor: globalRefs.colors.surface.main,
|
59
|
+
valueTextColor: globalRefs.colors.surface.dark,
|
60
|
+
placeholderTextColor: globalRefs.colors.surface.dark,
|
61
|
+
backgroundColor: globalRefs.colors.surface.main
|
62
|
+
},
|
63
|
+
|
64
|
+
_invalid: {
|
65
|
+
labelTextColor: globalRefs.colors.error.main,
|
66
|
+
valueTextColor: globalRefs.colors.error.main,
|
67
|
+
placeholderTextColor: globalRefs.colors.error.light,
|
68
|
+
}
|
69
|
+
}, componentName);
|
70
|
+
|
71
|
+
export { refs, vars };
|
72
|
+
export default theme;
|
@@ -7,13 +7,14 @@ const vars = LinkClass.cssVarList;
|
|
7
7
|
|
8
8
|
const link = {
|
9
9
|
[vars.cursor]: 'pointer',
|
10
|
-
|
11
|
-
[vars.
|
12
|
-
[vars.
|
13
|
-
[vars.
|
10
|
+
|
11
|
+
[vars.textUnderlineWidth]: '2px',
|
12
|
+
[vars.textUnderlineStyle]: 'solid',
|
13
|
+
[vars.textUnderlineColor]: 'transparent',
|
14
|
+
[vars.textColor]: globalRefs.colors.primary.main,
|
14
15
|
|
15
16
|
_hover: {
|
16
|
-
[vars.
|
17
|
+
[vars.textUnderlineColor]: globalRefs.colors.primary.main
|
17
18
|
},
|
18
19
|
|
19
20
|
textAlign: {
|
@@ -23,33 +24,25 @@ const link = {
|
|
23
24
|
},
|
24
25
|
|
25
26
|
_fullWidth: {
|
26
|
-
[vars.
|
27
|
+
[vars.hostWidth]: '100%'
|
28
|
+
},
|
29
|
+
|
30
|
+
_hover: {
|
31
|
+
[vars.textUnderlineColor]: 'currentColor'
|
27
32
|
},
|
28
33
|
|
29
34
|
mode: {
|
30
35
|
primary: {
|
31
|
-
[vars.
|
32
|
-
_hover: {
|
33
|
-
[vars.borderBottomColor]: globalRefs.colors.primary.main
|
34
|
-
}
|
36
|
+
[vars.textColor]: globalRefs.colors.primary.main,
|
35
37
|
},
|
36
38
|
secondary: {
|
37
|
-
[vars.
|
38
|
-
_hover: {
|
39
|
-
[vars.borderBottomColor]: globalRefs.colors.secondary.main
|
40
|
-
}
|
39
|
+
[vars.textColor]: globalRefs.colors.secondary.main,
|
41
40
|
},
|
42
41
|
error: {
|
43
|
-
[vars.
|
44
|
-
_hover: {
|
45
|
-
[vars.borderBottomColor]: globalRefs.colors.error.main
|
46
|
-
}
|
42
|
+
[vars.textColor]: globalRefs.colors.error.main,
|
47
43
|
},
|
48
44
|
success: {
|
49
|
-
[vars.
|
50
|
-
_hover: {
|
51
|
-
[vars.borderBottomColor]: globalRefs.colors.success.main
|
52
|
-
}
|
45
|
+
[vars.textColor]: globalRefs.colors.success.main,
|
53
46
|
}
|
54
47
|
}
|
55
48
|
};
|
@@ -1,38 +1,32 @@
|
|
1
|
-
import { LoaderLinearClass } from '../../../components/descope-loader-linear/LoaderLinearClass';
|
2
|
-
import { getThemeRefs } from '../../../helpers/themeHelpers';
|
3
1
|
import globals from '../../globals';
|
2
|
+
import { getThemeRefs } from '../../../helpers/themeHelpers';
|
3
|
+
import { LoaderLinearClass } from '../../../components/descope-loader-linear/LoaderLinearClass';
|
4
4
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
6
|
-
|
7
6
|
const vars = LoaderLinearClass.cssVarList;
|
8
7
|
|
9
8
|
const loaderLinear = {
|
10
|
-
[vars.
|
9
|
+
[vars.hostDisplay]: 'inline-block',
|
10
|
+
[vars.hostWidth]: '100%',
|
11
|
+
|
11
12
|
[vars.barColor]: globalRefs.colors.surface.contrast,
|
12
13
|
[vars.barWidth]: '20%',
|
13
|
-
|
14
|
-
[vars.
|
14
|
+
|
15
|
+
[vars.barBackgroundColor]: globalRefs.colors.surface.main,
|
16
|
+
[vars.barBorderRadius]: '4px',
|
17
|
+
|
15
18
|
[vars.animationDuration]: '2s',
|
16
19
|
[vars.animationTimingFunction]: 'linear',
|
17
20
|
[vars.animationIterationCount]: 'infinite',
|
18
|
-
|
21
|
+
|
19
22
|
size: {
|
20
|
-
xs: {
|
21
|
-
|
22
|
-
},
|
23
|
-
|
24
|
-
|
25
|
-
},
|
26
|
-
md: {
|
27
|
-
[vars.height]: '10px'
|
28
|
-
},
|
29
|
-
lg: {
|
30
|
-
[vars.height]: '12px'
|
31
|
-
},
|
32
|
-
xl: {
|
33
|
-
[vars.height]: '14px'
|
34
|
-
}
|
23
|
+
xs: { [vars.barHeight]: '8px' },
|
24
|
+
sm: { [vars.barHeight]: '10px' },
|
25
|
+
md: { [vars.barHeight]: '14px' },
|
26
|
+
lg: { [vars.barHeight]: '20px' },
|
27
|
+
xl: { [vars.barHeight]: '25px' }
|
35
28
|
},
|
29
|
+
|
36
30
|
mode: {
|
37
31
|
primary: {
|
38
32
|
[vars.barColor]: globalRefs.colors.primary.main
|
@@ -41,10 +35,11 @@ const loaderLinear = {
|
|
41
35
|
[vars.barColor]: globalRefs.colors.secondary.main
|
42
36
|
}
|
43
37
|
},
|
38
|
+
|
44
39
|
_hidden: {
|
45
|
-
[vars.
|
40
|
+
[vars.hostDisplay]: 'none'
|
46
41
|
}
|
47
42
|
};
|
48
43
|
|
49
44
|
export default loaderLinear;
|
50
|
-
export { vars }
|
45
|
+
export { vars }
|
@@ -1,63 +1,48 @@
|
|
1
|
-
import { LoaderRadialClass } from '../../../components/descope-loader-radial/LoaderRadialClass';
|
2
|
-
import { getThemeRefs } from '../../../helpers/themeHelpers';
|
3
1
|
import globals from '../../globals';
|
2
|
+
import { LoaderRadialClass, componentName } from '../../../components/descope-loader-radial/LoaderRadialClass';
|
3
|
+
import { createHelperVars, getThemeRefs } from '../../../helpers/themeHelpers';
|
4
4
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
6
|
-
|
7
6
|
const vars = LoaderRadialClass.cssVarList;
|
8
7
|
|
9
|
-
const
|
10
|
-
|
11
|
-
[vars.color]: globalRefs.colors.surface.contrast,
|
12
|
-
[vars.animationDuration]: '2s',
|
13
|
-
[vars.animationTimingFunction]: 'linear',
|
14
|
-
[vars.animationIterationCount]: 'infinite',
|
15
|
-
[vars.spinnerStyle]: 'solid',
|
16
|
-
[vars.spinnerWidth]: '4px',
|
17
|
-
[vars.spinnerRadius]: '50%',
|
18
|
-
[vars.spinnerTopColor]: 'currentColor',
|
19
|
-
[vars.spinnerBottomColor]: 'transparent',
|
20
|
-
[vars.spinnerRightColor]: 'currentColor',
|
21
|
-
[vars.spinnerLeftColor]: 'transparent',
|
22
|
-
size: {
|
23
|
-
xs: {
|
24
|
-
[vars.width]: '20px',
|
25
|
-
[vars.height]: '20px',
|
26
|
-
[vars.spinnerWidth]: '2px'
|
27
|
-
},
|
28
|
-
sm: {
|
29
|
-
[vars.width]: '30px',
|
30
|
-
[vars.height]: '30px',
|
31
|
-
[vars.spinnerWidth]: '3px'
|
32
|
-
},
|
33
|
-
md: {
|
34
|
-
[vars.width]: '40px',
|
35
|
-
[vars.height]: '40px',
|
36
|
-
[vars.spinnerWidth]: '4px'
|
37
|
-
},
|
38
|
-
lg: {
|
39
|
-
[vars.width]: '60px',
|
40
|
-
[vars.height]: '60px',
|
41
|
-
[vars.spinnerWidth]: '5px'
|
42
|
-
},
|
43
|
-
xl: {
|
44
|
-
[vars.width]: '80px',
|
45
|
-
[vars.height]: '80px',
|
46
|
-
[vars.spinnerWidth]: '6px'
|
47
|
-
}
|
48
|
-
},
|
8
|
+
const [helperTheme, helperRefs] = createHelperVars({
|
9
|
+
spinnerColor: globalRefs.colors.surface.contrast,
|
49
10
|
mode: {
|
50
11
|
primary: {
|
51
|
-
|
12
|
+
spinnerColor: globalRefs.colors.primary.main
|
52
13
|
},
|
53
14
|
secondary: {
|
54
|
-
|
15
|
+
spinnerColor: globalRefs.colors.secondary.main
|
55
16
|
}
|
17
|
+
}
|
18
|
+
}, componentName);
|
19
|
+
|
20
|
+
const loaderRadial = {
|
21
|
+
...helperTheme,
|
22
|
+
|
23
|
+
[vars.animationDuration]: '2s',
|
24
|
+
[vars.animationTimingFunction]: 'linear',
|
25
|
+
[vars.animationIterationCount]: 'infinite',
|
26
|
+
[vars.spinnerBorderStyle]: 'solid',
|
27
|
+
[vars.spinnerBorderWidth]: '0.2em',
|
28
|
+
[vars.spinnerBorderRadius]: '50%',
|
29
|
+
[vars.spinnerQuadrant1Color]: helperRefs.spinnerColor,
|
30
|
+
[vars.spinnerQuadrant2Color]: 'transparent',
|
31
|
+
[vars.spinnerQuadrant3Color]: helperRefs.spinnerColor,
|
32
|
+
[vars.spinnerQuadrant4Color]: 'transparent',
|
33
|
+
|
34
|
+
size: {
|
35
|
+
xs: { [vars.spinnerSize]: '20px' },
|
36
|
+
sm: { [vars.spinnerSize]: '30px' },
|
37
|
+
md: { [vars.spinnerSize]: '40px' },
|
38
|
+
lg: { [vars.spinnerSize]: '60px' },
|
39
|
+
xl: { [vars.spinnerSize]: '80px' }
|
56
40
|
},
|
41
|
+
|
57
42
|
_hidden: {
|
58
|
-
[vars.
|
43
|
+
[vars.hostDisplay]: 'none'
|
59
44
|
}
|
60
45
|
};
|
61
46
|
|
62
47
|
export default loaderRadial;
|
63
|
-
export { vars }
|
48
|
+
export { vars }
|
@@ -1,36 +1,21 @@
|
|
1
1
|
import { NewPasswordClass } from '../../components/descope-new-password/NewPasswordClass';
|
2
|
+
import { refs } from "./inputWrapper"
|
2
3
|
|
3
4
|
const vars = NewPasswordClass.cssVarList;
|
4
5
|
|
5
6
|
const newPassword = {
|
6
|
-
[vars.
|
7
|
+
[vars.hostWidth]: refs.width,
|
8
|
+
[vars.fontSize]: refs.fontSize,
|
9
|
+
[vars.fontFamily]: refs.fontFamily,
|
10
|
+
[vars.spaceBetweenInputs]: '1em',
|
7
11
|
|
8
12
|
_required: {
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
},
|
15
|
-
|
16
|
-
size: {
|
17
|
-
xs: {
|
18
|
-
[vars.fontSize]: '8px',
|
19
|
-
},
|
20
|
-
sm: {
|
21
|
-
[vars.fontSize]: '10px',
|
22
|
-
},
|
23
|
-
md: {
|
24
|
-
[vars.fontSize]: '14px',
|
25
|
-
},
|
26
|
-
lg: {
|
27
|
-
[vars.fontSize]: '20px',
|
28
|
-
},
|
29
|
-
xl: {
|
30
|
-
[vars.fontSize]: '25px',
|
31
|
-
}
|
32
|
-
},
|
13
|
+
// NewPassword doesn't pass `required` attribute to its PasswordFields.
|
14
|
+
// That's why we fake the required indicator on each input.
|
15
|
+
// We do that by injecting `::after` element, and populating it with requiredIndicator content.
|
16
|
+
[vars.inputsRequiredIndicator]: refs.requiredIndicator, // used to populate required content for NewPassword input fields outside the theme
|
17
|
+
}
|
33
18
|
};
|
34
19
|
|
35
20
|
export default newPassword;
|
36
|
-
export { vars }
|
21
|
+
export { vars }
|
@@ -1,9 +1,27 @@
|
|
1
1
|
import { NumberFieldClass } from '../../components/descope-number-field/NumberFieldClass';
|
2
|
-
import {
|
2
|
+
import { refs } from './inputWrapper';
|
3
|
+
|
4
|
+
const vars = NumberFieldClass.cssVarList;
|
3
5
|
|
4
6
|
const numberField = {
|
5
|
-
|
7
|
+
[vars.hostWidth]: refs.width,
|
8
|
+
[vars.fontSize]: refs.fontSize,
|
9
|
+
[vars.fontFamily]: refs.fontFamily,
|
10
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
11
|
+
[vars.inputValueTextColor]: refs.valueTextColor,
|
12
|
+
[vars.inputPlaceholderColor]: refs.placeholderTextColor,
|
13
|
+
[vars.inputBorderWidth]: refs.borderWidth,
|
14
|
+
[vars.inputBorderStyle]: refs.borderStyle,
|
15
|
+
[vars.inputBorderColor]: refs.borderColor,
|
16
|
+
[vars.inputBorderRadius]: refs.borderRadius,
|
17
|
+
[vars.inputOutlineWidth]: refs.outlineWidth,
|
18
|
+
[vars.inputOutlineStyle]: refs.outlineStyle,
|
19
|
+
[vars.inputOutlineColor]: refs.outlineColor,
|
20
|
+
[vars.inputOutlineOffset]: refs.outlineOffset,
|
21
|
+
[vars.inputBackgroundColor]: refs.backgroundColor,
|
22
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
23
|
+
[vars.inputHeight]: refs.inputHeight,
|
6
24
|
};
|
7
25
|
|
8
26
|
export default numberField;
|
9
|
-
export
|
27
|
+
export { vars };
|
@@ -1,43 +1,32 @@
|
|
1
|
-
import { PasscodeClass } from '../../components/descope-passcode/PasscodeClass';
|
2
|
-
import { getThemeRefs } from '../../helpers/themeHelpers';
|
3
1
|
import globals from '../globals';
|
2
|
+
import { getThemeRefs } from '../../helpers/themeHelpers';
|
3
|
+
import { PasscodeClass } from '../../components/descope-passcode/PasscodeClass';
|
4
|
+
import { refs } from './inputWrapper';
|
4
5
|
|
5
|
-
const vars = PasscodeClass.cssVarList
|
6
6
|
const globalRefs = getThemeRefs(globals);
|
7
|
+
const vars = PasscodeClass.cssVarList
|
7
8
|
|
8
9
|
const passcode = {
|
9
|
-
[vars.
|
10
|
-
[vars.
|
11
|
-
[vars.
|
12
|
-
[vars.
|
13
|
-
[vars.
|
14
|
-
[vars.
|
15
|
-
[vars.
|
10
|
+
[vars.fontFamily]: refs.fontFamily,
|
11
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
12
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
13
|
+
[vars.digitValueTextColor]: refs.valueTextColor,
|
14
|
+
[vars.digitPadding]: '0',
|
15
|
+
[vars.digitTextAlign]: 'center',
|
16
|
+
[vars.digitSpacing]: '0',
|
17
|
+
[vars.hostWidth]: refs.width,
|
18
|
+
[vars.digitOutlineColor]: 'transparent',
|
19
|
+
[vars.digitOutlineWidth]: '2px',
|
16
20
|
[vars.focusedDigitFieldOutlineColor]: globalRefs.colors.surface.main,
|
17
|
-
[vars.color]: globalRefs.colors.surface.contrast,
|
18
21
|
|
19
22
|
_hideCursor: {
|
20
|
-
[vars.
|
21
|
-
},
|
22
|
-
|
23
|
-
_disabled: {
|
24
|
-
[vars.backgroundColor]: globalRefs.colors.surface.main
|
25
|
-
},
|
26
|
-
|
27
|
-
_fullWidth: {
|
28
|
-
[vars.width]: '100%'
|
29
|
-
},
|
30
|
-
|
31
|
-
_bordered: {
|
32
|
-
[vars.borderColor]: globalRefs.colors.surface.main
|
23
|
+
[vars.digitCaretTextColor]: 'transparent',
|
33
24
|
},
|
34
25
|
|
35
26
|
_invalid: {
|
36
|
-
[vars.borderColor]: globalRefs.colors.error.main,
|
37
|
-
[vars.color]: globalRefs.colors.error.main,
|
38
27
|
[vars.focusedDigitFieldOutlineColor]: globalRefs.colors.error.light,
|
39
|
-
}
|
28
|
+
}
|
40
29
|
}
|
41
30
|
|
42
31
|
export default passcode;
|
43
|
-
export { vars }
|
32
|
+
export { vars }
|
@@ -1,73 +1,27 @@
|
|
1
1
|
import { PasswordFieldClass } from '../../components/descope-password-field/PasswordFieldClass';
|
2
|
-
import
|
3
|
-
import { getThemeRefs } from '../../helpers/themeHelpers';
|
4
|
-
|
5
|
-
const globalRefs = getThemeRefs(globals);
|
2
|
+
import { refs } from './inputWrapper';
|
6
3
|
|
7
4
|
const vars = PasswordFieldClass.cssVarList;
|
8
5
|
|
9
6
|
const passwordField = {
|
10
|
-
[vars.
|
11
|
-
[vars.
|
12
|
-
[vars.
|
13
|
-
[vars.
|
14
|
-
[vars.
|
15
|
-
|
16
|
-
[vars.
|
17
|
-
[vars.
|
18
|
-
[vars.
|
19
|
-
|
20
|
-
[vars.
|
21
|
-
|
22
|
-
|
23
|
-
[vars.
|
24
|
-
[vars.
|
25
|
-
[vars.
|
26
|
-
|
27
|
-
[vars.pointerCursor]: 'pointer',
|
28
|
-
|
29
|
-
[vars.padding]: '0',
|
30
|
-
[vars.height]: '2em',
|
31
|
-
|
32
|
-
size: {
|
33
|
-
xs: {
|
34
|
-
[vars.fontSize]: '8px',
|
35
|
-
},
|
36
|
-
sm: {
|
37
|
-
[vars.fontSize]: '10px',
|
38
|
-
},
|
39
|
-
md: {
|
40
|
-
[vars.fontSize]: '14px',
|
41
|
-
},
|
42
|
-
lg: {
|
43
|
-
[vars.fontSize]: '20px',
|
44
|
-
},
|
45
|
-
xl: {
|
46
|
-
[vars.fontSize]: '25px',
|
47
|
-
}
|
48
|
-
},
|
49
|
-
|
50
|
-
_bordered: {
|
51
|
-
[vars.padding]: '0 0.5em',
|
52
|
-
[vars.wrapperBorderColor]: globalRefs.colors.surface.main
|
53
|
-
},
|
54
|
-
|
55
|
-
_fullWidth: {
|
56
|
-
[vars.width]: '100%'
|
57
|
-
},
|
58
|
-
|
59
|
-
_focused: {
|
60
|
-
[vars.outlineColor]: globalRefs.colors.surface.main
|
61
|
-
},
|
62
|
-
|
63
|
-
_invalid: {
|
64
|
-
[vars.labelTextColor]: globalRefs.colors.error.main,
|
65
|
-
[vars.inputTextColor]: globalRefs.colors.error.main,
|
66
|
-
[vars.placeholderTextColor]: globalRefs.colors.error.light,
|
67
|
-
[vars.wrapperBorderColor]: globalRefs.colors.error.main,
|
68
|
-
[vars.outlineColor]: globalRefs.colors.error.light,
|
69
|
-
},
|
7
|
+
[vars.hostWidth]: refs.width,
|
8
|
+
[vars.fontSize]: refs.fontSize,
|
9
|
+
[vars.fontFamily]: refs.fontFamily,
|
10
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
11
|
+
[vars.inputHeight]: refs.inputHeight,
|
12
|
+
[vars.inputBackgroundColor]: refs.backgroundColor,
|
13
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
14
|
+
[vars.inputValueTextColor]: refs.valueTextColor,
|
15
|
+
[vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
16
|
+
[vars.inputBorderWidth]: refs.borderWidth,
|
17
|
+
[vars.inputBorderStyle]: refs.borderStyle,
|
18
|
+
[vars.inputBorderColor]: refs.borderColor,
|
19
|
+
[vars.inputBorderRadius]: refs.borderRadius,
|
20
|
+
[vars.inputOutlineWidth]: refs.outlineWidth,
|
21
|
+
[vars.inputOutlineStyle]: refs.outlineStyle,
|
22
|
+
[vars.inputOutlineColor]: refs.outlineColor,
|
23
|
+
[vars.inputOutlineOffset]: refs.outlineOffset,
|
70
24
|
};
|
71
25
|
|
72
26
|
export default passwordField;
|
73
|
-
export { vars }
|
27
|
+
export { vars }
|
@@ -1,66 +1,28 @@
|
|
1
|
-
import globals from '../globals';
|
2
1
|
import { PhoneFieldClass } from '../../components/descope-phone-field/PhoneFieldClass';
|
3
|
-
import {
|
2
|
+
import { refs } from './inputWrapper';
|
4
3
|
|
5
|
-
const globalRefs = getThemeRefs(globals);
|
6
4
|
const vars = PhoneFieldClass.cssVarList;
|
7
5
|
|
8
6
|
const phoneField = {
|
9
|
-
[vars.
|
10
|
-
[vars.
|
11
|
-
[vars.
|
12
|
-
[vars.
|
13
|
-
[vars.
|
14
|
-
[vars.
|
15
|
-
|
7
|
+
[vars.hostWidth]: refs.width,
|
8
|
+
[vars.fontSize]: refs.fontSize,
|
9
|
+
[vars.fontFamily]: refs.fontFamily,
|
10
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
11
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
12
|
+
[vars.inputValueTextColor]: refs.valueTextColor,
|
13
|
+
[vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
14
|
+
[vars.inputBorderStyle]: refs.borderStyle,
|
15
|
+
[vars.inputBorderWidth]: refs.borderWidth,
|
16
|
+
[vars.inputBorderColor]: refs.borderColor,
|
17
|
+
[vars.inputBorderRadius]: refs.borderRadius,
|
18
|
+
[vars.inputOutlineStyle]: refs.outlineStyle,
|
19
|
+
[vars.inputOutlineWidth]: refs.outlineWidth,
|
20
|
+
[vars.inputOutlineColor]: refs.outlineColor,
|
21
|
+
[vars.inputOutlineOffset]: refs.outlineOffset,
|
22
|
+
[vars.inputHeight]: refs.inputHeight,
|
16
23
|
[vars.phoneInputWidth]: '10em',
|
17
24
|
[vars.countryCodeInputWidth]: '5em',
|
18
|
-
|
19
|
-
[vars.inputHeight]: '2em',
|
20
|
-
[vars.countryCodeDropdownWidth]: '12em',
|
21
|
-
|
22
|
-
size: {
|
23
|
-
xs: {
|
24
|
-
[vars.fontSize]: '8px',
|
25
|
-
},
|
26
|
-
sm: {
|
27
|
-
[vars.fontSize]: '20px',
|
28
|
-
},
|
29
|
-
md: {
|
30
|
-
[vars.fontSize]: '14px',
|
31
|
-
},
|
32
|
-
lg: {
|
33
|
-
[vars.fontSize]: '20px',
|
34
|
-
},
|
35
|
-
xl: {
|
36
|
-
[vars.fontSize]: '25px',
|
37
|
-
}
|
38
|
-
},
|
39
|
-
|
40
|
-
_fullWidth: {
|
41
|
-
[vars.componentWidth]: '100%',
|
42
|
-
[vars.phoneInputWidth]: '100%',
|
43
|
-
[vars.countryCodeDropdownWidth]: '100%',
|
44
|
-
},
|
45
|
-
|
46
|
-
_bordered: {
|
47
|
-
[vars.wrapperBorderColor]: globalRefs.colors.surface.main
|
48
|
-
},
|
49
|
-
|
50
|
-
[vars.outlineStyle]: 'solid',
|
51
|
-
[vars.outlineWidth]: '0.1em',
|
52
|
-
[vars.outlineColor]: 'transparent',
|
53
|
-
|
54
|
-
_focused: {
|
55
|
-
[vars.outlineColor]: globalRefs.colors.surface.main
|
56
|
-
},
|
57
|
-
|
58
|
-
_invalid: {
|
59
|
-
[vars.outlineColor]: globalRefs.colors.error.light,
|
60
|
-
[vars.color]: globalRefs.colors.error.main,
|
61
|
-
[vars.placeholderColor]: globalRefs.colors.error.light,
|
62
|
-
[vars.wrapperBorderColor]: globalRefs.colors.error.main
|
63
|
-
},
|
25
|
+
[vars.countryCodeDropdownWidth]: '20em',
|
64
26
|
|
65
27
|
// '@overlay': {
|
66
28
|
// overlayItemBackgroundColor: 'red'
|
@@ -69,4 +31,3 @@ const phoneField = {
|
|
69
31
|
|
70
32
|
export default phoneField;
|
71
33
|
export { vars }
|
72
|
-
|