@rebilly/instruments 3.0.1-beta.0 → 3.1.0-beta.0
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/dist/i18n/index.js +1 -1
- package/dist/style/base/__snapshots__/theme.spec.js.snap +32 -0
- package/dist/style/base/default-theme.js +106 -1
- package/dist/style/components/button.js +17 -1
- package/package.json +1 -1
- package/src/i18n/index.js +1 -1
- package/src/style/base/__snapshots__/theme.spec.js.snap +32 -0
- package/src/style/base/default-theme.js +105 -2
- package/src/style/components/button.js +17 -1
package/dist/i18n/index.js
CHANGED
|
@@ -23,7 +23,7 @@ class Translate {
|
|
|
23
23
|
init(locale, messages) {
|
|
24
24
|
this.items = document.querySelectorAll('[data-rebilly-i18n]');
|
|
25
25
|
this.locale = this.getLocale(locale);
|
|
26
|
-
this.languages = (0, _lodash.default)({ ..._en.default,
|
|
26
|
+
this.languages = (0, _lodash.default)({}, { ..._en.default,
|
|
27
27
|
..._es.default
|
|
28
28
|
}, messages);
|
|
29
29
|
}
|
|
@@ -3,7 +3,15 @@
|
|
|
3
3
|
exports[`RebillyInstruments theme builds the theme object 1`] = `
|
|
4
4
|
Object {
|
|
5
5
|
"borderRadius": "4px",
|
|
6
|
+
"buttonActiveBorder": "var(--rebilly-buttonHoverBorder)",
|
|
7
|
+
"buttonActiveBorderRadius": "var(--rebilly-buttonHoverBorderRadius)",
|
|
8
|
+
"buttonActiveBoxShadow": "var(--rebilly-buttonHoverBoxShadow)",
|
|
6
9
|
"buttonActiveColorBackground": "var(--rebilly-buttonHoverColorBackground)",
|
|
10
|
+
"buttonActiveColorText": "var(--rebilly-buttonHoverColorText)",
|
|
11
|
+
"buttonActiveFontFamily": "var(--rebilly-buttonHoverFontFamily)",
|
|
12
|
+
"buttonActiveFontLineHeight": "var(--rebilly-buttonHoverFontLineHeight)",
|
|
13
|
+
"buttonActiveFontSize": "var(--rebilly-buttonHoverFontSize)",
|
|
14
|
+
"buttonActiveFontWeight": "var(--rebilly-buttonHoverFontWeight)",
|
|
7
15
|
"buttonBorder": "1px solid transparent",
|
|
8
16
|
"buttonBorderRadius": "var(--rebilly-borderRadius)",
|
|
9
17
|
"buttonBoxShadow": "none",
|
|
@@ -13,7 +21,15 @@ Object {
|
|
|
13
21
|
"buttonFontLineHeight": "1.5",
|
|
14
22
|
"buttonFontSize": "var(--rebilly-fontSizeBase)",
|
|
15
23
|
"buttonFontWeight": "var(--rebilly-fontWeightBase)",
|
|
24
|
+
"buttonHoverBorder": "1px solid #0036aa",
|
|
25
|
+
"buttonHoverBorderRadius": "var(--rebilly-buttonBorderRadius)",
|
|
26
|
+
"buttonHoverBoxShadow": "var(--rebilly-buttonBoxShadow)",
|
|
16
27
|
"buttonHoverColorBackground": "#0036aa",
|
|
28
|
+
"buttonHoverColorText": "var(--rebilly-buttonColorText)",
|
|
29
|
+
"buttonHoverFontFamily": "var(--rebilly-buttonFontFamily)",
|
|
30
|
+
"buttonHoverFontLineHeight": "var(--rebilly-buttonFontLineHeight)",
|
|
31
|
+
"buttonHoverFontSize": "var(--rebilly-buttonFontSize)",
|
|
32
|
+
"buttonHoverFontWeight": "var(--rebilly-buttonFontWeight)",
|
|
17
33
|
"colorBackground": "#FFFFFF",
|
|
18
34
|
"colorDanger": "#CD5C5C",
|
|
19
35
|
"colorMutedBorder": "rgba(13, 43, 62, 0.25)",
|
|
@@ -45,7 +61,23 @@ Object {
|
|
|
45
61
|
--rebilly-buttonBorderRadius: var(--rebilly-borderRadius);
|
|
46
62
|
--rebilly-buttonBoxShadow: none;
|
|
47
63
|
--rebilly-buttonHoverColorBackground: #0036aa;
|
|
64
|
+
--rebilly-buttonHoverColorText: var(--rebilly-buttonColorText);
|
|
65
|
+
--rebilly-buttonHoverFontFamily: var(--rebilly-buttonFontFamily);
|
|
66
|
+
--rebilly-buttonHoverFontSize: var(--rebilly-buttonFontSize);
|
|
67
|
+
--rebilly-buttonHoverFontLineHeight: var(--rebilly-buttonFontLineHeight);
|
|
68
|
+
--rebilly-buttonHoverFontWeight: var(--rebilly-buttonFontWeight);
|
|
69
|
+
--rebilly-buttonHoverBorder: 1px solid #0036aa;
|
|
70
|
+
--rebilly-buttonHoverBorderRadius: var(--rebilly-buttonBorderRadius);
|
|
71
|
+
--rebilly-buttonHoverBoxShadow: var(--rebilly-buttonBoxShadow);
|
|
48
72
|
--rebilly-buttonActiveColorBackground: var(--rebilly-buttonHoverColorBackground);
|
|
73
|
+
--rebilly-buttonActiveColorText: var(--rebilly-buttonHoverColorText);
|
|
74
|
+
--rebilly-buttonActiveFontFamily: var(--rebilly-buttonHoverFontFamily);
|
|
75
|
+
--rebilly-buttonActiveFontSize: var(--rebilly-buttonHoverFontSize);
|
|
76
|
+
--rebilly-buttonActiveFontLineHeight: var(--rebilly-buttonHoverFontLineHeight);
|
|
77
|
+
--rebilly-buttonActiveFontWeight: var(--rebilly-buttonHoverFontWeight);
|
|
78
|
+
--rebilly-buttonActiveBorder: var(--rebilly-buttonHoverBorder);
|
|
79
|
+
--rebilly-buttonActiveBorderRadius: var(--rebilly-buttonHoverBorderRadius);
|
|
80
|
+
--rebilly-buttonActiveBoxShadow: var(--rebilly-buttonHoverBoxShadow);
|
|
49
81
|
--rebilly-inputColorBackground: transparent;
|
|
50
82
|
--rebilly-inputColorText: var(--rebilly-colorText);
|
|
51
83
|
--rebilly-inputFontFamily: var(--rebilly-fontFamily);
|
|
@@ -166,7 +166,7 @@ const properties = {
|
|
|
166
166
|
}
|
|
167
167
|
},
|
|
168
168
|
|
|
169
|
-
/** Buttons:
|
|
169
|
+
/** Buttons: Hover */
|
|
170
170
|
buttonHoverColorBackground: {
|
|
171
171
|
fallback: {
|
|
172
172
|
type: 'func',
|
|
@@ -179,12 +179,117 @@ const properties = {
|
|
|
179
179
|
}
|
|
180
180
|
}
|
|
181
181
|
},
|
|
182
|
+
buttonHoverColorText: {
|
|
183
|
+
fallback: {
|
|
184
|
+
type: 'variable',
|
|
185
|
+
value: 'buttonColorText'
|
|
186
|
+
}
|
|
187
|
+
},
|
|
188
|
+
buttonHoverFontFamily: {
|
|
189
|
+
fallback: {
|
|
190
|
+
type: 'variable',
|
|
191
|
+
value: 'buttonFontFamily'
|
|
192
|
+
}
|
|
193
|
+
},
|
|
194
|
+
buttonHoverFontSize: {
|
|
195
|
+
fallback: {
|
|
196
|
+
type: 'variable',
|
|
197
|
+
value: 'buttonFontSize'
|
|
198
|
+
}
|
|
199
|
+
},
|
|
200
|
+
buttonHoverFontLineHeight: {
|
|
201
|
+
fallback: {
|
|
202
|
+
type: 'variable',
|
|
203
|
+
value: 'buttonFontLineHeight'
|
|
204
|
+
}
|
|
205
|
+
},
|
|
206
|
+
buttonHoverFontWeight: {
|
|
207
|
+
fallback: {
|
|
208
|
+
type: 'variable',
|
|
209
|
+
value: 'buttonFontWeight'
|
|
210
|
+
}
|
|
211
|
+
},
|
|
212
|
+
buttonHoverBorder: {
|
|
213
|
+
fallback: {
|
|
214
|
+
type: 'func',
|
|
215
|
+
value: theme => {
|
|
216
|
+
if (theme.buttonBorderProvided) {
|
|
217
|
+
return theme.buttonBorder;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
const buttonBorder = new _border.default(theme.buttonBorder);
|
|
221
|
+
return buttonBorder.updateColor(theme.buttonHoverColorBackground).value;
|
|
222
|
+
}
|
|
223
|
+
}
|
|
224
|
+
},
|
|
225
|
+
buttonHoverBorderRadius: {
|
|
226
|
+
fallback: {
|
|
227
|
+
type: 'variable',
|
|
228
|
+
value: 'buttonBorderRadius'
|
|
229
|
+
}
|
|
230
|
+
},
|
|
231
|
+
buttonHoverBoxShadow: {
|
|
232
|
+
fallback: {
|
|
233
|
+
type: 'variable',
|
|
234
|
+
value: 'buttonBoxShadow'
|
|
235
|
+
}
|
|
236
|
+
},
|
|
237
|
+
|
|
238
|
+
/** Buttons: Active */
|
|
182
239
|
buttonActiveColorBackground: {
|
|
183
240
|
fallback: {
|
|
184
241
|
type: 'variable',
|
|
185
242
|
value: 'buttonHoverColorBackground'
|
|
186
243
|
}
|
|
187
244
|
},
|
|
245
|
+
buttonActiveColorText: {
|
|
246
|
+
fallback: {
|
|
247
|
+
type: 'variable',
|
|
248
|
+
value: 'buttonHoverColorText'
|
|
249
|
+
}
|
|
250
|
+
},
|
|
251
|
+
buttonActiveFontFamily: {
|
|
252
|
+
fallback: {
|
|
253
|
+
type: 'variable',
|
|
254
|
+
value: 'buttonHoverFontFamily'
|
|
255
|
+
}
|
|
256
|
+
},
|
|
257
|
+
buttonActiveFontSize: {
|
|
258
|
+
fallback: {
|
|
259
|
+
type: 'variable',
|
|
260
|
+
value: 'buttonHoverFontSize'
|
|
261
|
+
}
|
|
262
|
+
},
|
|
263
|
+
buttonActiveFontLineHeight: {
|
|
264
|
+
fallback: {
|
|
265
|
+
type: 'variable',
|
|
266
|
+
value: 'buttonHoverFontLineHeight'
|
|
267
|
+
}
|
|
268
|
+
},
|
|
269
|
+
buttonActiveFontWeight: {
|
|
270
|
+
fallback: {
|
|
271
|
+
type: 'variable',
|
|
272
|
+
value: 'buttonHoverFontWeight'
|
|
273
|
+
}
|
|
274
|
+
},
|
|
275
|
+
buttonActiveBorder: {
|
|
276
|
+
fallback: {
|
|
277
|
+
type: 'variable',
|
|
278
|
+
value: 'buttonHoverBorder'
|
|
279
|
+
}
|
|
280
|
+
},
|
|
281
|
+
buttonActiveBorderRadius: {
|
|
282
|
+
fallback: {
|
|
283
|
+
type: 'variable',
|
|
284
|
+
value: 'buttonHoverBorderRadius'
|
|
285
|
+
}
|
|
286
|
+
},
|
|
287
|
+
buttonActiveBoxShadow: {
|
|
288
|
+
fallback: {
|
|
289
|
+
type: 'variable',
|
|
290
|
+
value: 'buttonHoverBoxShadow'
|
|
291
|
+
}
|
|
292
|
+
},
|
|
188
293
|
|
|
189
294
|
/** Inputs: Base */
|
|
190
295
|
inputColorBackground: {
|
|
@@ -19,7 +19,7 @@ const button = () => `
|
|
|
19
19
|
padding: var(--rebilly-spacings-button-py) var(--rebilly-spacings-button-px);
|
|
20
20
|
box-sizing: border-box;
|
|
21
21
|
background: var(--rebilly-buttonColorBackground);
|
|
22
|
-
color: var(--rebilly-buttonColorText
|
|
22
|
+
color: var(--rebilly-buttonColorText);
|
|
23
23
|
border-radius: var(--rebilly-buttonBorderRadius);
|
|
24
24
|
font-weight: var(--rebilly-buttonFontWeight);
|
|
25
25
|
border: var(--rebilly-buttonBorder);
|
|
@@ -34,10 +34,26 @@ const button = () => `
|
|
|
34
34
|
|
|
35
35
|
.rebilly-instruments-button:not([disabled]):hover {
|
|
36
36
|
background: var(--rebilly-buttonHoverColorBackground);
|
|
37
|
+
color: var(--rebilly-buttonHoverColorText);
|
|
38
|
+
font-family: var(--rebilly-buttonHoverFontFamily);
|
|
39
|
+
font-size: var(--rebilly-buttonHoverFontSize);
|
|
40
|
+
line-height: var(--rebilly-buttonHoverFontLineHeight);
|
|
41
|
+
font-weight: var(--rebilly-buttonHoverFontWeight);
|
|
42
|
+
border: var(--rebilly-buttonHoverBorder);
|
|
43
|
+
border-radius: var(--rebilly-buttonHoverBorderRadius);
|
|
44
|
+
box-shadow: var(--rebilly-buttonHoverBoxShadow);
|
|
37
45
|
}
|
|
38
46
|
|
|
39
47
|
.rebilly-instruments-button:not([disabled]):active {
|
|
40
48
|
background: var(--rebilly-buttonActiveColorBackground);
|
|
49
|
+
color: var(--rebilly-buttonActiveColorText);
|
|
50
|
+
font-family: var(--rebilly-buttonActiveFontFamily);
|
|
51
|
+
font-size: var(--rebilly-buttonActiveFontSize);
|
|
52
|
+
line-height: var(--rebilly-buttonActiveFontLineHeight);
|
|
53
|
+
font-weight: var(--rebilly-buttonActiveFontWeight);
|
|
54
|
+
border: var(--rebilly-buttonActiveBorder);
|
|
55
|
+
border-radius: var(--rebilly-buttonActiveBorderRadius);
|
|
56
|
+
box-shadow: var(--rebilly-buttonActiveBoxShadow);
|
|
41
57
|
}
|
|
42
58
|
|
|
43
59
|
.rebilly-instruments-button.rebilly-instruments-button-secondary {
|
package/package.json
CHANGED
package/src/i18n/index.js
CHANGED
|
@@ -12,7 +12,7 @@ export class Translate {
|
|
|
12
12
|
init(locale, messages) {
|
|
13
13
|
this.items = document.querySelectorAll('[data-rebilly-i18n]');
|
|
14
14
|
this.locale = this.getLocale(locale);
|
|
15
|
-
this.languages = merge({ ...en, ...es }, messages);
|
|
15
|
+
this.languages = merge({}, { ...en, ...es }, messages);
|
|
16
16
|
}
|
|
17
17
|
|
|
18
18
|
translateItems() {
|
|
@@ -3,7 +3,15 @@
|
|
|
3
3
|
exports[`RebillyInstruments theme builds the theme object 1`] = `
|
|
4
4
|
Object {
|
|
5
5
|
"borderRadius": "4px",
|
|
6
|
+
"buttonActiveBorder": "var(--rebilly-buttonHoverBorder)",
|
|
7
|
+
"buttonActiveBorderRadius": "var(--rebilly-buttonHoverBorderRadius)",
|
|
8
|
+
"buttonActiveBoxShadow": "var(--rebilly-buttonHoverBoxShadow)",
|
|
6
9
|
"buttonActiveColorBackground": "var(--rebilly-buttonHoverColorBackground)",
|
|
10
|
+
"buttonActiveColorText": "var(--rebilly-buttonHoverColorText)",
|
|
11
|
+
"buttonActiveFontFamily": "var(--rebilly-buttonHoverFontFamily)",
|
|
12
|
+
"buttonActiveFontLineHeight": "var(--rebilly-buttonHoverFontLineHeight)",
|
|
13
|
+
"buttonActiveFontSize": "var(--rebilly-buttonHoverFontSize)",
|
|
14
|
+
"buttonActiveFontWeight": "var(--rebilly-buttonHoverFontWeight)",
|
|
7
15
|
"buttonBorder": "1px solid transparent",
|
|
8
16
|
"buttonBorderRadius": "var(--rebilly-borderRadius)",
|
|
9
17
|
"buttonBoxShadow": "none",
|
|
@@ -13,7 +21,15 @@ Object {
|
|
|
13
21
|
"buttonFontLineHeight": "1.5",
|
|
14
22
|
"buttonFontSize": "var(--rebilly-fontSizeBase)",
|
|
15
23
|
"buttonFontWeight": "var(--rebilly-fontWeightBase)",
|
|
24
|
+
"buttonHoverBorder": "1px solid #0036aa",
|
|
25
|
+
"buttonHoverBorderRadius": "var(--rebilly-buttonBorderRadius)",
|
|
26
|
+
"buttonHoverBoxShadow": "var(--rebilly-buttonBoxShadow)",
|
|
16
27
|
"buttonHoverColorBackground": "#0036aa",
|
|
28
|
+
"buttonHoverColorText": "var(--rebilly-buttonColorText)",
|
|
29
|
+
"buttonHoverFontFamily": "var(--rebilly-buttonFontFamily)",
|
|
30
|
+
"buttonHoverFontLineHeight": "var(--rebilly-buttonFontLineHeight)",
|
|
31
|
+
"buttonHoverFontSize": "var(--rebilly-buttonFontSize)",
|
|
32
|
+
"buttonHoverFontWeight": "var(--rebilly-buttonFontWeight)",
|
|
17
33
|
"colorBackground": "#FFFFFF",
|
|
18
34
|
"colorDanger": "#CD5C5C",
|
|
19
35
|
"colorMutedBorder": "rgba(13, 43, 62, 0.25)",
|
|
@@ -45,7 +61,23 @@ Object {
|
|
|
45
61
|
--rebilly-buttonBorderRadius: var(--rebilly-borderRadius);
|
|
46
62
|
--rebilly-buttonBoxShadow: none;
|
|
47
63
|
--rebilly-buttonHoverColorBackground: #0036aa;
|
|
64
|
+
--rebilly-buttonHoverColorText: var(--rebilly-buttonColorText);
|
|
65
|
+
--rebilly-buttonHoverFontFamily: var(--rebilly-buttonFontFamily);
|
|
66
|
+
--rebilly-buttonHoverFontSize: var(--rebilly-buttonFontSize);
|
|
67
|
+
--rebilly-buttonHoverFontLineHeight: var(--rebilly-buttonFontLineHeight);
|
|
68
|
+
--rebilly-buttonHoverFontWeight: var(--rebilly-buttonFontWeight);
|
|
69
|
+
--rebilly-buttonHoverBorder: 1px solid #0036aa;
|
|
70
|
+
--rebilly-buttonHoverBorderRadius: var(--rebilly-buttonBorderRadius);
|
|
71
|
+
--rebilly-buttonHoverBoxShadow: var(--rebilly-buttonBoxShadow);
|
|
48
72
|
--rebilly-buttonActiveColorBackground: var(--rebilly-buttonHoverColorBackground);
|
|
73
|
+
--rebilly-buttonActiveColorText: var(--rebilly-buttonHoverColorText);
|
|
74
|
+
--rebilly-buttonActiveFontFamily: var(--rebilly-buttonHoverFontFamily);
|
|
75
|
+
--rebilly-buttonActiveFontSize: var(--rebilly-buttonHoverFontSize);
|
|
76
|
+
--rebilly-buttonActiveFontLineHeight: var(--rebilly-buttonHoverFontLineHeight);
|
|
77
|
+
--rebilly-buttonActiveFontWeight: var(--rebilly-buttonHoverFontWeight);
|
|
78
|
+
--rebilly-buttonActiveBorder: var(--rebilly-buttonHoverBorder);
|
|
79
|
+
--rebilly-buttonActiveBorderRadius: var(--rebilly-buttonHoverBorderRadius);
|
|
80
|
+
--rebilly-buttonActiveBoxShadow: var(--rebilly-buttonHoverBoxShadow);
|
|
49
81
|
--rebilly-inputColorBackground: transparent;
|
|
50
82
|
--rebilly-inputColorText: var(--rebilly-colorText);
|
|
51
83
|
--rebilly-inputFontFamily: var(--rebilly-fontFamily);
|
|
@@ -156,7 +156,7 @@ const properties = {
|
|
|
156
156
|
}
|
|
157
157
|
},
|
|
158
158
|
|
|
159
|
-
/** Buttons:
|
|
159
|
+
/** Buttons: Hover */
|
|
160
160
|
buttonHoverColorBackground: {
|
|
161
161
|
fallback: {
|
|
162
162
|
type: 'func',
|
|
@@ -168,13 +168,116 @@ const properties = {
|
|
|
168
168
|
}
|
|
169
169
|
}
|
|
170
170
|
},
|
|
171
|
-
|
|
171
|
+
buttonHoverColorText: {
|
|
172
|
+
fallback: {
|
|
173
|
+
type: 'variable',
|
|
174
|
+
value: 'buttonColorText',
|
|
175
|
+
}
|
|
176
|
+
},
|
|
177
|
+
buttonHoverFontFamily: {
|
|
178
|
+
fallback: {
|
|
179
|
+
type: 'variable',
|
|
180
|
+
value: 'buttonFontFamily',
|
|
181
|
+
}
|
|
182
|
+
},
|
|
183
|
+
buttonHoverFontSize: {
|
|
184
|
+
fallback: {
|
|
185
|
+
type: 'variable',
|
|
186
|
+
value: 'buttonFontSize',
|
|
187
|
+
}
|
|
188
|
+
},
|
|
189
|
+
buttonHoverFontLineHeight: {
|
|
190
|
+
fallback: {
|
|
191
|
+
type: 'variable',
|
|
192
|
+
value: 'buttonFontLineHeight',
|
|
193
|
+
}
|
|
194
|
+
},
|
|
195
|
+
buttonHoverFontWeight: {
|
|
196
|
+
fallback: {
|
|
197
|
+
type: 'variable',
|
|
198
|
+
value: 'buttonFontWeight',
|
|
199
|
+
}
|
|
200
|
+
},
|
|
201
|
+
buttonHoverBorder: {
|
|
202
|
+
fallback: {
|
|
203
|
+
type: 'func',
|
|
204
|
+
value: theme => {
|
|
205
|
+
if(theme.buttonBorderProvided) {
|
|
206
|
+
return theme.buttonBorder;
|
|
207
|
+
}
|
|
208
|
+
const buttonBorder = new Border(theme.buttonBorder);
|
|
209
|
+
return buttonBorder.updateColor(theme.buttonHoverColorBackground).value;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
},
|
|
213
|
+
buttonHoverBorderRadius: {
|
|
214
|
+
fallback: {
|
|
215
|
+
type: 'variable',
|
|
216
|
+
value: 'buttonBorderRadius',
|
|
217
|
+
}
|
|
218
|
+
},
|
|
219
|
+
buttonHoverBoxShadow: {
|
|
220
|
+
fallback: {
|
|
221
|
+
type: 'variable',
|
|
222
|
+
value: 'buttonBoxShadow',
|
|
223
|
+
}
|
|
224
|
+
},
|
|
225
|
+
|
|
226
|
+
/** Buttons: Active */
|
|
172
227
|
buttonActiveColorBackground: {
|
|
173
228
|
fallback: {
|
|
174
229
|
type: 'variable',
|
|
175
230
|
value: 'buttonHoverColorBackground',
|
|
176
231
|
}
|
|
177
232
|
},
|
|
233
|
+
buttonActiveColorText: {
|
|
234
|
+
fallback: {
|
|
235
|
+
type: 'variable',
|
|
236
|
+
value: 'buttonHoverColorText',
|
|
237
|
+
}
|
|
238
|
+
},
|
|
239
|
+
buttonActiveFontFamily: {
|
|
240
|
+
fallback: {
|
|
241
|
+
type: 'variable',
|
|
242
|
+
value: 'buttonHoverFontFamily',
|
|
243
|
+
}
|
|
244
|
+
},
|
|
245
|
+
buttonActiveFontSize: {
|
|
246
|
+
fallback: {
|
|
247
|
+
type: 'variable',
|
|
248
|
+
value: 'buttonHoverFontSize',
|
|
249
|
+
}
|
|
250
|
+
},
|
|
251
|
+
buttonActiveFontLineHeight: {
|
|
252
|
+
fallback: {
|
|
253
|
+
type: 'variable',
|
|
254
|
+
value: 'buttonHoverFontLineHeight',
|
|
255
|
+
}
|
|
256
|
+
},
|
|
257
|
+
buttonActiveFontWeight: {
|
|
258
|
+
fallback: {
|
|
259
|
+
type: 'variable',
|
|
260
|
+
value: 'buttonHoverFontWeight',
|
|
261
|
+
}
|
|
262
|
+
},
|
|
263
|
+
buttonActiveBorder: {
|
|
264
|
+
fallback: {
|
|
265
|
+
type: 'variable',
|
|
266
|
+
value: 'buttonHoverBorder'
|
|
267
|
+
}
|
|
268
|
+
},
|
|
269
|
+
buttonActiveBorderRadius: {
|
|
270
|
+
fallback: {
|
|
271
|
+
type: 'variable',
|
|
272
|
+
value: 'buttonHoverBorderRadius',
|
|
273
|
+
}
|
|
274
|
+
},
|
|
275
|
+
buttonActiveBoxShadow: {
|
|
276
|
+
fallback: {
|
|
277
|
+
type: 'variable',
|
|
278
|
+
value: 'buttonHoverBoxShadow',
|
|
279
|
+
}
|
|
280
|
+
},
|
|
178
281
|
|
|
179
282
|
/** Inputs: Base */
|
|
180
283
|
inputColorBackground: {
|
|
@@ -12,7 +12,7 @@ export const button = () => `
|
|
|
12
12
|
padding: var(--rebilly-spacings-button-py) var(--rebilly-spacings-button-px);
|
|
13
13
|
box-sizing: border-box;
|
|
14
14
|
background: var(--rebilly-buttonColorBackground);
|
|
15
|
-
color: var(--rebilly-buttonColorText
|
|
15
|
+
color: var(--rebilly-buttonColorText);
|
|
16
16
|
border-radius: var(--rebilly-buttonBorderRadius);
|
|
17
17
|
font-weight: var(--rebilly-buttonFontWeight);
|
|
18
18
|
border: var(--rebilly-buttonBorder);
|
|
@@ -27,10 +27,26 @@ export const button = () => `
|
|
|
27
27
|
|
|
28
28
|
.rebilly-instruments-button:not([disabled]):hover {
|
|
29
29
|
background: var(--rebilly-buttonHoverColorBackground);
|
|
30
|
+
color: var(--rebilly-buttonHoverColorText);
|
|
31
|
+
font-family: var(--rebilly-buttonHoverFontFamily);
|
|
32
|
+
font-size: var(--rebilly-buttonHoverFontSize);
|
|
33
|
+
line-height: var(--rebilly-buttonHoverFontLineHeight);
|
|
34
|
+
font-weight: var(--rebilly-buttonHoverFontWeight);
|
|
35
|
+
border: var(--rebilly-buttonHoverBorder);
|
|
36
|
+
border-radius: var(--rebilly-buttonHoverBorderRadius);
|
|
37
|
+
box-shadow: var(--rebilly-buttonHoverBoxShadow);
|
|
30
38
|
}
|
|
31
39
|
|
|
32
40
|
.rebilly-instruments-button:not([disabled]):active {
|
|
33
41
|
background: var(--rebilly-buttonActiveColorBackground);
|
|
42
|
+
color: var(--rebilly-buttonActiveColorText);
|
|
43
|
+
font-family: var(--rebilly-buttonActiveFontFamily);
|
|
44
|
+
font-size: var(--rebilly-buttonActiveFontSize);
|
|
45
|
+
line-height: var(--rebilly-buttonActiveFontLineHeight);
|
|
46
|
+
font-weight: var(--rebilly-buttonActiveFontWeight);
|
|
47
|
+
border: var(--rebilly-buttonActiveBorder);
|
|
48
|
+
border-radius: var(--rebilly-buttonActiveBorderRadius);
|
|
49
|
+
box-shadow: var(--rebilly-buttonActiveBoxShadow);
|
|
34
50
|
}
|
|
35
51
|
|
|
36
52
|
.rebilly-instruments-button.rebilly-instruments-button-secondary {
|