@wireapp/react-ui-kit 9.2.1 → 9.2.2
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/IndicatorRangeInput.d.ts.map +1 -1
- package/lib/Form/IndicatorRangeInput.js +1 -1
- package/lib/Form/IndicatorRangeInput.styles.js +2 -2
- package/lib/Theme/GlobalCssVariables.d.ts.map +1 -1
- package/lib/Theme/GlobalCssVariables.js +12 -5
- package/lib/Theme/Theme.d.ts +4 -0
- package/lib/Theme/Theme.d.ts.map +1 -1
- package/lib/Theme/Theme.js +44 -32
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IndicatorRangeInput.d.ts","sourceRoot":"","sources":["../../src/Form/IndicatorRangeInput.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,EAAE,EAAE,SAAS,EAAE,YAAY,EAAsB,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAOzC,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,wBAAwB,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAChG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,eAAe,EAAE,CAAC;CACpC;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,
|
|
1
|
+
{"version":3,"file":"IndicatorRangeInput.d.ts","sourceRoot":"","sources":["../../src/Form/IndicatorRangeInput.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAC,EAAE,EAAE,SAAS,EAAE,YAAY,EAAsB,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAOzC,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,WAAW,wBAAwB,CAAC,CAAC,GAAG,gBAAgB,CAAE,SAAQ,YAAY,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAChG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,eAAe,EAAE,CAAC;CACpC;AAED,eAAO,MAAM,mBAAmB,EAAE,EAAE,CAAC,wBAAwB,CAsG5D,CAAC"}
|
|
@@ -52,7 +52,7 @@ exports.IndicatorRangeInput = (0, react_1.forwardRef)((_a, ref) => {
|
|
|
52
52
|
const valueText = ((_b = dataListOptions[valueNum]) === null || _b === void 0 ? void 0 : _b.heading)
|
|
53
53
|
? `${dataListOptions[valueNum].label} (${dataListOptions[valueNum].heading})`
|
|
54
54
|
: dataListOptions[valueNum].label;
|
|
55
|
-
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { wrapperCSS, width: '100%' } }, { children: [label && (0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, Object.assign({ htmlFor: id }, { children: label })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: IndicatorRangeInput_styles_1.containerStyles }, { children: [isCustomSlider && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { position: 'relative', display: 'flex', marginBottom: '20px' } }, { children: dataListOptions.map((dataListOption, index) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: (theme) => (0, IndicatorRangeInput_styles_1.headingStyle)(listLength, theme), onClick: () => {
|
|
55
|
+
return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: { wrapperCSS, width: '100%' } }, { children: [label && ((0, jsx_runtime_1.jsx)(InputLabel_1.InputLabel, Object.assign({ css: (theme) => ({ fontSize: theme.fontSizes.base }), htmlFor: id }, { children: label }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({ css: IndicatorRangeInput_styles_1.containerStyles }, { children: [isCustomSlider && ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: { position: 'relative', display: 'flex', marginBottom: '20px' } }, { children: dataListOptions.map((dataListOption, index) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ css: (theme) => (0, IndicatorRangeInput_styles_1.headingStyle)(listLength, theme), onClick: () => {
|
|
56
56
|
if (dataListOption === null || dataListOption === void 0 ? void 0 : dataListOption.heading) {
|
|
57
57
|
onOptionClick(index);
|
|
58
58
|
}
|
|
@@ -27,7 +27,7 @@ const rangeStyles = (backgroundSize, value, listLength, isCustomSlider, theme) =
|
|
|
27
27
|
const lastOptionThumbPosition = `calc(((100% - 12px) / (${listLength} * 2) - 6px) / 2)`;
|
|
28
28
|
const isFirstOption = value === 0;
|
|
29
29
|
const isLastOption = value === listLength;
|
|
30
|
-
return Object.assign(Object.assign({ appearance: 'none', width: '100%', height: '8px', backgroundImage: `linear-gradient(${theme.general.primaryColor}, ${theme.general.primaryColor})`, backgroundColor: theme.
|
|
30
|
+
return Object.assign(Object.assign({ appearance: 'none', width: '100%', height: '8px', backgroundImage: `linear-gradient(${theme.general.primaryColor}, ${theme.general.primaryColor})`, backgroundColor: theme.IndicatorRangeInput.trackBg, backgroundSize: backgroundSize || '0% 100%', backgroundRepeat: 'no-repeat', display: 'flex', alignItems: 'center', borderRadius: '8px', marginBlock: '10px', zIndex: '1', position: 'relative' }, (0, util_1.manySelectors)(thumbSelectors, Object.assign(Object.assign({ '-webkit-appearance': 'none', height: '28px', width: '10px', borderRadius: '4px', background: theme.IndicatorRangeInput.thumb, cursor: 'pointer', border: 'none', boxShadow: '0px 2px 2px rgba(0, 0, 0, 0.25);', position: 'relative', top: '-9px', zIndex: '2' }, (isCustomSlider && isFirstOption && { left: firstOptionThumbPosition })), (isCustomSlider && isLastOption && { right: lastOptionThumbPosition })))), (0, util_1.manySelectors)(sliderSelectors, {
|
|
31
31
|
'-webkit-appearance': 'none',
|
|
32
32
|
boxShadow: 'none',
|
|
33
33
|
background: 'transparent',
|
|
@@ -82,7 +82,7 @@ const dataListOption = (listLength, theme) => {
|
|
|
82
82
|
'&::before': {
|
|
83
83
|
content: '""',
|
|
84
84
|
position: 'absolute',
|
|
85
|
-
borderLeft: `2px solid ${theme.
|
|
85
|
+
borderLeft: `2px solid ${theme.IndicatorRangeInput.trackBg}`,
|
|
86
86
|
width: '2px',
|
|
87
87
|
height: '27px',
|
|
88
88
|
top: '-37px',
|
|
@@ -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;AAsHzC,eAAO,MAAM,kBAAkB;iBAlHZ,SAAS;gBAgDV,SAAS;wBAgDD,SAAS;CAsBlC,CAAC"}
|
|
@@ -52,6 +52,9 @@ const light = () => ({
|
|
|
52
52
|
'--text-input-label': Identity_1.COLOR_V2.GRAY_80,
|
|
53
53
|
// Select
|
|
54
54
|
'--select-focused-description': Identity_1.COLOR_V2.WHITE,
|
|
55
|
+
// Range Input
|
|
56
|
+
'--indicator-range-input-thumb': Identity_1.COLOR_V2.BLUE_LIGHT_700,
|
|
57
|
+
'--indicator-range-input-track-bg': Identity_1.COLOR_V2.GRAY_60,
|
|
55
58
|
// General
|
|
56
59
|
'--danger-color': Identity_1.COLOR_V2.RED_LIGHT_500,
|
|
57
60
|
'--app-bg': Identity_1.COLOR_V2.GRAY_10,
|
|
@@ -89,6 +92,9 @@ const dark = () => ({
|
|
|
89
92
|
'--text-input-label': Identity_1.COLOR_V2.GRAY_40,
|
|
90
93
|
// Select
|
|
91
94
|
'--select-focused-description': Identity_1.COLOR_V2.GRAY_40,
|
|
95
|
+
// Range Input
|
|
96
|
+
'--indicator-range-input-thumb': Identity_1.COLOR_V2.BLUE_DARK_300,
|
|
97
|
+
'--indicator-range-input-track-bg': Identity_1.COLOR_V2.GRAY_70,
|
|
92
98
|
// General
|
|
93
99
|
'--danger-color': Identity_1.COLOR_V2.RED_DARK_500,
|
|
94
100
|
'--app-bg': Identity_1.COLOR_V2.GRAY_95,
|
|
@@ -100,15 +106,16 @@ const accentColors = () => ({
|
|
|
100
106
|
'--accent-color-highlight-inversed': Identity_1.COLOR_V2.BLUE_LIGHT_800,
|
|
101
107
|
'--accent-color-border': Identity_1.COLOR_V2.BLUE_LIGHT_500,
|
|
102
108
|
'--accent-color-focus': Identity_1.COLOR_V2.BLUE_LIGHT_400,
|
|
103
|
-
'--icon-primary-active-fill': Identity_1.COLOR_V2.BLUE_LIGHT_500,
|
|
104
|
-
'--icon-secondary-active-border': 'transparent',
|
|
105
109
|
'--button-primary-hover': Identity_1.COLOR_V2.BLUE_LIGHT_600,
|
|
106
110
|
'--button-primary-active': Identity_1.COLOR_V2.BLUE_LIGHT_700,
|
|
107
111
|
'--button-primary-active-border': Identity_1.COLOR_V2.BLUE_LIGHT_700,
|
|
108
112
|
'--button-primary-focus-border': Identity_1.COLOR_V2.BLUE_LIGHT_700,
|
|
109
|
-
'--button-secondary-active-bg
|
|
110
|
-
'--button-secondary-active-border
|
|
111
|
-
'--button-secondary-hover-border
|
|
113
|
+
'--button-secondary-active-bg': Identity_1.COLOR_V2.BLUE_LIGHT_50,
|
|
114
|
+
'--button-secondary-active-border': Identity_1.COLOR_V2.BLUE_LIGHT_500,
|
|
115
|
+
'--button-secondary-hover-border': Identity_1.COLOR_V2.BLUE_LIGHT_500,
|
|
116
|
+
'--icon-primary-active-fill': Identity_1.COLOR_V2.BLUE_LIGHT_500,
|
|
117
|
+
'--icon-secondary-active-border': 'transparent',
|
|
118
|
+
'--indicator-range-input-thumb': Identity_1.COLOR_V2.BLUE_LIGHT_700,
|
|
112
119
|
});
|
|
113
120
|
exports.GlobalCssVariables = {
|
|
114
121
|
light,
|
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":"AAmBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAwC,KAAK,IAAI,MAAM,EAAC,MAAM,gBAAgB,CAAC;AAOtF,oBAAY,QAAQ;IAClB,IAAI,eAAe;IACnB,KAAK,gBAAgB;IACrB,OAAO,kBAAkB;CAC1B;AAED,MAAM,WAAW,KAAM,SAAQ,MAAM;IACnC,SAAS,EAAE;QACT,UAAU,EAAE,MAAM,CAAC;QACnB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,MAAM,CAAC,EAAE;QACP,SAAS,EAAE,MAAM,CAAC;QAClB,cAAc,EAAE,MAAM,CAAC;QACvB,eAAe,EAAE,MAAM,CAAC;QACxB,mBAAmB,EAAE,MAAM,CAAC;QAC5B,kBAAkB,EAAE,MAAM,CAAC;QAC3B,iBAAiB,EAAE,MAAM,CAAC;QAC1B,mBAAmB,EAAE,MAAM,CAAC;QAC5B,iBAAiB,EAAE,MAAM,CAAC;QAC1B,qBAAqB,EAAE,MAAM,CAAC;QAC9B,oBAAoB,EAAE,MAAM,CAAC;QAC7B,UAAU,EAAE,MAAM,CAAC;QACnB,cAAc,EAAE,MAAM,CAAC;QACvB,eAAe,EAAE,MAAM,CAAC;QACxB,mBAAmB,EAAE,MAAM,CAAC;QAC5B,kBAAkB,EAAE,MAAM,CAAC;QAC3B,sBAAsB,EAAE,MAAM,CAAC;QAC/B,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;IACF,UAAU,EAAE;QACV,oBAAoB,EAAE,MAAM,CAAC;QAC7B,gBAAgB,EAAE,MAAM,CAAC;QACzB,mBAAmB,EAAE,MAAM,CAAC;QAC5B,sBAAsB,EAAE,MAAM,CAAC;QAC/B,cAAc,EAAE,MAAM,CAAC;QACvB,kBAAkB,EAAE,MAAM,CAAC;QAC3B,sBAAsB,EAAE,MAAM,CAAC;QAC/B,0BAA0B,EAAE,MAAM,CAAC;QACnC,uBAAuB,EAAE,MAAM,CAAC;QAChC,0BAA0B,EAAE,MAAM,CAAC;KACpC,CAAC;IACF,QAAQ,EAAE;QACR,UAAU,EAAE,MAAM,CAAC;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,aAAa,EAAE,MAAM,CAAC;QACtB,cAAc,EAAE,MAAM,CAAC;QACvB,kBAAkB,EAAE,MAAM,CAAC;QAC3B,qBAAqB,EAAE,MAAM,CAAC;QAC9B,kBAAkB,EAAE,MAAM,CAAC;KAC5B,CAAC;IACF,OAAO,EAAE;QACP,eAAe,EAAE,MAAM,CAAC;QACxB,KAAK,EAAE,MAAM,CAAC;QACd,aAAa,EAAE,MAAM,CAAC;QACtB,WAAW,EAAE,MAAM,CAAC;QACpB,UAAU,EAAE,MAAM,CAAC;QACnB,YAAY,EAAE,MAAM,CAAC;KACtB,CAAC;IACF,KAAK,EAAE;QACL,eAAe,EAAE,MAAM,CAAC;QACxB,uBAAuB,EAAE,MAAM,CAAC;QAChC,gBAAgB,EAAE,MAAM,CAAC;QACzB,UAAU,EAAE,MAAM,CAAC;QACnB,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,MAAM,EAAE;QACN,aAAa,EAAE,MAAM,CAAC;QACtB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,WAAW,EAAE,MAAM,CAAC;QACpB,uBAAuB,EAAE,MAAM,CAAC;QAChC,aAAa,EAAE,MAAM,CAAC;QACtB,gBAAgB,EAAE,MAAM,CAAC;KAC1B,CAAC;CACH;AAED,eAAO,MAAM,MAAM,EAAE;KAAE,OAAO,IAAI,QAAQ,GAAG,KAAK;
|
|
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
|
@@ -55,6 +55,10 @@ exports.themes = {
|
|
|
55
55
|
primaryHoverBorderColor: 'var(--icon-button-primary-hover-border)',
|
|
56
56
|
secondaryActiveBorderColor: 'var(--icon-secondary-active-border)',
|
|
57
57
|
},
|
|
58
|
+
IndicatorRangeInput: {
|
|
59
|
+
thumb: 'var(--indicator-range-input-thumb)',
|
|
60
|
+
trackBg: 'var(--indicator-range-input-track-bg)',
|
|
61
|
+
},
|
|
58
62
|
Input: {
|
|
59
63
|
backgroundColor: 'var(--text-input-background)',
|
|
60
64
|
backgroundColorDisabled: 'var(--text-input-disabled)',
|
|
@@ -100,6 +104,15 @@ exports.themes = {
|
|
|
100
104
|
tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',
|
|
101
105
|
tertiaryActiveBg: 'var(--accent-color-highlight)',
|
|
102
106
|
},
|
|
107
|
+
Checkbox: {
|
|
108
|
+
background: colors_v2_1.COLOR_V2.GRAY_20,
|
|
109
|
+
border: colors_v2_1.COLOR_V2.GRAY_80,
|
|
110
|
+
borderFocused: colors_v2_1.BASE_LIGHT_COLOR.BLUE,
|
|
111
|
+
disableBgColor: colors_v2_1.COLOR_V2.GRAY_20,
|
|
112
|
+
disableBorderColor: colors_v2_1.COLOR_V2.GRAY_60,
|
|
113
|
+
disablecheckedBgColor: colors_v2_1.COLOR_V2.GRAY_20,
|
|
114
|
+
invalidBorderColor: colors_v2_1.BASE_LIGHT_COLOR.RED,
|
|
115
|
+
},
|
|
103
116
|
IconButton: {
|
|
104
117
|
activePrimaryBgColor: colors_v2_1.COLOR_V2.BLUE_LIGHT_50,
|
|
105
118
|
focusBorderColor: colors_v2_1.COLOR_V2.BLUE_LIGHT_500,
|
|
@@ -112,6 +125,10 @@ exports.themes = {
|
|
|
112
125
|
primaryHoverBorderColor: colors_v2_1.COLOR_V2.GRAY_50,
|
|
113
126
|
secondaryActiveBorderColor: 'transparent',
|
|
114
127
|
},
|
|
128
|
+
IndicatorRangeInput: {
|
|
129
|
+
thumb: 'var(--indicator-range-input-thumb)',
|
|
130
|
+
trackBg: 'var(--indicator-range-input-track-bg)',
|
|
131
|
+
},
|
|
115
132
|
Input: {
|
|
116
133
|
backgroundColor: colors_1.COLOR.WHITE,
|
|
117
134
|
backgroundColorDisabled: colors_v2_1.COLOR_V2.GRAY_20,
|
|
@@ -119,14 +136,6 @@ exports.themes = {
|
|
|
119
136
|
labelColor: colors_v2_1.COLOR_V2.GRAY_80,
|
|
120
137
|
borderHover: 'var(--text-input-border-hover)',
|
|
121
138
|
},
|
|
122
|
-
general: {
|
|
123
|
-
backgroundColor: colors_v2_1.COLOR_V2.GRAY_20,
|
|
124
|
-
color: colors_1.COLOR.TEXT,
|
|
125
|
-
primaryColor: colors_v2_1.COLOR_V2.BLUE,
|
|
126
|
-
dangerColor: colors_v2_1.COLOR_V2.RED,
|
|
127
|
-
contrastColor: 'var(--text-input-background)',
|
|
128
|
-
focusColor: 'var(--accent-color-focus)',
|
|
129
|
-
},
|
|
130
139
|
Select: {
|
|
131
140
|
disabledColor: colors_v2_1.COLOR_V2.GRAY_70,
|
|
132
141
|
contrastTextColor: colors_1.COLOR.WHITE,
|
|
@@ -135,14 +144,13 @@ exports.themes = {
|
|
|
135
144
|
optionHoverBg: 'var(--accent-color-highlight)',
|
|
136
145
|
selectedActiveBg: 'var(--button-primary-hover)',
|
|
137
146
|
},
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
invalidBorderColor: colors_v2_1.BASE_LIGHT_COLOR.RED,
|
|
147
|
+
general: {
|
|
148
|
+
backgroundColor: colors_v2_1.COLOR_V2.GRAY_20,
|
|
149
|
+
color: colors_1.COLOR.TEXT,
|
|
150
|
+
primaryColor: colors_v2_1.COLOR_V2.BLUE,
|
|
151
|
+
dangerColor: colors_v2_1.COLOR_V2.RED,
|
|
152
|
+
contrastColor: 'var(--text-input-background)',
|
|
153
|
+
focusColor: 'var(--accent-color-focus)',
|
|
146
154
|
},
|
|
147
155
|
},
|
|
148
156
|
[THEME_ID.DARK]: {
|
|
@@ -166,6 +174,15 @@ exports.themes = {
|
|
|
166
174
|
tertiaryDisabledBorder: 'var(--button-tertiary-disabled-border)',
|
|
167
175
|
tertiaryActiveBg: 'var(--accent-color-highlight)',
|
|
168
176
|
},
|
|
177
|
+
Checkbox: {
|
|
178
|
+
background: colors_v2_1.COLOR_V2.GRAY_20,
|
|
179
|
+
border: colors_v2_1.COLOR_V2.GRAY_60,
|
|
180
|
+
borderFocused: colors_v2_1.BASE_DARK_COLOR.BLUE,
|
|
181
|
+
disableBgColor: colors_v2_1.COLOR_V2.GRAY_10,
|
|
182
|
+
disableBorderColor: colors_v2_1.COLOR_V2.GRAY_70,
|
|
183
|
+
disablecheckedBgColor: colors_v2_1.COLOR_V2.GRAY_60,
|
|
184
|
+
invalidBorderColor: colors_v2_1.BASE_DARK_COLOR.RED,
|
|
185
|
+
},
|
|
169
186
|
IconButton: {
|
|
170
187
|
activePrimaryBgColor: colors_v2_1.COLOR_V2.BLUE_DARK_800,
|
|
171
188
|
focusBorderColor: colors_v2_1.COLOR_V2.BLUE_DARK_600,
|
|
@@ -178,6 +195,10 @@ exports.themes = {
|
|
|
178
195
|
primaryHoverBorderColor: colors_v2_1.COLOR_V2.GRAY_70,
|
|
179
196
|
secondaryActiveBorderColor: colors_v2_1.COLOR_V2.BLUE_DARK_800,
|
|
180
197
|
},
|
|
198
|
+
IndicatorRangeInput: {
|
|
199
|
+
thumb: 'var(--indicator-range-input-thumb)',
|
|
200
|
+
trackBg: 'var(--indicator-range-input-track-bg)',
|
|
201
|
+
},
|
|
181
202
|
Input: {
|
|
182
203
|
backgroundColor: colors_1.COLOR.BLACK_LIGHTEN_24,
|
|
183
204
|
backgroundColorDisabled: colors_1.COLOR.GRAY_100,
|
|
@@ -185,14 +206,6 @@ exports.themes = {
|
|
|
185
206
|
labelColor: colors_v2_1.COLOR_V2.GRAY_40,
|
|
186
207
|
borderHover: 'var(--text-input-border-hover)',
|
|
187
208
|
},
|
|
188
|
-
general: {
|
|
189
|
-
backgroundColor: colors_1.COLOR.BLACK,
|
|
190
|
-
color: colors_1.COLOR.WHITE,
|
|
191
|
-
primaryColor: colors_v2_1.COLOR_V2.BLUE,
|
|
192
|
-
dangerColor: colors_v2_1.COLOR_V2.RED,
|
|
193
|
-
contrastColor: 'var(--text-input-background)',
|
|
194
|
-
focusColor: 'var(--accent-color-focus)',
|
|
195
|
-
},
|
|
196
209
|
Select: {
|
|
197
210
|
disabledColor: colors_v2_1.COLOR_V2.GRAY_60,
|
|
198
211
|
contrastTextColor: colors_1.COLOR.BLACK,
|
|
@@ -201,14 +214,13 @@ exports.themes = {
|
|
|
201
214
|
optionHoverBg: 'var(--accent-color-highlight)',
|
|
202
215
|
selectedActiveBg: 'var(--button-primary-active)',
|
|
203
216
|
},
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
invalidBorderColor: colors_v2_1.BASE_DARK_COLOR.RED,
|
|
217
|
+
general: {
|
|
218
|
+
backgroundColor: colors_1.COLOR.BLACK,
|
|
219
|
+
color: colors_1.COLOR.WHITE,
|
|
220
|
+
primaryColor: colors_v2_1.COLOR_V2.BLUE,
|
|
221
|
+
dangerColor: colors_v2_1.COLOR_V2.RED,
|
|
222
|
+
contrastColor: 'var(--text-input-background)',
|
|
223
|
+
focusColor: 'var(--accent-color-focus)',
|
|
212
224
|
},
|
|
213
225
|
},
|
|
214
226
|
};
|
package/package.json
CHANGED