Merge pull request #651 from coingaming/develop

Release
coingaming · Dec 11, 2019 · c68c897 · c68c897
2 parents 0cb5e04 + 55b298d
commit c68c897
Show file tree

Hide file tree

Showing 216 changed files with 6,072 additions and 5,317 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -42,7 +42,7 @@
 - [ ] My code follows the [code style][code-style] of this project.
 - [ ] All new and existing tests passed.
 - [ ] My HTML markup is valid and meets [W3C standards](https://validator.w3.org/).
-- [ ] My styles avoid hard-coded 'magic' values and make use of the design tokens.
+- [ ] My styles avoid hard-coded 'magic' values and make use of the design tokens available in themes.
 - [ ] My code meets the [A11Y Web Accessibility Checklist](https://a11yproject.com/checklist). If not, please add justification documentation.
 - [ ] My change requires a change to the documentation.
 - [ ] I have updated the documentation accordingly.

diff --git a/docs/config.json b/docs/config.json
@@ -8,10 +8,11 @@
     "fonts",
     "global",
     "tokens",
+    "themes",
     "utils"
   ],
   "menuSections": [
-    "Tokens",
+    "Themes",
     "Global",
     "Assets",
     "Components",

diff --git a/docs/gatsby-config.js b/docs/gatsby-config.js
@@ -1,7 +1,7 @@
 /* eslint-disable import/no-unresolved, @typescript-eslint/camelcase */
 const path = require('path');
 
-const { colors } = require('@heathmont/sportsbet-tokens');
+const { sportsbetDark } = require('@heathmont/sportsbet-themes');
 
 const { siteTitle, description, author } = require('./config');
 
@@ -62,8 +62,8 @@ module.exports = {
         name: siteTitle,
         short_name: siteTitle,
         start_url: '/',
-        background_color: colors.brand,
-        theme_color: colors.brand,
+        background_color: sportsbetDark.color.piccolo[100],
+        theme_color: sportsbetDark.color.piccolo[100],
         display: 'minimal-ui',
         icon: 'src/images/icon.png', // This path is relative to the root of the site.
       },

diff --git a/docs/gatsby-node.js b/docs/gatsby-node.js
@@ -10,23 +10,25 @@ const { packages } = require('./config.json');
  * See https://www.gatsbyjs.org/docs/add-custom-webpack-config/
  */
 exports.onCreateWebpackConfig = ({ actions }) => {
-  actions.setWebpackConfig({
-    node: {
-      fs: 'empty',
-    },
-    resolve: {
-      alias: packages.reduce((acc, packageName) => {
-        acc[`@heathmont/sportsbet-${packageName}`] = path.resolve(
-          __dirname,
-          '..',
-          'packages',
-          packageName,
-          'src'
-        );
-        return acc;
-      }, {}),
-    },
-  });
+  actions.setWebpackConfig(
+    process.env.NODE_ENV !== 'production' && {
+      node: {
+        fs: 'empty',
+      },
+      resolve: {
+        alias: packages.reduce((acc, packageName) => {
+          acc[`@heathmont/sportsbet-${packageName}`] = path.resolve(
+            __dirname,
+            '..',
+            'packages',
+            packageName,
+            'src'
+          );
+          return acc;
+        }, {}),
+      },
+    }
+  );
 };
 
 exports.createPages = ({ graphql, actions }) => {

diff --git a/docs/package.json b/docs/package.json
@@ -35,7 +35,7 @@
     "@heathmont/sportsbet-components": "^0.101.0",
     "@heathmont/sportsbet-fonts": "^0.101.0",
     "@heathmont/sportsbet-global": "^0.101.0",
-    "@heathmont/sportsbet-tokens": "^0.101.0",
+    "@heathmont/sportsbet-themes": "^0.101.0",
     "@heathmont/sportsbet-utils": "^0.101.0",
     "@mdx-js/mdx": "0.16.8",
     "@mdx-js/tag": "0.16.8",

diff --git a/docs/src/components/code/index.tsx b/docs/src/components/code/index.tsx
@@ -4,88 +4,96 @@ import Highlight, { defaultProps } from 'prism-react-renderer';
 import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
 import * as Assets from '@heathmont/sportsbet-assets';
 import * as Components from '@heathmont/sportsbet-components';
-import { border, colors, typography } from '@heathmont/sportsbet-tokens';
 import * as Utils from '@heathmont/sportsbet-utils';
+import { useTheme } from '@heathmont/sportsbet-themes';
 
-import { prismTheme, syntaxStyles } from './prism';
+import { prismTheme } from './prism';
 
 type CodeProps = {
   codeString: string;
   language: string;
   'react-live'?: boolean;
 };
 
-const codeBorder = `${border.width}px solid ${colors.neutral[40]}`;
+const CodeWrapper = styled.div(
+  ({ theme: { border, color, radius, space } }) => ({
+    display: 'block',
+    border,
+    borderColor: color.beerus[100],
+    borderRadius: Utils.rem(radius.small),
+    position: 'relative',
+    overflow: 'hidden',
+    '.prism-code:focus': {
+      outline: 'none',
+      boxShadow: `inset 0 0 3px ${color.piccolo[100]}`,
+    },
+    pre: {
+      padding: Utils.rem(space.default),
+      overflow: 'auto',
+      marginBottom: '0',
+    },
+  })
+);
 
-const CodeWrapper = styled.div({
-  display: 'block',
-  border: codeBorder,
-  borderRadius: border.radius.small,
-  position: 'relative',
-  overflow: 'hidden',
-  '.prism-code:focus': {
-    outline: 'none',
-    boxShadow: `inset 0 0 3px ${colors.brand}`,
-  },
-  ...syntaxStyles,
-});
+const CodePreview = styled.div(
+  ({ theme: { border, color, fontFamily, space } }) => ({
+    padding: Utils.rem(space.large),
+    minHeight: Utils.rem(space.large),
+    fontFamily,
+    borderBottom: border,
+    borderColor: color.beerus[100],
+    overflowY: 'scroll',
+  })
+);
 
-const CodePreview = styled.div({
-  padding: Utils.spacing('large'),
-  minHeight: Utils.spacing('xlarge'),
-  fontFamily: typography.fontFamily,
-  borderBottom: codeBorder,
-  overflowY: 'scroll',
-});
-
-/* Ensures that we can use `css` props + not have to worry about wrapper divs */
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-
-export const Code = ({ codeString, ...props }: CodeProps) =>
-  /* eslint-disable-next-line react/destructuring-assignment */
-  props['react-live'] ? (
-    <CodeWrapper>
-      <LiveProvider
-        code={codeString}
-        scope={{
-          ...Assets,
-          ...Components,
-          ...Utils,
-          colors,
-          styled,
-        }}
-        theme={prismTheme}
-      >
-        <React.Fragment>
-          <CodePreview>
-            {typeof window !== 'undefined' && <LivePreview />}
-          </CodePreview>
-          <div css={{ overflowY: 'scroll' }}>
-            <LiveEditor />
-          </div>
-          <LiveError />
-        </React.Fragment>
-      </LiveProvider>
-    </CodeWrapper>
-  ) : (
-    <CodeWrapper>
-      <Highlight
-        {...defaultProps}
-        code={codeString}
-        language="jsx"
-        theme={prismTheme}
-      >
-        {({ className, style, tokens, getLineProps, getTokenProps }) => (
-          <pre className={className} style={style}>
-            {tokens.map((line, i) => (
-              <div {...getLineProps({ line, key: i })}>
-                {line.map((token, key) => (
-                  <span {...getTokenProps({ token, key })} />
-                ))}
-              </div>
-            ))}
-          </pre>
-        )}
-      </Highlight>
-    </CodeWrapper>
+export const Code = ({ codeString, ...props }: CodeProps) => {
+  return (
+    /* eslint-disable-next-line react/destructuring-assignment */
+    props['react-live'] ? (
+      <CodeWrapper>
+        <LiveProvider
+          code={codeString}
+          scope={{
+            ...Assets,
+            ...Components,
+            ...Utils,
+            useTheme,
+            styled,
+          }}
+          theme={prismTheme()}
+        >
+          <React.Fragment>
+            <CodePreview>
+              {typeof window !== 'undefined' && <LivePreview />}
+            </CodePreview>
+            <div css={{ overflowY: 'scroll' }}>
+              <LiveEditor />
+            </div>
+            <LiveError />
+          </React.Fragment>
+        </LiveProvider>
+      </CodeWrapper>
+    ) : (
+      <CodeWrapper>
+        <Highlight
+          {...defaultProps}
+          code={codeString}
+          language="jsx"
+          theme={prismTheme()}
+        >
+          {({ className, style, tokens, getLineProps, getTokenProps }) => (
+            <pre className={className} style={style}>
+              {tokens.map((line, i) => (
+                <div {...getLineProps({ line, key: i })}>
+                  {line.map((token, key) => (
+                    <span {...getTokenProps({ token, key })} />
+                  ))}
+                </div>
+              ))}
+            </pre>
+          )}
+        </Highlight>
+      </CodeWrapper>
+    )
   );
+};