forked from Redocly/redoc
-
Notifications
You must be signed in to change notification settings - Fork 0
/
styled-components.ts
54 lines (46 loc) · 1.39 KB
/
styled-components.ts
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
import * as styledComponents from 'styled-components';
import type { ResolvedThemeInterface } from './theme';
export type { ResolvedThemeInterface };
const {
default: styled,
css,
createGlobalStyle,
keyframes,
ThemeProvider,
} = styledComponents as unknown as styledComponents.ThemedStyledComponentsModule<ResolvedThemeInterface>;
export const media = {
lessThan(breakpoint, print?: boolean, extra?: string) {
return (...args) => css`
@media ${print ? 'print, ' : ''} screen and (max-width: ${props =>
props.theme.breakpoints[breakpoint]})${extra || ''} {
${(css as any)(...args)};
}
`;
},
greaterThan(breakpoint) {
return (...args) => css`
@media (min-width: ${props => props.theme.breakpoints[breakpoint]}) {
${(css as any)(...args)};
}
`;
},
between(firstBreakpoint, secondBreakpoint) {
return (...args) => css`
@media (min-width: ${props =>
props.theme.breakpoints[firstBreakpoint]}) and (max-width: ${props =>
props.theme.breakpoints[secondBreakpoint]}) {
${(css as any)(...args)};
}
`;
},
};
export { css, createGlobalStyle, keyframes, ThemeProvider };
export default styled;
export function extensionsHook(styledName: string) {
return props => {
if (!props.theme.extensionsHook) {
return;
}
return props.theme.extensionsHook(styledName, props);
};
}