more tokens

breakpoints/doc/doc.mdx

@@ -0,0 +1,10 @@
+import { mdx } from '@mdx-js/react';
+import { BreakpointsShowcase } from '~/showcase';
+import { MdxLayout } from '~/layout';
+export default MdxLayout;
+
+# Breakpoints
+
+Change screen size to observe changes.
+
+<BreakpointsShowcase />

breakpoints/index.ts

@@ -0,0 +1 @@
+export * from './src';

breakpoints/src/index.ts

@@ -0,0 +1,9 @@
+export const breakpoints = {
+  values: {
+    xs: 0,
+    sm: 600,
+    md: 900,
+    lg: 1200,
+    xl: 1536,
+  },
+};

package.json

@@ -40,7 +40,7 @@
     "stylis-plugin-rtl": "^2.1.1"
   },
   "devDependencies": {
-    "@divriots/dockit-react": "^0.0.71",
+    "@divriots/dockit-react": "^0.0.72",
     "@mdx-js/react": "^1.6.22",
     "deepmerge": "^4.2.2",
     "prettier": "^2.4.1"

showcase/src/BreakpointsShowcase.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+
+const Root = styled('div')(({ theme }) => ({
+  width: '100%',
+  padding: theme.spacing(1),
+  [theme.breakpoints.down('md')]: {
+    backgroundColor: theme.palette.secondary.main,
+  },
+  [theme.breakpoints.up('md')]: {
+    backgroundColor: theme.palette.primary.main,
+  },
+  [theme.breakpoints.up('lg')]: {
+    backgroundColor: theme.palette.info.main,
+  },
+}));
+
+const Text = styled('p')(({ theme }) => ({
+  [theme.breakpoints.down('md')]: {
+    color: theme.palette.secondary.contrastText,
+  },
+  [theme.breakpoints.up('md')]: {
+    color: theme.palette.primary.contrastText,
+  },
+  [theme.breakpoints.up('lg')]: {
+    color: theme.palette.info.contrastText,
+  },
+}));
+
+export const BreakpointsShowcase = () => (
+  <Root>
+    <Text>{'down(sm): palette.secondary'}</Text>
+    <Text>{'up(md): palette.primary'}</Text>
+    <Text>{'up(lg): pallete.info'}</Text>
+  </Root>
+);

showcase/src/ZIndexShowcase.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Caption } from '@divriots/dockit-react/caption';
+import { useTheme } from '@mui/material/styles';
+
+const Box = ({ caption, zIndex, index }) => (
+  <div
+    style={{
+      height: '6rem',
+      minWidth: '8rem',
+      marginLeft: `${index * 4 - 8}rem`,
+      padding: '1rem',
+      marginTop: `-2rem`,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      border: '1px solid #FFF',
+      borderRadius: '0.375rem',
+      boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+      backgroundColor: '#6366F1',
+      zIndex,
+    }}
+  >
+    <Caption text={`${caption}: ${zIndex}`} style={{ color: '#fff' }} />
+  </div>
+);
+
+export const ZIndexShowcase = () => {
+  const theme = useTheme();
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        paddingTop: '6rem',
+      }}
+    >
+      {Object.entries(theme.zIndex).map(([name, zIndex], i) => (
+        <Box key={name} index={i} caption={name} zIndex={zIndex} />
+      ))}
+    </div>
+  );
+};

showcase/src/index.ts

@@ -1,3 +1,5 @@
 export * from './PaletteShowcase';
 export * from './TypographyShowcase';
 export * from './SpacingShowcase';
+export * from './BreakpointsShowcase';
+export * from './ZIndexShowcase';

studio.config.json

@@ -3,7 +3,10 @@
     "dir": "",
     "menu": [
       "introduction",
-      ["tokens", ["colors", "fonts", "spacing", "theme"]],
+      [
+        "tokens",
+        ["colors", "fonts", "spacing", "breakpoints", "z-index", "theme"]
+      ],
       [
         "inputs",
         [

theme/src/index.ts

@@ -1,11 +1,15 @@
 import { light, dark } from '~/colors';
 import { fonts } from '~/fonts';
 import { spacing } from '~/spacing';
+import { breakpoints } from '~/breakpoints';
+import { zIndex } from '~/z-index';
 import { createTheme as createThemeMui, PaletteMode } from '@mui/material';
 
 export const createTheme = (mode: PaletteMode) =>
   createThemeMui({
     palette: mode === 'light' ? light : dark,
     typography: fonts,
     spacing,
+    breakpoints,
+    zIndex,
   });

z-index/doc/doc.mdx

@@ -0,0 +1,8 @@
+import { mdx } from '@mdx-js/react';
+import { ZIndexShowcase } from '~/showcase';
+import { MdxLayout } from '~/layout';
+export default MdxLayout;
+
+# ZIndex
+
+<ZIndexShowcase />

z-index/index.ts

@@ -0,0 +1 @@
+export * from './src';

z-index/src/index.ts

@@ -0,0 +1,9 @@
+export const zIndex = {
+  appBar: 1100,
+  drawer: 1200,
+  mobileStepper: 1000,
+  modal: 1300,
+  snackbar: 1400,
+  speedDial: 1050,
+  tooltip: 1500,
+};