@candide/design-tokens 0.1.0
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 +63 -0
- package/contract.json +140 -0
- package/dist/bt/tokens.css +2 -0
- package/dist/tn/tokens.css +2 -0
- package/package.json +39 -0
package/README.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# x-design-tokens
|
|
2
|
+
|
|
3
|
+
Design tokens for Babylonstoren (`bt`) and The Newt (`tn`). DTCG JSON is the source. Rendered CSS is the output.
|
|
4
|
+
|
|
5
|
+
Part of Candide ATMOS, epic [EP-1300](https://candide.atlassian.net/browse/EP-1300). This repository is [EP-1360](https://candide.atlassian.net/browse/EP-1360). The design is in the [Slite specification](https://candide.slite.com/app/docs/SULRkstniipUpk), sections 8 and 11 to 14.
|
|
6
|
+
|
|
7
|
+
## What this produces
|
|
8
|
+
|
|
9
|
+
Every build makes two CSS files per brand from the same values. The wrapper is the only difference between them, and it decides which one wins on the page.
|
|
10
|
+
|
|
11
|
+
| File | Wrapper | Ships in | Read by |
|
|
12
|
+
| --- | --- | --- | --- |
|
|
13
|
+
| `dist/<brand>/tokens.css` | `@layer x-tokens { ... }` | the npm package | the shop build, as a baked default |
|
|
14
|
+
| `dist/<brand>/runtime.css` | bare `:root { ... }` | the GCS bucket | the shop server, pasted into every page |
|
|
15
|
+
|
|
16
|
+
Unlayered CSS beats every `@layer`, whatever the order and whatever the specificity. That is the platform guarantee the runtime override rests on. A change to a value reaches production without a shop deploy. A change to a token **name** is a code change, because Tailwind and Angular Material are generated from the names at build time.
|
|
17
|
+
|
|
18
|
+
## Layout
|
|
19
|
+
|
|
20
|
+
```
|
|
21
|
+
tokens/core/ spacing.json border.json
|
|
22
|
+
tokens/brands/bt/ color-tier1.json color-tier2.json
|
|
23
|
+
typography.json typography-desktop.json
|
|
24
|
+
tokens/brands/tn/ the same four files
|
|
25
|
+
contract.json the legal --x-* names and their types, generated from the source
|
|
26
|
+
terrazzo.config.ts one build per BRAND and MODE
|
|
27
|
+
scripts/ build, emit, and the three checks
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
Tier 1 is the raw ramps. Tier 2 is the semantic layer, and it is the only tier anything outside this repository should name. Viewport is a separate token set rather than a mode on each token: `typography-desktop.json` holds only the tokens that change at the large viewport, the build runs twice per brand, and `emit-runtime-css.mjs` diffs the two and wraps the difference in a media query.
|
|
31
|
+
|
|
32
|
+
## Commands
|
|
33
|
+
|
|
34
|
+
```bash
|
|
35
|
+
npm run validate # check the sets, check the schema, build, check the contract
|
|
36
|
+
npm run build # four Terrazzo builds, then emit the two CSS shapes
|
|
37
|
+
npm run check:sets # every token file is wired into a build, and every wired file exists
|
|
38
|
+
npm run check # DTCG schema and lint, for all four brand and mode combinations
|
|
39
|
+
npm run check:contract # every contract name is present in every build, with a valid value
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
To regenerate `contract.json` after adding or removing a token:
|
|
43
|
+
|
|
44
|
+
```bash
|
|
45
|
+
node scripts/check-contract.mjs --write
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Token format
|
|
49
|
+
|
|
50
|
+
DTCG 2025.10 object form, not the string shorthand. Terrazzo 2.7.1 **rejects** the string form and exits 1, so this is not a style preference.
|
|
51
|
+
|
|
52
|
+
```json
|
|
53
|
+
{ "$type": "dimension", "$value": { "value": 14, "unit": "px" } }
|
|
54
|
+
{ "$type": "color", "$value": { "colorSpace": "srgb", "components": [0.1255, 0.1804, 0.4078] } }
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Colours come back out as hex, because the CSS plugin runs with `legacyHex: true`. Without it Terrazzo emits `color(srgb ...)` functions, which the contract check and the shop server's sanity check both reject.
|
|
58
|
+
|
|
59
|
+
## Known gaps
|
|
60
|
+
|
|
61
|
+
1. **The token set is a starting point, not the full inventory.** Tier 2 currently covers the names the shopping assistant panel already uses, which is the only place Figma names have shipped values. Both brands' remaining values live in Angular Material palettes and typography levels in `x-shop-admin`, under Material names, not Figma names. Translating them is EP-1016 and it does not exist yet.
|
|
62
|
+
2. **No CI.** The repository moved from GitLab to GitHub after the specification was written, so the pipeline in section 8 needs rewriting as GitHub Actions. Publishing, the bucket upload and the rollback job are not here yet.
|
|
63
|
+
3. **Tokens Studio will need a normalisation step.** It exports colours and dimensions as strings. Terrazzo 2.7.1 rejects both. The specification says Terrazzo reads either form, and that is wrong. EP-1362 has to convert on the way in, or turn off two lint rules.
|
package/contract.json
ADDED
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
{
|
|
2
|
+
"tokens": {
|
|
3
|
+
"--x-border-radius-32": "dimension",
|
|
4
|
+
"--x-border-radius-4": "dimension",
|
|
5
|
+
"--x-border-radius-lg": "dimension",
|
|
6
|
+
"--x-border-radius-md": "dimension",
|
|
7
|
+
"--x-border-radius-none": "dimension",
|
|
8
|
+
"--x-border-radius-round": "dimension",
|
|
9
|
+
"--x-border-radius-sm": "dimension",
|
|
10
|
+
"--x-border-width-lg": "dimension",
|
|
11
|
+
"--x-border-width-md": "dimension",
|
|
12
|
+
"--x-border-width-none": "dimension",
|
|
13
|
+
"--x-border-width-sm": "dimension",
|
|
14
|
+
"--x-color-background-brand": "color",
|
|
15
|
+
"--x-color-background-brand-hover": "color",
|
|
16
|
+
"--x-color-background-default": "color",
|
|
17
|
+
"--x-color-background-default-hover": "color",
|
|
18
|
+
"--x-color-background-disabled": "color",
|
|
19
|
+
"--x-color-background-knockout": "color",
|
|
20
|
+
"--x-color-background-subtle": "color",
|
|
21
|
+
"--x-color-background-subtle-hover": "color",
|
|
22
|
+
"--x-color-background-transparent": "color",
|
|
23
|
+
"--x-color-background-utility-error": "color",
|
|
24
|
+
"--x-color-background-utility-success": "color",
|
|
25
|
+
"--x-color-background-utility-warning": "color",
|
|
26
|
+
"--x-color-border-default": "color",
|
|
27
|
+
"--x-color-border-knockout": "color",
|
|
28
|
+
"--x-color-border-subtle": "color",
|
|
29
|
+
"--x-color-border-utility-error": "color",
|
|
30
|
+
"--x-color-brand-blue-100": "color",
|
|
31
|
+
"--x-color-brand-blue-200": "color",
|
|
32
|
+
"--x-color-brand-blue-300": "color",
|
|
33
|
+
"--x-color-brand-blue-400": "color",
|
|
34
|
+
"--x-color-brand-blue-50": "color",
|
|
35
|
+
"--x-color-brand-blue-500": "color",
|
|
36
|
+
"--x-color-brand-blue-600": "color",
|
|
37
|
+
"--x-color-brand-blue-700": "color",
|
|
38
|
+
"--x-color-brand-blue-800": "color",
|
|
39
|
+
"--x-color-brand-blue-900": "color",
|
|
40
|
+
"--x-color-brand-pale-100": "color",
|
|
41
|
+
"--x-color-brand-pale-200": "color",
|
|
42
|
+
"--x-color-brand-pale-300": "color",
|
|
43
|
+
"--x-color-brand-pale-400": "color",
|
|
44
|
+
"--x-color-brand-pale-50": "color",
|
|
45
|
+
"--x-color-brand-pale-500": "color",
|
|
46
|
+
"--x-color-brand-pale-600": "color",
|
|
47
|
+
"--x-color-brand-pale-700": "color",
|
|
48
|
+
"--x-color-brand-pale-800": "color",
|
|
49
|
+
"--x-color-brand-pale-900": "color",
|
|
50
|
+
"--x-color-content-brand": "color",
|
|
51
|
+
"--x-color-content-brand-knockout": "color",
|
|
52
|
+
"--x-color-content-default": "color",
|
|
53
|
+
"--x-color-content-disabled": "color",
|
|
54
|
+
"--x-color-content-knockout": "color",
|
|
55
|
+
"--x-color-content-subtle": "color",
|
|
56
|
+
"--x-color-content-utility-error": "color",
|
|
57
|
+
"--x-color-content-utility-success": "color",
|
|
58
|
+
"--x-color-content-utility-warning": "color",
|
|
59
|
+
"--x-color-focus-ring-default": "color",
|
|
60
|
+
"--x-color-link-default": "color",
|
|
61
|
+
"--x-color-link-hover": "color",
|
|
62
|
+
"--x-color-neutral-0": "color",
|
|
63
|
+
"--x-color-neutral-100": "color",
|
|
64
|
+
"--x-color-neutral-1000": "color",
|
|
65
|
+
"--x-color-neutral-200": "color",
|
|
66
|
+
"--x-color-neutral-300": "color",
|
|
67
|
+
"--x-color-neutral-400": "color",
|
|
68
|
+
"--x-color-neutral-600": "color",
|
|
69
|
+
"--x-color-neutral-700": "color",
|
|
70
|
+
"--x-color-neutral-800": "color",
|
|
71
|
+
"--x-color-utility-amber-100": "color",
|
|
72
|
+
"--x-color-utility-amber-500": "color",
|
|
73
|
+
"--x-color-utility-green-100": "color",
|
|
74
|
+
"--x-color-utility-green-500": "color",
|
|
75
|
+
"--x-color-utility-green-700": "color",
|
|
76
|
+
"--x-color-utility-red-100": "color",
|
|
77
|
+
"--x-color-utility-red-50": "color",
|
|
78
|
+
"--x-color-utility-red-500": "color",
|
|
79
|
+
"--x-color-utility-red-900": "color",
|
|
80
|
+
"--x-spacing-12": "dimension",
|
|
81
|
+
"--x-spacing-128": "dimension",
|
|
82
|
+
"--x-spacing-16": "dimension",
|
|
83
|
+
"--x-spacing-2": "dimension",
|
|
84
|
+
"--x-spacing-24": "dimension",
|
|
85
|
+
"--x-spacing-32": "dimension",
|
|
86
|
+
"--x-spacing-4": "dimension",
|
|
87
|
+
"--x-spacing-48": "dimension",
|
|
88
|
+
"--x-spacing-64": "dimension",
|
|
89
|
+
"--x-spacing-8": "dimension",
|
|
90
|
+
"--x-spacing-96": "dimension",
|
|
91
|
+
"--x-spacing-none": "dimension",
|
|
92
|
+
"--x-typography-body-default-font-family": "fontFamily",
|
|
93
|
+
"--x-typography-body-default-font-size": "dimension",
|
|
94
|
+
"--x-typography-body-default-font-weight": "fontWeight",
|
|
95
|
+
"--x-typography-body-default-letter-spacing": "dimension",
|
|
96
|
+
"--x-typography-body-default-line-height": "dimension",
|
|
97
|
+
"--x-typography-body-sm-font-family": "fontFamily",
|
|
98
|
+
"--x-typography-body-sm-font-size": "dimension",
|
|
99
|
+
"--x-typography-body-sm-font-weight": "fontWeight",
|
|
100
|
+
"--x-typography-body-sm-letter-spacing": "dimension",
|
|
101
|
+
"--x-typography-body-sm-line-height": "dimension",
|
|
102
|
+
"--x-typography-font-family-sans": "fontFamily",
|
|
103
|
+
"--x-typography-font-family-serif": "fontFamily",
|
|
104
|
+
"--x-typography-headline-default-font-family": "fontFamily",
|
|
105
|
+
"--x-typography-headline-default-font-size": "dimension",
|
|
106
|
+
"--x-typography-headline-default-font-weight": "fontWeight",
|
|
107
|
+
"--x-typography-headline-default-letter-spacing": "dimension",
|
|
108
|
+
"--x-typography-headline-default-line-height": "dimension",
|
|
109
|
+
"--x-typography-headline-sm-font-family": "fontFamily",
|
|
110
|
+
"--x-typography-headline-sm-font-size": "dimension",
|
|
111
|
+
"--x-typography-headline-sm-font-weight": "fontWeight",
|
|
112
|
+
"--x-typography-headline-sm-letter-spacing": "dimension",
|
|
113
|
+
"--x-typography-headline-sm-line-height": "dimension",
|
|
114
|
+
"--x-typography-headline-xs-font-family": "fontFamily",
|
|
115
|
+
"--x-typography-headline-xs-font-size": "dimension",
|
|
116
|
+
"--x-typography-headline-xs-font-weight": "fontWeight",
|
|
117
|
+
"--x-typography-headline-xs-letter-spacing": "dimension",
|
|
118
|
+
"--x-typography-headline-xs-line-height": "dimension",
|
|
119
|
+
"--x-typography-label-default-font-family": "fontFamily",
|
|
120
|
+
"--x-typography-label-default-font-size": "dimension",
|
|
121
|
+
"--x-typography-label-default-font-weight": "fontWeight",
|
|
122
|
+
"--x-typography-label-default-letter-spacing": "dimension",
|
|
123
|
+
"--x-typography-label-default-line-height": "dimension",
|
|
124
|
+
"--x-typography-label-sm-font-family": "fontFamily",
|
|
125
|
+
"--x-typography-label-sm-font-size": "dimension",
|
|
126
|
+
"--x-typography-label-sm-font-weight": "fontWeight",
|
|
127
|
+
"--x-typography-label-sm-letter-spacing": "dimension",
|
|
128
|
+
"--x-typography-label-sm-line-height": "dimension",
|
|
129
|
+
"--x-typography-label-xs-font-family": "fontFamily",
|
|
130
|
+
"--x-typography-label-xs-font-size": "dimension",
|
|
131
|
+
"--x-typography-label-xs-font-weight": "fontWeight",
|
|
132
|
+
"--x-typography-label-xs-letter-spacing": "dimension",
|
|
133
|
+
"--x-typography-label-xs-line-height": "dimension",
|
|
134
|
+
"--x-typography-meta-sm-font-family": "fontFamily",
|
|
135
|
+
"--x-typography-meta-sm-font-size": "dimension",
|
|
136
|
+
"--x-typography-meta-sm-font-weight": "fontWeight",
|
|
137
|
+
"--x-typography-meta-sm-letter-spacing": "dimension",
|
|
138
|
+
"--x-typography-meta-sm-line-height": "dimension"
|
|
139
|
+
}
|
|
140
|
+
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer x-tokens, theme, base, x-mat-sys, components, utilities;
|
|
2
|
+
@layer x-tokens{:root{--x-tokens-version:"0.0.0-dev";--x-border-radius-4:4px;--x-border-radius-32:32px;--x-border-radius-lg:16px;--x-border-radius-md:8px;--x-border-radius-none:0px;--x-border-radius-round:9999px;--x-border-radius-sm:2px;--x-border-width-lg:4px;--x-border-width-md:2px;--x-border-width-none:0px;--x-border-width-sm:1px;--x-color-background-brand:var(--x-color-brand-pale-500);--x-color-background-brand-hover:#cad9ec;--x-color-background-default:var(--x-color-neutral-0);--x-color-background-default-hover:var(--x-color-brand-pale-50);--x-color-background-disabled:var(--x-color-neutral-100);--x-color-background-knockout:var(--x-color-brand-blue-600);--x-color-background-subtle:#ecf2f9;--x-color-background-subtle-hover:var(--x-color-brand-pale-200);--x-color-background-transparent:#0000;--x-color-background-utility-error:var(--x-color-utility-red-100);--x-color-background-utility-success:var(--x-color-utility-green-100);--x-color-background-utility-warning:var(--x-color-utility-amber-100);--x-color-border-default:var(--x-color-brand-pale-300);--x-color-border-knockout:var(--x-color-neutral-0);--x-color-border-subtle:var(--x-color-neutral-200);--x-color-border-utility-error:var(--x-color-utility-red-500);--x-color-brand-blue-50:#325e92;--x-color-brand-blue-100:#2a5384;--x-color-brand-blue-200:#1e4370;--x-color-brand-blue-300:#15365f;--x-color-brand-blue-400:#0f2e53;--x-color-brand-blue-500:#09223f;--x-color-brand-blue-600:#202e68;--x-color-brand-blue-700:#00162f;--x-color-brand-blue-800:#001124;--x-color-brand-blue-900:#000c1a;--x-color-brand-pale-50:#f9fbfd;--x-color-brand-pale-100:#f0f5fa;--x-color-brand-pale-200:#e6eef7;--x-color-brand-pale-300:#dbe7f3;--x-color-brand-pale-400:#d4e1f1;--x-color-brand-pale-500:#d2deed;--x-color-brand-pale-600:#c3d2e6;--x-color-brand-pale-700:#c0d3e9;--x-color-brand-pale-800:#b9cee7;--x-color-brand-pale-900:#adc5e2;--x-color-content-brand:var(--x-color-brand-blue-500);--x-color-content-brand-knockout:var(--x-color-neutral-0);--x-color-content-default:var(--x-color-brand-blue-600);--x-color-content-disabled:var(--x-color-neutral-400);--x-color-content-knockout:var(--x-color-neutral-0);--x-color-content-subtle:var(--x-color-neutral-700);--x-color-content-utility-error:var(--x-color-utility-red-900);--x-color-content-utility-success:var(--x-color-utility-green-700);--x-color-content-utility-warning:var(--x-color-utility-amber-500);--x-color-focus-ring-default:var(--x-color-brand-blue-500);--x-color-link-default:#003282;--x-color-link-hover:var(--x-color-brand-blue-500);--x-color-neutral-0:#fff;--x-color-neutral-100:#eee;--x-color-neutral-200:#e6e6e6;--x-color-neutral-300:#ccc;--x-color-neutral-400:#ababab;--x-color-neutral-600:#4a4a4a;--x-color-neutral-700:#484a4f;--x-color-neutral-800:#222;--x-color-neutral-1000:#000;--x-color-utility-amber-100:#fbefea;--x-color-utility-amber-500:#c55a2c;--x-color-utility-green-100:#d0e0bf;--x-color-utility-green-500:#7c9e60;--x-color-utility-green-700:#4f772d;--x-color-utility-red-50:#f7e4e4;--x-color-utility-red-100:#ffe0d9;--x-color-utility-red-500:#ba1b1b;--x-color-utility-red-900:#630e0f;--x-spacing-2:2px;--x-spacing-4:4px;--x-spacing-8:8px;--x-spacing-12:12px;--x-spacing-16:16px;--x-spacing-24:24px;--x-spacing-32:32px;--x-spacing-48:48px;--x-spacing-64:64px;--x-spacing-96:96px;--x-spacing-128:128px;--x-spacing-none:0px;--x-typography-body-default-font-family:var(--x-typography-font-family-sans);--x-typography-body-default-font-size:14px;--x-typography-body-default-font-weight:300;--x-typography-body-default-letter-spacing:0px;--x-typography-body-default-line-height:20px;--x-typography-body-sm-font-family:var(--x-typography-font-family-sans);--x-typography-body-sm-font-size:13px;--x-typography-body-sm-font-weight:300;--x-typography-body-sm-letter-spacing:0px;--x-typography-body-sm-line-height:18px;--x-typography-font-family-sans:"Nunito Sans", sans-serif;--x-typography-font-family-serif:"Cormorant Garamond", serif;--x-typography-headline-default-font-family:var(--x-typography-font-family-serif);--x-typography-headline-default-font-size:32px;--x-typography-headline-default-font-weight:400;--x-typography-headline-default-letter-spacing:0.64px;--x-typography-headline-default-line-height:40px;--x-typography-headline-sm-font-family:var(--x-typography-font-family-serif);--x-typography-headline-sm-font-size:28px;--x-typography-headline-sm-font-weight:400;--x-typography-headline-sm-letter-spacing:0px;--x-typography-headline-sm-line-height:32px;--x-typography-headline-xs-font-family:var(--x-typography-font-family-serif);--x-typography-headline-xs-font-size:24px;--x-typography-headline-xs-font-weight:400;--x-typography-headline-xs-letter-spacing:0.48px;--x-typography-headline-xs-line-height:30px;--x-typography-label-default-font-family:var(--x-typography-font-family-sans);--x-typography-label-default-font-size:16px;--x-typography-label-default-font-weight:400;--x-typography-label-default-letter-spacing:0px;--x-typography-label-default-line-height:24px;--x-typography-label-sm-font-family:var(--x-typography-font-family-sans);--x-typography-label-sm-font-size:14px;--x-typography-label-sm-font-weight:400;--x-typography-label-sm-letter-spacing:0px;--x-typography-label-sm-line-height:20px;--x-typography-label-xs-font-family:var(--x-typography-font-family-sans);--x-typography-label-xs-font-size:12px;--x-typography-label-xs-font-weight:400;--x-typography-label-xs-letter-spacing:0px;--x-typography-label-xs-line-height:16px;--x-typography-meta-sm-font-family:var(--x-typography-font-family-sans);--x-typography-meta-sm-font-size:11px;--x-typography-meta-sm-font-weight:300;--x-typography-meta-sm-letter-spacing:0px;--x-typography-meta-sm-line-height:14px}@media (min-width:1200px){:root{--x-typography-body-default-font-size:16px;--x-typography-body-default-line-height:24px;--x-typography-headline-default-font-size:36px;--x-typography-headline-default-line-height:36px}}}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
@layer x-tokens, theme, base, x-mat-sys, components, utilities;
|
|
2
|
+
@layer x-tokens{:root{--x-tokens-version:"0.0.0-dev";--x-border-radius-4:4px;--x-border-radius-32:32px;--x-border-radius-lg:16px;--x-border-radius-md:8px;--x-border-radius-none:0px;--x-border-radius-round:9999px;--x-border-radius-sm:2px;--x-border-width-lg:4px;--x-border-width-md:2px;--x-border-width-none:0px;--x-border-width-sm:1px;--x-color-background-brand:var(--x-color-brand-pale-500);--x-color-background-brand-hover:#cad9ec;--x-color-background-default:var(--x-color-neutral-0);--x-color-background-default-hover:var(--x-color-brand-pale-50);--x-color-background-disabled:var(--x-color-neutral-100);--x-color-background-knockout:var(--x-color-brand-blue-500);--x-color-background-subtle:#ecf2f9;--x-color-background-subtle-hover:var(--x-color-brand-pale-200);--x-color-background-transparent:#0000;--x-color-background-utility-error:var(--x-color-utility-red-100);--x-color-background-utility-success:var(--x-color-utility-green-100);--x-color-background-utility-warning:var(--x-color-utility-amber-100);--x-color-border-default:var(--x-color-neutral-300);--x-color-border-knockout:var(--x-color-neutral-0);--x-color-border-subtle:var(--x-color-neutral-200);--x-color-border-utility-error:var(--x-color-utility-red-500);--x-color-brand-blue-50:#e3e7eb;--x-color-brand-blue-100:#b8c3ce;--x-color-brand-blue-200:#899bad;--x-color-brand-blue-300:#59728c;--x-color-brand-blue-400:#365473;--x-color-brand-blue-500:#12365a;--x-color-brand-blue-600:#103052;--x-color-brand-blue-700:#0d2948;--x-color-brand-blue-800:#0a223f;--x-color-brand-blue-900:#05162e;--x-color-brand-pale-50:#f9fbfd;--x-color-brand-pale-100:#f0f5fa;--x-color-brand-pale-200:#e6eef7;--x-color-brand-pale-300:#dbe7f3;--x-color-brand-pale-400:#d4e1f1;--x-color-brand-pale-500:#d2deed;--x-color-brand-pale-600:#c3d2e6;--x-color-brand-pale-700:#c0d3e9;--x-color-brand-pale-800:#b9cee7;--x-color-brand-pale-900:#adc5e2;--x-color-content-brand:var(--x-color-brand-blue-500);--x-color-content-brand-knockout:var(--x-color-neutral-0);--x-color-content-default:var(--x-color-neutral-600);--x-color-content-disabled:var(--x-color-neutral-400);--x-color-content-knockout:var(--x-color-neutral-0);--x-color-content-subtle:var(--x-color-neutral-700);--x-color-content-utility-error:var(--x-color-utility-red-900);--x-color-content-utility-success:var(--x-color-utility-green-700);--x-color-content-utility-warning:var(--x-color-utility-amber-500);--x-color-focus-ring-default:var(--x-color-brand-blue-500);--x-color-link-default:#003282;--x-color-link-hover:var(--x-color-brand-blue-500);--x-color-neutral-0:#fff;--x-color-neutral-100:#eee;--x-color-neutral-200:#e6e6e6;--x-color-neutral-300:#ccc;--x-color-neutral-400:#ababab;--x-color-neutral-600:#4a4a4a;--x-color-neutral-700:#484a4f;--x-color-neutral-800:#222;--x-color-neutral-1000:#000;--x-color-utility-amber-100:#fbefea;--x-color-utility-amber-500:#c55a2c;--x-color-utility-green-100:#d0e0bf;--x-color-utility-green-500:#7c9e60;--x-color-utility-green-700:#4f772d;--x-color-utility-red-50:#f7e4e4;--x-color-utility-red-100:#ffe0d9;--x-color-utility-red-500:#ba1b1b;--x-color-utility-red-900:#630e0f;--x-spacing-2:2px;--x-spacing-4:4px;--x-spacing-8:8px;--x-spacing-12:12px;--x-spacing-16:16px;--x-spacing-24:24px;--x-spacing-32:32px;--x-spacing-48:48px;--x-spacing-64:64px;--x-spacing-96:96px;--x-spacing-128:128px;--x-spacing-none:0px;--x-typography-body-default-font-family:var(--x-typography-font-family-sans);--x-typography-body-default-font-size:14px;--x-typography-body-default-font-weight:300;--x-typography-body-default-letter-spacing:0px;--x-typography-body-default-line-height:20px;--x-typography-body-sm-font-family:var(--x-typography-font-family-sans);--x-typography-body-sm-font-size:13px;--x-typography-body-sm-font-weight:300;--x-typography-body-sm-letter-spacing:0px;--x-typography-body-sm-line-height:18px;--x-typography-font-family-sans:"Nunito Sans", sans-serif;--x-typography-font-family-serif:"EB Garamond", serif;--x-typography-headline-default-font-family:var(--x-typography-font-family-serif);--x-typography-headline-default-font-size:32px;--x-typography-headline-default-font-weight:400;--x-typography-headline-default-letter-spacing:0px;--x-typography-headline-default-line-height:40px;--x-typography-headline-sm-font-family:var(--x-typography-font-family-serif);--x-typography-headline-sm-font-size:28px;--x-typography-headline-sm-font-weight:400;--x-typography-headline-sm-letter-spacing:1.12px;--x-typography-headline-sm-line-height:32px;--x-typography-headline-xs-font-family:var(--x-typography-font-family-serif);--x-typography-headline-xs-font-size:24px;--x-typography-headline-xs-font-weight:400;--x-typography-headline-xs-letter-spacing:0.48px;--x-typography-headline-xs-line-height:30px;--x-typography-label-default-font-family:var(--x-typography-font-family-sans);--x-typography-label-default-font-size:16px;--x-typography-label-default-font-weight:400;--x-typography-label-default-letter-spacing:0px;--x-typography-label-default-line-height:24px;--x-typography-label-sm-font-family:var(--x-typography-font-family-sans);--x-typography-label-sm-font-size:14px;--x-typography-label-sm-font-weight:400;--x-typography-label-sm-letter-spacing:0px;--x-typography-label-sm-line-height:20px;--x-typography-label-xs-font-family:var(--x-typography-font-family-sans);--x-typography-label-xs-font-size:12px;--x-typography-label-xs-font-weight:400;--x-typography-label-xs-letter-spacing:0px;--x-typography-label-xs-line-height:16px;--x-typography-meta-sm-font-family:var(--x-typography-font-family-sans);--x-typography-meta-sm-font-size:11px;--x-typography-meta-sm-font-weight:300;--x-typography-meta-sm-letter-spacing:0px;--x-typography-meta-sm-line-height:14px}@media (min-width:1200px){:root{--x-typography-body-default-font-size:16px;--x-typography-body-default-line-height:24px;--x-typography-headline-default-font-size:36px}}}
|
package/package.json
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@candide/design-tokens",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Candide design tokens for Babylonstoren and The Newt. DTCG source, rendered CSS output.",
|
|
5
|
+
"license": "UNLICENSED",
|
|
6
|
+
"private": false,
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/candide-com/x-design-tokens.git"
|
|
10
|
+
},
|
|
11
|
+
"publishConfig": {
|
|
12
|
+
"access": "restricted"
|
|
13
|
+
},
|
|
14
|
+
"files": [
|
|
15
|
+
"dist/*/tokens.css",
|
|
16
|
+
"contract.json"
|
|
17
|
+
],
|
|
18
|
+
"exports": {
|
|
19
|
+
"./contract.json": "./contract.json",
|
|
20
|
+
"./bt/tokens.css": "./dist/bt/tokens.css",
|
|
21
|
+
"./tn/tokens.css": "./dist/tn/tokens.css"
|
|
22
|
+
},
|
|
23
|
+
"engines": {
|
|
24
|
+
"node": ">=20"
|
|
25
|
+
},
|
|
26
|
+
"scripts": {
|
|
27
|
+
"build": "node scripts/build.mjs",
|
|
28
|
+
"check": "node scripts/check-all-sets.mjs",
|
|
29
|
+
"check:contract": "node scripts/check-contract.mjs",
|
|
30
|
+
"check:sets": "node scripts/check-set-paths.mjs",
|
|
31
|
+
"validate": "npm run check:sets && npm run check && npm run build && npm run check:contract",
|
|
32
|
+
"test": "node --test scripts/",
|
|
33
|
+
"prepublishOnly": "npm run validate"
|
|
34
|
+
},
|
|
35
|
+
"devDependencies": {
|
|
36
|
+
"@terrazzo/cli": "2.7.1",
|
|
37
|
+
"@terrazzo/plugin-css": "2.7.1"
|
|
38
|
+
}
|
|
39
|
+
}
|