[system] Introduce utility classes

docs/pages/system/global-classes.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';
+
+const pageFilename = 'system/global-classes';
+const requireDemo = require.context('docs/src/pages/system/global-classes', false, /\.(js|tsx)$/);
+const requireRaw = require.context(
+  '!raw-loader!../../src/pages/system/global-classes',
+  false,
+  /\.(js|md|tsx)$/,
+);
+
+export default function Page({ demos, docs }) {
+  return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
+}
+
+Page.getInitialProps = () => {
+  const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
+  return { demos, docs };
+};

docs/src/pages.js

@@ -153,6 +153,7 @@ const pages = [
       { pathname: '/system/screen-readers' },
       { pathname: '/system/typography' },
       { pathname: '/system/api', title: 'API' },
+      { pathname: '/system/global-classes' },
     ],
   },
   {

docs/src/pages/system/global-classes/Basics.js

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { GlobalCss } from '@material-ui/system';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  debug: {
+    '& *': {
+      border: '1px dashed grey',
+    },
+  },
+});
+
+export default function App() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.debug}>
+      <GlobalCss />
+      <div className="m-2 p-1-5">
+        <div className="m-4 p-2"></div>
+      </div>
+    </div>
+  );
+}

docs/src/pages/system/global-classes/Basics.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { GlobalCss } from '@material-ui/system';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  debug: {
+    '& *': {
+      border: '1px dashed grey',
+    },
+  },
+});
+
+export default function App() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.debug}>
+      <GlobalCss />
+      <div className="m-2 p-1-5">
+        <div className="m-4 p-2"></div>
+      </div>
+    </div>
+  );
+}

docs/src/pages/system/global-classes/ColorsExample.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Button from '@material-ui/core/Button';
+
+export default function App() {
+  return (
+    <div>
+      <Button
+        variant="contained"
+        className="m-1 bg-warning-main hover:bg-warning-dark text-warning-contrastText"
+      >
+        Warning
+      </Button>
+      <Button
+        variant="contained"
+        className="m-1 bg-error-main hover:bg-error-dark text-error-contrastText"
+      >
+        Error
+      </Button>
+      <Button
+        variant="contained"
+        className="m-1 bg-success-main hover:bg-success-dark text-success-contrastText"
+      >
+        Success
+      </Button>
+      <Button
+        variant="contained"
+        className="m-1 sm:bg-success-main sm:hover:bg-success-dark sm:text-success-contrastText md:bg-error-main md:hover:bg-error-dark md:text-error-contrastText lg:bg-warning-main lg:hover:bg-warning-dark lg:text-warning-contrastText"
+      >
+        Media
+      </Button>
+    </div>
+  );
+}

docs/src/pages/system/global-classes/ColorsExample.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import Button from '@material-ui/core/Button';
+
+export default function App() {
+  return (
+    <div>
+      <Button
+        variant="contained"
+        className="m-1 bg-warning-main hover:bg-warning-dark text-warning-contrastText"
+      >
+        Warning
+      </Button>
+      <Button
+        variant="contained"
+        className="m-1 bg-error-main hover:bg-error-dark text-error-contrastText"
+      >
+        Error
+      </Button>
+      <Button
+        variant="contained"
+        className="m-1 bg-success-main hover:bg-success-dark text-success-contrastText"
+      >
+        Success
+      </Button>
+      <Button
+        variant="contained"
+        className="m-1 sm:bg-success-main sm:hover:bg-success-dark sm:text-success-contrastText md:bg-error-main md:hover:bg-error-dark md:text-error-contrastText lg:bg-warning-main lg:hover:bg-warning-dark lg:text-warning-contrastText"
+      >
+        Media
+      </Button>
+    </div>
+  );
+}

docs/src/pages/system/global-classes/DisplaysExample.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  debug: {
+    '& *': {
+      border: '1px dashed grey',
+    },
+  },
+});
+
+export default function App() {
+  const classes = useStyles();
+  return (
+    <div className={classes.debug}>
+      <div className="d-inline mr-1 p-2">div.d-inline</div>
+      <div className="d-inline print:d-none p-2">Hidden when printed</div>
+    </div>
+  );
+}

docs/src/pages/system/global-classes/DisplaysExample.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  debug: {
+    '& *': {
+      border: '1px dashed grey',
+    },
+  },
+});
+
+export default function App() {
+  const classes = useStyles();
+  return (
+    <div className={classes.debug}>
+      <div className="d-inline mr-1 p-2">div.d-inline</div>
+      <div className="d-inline print:d-none p-2">Hidden when printed</div>
+    </div>
+  );
+}

docs/src/pages/system/global-classes/ElevationsExample.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  debug: {
+    '& > *': { border: '1px dashed grey' },
+  },
+});
+
+export default function App() {
+  const classes = useStyles();
+  return (
+    <div className={classes.debug}>
+      {Array.from(Array(24).keys()).map((val) => (
+        <div className={`m-2 p-1 elevation-${val}`} key={val}>
+          Elevation {val}
+        </div>
+      ))}
+    </div>
+  );
+}

docs/src/pages/system/global-classes/ElevationsExample.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  debug: {
+    '& > *': { border: '1px dashed grey' },
+  },
+});
+
+export default function App() {
+  const classes = useStyles();
+  return (
+    <div className={classes.debug}>
+      {Array.from(Array(24).keys()).map((val) => (
+        <div className={`m-2 p-1 elevation-${val}`} key={val}>
+          Elevation {val}
+        </div>
+      ))}
+    </div>
+  );
+}

docs/src/pages/system/global-classes/PositionsExample.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  root: { width: '100%' },
+});
+
+export default function App() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <div className="position-relative p-4 mb-10">
+        <div className="position-absolute p-2 top-4 left-0 bg-grey-700 text-common-white">
+          position-absolute
+        </div>
+        <div className="position-absolute py-2 px-6 top-9 left-5 zIndex-tooltip bg-primary-light text-common-white">
+          zIndex-tooltip
+        </div>
+      </div>
+    </div>
+  );
+}

docs/src/pages/system/global-classes/PositionsExample.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  root: { width: '100%' },
+});
+
+export default function App() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <div className="position-relative p-4 mb-10">
+        <div className="position-absolute p-2 top-4 left-0 bg-grey-700 text-common-white">
+          position-absolute
+        </div>
+        <div className="position-absolute py-2 px-6 top-9 left-5 zIndex-tooltip bg-primary-light text-common-white">
+          zIndex-tooltip
+        </div>
+      </div>
+    </div>
+  );
+}

docs/src/pages/system/global-classes/SpacingsExample.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  debug: {
+    '& *': { border: '1px dashed grey' },
+  },
+});
+
+export default function App() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.debug}>
+      <div className="m-4 p-4">
+        <div className="px-10 py-4"></div>
+      </div>
+    </div>
+  );
+}

docs/src/pages/system/global-classes/SpacingsExample.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { makeStyles } from '@material-ui/styles';
+
+const useStyles = makeStyles({
+  debug: {
+    '& *': { border: '1px dashed grey' },
+  },
+});
+
+export default function App() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.debug}>
+      <div className="m-4 p-4">
+        <div className="px-10 py-4"></div>
+      </div>
+    </div>
+  );
+}

docs/src/pages/system/global-classes/TypographyExample.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+export default function App() {
+  return (
+    <div>
+      {[
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'subtitle1',
+        'subtitle2',
+        'body1',
+        'body2',
+        'button',
+        'caption',
+        'overline',
+      ].map((val) => (
+        <div className={`m-2 p-1 typography-${val}`} key={val}>
+          Text {val}
+        </div>
+      ))}
+    </div>
+  );
+}

docs/src/pages/system/global-classes/TypographyExample.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+
+export default function App() {
+  return (
+    <div>
+      {[
+        'h1',
+        'h2',
+        'h3',
+        'h4',
+        'h5',
+        'h6',
+        'subtitle1',
+        'subtitle2',
+        'body1',
+        'body2',
+        'button',
+        'caption',
+        'overline',
+      ].map((val) => (
+        <div className={`m-2 p-1 typography-${val}`} key={val}>
+          Text {val}
+        </div>
+      ))}
+    </div>
+  );
+}