Skip to content

Commit eb96a16

Browse files
author
Tiko
committed
added typing to theme
1 parent 78dcc09 commit eb96a16

File tree

2 files changed

+151
-46
lines changed

2 files changed

+151
-46
lines changed

‎src/styles/global-css.ts‎

Lines changed: 22 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { reset, debug } from 'styled-components-style-utils';
22
import { css, createGlobalStyle } from 'styled-components';
3-
import theme from './theme';
3+
import theme, {Typography} from './theme';
44
import textScaler from './textScaler';
55

66
const typographyElements = [
@@ -39,16 +39,16 @@ const addStylingExceptions = (element: string) => {
3939
const typographyElementStyling = typographyElements.map(
4040
(element) => css`
4141
${element} {
42-
font-size: ${theme.typography[element].size};
43-
line-height: ${theme.typography[element].height};
44-
letter-spacing: ${theme.typography[element].spacing};
45-
font-family: ${theme.typography[element].font};
46-
font-weight: ${theme.typography[element].weight};
47-
color: ${theme.typography[element].color};
48-
margin-top: ${theme.typography[element].marginTop};
49-
margin-bottom: ${theme.typography[element].marginBottom};
50-
margin-left: ${theme.typography[element].marginLeft};
51-
margin-right: ${theme.typography[element].marginRight};
42+
font-size: ${theme.typography[element as keyof Typography].size};
43+
line-height: ${theme.typography[element as keyof Typography].height};
44+
letter-spacing: ${theme.typography[element as keyof Typography].spacing};
45+
font-family: ${theme.typography[element as keyof Typography].font};
46+
font-weight: ${theme.typography[element as keyof Typography].weight};
47+
color: ${theme.typography[element as keyof Typography].color};
48+
margin-top: ${theme.typography[element as keyof Typography].marginTop};
49+
margin-bottom: ${theme.typography[element as keyof Typography].marginBottom};
50+
margin-left: ${theme.typography[element as keyof Typography].marginLeft};
51+
margin-right: ${theme.typography[element as keyof Typography].marginRight};
5252
${addStylingExceptions(element)};
5353
}
5454
`,
@@ -58,13 +58,17 @@ export const TypographyClassStyling = createGlobalStyle`
5858
${typographyClasses
5959
.map(
6060
(element) => `.${element} {
61-
font-size: ${theme.typography[element].size};
62-
line-height: ${theme.typography[element].height};
63-
letter-spacing: ${theme.typography[element].spacing};
64-
font-family: ${theme.typography[element].font};
65-
font-weight: ${theme.typography[element].weight};
66-
color: ${theme.typography[element].color};
67-
margin: ${theme.typography[element].margin};
61+
font-size: ${theme.typography[element as keyof Typography].size};
62+
line-height: ${theme.typography[element as keyof Typography].height};
63+
letter-spacing: ${theme.typography[element as keyof Typography].spacing};
64+
font-family: ${theme.typography[element as keyof Typography].font};
65+
font-weight: ${theme.typography[element as keyof Typography].weight};
66+
color: ${theme.typography[element as keyof Typography].color};
67+
margin:
68+
${theme.typography[element as keyof Typography].marginTop};
69+
${theme.typography[element as keyof Typography].marginRight};
70+
${theme.typography[element as keyof Typography].marginBottom};
71+
${theme.typography[element as keyof Typography].marginLeft};
6872
${addStylingExceptions(element)};
6973
}`,
7074
)

‎src/styles/theme.ts‎

Lines changed: 129 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,127 @@ const GlobalHeadingSettings = {
3232
marginBottom: '0.66em',
3333
};
3434

35-
// TODO: add typing to theme interface, for now they will accept any object (Record<string, unknown>)
35+
type Colors = {
36+
background: string,
37+
primary: string,
38+
secondary: string,
39+
tertiary: string,
40+
black: string,
41+
mediumgray: string,
42+
lightgray: string,
43+
lightgray2: string,
44+
white: string,
45+
};
46+
type Fonts = {
47+
heading: string,
48+
paragraph: string,
49+
menu: string,
50+
};
51+
52+
type FontWeights = {
53+
light: number,
54+
regular: number,
55+
bold: number,
56+
};
57+
58+
type TypographyElement = {
59+
size?: string,
60+
height?: string,
61+
spacing?: string,
62+
font?: string,
63+
weight?: number,
64+
color?: string,
65+
marginTop?: string,
66+
marginBottom?: string,
67+
marginLeft?: string,
68+
marginRight?: string,
69+
};
70+
type Body = TypographyElement & {
71+
height: string,
72+
spacing: string,
73+
font: string,
74+
weight: number,
75+
color: string,
76+
};
77+
type TextElement = TypographyElement & {
78+
spacing: string,
79+
font: string,
80+
weight: number,
81+
color: string,
82+
marginBottom: string,
83+
};
84+
type ListItem = TypographyElement & {
85+
spacing: string,
86+
font: string,
87+
weight: number,
88+
color: string,
89+
marginTop: string,
90+
marginBottom: string,
91+
};
92+
type UnorderedList = TypographyElement & {
93+
marginTop: string,
94+
marginBottom: string,
95+
marginLeft: string,
96+
marginRight: string,
97+
};
98+
type HTMLElement = TypographyElement & {
99+
size: string,
100+
height: string,
101+
spacing: string,
102+
font: string,
103+
weight: number,
104+
color: string,
105+
};
106+
type Introduction = HTMLElement;
107+
type Caption = HTMLElement;
108+
type Subtitle = HTMLElement;
109+
type Button = HTMLElement;
110+
type MenuItem = HTMLElement;
111+
type Form = HTMLElement;
112+
export type Typography = {
113+
body: Body,
114+
h1: TextElement,
115+
h2: TextElement,
116+
h3: TextElement,
117+
h4: TextElement,
118+
h5: TextElement,
119+
h6: TextElement,
120+
p: TextElement,
121+
li: ListItem,
122+
ul: UnorderedList,
123+
introduction: Introduction,
124+
caption: Caption,
125+
subtitle: Subtitle,
126+
button: Button,
127+
menuitem: MenuItem,
128+
form: Form,
129+
};
130+
type Breakpoints = {
131+
xs: string,
132+
sm: string,
133+
md: string,
134+
lg: string,
135+
xl: string,
136+
xxl?: string,
137+
};
36138
interface Bytecode {
37-
colors: Record<string, unknown>;
38-
fonts: Record<string, unknown>;
39-
fontWeights: Record<string, unknown>;
40-
typography: Record<string, unknown>;
41-
breakpoint: Record<string, unknown>;
42-
containerWidth: Record<string, unknown>;
139+
colors: Colors;
140+
fonts: Fonts;
141+
fontWeights: FontWeights;
142+
typography: Typography;
143+
breakpoint: Breakpoints;
144+
containerWidth: Breakpoints;
43145
breakpointMobileMenu: string;
44-
mediaQueryMin: Record<string, unknown> | null;
146+
mediaQueryMin: Breakpoints;
45147
}
148+
const breakpoints: Breakpoints = {
149+
xs: '48em',
150+
sm: '64em',
151+
md: '85.375em',
152+
lg: '120em',
153+
xl: '160em',
154+
xxl: '200em',
155+
};
46156
// Bytecode theme
47157
const bytecode: Bytecode = {
48158
colors: {
@@ -190,33 +300,24 @@ const bytecode: Bytecode = {
190300
},
191301
},
192302
breakpointMobileMenu: '68rem',
193-
breakpoint: {
194-
xs: '48em',
195-
sm: '64em',
196-
md: '85.375em',
197-
lg: '120em',
198-
xl: '160em',
199-
xxl: '200em',
200-
},
303+
breakpoint: breakpoints,
201304
containerWidth: {
202305
xs: '2vw',
203306
sm: '4vw',
204307
md: '8vw',
205308
lg: '11vw',
206309
xl: '15vw',
207310
},
208-
mediaQueryMin: null,
209-
};
210-
211-
bytecode.mediaQueryMin = {
212-
xs: `min-width: ${bytecode.breakpoint.xs}`,
213-
sm: `min-width: ${bytecode.breakpoint.sm}`,
214-
md: `min-width: ${bytecode.breakpoint.md}`,
215-
lg: `min-width: ${bytecode.breakpoint.lg}`,
216-
xl: `min-width: ${bytecode.breakpoint.xl}`,
217-
xxl: `-webkit-min-device-pixel-ratio: 2) and
218-
(min-resolution: 192dpi) and
219-
(min-width: ${bytecode.breakpoint.xxl}`,
311+
mediaQueryMin: {
312+
xs: `min-width: ${breakpoints.xs}`,
313+
sm: `min-width: ${breakpoints.sm}`,
314+
md: `min-width: ${breakpoints.md}`,
315+
lg: `min-width: ${breakpoints.lg}`,
316+
xl: `min-width: ${breakpoints.xl}`,
317+
xxl: `-webkit-min-device-pixel-ratio: 2) and
318+
(min-resolution: 192dpi) and
319+
(min-width: ${breakpoints.xxl}`,
320+
},
220321
};
221322

222323
const theme = bytecode;

0 commit comments

Comments
 (0)