[theme] Add base color palette type to components

docs/pages/api-docs/badge.json

@@ -13,7 +13,7 @@
     "color": {
       "type": {
         "name": "union",
-        "description": "'default'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       },
       "default": "'default'"
     },
@@ -57,7 +57,10 @@
       "invisible",
       "colorPrimary",
       "colorSecondary",
-      "colorError"
+      "colorError",
+      "colorInfo",
+      "colorSuccess",
+      "colorWarning"
     ],
     "globalClasses": {},
     "name": "MuiBadge"

docs/pages/api-docs/checkbox.json

@@ -6,7 +6,7 @@
     "color": {
       "type": {
         "name": "union",
-        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'succes'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       },
       "default": "'primary'"
     },

docs/pages/api-docs/chip.json

@@ -7,7 +7,7 @@
     "color": {
       "type": {
         "name": "union",
-        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       },
       "default": "'default'"
     },

docs/pages/api-docs/circular-progress.json

@@ -4,7 +4,7 @@
     "color": {
       "type": {
         "name": "union",
-        "description": "'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+        "description": "'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       },
       "default": "'primary'"
     },

docs/pages/api-docs/form-control.json

@@ -5,7 +5,7 @@
     "color": {
       "type": {
         "name": "union",
-        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       },
       "default": "'primary'"
     },

docs/pages/api-docs/form-label.json

@@ -2,7 +2,12 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
-    "color": { "type": { "name": "enum", "description": "'primary'<br>&#124;&nbsp;'secondary'" } },
+    "color": {
+      "type": {
+        "name": "enum",
+        "description": "'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'"
+      }
+    },
     "component": { "type": { "name": "elementType" } },
     "disabled": { "type": { "name": "bool" } },
     "error": { "type": { "name": "bool" } },

docs/pages/api-docs/icon-button.json

@@ -5,7 +5,7 @@
     "color": {
       "type": {
         "name": "union",
-        "description": "'inherit'<br>&#124;&nbsp;'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+        "description": "'inherit'<br>&#124;&nbsp;'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       },
       "default": "'default'"
     },

docs/pages/api-docs/icon.json

@@ -6,7 +6,7 @@
     "color": {
       "type": {
         "name": "union",
-        "description": "'action'<br>&#124;&nbsp;'disabled'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+        "description": "'inherit'<br>&#124;&nbsp;'action'<br>&#124;&nbsp;'disabled'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       },
       "default": "'inherit'"
     },

docs/pages/api-docs/input-base.json

@@ -6,7 +6,7 @@
     "color": {
       "type": {
         "name": "union",
-        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       }
     },
     "components": {

docs/pages/api-docs/input-label.json

@@ -2,7 +2,12 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
-    "color": { "type": { "name": "enum", "description": "'primary'<br>&#124;&nbsp;'secondary'" } },
+    "color": {
+      "type": {
+        "name": "enum",
+        "description": "'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'"
+      }
+    },
     "disableAnimation": { "type": { "name": "bool" } },
     "disabled": { "type": { "name": "bool" } },
     "error": { "type": { "name": "bool" } },

docs/pages/api-docs/radio.json

@@ -6,7 +6,7 @@
     "color": {
       "type": {
         "name": "union",
-        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       },
       "default": "'primary'"
     },

docs/pages/api-docs/svg-icon.json

@@ -5,7 +5,7 @@
     "color": {
       "type": {
         "name": "union",
-        "description": "'action'<br>&#124;&nbsp;'disabled'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+        "description": "'inherit'<br>&#124;&nbsp;'action'<br>&#124;&nbsp;'disabled'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       },
       "default": "'inherit'"
     },

docs/pages/api-docs/switch.json

@@ -6,7 +6,7 @@
     "color": {
       "type": {
         "name": "union",
-        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+        "description": "'default'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       },
       "default": "'primary'"
     },

docs/pages/api-docs/text-field.json

@@ -6,7 +6,7 @@
     "color": {
       "type": {
         "name": "union",
-        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'error'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'<br>&#124;&nbsp;string"
       },
       "default": "'primary'"
     },

docs/pages/api-docs/timeline-dot.json

@@ -5,7 +5,7 @@
     "color": {
       "type": {
         "name": "enum",
-        "description": "'grey'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'"
+        "description": "'error'<br>&#124;&nbsp;'grey'<br>&#124;&nbsp;'info'<br>&#124;&nbsp;'inherit'<br>&#124;&nbsp;'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'success'<br>&#124;&nbsp;'warning'"
       },
       "default": "'grey'"
     },

docs/src/pages/components/badges/ColorBadge.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Badge from '@material-ui/core/Badge';
+import Stack from '@material-ui/core/Stack';
+import MailIcon from '@material-ui/icons/Mail';
+
+export default function ColorBadge() {
+  return (
+    <Stack spacing={2} direction="row">
+      <Badge badgeContent={4} color="secondary">
+        <MailIcon color="action" />
+      </Badge>
+      <Badge badgeContent={4} color="success">
+        <MailIcon color="action" />
+      </Badge>
+    </Stack>
+  );
+}

docs/src/pages/components/badges/ColorBadge.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Badge from '@material-ui/core/Badge';
+import Stack from '@material-ui/core/Stack';
+import MailIcon from '@material-ui/icons/Mail';
+
+export default function ColorBadge() {
+  return (
+    <Stack spacing={2} direction="row">
+      <Badge badgeContent={4} color="secondary">
+        <MailIcon color="action" />
+      </Badge>
+      <Badge badgeContent={4} color="success">
+        <MailIcon color="action" />
+      </Badge>
+    </Stack>
+  );
+}

docs/src/pages/components/badges/SimpleBadge.js

@@ -1,17 +1,11 @@
 import * as React from 'react';
-import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
 export default function SimpleBadge() {
   return (
-    <Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
-      <Badge badgeContent={4} color="secondary">
-        <MailIcon />
-      </Badge>
-      <Badge badgeContent={4} color="error">
-        <MailIcon />
-      </Badge>
-    </Stack>
+    <Badge badgeContent={4} color="primary">
+      <MailIcon color="action" />
+    </Badge>
   );
 }

docs/src/pages/components/badges/SimpleBadge.tsx

@@ -1,17 +1,11 @@
 import * as React from 'react';
-import Stack from '@material-ui/core/Stack';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
 export default function SimpleBadge() {
   return (
-    <Stack spacing={4} direction="row" sx={{ color: 'action.active' }}>
-      <Badge badgeContent={4} color="secondary">
-        <MailIcon />
-      </Badge>
-      <Badge badgeContent={4} color="error">
-        <MailIcon />
-      </Badge>
-    </Stack>
+    <Badge badgeContent={4} color="primary">
+      <MailIcon color="action" />
+    </Badge>
   );
 }

docs/src/pages/components/badges/badges.md

@@ -16,6 +16,12 @@ Examples of badges containing text, using primary and secondary colors. The badg
 
 {{"demo": "pages/components/badges/SimpleBadge.js"}}
 
+## Color
+
+Use `color` prop to apply theme palette to component.
+
+{{"demo": "pages/components/badges/ColorBadge.js"}}
+
 ## Customized badges
 
 Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/how-to-customize/).

docs/src/pages/components/buttons/ColorButtons.js

@@ -6,11 +6,11 @@ export default function ColorButtons() {
   return (
     <Box sx={{ '& > :not(style)': { m: 1 } }}>
       <Button color="secondary">Secondary</Button>
-      <Button variant="contained" color="secondary">
-        Secondary
+      <Button variant="contained" color="success">
+        Success
       </Button>
-      <Button variant="outlined" color="secondary">
-        Secondary
+      <Button variant="outlined" color="error">
+        Error
       </Button>
     </Box>
   );

docs/src/pages/components/buttons/ColorButtons.tsx

@@ -6,11 +6,11 @@ export default function ColorButtons() {
   return (
     <Box sx={{ '& > :not(style)': { m: 1 } }}>
       <Button color="secondary">Secondary</Button>
-      <Button variant="contained" color="secondary">
-        Secondary
+      <Button variant="contained" color="success">
+        Success
       </Button>
-      <Button variant="outlined" color="secondary">
-        Secondary
+      <Button variant="outlined" color="error">
+        Error
       </Button>
     </Box>
   );

docs/src/pages/components/buttons/IconButtonColors.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import IconButton from '@material-ui/core/IconButton';
+import Fingerprint from '@material-ui/icons/Fingerprint';
+
+export default function IconButtonColors() {
+  return (
+    <Box sx={{ '& button': { m: 1 } }}>
+      <IconButton aria-label="fingerprint" color="secondary">
+        <Fingerprint />
+      </IconButton>
+      <IconButton aria-label="fingerprint" color="success">
+        <Fingerprint />
+      </IconButton>
+    </Box>
+  );
+}

docs/src/pages/components/buttons/IconButtonColors.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Box from '@material-ui/core/Box';
+import IconButton from '@material-ui/core/IconButton';
+import Fingerprint from '@material-ui/icons/Fingerprint';
+
+export default function IconButtonColors() {
+  return (
+    <Box sx={{ '& button': { m: 1 } }}>
+      <IconButton aria-label="fingerprint" color="secondary">
+        <Fingerprint />
+      </IconButton>
+      <IconButton aria-label="fingerprint" color="success">
+        <Fingerprint />
+      </IconButton>
+    </Box>
+  );
+}

docs/src/pages/components/buttons/buttons.md

@@ -109,6 +109,12 @@ For larger or smaller icon buttons, use the `size` prop.
 
 {{"demo": "pages/components/buttons/IconButtonSizes.js"}}
 
+### Colors
+
+Use `color` prop to apply theme color palette to component.
+
+{{"demo": "pages/components/buttons/IconButtonColors.js"}}
+
 ## Customized buttons
 
 Here are some examples of customizing the component. You can learn more about this in the

docs/src/pages/components/checkboxes/ColorCheckboxes.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { green } from '@material-ui/core/colors';
+import { pink } from '@material-ui/core/colors';
 import Checkbox from '@material-ui/core/Checkbox';
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -9,14 +9,15 @@ export default function ColorCheckboxes() {
     <div>
       <Checkbox {...label} defaultChecked />
       <Checkbox {...label} defaultChecked color="secondary" />
+      <Checkbox {...label} defaultChecked color="success" />
       <Checkbox {...label} defaultChecked color="default" />
       <Checkbox
         {...label}
         defaultChecked
         sx={{
-          color: green[800],
+          color: pink[800],
           '&.Mui-checked': {
-            color: green[600],
+            color: pink[600],
           },
         }}
       />

docs/src/pages/components/checkboxes/ColorCheckboxes.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { green } from '@material-ui/core/colors';
+import { pink } from '@material-ui/core/colors';
 import Checkbox from '@material-ui/core/Checkbox';
 
 const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
@@ -9,14 +9,15 @@ export default function ColorCheckboxes() {
     <div>
       <Checkbox {...label} defaultChecked />
       <Checkbox {...label} defaultChecked color="secondary" />
+      <Checkbox {...label} defaultChecked color="success" />
       <Checkbox {...label} defaultChecked color="default" />
       <Checkbox
         {...label}
         defaultChecked
         sx={{
-          color: green[800],
+          color: pink[800],
           '&.Mui-checked': {
-            color: green[600],
+            color: pink[600],
           },
         }}
       />

docs/src/pages/components/chips/ChipsPlayground.js

@@ -157,6 +157,18 @@ function ChipsPlayground() {
                   control={<Radio />}
                   label="secondary"
                 />
+                <FormControlLabel value="error" control={<Radio />} label="error" />
+                <FormControlLabel value="info" control={<Radio />} label="info" />
+                <FormControlLabel
+                  value="success"
+                  control={<Radio />}
+                  label="success"
+                />
+                <FormControlLabel
+                  value="warning"
+                  control={<Radio />}
+                  label="warning"
+                />
               </RadioGroup>
             </FormControl>
           </Grid>