Text Component

.nvmrc

@@ -1 +1 @@
-lts/carbon
+lts/fermium

.storybook/preview.js

@@ -1,5 +1,14 @@
+import globalStyles from '../src/lib/global-styles';
+
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
 export const parameters = {
   // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
   actions: { argTypesRegex: '^on.*' },
 };
+
+export const decorators = [
+  (Story) => {
+    globalStyles();
+    return <Story />;
+  },
+];

package.json

@@ -70,5 +70,8 @@
     "tsdx": "^0.14.1",
     "tslib": "^2.2.0",
     "typescript": "^4.2.4"
+  },
+  "dependencies": {
+    "@stitches/react": "^0.1.9"
   }
 }

src/components/Box.tsx

@@ -0,0 +1,7 @@
+import { styled } from '../stitches.config';
+
+const Box = styled('div', {
+  boxSizing: 'border-box',
+});
+
+export default Box;

src/components/Text.tsx

@@ -0,0 +1,49 @@
+import { styled } from '../stitches.config';
+
+const Text = styled('p', {
+  variants: {
+    size: {
+      1: {
+        fontSize: '$1',
+        lineHeight: '$1',
+      },
+      2: {
+        fontSize: '$2',
+        lineHeight: '$2',
+      },
+      3: {
+        fontSize: '$3',
+        lineHeight: '$2',
+      },
+      4: {
+        fontSize: '$4',
+        lineHeight: '$3',
+      },
+      5: {
+        fontSize: '$5',
+        lineHeight: '$3',
+      },
+      6: {
+        fontSize: '$6',
+        lineHeight: '$4',
+      },
+    },
+    font: {
+      display: {
+        fontFamily: '$display',
+      },
+      main: {
+        fontFamily: '$main',
+      },
+      mono: {
+        fontFamily: '$mono',
+      },
+    },
+  },
+  defaultVariants: {
+    size: '1',
+    font: 'main',
+  },
+});
+
+export default Text;

src/index.ts

@@ -0,0 +1,11 @@
+export { default as Box } from './components/Box';
+export { default as Text } from './components/Text';
+export { default as globalStyles } from './lib/global-styles';
+export {
+  styled,
+  css,
+  theme,
+  getCssString,
+  global,
+  keyframes,
+} from './stitches.config';

src/lib/global-styles.ts

@@ -0,0 +1,73 @@
+import { global } from '../stitches.config';
+import { GT_AMERICA, GT_AMERICA_MONO, MOJO_ALTIS } from './font-data';
+
+const globalStyles = global({
+  // fonts
+  '@font-face': [
+    {
+      fontFamily: 'altis-mojoregular',
+      fontDisplay: 'block',
+      fontWeight: 'normal',
+      fontStyle: 'normal',
+      src: `url(${MOJO_ALTIS}) format("woff")`,
+    },
+    {
+      fontFamily: 'GT America Light',
+      fontDisplay: 'block',
+      src: `url(${GT_AMERICA}) format("woff")`,
+    },
+    {
+      fontFamily: 'GT America Mono',
+      fontDisplay: 'block',
+      fontWeight: 'normal',
+      fontStyle: 'normal',
+      src: `url(${GT_AMERICA_MONO}) format("woff")`,
+    },
+  ],
+  body: {
+    fontFamily: '$main',
+  },
+  // reset
+  'html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6': {
+    margin: 0,
+    padding: 0,
+  },
+  'h1,h2,h3,h4,h5,h6': {
+    fontSize: '100%',
+    fontWeight: 'normal',
+  },
+  ul: {
+    listStyle: 'none',
+  },
+  'button,input,select,textarea': {
+    margin: 0,
+  },
+  html: {
+    boxSizing: 'border-box',
+    '-webkit-font-smoothing': 'antialiased',
+    '-moz-osx-font-smoothing': 'grayscale',
+  },
+  '*,*:before,*:after': {
+    boxSizing: 'inherit',
+  },
+  'img,embed,iframe,object,video': {
+    height: 'auto',
+    maxWidth: '100%',
+  },
+  audio: {
+    maxWidth: '100%',
+  },
+  iframe: {
+    border: 0,
+  },
+  table: {
+    borderCollapse: 'collapse',
+    borderSpacing: 0,
+  },
+  'td,th': {
+    padding: 0,
+    textAlign: 'left',
+  },
+});
+
+export default globalStyles;