@superdispatch/ui 0.24.0 → 0.24.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.
Files changed (11) hide show
  1. package/dist-node/index.js +57 -12
  2. package/dist-node/index.js.map +1 -1
  3. package/dist-src/avatar-button/AvatarButton.js +2 -1
  4. package/dist-src/card-button/CardButton.js +9 -5
  5. package/dist-src/link/LinkOverrides.js +4 -2
  6. package/dist-src/text-field/TextFieldOverrides.js +41 -4
  7. package/dist-src/theme/Color.js +1 -0
  8. package/dist-types/index.d.ts +1 -0
  9. package/dist-web/index.js +57 -12
  10. package/dist-web/index.js.map +1 -1
  11. package/package.json +1 -1
package/dist-src/avatar-button/AvatarButton.js CHANGED
@@ -22,7 +22,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => {
22
22
  '&:not([disabled])[aria-busy="false"]': {
23
23
  '&:hover, &:focus': {
24
24
  '&$withIcon > $overlay': {
25
- backgroundColor: Color.Black50,
25
+ backgroundColor: Color.Dark50,
26
26
  '& > svg': {
27
27
  opacity: 1
28
28
  }
@@ -59,6 +59,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => {
59
59
  top: 0,
60
60
  left: 0,
61
61
  position: 'absolute',
62
+ color: Color.Blue500,
62
63
  fontSize: theme.spacing(5),
63
64
  [sm]: {
64
65
  fontSize: theme.spacing(4)
package/dist-src/card-button/CardButton.js CHANGED
@@ -29,15 +29,15 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
29
29
  backgroundColor: Color.Silver100
30
30
  },
31
31
  error: {
32
- color: Color.Red300,
33
- borderColor: Color.Red300,
32
+ color: Color.Red500,
33
+ borderColor: Color.Red500,
34
34
  backgroundColor: Color.Red50,
35
35
  '&:focus': {
36
36
  backgroundColor: Color.Red75
37
37
  }
38
38
  },
39
39
  primary: {
40
- color: Color.Blue300,
40
+ color: Color.Blue500,
41
41
  borderColor: Color.Silver500,
42
42
  '&:focus': {
43
43
  backgroundColor: Color.Blue50
@@ -104,11 +104,14 @@ export var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
104
104
  'small': styles.sizeSmall,
105
105
  'large': styles.sizeLarge
106
106
  }[size]),
107
- children: error ? /*#__PURE__*/_jsx(Typography, {
107
+ children: error ? /*#__PURE__*/_jsxs(Typography, {
108
108
  variant: "h4",
109
109
  color: "inherit",
110
110
  className: styles.label,
111
- children: error
111
+ children: [!!startIcon && /*#__PURE__*/_jsx("span", {
112
+ className: clsx(styles.icon, styles.startIcon),
113
+ children: startIcon
114
+ }), error]
112
115
  }) : /*#__PURE__*/_jsxs(_Fragment, {
113
116
  children: [/*#__PURE__*/_jsxs(Typography, {
114
117
  variant: "h4",
@@ -123,6 +126,7 @@ export var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
123
126
  })]
124
127
  }), !!hint && /*#__PURE__*/_jsx(Typography, {
125
128
  color: "textSecondary",
129
+ variant: "caption",
126
130
  className: styles.hint,
127
131
  children: hint
128
132
  })]
package/dist-src/link/LinkOverrides.js CHANGED
@@ -37,7 +37,6 @@ export function overrideLink(theme) {
37
37
  }
38
38
  },
39
39
  '&.MuiTypography-colorTextSecondary': {
40
- cursor: 'not-allowed',
41
40
  color: Color.Dark100,
42
41
  backgroundImage: line(Color.Silver500),
43
42
  '&:focus, &:hover, &:active': {
@@ -54,7 +53,10 @@ export function overrideLink(theme) {
54
53
  textAlign: 'inherit',
55
54
  lineHeight: 'inherit',
56
55
  userSelect: 'inherit',
57
- verticalAlign: 'inherit'
56
+ verticalAlign: 'inherit',
57
+ '&:disabled': {
58
+ cursor: 'not-allowed'
59
+ }
58
60
  }
59
61
  };
60
62
  }
package/dist-src/text-field/TextFieldOverrides.js CHANGED
@@ -21,7 +21,10 @@ export function overrideTextField(theme) {
21
21
  };
22
22
  theme.overrides.MuiFormLabel = {
23
23
  root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
24
- color: Color.Dark400,
24
+ color: Color.Dark500,
25
+ '&.MuiFormLabel-root': {
26
+ fontSize: theme.spacing(1.75)
27
+ },
25
28
  '&$error': {
26
29
  color: undefined
27
30
  },
@@ -36,12 +39,39 @@ export function overrideTextField(theme) {
36
39
  theme.overrides.MuiInputBase = {
37
40
  root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
38
41
  '&$disabled': {
39
- backgroundColor: Color.Silver100
42
+ backgroundColor: Color.Silver30
43
+ },
44
+ '&$error': {
45
+ borderColor: Color.Red500
46
+ },
47
+ '&.MuiOutlinedInput-root': {
48
+ '& fieldset': {
49
+ borderColor: Color.Silver500
50
+ },
51
+ '&:hover fieldset': {
52
+ borderColor: Color.Dark100
53
+ },
54
+ '&.Mui-focused fieldset': {
55
+ borderColor: Color.Blue500
56
+ },
57
+ '&.Mui-error fieldset': {
58
+ borderColor: Color.Red500
59
+ },
60
+ '&.Mui-error:hover fieldset': {
61
+ borderColor: Color.Red500
62
+ },
63
+ '&.Mui-disabled fieldset': {
64
+ borderColor: Color.Silver400
65
+ }
40
66
  }
41
67
  }),
42
68
  input: {
43
69
  textOverflow: 'ellipsis',
44
- height: theme.spacing(3),
70
+ '&.MuiInputBase-input': {
71
+ fontSize: theme.spacing(1.75),
72
+ padding: theme.spacing(0.75, 1)
73
+ },
74
+ height: theme.spacing(2.5),
45
75
  [sm]: {
46
76
  height: theme.spacing(2.5)
47
77
  }
@@ -174,7 +204,14 @@ export function overrideTextField(theme) {
174
204
  };
175
205
  theme.overrides.MuiFormHelperText = {
176
206
  root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
177
- marginTop: theme.spacing(0.5)
207
+ color: Color.Dark300,
208
+ marginTop: theme.spacing(0.5),
209
+ '&.Mui-error': {
210
+ color: Color.Red500
211
+ },
212
+ '&.MuiFormHelperText-root': {
213
+ fontSize: theme.spacing(1.75)
214
+ }
178
215
  }),
179
216
  contained: {
180
217
  marginLeft: undefined,
package/dist-src/theme/Color.js CHANGED
@@ -52,6 +52,7 @@ export var Color;
52
52
  Color["Yellow100"] = "#FFE494";
53
53
  Color["Yellow200"] = "#FFDC6B";
54
54
  Color["Yellow400"] = "#FFA91F";
55
+ Color["Dark50"] = "rgba(25, 35, 52, 0.5)";
55
56
  Color["Dark100"] = "#8F949E";
56
57
  Color["Dark300"] = "#5B6371";
57
58
  Color["Dark500"] = "#192334";
package/dist-types/index.d.ts CHANGED
@@ -441,6 +441,7 @@ declare enum Color {
441
441
  Yellow200 = "#FFDC6B",
442
442
  /** @deprecated */
443
443
  Yellow400 = "#FFA91F",
444
+ Dark50 = "rgba(25, 35, 52, 0.5)",
444
445
  Dark100 = "#8F949E",
445
446
  Dark300 = "#5B6371",
446
447
  Dark500 = "#192334",
package/dist-web/index.js CHANGED
@@ -486,6 +486,7 @@ var Color;
486
486
  Color["Yellow100"] = "#FFE494";
487
487
  Color["Yellow200"] = "#FFDC6B";
488
488
  Color["Yellow400"] = "#FFA91F";
489
+ Color["Dark50"] = "rgba(25, 35, 52, 0.5)";
489
490
  Color["Dark100"] = "#8F949E";
490
491
  Color["Dark300"] = "#5B6371";
491
492
  Color["Dark500"] = "#192334";
@@ -531,7 +532,7 @@ var useStyles$2 = /*#__PURE__*/makeStyles(theme => {
531
532
  '&:not([disabled])[aria-busy="false"]': {
532
533
  '&:hover, &:focus': {
533
534
  '&$withIcon > $overlay': {
534
- backgroundColor: Color.Black50,
535
+ backgroundColor: Color.Dark50,
535
536
  '& > svg': {
536
537
  opacity: 1
537
538
  }
@@ -568,6 +569,7 @@ var useStyles$2 = /*#__PURE__*/makeStyles(theme => {
568
569
  top: 0,
569
570
  left: 0,
570
571
  position: 'absolute',
572
+ color: Color.Blue500,
571
573
  fontSize: theme.spacing(5),
572
574
  [sm]: {
573
575
  fontSize: theme.spacing(4)
@@ -689,15 +691,15 @@ var useStyles$3 = /*#__PURE__*/makeStyles(theme => ({
689
691
  backgroundColor: Color.Silver100
690
692
  },
691
693
  error: {
692
- color: Color.Red300,
693
- borderColor: Color.Red300,
694
+ color: Color.Red500,
695
+ borderColor: Color.Red500,
694
696
  backgroundColor: Color.Red50,
695
697
  '&:focus': {
696
698
  backgroundColor: Color.Red75
697
699
  }
698
700
  },
699
701
  primary: {
700
- color: Color.Blue300,
702
+ color: Color.Blue500,
701
703
  borderColor: Color.Silver500,
702
704
  '&:focus': {
703
705
  backgroundColor: Color.Blue50
@@ -764,11 +766,14 @@ var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
764
766
  'small': styles.sizeSmall,
765
767
  'large': styles.sizeLarge
766
768
  }[size]),
767
- children: error ? /*#__PURE__*/jsx(Typography, {
769
+ children: error ? /*#__PURE__*/jsxs(Typography, {
768
770
  variant: "h4",
769
771
  color: "inherit",
770
772
  className: styles.label,
771
- children: error
773
+ children: [!!startIcon && /*#__PURE__*/jsx("span", {
774
+ className: clsx(styles.icon, styles.startIcon),
775
+ children: startIcon
776
+ }), error]
772
777
  }) : /*#__PURE__*/jsxs(Fragment, {
773
778
  children: [/*#__PURE__*/jsxs(Typography, {
774
779
  variant: "h4",
@@ -783,6 +788,7 @@ var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
783
788
  })]
784
789
  }), !!hint && /*#__PURE__*/jsx(Typography, {
785
790
  color: "textSecondary",
791
+ variant: "caption",
786
792
  className: styles.hint,
787
793
  children: hint
788
794
  })]
@@ -3057,7 +3063,6 @@ function overrideLink(theme) {
3057
3063
  }
3058
3064
  },
3059
3065
  '&.MuiTypography-colorTextSecondary': {
3060
- cursor: 'not-allowed',
3061
3066
  color: Color.Dark100,
3062
3067
  backgroundImage: line(Color.Silver500),
3063
3068
  '&:focus, &:hover, &:active': {
@@ -3074,7 +3079,10 @@ function overrideLink(theme) {
3074
3079
  textAlign: 'inherit',
3075
3080
  lineHeight: 'inherit',
3076
3081
  userSelect: 'inherit',
3077
- verticalAlign: 'inherit'
3082
+ verticalAlign: 'inherit',
3083
+ '&:disabled': {
3084
+ cursor: 'not-allowed'
3085
+ }
3078
3086
  }
3079
3087
  };
3080
3088
  }
@@ -3408,7 +3416,10 @@ function overrideTextField(theme) {
3408
3416
  };
3409
3417
  theme.overrides.MuiFormLabel = {
3410
3418
  root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
3411
- color: Color.Dark400,
3419
+ color: Color.Dark500,
3420
+ '&.MuiFormLabel-root': {
3421
+ fontSize: theme.spacing(1.75)
3422
+ },
3412
3423
  '&$error': {
3413
3424
  color: undefined
3414
3425
  },
@@ -3423,12 +3434,39 @@ function overrideTextField(theme) {
3423
3434
  theme.overrides.MuiInputBase = {
3424
3435
  root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
3425
3436
  '&$disabled': {
3426
- backgroundColor: Color.Silver100
3437
+ backgroundColor: Color.Silver30
3438
+ },
3439
+ '&$error': {
3440
+ borderColor: Color.Red500
3441
+ },
3442
+ '&.MuiOutlinedInput-root': {
3443
+ '& fieldset': {
3444
+ borderColor: Color.Silver500
3445
+ },
3446
+ '&:hover fieldset': {
3447
+ borderColor: Color.Dark100
3448
+ },
3449
+ '&.Mui-focused fieldset': {
3450
+ borderColor: Color.Blue500
3451
+ },
3452
+ '&.Mui-error fieldset': {
3453
+ borderColor: Color.Red500
3454
+ },
3455
+ '&.Mui-error:hover fieldset': {
3456
+ borderColor: Color.Red500
3457
+ },
3458
+ '&.Mui-disabled fieldset': {
3459
+ borderColor: Color.Silver400
3460
+ }
3427
3461
  }
3428
3462
  }),
3429
3463
  input: {
3430
3464
  textOverflow: 'ellipsis',
3431
- height: theme.spacing(3),
3465
+ '&.MuiInputBase-input': {
3466
+ fontSize: theme.spacing(1.75),
3467
+ padding: theme.spacing(0.75, 1)
3468
+ },
3469
+ height: theme.spacing(2.5),
3432
3470
  [sm]: {
3433
3471
  height: theme.spacing(2.5)
3434
3472
  }
@@ -3561,7 +3599,14 @@ function overrideTextField(theme) {
3561
3599
  };
3562
3600
  theme.overrides.MuiFormHelperText = {
3563
3601
  root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
3564
- marginTop: theme.spacing(0.5)
3602
+ color: Color.Dark300,
3603
+ marginTop: theme.spacing(0.5),
3604
+ '&.Mui-error': {
3605
+ color: Color.Red500
3606
+ },
3607
+ '&.MuiFormHelperText-root': {
3608
+ fontSize: theme.spacing(1.75)
3609
+ }
3565
3610
  }),
3566
3611
  contained: {
3567
3612
  marginLeft: undefined,