baseui 0.0.0-next-7387ac2 → 0.0.0-next-cb0624c

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.
Files changed (14) hide show
  1. package/button/styled-components.js +47 -18
  2. package/button/styled-components.js.flow +25 -5
  3. package/es/button/styled-components.js +32 -2
  4. package/es/themes/dark-theme/color-component-tokens.js +4 -0
  5. package/es/themes/light-theme/color-component-tokens.js +4 -0
  6. package/esm/button/styled-components.js +47 -18
  7. package/esm/themes/dark-theme/color-component-tokens.js +4 -0
  8. package/esm/themes/light-theme/color-component-tokens.js +4 -0
  9. package/package.json +1 -1
  10. package/themes/dark-theme/color-component-tokens.js +4 -0
  11. package/themes/dark-theme/color-component-tokens.js.flow +4 -0
  12. package/themes/light-theme/color-component-tokens.js +4 -0
  13. package/themes/light-theme/color-component-tokens.js.flow +4 -0
  14. package/themes/types.js.flow +4 -0
package/button/styled-components.js CHANGED
@@ -46,11 +46,14 @@ var BaseButton = (0, _index.styled)('button', function (_ref) {
46
46
  transitionDuration: $theme.animation.timing200,
47
47
  transitionTimingFunction: $theme.animation.linearCurve,
48
48
  cursor: 'pointer',
49
- ':disabled': {
50
- cursor: 'not-allowed',
51
- backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
52
- color: $theme.colors.buttonDisabledText
53
- },
49
+ ':disabled': _objectSpread({
50
+ cursor: 'not-allowed'
51
+ }, getDisabledStyles({
52
+ $theme: $theme,
53
+ $kind: $kind,
54
+ $disabled: $disabled,
55
+ $isSelected: $isSelected
56
+ })),
54
57
  marginLeft: 0,
55
58
  marginTop: 0,
56
59
  marginRight: 0,
@@ -275,10 +278,36 @@ function getFontStyles(_ref10) {
275
278
  }
276
279
  }
277
280
 
278
- function getPaddingStyles(_ref11) {
281
+ function getDisabledStyles(_ref11) {
279
282
  var $theme = _ref11.$theme,
280
- $size = _ref11.$size,
281
- $shape = _ref11.$shape;
283
+ $kind = _ref11.$kind,
284
+ $isSelected = _ref11.$isSelected,
285
+ $disabled = _ref11.$disabled;
286
+
287
+ if ($disabled && $isSelected) {
288
+ if ($kind === _constants.KIND.primary || $kind === _constants.KIND.secondary) {
289
+ return {
290
+ color: $theme.colors.buttonDisabledActiveText,
291
+ backgroundColor: $theme.colors.buttonDisabledActiveFill
292
+ };
293
+ } else if ($kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary) {
294
+ return {
295
+ backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
296
+ color: $theme.colors.buttonTertiaryDisabledActiveText
297
+ };
298
+ }
299
+ }
300
+
301
+ return {
302
+ backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
303
+ color: $theme.colors.buttonDisabledText
304
+ };
305
+ }
306
+
307
+ function getPaddingStyles(_ref12) {
308
+ var $theme = _ref12.$theme,
309
+ $size = _ref12.$size,
310
+ $shape = _ref12.$shape;
282
311
  var iconShape = $shape === _constants.SHAPE.square || $shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.round;
283
312
 
284
313
  switch ($size) {
@@ -316,12 +345,12 @@ function getPaddingStyles(_ref11) {
316
345
  }
317
346
  }
318
347
 
319
- function getKindStyles(_ref12) {
320
- var $theme = _ref12.$theme,
321
- $isLoading = _ref12.$isLoading,
322
- $isSelected = _ref12.$isSelected,
323
- $kind = _ref12.$kind,
324
- $disabled = _ref12.$disabled;
348
+ function getKindStyles(_ref13) {
349
+ var $theme = _ref13.$theme,
350
+ $isLoading = _ref13.$isLoading,
351
+ $isSelected = _ref13.$isSelected,
352
+ $kind = _ref13.$kind,
353
+ $disabled = _ref13.$disabled;
325
354
 
326
355
  if ($disabled) {
327
356
  return Object.freeze({});
@@ -409,10 +438,10 @@ function getKindStyles(_ref12) {
409
438
  }
410
439
  }
411
440
 
412
- function getShapeStyles(_ref13) {
413
- var $theme = _ref13.$theme,
414
- $shape = _ref13.$shape,
415
- $size = _ref13.$size;
441
+ function getShapeStyles(_ref14) {
442
+ var $theme = _ref14.$theme,
443
+ $shape = _ref14.$shape,
444
+ $size = _ref14.$size;
416
445
 
417
446
  if ($shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.square) {
418
447
  var height, width;
package/button/styled-components.js.flow CHANGED
@@ -46,11 +46,7 @@ export const BaseButton = styled<SharedStylePropsT>(
46
46
  cursor: 'pointer',
47
47
  ':disabled': {
48
48
  cursor: 'not-allowed',
49
- backgroundColor:
50
- $kind === KIND.minimal || $kind === KIND.tertiary
51
- ? 'transparent'
52
- : $theme.colors.buttonDisabledFill,
53
- color: $theme.colors.buttonDisabledText,
49
+ ...getDisabledStyles({$theme, $kind, $disabled, $isSelected}),
54
50
  },
55
51
  marginLeft: 0,
56
52
  marginTop: 0,
@@ -229,6 +225,30 @@ function getFontStyles({$theme, $size}) {
229
225
  }
230
226
  }
231
227
 
228
+ function getDisabledStyles({$theme, $kind, $isSelected, $disabled}) {
229
+ if ($disabled && $isSelected) {
230
+ if ($kind === KIND.primary || $kind === KIND.secondary) {
231
+ return {
232
+ color: $theme.colors.buttonDisabledActiveText,
233
+ backgroundColor: $theme.colors.buttonDisabledActiveFill,
234
+ };
235
+ } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
236
+ return {
237
+ backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
238
+ color: $theme.colors.buttonTertiaryDisabledActiveText,
239
+ };
240
+ }
241
+ }
242
+
243
+ return {
244
+ backgroundColor:
245
+ $kind === KIND.minimal || $kind === KIND.tertiary
246
+ ? 'transparent'
247
+ : $theme.colors.buttonDisabledFill,
248
+ color: $theme.colors.buttonDisabledText,
249
+ };
250
+ }
251
+
232
252
  function getPaddingStyles({$theme, $size, $shape}) {
233
253
  const iconShape =
234
254
  $shape === SHAPE.square ||
package/es/button/styled-components.js CHANGED
@@ -39,8 +39,12 @@ export const BaseButton = styled('button', ({
39
39
  cursor: 'pointer',
40
40
  ':disabled': {
41
41
  cursor: 'not-allowed',
42
- backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
43
- color: $theme.colors.buttonDisabledText
42
+ ...getDisabledStyles({
43
+ $theme,
44
+ $kind,
45
+ $disabled,
46
+ $isSelected
47
+ })
44
48
  },
45
49
  marginLeft: 0,
46
50
  marginTop: 0,
@@ -272,6 +276,32 @@ function getFontStyles({
272
276
  }
273
277
  }
274
278
 
279
+ function getDisabledStyles({
280
+ $theme,
281
+ $kind,
282
+ $isSelected,
283
+ $disabled
284
+ }) {
285
+ if ($disabled && $isSelected) {
286
+ if ($kind === KIND.primary || $kind === KIND.secondary) {
287
+ return {
288
+ color: $theme.colors.buttonDisabledActiveText,
289
+ backgroundColor: $theme.colors.buttonDisabledActiveFill
290
+ };
291
+ } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
292
+ return {
293
+ backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
294
+ color: $theme.colors.buttonTertiaryDisabledActiveText
295
+ };
296
+ }
297
+ }
298
+
299
+ return {
300
+ backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
301
+ color: $theme.colors.buttonDisabledText
302
+ };
303
+ }
304
+
275
305
  function getPaddingStyles({
276
306
  $theme,
277
307
  $size,
package/es/themes/dark-theme/color-component-tokens.js CHANGED
@@ -36,6 +36,8 @@ export default ((themePrimitives = colorTokens) => ({
36
36
  buttonTertiaryActive: themePrimitives.primary600,
37
37
  buttonTertiarySelectedText: themePrimitives.primary,
38
38
  buttonTertiarySelectedFill: themePrimitives.primary600,
39
+ buttonTertiaryDisabledActiveFill: themePrimitives.primary700,
40
+ buttonTertiaryDisabledActiveText: themePrimitives.mono300,
39
41
  buttonTertiarySpinnerForeground: themePrimitives.primary50,
40
42
  buttonTertiarySpinnerBackground: themePrimitives.primary500,
41
43
  buttonMinimalFill: 'transparent',
@@ -48,6 +50,8 @@ export default ((themePrimitives = colorTokens) => ({
48
50
  buttonMinimalSpinnerBackground: themePrimitives.primary500,
49
51
  buttonDisabledFill: themePrimitives.mono600,
50
52
  buttonDisabledText: themePrimitives.mono300,
53
+ buttonDisabledActiveFill: themePrimitives.mono200,
54
+ buttonDisabledActiveText: themePrimitives.primary500,
51
55
  buttonDisabledSpinnerForeground: themePrimitives.mono200,
52
56
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
53
57
  // Breadcrumbs
package/es/themes/light-theme/color-component-tokens.js CHANGED
@@ -36,6 +36,8 @@ export default ((themePrimitives = colorTokens) => ({
36
36
  buttonTertiaryActive: themePrimitives.primary100,
37
37
  buttonTertiarySelectedFill: themePrimitives.primary100,
38
38
  buttonTertiarySelectedText: themePrimitives.primary,
39
+ buttonTertiaryDisabledActiveFill: themePrimitives.primary50,
40
+ buttonTertiaryDisabledActiveText: themePrimitives.mono600,
39
41
  buttonTertiarySpinnerForeground: themePrimitives.accent,
40
42
  buttonTertiarySpinnerBackground: themePrimitives.primary100,
41
43
  buttonMinimalFill: 'transparent',
@@ -48,6 +50,8 @@ export default ((themePrimitives = colorTokens) => ({
48
50
  buttonMinimalSpinnerBackground: themePrimitives.primary100,
49
51
  buttonDisabledFill: themePrimitives.mono200,
50
52
  buttonDisabledText: themePrimitives.mono600,
53
+ buttonDisabledActiveFill: themePrimitives.mono700,
54
+ buttonDisabledActiveText: themePrimitives.mono100,
51
55
  buttonDisabledSpinnerForeground: themePrimitives.mono600,
52
56
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
53
57
  // Breadcrumbs
package/esm/button/styled-components.js CHANGED
@@ -43,11 +43,14 @@ export var BaseButton = styled('button', function (_ref) {
43
43
  transitionDuration: $theme.animation.timing200,
44
44
  transitionTimingFunction: $theme.animation.linearCurve,
45
45
  cursor: 'pointer',
46
- ':disabled': {
47
- cursor: 'not-allowed',
48
- backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
49
- color: $theme.colors.buttonDisabledText
50
- },
46
+ ':disabled': _objectSpread({
47
+ cursor: 'not-allowed'
48
+ }, getDisabledStyles({
49
+ $theme: $theme,
50
+ $kind: $kind,
51
+ $disabled: $disabled,
52
+ $isSelected: $isSelected
53
+ })),
51
54
  marginLeft: 0,
52
55
  marginTop: 0,
53
56
  marginRight: 0,
@@ -267,10 +270,36 @@ function getFontStyles(_ref10) {
267
270
  }
268
271
  }
269
272
 
270
- function getPaddingStyles(_ref11) {
273
+ function getDisabledStyles(_ref11) {
271
274
  var $theme = _ref11.$theme,
272
- $size = _ref11.$size,
273
- $shape = _ref11.$shape;
275
+ $kind = _ref11.$kind,
276
+ $isSelected = _ref11.$isSelected,
277
+ $disabled = _ref11.$disabled;
278
+
279
+ if ($disabled && $isSelected) {
280
+ if ($kind === KIND.primary || $kind === KIND.secondary) {
281
+ return {
282
+ color: $theme.colors.buttonDisabledActiveText,
283
+ backgroundColor: $theme.colors.buttonDisabledActiveFill
284
+ };
285
+ } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
286
+ return {
287
+ backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
288
+ color: $theme.colors.buttonTertiaryDisabledActiveText
289
+ };
290
+ }
291
+ }
292
+
293
+ return {
294
+ backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
295
+ color: $theme.colors.buttonDisabledText
296
+ };
297
+ }
298
+
299
+ function getPaddingStyles(_ref12) {
300
+ var $theme = _ref12.$theme,
301
+ $size = _ref12.$size,
302
+ $shape = _ref12.$shape;
274
303
  var iconShape = $shape === SHAPE.square || $shape === SHAPE.circle || $shape === SHAPE.round;
275
304
 
276
305
  switch ($size) {
@@ -308,12 +337,12 @@ function getPaddingStyles(_ref11) {
308
337
  }
309
338
  }
310
339
 
311
- function getKindStyles(_ref12) {
312
- var $theme = _ref12.$theme,
313
- $isLoading = _ref12.$isLoading,
314
- $isSelected = _ref12.$isSelected,
315
- $kind = _ref12.$kind,
316
- $disabled = _ref12.$disabled;
340
+ function getKindStyles(_ref13) {
341
+ var $theme = _ref13.$theme,
342
+ $isLoading = _ref13.$isLoading,
343
+ $isSelected = _ref13.$isSelected,
344
+ $kind = _ref13.$kind,
345
+ $disabled = _ref13.$disabled;
317
346
 
318
347
  if ($disabled) {
319
348
  return Object.freeze({});
@@ -401,10 +430,10 @@ function getKindStyles(_ref12) {
401
430
  }
402
431
  }
403
432
 
404
- function getShapeStyles(_ref13) {
405
- var $theme = _ref13.$theme,
406
- $shape = _ref13.$shape,
407
- $size = _ref13.$size;
433
+ function getShapeStyles(_ref14) {
434
+ var $theme = _ref14.$theme,
435
+ $shape = _ref14.$shape,
436
+ $size = _ref14.$size;
408
437
 
409
438
  if ($shape === SHAPE.circle || $shape === SHAPE.square) {
410
439
  var height, width;
package/esm/themes/dark-theme/color-component-tokens.js CHANGED
@@ -38,6 +38,8 @@ export default (function () {
38
38
  buttonTertiaryActive: themePrimitives.primary600,
39
39
  buttonTertiarySelectedText: themePrimitives.primary,
40
40
  buttonTertiarySelectedFill: themePrimitives.primary600,
41
+ buttonTertiaryDisabledActiveFill: themePrimitives.primary700,
42
+ buttonTertiaryDisabledActiveText: themePrimitives.mono300,
41
43
  buttonTertiarySpinnerForeground: themePrimitives.primary50,
42
44
  buttonTertiarySpinnerBackground: themePrimitives.primary500,
43
45
  buttonMinimalFill: 'transparent',
@@ -50,6 +52,8 @@ export default (function () {
50
52
  buttonMinimalSpinnerBackground: themePrimitives.primary500,
51
53
  buttonDisabledFill: themePrimitives.mono600,
52
54
  buttonDisabledText: themePrimitives.mono300,
55
+ buttonDisabledActiveFill: themePrimitives.mono200,
56
+ buttonDisabledActiveText: themePrimitives.primary500,
53
57
  buttonDisabledSpinnerForeground: themePrimitives.mono200,
54
58
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
55
59
  // Breadcrumbs
package/esm/themes/light-theme/color-component-tokens.js CHANGED
@@ -38,6 +38,8 @@ export default (function () {
38
38
  buttonTertiaryActive: themePrimitives.primary100,
39
39
  buttonTertiarySelectedFill: themePrimitives.primary100,
40
40
  buttonTertiarySelectedText: themePrimitives.primary,
41
+ buttonTertiaryDisabledActiveFill: themePrimitives.primary50,
42
+ buttonTertiaryDisabledActiveText: themePrimitives.mono600,
41
43
  buttonTertiarySpinnerForeground: themePrimitives.accent,
42
44
  buttonTertiarySpinnerBackground: themePrimitives.primary100,
43
45
  buttonMinimalFill: 'transparent',
@@ -50,6 +52,8 @@ export default (function () {
50
52
  buttonMinimalSpinnerBackground: themePrimitives.primary100,
51
53
  buttonDisabledFill: themePrimitives.mono200,
52
54
  buttonDisabledText: themePrimitives.mono600,
55
+ buttonDisabledActiveFill: themePrimitives.mono700,
56
+ buttonDisabledActiveText: themePrimitives.mono100,
53
57
  buttonDisabledSpinnerForeground: themePrimitives.mono600,
54
58
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
55
59
  // Breadcrumbs
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "baseui",
3
- "version": "0.0.0-next-7387ac2",
3
+ "version": "0.0.0-next-cb0624c",
4
4
  "description": "A React Component library implementing the Base design language",
5
5
  "keywords": [
6
6
  "react",
package/themes/dark-theme/color-component-tokens.js CHANGED
@@ -48,6 +48,8 @@ var _default = function _default() {
48
48
  buttonTertiaryActive: themePrimitives.primary600,
49
49
  buttonTertiarySelectedText: themePrimitives.primary,
50
50
  buttonTertiarySelectedFill: themePrimitives.primary600,
51
+ buttonTertiaryDisabledActiveFill: themePrimitives.primary700,
52
+ buttonTertiaryDisabledActiveText: themePrimitives.mono300,
51
53
  buttonTertiarySpinnerForeground: themePrimitives.primary50,
52
54
  buttonTertiarySpinnerBackground: themePrimitives.primary500,
53
55
  buttonMinimalFill: 'transparent',
@@ -60,6 +62,8 @@ var _default = function _default() {
60
62
  buttonMinimalSpinnerBackground: themePrimitives.primary500,
61
63
  buttonDisabledFill: themePrimitives.mono600,
62
64
  buttonDisabledText: themePrimitives.mono300,
65
+ buttonDisabledActiveFill: themePrimitives.mono200,
66
+ buttonDisabledActiveText: themePrimitives.primary500,
63
67
  buttonDisabledSpinnerForeground: themePrimitives.mono200,
64
68
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
65
69
  // Breadcrumbs
package/themes/dark-theme/color-component-tokens.js.flow CHANGED
@@ -43,6 +43,8 @@ export default (
43
43
  buttonTertiaryActive: themePrimitives.primary600,
44
44
  buttonTertiarySelectedText: themePrimitives.primary,
45
45
  buttonTertiarySelectedFill: themePrimitives.primary600,
46
+ buttonTertiaryDisabledActiveFill: themePrimitives.primary700,
47
+ buttonTertiaryDisabledActiveText: themePrimitives.mono300,
46
48
  buttonTertiarySpinnerForeground: themePrimitives.primary50,
47
49
  buttonTertiarySpinnerBackground: themePrimitives.primary500,
48
50
 
@@ -57,6 +59,8 @@ export default (
57
59
 
58
60
  buttonDisabledFill: themePrimitives.mono600,
59
61
  buttonDisabledText: themePrimitives.mono300,
62
+ buttonDisabledActiveFill: themePrimitives.mono200,
63
+ buttonDisabledActiveText: themePrimitives.primary500,
60
64
  buttonDisabledSpinnerForeground: themePrimitives.mono200,
61
65
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
62
66
 
package/themes/light-theme/color-component-tokens.js CHANGED
@@ -48,6 +48,8 @@ var _default = function _default() {
48
48
  buttonTertiaryActive: themePrimitives.primary100,
49
49
  buttonTertiarySelectedFill: themePrimitives.primary100,
50
50
  buttonTertiarySelectedText: themePrimitives.primary,
51
+ buttonTertiaryDisabledActiveFill: themePrimitives.primary50,
52
+ buttonTertiaryDisabledActiveText: themePrimitives.mono600,
51
53
  buttonTertiarySpinnerForeground: themePrimitives.accent,
52
54
  buttonTertiarySpinnerBackground: themePrimitives.primary100,
53
55
  buttonMinimalFill: 'transparent',
@@ -60,6 +62,8 @@ var _default = function _default() {
60
62
  buttonMinimalSpinnerBackground: themePrimitives.primary100,
61
63
  buttonDisabledFill: themePrimitives.mono200,
62
64
  buttonDisabledText: themePrimitives.mono600,
65
+ buttonDisabledActiveFill: themePrimitives.mono700,
66
+ buttonDisabledActiveText: themePrimitives.mono100,
63
67
  buttonDisabledSpinnerForeground: themePrimitives.mono600,
64
68
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
65
69
  // Breadcrumbs
package/themes/light-theme/color-component-tokens.js.flow CHANGED
@@ -43,6 +43,8 @@ export default (
43
43
  buttonTertiaryActive: themePrimitives.primary100,
44
44
  buttonTertiarySelectedFill: themePrimitives.primary100,
45
45
  buttonTertiarySelectedText: themePrimitives.primary,
46
+ buttonTertiaryDisabledActiveFill: themePrimitives.primary50,
47
+ buttonTertiaryDisabledActiveText: themePrimitives.mono600,
46
48
  buttonTertiarySpinnerForeground: themePrimitives.accent,
47
49
  buttonTertiarySpinnerBackground: themePrimitives.primary100,
48
50
 
@@ -57,6 +59,8 @@ export default (
57
59
 
58
60
  buttonDisabledFill: themePrimitives.mono200,
59
61
  buttonDisabledText: themePrimitives.mono600,
62
+ buttonDisabledActiveFill: themePrimitives.mono700,
63
+ buttonDisabledActiveText: themePrimitives.mono100,
60
64
  buttonDisabledSpinnerForeground: themePrimitives.mono600,
61
65
  buttonDisabledSpinnerBackground: themePrimitives.mono400,
62
66
 
package/themes/types.js.flow CHANGED
@@ -198,6 +198,8 @@ export type ComponentColorTokensT = {|
198
198
  buttonTertiaryActive: string,
199
199
  buttonTertiarySelectedText: string,
200
200
  buttonTertiarySelectedFill: string,
201
+ buttonTertiaryDisabledActiveFill: string,
202
+ buttonTertiaryDisabledActiveText: string,
201
203
  buttonTertiarySpinnerForeground: string,
202
204
  buttonTertiarySpinnerBackground: string,
203
205
  buttonMinimalFill: string,
@@ -210,6 +212,8 @@ export type ComponentColorTokensT = {|
210
212
  buttonMinimalSpinnerBackground: string,
211
213
  buttonDisabledFill: string,
212
214
  buttonDisabledText: string,
215
+ buttonDisabledActiveFill: string,
216
+ buttonDisabledActiveText: string,
213
217
  buttonDisabledSpinnerForeground: string,
214
218
  buttonDisabledSpinnerBackground: string,
215
219