@hipay/hipay-material-ui 3.13.5 → 3.14.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.
@@ -47,7 +47,7 @@ var styles = function styles(theme) {
47
47
  },
48
48
  line: {
49
49
  display: 'block',
50
- borderColor: theme.palette.grey[600],
50
+ borderColor: '#757575',
51
51
  borderLeftStyle: 'solid',
52
52
  borderLeftWidth: 2,
53
53
  height: 40,
package/HiChip/HiChip.js CHANGED
@@ -33,7 +33,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
33
33
  width: 'fit-content',
34
34
  height: 24,
35
35
  borderRadius: 12,
36
- backgroundColor: theme.palette.grey[300],
36
+ backgroundColor: '#e0e0e0',
37
37
  color: theme.palette.neutral.dark,
38
38
  padding: 8,
39
39
  alignItems: 'center',
@@ -94,7 +94,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
94
94
  navigate: {
95
95
  // Remove grey highlight
96
96
  WebkitTapHighlightColor: 'transparent',
97
- backgroundColor: theme.palette.grey[300],
97
+ backgroundColor: '#e0e0e0',
98
98
  color: theme.palette.neutral.normal,
99
99
  marginRight: 2,
100
100
  marginLeft: 2,
@@ -102,7 +102,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
102
102
  cursor: 'pointer',
103
103
  '&:hover, &:focus': {
104
104
  backgroundColor: theme.palette.primary.main,
105
- color: theme.palette.grey[300]
105
+ color: '#e0e0e0'
106
106
  },
107
107
  position: 'relative'
108
108
  },
@@ -57,7 +57,7 @@ var styles = function styles(theme) {
57
57
  // Remove grey highlight
58
58
  WebkitTapHighlightColor: 'transparent',
59
59
  '&:hover, &:focus': {
60
- backgroundColor: (0, _styles.emphasize)(theme.palette.grey[300], 0.08)
60
+ backgroundColor: (0, _styles.emphasize)('#e0e0e0', 0.08)
61
61
  }
62
62
  }),
63
63
  active: {
@@ -68,7 +68,7 @@ var styles = function styles(theme) {
68
68
  }
69
69
  },
70
70
  inactive: {
71
- backgroundColor: theme.palette.grey[300],
71
+ backgroundColor: '#e0e0e0',
72
72
  color: theme.palette.neutral.dark
73
73
  },
74
74
  icon: {
@@ -112,7 +112,7 @@ var styles = function styles(theme) {
112
112
  WebkitTapHighlightColor: 'transparent',
113
113
  cursor: 'pointer',
114
114
  '&:hover, &:focus': {
115
- backgroundColor: theme.palette.grey[300]
115
+ backgroundColor: '#e0e0e0'
116
116
  }
117
117
  }
118
118
  };
package/HiPin/HiPin.js CHANGED
@@ -30,7 +30,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
30
30
  fontWeight: theme.typography.fontWeightMedium,
31
31
  fontFamily: theme.typography.fontFamily,
32
32
  color: theme.palette.text.primary,
33
- backgroundColor: theme.palette.grey[300]
33
+ backgroundColor: '#e0e0e0'
34
34
  },
35
35
  clickable: {
36
36
  cursor: 'pointer'
@@ -135,7 +135,7 @@ var styles = function styles(theme) {
135
135
  width: '100%'
136
136
  }),
137
137
  placeholder: {
138
- color: theme.palette.grey[400]
138
+ color: '#bdbdbd'
139
139
  },
140
140
  icon: {
141
141
  transition: theme.transitions.create(['opacity', 'transform'], {
@@ -62,16 +62,16 @@ var styles = function styles(theme) {
62
62
  padding: 2
63
63
  },
64
64
  iconDisabled: {
65
- backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
66
- color: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
65
+ backgroundColor: theme.palette.mode === 'light' ? '#bdbdbd' : '#424242',
66
+ color: theme.palette.mode === 'light' ? '#fafafa' : '#bdbdbd',
67
67
  '&:not($iconChecked)': {
68
- color: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
68
+ color: theme.palette.mode === 'light' ? '#bdbdbd' : '#424242'
69
69
  }
70
70
  },
71
71
  // For SwitchBase
72
72
  switchBaseRoot: {
73
73
  zIndex: 1,
74
- color: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
74
+ color: theme.palette.mode === 'light' ? '#fafafa' : '#bdbdbd',
75
75
  transition: theme.transitions.create('transform', {
76
76
  duration: theme.transitions.duration.shortest
77
77
  }),
@@ -79,7 +79,7 @@ var styles = function styles(theme) {
79
79
  width: 40
80
80
  },
81
81
  disabled: {
82
- color: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
82
+ color: theme.palette.mode === 'light' ? '#bdbdbd' : '#424242',
83
83
  '& + $bar': {
84
84
  backgroundColor: theme.palette.mode === 'light' ? '#000' : '#fff',
85
85
  opacity: theme.palette.mode === 'light' ? 0.12 : 0.1
@@ -31,7 +31,7 @@ var styles = function styles(theme) {
31
31
  width: '100%',
32
32
  maxWidth: 200,
33
33
  minWidth: 120,
34
- borderBottom: "solid 1px ".concat(theme.palette.grey[300])
34
+ borderBottom: "solid 1px ".concat(theme.palette.input.bottomLine)
35
35
  },
36
36
  button: {
37
37
  whiteSpace: 'nowrap',
@@ -93,8 +93,8 @@ var styles = function styles(theme) {
93
93
  },
94
94
  disabled: {
95
95
  '&$checked': {
96
- backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
97
- color: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[400]
96
+ backgroundColor: theme.palette.mode === 'light' ? '#bdbdbd' : '#424242',
97
+ color: theme.palette.mode === 'light' ? '#fafafa' : '#bdbdbd'
98
98
  },
99
99
  boxShadow: 'none'
100
100
  }
@@ -47,7 +47,7 @@ var styles = function styles(theme) {
47
47
  },
48
48
  line: {
49
49
  display: 'block',
50
- borderColor: theme.palette.grey[600],
50
+ borderColor: '#757575',
51
51
  borderLeftStyle: 'solid',
52
52
  borderLeftWidth: 2,
53
53
  height: 40,
@@ -33,7 +33,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
33
33
  width: 'fit-content',
34
34
  height: 24,
35
35
  borderRadius: 12,
36
- backgroundColor: theme.palette.grey[300],
36
+ backgroundColor: '#e0e0e0',
37
37
  color: theme.palette.neutral.dark,
38
38
  padding: 8,
39
39
  alignItems: 'center',
@@ -94,7 +94,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
94
94
  navigate: {
95
95
  // Remove grey highlight
96
96
  WebkitTapHighlightColor: 'transparent',
97
- backgroundColor: theme.palette.grey[300],
97
+ backgroundColor: '#e0e0e0',
98
98
  color: theme.palette.neutral.normal,
99
99
  marginRight: 2,
100
100
  marginLeft: 2,
@@ -102,7 +102,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
102
102
  cursor: 'pointer',
103
103
  '&:hover, &:focus': {
104
104
  backgroundColor: theme.palette.primary.main,
105
- color: theme.palette.grey[300]
105
+ color: '#e0e0e0'
106
106
  },
107
107
  position: 'relative'
108
108
  },
@@ -57,7 +57,7 @@ var styles = function styles(theme) {
57
57
  // Remove grey highlight
58
58
  WebkitTapHighlightColor: 'transparent',
59
59
  '&:hover, &:focus': {
60
- backgroundColor: (0, _styles.emphasize)(theme.palette.grey[300], 0.08)
60
+ backgroundColor: (0, _styles.emphasize)('#e0e0e0', 0.08)
61
61
  }
62
62
  }),
63
63
  active: {
@@ -68,7 +68,7 @@ var styles = function styles(theme) {
68
68
  }
69
69
  },
70
70
  inactive: {
71
- backgroundColor: theme.palette.grey[300],
71
+ backgroundColor: '#e0e0e0',
72
72
  color: theme.palette.neutral.dark
73
73
  },
74
74
  icon: {
@@ -112,7 +112,7 @@ var styles = function styles(theme) {
112
112
  WebkitTapHighlightColor: 'transparent',
113
113
  cursor: 'pointer',
114
114
  '&:hover, &:focus': {
115
- backgroundColor: theme.palette.grey[300]
115
+ backgroundColor: '#e0e0e0'
116
116
  }
117
117
  }
118
118
  };
package/es/HiPin/HiPin.js CHANGED
@@ -30,7 +30,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
30
30
  fontWeight: theme.typography.fontWeightMedium,
31
31
  fontFamily: theme.typography.fontFamily,
32
32
  color: theme.palette.text.primary,
33
- backgroundColor: theme.palette.grey[300]
33
+ backgroundColor: '#e0e0e0'
34
34
  },
35
35
  clickable: {
36
36
  cursor: 'pointer'
@@ -135,7 +135,7 @@ var styles = function styles(theme) {
135
135
  width: '100%'
136
136
  }),
137
137
  placeholder: {
138
- color: theme.palette.grey[400]
138
+ color: '#bdbdbd'
139
139
  },
140
140
  icon: {
141
141
  transition: theme.transitions.create(['opacity', 'transform'], {
@@ -62,16 +62,16 @@ var styles = function styles(theme) {
62
62
  padding: 2
63
63
  },
64
64
  iconDisabled: {
65
- backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
66
- color: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
65
+ backgroundColor: theme.palette.mode === 'light' ? '#bdbdbd' : '#424242',
66
+ color: theme.palette.mode === 'light' ? '#fafafa' : '#bdbdbd',
67
67
  '&:not($iconChecked)': {
68
- color: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
68
+ color: theme.palette.mode === 'light' ? '#bdbdbd' : '#424242'
69
69
  }
70
70
  },
71
71
  // For SwitchBase
72
72
  switchBaseRoot: {
73
73
  zIndex: 1,
74
- color: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
74
+ color: theme.palette.mode === 'light' ? '#fafafa' : '#bdbdbd',
75
75
  transition: theme.transitions.create('transform', {
76
76
  duration: theme.transitions.duration.shortest
77
77
  }),
@@ -79,7 +79,7 @@ var styles = function styles(theme) {
79
79
  width: 40
80
80
  },
81
81
  disabled: {
82
- color: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
82
+ color: theme.palette.mode === 'light' ? '#bdbdbd' : '#424242',
83
83
  '& + $bar': {
84
84
  backgroundColor: theme.palette.mode === 'light' ? '#000' : '#fff',
85
85
  opacity: theme.palette.mode === 'light' ? 0.12 : 0.1
@@ -31,7 +31,7 @@ var styles = function styles(theme) {
31
31
  width: '100%',
32
32
  maxWidth: 200,
33
33
  minWidth: 120,
34
- borderBottom: "solid 1px ".concat(theme.palette.grey[300])
34
+ borderBottom: "solid 1px ".concat(theme.palette.input.bottomLine)
35
35
  },
36
36
  button: {
37
37
  whiteSpace: 'nowrap',
@@ -93,8 +93,8 @@ var styles = function styles(theme) {
93
93
  },
94
94
  disabled: {
95
95
  '&$checked': {
96
- backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
97
- color: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[400]
96
+ backgroundColor: theme.palette.mode === 'light' ? '#bdbdbd' : '#424242',
97
+ color: theme.palette.mode === 'light' ? '#fafafa' : '#bdbdbd'
98
98
  },
99
99
  boxShadow: 'none'
100
100
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hipay/hipay-material-ui",
3
3
  "private": false,
4
- "version": "3.13.5",
4
+ "version": "3.14.0",
5
5
  "description": "React components that implement Google's Material Design.",
6
6
  "repository": {
7
7
  "type": "git",
@@ -13,7 +13,7 @@
13
13
  },
14
14
  "homepage": "http://materialui.hipay.dev.local/",
15
15
  "peerDependencies": {
16
- "@hipay/design-system": "^1.0.2",
16
+ "@hipay/design-system": "^1.3.1",
17
17
  "@mui/material": "5.8.4",
18
18
  "@mui/styles": "5.8.4",
19
19
  "@mui/styled-engine": "npm:@mui/styled-engine-sc@5.10.0",