@commercetools/nimbus-tokens 0.0.0-canary-20250801132810
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/README.md +54 -0
- package/css/design-tokens.css +2290 -0
- package/css/resets.css +41 -0
- package/dist/commercetools-nimbus-tokens.cjs.d.ts +2 -0
- package/dist/commercetools-nimbus-tokens.cjs.dev.js +9 -0
- package/dist/commercetools-nimbus-tokens.cjs.js +7 -0
- package/dist/commercetools-nimbus-tokens.cjs.prod.js +9 -0
- package/dist/commercetools-nimbus-tokens.esm.js +2 -0
- package/dist/declarations/src/generated/chakra/index.d.ts +1 -0
- package/dist/declarations/src/generated/chakra/theme-tokens.d.ts +7153 -0
- package/dist/declarations/src/generated/index.d.ts +2 -0
- package/dist/declarations/src/generated/ts/design-tokens.d.ts +2872 -0
- package/dist/declarations/src/generated/ts/index.d.ts +1 -0
- package/dist/declarations/src/index.d.ts +1 -0
- package/generated/chakra/dist/commercetools-nimbus-tokens-generated-chakra.cjs.d.ts +2 -0
- package/generated/chakra/dist/commercetools-nimbus-tokens-generated-chakra.cjs.dev.js +7157 -0
- package/generated/chakra/dist/commercetools-nimbus-tokens-generated-chakra.cjs.js +7 -0
- package/generated/chakra/dist/commercetools-nimbus-tokens-generated-chakra.cjs.prod.js +7157 -0
- package/generated/chakra/dist/commercetools-nimbus-tokens-generated-chakra.esm.js +7155 -0
- package/generated/chakra/package.json +4 -0
- package/generated/ts/dist/commercetools-nimbus-tokens-generated-ts.cjs.d.ts +2 -0
- package/generated/ts/dist/commercetools-nimbus-tokens-generated-ts.cjs.dev.js +2876 -0
- package/generated/ts/dist/commercetools-nimbus-tokens-generated-ts.cjs.js +7 -0
- package/generated/ts/dist/commercetools-nimbus-tokens-generated-ts.cjs.prod.js +2876 -0
- package/generated/ts/dist/commercetools-nimbus-tokens-generated-ts.esm.js +2874 -0
- package/generated/ts/package.json +4 -0
- package/package.json +41 -0
package/README.md
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
# Design System Tokens Package
|
|
2
|
+
|
|
3
|
+
This package is the single source of truth for our design tokens.
|
|
4
|
+
|
|
5
|
+
## Defining Tokens
|
|
6
|
+
|
|
7
|
+
All tokens are defined in `src/tokens/base.json`. All changes to the design
|
|
8
|
+
tokens should occur in this file.
|
|
9
|
+
|
|
10
|
+
### Token Format
|
|
11
|
+
|
|
12
|
+
Tokens in `src/tokens/base.json` are defined using a modified version of the
|
|
13
|
+
[W3C Design Tokens Community Group](https://www.w3.org/groups/cg/design-tokens/)
|
|
14
|
+
Token Definition [Standard](https://tr.designtokens.org/format/).
|
|
15
|
+
|
|
16
|
+
The version we use is somewhat modified to be more compatible with the
|
|
17
|
+
[Tokens Studio for Figma](https://docs.tokens.studio/) plugin. We specifically
|
|
18
|
+
use a subset of
|
|
19
|
+
[unofficial](https://docs.tokens.studio/token-types/token-type-overview#terms-to-be-aware-of)
|
|
20
|
+
tokens-studio-specific types. This enables for better token definitions in
|
|
21
|
+
figma.
|
|
22
|
+
|
|
23
|
+
When adding tokens, define them using the DTCG spec, then upload them into the
|
|
24
|
+
Tokens Studio plugin in Figma to make sure that they are defined as expeced in
|
|
25
|
+
the figma file.
|
|
26
|
+
|
|
27
|
+
This process will be documented better as we start contributing changes to
|
|
28
|
+
tokens.
|
|
29
|
+
|
|
30
|
+
## Building Tokens
|
|
31
|
+
|
|
32
|
+
Once tokens have been added to `src/tokens/base.json` in the correct format and
|
|
33
|
+
successfully updated in Figma, it is necessary to update them for all supported
|
|
34
|
+
platforms: Typescript, CSS, and Chakra-specific (internal).
|
|
35
|
+
|
|
36
|
+
To update all platforms, run the following script from this directory:
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
pnpm build
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
This will update all tokens in `src/generated`.
|
|
43
|
+
|
|
44
|
+
### Token Build Process
|
|
45
|
+
|
|
46
|
+
Tokens are transformed from the tokens stored in `src/tokens/base.json` using
|
|
47
|
+
[style-dictionary](https://styledictionary.com/getting-started/installation/).
|
|
48
|
+
|
|
49
|
+
Style dictionary is configured in `src/style-dictionary.config.js`. Update this
|
|
50
|
+
config file in order to change the formatting of any tokens in
|
|
51
|
+
`src/generated/*`. See comments in that file for more information.
|
|
52
|
+
|
|
53
|
+
This process will also be better documented as we start distributing the tokens
|
|
54
|
+
package for use in the design system.
|