You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: .storybook/components/Docs/Guidelines/Theming.stories.mdx
+21-8
Original file line number
Diff line number
Diff line change
@@ -4,18 +4,20 @@ import { Canvas, Meta } from '@storybook/blocks';
4
4
5
5
# Theming overview
6
6
7
-
"Theming", in the context of EDS, is the process of overriding the default styles of EDS components to match a different brand (or "theme"). The "Theming" directory in storybook demonstrates examples of theming:
7
+
"Theming", in the context of EDS, is the process of overriding the default styles of EDS components to match a different brand (or "theme"). We include useful examples under "Pages":
8
8
9
9
- A [wireframe theme](./?path=/story/pages-theming-wireframedemo--default) (an unbranded theme that can be used for prototyping a product before it has an official visual style).
10
10
11
+
Below are instructions on how to use the tooling and tokens to define custom theme values for a project.
12
+
11
13
## How to apply a theme in another product
12
14
13
15
EDS comes with some tooling to allow easy transfer of theme data from Figma (or some style-dictionary compatible format) into code.
14
16
15
17
*`eds-init-theme` - This command sets up the initial file(s) for theming your application
16
18
*`eds-apply-theme` - This command parses the style dictionary files to generate the tokens (CSS Variables) used by EDS
17
19
18
-
Each of these tools reads config to figure out where to read/write files. This can be defined in several ways, e.g., a top-level file `eds.config.js`, or as a key-value set in package.json. Example:
20
+
Each of these tools reads config to figure out where to read/write files. This can be defined in several ways, e.g., a top-level file `.edsrc.json`, or as a key-value set in package.json. Example:
19
21
20
22
`package.json`
21
23
@@ -26,13 +28,22 @@ Each of these tools reads config to figure out where to read/write files. This c
26
28
},
27
29
```
28
30
29
-
`json` determines where the core theme file will be stored, and `css` determines where the resulting css token file will be stored.
31
+
`.edsrc.json`
32
+
33
+
```json
34
+
{
35
+
"json": "src/components/",
36
+
"css": "src/components/"
37
+
}
38
+
```
39
+
40
+
`json` determines where the core theme file will be copied to OR read from, and `css` determines where the resulting css token file will be stored.
30
41
31
42
### eds-init-theme
32
43
33
-
EDS comes pre-packaged with token values that define the base style and character of the system. Users of EDS can theme certain aspects of all components, or details on specific components. This tool will set up your project to have its own theme overrides.
44
+
This will create an initial JSON file `app-theme.json` that defines ALL the available tokens for EDS that you can edit.
34
45
35
-
This will create an initial JSON file that defines ALL the available tokens for EDS.
46
+
EDS comes pre-packaged with many tokens that define the base style and character of the system. Users of EDS can theme certain aspects of all components, or details on specific components.
36
47
37
48
```json
38
49
{
@@ -68,9 +79,9 @@ This will create an initial JSON file that defines ALL the available tokens for
68
79
69
80
### eds-apply-theme
70
81
71
-
After initializing the theme file, make changes to the JSON to reflect what has been defined by design. When changes are made, you can generate the corresponding CSS values using `eds-apply-theme`.
82
+
After making changes to the `app-theme.json` to reflect what has been defined by design, update the CSS token file by running `npx eds-apply-theme`.
72
83
73
-
Once run, you will have a CSS file that includes a set of token values that can be used in the app as appropriate.
84
+
Once run, you will have a CSS file `app-theme.css`that includes a set of token values that can be used in the app as appropriate.
74
85
75
86
```css
76
87
/**
@@ -90,7 +101,9 @@ Once run, you will have a CSS file that includes a set of token values that can
90
101
}
91
102
```
92
103
93
-
Add this file to your core app root file. That's it! Now, your theme will be applied to the tokens used by EDS components. Further changes require re-running `eds-apply-theme`.
104
+
Add this file to your core app root file. That's it! Now, the theme will be applied to the tokens used by EDS components. To make other changes, edit `app-theme.json`, then re-run `npx eds-apply-theme`.
105
+
106
+
**NOTE**: do not edit this file directly. Instead, follow the instructions at the top of the file!
94
107
95
108
## How to manually apply a theme in another product
0 commit comments