Merge development

1 files changed, 34 insertions, 0 deletions

diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
new file mode 100644
index 000000000..5ea495036
--- /dev/null
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -0,0 +1,34 @@
+import { css } from 'styled-components';
+
+const colors = {
+    black: '#000000',
+    white: '#FFFFFF',
+    lightGray: '#F1F4F5',
+    gray: '#F1F2F7',
+    darkGray: '#E9ECED',
+    darkestGray: '#E2E5E6',
+    blueGray: '#ECEFF9',
+};
+
+interface SizesInterface {
+    [key: string]: number;
+}
+
+const sizes: SizesInterface = {
+    xlarge: 1420,
+    large: 1000,
+    medium: 900,
+    small: 650,
+};
+
+const media = Object.keys(sizes).reduce((acc: any, label: string) => {
+    acc[label] = (args: any) => css`
+        @media (max-width: ${sizes[label] / 16}em) {
+            ${css(args)};
+        }
+    `;
+
+    return acc;
+}, {});
+
+export { colors, media };