aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts/variables.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts/variables.tsx')
-rw-r--r--packages/dev-tools-pages/ts/variables.tsx33
1 files changed, 33 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..b23bb3e52
--- /dev/null
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -0,0 +1,33 @@
+import { css } from 'styled-components';
+
+const colors = {
+ black: '#000000',
+ white: '#FFFFFF',
+ lightGray: '#F1F4F5',
+ gray: '#F1F2F7',
+ darkGray: '#E9ECED',
+ blueGray: '#ECEFF9',
+};
+
+interface SizesInterface {
+ [key: string]: number;
+}
+
+const sizes: SizesInterface = {
+ large: 992,
+ medium: 768,
+ small: 376,
+};
+
+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 default media;
+export { colors, media };