@descope-ui/theme-input-wrapper 0.0.1
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/package.json +16 -0
- package/project.json +7 -0
- package/src/index.js +130 -0
package/package.json
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@descope-ui/theme-input-wrapper",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"main": "./src/index.js",
|
|
5
|
+
"dependencies": {
|
|
6
|
+
"@descope-ui/common": "0.0.1",
|
|
7
|
+
"@descope-ui/theme-globals": "0.0.1"
|
|
8
|
+
},
|
|
9
|
+
"publishConfig": {
|
|
10
|
+
"link-workspace-packages": false
|
|
11
|
+
},
|
|
12
|
+
"scripts": {
|
|
13
|
+
"test": "echo 'No tests defined' && exit 0",
|
|
14
|
+
"test:e2e": "echo 'No e2e tests defined' && exit 0"
|
|
15
|
+
}
|
|
16
|
+
}
|
package/project.json
ADDED
package/src/index.js
ADDED
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import globals from '@descope-ui/theme-globals';
|
|
2
|
+
import { getThemeRefs, createHelperVars } from '@descope-ui/common/theme-helpers';
|
|
3
|
+
import { getComponentName } from '@descope-ui/common/components-helpers';
|
|
4
|
+
|
|
5
|
+
const componentName = getComponentName('input-wrapper');
|
|
6
|
+
const globalRefs = getThemeRefs(globals);
|
|
7
|
+
|
|
8
|
+
const [theme, refs, vars] = createHelperVars(
|
|
9
|
+
{
|
|
10
|
+
labelTextColor: globalRefs.colors.surface.dark,
|
|
11
|
+
labelFontSize: '14px', // not taken from globals as it is fixed in all inputs
|
|
12
|
+
labelFontWeight: '500', // not taken from globals as it is fixed in all inputs
|
|
13
|
+
valueTextColor: globalRefs.colors.surface.contrast,
|
|
14
|
+
placeholderTextColor: globalRefs.colors.surface.dark,
|
|
15
|
+
requiredIndicator: "'*'",
|
|
16
|
+
helperTextColor: globalRefs.colors.surface.dark,
|
|
17
|
+
errorMessageTextColor: globalRefs.colors.error.main,
|
|
18
|
+
successMessageTextColor: globalRefs.colors.success.main,
|
|
19
|
+
|
|
20
|
+
borderWidth: globalRefs.border.xs,
|
|
21
|
+
borderRadius: globalRefs.radius.xs,
|
|
22
|
+
borderColor: 'transparent',
|
|
23
|
+
|
|
24
|
+
outlineWidth: globalRefs.border.sm,
|
|
25
|
+
outlineStyle: 'solid',
|
|
26
|
+
outlineColor: 'transparent',
|
|
27
|
+
outlineOffset: '0px', // we need to keep the px unit even for 0 value, as this var is used for calc in different component classes
|
|
28
|
+
|
|
29
|
+
minWidth: '10em',
|
|
30
|
+
toggleButtonSize: '1.5em',
|
|
31
|
+
inputIconSize: '1em',
|
|
32
|
+
inputHeight: '3em',
|
|
33
|
+
horizontalPadding: '0.5em',
|
|
34
|
+
verticalPadding: '0.5em',
|
|
35
|
+
|
|
36
|
+
textAlign: 'start',
|
|
37
|
+
|
|
38
|
+
backgroundColor: globalRefs.colors.surface.main,
|
|
39
|
+
|
|
40
|
+
fontFamily: globalRefs.fonts.font1.family,
|
|
41
|
+
|
|
42
|
+
direction: globalRefs.direction,
|
|
43
|
+
|
|
44
|
+
overlayOpacity: '0.3',
|
|
45
|
+
|
|
46
|
+
errorMessageIcon: '',
|
|
47
|
+
errorMessageIconSize: '0',
|
|
48
|
+
errorMessageIconPadding: '0',
|
|
49
|
+
errorMessageIconPosition: '0 0.4em',
|
|
50
|
+
errorMessageIconRepeat: 'no-repeat',
|
|
51
|
+
|
|
52
|
+
size: {
|
|
53
|
+
xs: { fontSize: '12px', chipFontSize: '10px' },
|
|
54
|
+
sm: { fontSize: '14px', chipFontSize: '12px' },
|
|
55
|
+
md: { fontSize: '16px', chipFontSize: '14px' },
|
|
56
|
+
lg: { fontSize: '18px', chipFontSize: '16px' },
|
|
57
|
+
},
|
|
58
|
+
|
|
59
|
+
labelType: {
|
|
60
|
+
static: {
|
|
61
|
+
valueInputHeight: '3em',
|
|
62
|
+
valueInputMarginBottom: 'auto',
|
|
63
|
+
},
|
|
64
|
+
floating: {
|
|
65
|
+
labelPosition: 'absolute',
|
|
66
|
+
labelTopPosition: '0',
|
|
67
|
+
labelHorizontalPosition: '0.9em',
|
|
68
|
+
labelFontSize: '1em',
|
|
69
|
+
placeholderOpacity: 0,
|
|
70
|
+
inputHeight: '3.5em',
|
|
71
|
+
inputVerticalAlignment: 'flex-end',
|
|
72
|
+
inputTransformY: 'translateY(1.55em)',
|
|
73
|
+
inputTransition: 'all 75ms ease-in-out',
|
|
74
|
+
marginInlineStart: '0',
|
|
75
|
+
valueInputHeight: '1.5702em',
|
|
76
|
+
valueInputMarginBottom: '0.5em',
|
|
77
|
+
|
|
78
|
+
_focused: {
|
|
79
|
+
labelFontSize: '0.75em',
|
|
80
|
+
inputTransformY: 'translateY(1.05em)',
|
|
81
|
+
labelFontWeight: '400',
|
|
82
|
+
placeholderOpacity: 1,
|
|
83
|
+
},
|
|
84
|
+
|
|
85
|
+
_readOnly: {
|
|
86
|
+
placeholderOpacity: 0,
|
|
87
|
+
},
|
|
88
|
+
|
|
89
|
+
_hasValue: {
|
|
90
|
+
inputTransformY: 'translateY(1.05em)',
|
|
91
|
+
labelFontSize: '0.75em',
|
|
92
|
+
labelFontWeight: '400',
|
|
93
|
+
},
|
|
94
|
+
},
|
|
95
|
+
},
|
|
96
|
+
|
|
97
|
+
_fullWidth: {
|
|
98
|
+
width: '100%',
|
|
99
|
+
},
|
|
100
|
+
|
|
101
|
+
_focused: {
|
|
102
|
+
outlineColor: globalRefs.colors.surface.light,
|
|
103
|
+
_invalid: {
|
|
104
|
+
outlineColor: globalRefs.colors.error.main,
|
|
105
|
+
},
|
|
106
|
+
},
|
|
107
|
+
|
|
108
|
+
_bordered: {
|
|
109
|
+
outlineWidth: globalRefs.border.xs,
|
|
110
|
+
borderColor: globalRefs.colors.surface.light,
|
|
111
|
+
borderStyle: 'solid',
|
|
112
|
+
_invalid: {
|
|
113
|
+
borderColor: globalRefs.colors.error.main,
|
|
114
|
+
},
|
|
115
|
+
},
|
|
116
|
+
|
|
117
|
+
_disabled: {
|
|
118
|
+
labelTextColor: globalRefs.colors.surface.light,
|
|
119
|
+
borderColor: globalRefs.colors.surface.light,
|
|
120
|
+
valueTextColor: globalRefs.colors.surface.light,
|
|
121
|
+
placeholderTextColor: globalRefs.colors.surface.light,
|
|
122
|
+
helperTextColor: globalRefs.colors.surface.light,
|
|
123
|
+
backgroundColor: globalRefs.colors.surface.main,
|
|
124
|
+
},
|
|
125
|
+
},
|
|
126
|
+
componentName,
|
|
127
|
+
);
|
|
128
|
+
|
|
129
|
+
export { refs, vars };
|
|
130
|
+
export default theme;
|