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: projects/documentation/content/guides/styling-components.md
+5-5Lines changed: 5 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -52,19 +52,19 @@ SWC project uses styles package to manage the global css tokens for all three th
52
52
-`styles/tokens` - This is the tokens package for the express + spectrum theme.
53
53
-`styles/tokens-v2` - This is the tokens package for the spectrum 2 theme.
54
54
55
-
NOTE: In all likelhood, you would only need to do minor changes to the styles package. However, if you feel like you need to make major changes to the styles package, the correct approach would be to start a discussion among the team and figure out a plan together.
55
+
NOTE: In all likelihood, you would only need to do minor changes to the styles package. However, if you feel like you need to make major changes to the styles package, the correct approach would be to start a discussion among the team and figure out a plan together.
56
56
57
57
### How to update the global styling
58
58
59
-
In our styles package, we have separation of vars for different contexts i.e, size and color.
59
+
In our styles package, we have separation of separate variables for different contexts i.e, size and color.
60
60
61
-
#### Updating size-specific vars
61
+
#### Updating size-specific css variables
62
62
63
63
If you're updating a size (e.g. `--spectrum-accordion-item-height`) variable, you'll need to update the `tools/styles/tokens/[express | spectrum]/[large | medium]-vars.css` file or the `tools/styles/tokens-v2/[large | medium]-vars.css` file depending on the theme.
64
64
65
-
#### Updating color-specific vars
65
+
#### Updating color-specific css variables
66
66
67
67
If you're updating a color (e.g. `--spectrum-accordion-background-color`) variable, you'll need to update the `tools/styles/tokens/[express | spectrum]/[dark | light]-vars.css` file or the `tools/styles/tokens-v2/[dark | light]-vars.css` file depending on the theme.
68
68
69
-
NOTE: If the variable that you're updating is not present in those files, chances are that this variable had the same value for both contexts in that tokens package. In that case, if you want the variable to continue to have the same value then you can update the `tools/styles/[tokens | tokens-v2]/index.css` file.
69
+
**NOTE:** If the variable that you're updating is not present in those files, chances are that this variable had the same value for both contexts in that tokens package. In that case, if you want the variable to continue to have the same value then you can update the `tools/styles/[tokens | tokens-v2]/index.css` file.
70
70
Or if you want to make the variable context-specific, then you can add those new values in both of the files like we talked about above.
0 commit comments