@superdispatch/ui 0.24.1 → 0.24.3

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 (12) hide show
  1. package/dist-node/index.js +83 -26
  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 +31 -16
  6. package/dist-src/text-field/TextFieldOverrides.js +39 -3
  7. package/dist-src/theme/Color.js +1 -0
  8. package/dist-src/theme/ThemeProvider.js +1 -1
  9. package/dist-types/index.d.ts +1 -0
  10. package/dist-web/index.js +83 -26
  11. package/dist-web/index.js.map +1 -1
  12. 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
@@ -6,7 +6,7 @@ function line(color) {
6
6
 
7
7
  export function overrideLink(theme) {
8
8
  theme.props.MuiLink = {
9
- underline: 'none',
9
+ underline: 'always',
10
10
  color: 'textPrimary'
11
11
  };
12
12
  theme.overrides.MuiLink = {
@@ -18,30 +18,45 @@ export function overrideLink(theme) {
18
18
  '&:focus': {
19
19
  outline: 'none'
20
20
  },
21
- '&:hover, &:active': {
22
- backgroundImage: line('currentColor')
23
- },
24
- '&.MuiTypography-colorTextPrimary': {
21
+ '&:disabled': {
22
+ color: Color.Dark100,
25
23
  backgroundImage: line(Color.Silver500),
26
24
  '&:focus, &:hover, &:active': {
27
- color: Color.Blue500,
28
- backgroundImage: line(Color.Blue500)
25
+ color: Color.Dark100,
26
+ backgroundImage: line(Color.Silver500)
29
27
  }
30
28
  },
31
- '&.MuiTypography-colorError': {
32
- color: Color.Red500,
29
+ '&.MuiLink-underlineAlways': {
30
+ textDecoration: 'none',
33
31
  backgroundImage: line(Color.Silver500),
32
+ '&:hover, &:active': {
33
+ backgroundImage: line('currentColor')
34
+ }
35
+ },
36
+ '&.MuiLink-underlineHover': {
37
+ backgroundImage: 'none',
38
+ '&:hover, &:active': {
39
+ textDecoration: 'none',
40
+ backgroundImage: line('currentColor')
41
+ }
42
+ },
43
+ '&.MuiLink-underlineNone': {
44
+ backgroundImage: 'none',
34
45
  '&:focus, &:hover, &:active': {
35
- color: Color.Red500,
36
- backgroundImage: line(Color.Red500)
46
+ backgroundImage: 'none'
37
47
  }
38
48
  },
39
- '&.MuiTypography-colorTextSecondary': {
40
- color: Color.Dark100,
41
- backgroundImage: line(Color.Silver500),
49
+ '&.MuiTypography-colorPrimary': {
50
+ backgroundImage: 'none',
51
+ '&:hover, &:active': {
52
+ textDecoration: 'none',
53
+ backgroundImage: line('currentColor')
54
+ }
55
+ },
56
+ '&.MuiTypography-colorTextPrimary, &.MuiTypography-colorTextSecondary': {
42
57
  '&:focus, &:hover, &:active': {
43
- color: Color.Dark100,
44
- backgroundImage: line(Color.Silver500)
58
+ color: Color.Blue500,
59
+ backgroundImage: line(Color.Blue500)
45
60
  }
46
61
  }
47
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,11 +39,37 @@ 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',
70
+ '&.MuiInputBase-input': {
71
+ fontSize: theme.spacing(1.75)
72
+ },
44
73
  height: theme.spacing(3),
45
74
  [sm]: {
46
75
  height: theme.spacing(2.5)
@@ -174,7 +203,14 @@ export function overrideTextField(theme) {
174
203
  };
175
204
  theme.overrides.MuiFormHelperText = {
176
205
  root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
177
- marginTop: theme.spacing(0.5)
206
+ color: Color.Dark300,
207
+ marginTop: theme.spacing(0.5),
208
+ '&.Mui-error': {
209
+ color: Color.Red500
210
+ },
211
+ '&.MuiFormHelperText-root': {
212
+ fontSize: theme.spacing(1.75)
213
+ }
178
214
  }),
179
215
  contained: {
180
216
  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-src/theme/ThemeProvider.js CHANGED
@@ -51,7 +51,7 @@ function createSuperDispatchTheme() {
51
51
  },
52
52
  text: {
53
53
  primary: Color.Dark500,
54
- secondary: Color.Dark200,
54
+ secondary: Color.Dark300,
55
55
  hint: Color.Dark100,
56
56
  disabled: Color.Dark100
57
57
  },
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
  })]
@@ -3026,7 +3032,7 @@ function line(color) {
3026
3032
 
3027
3033
  function overrideLink(theme) {
3028
3034
  theme.props.MuiLink = {
3029
- underline: 'none',
3035
+ underline: 'always',
3030
3036
  color: 'textPrimary'
3031
3037
  };
3032
3038
  theme.overrides.MuiLink = {
@@ -3038,30 +3044,45 @@ function overrideLink(theme) {
3038
3044
  '&:focus': {
3039
3045
  outline: 'none'
3040
3046
  },
3041
- '&:hover, &:active': {
3042
- backgroundImage: line('currentColor')
3043
- },
3044
- '&.MuiTypography-colorTextPrimary': {
3047
+ '&:disabled': {
3048
+ color: Color.Dark100,
3045
3049
  backgroundImage: line(Color.Silver500),
3046
3050
  '&:focus, &:hover, &:active': {
3047
- color: Color.Blue500,
3048
- backgroundImage: line(Color.Blue500)
3051
+ color: Color.Dark100,
3052
+ backgroundImage: line(Color.Silver500)
3049
3053
  }
3050
3054
  },
3051
- '&.MuiTypography-colorError': {
3052
- color: Color.Red500,
3055
+ '&.MuiLink-underlineAlways': {
3056
+ textDecoration: 'none',
3053
3057
  backgroundImage: line(Color.Silver500),
3058
+ '&:hover, &:active': {
3059
+ backgroundImage: line('currentColor')
3060
+ }
3061
+ },
3062
+ '&.MuiLink-underlineHover': {
3063
+ backgroundImage: 'none',
3064
+ '&:hover, &:active': {
3065
+ textDecoration: 'none',
3066
+ backgroundImage: line('currentColor')
3067
+ }
3068
+ },
3069
+ '&.MuiLink-underlineNone': {
3070
+ backgroundImage: 'none',
3054
3071
  '&:focus, &:hover, &:active': {
3055
- color: Color.Red500,
3056
- backgroundImage: line(Color.Red500)
3072
+ backgroundImage: 'none'
3057
3073
  }
3058
3074
  },
3059
- '&.MuiTypography-colorTextSecondary': {
3060
- color: Color.Dark100,
3061
- backgroundImage: line(Color.Silver500),
3075
+ '&.MuiTypography-colorPrimary': {
3076
+ backgroundImage: 'none',
3077
+ '&:hover, &:active': {
3078
+ textDecoration: 'none',
3079
+ backgroundImage: line('currentColor')
3080
+ }
3081
+ },
3082
+ '&.MuiTypography-colorTextPrimary, &.MuiTypography-colorTextSecondary': {
3062
3083
  '&:focus, &:hover, &:active': {
3063
- color: Color.Dark100,
3064
- backgroundImage: line(Color.Silver500)
3084
+ color: Color.Blue500,
3085
+ backgroundImage: line(Color.Blue500)
3065
3086
  }
3066
3087
  }
3067
3088
  },
@@ -3410,7 +3431,10 @@ function overrideTextField(theme) {
3410
3431
  };
3411
3432
  theme.overrides.MuiFormLabel = {
3412
3433
  root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
3413
- color: Color.Dark400,
3434
+ color: Color.Dark500,
3435
+ '&.MuiFormLabel-root': {
3436
+ fontSize: theme.spacing(1.75)
3437
+ },
3414
3438
  '&$error': {
3415
3439
  color: undefined
3416
3440
  },
@@ -3425,11 +3449,37 @@ function overrideTextField(theme) {
3425
3449
  theme.overrides.MuiInputBase = {
3426
3450
  root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
3427
3451
  '&$disabled': {
3428
- backgroundColor: Color.Silver100
3452
+ backgroundColor: Color.Silver30
3453
+ },
3454
+ '&$error': {
3455
+ borderColor: Color.Red500
3456
+ },
3457
+ '&.MuiOutlinedInput-root': {
3458
+ '& fieldset': {
3459
+ borderColor: Color.Silver500
3460
+ },
3461
+ '&:hover fieldset': {
3462
+ borderColor: Color.Dark100
3463
+ },
3464
+ '&.Mui-focused fieldset': {
3465
+ borderColor: Color.Blue500
3466
+ },
3467
+ '&.Mui-error fieldset': {
3468
+ borderColor: Color.Red500
3469
+ },
3470
+ '&.Mui-error:hover fieldset': {
3471
+ borderColor: Color.Red500
3472
+ },
3473
+ '&.Mui-disabled fieldset': {
3474
+ borderColor: Color.Silver400
3475
+ }
3429
3476
  }
3430
3477
  }),
3431
3478
  input: {
3432
3479
  textOverflow: 'ellipsis',
3480
+ '&.MuiInputBase-input': {
3481
+ fontSize: theme.spacing(1.75)
3482
+ },
3433
3483
  height: theme.spacing(3),
3434
3484
  [sm]: {
3435
3485
  height: theme.spacing(2.5)
@@ -3563,7 +3613,14 @@ function overrideTextField(theme) {
3563
3613
  };
3564
3614
  theme.overrides.MuiFormHelperText = {
3565
3615
  root: _objectSpread(_objectSpread({}, theme.typography.body2), {}, {
3566
- marginTop: theme.spacing(0.5)
3616
+ color: Color.Dark300,
3617
+ marginTop: theme.spacing(0.5),
3618
+ '&.Mui-error': {
3619
+ color: Color.Red500
3620
+ },
3621
+ '&.MuiFormHelperText-root': {
3622
+ fontSize: theme.spacing(1.75)
3623
+ }
3567
3624
  }),
3568
3625
  contained: {
3569
3626
  marginLeft: undefined,
@@ -3752,7 +3809,7 @@ function createSuperDispatchTheme() {
3752
3809
  },
3753
3810
  text: {
3754
3811
  primary: Color.Dark500,
3755
- secondary: Color.Dark200,
3812
+ secondary: Color.Dark300,
3756
3813
  hint: Color.Dark100,
3757
3814
  disabled: Color.Dark100
3758
3815
  },