[palette] Standardize the secondary color

pages/api/icon-button.md

@@ -28,9 +28,9 @@ Any other properties supplied will be [spread to the root element](/guides/api#s
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 - `root`
-- `colorSecondary`
-- `colorPrimary`
 - `colorInherit`
+- `colorPrimary`
+- `colorSecondary`
 - `disabled`
 - `label`
 - `icon`

pages/api/icon.md

@@ -23,11 +23,11 @@ Any other properties supplied will be [spread to the root element](/guides/api#s
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 - `root`
+- `colorPrimary`
 - `colorSecondary`
 - `colorAction`
 - `colorDisabled`
 - `colorError`
-- `colorPrimary`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/v1-beta/src/Icon/Icon.js)

pages/api/svg-icon.md

@@ -26,11 +26,11 @@ Any other properties supplied will be [spread to the root element](/guides/api#s
 You can override all the class names injected by Material-UI thanks to the `classes` property.
 This property accepts the following keys:
 - `root`
+- `colorPrimary`
 - `colorSecondary`
 - `colorAction`
 - `colorDisabled`
 - `colorError`
-- `colorPrimary`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section
 and the [implementation of the component](https://github.com/mui-org/material-ui/tree/v1-beta/src/SvgIcon/SvgIcon.js)

pages/api/tab.md

@@ -26,13 +26,13 @@ You can override all the class names injected by Material-UI thanks to the `clas
 This property accepts the following keys:
 - `root`
 - `rootLabelIcon`
-- `rootSecondary`
-- `rootSecondarySelected`
-- `rootSecondaryDisabled`
+- `rootInherit`
 - `rootPrimary`
 - `rootPrimarySelected`
 - `rootPrimaryDisabled`
-- `rootInherit`
+- `rootSecondary`
+- `rootSecondarySelected`
+- `rootSecondaryDisabled`
 - `rootInheritSelected`
 - `rootInheritDisabled`
 - `fullWidth`

pages/api/typography.md

@@ -50,8 +50,8 @@ This property accepts the following keys:
 - `paragraph`
 - `colorInherit`
 - `colorPrimary`
-- `colorTextSecondary`
 - `colorSecondary`
+- `colorTextSecondary`
 - `colorError`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes) section

src/AppBar/AppBar.js

@@ -41,8 +41,8 @@ export const styles = theme => ({
     color: theme.palette.primary.contrastText,
   },
   colorSecondary: {
-    backgroundColor: theme.palette.secondary.light,
-    color: theme.palette.getContrastText(theme.palette.secondary.light),
+    backgroundColor: theme.palette.secondary.main,
+    color: theme.palette.secondary.contrastText,
   },
 });
 

src/Badge/Badge.js

@@ -38,8 +38,8 @@ export const styles = theme => ({
     color: theme.palette.primary.contrastText,
   },
   colorSecondary: {
-    backgroundColor: theme.palette.secondary.light,
-    color: theme.palette.getContrastText(theme.palette.secondary.light),
+    backgroundColor: theme.palette.secondary.main,
+    color: theme.palette.secondary.contrastText,
   },
 });
 

src/Button/Button.js

@@ -55,9 +55,9 @@ export const styles = theme => ({
     },
   },
   flatSecondary: {
-    color: theme.palette.secondary.light,
+    color: theme.palette.secondary.main,
     '&:hover': {
-      backgroundColor: fade(theme.palette.secondary.light, 0.12),
+      backgroundColor: fade(theme.palette.secondary.main, 0.12),
       // Reset on mouse devices
       '@media (hover: none)': {
         backgroundColor: 'transparent',
@@ -110,12 +110,12 @@ export const styles = theme => ({
   },
   raisedSecondary: {
     color: theme.palette.secondary.contrastText,
-    backgroundColor: theme.palette.secondary.light,
+    backgroundColor: theme.palette.secondary.main,
     '&:hover': {
-      backgroundColor: theme.palette.secondary.main,
+      backgroundColor: theme.palette.secondary.dark,
       // Reset on mouse devices
       '@media (hover: none)': {
-        backgroundColor: theme.palette.secondary.light,
+        backgroundColor: theme.palette.secondary.main,
       },
     },
   },

src/Icon/Icon.js

@@ -8,8 +8,11 @@ export const styles = theme => ({
   root: {
     userSelect: 'none',
   },
+  colorPrimary: {
+    color: theme.palette.primary.main,
+  },
   colorSecondary: {
-    color: theme.palette.secondary.light,
+    color: theme.palette.secondary.main,
   },
   colorAction: {
     color: theme.palette.action.active,
@@ -20,9 +23,6 @@ export const styles = theme => ({
   colorError: {
     color: theme.palette.error.main,
   },
-  colorPrimary: {
-    color: theme.palette.primary.main,
-  },
 });
 
 function Icon(props) {

src/IconButton/IconButton.js

@@ -24,14 +24,14 @@ export const styles = theme => ({
       duration: theme.transitions.duration.shortest,
     }),
   },
-  colorSecondary: {
-    color: theme.palette.secondary.light,
+  colorInherit: {
+    color: 'inherit',
   },
   colorPrimary: {
     color: theme.palette.primary.main,
   },
-  colorInherit: {
-    color: 'inherit',
+  colorSecondary: {
+    color: theme.palette.secondary.main,
   },
   disabled: {
     color: theme.palette.action.disabled,

src/Progress/CircularProgress.js

@@ -19,7 +19,7 @@ export const styles = theme => ({
     color: theme.palette.primary.main,
   },
   colorSecondary: {
-    color: theme.palette.secondary.light,
+    color: theme.palette.secondary.main,
   },
   svgIndeterminate: {
     animation: 'mui-progress-circular-rotate 1.4s linear infinite',

src/SvgIcon/SvgIcon.js

@@ -16,8 +16,11 @@ export const styles = theme => ({
       duration: theme.transitions.duration.shorter,
     }),
   },
+  colorPrimary: {
+    color: theme.palette.primary.main,
+  },
   colorSecondary: {
-    color: theme.palette.secondary.light,
+    color: theme.palette.secondary.main,
   },
   colorAction: {
     color: theme.palette.action.active,
@@ -28,9 +31,6 @@ export const styles = theme => ({
   colorError: {
     color: theme.palette.error.main,
   },
-  colorPrimary: {
-    color: theme.palette.primary.main,
-  },
 });
 
 function SvgIcon(props) {

src/Tabs/Tab.js

@@ -25,14 +25,9 @@ export const styles = theme => ({
   rootLabelIcon: {
     height: 72,
   },
-  rootSecondary: {
-    color: theme.palette.text.secondary,
-  },
-  rootSecondarySelected: {
-    color: theme.palette.secondary.light,
-  },
-  rootSecondaryDisabled: {
-    color: theme.palette.text.disabled,
+  rootInherit: {
+    color: 'inherit',
+    opacity: 0.7,
   },
   rootPrimary: {
     color: theme.palette.text.secondary,
@@ -43,9 +38,14 @@ export const styles = theme => ({
   rootPrimaryDisabled: {
     color: theme.palette.text.disabled,
   },
-  rootInherit: {
-    color: 'inherit',
-    opacity: 0.7,
+  rootSecondary: {
+    color: theme.palette.text.secondary,
+  },
+  rootSecondarySelected: {
+    color: theme.palette.secondary.main,
+  },
+  rootSecondaryDisabled: {
+    color: theme.palette.text.disabled,
   },
   rootInheritSelected: {
     opacity: 1,

src/Tabs/TabIndicator.js

@@ -17,7 +17,7 @@ export const styles = theme => ({
     backgroundColor: theme.palette.primary.main,
   },
   colorSecondary: {
-    backgroundColor: theme.palette.secondary.light,
+    backgroundColor: theme.palette.secondary.main,
   },
 });
 

src/Typography/Typography.js

@@ -49,12 +49,12 @@ export const styles = theme => ({
   colorPrimary: {
     color: theme.palette.primary.main,
   },
-  colorTextSecondary: {
-    color: theme.palette.text.secondary,
-  },
   colorSecondary: {
     color: theme.palette.secondary.main,
   },
+  colorTextSecondary: {
+    color: theme.palette.text.secondary,
+  },
   colorError: {
     color: theme.palette.error.main,
   },