File tree Expand file tree Collapse file tree 1 file changed +32
-0
lines changed Expand file tree Collapse file tree 1 file changed +32
-0
lines changed Original file line number Diff line number Diff line change @@ -83,6 +83,38 @@ console.log(theme);
83
83
// => "--colors-primary: red;--colors-secondary: blue;--shadows-main: box-shadow: 1px 1px black;--font-family-primary: Arial;"
84
84
```
85
85
86
+ ### Svelte example
87
+ ThemeProvider.svelte
88
+ ``` html
89
+ <script >
90
+ import { theme } from ' ./my-design-system' ;
91
+ import generateCSSVariables from ' css-vars-from-json' ;
92
+
93
+ const style = generateCSSVariables (theme);
94
+ </script >
95
+
96
+ <div {style} >
97
+ <slot />
98
+ </div >
99
+ ```
100
+
101
+ App.svelte
102
+ ``` html
103
+ <script >
104
+ import ThemeProvider from ' ./ThemeProvider.svelte' ;
105
+ </script >
106
+
107
+ <ThemeProvider >
108
+ <h1 >Hi</h1 >
109
+ </ThemeProvider >
110
+
111
+ <style >
112
+ h1 {
113
+ color : var (--color-primary );
114
+ }
115
+ </style >
116
+ ```
117
+
86
118
## Run tests
87
119
88
120
``` sh
You can’t perform that action at this time.
0 commit comments