clean up to merge initial code into base branch

platform/ui/gatsby-config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  plugins: ['gatsby-plugin-sass'],
+  plugins: ['gatsby-plugin-sass', `gatsby-plugin-postcss`],
 };

platform/ui/package.json

@@ -19,18 +19,15 @@
   ],
   "scripts": {
     "start": "yarn run dev",
-    "dev": "concurrently \"npm run watch:css\" \"docz dev\"",
+    "build:styles": "postcss src/styles/tailwind.css -o src/gatsby-theme-docz/app.css",
-    "build": "concurrently \"npm run build:css\" \"docz build\"",
+    "dev": "docz dev",
-    "serve": "docz serve",
+    "build": "docz build",
-    "build:css": "postcss src/styles/tailwind.css -o src/gatsby-theme-docz/app.css",
+    "serve": "docz serve"
-    "watch:css": "postcss src/styles/tailwind.css -o src/gatsby-theme-docz/app.css -w"
   },
   "dependencies": {
-    "@emotion/core": "^10.0.27",
-    "@emotion/styled": "^10.0.27",
     "classnames": "^2.2.6",
-    "concurrently": "^5.1.0",
     "docz": "^2.2.0",
+    "gatsby-plugin-postcss": "^2.1.20",
     "gatsby-plugin-sass": "^2.1.28",
     "node-sass": "^4.13.1",
     "prop-types": "^15.7.2",

platform/ui/postcss.config.js

@@ -1,7 +1,10 @@
 const tailwindcss = require('tailwindcss');
-const configs = require('../../postcss.config.js');
+const commonConfigs = require('../../postcss.config.js');
 
 module.exports = {
-  ...configs,
+  ...commonConfigs,
-  plugins: [tailwindcss('./tailwind.js'), require('autoprefixer')],
+  plugins: [
+    tailwindcss('./src/gatsby-theme-docz/tailwind.js'),
+    require('autoprefixer'),
+  ],
 };

platform/ui/src/components/Alert.jsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import t from 'prop-types';
-
-const kinds = {
-  info: '#5352ED',
-  positive: '#2ED573',
-  negative: '#FF4757',
-  warning: '#FFA502',
-};
-
-export const Alert = ({ children, kind, ...rest }) => (
-  <div
-    style={{
-      padding: 20,
-      borderRadius: 3,
-      color: 'white',
-      background: kinds[kind],
-    }}
-    {...rest}
-  >
-    {children}
-  </div>
-);
-
-Alert.propTypes = {
-  /**
-   * The kind prop is used to set the alert's background color
-   */
-  kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
-};
-
-Alert.defaultProps = {
-  kind: 'info',
-};

platform/ui/src/components/Alert.mdx

@@ -1,28 +0,0 @@
----
-name: Alert
-menu: Components
----
-
-import { Playground, Props } from 'docz'
-import { Alert } from './Alert'
-
-# Alert
-
-## Properties
-
-<Props of={Alert} />
-
-## Basic usage
-
-<Playground>
-  <Alert>Some message</Alert>
-</Playground>
-
-## Using different kinds
-
-<Playground>
-  <Alert kind="info">Some message</Alert>
-  <Alert kind="positive">Some message</Alert>
-  <Alert kind="negative">Some message</Alert>
-  <Alert kind="warning">Some message</Alert>
-</Playground>

platform/ui/src/components/Button/Button.mdx

@@ -19,13 +19,13 @@ Buttons are used to execute actions when users interacts with them.
 
 <Playground>
   <>
-    <Button variant="contained" style={{ margin: 5 }}>
+    <Button variant="contained" className="m-1">
       Default
     </Button>
-    <Button variant="contained" color="primary" style={{ margin: 5 }}>
+    <Button variant="contained" color="primary" className="m-1">
       Primary
     </Button>
-    <Button variant="contained" color="secondary" style={{ margin: 5 }}>
+    <Button variant="contained" color="secondary" className="m-1">
       Secondary
     </Button>
   </>
@@ -35,13 +35,13 @@ Buttons are used to execute actions when users interacts with them.
 
 <Playground>
   <>
-    <Button variant="outlined" style={{ margin: 5 }}>
+    <Button variant="outlined" className="m-1">
       Default
     </Button>
-    <Button variant="outlined" color="primary" style={{ margin: 5 }}>
+    <Button variant="outlined" color="primary" className="m-1">
       Primary
     </Button>
-    <Button variant="outlined" color="secondary" style={{ margin: 5 }}>
+    <Button variant="outlined" color="secondary" className="m-1">
       Secondary
     </Button>
   </>
@@ -51,13 +51,13 @@ Buttons are used to execute actions when users interacts with them.
 
 <Playground>
   <>
-    <Button variant="text" style={{ margin: 5 }}>
+    <Button variant="text" className="m-1">
       Default
     </Button>
-    <Button variant="text" color="primary" style={{ margin: 5 }}>
+    <Button variant="text" color="primary" className="m-1">
       Primary
     </Button>
-    <Button variant="text" color="secondary" style={{ margin: 5 }}>
+    <Button variant="text" color="secondary" className="m-1">
       Secondary
     </Button>
   </>
@@ -68,13 +68,13 @@ Buttons are used to execute actions when users interacts with them.
 <Playground>
   <>
     <div>
-      <Button variant="text" size="small" style={{ margin: 5 }}>
+      <Button variant="text" size="small" className="m-1">
         Small
       </Button>
-      <Button variant="contained" size="medium" style={{ margin: 5 }}>
+      <Button variant="contained" size="medium" className="m-1">
         Medium
       </Button>
-      <Button variant="outlined" size="large" style={{ margin: 5 }}>
+      <Button variant="outlined" size="large" className="m-1">
         Large
       </Button>
     </div>
@@ -83,7 +83,7 @@ Buttons are used to execute actions when users interacts with them.
         variant="text"
         size="small"
         color="primary"
-        style={{ margin: 5 }}
+        className="m-1"
       >
         Small
       </Button>
@@ -91,7 +91,7 @@ Buttons are used to execute actions when users interacts with them.
         variant="contained"
         size="medium"
         color="primary"
-        style={{ margin: 5 }}
+        className="m-1"
       >
         Medium
       </Button>
@@ -99,7 +99,7 @@ Buttons are used to execute actions when users interacts with them.
         variant="outlined"
         size="large"
         color="primary"
-        style={{ margin: 5 }}
+        className="m-1"
       >
         large
       </Button>
@@ -109,7 +109,7 @@ Buttons are used to execute actions when users interacts with them.
       variant="text"
       size="small"
       color="secondary"
-      style={{ margin: 5 }}
+      className="m-1"
     >
       Small
     </Button>
@@ -117,7 +117,7 @@ Buttons are used to execute actions when users interacts with them.
       variant="contained"
       size="medium"
       color="secondary"
-      style={{ margin: 5 }}
+      className="m-1"
     >
       Medium
     </Button>
@@ -125,7 +125,7 @@ Buttons are used to execute actions when users interacts with them.
       variant="outlined"
       size="large"
       color="secondary"
-      style={{ margin: 5 }}
+      className="m-1"
     >
       Large
     </Button>
@@ -144,7 +144,7 @@ Buttons are used to execute actions when users interacts with them.
         <Button
       variant="contained"
       color="primary"
-      style={{ margin: 5 }}
+      className="m-1"
       startIcon={
     <svg
       class="fill-current w-4 h-4"
@@ -160,7 +160,7 @@ Buttons are used to execute actions when users interacts with them.
      <Button
       variant="contained"
       color="primary"
-      style={{ margin: 5 }}
+      className="m-1"
       endIcon={
     <svg
       class="fill-current w-4 h-4"

platform/ui/src/components/ButtonEmotion/ButtonEmotion.jsx

@@ -1,318 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import { fade } from '../../utils/colorManipulator';
-import capitalize from '../../utils/capitalize';
-import theme from '../../styles/theme';
-
-const styles = {
-  base: {
-    'box-sizing': 'border-box',
-    'min-width': '64px',
-    padding: '6px 16px',
-    'border-radius': '20px',
-    color: theme.palette.primary.main,
-    transition: 'all 300ms ease',
-    '&:hover': {
-      'text-decoration': 'none',
-      'background-color': fade(
-        theme.palette.default.main,
-        theme.palette.action.hoverOpacity
-      ),
-    },
-    '&:active': {
-      outline: 'none',
-    },
-    '&:focus': {
-      outline: 'none',
-    },
-    '&:disabled': {
-      color: theme.palette.action.disabled,
-      cursor: 'not-allowed',
-    },
-  },
-  /* Styles applied to the root element if `variant="text"`. */
-  text: {
-    padding: '6px 8px',
-  },
-  /* Styles applied to the root element if `variant="text"` and `color="primary"`. */
-  textPrimary: {
-    color: theme.palette.primary.main,
-    '&:hover': {
-      'background-color': fade(
-        theme.palette.primary.light,
-        theme.palette.action.hoverOpacity
-      ),
-    },
-  },
-  /* Styles applied to the root element if `variant="text"` and `color="secondary"`. */
-  textSecondary: {
-    color: theme.palette.secondary.main,
-    '&:hover': {
-      'background-color': fade(
-        theme.palette.secondary.light,
-        theme.palette.action.hoverOpacity
-      ),
-    },
-  },
-  /* Styles applied to the root element if `variant="outlined"`. */
-  outlined: {
-    padding: '5px 15px',
-    border: `1px solid ${
-      theme.palette.type === 'light'
-        ? 'rgba(0, 0, 0, 0.23)'
-        : 'rgba(255, 255, 255, 0.23)'
-    }`,
-    '&:disabled': {
-      border: `1px solid ${theme.palette.default.main}`,
-    },
-  },
-  /* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
-  outlinedPrimary: {
-    color: theme.palette.primary.main,
-    border: `1px solid ${fade(
-      theme.palette.primary.light,
-      theme.palette.action.hoverOpacity
-    )}`,
-    '&:hover': {
-      border: `1px solid ${theme.palette.primary.main}`,
-      'background-color': fade(
-        theme.palette.primary.light,
-        theme.palette.action.hoverOpacity
-      ),
-    },
-  },
-  /* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
-  outlinedSecondary: {
-    color: theme.palette.secondary.main,
-    border: `1px solid ${fade(
-      theme.palette.secondary.main,
-      theme.palette.action.hoverOpacity
-    )}`,
-    '&:hover': {
-      border: `1px solid ${theme.palette.secondary.main}`,
-      'background-color': fade(
-        theme.palette.secondary.light,
-        theme.palette.action.hoverOpacity
-      ),
-    },
-    '&$disabled': {
-      border: `1px solid ${theme.palette.action.disabled}`,
-    },
-  },
-  /* Styles applied to the root element if `variant="contained"`. */
-  contained: {
-    color: '#000',
-    'background-color': theme.palette.default.light,
-    // 'box-shadow': theme.shadows[2],
-    '&:hover': {
-      'background-color': theme.palette.default.light,
-      // 'box-shadow': theme.shadows[4],
-
-      '&$disabled': {
-        'background-color': theme.palette.action.disabledBackground,
-      },
-    },
-    '&:active': {
-      // 'box-shadow': typographyows[8],
-    },
-    '&$disabled': {
-      color: theme.palette.action.disabled,
-      // 'box-shadow': theme.shadows[0],
-      'background-color': theme.palette.action.disabledBackground,
-    },
-  },
-  /* Styles applied to the root element if `variant="contained"` and `color="primary"`. */
-  containedPrimary: {
-    color: 'white',
-    'background-color': theme.palette.primary.main,
-    '&:hover': {
-      'background-color': fade(
-        theme.palette.primary.light,
-        theme.palette.action.hoverOpacity
-      ),
-    },
-  },
-  /* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
-  containedSecondary: {
-    color: 'white',
-    'background-color': theme.palette.secondary.main,
-    '&:hover': {
-      'background-color': fade(
-        theme.palette.secondary.light,
-        theme.palette.action.hoverOpacity
-      ),
-    },
-  },
-  /* Styles applied to the root element if `size="small"` and `variant="text"`. */
-  textSizeSmall: {
-    padding: '4px 5px',
-    fontSize: '13px',
-  },
-  /* Styles applied to the root element if `size="medium"` and `variant="text"`. */
-  textSizeMedium: {
-    padding: '6px 9px',
-    fontSize: '14px',
-  },
-  /* Styles applied to the root element if `size="large"` and `variant="text"`. */
-  textSizeLarge: {
-    padding: '8px 11px',
-    fontSize: '15px',
-  },
-  /* Styles applied to the root element if `size="small"` and `variant="outlined"`. */
-  outlinedSizeSmall: {
-    padding: '3px 9px',
-    fontSize: '13px',
-  },
-  /* Styles applied to the root element if `size="medium"` and `variant="outlined"`. */
-  outlinedSizeMedium: {
-    padding: '5px 15px',
-    fontSize: '14px',
-  },
-  /* Styles applied to the root element if `size="large"` and `variant="outlined"`. */
-  outlinedSizeLarge: {
-    padding: '7px 21px',
-    fontSize: '15px',
-  },
-  /* Styles applied to the root element if `size="small"` and `variant="contained"`. */
-  containedSizeSmall: {
-    padding: '4px 10px',
-    fontSize: '13px',
-  },
-  /* Styles applied to the root element if `size="medium"` and `variant="contained"`. */
-  containedSizeMedium: {
-    padding: '6px 16px',
-    fontSize: '13px',
-  },
-  /* Styles applied to the root element if `size="large"` and `variant="contained"`. */
-  containedSizeLarge: {
-    padding: '8px 22px',
-    fontSize: '15px',
-  },
-  /* Styles applied to the startIcon element if supplied. */
-  startIcon: {
-    display: 'inherit',
-    'margin-right': '8px',
-    'margin-left': '-4px',
-  },
-  /* Styles applied to the endIcon element if supplied. */
-  endIcon: {
-    display: 'inherit',
-    'margin-right': '-4px',
-    'margin-left': '8px',
-  },
-};
-
-const BaseButton = styled.button`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  background-color: transparent;
-  outline: 0;
-  border: 0;
-  margin: 0;
-  border-radius: 0;
-  padding: 0;
-  cursor: pointer;
-  user-select: none;
-  vertical-align: middle;
-  -moz-appearance: none;
-  appearance: none;
-  text-decoration: none;
-  color: inherit;
-`;
-
-const ButtonIcon = styled.div`
-  ${props => ({
-    ...styles[`${props.icon}`],
-  })}
-`;
-
-const ButtonComponent = styled(BaseButton)`
-  /* base styles */
-  ${props => ({
-    ...styles.base,
-  })}
-
-  /* variant styles */
-  ${props => ({
-    ...styles[`${props.variant}`],
-  })}
-
-  /* color */
-  ${props => ({
-    ...styles[`${props.variant}${capitalize(props.color)}`],
-  })}
-
-  /* size styles */
-  ${props => ({
-    ...styles[`${props.variant}Size${capitalize(props.size)}`],
-  })}
-`;
-
-const Button = props => {
-  const {
-    children,
-    variant = defaults.variant,
-    color = defaults.color,
-    size = defaults.size,
-    radius = defaults.radius,
-    disabled = defaults.disabled,
-    elevation,
-    type = defaults.type,
-    startIcon: startIconProp,
-    endIcon: endIconProp,
-    className,
-    ...rest
-  } = props;
-  const startIcon = startIconProp && (
-    <ButtonIcon icon="startIcon">{startIconProp}</ButtonIcon>
-  );
-
-  const endIcon = endIconProp && (
-    <ButtonIcon icon="endIcon">{endIconProp}</ButtonIcon>
-  );
-
-  return (
-    <ButtonComponent
-      variant={variant}
-      color={color}
-      size={size}
-      radius={radius}
-      disabled={disabled}
-      type={type}
-      {...rest}
-    >
-      {startIcon}
-      {children}
-      {endIcon}
-    </ButtonComponent>
-  );
-};
-
-const defaults = {
-  variant: 'outlined',
-  color: 'default',
-  size: 'large',
-  radius: 'medium',
-  disabled: false,
-  elevation: true,
-  type: 'button',
-};
-
-Button.propTypes = {
-  children: PropTypes.node,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  radius: PropTypes.oneOf(['small', 'medium', 'large', 'full']),
-  variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
-  color: PropTypes.oneOf(['default', 'primary', 'secondary']),
-  disabled: PropTypes.bool,
-  elevation: PropTypes.bool,
-  type: PropTypes.string,
-  startIcon: PropTypes.node,
-  endIcon: PropTypes.node,
-  className: PropTypes.node,
-};
-
-export default Button;

platform/ui/src/components/ButtonEmotion/ButtonEmotion.mdx

@@ -1,180 +0,0 @@
----
-name: ButtonEmotion
-menu: Components
-route: components/button-emotion
----
-
-import { Playground, Props } from 'docz';
-import Button from './';
-
-# ButtonEmotion
-
-Buttons are used to execute actions when users interacts with them.
-
-## Properties
-
-<Props of={Button} />
-
-## Contained Buttons
-
-<Playground>
-  <>
-    <Button variant="contained" style={{ margin: 5 }}>
-      Default
-    </Button>
-    <Button variant="contained" color="primary" style={{ margin: 5 }}>
-      Primary
-    </Button>
-    <Button variant="contained" color="secondary" style={{ margin: 5 }}>
-      Secondary
-    </Button>
-  </>
-</Playground>
-
-## Outlined Buttons
-
-<Playground>
-  <>
-    <Button variant="outlined" style={{ margin: 5 }}>
-      Default
-    </Button>
-    <Button variant="outlined" color="primary" style={{ margin: 5 }}>
-      Primary
-    </Button>
-    <Button variant="outlined" color="secondary" style={{ margin: 5 }}>
-      Secondary
-    </Button>
-  </>
-</Playground>
-
-## Text Buttons
-
-<Playground>
-  <>
-    <Button variant="text" style={{ margin: 5 }}>
-      Default
-    </Button>
-    <Button variant="text" color="primary" style={{ margin: 5 }}>
-      Primary
-    </Button>
-    <Button variant="text" color="secondary" style={{ margin: 5 }}>
-      Secondary
-    </Button>
-  </>
-</Playground>
-
-## Sizes
-
-<Playground>
-  <>
-    <div>
-      <Button variant="text" size="small" style={{ margin: 5 }}>
-        Small
-      </Button>
-      <Button variant="contained" size="medium" style={{ margin: 5 }}>
-        Medium
-      </Button>
-      <Button variant="outlined" size="large" style={{ margin: 5 }}>
-        Large
-      </Button>
-    </div>
-    <div>
-      <Button
-        variant="text"
-        size="small"
-        color="primary"
-        style={{ margin: 5 }}
-      >
-        Small
-      </Button>
-      <Button
-        variant="contained"
-        size="medium"
-        color="primary"
-        style={{ margin: 5 }}
-      >
-        Medium
-      </Button>
-      <Button
-        variant="outlined"
-        size="large"
-        color="primary"
-        style={{ margin: 5 }}
-      >
-        large
-      </Button>
-    </div>
-    <div>
-    <Button
-      variant="text"
-      size="small"
-      color="secondary"
-      style={{ margin: 5 }}
-    >
-      Small
-    </Button>
-    <Button
-      variant="contained"
-      size="medium"
-      color="secondary"
-      style={{ margin: 5 }}
-    >
-      Medium
-    </Button>
-    <Button
-      variant="outlined"
-      size="large"
-      color="secondary"
-      style={{ margin: 5 }}
-    >
-      Large
-    </Button>
-    </div>
-
-</>
-
-</Playground>
-
-## Buttons with icons
-
-<Playground>
-{() => {
-    return (
-         <div className="flex">
-        <Button
-      variant="contained"
-      color="primary"
-      style={{ margin: 5 }}
-      startIcon={
-    <svg
-      class="fill-current w-4 h-4"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-    >
-      <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
-    </svg>
-  }
-    >
-      Download
-    </Button>
-     <Button
-      variant="contained"
-      color="primary"
-      style={{ margin: 5 }}
-      endIcon={
-    <svg
-      class="fill-current w-4 h-4"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-    >
-      <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
-    </svg>
-  }
-    >
-      Download
-    </Button>
-      </div>
-    )
-  }}
-
-</Playground>

platform/ui/src/components/ButtonEmotion/index.js

@@ -1,2 +0,0 @@
-import ButtonEmotion from './ButtonEmotion';
-export default ButtonEmotion;

platform/ui/src/components/ButtonModules/ButtonModules.jsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import capitalize from '../../utils/capitalize';
-import styles from './ButtonModules.module.scss';
-
-const Button = props => {
-  const {
-    children,
-    variant = defaults.variant,
-    color = defaults.color,
-    size = defaults.size,
-    type = defaults.type,
-    startIcon: startIconProp,
-    endIcon: endIconProp,
-    className,
-    ...rest
-  } = props;
-  const startIcon = startIconProp && (
-    <div className={styles.startIcon}>{startIconProp}</div>
-  );
-
-  const endIcon = endIconProp && (
-    <div className={styles.endIcon}>{endIconProp}</div>
-  );
-
-  return (
-    <button
-      className={classnames(
-        styles.baseButton,
-        styles[variant],
-        styles[`${variant}${capitalize(color)}`],
-        styles[`${variant}Size${capitalize(size)}`],
-        className
-      )}
-      type={type}
-      {...rest}
-    >
-      {startIcon}
-      {children}
-      {endIcon}
-    </button>
-  );
-};
-
-const defaults = {
-  variant: 'outlined',
-  color: 'default',
-  size: 'large',
-  radius: 'medium',
-  disabled: false,
-  type: 'button',
-};
-
-Button.propTypes = {
-  children: PropTypes.node,
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  radius: PropTypes.oneOf(['small', 'medium', 'large', 'full']),
-  variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
-  color: PropTypes.oneOf(['default', 'primary', 'secondary']),
-  disabled: PropTypes.bool,
-  type: PropTypes.string,
-  startIcon: PropTypes.node,
-  endIcon: PropTypes.node,
-  className: PropTypes.node,
-};
-
-export default Button;

platform/ui/src/components/ButtonModules/ButtonModules.mdx

@@ -1,180 +0,0 @@
----
-name: ButtonModules
-menu: Components
-route: components/button-modules
----
-
-import { Playground, Props } from 'docz';
-import Button from './';
-
-# ButtonModules
-
-Buttons are used to execute actions when users interacts with them.
-
-## Properties
-
-<Props of={Button} />
-
-## Contained Buttons
-
-<Playground>
-  <>
-    <Button variant="contained" style={{ margin: 5 }}>
-      Default
-    </Button>
-    <Button variant="contained" color="primary" style={{ margin: 5 }}>
-      Primary
-    </Button>
-    <Button variant="contained" color="secondary" style={{ margin: 5 }}>
-      Secondary
-    </Button>
-  </>
-</Playground>
-
-## Outlined Buttons
-
-<Playground>
-  <>
-    <Button variant="outlined" style={{ margin: 5 }}>
-      Default
-    </Button>
-    <Button variant="outlined" color="primary" style={{ margin: 5 }}>
-      Primary
-    </Button>
-    <Button variant="outlined" color="secondary" style={{ margin: 5 }}>
-      Secondary
-    </Button>
-  </>
-</Playground>
-
-## Text Buttons
-
-<Playground>
-  <>
-    <Button variant="text" style={{ margin: 5 }}>
-      Default
-    </Button>
-    <Button variant="text" color="primary" style={{ margin: 5 }}>
-      Primary
-    </Button>
-    <Button variant="text" color="secondary" style={{ margin: 5 }}>
-      Secondary
-    </Button>
-  </>
-</Playground>
-
-## Sizes
-
-<Playground>
-  <>
-    <div>
-      <Button variant="text" size="small" style={{ margin: 5 }}>
-        Small
-      </Button>
-      <Button variant="contained" size="medium" style={{ margin: 5 }}>
-        Medium
-      </Button>
-      <Button variant="outlined" size="large" style={{ margin: 5 }}>
-        Large
-      </Button>
-    </div>
-    <div>
-      <Button
-        variant="text"
-        size="small"
-        color="primary"
-        style={{ margin: 5 }}
-      >
-        Small
-      </Button>
-      <Button
-        variant="contained"
-        size="medium"
-        color="primary"
-        style={{ margin: 5 }}
-      >
-        Medium
-      </Button>
-      <Button
-        variant="outlined"
-        size="large"
-        color="primary"
-        style={{ margin: 5 }}
-      >
-        large
-      </Button>
-    </div>
-    <div>
-    <Button
-      variant="text"
-      size="small"
-      color="secondary"
-      style={{ margin: 5 }}
-    >
-      Small
-    </Button>
-    <Button
-      variant="contained"
-      size="medium"
-      color="secondary"
-      style={{ margin: 5 }}
-    >
-      Medium
-    </Button>
-    <Button
-      variant="outlined"
-      size="large"
-      color="secondary"
-      style={{ margin: 5 }}
-    >
-      Large
-    </Button>
-    </div>
-
-</>
-
-</Playground>
-
-## Buttons with icons
-
-<Playground>
-{() => {
-    return (
-         <div className="flex">
-        <Button
-      variant="contained"
-      color="primary"
-      style={{ margin: 5 }}
-      startIcon={
-    <svg
-      className="fill-current w-4 h-4"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-    >
-      <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
-    </svg>
-  }
-    >
-      Download
-    </Button>
-     <Button
-      variant="contained"
-      color="primary"
-      style={{ margin: 5 }}
-      endIcon={
-    <svg
-      className="fill-current w-4 h-4"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 20 20"
-    >
-      <path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
-    </svg>
-  }
-    >
-      Download
-    </Button>
-      </div>
-    )
-  }}
-
-</Playground>

platform/ui/src/components/ButtonModules/ButtonModules.module.scss

@@ -1,213 +0,0 @@
-$default: #aaa;
-$primary: #00a;
-$secondary: #a00;
-$hoverOpacity: 40%;
-
-.baseButton {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  background-color: transparent;
-  outline: 0;
-  border: 0;
-  margin: 0;
-  cursor: pointer;
-  user-select: none;
-  vertical-align: middle;
-  -moz-appearance: none;
-  appearance: none;
-  text-decoration: none;
-  box-sizing: border-box;
-  min-width: 64px;
-  padding: 6px 16px;
-  border-radius: 20px;
-  color: inherit;
-  transition: all 300ms ease;
-
-  &:hover {
-    text-decoration: none;
-    background-color: lighten($default, $hoverOpacity / 2);
-  }
-
-  &:active,
-  &:focus {
-    outline: none;
-  }
-
-  &:disabled {
-    color: $default;
-    cursor: not-allowed;
-  }
-}
-
-/* Styles applied to the root element if `variant="text"`. */
-.text {
-  padding: 6px 8px;
-
-  &:hover {
-    background-color: lighten($default, $hoverOpacity / 2);
-  }
-}
-
-/* Styles applied to the root element if `variant="text"` and `color="primary"`. */
-.textPrimary {
-  color: $primary;
-
-  &:hover {
-    background-color: lighten($primary, $hoverOpacity);
-  }
-}
-
-/* Styles applied to the root element if `variant="text"` and `color="secondary"`. */
-.textSecondary {
-  color: $secondary;
-
-  &:hover {
-    background-color: lighten($secondary, $hoverOpacity);
-  }
-}
-
-/* Styles applied to the root element if `variant="outlined"`. */
-.outlined {
-  padding: 5px 15px;
-  border: 1px solid $default;
-
-  &:disabled {
-    border: 1px solid $default;
-  }
-}
-
-/* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
-.outlinedPrimary {
-  color: $primary;
-  border: 1px solid lighten($primary, $hoverOpacity);
-
-  &:hover {
-    border: 1px solid $primary;
-    background-color: lighten($primary, $hoverOpacity);
-  }
-}
-
-/* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
-.outlinedSecondary {
-  color: $secondary;
-  border: 1px solid lighten($secondary, $hoverOpacity);
-
-  &:hover {
-    border: 1px solid $secondary;
-    background-color: lighten($secondary, $hoverOpacity);
-  }
-
-  &:disabled {
-    border: 1px solid $default;
-  }
-}
-
-/* Styles applied to the root element if `variant="contained"`. */
-.contained {
-  color: #fff;
-  background-color: $default;
-
-  &:disabled {
-    color: lighten($default, $hoverOpacity);
-    background-color: $default;
-  }
-
-  &:hover {
-    background-color: darken($default, $hoverOpacity / 2);
-
-    &:disabled {
-      color: lighten($default, $hoverOpacity);
-      background-color: $default;
-    }
-  }
-}
-
-/* Styles applied to the root element if `variant="contained"` and `color="primary"`. */
-.containedPrimary {
-  color: white;
-  background-color: $primary;
-
-  &:hover {
-    background-color: darken($primary, $hoverOpacity / 2);
-  }
-}
-
-/* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
-.containedSecondary {
-  color: white;
-  background-color: $secondary;
-
-  &:hover {
-    background-color: darken($secondary, $hoverOpacity / 2);
-  }
-}
-
-/* Styles applied to the root element if `size="small"` and `variant="text"`. */
-.textSizeSmall {
-  padding: 4px 5px;
-  font-size: 13px;
-}
-
-/* Styles applied to the root element if `size="medium"` and `variant="text"`. */
-.textSizeMedium {
-  padding: 6px 9px;
-  font-size: 14px;
-}
-
-/* Styles applied to the root element if `size="large"` and `variant="text"`. */
-.textSizeLarge {
-  padding: 8px 11px;
-  font-size: 15px;
-}
-
-/* Styles applied to the root element if `size="small"` and `variant="outlined"`. */
-.outlinedSizeSmall {
-  padding: 3px 9px;
-  font-size: 13px;
-}
-
-/* Styles applied to the root element if `size="medium"` and `variant="outlined"`. */
-.outlinedSizeMedium {
-  padding: 5px 15px;
-  font-size: 14px;
-}
-
-/* Styles applied to the root element if `size="large"` and `variant="outlined"`. */
-.outlinedSizeLarge {
-  padding: 7px 21px;
-  font-size: 15px;
-}
-
-/* Styles applied to the root element if `size="small"` and `variant="contained"`. */
-.containedSizeSmall {
-  padding: 4px 10px;
-  font-size: 13px;
-}
-
-/* Styles applied to the root element if `size="medium"` and `variant="contained"`. */
-.containedSizeMedium {
-  padding: 6px 16px;
-  font-size: 13px;
-}
-
-/* Styles applied to the root element if `size="large"` and `variant="contained"`. */
-.containedSizeLarge {
-  padding: 8px 22px;
-  font-size: 15px;
-}
-
-/* Styles applied to the startIcon element if supplied. */
-.startIcon {
-  display: inherit;
-  margin-right: 8px;
-  margin-left: -4px;
-}
-
-/* Styles applied to the endIcon element if supplied. */
-.endIcon {
-  display: inherit;
-  margin-right: -4px;
-  margin-left: 8px;
-}

platform/ui/src/components/ButtonModules/index.js

@@ -1,2 +0,0 @@
-import ButtonModules from './ButtonModules';
-export default ButtonModules;

platform/ui/src/components/Input/Input.mdx

@@ -19,7 +19,7 @@ import Input from './';
   {() => {
     const [inputValue, setInputValue] = React.useState('');
     return (
-      <div className="m-5 bg-black">
+      <div>
         <Input
           transparent
           containerClassName="mb-3"

platform/ui/src/gatsby-theme-docz/theme.css

@@ -0,0 +1,7 @@
+/**
+  OVERRIDE DOCZ THEME
+*/
+
+[data-testid='live-preview'] {
+  padding: 10px;
+}

platform/ui/src/gatsby-theme-docz/wrapper.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import './app.css';
+import './tailwind.css';
+import './theme.css';
 
 const Wrapper = ({ children }) => <React.Fragment>{children}</React.Fragment>;
 export default Wrapper;

platform/ui/src/styles/app.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;