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
55
56
|
import { theme, Theme, ThemeType } from '@meetfranz/theme';
import { Classes } from 'jss';
import * as React from 'react';
import injectSheet, { ThemeProvider } from 'react-jss';
const defaultTheme = {
name: 'Default',
variables: theme(ThemeType.default),
};
const darkTheme = {
name: 'Dark Mode',
variables: theme(ThemeType.dark),
};
const themes = [defaultTheme, darkTheme];
const styles = (theme: Theme) => ({
title: {
fontSize: 14,
},
container: {
border: theme.inputBorder,
borderRadius: theme.borderRadiusSmall,
marginBottom: 20,
padding: 20,
background: theme.colorContentBackground,
},
});
const Container = injectSheet(styles)(
({
name,
classes,
story,
}: {
name: string;
classes: Classes;
story: React.ReactNode;
}) => (
<article>
<h1 className={classes.title}>{name}</h1>
<div className={classes.container}>{story}</div>
</article>
),
);
export const WithTheme = ({ children }: { children: React.ReactChild }) => (
<>
{themes.map((theme, key) => (
<ThemeProvider key={key} theme={theme.variables}>
<Container story={children} name={theme.name} />
</ThemeProvider>
))}
</>
);
|
