/
Theme.tsx
29 lines (26 loc) · 884 Bytes
/
Theme.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import * as React from 'react';
import { ThemeProvider } from 'styled-components';
import { breakpoints, headingSizes, textSizes, colors, space, fonts, paragraphSizes } from './variables';
export const themeProps = {
colors,
space,
fonts,
breakpoints: [`${breakpoints.sm}px`, `${breakpoints.md}px`, `${breakpoints.lg}px`, `${breakpoints.xl}px`],
typeScale: {
heading: headingSizes,
paragraph: paragraphSizes,
text: textSizes,
},
};
export const Theme = ({ children }: { children: React.ReactNode }) => {
return (
<ThemeProvider theme={themeProps}>
<>{children}</>
</ThemeProvider>
);
};
export type TypeScale = typeof themeProps.typeScale;
export type HeadingSizes = typeof headingSizes;
export type TextSizes = typeof textSizes;
export type Color = keyof typeof themeProps['colors'];
export type Space = keyof typeof themeProps['space'];