@bcgov/design-tokens 5.0.0-pr868 → 5.0.0-pr876
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/README.md +8 -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
|
package/README.md
CHANGED
|
@@ -12,6 +12,14 @@ To use, install this package (`npm i @bcgov/design-tokens`) and import the desig
|
|
|
12
12
|
|
|
13
13
|
This package includes tokens in JavaScript (ECMAScript Module and CommonJS), CSS and SCSS formats.
|
|
14
14
|
|
|
15
|
+
### Using this library with LLMs
|
|
16
|
+
|
|
17
|
+
Instructions for AI agents are shipped with this library (`/node_modules/@bcgov/design-tokens/AGENTS.md`).
|
|
18
|
+
|
|
19
|
+
Add the B.C. Design System boilerplate from [AGENTS.example.md](https://github.com/bcgov/design-system/blob/main/AGENTS.example.md) to an `AGENTS.md` file at the root of your project. This directs agents to load the library-specific instructions.
|
|
20
|
+
|
|
21
|
+
Run `/context` to confirm that your agent has loaded the instructions into its context window.
|
|
22
|
+
|
|
15
23
|
### JavaScript (ECMAScript Module)
|
|
16
24
|
|
|
17
25
|
> **Try this first!** Using JavaScript variables can give you a better developer experience with autocomplete.
|