[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,18 @@
+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">
+      {['primary', 'secondary', 'error', 'info', 'success', 'warning'].map(
+        (color) => (
+          <Badge badgeContent={4} color={color}>
+            <MailIcon color="action" />
+          </Badge>
+        ),
+      )}
+    </Stack>
+  );
+}

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

@@ -0,0 +1,18 @@
+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">
+      {(
+        ['primary', 'secondary', 'error', 'info', 'success', 'warning'] as const
+      ).map((color) => (
+        <Badge badgeContent={4} color={color}>
+          <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 Badge
+
+Use `color` prop to apply theme color 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

@@ -1,17 +1,83 @@
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import Box from '@material-ui/core/Box';
 import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+
+const ColorSelector = ({ color, setColor }) => {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+  return (
+    <span>
+      <Tooltip title="Change color">
+        <IconButton
+          onClick={(event) => setAnchorEl(event.currentTarget)}
+          id="color-button"
+          aria-controls="color-menu"
+          aria-haspopup="true"
+          aria-expanded={open ? 'true' : undefined}
+          sx={{ lineHeight: 1 }}
+          color="inherit"
+        >
+          🎨
+        </IconButton>
+      </Tooltip>
+      <Menu
+        id="color-menu"
+        variant="selectedMenu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={() => setAnchorEl(null)}
+        MenuListProps={{
+          'aria-labelledby': 'color-button',
+        }}
+      >
+        {['primary', 'secondary', 'error', 'info', 'success', 'warning'].map(
+          (item) => (
+            <MenuItem
+              key={item}
+              selected={item === color}
+              onClick={() => {
+                setColor(item);
+                setAnchorEl(null);
+              }}
+            >
+              {item}
+            </MenuItem>
+          ),
+        )}
+      </Menu>
+    </span>
+  );
+};
+
+ColorSelector.propTypes = {
+  color: PropTypes.oneOf([
+    'error',
+    'info',
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+  ]).isRequired,
+  setColor: PropTypes.func.isRequired,
+};
 
 export default function ColorButtons() {
+  const [color, setColor] = React.useState('secondary');
   return (
     <Box sx={{ '& > :not(style)': { m: 1 } }}>
-      <Button color="secondary">Secondary</Button>
-      <Button variant="contained" color="secondary">
-        Secondary
+      <Button color={color}>{color}</Button>
+      <Button variant="contained" color={color}>
+        {color}
       </Button>
-      <Button variant="outlined" color="secondary">
-        Secondary
+      <Button variant="outlined" color={color}>
+        {color}
       </Button>
+      <ColorSelector color={color} setColor={setColor} />
     </Box>
   );
 }