Refactor CodeSandbox Black to use object + color tokens (codesandbox#3075)

* refactor theme to object instead of dot notation

* use our design language tokens for theme

* move color tokens to a folder of its own

* round off editor whitespace to closest token

Author: siddharthkp

packages/app/src/embed/theme/index.js

@@ -1,6 +1,6 @@
 import dot from 'dot-object';
 import applicationTheme from '@codesandbox/common/lib/theme';
-import codesandboxBlack from '@codesandbox/common/lib/themes/codesandbox-black.json';
+import codesandboxBlack from '@codesandbox/common/lib/themes/codesandbox-black';
 import codesandboxLight from '@codesandbox/common/lib/themes/codesandbox-light.json';
 import tokens from './tokens';
 

packages/common/package.json

@@ -51,6 +51,7 @@
     "codesandbox-api": "^0.0.22",
     "color": "0.11.4",
     "date-fns": "^2.0.0",
+    "dot-object": "1.9.0",
     "error-polyfill": "^0.1.1",
     "humps": "CompuIves/humps",
     "image-extensions": "^1.1.0",

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

@@ -0,0 +1,26 @@
+export const colors = {
+  white: '#fff',
+  grays: {
+    100: '#fff9f9',
+    200: '#e6e6e6',
+    300: '#999999',
+    400: '#757575',
+    500: '#242424',
+    600: '#343434',
+    700: '#151515',
+    800: '#040404',
+  },
+  blues: {
+    300: '#6CC7F6', // Teal
+    600: '#0971f1', // Blue
+    700: '#535BCF', // Indigo
+  },
+  reds: {
+    200: '#EB455A', // Pink
+    300: '#FF453A', // Heart
+    500: '#E1270E', // Red
+  },
+  green: '#5BC266',
+  purple: '#BF5AF2',
+  yellow: '#FBCC43',
+};