aboutsummaryrefslogtreecommitdiffstats
path: root/packages/dev-tools-pages/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/dev-tools-pages/ts')
-rw-r--r--packages/dev-tools-pages/ts/variables.tsx35
1 files changed, 27 insertions, 8 deletions
diff --git a/packages/dev-tools-pages/ts/variables.tsx b/packages/dev-tools-pages/ts/variables.tsx
index b1e0271d1..b23bb3e52 100644
--- a/packages/dev-tools-pages/ts/variables.tsx
+++ b/packages/dev-tools-pages/ts/variables.tsx
@@ -1,14 +1,33 @@
import { css } from 'styled-components';
const colors = {
- black: '#000000',
- white: '#FFFFFF',
- lightGray: '#F1F4F5',
- gray: '#F1F2F7',
- darkGray: '#E9ECED',
- blueGray: '#ECEFF9',
- },
+ black: '#000000',
+ white: '#FFFFFF',
+ lightGray: '#F1F4F5',
+ gray: '#F1F2F7',
+ darkGray: '#E9ECED',
+ blueGray: '#ECEFF9',
};
-export default variables;
+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 };