Skip to content

Commit a490462

Browse files
committed
docs: clarify file names and what each script creates
1 parent f06defc commit a490462

File tree

1 file changed

+21
-8
lines changed

1 file changed

+21
-8
lines changed

.storybook/components/Docs/Guidelines/Theming.stories.mdx

+21-8
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,20 @@ import { Canvas, Meta } from '@storybook/blocks';
44

55
# Theming overview
66

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":
88

99
- 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).
1010

11+
Below are instructions on how to use the tooling and tokens to define custom theme values for a project.
12+
1113
## How to apply a theme in another product
1214

1315
EDS comes with some tooling to allow easy transfer of theme data from Figma (or some style-dictionary compatible format) into code.
1416

1517
* `eds-init-theme` - This command sets up the initial file(s) for theming your application
1618
* `eds-apply-theme` - This command parses the style dictionary files to generate the tokens (CSS Variables) used by EDS
1719

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:
1921

2022
`package.json`
2123

@@ -26,13 +28,22 @@ Each of these tools reads config to figure out where to read/write files. This c
2628
},
2729
```
2830

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.
3041

3142
### eds-init-theme
3243

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.
3445

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.
3647

3748
```json
3849
{
@@ -68,9 +79,9 @@ This will create an initial JSON file that defines ALL the available tokens for
6879

6980
### eds-apply-theme
7081

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`.
7283

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.
7485

7586
```css
7687
/**
@@ -90,7 +101,9 @@ Once run, you will have a CSS file that includes a set of token values that can
90101
}
91102
```
92103

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!
94107

95108
## How to manually apply a theme in another product
96109

0 commit comments

Comments
 (0)