diff --git a/package-lock.json b/package-lock.json
index 019dd2a38b237..edb4c382fc58e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -86,7 +86,6 @@
 			"version": "7.4.4",
 			"resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.4.4.tgz",
 			"integrity": "sha512-53UOLK6TVNqKxf7RUh8NE851EHRxOOeVXKbK2bivdb+iziMyk03Sr4eaE9OELCbyZAAafAKPDwF2TPUES5QbxQ==",
-			"dev": true,
 			"requires": {
 				"@babel/types": "^7.4.4",
 				"jsesc": "^2.5.1",
@@ -99,7 +98,6 @@
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz",
 			"integrity": "sha512-3UYcJUj9kvSLbLbUIfQTqzcy5VX7GRZ/CCDrnOaZorFFM01aXp1+GJwuFGV4NDDoAS+mOUyHcO6UD/RfqOks3Q==",
-			"dev": true,
 			"requires": {
 				"@babel/types": "^7.0.0"
 			}
@@ -163,7 +161,6 @@
 			"version": "7.1.0",
 			"resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz",
 			"integrity": "sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==",
-			"dev": true,
 			"requires": {
 				"@babel/helper-get-function-arity": "^7.0.0",
 				"@babel/template": "^7.1.0",
@@ -200,7 +197,6 @@
 			"version": "7.0.0",
 			"resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz",
 			"integrity": "sha512-aP/hlLq01DWNEiDg4Jn23i+CXxW/owM4WpDLFUbpjxe4NS3BhLVZQ5i7E0ZrxuQ/vwekIeciyamgB1UIYxxM6A==",
-			"dev": true,
 			"requires": {
 				"@babel/types": "^7.0.0"
 			}
@@ -282,7 +278,6 @@
 			"version": "7.4.4",
 			"resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz",
 			"integrity": "sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==",
-			"dev": true,
 			"requires": {
 				"@babel/types": "^7.4.4"
 			}
@@ -323,8 +318,7 @@
 		"@babel/parser": {
 			"version": "7.4.4",
 			"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.4.4.tgz",
-			"integrity": "sha512-5pCS4mOsL+ANsFZGdvNLybx4wtqAZJ0MJjMHxvzI3bvIsz6sQvzW8XX92EYIkiPtIvcfG3Aj+Ir5VNyjnZhP7w==",
-			"dev": true
+			"integrity": "sha512-5pCS4mOsL+ANsFZGdvNLybx4wtqAZJ0MJjMHxvzI3bvIsz6sQvzW8XX92EYIkiPtIvcfG3Aj+Ir5VNyjnZhP7w=="
 		},
 		"@babel/plugin-external-helpers": {
 			"version": "7.2.0",
@@ -1241,7 +1235,6 @@
 			"version": "7.4.4",
 			"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.4.tgz",
 			"integrity": "sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==",
-			"dev": true,
 			"requires": {
 				"@babel/code-frame": "^7.0.0",
 				"@babel/parser": "^7.4.4",
@@ -1252,7 +1245,6 @@
 			"version": "7.4.4",
 			"resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.4.4.tgz",
 			"integrity": "sha512-Gw6qqkw/e6AGzlyj9KnkabJX7VcubqPtkUQVAwkc0wUMldr3A/hezNB3Rc5eIvId95iSGkGIOe5hh1kMKf951A==",
-			"dev": true,
 			"requires": {
 				"@babel/code-frame": "^7.0.0",
 				"@babel/generator": "^7.4.4",
@@ -1269,7 +1261,6 @@
 					"version": "4.1.1",
 					"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
 					"integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-					"dev": true,
 					"requires": {
 						"ms": "^2.1.1"
 					}
@@ -1277,14 +1268,12 @@
 				"globals": {
 					"version": "11.12.0",
 					"resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
-					"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
-					"dev": true
+					"integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="
 				},
 				"ms": {
 					"version": "2.1.2",
 					"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
-					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-					"dev": true
+					"integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w=="
 				}
 			}
 		},
@@ -1308,6 +1297,24 @@
 				"minimist": "^1.2.0"
 			}
 		},
+		"@emotion/is-prop-valid": {
+			"version": "0.8.3",
+			"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.3.tgz",
+			"integrity": "sha512-We7VBiltAJ70KQA0dWkdPMXnYoizlxOXpvtjmu5/MBnExd+u0PGgV27WCYanmLAbCwAU30Le/xA0CQs/F/Otig==",
+			"requires": {
+				"@emotion/memoize": "0.7.3"
+			}
+		},
+		"@emotion/memoize": {
+			"version": "0.7.3",
+			"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.3.tgz",
+			"integrity": "sha512-2Md9mH6mvo+ygq1trTeVp2uzAKwE2P7In0cRpD/M9Q70aH8L+rxMLbb3JCN2JoSWsV2O+DdFjfbbXoMoLBczow=="
+		},
+		"@emotion/unitless": {
+			"version": "0.7.4",
+			"resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.4.tgz",
+			"integrity": "sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ=="
+		},
 		"@evocateur/libnpmaccess": {
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@evocateur/libnpmaccess/-/libnpmaccess-3.1.2.tgz",
@@ -4236,6 +4243,108 @@
 				"any-observable": "^0.3.0"
 			}
 		},
+		"@styled-system/background": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/@styled-system/background/-/background-5.1.2.tgz",
+			"integrity": "sha512-jtwH2C/U6ssuGSvwTN3ri/IyjdHb8W9X/g8Y0JLcrH02G+BW3OS8kZdHphF1/YyRklnrKrBT2ngwGUK6aqqV3A==",
+			"requires": {
+				"@styled-system/core": "^5.1.2"
+			}
+		},
+		"@styled-system/border": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/@styled-system/border/-/border-5.1.2.tgz",
+			"integrity": "sha512-mSSxyQGXELdNSOlf4RqaOKsX+w6//zooR3p6qDj5Zgc5pIdEsJm63QLz6EST/6xBJwTX0Z1w4ExItdd6Q7rlTQ==",
+			"requires": {
+				"@styled-system/core": "^5.1.2"
+			}
+		},
+		"@styled-system/color": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/@styled-system/color/-/color-5.1.2.tgz",
+			"integrity": "sha512-1kCkeKDZkt4GYkuFNKc7vJQMcOmTl3bJY3YBUs7fCNM6mMYJeT1pViQ2LwBSBJytj3AB0o4IdLBoepgSgGl5MA==",
+			"requires": {
+				"@styled-system/core": "^5.1.2"
+			}
+		},
+		"@styled-system/core": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/@styled-system/core/-/core-5.1.2.tgz",
+			"integrity": "sha512-XclBDdNIy7OPOsN4HBsawG2eiWfCcuFt6gxKn1x4QfMIgeO6TOlA2pZZ5GWZtIhCUqEPTgIBta6JXsGyCkLBYw==",
+			"requires": {
+				"object-assign": "^4.1.1"
+			}
+		},
+		"@styled-system/css": {
+			"version": "5.0.23",
+			"resolved": "https://registry.npmjs.org/@styled-system/css/-/css-5.0.23.tgz",
+			"integrity": "sha512-yC3S0Iox8OTPAyrP1t5yY9nURUICcUdhVYOkwffftuxa5+txxI4qkT2e9JNCc2aaem+DG8mlXTdnYefjqge5wg=="
+		},
+		"@styled-system/flexbox": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/@styled-system/flexbox/-/flexbox-5.1.2.tgz",
+			"integrity": "sha512-6hHV52+eUk654Y1J2v77B8iLeBNtc+SA3R4necsu2VVinSD7+XY5PCCEzBFaWs42dtOEDIa2lMrgL0YBC01mDQ==",
+			"requires": {
+				"@styled-system/core": "^5.1.2"
+			}
+		},
+		"@styled-system/grid": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/@styled-system/grid/-/grid-5.1.2.tgz",
+			"integrity": "sha512-K3YiV1KyHHzgdNuNlaw8oW2ktMuGga99o1e/NAfTEi5Zsa7JXxzwEnVSDSBdJC+z6R8WYTCYRQC6bkVFcvdTeg==",
+			"requires": {
+				"@styled-system/core": "^5.1.2"
+			}
+		},
+		"@styled-system/layout": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/@styled-system/layout/-/layout-5.1.2.tgz",
+			"integrity": "sha512-wUhkMBqSeacPFhoE9S6UF3fsMEKFv91gF4AdDWp0Aym1yeMPpqz9l9qS/6vjSsDPF7zOb5cOKC3tcKKOMuDCPw==",
+			"requires": {
+				"@styled-system/core": "^5.1.2"
+			}
+		},
+		"@styled-system/position": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/@styled-system/position/-/position-5.1.2.tgz",
+			"integrity": "sha512-60IZfMXEOOZe3l1mCu6sj/2NAyUmES2kR9Kzp7s2D3P4qKsZWxD1Se1+wJvevb+1TP+ZMkGPEYYXRyU8M1aF5A==",
+			"requires": {
+				"@styled-system/core": "^5.1.2"
+			}
+		},
+		"@styled-system/shadow": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/@styled-system/shadow/-/shadow-5.1.2.tgz",
+			"integrity": "sha512-wqniqYb7XuZM7K7C0d1Euxc4eGtqEe/lvM0WjuAFsQVImiq6KGT7s7is+0bNI8O4Dwg27jyu4Lfqo/oIQXNzAg==",
+			"requires": {
+				"@styled-system/core": "^5.1.2"
+			}
+		},
+		"@styled-system/space": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/@styled-system/space/-/space-5.1.2.tgz",
+			"integrity": "sha512-+zzYpR8uvfhcAbaPXhH8QgDAV//flxqxSjHiS9cDFQQUSznXMQmxJegbhcdEF7/eNnJgHeIXv1jmny78kipgBA==",
+			"requires": {
+				"@styled-system/core": "^5.1.2"
+			}
+		},
+		"@styled-system/typography": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/@styled-system/typography/-/typography-5.1.2.tgz",
+			"integrity": "sha512-BxbVUnN8N7hJ4aaPOd7wEsudeT7CxarR+2hns8XCX1zp0DFfbWw4xYa/olA0oQaqx7F1hzDg+eRaGzAJbF+jOg==",
+			"requires": {
+				"@styled-system/core": "^5.1.2"
+			}
+		},
+		"@styled-system/variant": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/@styled-system/variant/-/variant-5.1.2.tgz",
+			"integrity": "sha512-NousRWr0JQSOZS87f1N+59EUAo7ZH6/Df/iN1ZVjHr2Ntah/lPMQvAnIuqkknjoRMjJL/g1SyoQ+dP3QX0XOng==",
+			"requires": {
+				"@styled-system/core": "^5.1.2",
+				"@styled-system/css": "^5.0.23"
+			}
+		},
 		"@tannin/compile": {
 			"version": "1.0.3",
 			"resolved": "https://registry.npmjs.org/@tannin/compile/-/compile-1.0.3.tgz",
@@ -4816,6 +4925,8 @@
 				"react-dates": "^17.1.1",
 				"react-spring": "^8.0.20",
 				"rememo": "^3.0.0",
+				"styled-components": "^4.4.0",
+				"styled-system": "^5.1.2",
 				"tinycolor2": "^1.4.1",
 				"uuid": "^3.3.2"
 			}
@@ -6482,6 +6593,22 @@
 				"@babel/template": "^7.0.0-beta.49"
 			}
 		},
+		"babel-plugin-styled-components": {
+			"version": "1.10.6",
+			"resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.6.tgz",
+			"integrity": "sha512-gyQj/Zf1kQti66100PhrCRjI5ldjaze9O0M3emXRPAN80Zsf8+e1thpTpaXJXVHXtaM4/+dJEgZHyS9Its+8SA==",
+			"requires": {
+				"@babel/helper-annotate-as-pure": "^7.0.0",
+				"@babel/helper-module-imports": "^7.0.0",
+				"babel-plugin-syntax-jsx": "^6.18.0",
+				"lodash": "^4.17.11"
+			}
+		},
+		"babel-plugin-syntax-jsx": {
+			"version": "6.18.0",
+			"resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+			"integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+		},
 		"babel-plugin-syntax-trailing-function-commas": {
 			"version": "7.0.0-beta.0",
 			"resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz",
@@ -7266,6 +7393,11 @@
 				"quick-lru": "^1.0.0"
 			}
 		},
+		"camelize": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+			"integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+		},
 		"caniuse-api": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -9358,6 +9490,11 @@
 				}
 			}
 		},
+		"css-color-keywords": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+			"integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+		},
 		"css-color-names": {
 			"version": "0.0.4",
 			"resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -9527,6 +9664,16 @@
 				}
 			}
 		},
+		"css-to-react-native": {
+			"version": "2.3.2",
+			"resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.2.tgz",
+			"integrity": "sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==",
+			"requires": {
+				"camelize": "^1.0.0",
+				"css-color-keywords": "^1.0.0",
+				"postcss-value-parser": "^3.3.0"
+			}
+		},
 		"css-tree": {
 			"version": "1.0.0-alpha.28",
 			"resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.28.tgz",
@@ -14599,6 +14746,11 @@
 			"integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
 			"dev": true
 		},
+		"is-what": {
+			"version": "3.3.1",
+			"resolved": "https://registry.npmjs.org/is-what/-/is-what-3.3.1.tgz",
+			"integrity": "sha512-seFn10yAXy+yJlTRO+8VfiafC+0QJanGLMPTBWLrJm/QPauuchy0UXh8B6H5o9VA8BAzk0iYievt6mNp6gfaqA=="
+		},
 		"is-whitespace-character": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.2.tgz",
@@ -16151,8 +16303,7 @@
 		"jsesc": {
 			"version": "2.5.1",
 			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.1.tgz",
-			"integrity": "sha1-5CGiqOINawgZ3yiQj3glJrlt0f4=",
-			"dev": true
+			"integrity": "sha1-5CGiqOINawgZ3yiQj3glJrlt0f4="
 		},
 		"json-parse-better-errors": {
 			"version": "1.0.2",
@@ -17325,6 +17476,11 @@
 			"resolved": "https://registry.npmjs.org/memize/-/memize-1.0.5.tgz",
 			"integrity": "sha512-Dm8Jhb5kiC4+ynYsVR4QDXKt+o2dfqGuY4hE2x+XlXZkdndlT80bJxfcMv5QGp/FCy6MhG7f5ElpmKPFKOSEpg=="
 		},
+		"memoize-one": {
+			"version": "5.1.1",
+			"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.1.1.tgz",
+			"integrity": "sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA=="
+		},
 		"memory-fs": {
 			"version": "0.4.1",
 			"resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
@@ -17418,6 +17574,14 @@
 				}
 			}
 		},
+		"merge-anything": {
+			"version": "2.4.1",
+			"resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-2.4.1.tgz",
+			"integrity": "sha512-dYOIAl9GFCJNctSIHWOj9OJtarCjsD16P8ObCl6oxrujAG+kOvlwJuOD9/O9iYZ9aTi1RGpGTG9q9etIvuUikQ==",
+			"requires": {
+				"is-what": "^3.3.1"
+			}
+		},
 		"merge-deep": {
 			"version": "3.0.2",
 			"resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.2.tgz",
@@ -21412,8 +21576,7 @@
 		"postcss-value-parser": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz",
-			"integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=",
-			"dev": true
+			"integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU="
 		},
 		"posthtml": {
 			"version": "0.11.3",
@@ -24155,8 +24318,7 @@
 		"source-map": {
 			"version": "0.5.7",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-			"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-			"dev": true
+			"integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
 		},
 		"source-map-loader": {
 			"version": "0.2.4",
@@ -24631,6 +24793,56 @@
 			"integrity": "sha1-eVjHk+R+MuB9K1yv5cC/jhLneQI=",
 			"dev": true
 		},
+		"styled-components": {
+			"version": "4.4.0",
+			"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.0.tgz",
+			"integrity": "sha512-xQ6vTI/0zNjZ1BBDRxyjvBddrxhQ3DxjeCdaLM1lSn5FDnkTOQgRkmWvcUiTajqc5nJqKVl+7sUioMqktD0+Zw==",
+			"requires": {
+				"@babel/helper-module-imports": "^7.0.0",
+				"@babel/traverse": "^7.0.0",
+				"@emotion/is-prop-valid": "^0.8.1",
+				"@emotion/unitless": "^0.7.0",
+				"babel-plugin-styled-components": ">= 1",
+				"css-to-react-native": "^2.2.2",
+				"memoize-one": "^5.0.0",
+				"merge-anything": "^2.2.4",
+				"prop-types": "^15.5.4",
+				"react-is": "^16.6.0",
+				"stylis": "^3.5.0",
+				"stylis-rule-sheet": "^0.0.10",
+				"supports-color": "^5.5.0"
+			},
+			"dependencies": {
+				"supports-color": {
+					"version": "5.5.0",
+					"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+					"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+					"requires": {
+						"has-flag": "^3.0.0"
+					}
+				}
+			}
+		},
+		"styled-system": {
+			"version": "5.1.2",
+			"resolved": "https://registry.npmjs.org/styled-system/-/styled-system-5.1.2.tgz",
+			"integrity": "sha512-gbiohoqYYtvg9Q6nA3EagQSouHI9ylmcKUHHaUvCQrPpnPeJlUJAvj9vfyDgsJjw/oBogggfojF1X9EShfPffg==",
+			"requires": {
+				"@styled-system/background": "^5.1.2",
+				"@styled-system/border": "^5.1.2",
+				"@styled-system/color": "^5.1.2",
+				"@styled-system/core": "^5.1.2",
+				"@styled-system/flexbox": "^5.1.2",
+				"@styled-system/grid": "^5.1.2",
+				"@styled-system/layout": "^5.1.2",
+				"@styled-system/position": "^5.1.2",
+				"@styled-system/shadow": "^5.1.2",
+				"@styled-system/space": "^5.1.2",
+				"@styled-system/typography": "^5.1.2",
+				"@styled-system/variant": "^5.1.2",
+				"object-assign": "^4.1.1"
+			}
+		},
 		"stylehacks": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",
@@ -25024,6 +25236,16 @@
 				}
 			}
 		},
+		"stylis": {
+			"version": "3.5.4",
+			"resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
+			"integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q=="
+		},
+		"stylis-rule-sheet": {
+			"version": "0.0.10",
+			"resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
+			"integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
+		},
 		"sugarss": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
@@ -25693,8 +25915,7 @@
 		"trim-right": {
 			"version": "1.0.1",
 			"resolved": "https://registry.npmjs.org/trim-right/-/trim-right-1.0.1.tgz",
-			"integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM=",
-			"dev": true
+			"integrity": "sha1-yy4SAwZ+DI3h9hQJS5/kVwTqYAM="
 		},
 		"trim-trailing-lines": {
 			"version": "1.1.1",
diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js
index 129fc2343224a..406241ecfd45d 100644
--- a/packages/block-library/src/gallery/edit.js
+++ b/packages/block-library/src/gallery/edit.js
@@ -311,6 +311,7 @@ class GalleryEdit extends Component {
 									url={ img.url }
 									alt={ img.alt }
 									id={ img.id }
+									isCompact={ columns >= 7 }
 									isFirstItem={ index === 0 }
 									isLastItem={ ( index + 1 ) === images.length }
 									isSelected={ isSelected && this.state.selectedImage === index }
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 9452f917298f6..63b711af4e5e8 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -96,41 +96,11 @@ ul.wp-block-gallery {
 	}
 }
 
-.block-library-gallery-item__move-menu,
-.block-library-gallery-item__inline-menu {
-	padding: $grid-size-small;
-	display: inline-flex;
-	z-index: z-index(".block-library-gallery-item__inline-menu");
-
-	.components-button {
-		color: transparent;
-	}
-
-	@include break-small() {
-		// Use smaller buttons to fit when there are many columns.
-		.columns-7 &,
-		.columns-8 & {
-			padding: $grid-size-small / 2;
-		}
-	}
-}
-
-.block-library-gallery-item__inline-menu {
-	position: absolute;
-	top: -2px;
-	right: -2px;
-}
-
-.block-library-gallery-item__move-menu {
-	position: absolute;
-	top: -2px;
-	left: -2px;
-}
-
 .blocks-gallery-item__move-backward,
 .blocks-gallery-item__move-forward,
 .blocks-gallery-item__remove {
 	padding: 0;
+	color: transparent;
 }
 
 .blocks-gallery-item .components-spinner {
diff --git a/packages/block-library/src/gallery/gallery-image.js b/packages/block-library/src/gallery/gallery-image.js
index 2db0b6d822ae1..f19588f5fc6bd 100644
--- a/packages/block-library/src/gallery/gallery-image.js
+++ b/packages/block-library/src/gallery/gallery-image.js
@@ -14,6 +14,11 @@ import { withSelect } from '@wordpress/data';
 import { RichText } from '@wordpress/block-editor';
 import { isBlobURL } from '@wordpress/blob';
 
+/**
+ * Internal dependencies
+ */
+import MenuBox from './menu-box';
+
 class GalleryImage extends Component {
 	constructor() {
 		super( ...arguments );
@@ -86,10 +91,11 @@ class GalleryImage extends Component {
 	}
 
 	render() {
-		const { url, alt, id, linkTo, link, isFirstItem, isLastItem, isSelected, caption, onRemove, onMoveForward, onMoveBackward, setAttributes, 'aria-label': ariaLabel } = this.props;
+		const { url, alt, id, linkTo, link, isFirstItem, isLastItem, isSelected,
+			caption, onRemove, onMoveForward, onMoveBackward, setAttributes, isCompact,
+			'aria-label': ariaLabel } = this.props;
 
 		let href;
-
 		switch ( linkTo ) {
 			case 'media':
 				href = url;
@@ -128,7 +134,11 @@ class GalleryImage extends Component {
 		return (
 			<figure className={ className }>
 				{ href ? <a href={ href }>{ img }</a> : img }
-				<div className="block-library-gallery-item__move-menu">
+				<MenuBox
+					isSelected={ isSelected }
+					isCompact={ isCompact }
+					className="block-library-gallery-item__move-menu"
+				>
 					<IconButton
 						icon="arrow-left"
 						onClick={ isFirstItem ? undefined : onMoveBackward }
@@ -145,8 +155,14 @@ class GalleryImage extends Component {
 						aria-disabled={ isLastItem }
 						disabled={ ! isSelected }
 					/>
-				</div>
-				<div className="block-library-gallery-item__inline-menu">
+				</MenuBox>
+
+				<MenuBox
+					isSelected={ isSelected }
+					isCompact={ isCompact }
+					right
+					className="block-library-gallery-item__inline-menu"
+				>
 					<IconButton
 						icon="no-alt"
 						onClick={ onRemove }
@@ -154,7 +170,7 @@ class GalleryImage extends Component {
 						label={ __( 'Remove Image' ) }
 						disabled={ ! isSelected }
 					/>
-				</div>
+				</MenuBox>
 				<RichText
 					tagName="figcaption"
 					placeholder={ isSelected ? __( 'Write caption…' ) : null }
diff --git a/packages/block-library/src/gallery/menu-box.js b/packages/block-library/src/gallery/menu-box.js
new file mode 100644
index 0000000000000..fac5792a63fae
--- /dev/null
+++ b/packages/block-library/src/gallery/menu-box.js
@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { Box } from '@wordpress/components';
+
+const MenuBox = ( { right, isSelected, isCompact, children, className } ) => {
+	const side = right ? { right: '-2px' } : { left: '-2px' };
+	return (
+		<Box
+			className={ className }
+			display={ 'inline-flex' }
+			padding={ isCompact ? 0 : 'small' }
+			position="absolute"
+			zIndex={ 'block-library-gallery-item__inline-menu' }
+			bg={ isSelected ? '#ffffff' : 'inherit' }
+			top="-2px"
+			{ ...side }
+		>
+			{ children }
+		</Box>
+	);
+};
+
+export default MenuBox;
diff --git a/packages/components/package.json b/packages/components/package.json
index 432d38f8fe994..f6f2a94b4524b 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -43,6 +43,8 @@
 		"react-dates": "^17.1.1",
 		"react-spring": "^8.0.20",
 		"rememo": "^3.0.0",
+		"styled-components": "^4.4.0",
+		"styled-system": "^5.1.2",
 		"tinycolor2": "^1.4.1",
 		"uuid": "^3.3.2"
 	},
diff --git a/packages/components/src/box/index.js b/packages/components/src/box/index.js
new file mode 100644
index 0000000000000..49fd13bc5b63a
--- /dev/null
+++ b/packages/components/src/box/index.js
@@ -0,0 +1,19 @@
+/**
+ * External dependencies
+ */
+import styled from 'styled-components';
+import { color, space, layout, flexbox, background, border, position, shadow }
+	from 'styled-system';
+
+const Box = styled.div`
+  ${ color }
+  ${ space }
+  ${ layout }
+  ${ flexbox }
+  ${ background }
+  ${ border }
+  ${ position }
+  ${ shadow }
+`;
+
+export default Box;
diff --git a/packages/components/src/index.js b/packages/components/src/index.js
index 5ce67b968084e..3569ee5e7c6d3 100644
--- a/packages/components/src/index.js
+++ b/packages/components/src/index.js
@@ -3,6 +3,7 @@ export * from './primitives';
 export { default as Animate } from './animate';
 export { default as Autocomplete } from './autocomplete';
 export { default as BaseControl } from './base-control';
+export { default as Box } from './box';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
 export { default as CheckboxControl } from './checkbox-control';
@@ -73,3 +74,4 @@ export { default as withFocusOutside } from './higher-order/with-focus-outside';
 export { default as withFocusReturn, Provider as FocusReturnProvider } from './higher-order/with-focus-return';
 export { default as withNotices } from './higher-order/with-notices';
 export { default as withSpokenMessages } from './higher-order/with-spoken-messages';
+export { withTheme, default as ThemeProvider } from './theme-provider';
diff --git a/packages/components/src/theme-provider/index.js b/packages/components/src/theme-provider/index.js
new file mode 100644
index 0000000000000..2eba4b37882c0
--- /dev/null
+++ b/packages/components/src/theme-provider/index.js
@@ -0,0 +1,89 @@
+/**
+ * External dependencies
+ */
+import { ThemeProvider } from 'styled-components';
+
+export { withTheme as withTheme } from 'styled-components';
+
+const getTheme = ( theme ) => ( {
+	fontSizes: {
+		small: 12,
+		medium: 18,
+		big: 22,
+	},
+	space: {
+		small: 4,
+		medium: 8,
+		large: 16,
+		xlarge: 24,
+	},
+	zIndices: {
+		'block-library-gallery-item__inline-menu': 20,
+	},
+	colors: themes[ theme || '' ] || themes.default,
+} );
+
+const themes = {
+	default: {
+		primary: '#0085ba',
+		secondary: '#11a0d2',
+		toggle: '#11a0d2',
+		button: '#0085ba',
+		outlines: '#007cba',
+	},
+	'admin-color-light': {
+		primary: '#0085ba',
+		secondary: '#c75726',
+		toggle: '#11a0d2',
+		button: '#0085ba',
+		outlines: '#007cba',
+	},
+	'admin-color-blue': {
+		primary: '#82b4cb',
+		secondary: '#d9ab59',
+		toggle: '#82b4cb',
+		button: '#d9ab59',
+		outlines: '#417e9B',
+	},
+	'admin-color-coffee': {
+		primary: '#c2a68c',
+		secondary: '#9fa47b',
+		toggle: '#c2a68c',
+		button: '#c2a68c',
+		outlines: '#59524c',
+	},
+	'admin-color-ectoplasm': {
+		primary: '#a7b656',
+		secondary: '#c77430',
+		toggle: '#a7b656',
+		button: '#a7b656',
+		outlines: '#523f6d',
+	},
+	'admin-color-midnight': {
+		primary: '#e14d43',
+		secondary: '#77a6b9',
+		toggle: '#77a6b9',
+		button: '#e14d43',
+		outlines: '#497b8d',
+	},
+	'admin-color-ocean': {
+		primary: '#a3b9a2',
+		secondary: '#a89d8a',
+		toggle: '#a3b9a2',
+		button: '#a3b9a2',
+		outlines: '#5e7d5e',
+	},
+	'admin-color-sunrise': {
+		primary: '#d1864a',
+		secondary: '#c8b03c',
+		toggle: '#c8b03c',
+		button: '#d1864a',
+		outlines: '#837425',
+	},
+};
+
+export default ( { theme, children } ) => (
+	<ThemeProvider theme={ getTheme( theme ) }>
+		{ children }
+	</ThemeProvider>
+);
diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
index c093446be3596..3d978caa22f67 100644
--- a/packages/edit-post/src/editor.js
+++ b/packages/edit-post/src/editor.js
@@ -14,6 +14,7 @@ import {
 	KeyboardShortcuts,
 	SlotFillProvider,
 	DropZoneProvider,
+	ThemeProvider,
 } from '@wordpress/components';
 
 /**
@@ -110,7 +111,9 @@ class Editor extends Component {
 							>
 								<ErrorBoundary onError={ onError }>
 									<EditorInitialization postId={ postId } />
-									<Layout />
+									<ThemeProvider>
+										<Layout />
+									</ThemeProvider>
 									<KeyboardShortcuts shortcuts={ preventEventDiscovery } />
 								</ErrorBoundary>
 								<PostLockedModal />