@wireapp/react-ui-kit 9.23.5 → 9.23.6
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/lib/Form/Input.d.ts.map +1 -1
- package/lib/Form/Input.js +25 -4
- package/lib/Theme/GlobalCssVariables.d.ts.map +1 -1
- package/lib/Theme/GlobalCssVariables.js +2 -0
- package/lib/Theme/Theme.d.ts +1 -0
- package/lib/Theme/Theme.d.ts.map +1 -1
- package/lib/Theme/Theme.js +3 -0
- package/package.json +2 -2
package/lib/Form/Input.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Form/Input.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAW,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAKtC,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAChC,OAAO,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAGlC,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IAClD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Form/Input.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,YAAY,EAAW,MAAM,OAAO,CAAC;AAC7C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AACzC,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAKtC,OAAO,EAAC,KAAK,EAAC,MAAM,WAAW,CAAC;AAChC,OAAO,EAAC,SAAS,EAAC,MAAM,SAAS,CAAC;AAGlC,MAAM,WAAW,UAAU,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,SAAS,CAAC,CAAC,CAAC;IACpE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wBAAwB,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IAClD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,OAAO,KAAK,SAmEvF,CAAC;AAEF,eAAO,MAAM,eAAe,cAAc,CAAC;AAC3C,eAAO,MAAM,WAAW,gBAAgB,CAAC;AAWzC,eAAO,MAAM,KAAK,oHA+FjB,CAAC"}
|
package/lib/Form/Input.js
CHANGED
|
@@ -54,6 +54,12 @@ const inputStyle = (theme, { markInvalid = false, placeholderTextTransform = 'no
|
|
|
54
54
|
fontSize: theme.fontSizes.base,
|
|
55
55
|
textTransform: placeholderTextTransform,
|
|
56
56
|
};
|
|
57
|
+
const defaultBoxShadow = `0 0 0 1px ${theme.Select.borderColor}`;
|
|
58
|
+
const hoverBoxShadow = `0 0 0 1px ${theme.Input.borderHover}`;
|
|
59
|
+
const activeBoxShadow = `0 0 0 1px ${theme.general.primaryColor}`;
|
|
60
|
+
// The autocomplete box shadow is used as a workaround for the autofill background color
|
|
61
|
+
// The value (24px) is hardcoded to match the input background
|
|
62
|
+
const autocompleteBoxShadow = `0 0 0 24px ${theme.Input.backgroundAutocomplete} inset`;
|
|
57
63
|
return {
|
|
58
64
|
'&::-moz-placeholder': {
|
|
59
65
|
...placeholderStyle,
|
|
@@ -66,20 +72,35 @@ const inputStyle = (theme, { markInvalid = false, placeholderTextTransform = 'no
|
|
|
66
72
|
...placeholderStyle,
|
|
67
73
|
},
|
|
68
74
|
'&:hover': {
|
|
69
|
-
boxShadow: !disabled &&
|
|
75
|
+
boxShadow: !disabled && hoverBoxShadow,
|
|
70
76
|
},
|
|
71
77
|
'&:focus-visible, &:focus, &:active': {
|
|
72
|
-
boxShadow:
|
|
78
|
+
boxShadow: activeBoxShadow,
|
|
73
79
|
},
|
|
74
80
|
'&:invalid:not(:focus, :hover)': !markInvalid
|
|
75
81
|
? {
|
|
76
|
-
boxShadow:
|
|
82
|
+
boxShadow: defaultBoxShadow,
|
|
77
83
|
}
|
|
78
84
|
: {},
|
|
85
|
+
'&:-webkit-autofill': {
|
|
86
|
+
boxShadow: `${defaultBoxShadow}, ${autocompleteBoxShadow}`,
|
|
87
|
+
'-webkit-text-fill-color': theme.general.color,
|
|
88
|
+
'&:hover': {
|
|
89
|
+
boxShadow: !disabled && `${hoverBoxShadow}, ${autocompleteBoxShadow}`,
|
|
90
|
+
},
|
|
91
|
+
'&:focus-visible, &:focus, &:active': {
|
|
92
|
+
boxShadow: `${activeBoxShadow}, ${autocompleteBoxShadow}`,
|
|
93
|
+
},
|
|
94
|
+
'&:invalid:not(:focus, :hover)': !markInvalid
|
|
95
|
+
? {
|
|
96
|
+
boxShadow: `${defaultBoxShadow}, ${autocompleteBoxShadow}`,
|
|
97
|
+
}
|
|
98
|
+
: {},
|
|
99
|
+
},
|
|
79
100
|
background: disabled ? theme.Input.backgroundColorDisabled : theme.Input.backgroundColor,
|
|
80
101
|
border: 'none',
|
|
81
102
|
borderRadius: '12px',
|
|
82
|
-
boxShadow: markInvalid ? `0 0 0 1px ${theme.general.dangerColor}` :
|
|
103
|
+
boxShadow: markInvalid ? `0 0 0 1px ${theme.general.dangerColor}` : defaultBoxShadow,
|
|
83
104
|
caretColor: theme.general.primaryColor,
|
|
84
105
|
color: theme.general.color,
|
|
85
106
|
fontWeight: 400,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalCssVariables.d.ts","sourceRoot":"","sources":["../../src/Theme/GlobalCssVariables.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;
|
|
1
|
+
{"version":3,"file":"GlobalCssVariables.d.ts","sourceRoot":"","sources":["../../src/Theme/GlobalCssVariables.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AA0HzC,eAAO,MAAM,kBAAkB;iBAtHZ,SAAS;gBAkDV,SAAS;wBAkDD,SAAS;CAsBlC,CAAC"}
|
|
@@ -50,6 +50,7 @@ const light = () => ({
|
|
|
50
50
|
'--text-input-placeholder': Identity_1.COLOR_V2.GRAY_70,
|
|
51
51
|
'--text-input-disabled': Identity_1.COLOR_V2.GRAY_20,
|
|
52
52
|
'--text-input-label': Identity_1.COLOR_V2.GRAY_80,
|
|
53
|
+
'--text-input-autocomplete-background': Identity_1.COLOR_V2.BLUE_LIGHT_50,
|
|
53
54
|
// Select
|
|
54
55
|
'--select-focused-description': Identity_1.COLOR_V2.WHITE,
|
|
55
56
|
// Range Input
|
|
@@ -91,6 +92,7 @@ const dark = () => ({
|
|
|
91
92
|
'--text-input-placeholder': Identity_1.COLOR_V2.GRAY_60,
|
|
92
93
|
'--text-input-disabled': Identity_1.COLOR_V2.GRAY_100,
|
|
93
94
|
'--text-input-label': Identity_1.COLOR_V2.GRAY_40,
|
|
95
|
+
'--text-input-autocomplete-background': Identity_1.COLOR_V2.BLUE_LIGHT_900,
|
|
94
96
|
// Select
|
|
95
97
|
'--select-focused-description': Identity_1.COLOR_V2.GRAY_40,
|
|
96
98
|
// Range Input
|
package/lib/Theme/Theme.d.ts
CHANGED
package/lib/Theme/Theme.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../src/Theme/Theme.tsx"],"names":[],"mappings":"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"}
|
package/lib/Theme/Theme.js
CHANGED
|
@@ -62,6 +62,7 @@ exports.themes = {
|
|
|
62
62
|
Input: {
|
|
63
63
|
backgroundColor: 'var(--text-input-background)',
|
|
64
64
|
backgroundColorDisabled: 'var(--text-input-disabled)',
|
|
65
|
+
backgroundAutocomplete: 'var(--text-input-autocomplete-background)',
|
|
65
66
|
labelColor: 'var(--text-input-label)',
|
|
66
67
|
placeholderColor: 'var(--text-input-placeholder)',
|
|
67
68
|
borderHover: 'var(--text-input-border-hover)',
|
|
@@ -137,6 +138,7 @@ exports.themes = {
|
|
|
137
138
|
Input: {
|
|
138
139
|
backgroundColor: colors_1.COLOR.WHITE,
|
|
139
140
|
backgroundColorDisabled: colors_v2_1.COLOR_V2.GRAY_20,
|
|
141
|
+
backgroundAutocomplete: colors_v2_1.COLOR_V2.BLUE_LIGHT_50,
|
|
140
142
|
placeholderColor: colors_1.COLOR.GRAY_DARKEN_24,
|
|
141
143
|
labelColor: colors_v2_1.COLOR_V2.GRAY_80,
|
|
142
144
|
borderHover: 'var(--text-input-border-hover)',
|
|
@@ -212,6 +214,7 @@ exports.themes = {
|
|
|
212
214
|
Input: {
|
|
213
215
|
backgroundColor: colors_1.COLOR.BLACK_LIGHTEN_24,
|
|
214
216
|
backgroundColorDisabled: colors_1.COLOR.GRAY_100,
|
|
217
|
+
backgroundAutocomplete: colors_v2_1.COLOR_V2.BLUE_LIGHT_900,
|
|
215
218
|
placeholderColor: colors_1.COLOR.GRAY_LIGHTEN_88,
|
|
216
219
|
labelColor: colors_v2_1.COLOR_V2.GRAY_40,
|
|
217
220
|
borderHover: 'var(--text-input-border-hover)',
|
package/package.json
CHANGED