feat(core): styles baseline component

packages/core/package.json

@@ -34,9 +34,11 @@
     "react": "17.x"
   },
   "dependencies": {
-    "@emotion/css": "11.x",
-    "@emotion/react": "11.x",
     "@arwes/animation": "^1.0.0-alpha.16",
-    "@arwes/sounds": "^1.0.0-alpha.16"
+    "@arwes/design": "^1.0.0-alpha.17",
+    "@arwes/sounds": "^1.0.0-alpha.16",
+    "@emotion/css": "^11.1.3",
+    "@emotion/react": "^11.1.4",
+    "polished": "^4.1.0"
   }
 }

packages/core/src/StylesBaseline/StylesBaseline.component.tsx

@@ -0,0 +1,48 @@
+import { Global } from '@emotion/react';
+import React, { FC, useMemo } from 'react';
+import { createTheme } from '@arwes/design';
+
+import { createGlobalGeneralStyles } from './StylesBaseline.styles';
+
+const StylesBaseline: FC = props => {
+  const { children } = props;
+
+  const theme = useMemo(() => {
+    return createTheme({
+      palette: {
+        primary: {
+          light: '#7efcf6',
+          main: '#00f8f8',
+          dark: '#05c6c1'
+        },
+        secondary: {
+          light: '#ffece1',
+          main: '#ffa76c',
+          dark: '#f66901'
+        },
+        neutral: {
+          main: '#021114'
+        },
+        text: {
+          root: '#7efcf6',
+          headings: '#00f8f8',
+          link: '#ffa76c',
+          linkHover: '#f66901'
+        }
+      }
+    });
+  }, []);
+
+  const globalGeneralStyles = useMemo(() => {
+    return createGlobalGeneralStyles(theme);
+  }, [theme]);
+
+  return (
+    <>
+      <Global styles={globalGeneralStyles} />
+      {children}
+    </>
+  );
+};
+
+export { StylesBaseline };

packages/core/src/StylesBaseline/StylesBaseline.styles.ts

@@ -0,0 +1,68 @@
+import rgba from 'polished/lib/color/rgba';
+import { CSSObject } from '@emotion/css';
+import { Theme } from '@arwes/design';
+
+const createGlobalGeneralStyles = (theme: Theme): Record<string, CSSObject> => {
+  return {
+    '*, *:before, *:after': {
+      boxSizing: 'border-box'
+    },
+    'html, body': {
+      margin: 0,
+      padding: 0,
+      backgroundColor: theme.palette.neutral.main,
+
+      // Fonts
+      fontSize: '16px',
+      lineHeight: 1.2,
+      color: theme.palette.text.root,
+
+      // Scrollbars
+      scrollbarWidth: 'thin',
+      scrollbarColor: theme.palette.neutral.elevate(4) + ' transparent',
+      '& ::-webkit-scrollbar': {
+        width: 10
+      },
+      '& ::-webkit-scrollbar-thumb': {
+        background: theme.palette.neutral.elevate(4),
+        transition: 'background 150ms ease-out',
+        '&:hover': {
+          background: theme.palette.neutral.elevate(5)
+        }
+      },
+      '& ::-webkit-scrollbar-track': {
+        background: 'transparent'
+      },
+
+      // Selection
+      '& ::selection': {
+        backgroundColor: rgba(theme.palette.primary.main, 0.2),
+        color: 'inherit'
+      }
+    },
+    'h1, h2, h3, h4, h5, h6': {
+      lineHeight: 1,
+      fontWeight: 'bold',
+      color: theme.palette.text.headings,
+      textTransform: 'uppercase',
+      textShadow: `0 0 ${theme.shadow.blur(1)}px ${theme.palette.text.headings}`
+    },
+    h1: { fontSize: '1.75rem' },
+    h2: { fontSize: '1.625rem' },
+    h3: { fontSize: '1.5rem' },
+    h4: { fontSize: '1.375rem' },
+    h5: { fontSize: '1.25rem' },
+    h6: { fontSize: '1.125rem' },
+    a: {
+      color: theme.palette.text.link,
+      transition: 'color 150ms ease-out',
+      outline: 'none',
+
+      '&:hover, &:focus': {
+        color: theme.palette.text.linkHover
+      }
+    }
+  };
+};
+
+export { createGlobalGeneralStyles };

packages/core/src/StylesBaseline/basic.sandbox.md

@@ -0,0 +1,38 @@
+```js
+// THIS SANDBOX MODIFIES THE HTML ELEMENTS GLOBAL STYLES.
+// IT MAY CONFLICT WITH THE PLAYGROUND APPLICATION STYLES.
+
+const Sandbox = () => {
+  return (
+    <>
+      <StylesBaseline />
+      <h1>h1. Lorem ipsum lov sit amet</h1>
+      <h2>h2. Lorem ipsum lov sit amet</h2>
+      <h3>h3. Lorem ipsum lov sit amet</h3>
+      <h4>h4. Lorem ipsum lov sit amet</h4>
+      <h5>h5. Lorem ipsum lov sit amet</h5>
+      <h6>h6. Lorem ipsum lov sit amet</h6>
+      <p>
+        Lorem ipsum lov sit amet, consectetur adipiscing elit, sed
+        do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
+        nisi ut aliquip ex ea commodo consequat.
+      </p>
+      <p>
+        Lorem ipsum <b>lov sit amet, consectetur</b> adipiscing elit.
+      </p>
+      <p>
+        Lorem ipsum <i>lov sit amet, consectetur</i> adipiscing elit.
+      </p>
+      <p>
+        Lorem ipsum <u>lov sit amet, consectetur</u> adipiscing elit.
+      </p>
+      <p>
+        Lorem ipsum <a href='#'>lov sit amet, consectetur</a> adipiscing elit.
+      </p>
+    </>
+  );
+};
+
+render(<Sandbox />);
+```

packages/core/src/StylesBaseline/index.ts

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

packages/core/src/index.ts

@@ -1 +1,2 @@
+export * from './StylesBaseline';
 export * from './Text';

playground/src/playgroundConfigs.js

@@ -55,6 +55,12 @@ const playgroundConfigs = [
   {
     name: 'core',
     components: [
+      {
+        name: 'StylesBaseline',
+        sandboxes: [
+          { name: 'basic', code: require('repository/packages/core/src/StylesBaseline/basic.sandbox.md').default }
+        ]
+      },
       {
         name: 'Text',
         sandboxes: [