merge themes, use ts version

Author: siddharthkp

packages/app/src/app/pages/common/Modals/ShareModal2/index.tsx

@@ -19,7 +19,7 @@ import queryString from 'query-string';
 import { useOvermind } from 'app/overmind';
 import { ThemeProvider } from 'styled-components';
 
-import { theme } from '@codesandbox/common/lib/design-language';
+import theme from '@codesandbox/common/lib/design-language/theme';
 import { Sandbox } from '@codesandbox/common/lib/types';
 
 import FileTree from 'embed/components/Sidebar/FileTree';

packages/common/src/design-language/index.js

@@ -1,13 +1,19 @@
+// this theme follows the System UI Theme Specification
+// Ref: https://system-ui.com/theme
+
 import { colors } from './colors';
-import { fontSizes, fontWeights } from './typography';
+import { fonts, fontSizes, fontWeights } from './typography';
 
 const theme = {
   colors,
+
+  fonts,
   fontSizes,
   fontWeights,
 
   // we use a 4 point grid
-  space: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40],
+  space: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40], // for margin + padding
+  sizes: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40], // for width + height
 
   // transition speeds in ms
   speeds: [0, '75ms', '100ms', '150ms', '200ms', '300ms', '500ms'],

packages/common/src/design-language/theme.ts

@@ -1,3 +1,8 @@
+export const fonts = {
+  body: 'Inter, sans-serif',
+  code: 'Source Code Pro, monospace',
+};
+
 export const fontSizes = [
   0,
   9, // not used yet.