matt feedback on disabled contrast

Author: oliviertassinari

docs/pages/api/pagination-item.md

@@ -49,9 +49,9 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">page</span> | <span class="prop-name">.MuiPaginationItem-page</span> | Styles applied to the root element if `type="page"`.
 | <span class="prop-name">sizeSmall</span> | <span class="prop-name">.MuiPaginationItem-sizeSmall</span> | Styles applied applied to the root element if `size="small"`.
 | <span class="prop-name">sizeLarge</span> | <span class="prop-name">.MuiPaginationItem-sizeLarge</span> | Styles applied applied to the root element if `size="large"`.
-| <span class="prop-name">outlined</span> | <span class="prop-name">.MuiPaginationItem-outlined</span> | Styles applied to the root element if `outlined="true"`.
 | <span class="prop-name">textPrimary</span> | <span class="prop-name">.MuiPaginationItem-textPrimary</span> | Styles applied to the root element if `variant="text"` and `color="primary"`.
 | <span class="prop-name">textSecondary</span> | <span class="prop-name">.MuiPaginationItem-textSecondary</span> | Styles applied to the root element if `variant="text"` and `color="secondary"`.
+| <span class="prop-name">outlined</span> | <span class="prop-name">.MuiPaginationItem-outlined</span> | Styles applied to the root element if `outlined="true"`.
 | <span class="prop-name">outlinedPrimary</span> | <span class="prop-name">.MuiPaginationItem-outlinedPrimary</span> | Styles applied to the root element if `variant="outlined"` and `color="primary"`.
 | <span class="prop-name">outlinedSecondary</span> | <span class="prop-name">.MuiPaginationItem-outlinedSecondary</span> | Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
 | <span class="prop-name">rounded</span> | <span class="prop-name">.MuiPaginationItem-rounded</span> | Styles applied to the root element if `rounded="true"`.

docs/src/pages/components/pagination/pagination.md

@@ -7,7 +7,7 @@ components: Pagination, PaginationItem
 
 <p class="description">The Pagination component enables the user to select a specific page from a range of pages.</p>
 
-## Pagination
+## Basic pagination
 
 {{"demo": "pages/components/pagination/BasicPagination.js"}}
 

packages/material-ui-lab/src/PaginationItem/PaginationItem.js

@@ -50,6 +50,8 @@ export const styles = theme => ({
         },
       },
       '&$disabled': {
+        opacity: 1,
+        color: theme.palette.action.disabled,
         backgroundColor: theme.palette.action.selected,
       },
     },
@@ -79,19 +81,6 @@ export const styles = theme => ({
       fontSize: theme.typography.pxToRem(22),
     },
   },
-  /* Styles applied to the root element if `outlined="true"`. */
-  outlined: {
-    border: `1px solid ${
-      theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
-    }`,
-    '&$selected': {
-      '&$disabled': {
-        border: `1px solid ${
-          theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
-        }`,
-      },
-    },
-  },
   /* Styles applied to the root element if `variant="text"` and `color="primary"`. */
   textPrimary: {
     '&$selected': {
@@ -105,7 +94,7 @@ export const styles = theme => ({
         },
       },
       '&$disabled': {
-        color: theme.palette.text.primary,
+        color: theme.palette.action.disabled,
       },
     },
   },
@@ -122,7 +111,18 @@ export const styles = theme => ({
         },
       },
       '&$disabled': {
-        color: theme.palette.text.primary,
+        color: theme.palette.action.disabled,
+      },
+    },
+  },
+  /* Styles applied to the root element if `outlined="true"`. */
+  outlined: {
+    border: `1px solid ${
+      theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'
+    }`,
+    '&$selected': {
+      '&$disabled': {
+        border: `1px solid ${theme.palette.action.disabledBackground}`,
       },
     },
   },
@@ -143,7 +143,7 @@ export const styles = theme => ({
         },
       },
       '&$disabled': {
-        color: theme.palette.text.primary,
+        color: theme.palette.action.disabled,
       },
     },
   },
@@ -164,7 +164,7 @@ export const styles = theme => ({
         },
       },
       '&$disabled': {
-        color: theme.palette.text.primary,
+        color: theme.palette.action.disabled,
       },
     },
   },