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 './GlobalCss';
+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-4">
+        <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 './GlobalCss';
+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-4">
+        <div className="m-4 p-2"></div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+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>
+    </div>
+  );
+}

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

@@ -0,0 +1,27 @@
+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>
+    </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 d-print-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 d-print-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/GlobalCss.d.ts

@@ -0,0 +1 @@
+export default function (): JSX.Element;

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

@@ -0,0 +1,32 @@
+import { withStyles } from '@material-ui/styles';
+import spacings from './spacings';
+import colors from './colors';
+import elevations from './elevations';
+import texts from './texts';
+import positions from './positions';
+import {
+  displays,
+  overflows,
+  textOverflows,
+  visibilities,
+  whiteSpaces,
+} from './displays';
+
+const GlobalCss = withStyles((theme) => {
+  return {
+    '@global': {
+      ...spacings(theme),
+      ...colors(theme),
+      ...elevations(theme),
+      ...texts(theme),
+      ...positions(theme),
+      ...displays,
+      ...overflows,
+      ...textOverflows,
+      ...visibilities,
+      ...whiteSpaces,
+    },
+  };
+})(() => null);
+
+export default GlobalCss;

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-14">
+        <div className="position-absolute p-4 top-4 left-0 bg-grey-700 text-common-white">
+          position-absolute
+        </div>
+        <div className="position-absolute py-4 px-6 top-10 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-14">
+        <div className="position-absolute p-4 top-4 left-0 bg-grey-700 text-common-white">
+          position-absolute
+        </div>
+        <div className="position-absolute py-4 px-6 top-10 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/TextsExample.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 text-${val}`} key={val}>
+          Text {val}
+        </div>
+      ))}
+    </div>
+  );
+}