@bcgov/design-tokens 5.0.0-pr861 → 5.0.0-pr869
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +30 -0
- package/package.json +1 -1
package/AGENTS.md
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# B.C. Design System Design Tokens (v0.0.1)
|
|
2
|
+
|
|
3
|
+
## Library context
|
|
4
|
+
|
|
5
|
+
- This design tokens library is part of the [B.C. Design System](https://gov.bc.ca/designsystem)
|
|
6
|
+
- Use design tokens when styling UI in B.C. government projects
|
|
7
|
+
- Design tokens are available as CSS, SCSS and JavaScript variables
|
|
8
|
+
|
|
9
|
+
## Using design tokens
|
|
10
|
+
|
|
11
|
+
- Install the design tokens package with `npm i @bcgov/design-tokens`
|
|
12
|
+
- Import the appropriate format for this project
|
|
13
|
+
- Reference design tokens directly when styling UI
|
|
14
|
+
- The full list of available tokens is in `node_modules/@bcgov/design-tokens/dist`
|
|
15
|
+
- Always use the semantic variable names
|
|
16
|
+
- Never guess or assume token names
|
|
17
|
+
- Never hard-code or modify token values
|
|
18
|
+
- Hard-coding token values will cause design drift when the tokens library is updated
|
|
19
|
+
|
|
20
|
+
### Colour
|
|
21
|
+
|
|
22
|
+
- Prefer using semantically-named colour tokens (for example, `--theme-primary-gold`) instead of generic scale points like `--theme-gold-100`
|
|
23
|
+
- Ensure that colour combinations meet the contrast requirements for WCAG 2.1 Level AA
|
|
24
|
+
|
|
25
|
+
### Typography
|
|
26
|
+
|
|
27
|
+
- Typography tokens use the BC Sans typeface
|
|
28
|
+
- Ensure that [@bcgov/bc-sans](https://www.npmjs.com/package/@bcgov/bc-sans) is installed and configured before use
|
|
29
|
+
- Composite typography tokens map to the CSS `font` shorthand
|
|
30
|
+
- Use these instead of setting individual font properties
|