@descope/web-components-ui 1.0.113 → 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 +5558 -1
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +21 -20
- package/dist/index.esm.js +1586 -1456
- 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 +2 -2
- 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/dev/index.js +1 -1
- package/src/helpers/themeHelpers/index.js +6 -1
- package/src/helpers/themeHelpers/resetHelpers.js +76 -0
- package/src/index.cjs.js +23 -2
- package/src/index.d.ts +50 -0
- package/src/index.js +1 -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 +45 -29
- package/src/theme/components/checkbox.js +18 -46
- package/src/theme/components/comboBox.js +24 -35
- package/src/theme/components/container.js +49 -61
- package/src/theme/components/divider.js +35 -23
- package/src/theme/components/emailField.js +21 -2
- package/src/theme/components/image.js +1 -0
- package/src/theme/components/index.js +27 -19
- package/src/theme/components/inputWrapper.js +72 -0
- package/src/theme/components/link.js +16 -22
- package/src/theme/components/loader/index.js +4 -2
- package/src/theme/components/loader/loaderLinear.js +19 -23
- package/src/theme/components/loader/loaderRadial.js +32 -46
- package/src/theme/components/logo.js +1 -0
- package/src/theme/components/newPassword.js +11 -25
- package/src/theme/components/numberField.js +21 -2
- package/src/theme/components/passcode.js +17 -27
- package/src/theme/components/passwordField.js +19 -64
- package/src/theme/components/phoneField.js +19 -58
- package/src/theme/components/switchToggle.js +21 -34
- package/src/theme/components/text.js +14 -8
- package/src/theme/components/textArea.js +20 -36
- package/src/theme/components/textField.js +21 -67
- package/src/theme/globals.js +6 -2
- package/src/theme/index.js +4 -3
@@ -1,35 +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;
|
21
|
+
export { vars }
|
@@ -1,8 +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;
|
27
|
+
export { vars };
|
@@ -1,42 +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;
|
32
|
+
export { vars }
|
@@ -1,72 +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;
|
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'
|
@@ -68,5 +30,4 @@ const phoneField = {
|
|
68
30
|
};
|
69
31
|
|
70
32
|
export default phoneField;
|
71
|
-
|
72
|
-
|
33
|
+
export { vars }
|
@@ -1,77 +1,64 @@
|
|
1
1
|
import globals from '../globals';
|
2
2
|
import { getThemeRefs } from '../../helpers/themeHelpers';
|
3
3
|
import { SwitchToggleClass } from '../../components/boolean-fields/descope-switch-toggle/SwitchToggleClass';
|
4
|
+
import { refs } from './inputWrapper';
|
4
5
|
|
5
6
|
const knobMargin = '2px';
|
6
7
|
const checkboxHeight = '1.25em';
|
7
|
-
const trackBorderWidth = '2px';
|
8
8
|
|
9
9
|
const globalRefs = getThemeRefs(globals);
|
10
10
|
const vars = SwitchToggleClass.cssVarList;
|
11
11
|
|
12
12
|
const switchToggle = {
|
13
|
-
|
14
|
-
|
15
|
-
sm: { [vars.fontSize]: '12px' },
|
16
|
-
md: { [vars.fontSize]: '16px' },
|
17
|
-
lg: { [vars.fontSize]: '20px' },
|
18
|
-
xl: { [vars.fontSize]: '24px' }
|
19
|
-
},
|
13
|
+
[vars.fontSize]: refs.fontSize,
|
14
|
+
[vars.fontFamily]: refs.fontFamily,
|
20
15
|
|
21
|
-
[vars.
|
16
|
+
[vars.inputOutlineWidth]: refs.outlineWidth,
|
17
|
+
[vars.inputOutlineOffset]: refs.outlineOffset,
|
18
|
+
[vars.inputOutlineColor]: refs.outlineColor,
|
19
|
+
[vars.inputOutlineStyle]: refs.outlineStyle,
|
22
20
|
|
23
|
-
[vars.trackBorderStyle]:
|
24
|
-
[vars.trackBorderWidth]: trackBorderWidth
|
21
|
+
[vars.trackBorderStyle]: refs.borderStyle,
|
22
|
+
[vars.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
25
23
|
[vars.trackBorderColor]: globalRefs.colors.surface.contrast,
|
26
|
-
|
27
24
|
[vars.trackBackgroundColor]: 'none',
|
28
|
-
[vars.
|
29
|
-
[vars.trackWidth]: '2.5em',
|
25
|
+
[vars.trackBorderRadius]: globalRefs.radius.md,
|
26
|
+
[vars.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
30
27
|
[vars.trackHeight]: checkboxHeight,
|
31
28
|
|
32
29
|
[vars.knobSize]: `calc(1em - ${knobMargin})`,
|
33
30
|
[vars.knobRadius]: '50%',
|
34
31
|
[vars.knobTopOffset]: '1px',
|
35
|
-
[vars.
|
36
|
-
[vars.
|
37
|
-
[vars.
|
32
|
+
[vars.knobLeftOffset]: knobMargin,
|
33
|
+
[vars.knobColor]: refs.valueTextColor,
|
34
|
+
[vars.knobTransitionDuration]: '0.3s',
|
38
35
|
|
39
|
-
[vars.labelTextColor]:
|
36
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
40
37
|
[vars.labelFontWeight]: '400',
|
41
38
|
[vars.labelLineHeight]: `calc(${checkboxHeight} + 0.25em)`,
|
42
|
-
[vars.
|
39
|
+
[vars.labelSpacing]: '0.25em',
|
40
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
43
41
|
|
44
|
-
|
45
|
-
[vars.width]: '100%',
|
46
|
-
},
|
42
|
+
[vars.hostWidth]: refs.width,
|
47
43
|
|
48
44
|
_checked: {
|
49
45
|
[vars.trackBorderColor]: globalRefs.colors.primary.main,
|
50
|
-
[vars.
|
46
|
+
[vars.knobLeftOffset]: `calc(100% - var(${vars.knobSize}) - ${knobMargin})`,
|
51
47
|
[vars.knobColor]: globalRefs.colors.primary.main,
|
52
|
-
[vars.knobTextColor]:
|
48
|
+
[vars.knobTextColor]: refs.valueTextColor,
|
53
49
|
},
|
54
50
|
|
55
51
|
_disabled: {
|
56
|
-
[vars.cursor]: 'not-allowed', // todo: fix cursor
|
57
52
|
[vars.knobColor]: globalRefs.colors.surface.main,
|
58
53
|
[vars.trackBorderColor]: globalRefs.colors.surface.main,
|
59
54
|
[vars.trackBackgroundColor]: globalRefs.colors.surface.light,
|
60
55
|
},
|
61
56
|
|
62
|
-
_focused: {
|
63
|
-
[vars.switchOutlineWidth]: '2px',
|
64
|
-
[vars.switchOutlineOffset]: '1px',
|
65
|
-
[vars.switchOutlineColor]: globalRefs.colors.primary.main,
|
66
|
-
[vars.switchOutlineStyle]: 'solid'
|
67
|
-
},
|
68
|
-
|
69
57
|
_invalid: {
|
70
|
-
[vars.switchOutlineColor]: globalRefs.colors.error.main,
|
71
58
|
[vars.trackBorderColor]: globalRefs.colors.error.main,
|
72
59
|
[vars.knobColor]: globalRefs.colors.error.main,
|
73
|
-
[vars.labelTextColor]: globalRefs.colors.error.main
|
74
60
|
},
|
75
61
|
};
|
76
62
|
|
77
63
|
export default switchToggle;
|
64
|
+
export { vars }
|
@@ -3,13 +3,12 @@ import { getThemeRefs } from '../../helpers/themeHelpers';
|
|
3
3
|
import { TextClass } from '../../components/descope-text/TextClass';
|
4
4
|
|
5
5
|
const globalRefs = getThemeRefs(globals);
|
6
|
-
|
7
6
|
const vars = TextClass.cssVarList;
|
8
7
|
|
9
8
|
const text = {
|
10
|
-
[vars.
|
9
|
+
[vars.textLineHeight]: '1em',
|
11
10
|
[vars.textAlign]: 'left',
|
12
|
-
[vars.
|
11
|
+
[vars.textColor]: globalRefs.colors.surface.dark,
|
13
12
|
variant: {
|
14
13
|
h1: {
|
15
14
|
[vars.fontSize]: globalRefs.typography.h1.size,
|
@@ -47,37 +46,44 @@ const text = {
|
|
47
46
|
[vars.fontFamily]: globalRefs.typography.body2.font
|
48
47
|
}
|
49
48
|
},
|
49
|
+
|
50
50
|
mode: {
|
51
51
|
primary: {
|
52
|
-
[vars.
|
52
|
+
[vars.textColor]: globalRefs.colors.primary.main
|
53
53
|
},
|
54
54
|
secondary: {
|
55
|
-
[vars.
|
55
|
+
[vars.textColor]: globalRefs.colors.secondary.main
|
56
56
|
},
|
57
57
|
error: {
|
58
|
-
[vars.
|
58
|
+
[vars.textColor]: globalRefs.colors.error.main
|
59
59
|
},
|
60
60
|
success: {
|
61
|
-
[vars.
|
61
|
+
[vars.textColor]: globalRefs.colors.success.main
|
62
62
|
}
|
63
63
|
},
|
64
|
+
|
64
65
|
textAlign: {
|
65
66
|
right: { [vars.textAlign]: 'right' },
|
66
67
|
left: { [vars.textAlign]: 'left' },
|
67
68
|
center: { [vars.textAlign]: 'center' }
|
68
69
|
},
|
70
|
+
|
69
71
|
_fullWidth: {
|
70
|
-
[vars.
|
72
|
+
[vars.hostWidth]: '100%',
|
71
73
|
},
|
74
|
+
|
72
75
|
_italic: {
|
73
76
|
[vars.fontStyle]: 'italic'
|
74
77
|
},
|
78
|
+
|
75
79
|
_uppercase: {
|
76
80
|
[vars.textTransform]: 'uppercase'
|
77
81
|
},
|
82
|
+
|
78
83
|
_lowercase: {
|
79
84
|
[vars.textTransform]: 'lowercase'
|
80
85
|
}
|
81
86
|
};
|
82
87
|
|
83
88
|
export default text;
|
89
|
+
export { vars }
|
@@ -1,54 +1,38 @@
|
|
1
1
|
import globals from '../globals';
|
2
2
|
import { getThemeRefs } from '../../helpers/themeHelpers';
|
3
3
|
import { TextAreaClass } from '../../components/descope-text-area/TextAreaClass';
|
4
|
+
import { refs } from './inputWrapper';
|
4
5
|
|
5
6
|
const globalRefs = getThemeRefs(globals);
|
6
7
|
const vars = TextAreaClass.cssVarList;
|
7
8
|
|
8
9
|
const textArea = {
|
9
|
-
[vars.
|
10
|
-
[vars.placeholderColor]: globalRefs.colors.surface.main,
|
11
|
-
[vars.color]: globalRefs.colors.surface.contrast,
|
10
|
+
[vars.hostWidth]: refs.width,
|
12
11
|
[vars.fontSize]: '14px',
|
13
|
-
|
14
|
-
[vars.
|
15
|
-
[vars.
|
16
|
-
|
17
|
-
[vars.
|
18
|
-
[vars.
|
19
|
-
[vars.
|
20
|
-
[vars.
|
21
|
-
[vars.
|
22
|
-
[vars.
|
23
|
-
[vars.
|
24
|
-
[vars.
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
},
|
29
|
-
|
30
|
-
_focused: {
|
31
|
-
[vars.outlineColor]: globalRefs.colors.surface.main
|
32
|
-
},
|
12
|
+
[vars.fontFamily]: refs.fontFamily,
|
13
|
+
[vars.labelTextColor]: refs.labelTextColor,
|
14
|
+
[vars.labelRequiredIndicator]: refs.requiredIndicator,
|
15
|
+
[vars.inputBackgroundColor]: refs.backgroundColor,
|
16
|
+
[vars.inputValueTextColor]: refs.valueTextColor,
|
17
|
+
[vars.inputPlaceholderTextColor]: refs.placeholderTextColor,
|
18
|
+
[vars.inputBorderRadius]: refs.borderRadius,
|
19
|
+
[vars.inputBorderWidth]: refs.borderWidth,
|
20
|
+
[vars.inputBorderStyle]: refs.borderStyle,
|
21
|
+
[vars.inputBorderColor]: refs.borderColor,
|
22
|
+
[vars.inputOutlineWidth]: refs.outlineWidth,
|
23
|
+
[vars.inputOutlineStyle]: refs.outlineStyle,
|
24
|
+
[vars.inputOutlineColor]: refs.outlineColor,
|
25
|
+
[vars.inputOutlineOffset]: refs.outlineOffset,
|
26
|
+
[vars.inputResizeType]: 'vertical',
|
33
27
|
|
34
28
|
_disabled: {
|
35
|
-
[vars.
|
36
|
-
},
|
37
|
-
|
38
|
-
_bordered: {
|
39
|
-
[vars.borderColor]: globalRefs.colors.surface.main,
|
40
|
-
},
|
41
|
-
|
42
|
-
_invalid: {
|
43
|
-
[vars.labelColor]: globalRefs.colors.error.main,
|
44
|
-
[vars.borderColor]: globalRefs.colors.error.main,
|
45
|
-
[vars.outlineColor]: globalRefs.colors.error.light,
|
46
|
-
[vars.placeholderColor]: globalRefs.colors.error.light,
|
29
|
+
[vars.inputBackgroundColor]: globalRefs.colors.surface.light,
|
47
30
|
},
|
48
31
|
|
49
32
|
_readonly: {
|
50
|
-
[vars.
|
33
|
+
[vars.inputResizeType]: 'none',
|
51
34
|
}
|
52
35
|
};
|
53
36
|
|
54
37
|
export default textArea;
|
38
|
+
export { vars }
|
@@ -1,73 +1,27 @@
|
|
1
|
-
import globals from '../globals';
|
2
|
-
import { getThemeRefs } from '../../helpers/themeHelpers';
|
3
1
|
import { TextFieldClass } from '../../components/descope-text-field/TextFieldClass';
|
4
|
-
|
5
|
-
const globalRefs = getThemeRefs(globals);
|
2
|
+
import { refs } from './inputWrapper';
|
6
3
|
|
7
4
|
const vars = TextFieldClass.cssVarList;
|
8
5
|
|
9
|
-
export const textField = (
|
10
|
-
[vars.
|
11
|
-
|
12
|
-
[vars.
|
13
|
-
[vars.
|
14
|
-
[vars.
|
15
|
-
|
16
|
-
[vars.
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
},
|
28
|
-
lg: {
|
29
|
-
[vars.fontSize]: '20px',
|
30
|
-
},
|
31
|
-
xl: {
|
32
|
-
[vars.fontSize]: '25px',
|
33
|
-
}
|
34
|
-
},
|
35
|
-
|
36
|
-
[vars.color]: globalRefs.colors.surface.contrast,
|
37
|
-
[vars.labelTextColor]: globalRefs.colors.surface.contrast,
|
38
|
-
[vars.placeholderColor]: globalRefs.colors.surface.main,
|
39
|
-
|
40
|
-
[vars.backgroundColor]: globalRefs.colors.surface.light,
|
41
|
-
|
42
|
-
[vars.borderWidth]: '1px',
|
43
|
-
[vars.borderStyle]: 'solid',
|
44
|
-
[vars.borderColor]: 'transparent',
|
45
|
-
[vars.borderRadius]: globalRefs.radius.xs,
|
46
|
-
|
47
|
-
_disabled: {
|
48
|
-
[vars.color]: globalRefs.colors.surface.dark,
|
49
|
-
[vars.placeholderColor]: globalRefs.colors.surface.light,
|
50
|
-
[vars.backgroundColor]: globalRefs.colors.surface.main
|
51
|
-
},
|
52
|
-
|
53
|
-
_fullWidth: {
|
54
|
-
[vars.width]: '100%'
|
55
|
-
},
|
56
|
-
|
57
|
-
_focused: {
|
58
|
-
[vars.outlineColor]: globalRefs.colors.surface.main
|
59
|
-
},
|
60
|
-
|
61
|
-
_bordered: {
|
62
|
-
[vars.borderColor]: globalRefs.colors.surface.main
|
63
|
-
},
|
64
|
-
|
65
|
-
_invalid: {
|
66
|
-
[vars.borderColor]: globalRefs.colors.error.main,
|
67
|
-
[vars.color]: globalRefs.colors.error.main,
|
68
|
-
[vars.outlineColor]: globalRefs.colors.error.light,
|
69
|
-
[vars.placeholderColor]: globalRefs.colors.error.light
|
70
|
-
}
|
6
|
+
export const textField = ({
|
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.inputPlaceholderColor]: refs.placeholderTextColor,
|
14
|
+
[vars.inputBorderWidth]: refs.borderWidth,
|
15
|
+
[vars.inputBorderStyle]: refs.borderStyle,
|
16
|
+
[vars.inputBorderColor]: refs.borderColor,
|
17
|
+
[vars.inputBorderRadius]: refs.borderRadius,
|
18
|
+
[vars.inputOutlineWidth]: refs.outlineWidth,
|
19
|
+
[vars.inputOutlineStyle]: refs.outlineStyle,
|
20
|
+
[vars.inputOutlineColor]: refs.outlineColor,
|
21
|
+
[vars.inputOutlineOffset]: refs.outlineOffset,
|
22
|
+
[vars.inputBackgroundColor]: refs.backgroundColor,
|
23
|
+
[vars.inputHeight]: refs.inputHeight,
|
71
24
|
});
|
72
25
|
|
73
|
-
export default textField
|
26
|
+
export default textField;
|
27
|
+
export { vars }
|
package/src/theme/globals.js
CHANGED
@@ -1,6 +1,7 @@
|
|
1
|
-
import { getThemeRefs } from '../helpers/themeHelpers';
|
1
|
+
import { getThemeRefs, getThemeVars } from '../helpers/themeHelpers';
|
2
2
|
import { genColors } from '../helpers/themeHelpers/colorsHelpers';
|
3
3
|
|
4
|
+
|
4
5
|
export const colors = genColors({
|
5
6
|
surface: {
|
6
7
|
main: 'lightgray',
|
@@ -138,7 +139,7 @@ const shadow = {
|
|
138
139
|
}
|
139
140
|
};
|
140
141
|
|
141
|
-
|
142
|
+
const globals = {
|
142
143
|
colors,
|
143
144
|
typography,
|
144
145
|
spacing,
|
@@ -147,3 +148,6 @@ export default {
|
|
147
148
|
shadow,
|
148
149
|
fonts
|
149
150
|
};
|
151
|
+
|
152
|
+
export default globals
|
153
|
+
export const vars = getThemeVars(globals)
|