[docs] Improve colors reliably (mui#16324)

* [docs] Improve colors reliably * Sebastian review * darken(pink.A400, 0.1)
alitaheri · Jun 25, 2019 · 404c2ba · 404c2ba
1 parent 868f2bc
commit 404c2ba
Show file tree

Hide file tree

Showing 20 changed files with 206 additions and 70 deletions.
diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
@@ -28,7 +28,7 @@ const styles = theme => ({
   },
   paper: {
     padding: theme.spacing(1),
-    backgroundColor: theme.palette.background.level1,
+    backgroundColor: theme.palette.background.level2,
     display: 'block',
   },
 });

diff --git a/docs/src/modules/components/AdCarbon.js b/docs/src/modules/components/AdCarbon.js
@@ -6,7 +6,7 @@ const styles = theme => ({
   '@global': {
     '#carbonads': {
       overflow: 'hidden',
-      backgroundColor: theme.palette.background.level1,
+      backgroundColor: theme.palette.background.level2,
       padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(
         1,
       ) + 130}px`,

diff --git a/docs/src/modules/components/AdCodeFund.js b/docs/src/modules/components/AdCodeFund.js
@@ -6,7 +6,7 @@ const styles = theme => ({
   '@global': {
     '#cf': {
       overflow: 'hidden',
-      backgroundColor: theme.palette.background.level1,
+      backgroundColor: theme.palette.background.level2,
       padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(
         1,
       ) + 130}px`,

diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
@@ -53,6 +53,7 @@ PersistScroll.propTypes = {
 const styles = theme => ({
   paper: {
     width: 240,
+    backgroundColor: theme.palette.background.level1,
   },
   title: {
     color: theme.palette.text.secondary,

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -86,6 +86,7 @@ export const languages = [
 const styles = theme => ({
   root: {
     display: 'flex',
+    backgroundColor: theme.palette.background.level1,
   },
   grow: {
     flex: '1 1 auto',
@@ -117,6 +118,8 @@ const styles = theme => ({
     },
   },
   appBar: {
+    color: theme.palette.type === 'dark' ? '#fff' : null,
+    backgroundColor: theme.palette.type === 'dark' ? theme.palette.background.level2 : null,
     transition: theme.transitions.create('width'),
     '@media print': {
       position: 'absolute',

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -53,7 +53,7 @@ const styles = theme => ({
     outline: 'none',
     margin: 'auto',
     borderRadius: theme.shape.borderRadius,
-    backgroundColor: theme.palette.background.level1,
+    backgroundColor: theme.palette.background.level2,
     display: 'flex',
     justifyContent: 'center',
     padding: 20,

diff --git a/docs/src/modules/components/HomeBackers.js b/docs/src/modules/components/HomeBackers.js
@@ -13,7 +13,6 @@ const backers = mapTranslations(req, 'md');
 
 const styles = theme => ({
   root: {
-    backgroundColor: theme.palette.background.paper,
     minHeight: 600,
   },
   markdownElement: {

diff --git a/docs/src/modules/components/HomeFooter.js b/docs/src/modules/components/HomeFooter.js
@@ -11,7 +11,7 @@ import compose from 'docs/src/modules/utils/compose';
 
 const styles = theme => ({
   root: {
-    backgroundColor: theme.palette.background.level0,
+    backgroundColor: theme.palette.background.level2,
   },
   footer: {
     padding: theme.spacing(3, 0),

diff --git a/docs/src/modules/components/HomeQuickWord.js b/docs/src/modules/components/HomeQuickWord.js
@@ -43,7 +43,6 @@ const backers = [
 
 const styles = theme => ({
   root: {
-    backgroundColor: theme.palette.background.paper,
     textAlign: 'center',
     minHeight: 60,
     paddingBottom: theme.spacing(2),

diff --git a/docs/src/modules/components/HomeSteps.js b/docs/src/modules/components/HomeSteps.js
@@ -25,9 +25,9 @@ const UsageLink = React.forwardRef((buttonProps, ref) => (
 
 const styles = theme => ({
   step: {
-    border: `12px solid ${theme.palette.background.paper}`,
+    border: `12px solid ${theme.palette.background.level1}`,
     padding: theme.spacing(3, 2),
-    backgroundColor: theme.palette.background.level0,
+    backgroundColor: theme.palette.background.level2,
     borderRightWidth: 0,
     borderLeftWidth: 0,
     [theme.breakpoints.up('sm')]: {
@@ -58,7 +58,7 @@ const styles = theme => ({
     alignItems: 'center',
   },
   stepIcon: {
-    color: theme.palette.primary.dark,
+    color: theme.palette.primary.main,
     marginRight: theme.spacing(2),
     fontSize: 30,
   },
@@ -68,11 +68,11 @@ const styles = theme => ({
   markdownElement: {
     maxWidth: `calc(100vw - ${(theme.spacing(5) + 1) * 2}px)`,
     '& pre, & pre[class*="language-"], & code': {
-      backgroundColor: 'transparent',
+      // backgroundColor: 'transparent',
     },
     '& pre, & pre[class*="language-"]': {
-      padding: theme.spacing(1),
-      margin: 0,
+      padding: theme.spacing(1, 0),
+      margin: theme.spacing(1, 0),
     },
   },
   divider: {

diff --git a/docs/src/modules/components/HomeUsers.js b/docs/src/modules/components/HomeUsers.js
@@ -36,7 +36,6 @@ const users = [
 const styles = theme => ({
   root: {
     padding: theme.spacing(2),
-    backgroundColor: theme.palette.background.paper,
     minHeight: 160,
     paddingTop: theme.spacing(5),
   },

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -119,34 +119,33 @@ const styles = theme => ({
     '& pre': {
       margin: '24px 0',
       padding: '12px 18px',
-      backgroundColor: theme.palette.background.level1,
+      backgroundColor: '#333',
       direction: 'ltr',
       borderRadius: theme.shape.borderRadius,
       overflow: 'auto',
       WebkitOverflowScrolling: 'touch', // iOS momentum scrolling.
     },
-    '& code[class*="language-"]': {
-      boxShadow: 'none',
-    },
     '& code': {
       display: 'inline-block',
       fontFamily: 'Consolas, "Liberation Mono", Menlo, Courier, monospace',
+      WebkitFontSmoothing: 'subpixel-antialiased',
       padding: '2px 6px',
       color: theme.palette.text.primary,
-      backgroundColor: theme.palette.background.level1,
+      backgroundColor:
+        theme.palette.type === 'dark' ? 'rgba(255,229,100,0.2)' : 'rgba(255,229,100,0.1)',
       fontSize: 14,
       borderRadius: 2,
     },
+    '& code[class*="language-"]': {
+      backgroundColor: '#333',
+      color: '#fff',
+    },
     '& p code, & ul code, & pre code': {
       fontSize: 14,
     },
     '& .token.operator': {
       background: 'transparent',
     },
-    '& .token.property, .token.tag,.token.constant, .token.symbol, .token.deleted': {
-      // adjust prism-okaidia to reach AA ratio
-      color: theme.palette.type === 'dark' ? '#f483ad' : undefined,
-    },
     '& h1': {
       ...theme.typography.h2,
       margin: '32px 0 16px',
@@ -217,12 +216,12 @@ const styles = theme => ({
         fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace',
       },
       '& .required': {
-        color: theme.palette.type === 'light' ? '#006500' : '#9bc89b',
+        color: theme.palette.type === 'light' ? '#006500' : '#a5ffa5',
       },
       '& .prop-type': {
         fontSize: 13,
         fontFamily: 'Consolas, "Liberation Mono", Menlo, monospace',
-        color: theme.palette.type === 'light' ? '#932981' : '#dbb0d0',
+        color: theme.palette.type === 'light' ? '#932981' : '#ffb6ec',
       },
       '& .prop-default': {
         fontSize: 13,
@@ -272,8 +271,8 @@ const styles = theme => ({
       height: 64,
     },
     '& blockquote': {
-      borderLeft: `5px solid ${theme.palette.text.hint}`,
-      backgroundColor: theme.palette.background.level1,
+      borderLeft: '5px solid #ffe564',
+      backgroundColor: 'rgba(255,229,100,0.2)',
       padding: '4px 24px',
       margin: '24px 0',
     },

diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js
@@ -5,19 +5,13 @@ import { createMuiTheme, darken } from '@material-ui/core/styles';
 import useMediaQuery from '@material-ui/core/useMediaQuery';
 import { blue, pink } from '@material-ui/core/colors';
 import { getCookie } from 'docs/src/modules/utils/helpers';
-import { lightTheme, darkTheme, setPrismTheme } from 'docs/src/modules/components/prism';
+import { darkTheme, setPrismTheme } from 'docs/src/modules/components/prism';
 
-export const themeInitialOptions = {
+export const themeColor = blue[700];
+
+const themeInitialOptions = {
   direction: 'ltr',
-  paletteColors: {
-    primary: {
-      main: blue[500],
-    },
-    secondary: {
-      // Darken so we reach the AA contrast ratio level.
-      main: darken(pink.A400, 0.08),
-    },
-  },
+  paletteColors: {},
 };
 
 export const DispatchContext = React.createContext(() => {
@@ -52,8 +46,8 @@ export function Provider(props) {
   const { direction, paletteColors, paletteType = preferredType } = themeOptions;
 
   React.useEffect(() => {
-    setPrismTheme(paletteType === 'light' ? lightTheme : darkTheme);
-  }, [paletteType]);
+    setPrismTheme(darkTheme);
+  }, []);
 
   React.useEffect(() => {
     if (process.browser) {
@@ -83,19 +77,25 @@ export function Provider(props) {
         color: paletteType === 'light' ? '#000' : '#fff',
       },
       palette: {
-        ...paletteColors,
+        primary: {
+          main: paletteType === 'light' ? blue[700] : blue[200],
+        },
+        secondary: {
+          main: paletteType === 'light' ? darken(pink.A400, 0.1) : pink[200],
+        },
         type: paletteType,
         background: {
-          default: paletteType === 'light' ? '#fff' : '#303030',
+          default: paletteType === 'light' ? '#fff' : '#121212',
         },
+        ...paletteColors,
       },
     });
 
-    nextTheme.palette.background.level1 =
-      paletteType === 'light' ? nextTheme.palette.grey[100] : nextTheme.palette.grey[900];
+    nextTheme.palette.background.level2 =
+      paletteType === 'light' ? nextTheme.palette.grey[100] : '#333';
 
-    nextTheme.palette.background.level0 =
-      paletteType === 'light' ? nextTheme.palette.grey[50] : nextTheme.palette.grey[900];
+    nextTheme.palette.background.level1 =
+      paletteType === 'light' ? '#fff' : nextTheme.palette.grey[900];
 
     return nextTheme;
   }, [direction, paletteColors, paletteType]);