@grantcodes/style-dictionary 1.0.0 → 1.2.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.
Files changed (66) hide show
  1. package/.turbo/turbo-build.log +44 -0
  2. package/.turbo/turbo-lint.log +5 -0
  3. package/CHANGELOG.md +7 -0
  4. package/README.md +37 -0
  5. package/biome.json +9 -0
  6. package/build.js +10 -0
  7. package/config.js +485 -0
  8. package/demo.html +171 -0
  9. package/lib/color-generator.js +13 -0
  10. package/lib/get-style-dictionary-config.js +223 -0
  11. package/lib/get-themes.js +10 -0
  12. package/lib/index.js +3 -0
  13. package/package.json +57 -28
  14. package/tests/tokens.test.js +87 -0
  15. package/tokens/core/tier-1-definitions/colors.json +175 -0
  16. package/tokens/core/tier-1-definitions/z-index.json +29 -0
  17. package/tokens/grantcodes/tier-1-definitions/animation.json +27 -0
  18. package/tokens/grantcodes/tier-1-definitions/borders.json +36 -0
  19. package/tokens/grantcodes/tier-1-definitions/colors.json +35 -0
  20. package/tokens/grantcodes/tier-1-definitions/shadows.json +39 -0
  21. package/tokens/grantcodes/tier-1-definitions/typography.json +133 -0
  22. package/tokens/grantcodes/tier-2-usage/00-colors-background.json +72 -0
  23. package/tokens/grantcodes/tier-2-usage/00-colors-border.json +42 -0
  24. package/tokens/grantcodes/tier-2-usage/00-colors-content.json +45 -0
  25. package/tokens/grantcodes/tier-2-usage/animation.json +23 -0
  26. package/tokens/grantcodes/tier-2-usage/borders.json +26 -0
  27. package/tokens/grantcodes/tier-2-usage/shadows.json +39 -0
  28. package/tokens/grantcodes/tier-2-usage/typography-usage.json +277 -0
  29. package/tokens/grantcodes/tier-3-components/button.json +94 -0
  30. package/tokens/grantcodes/tier-3-components/focus-ring.json +26 -0
  31. package/tokens/grantcodes/tier-3-components/form.json +69 -0
  32. package/tokens/grantcodes/tier-3-components/link.json +39 -0
  33. package/tokens/todomap/tier-1-definitions/colors.json +92 -0
  34. package/tokens/todomap/tier-1-definitions/typography.json +10 -0
  35. package/tokens/todomap/tier-2-usage/00-colors-background.json +36 -0
  36. package/tokens/todomap/tier-2-usage/00-colors-content.json +33 -0
  37. package/tokens/todomap/tier-2-usage/typography-usage.json +20 -0
  38. package/tokens/todomap/tier-3-components/button.json +141 -0
  39. package/tokens/todomap/tier-3-components/focus-ring.json +26 -0
  40. package/tokens/todomap/tier-3-components/form.json +69 -0
  41. package/tokens/todomap/tier-3-components/link.json +39 -0
  42. package/tokens/wireframe/tier-1-definitions/animation.json +18 -0
  43. package/tokens/wireframe/tier-1-definitions/borders.json +42 -0
  44. package/tokens/wireframe/tier-1-definitions/colors.json +36 -0
  45. package/tokens/wireframe/tier-1-definitions/shadows.json +39 -0
  46. package/tokens/wireframe/tier-1-definitions/typography.json +130 -0
  47. package/tokens/wireframe/tier-2-usage/00-colors-background.json +86 -0
  48. package/tokens/wireframe/tier-2-usage/00-colors-border.json +42 -0
  49. package/tokens/wireframe/tier-2-usage/00-colors-content.json +45 -0
  50. package/tokens/wireframe/tier-2-usage/animation.json +24 -0
  51. package/tokens/wireframe/tier-2-usage/borders.json +33 -0
  52. package/tokens/wireframe/tier-2-usage/shadows.json +39 -0
  53. package/tokens/wireframe/tier-2-usage/typography-usage.json +445 -0
  54. package/tokens/wireframe/tier-3-components/button.json +94 -0
  55. package/tokens/wireframe/tier-3-components/focus-ring.json +26 -0
  56. package/tokens/wireframe/tier-3-components/form.json +69 -0
  57. package/tokens/wireframe/tier-3-components/link.json +39 -0
  58. package/.github/workflows/create-release.yml +0 -45
  59. package/.simple-git-hooks.cjs +0 -1
  60. package/build/css/default/style-dictionary.css +0 -181
  61. package/build/css/todomap/style-dictionary.css +0 -181
  62. package/build/js/default/style-dictionary.js +0 -179
  63. package/build/js/todomap/style-dictionary.js +0 -179
  64. package/build/scss/default/_style-dictionary.scss +0 -181
  65. package/build/scss/todomap/_style-dictionary.scss +0 -181
  66. package/commitlint.config.cjs +0 -1
package/demo.html ADDED
@@ -0,0 +1,171 @@
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Style Dictionary Demo</title>
7
+ <link rel="stylesheet" href="./dist/css/grantcodes/tokens.css" />
8
+ <style>
9
+ .color {
10
+ display: flex;
11
+ align-items: center;
12
+ justify-content: center;
13
+ padding: 1rem;
14
+ min-height: 12rem;
15
+ }
16
+ </style>
17
+ </head>
18
+ <body>
19
+ <h1>Style Dictionary Demo</h1>
20
+ <p>This is a demo of the Style Dictionary design tokens.</p>
21
+
22
+ <h2>Colors</h2>
23
+ <span
24
+ class="color"
25
+ style="
26
+ background-color: var(--g-theme-color-background-default);
27
+ color: var(--g-theme-color-content-default);
28
+ "
29
+ >Default</span
30
+ >
31
+ <span
32
+ class="color"
33
+ style="
34
+ background-color: var(--g-theme-color-background-default-hover);
35
+ color: var(--g-theme-color-content-default-hover);
36
+ "
37
+ >Default Hover</span
38
+ >
39
+ <span
40
+ class="color"
41
+ style="
42
+ background-color: var(--g-theme-color-background-subtle);
43
+ color: var(--g-theme-color-content-subtle);
44
+ "
45
+ >Subtle</span
46
+ >
47
+ <span
48
+ class="color"
49
+ style="
50
+ background-color: var(--g-theme-color-background-subtle-hover);
51
+ color: var(--g-theme-color-content-subtle-hover);
52
+ "
53
+ >Subtle Hover</span
54
+ >
55
+ <span
56
+ class="color"
57
+ style="
58
+ background-color: var(--g-theme-color-background-knockout);
59
+ color: var(--g-theme-color-content-knockout);
60
+ "
61
+ >Knockout</span
62
+ >
63
+ <span
64
+ class="color"
65
+ style="
66
+ background-color: var(--g-theme-color-background-brand);
67
+ color: var(--g-theme-color-content-brand);
68
+ "
69
+ >Brand</span
70
+ >
71
+ <span
72
+ class="color"
73
+ style="
74
+ background-color: var(--g-theme-color-background-brand-hover);
75
+ color: var(--g-theme-color-content-brand-hover);
76
+ "
77
+ >Brand Hover</span
78
+ >
79
+ <span
80
+ class="color"
81
+ style="
82
+ background-color: var(--g-theme-color-background-brand-knockout);
83
+ color: var(--g-theme-color-content-brand-knockout);
84
+ "
85
+ >Brand Knockout</span
86
+ >
87
+ <span
88
+ class="color"
89
+ style="
90
+ background-color: var(--g-theme-color-background-brand-knockout-hover);
91
+ color: var(--g-theme-color-content-brand-knockout-hover);
92
+ "
93
+ >Brand Knockout Hover</span
94
+ >
95
+ <span
96
+ class="color"
97
+ style="
98
+ background-color: var(--g-theme-color-background-utility-error);
99
+ color: var(--g-theme-color-content-utility-error);
100
+ "
101
+ >Utility Error</span
102
+ >
103
+ <span
104
+ class="color"
105
+ style="
106
+ background-color: var(--g-theme-color-background-utility-warning);
107
+ color: var(--g-theme-color-content-utility-warning);
108
+ "
109
+ >Utility Warning</span
110
+ >
111
+ <span
112
+ class="color"
113
+ style="
114
+ background-color: var(--g-theme-color-background-utility-success);
115
+ color: var(--g-theme-color-content-utility-success);
116
+ "
117
+ >Utility Success</span
118
+ >
119
+ <span
120
+ class="color"
121
+ style="
122
+ background-color: var(--g-theme-color-background-utility-info);
123
+ color: var(--g-theme-color-content-utility-info);
124
+ "
125
+ >Utility Info</span
126
+ >
127
+ <span
128
+ class="color"
129
+ style="
130
+ background-color: var(--g-theme-color-background-disabled);
131
+ color: var(--g-theme-color-content-disabled);
132
+ "
133
+ >Disabled</span
134
+ >
135
+ <span
136
+ class="color"
137
+ style="
138
+ background-color: var(--g-theme-color-background-transparent);
139
+ color: var(--g-theme-color-content-transparent);
140
+ "
141
+ >Transparent</span
142
+ >
143
+ <span
144
+ class="color"
145
+ style="
146
+ background-color: var(--g-theme-color-background-transparent-strong);
147
+ color: var(--g-theme-color-content-transparent-strong);
148
+ "
149
+ >Transparent Strong</span
150
+ >
151
+
152
+ <h2>Typography</h2>
153
+ <p style="font: var(--g-theme-typography-display-default)">
154
+ Display Default
155
+ </p>
156
+ <p style="font: var(--g-theme-typography-display-sm)">Display Small</p>
157
+ <p style="font: var(--g-theme-typography-headline-lg)">Headline Large</p>
158
+ <p style="font: var(--g-theme-typography-headline-default)">
159
+ Headline Default
160
+ </p>
161
+ <p style="font: var(--g-theme-typography-headline-sm)">Headline Small</p>
162
+ <p style="font: var(--g-theme-typography-title-lg)">Title Large</p>
163
+ <p style="font: var(--g-theme-typography-title-default)">Title Default</p>
164
+ <p style="font: var(--g-theme-typography-title-sm)">Title Small</p>
165
+ <p style="font: var(--g-theme-typography-label-lg)">Label Large</p>
166
+ <p style="font: var(--g-theme-typography-label-default)">Label Default</p>
167
+ <p style="font: var(--g-theme-typography-label-sm)">Label Small</p>
168
+ <p style="font: var(--g-theme-typography-body-lg)">Body Large</p>
169
+ <p style="font: var(--g-theme-typography-body-default)">Body Default</p>
170
+ </body>
171
+ </html>
package/lib/color-generator.js ADDED
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Get a scale of lightness values
3
+ * @param {number} min - The minimum lightness value
4
+ * @param {number} max - The maximum lightness value
5
+ * @param {number} steps - The number of steps in the scale
6
+ * @returns {number[]} - The lightness steps
7
+ */
8
+ const getLightnessScale = (min = 26, max = 97, steps = 9) => {
9
+ const step = (max - min) / steps;
10
+ return Array.from({ length: steps }, (_, i) => Math.round(min + step * i));
11
+ };
12
+
13
+ export { getLightnessScale };
package/lib/get-style-dictionary-config.js ADDED
@@ -0,0 +1,223 @@
1
+ import { join } from "node:path";
2
+ import { SYSTEM } from "../config.js";
3
+
4
+ console.log("get style dictionary config");
5
+
6
+ /**
7
+ * Get a style dictionary config for the given brand.
8
+ *
9
+ * @param {string} brand The brand folder name
10
+ *
11
+ * @return {import("style-dictionary").Config} The style dictionary config
12
+ */
13
+ const getStyleDictionaryConfig = (theme) => ({
14
+ source: [
15
+ join(import.meta.dirname, "../tokens/core/tier-1-definitions/**/*.js"),
16
+ // join(import.meta.dirname, "../tokens/tier-2-usage/**/*.js"),
17
+ // join(import.meta.dirname, "../tokens/tier-3-components/**/*.js"),
18
+ join(
19
+ import.meta.dirname,
20
+ `../tokens/themes/${theme}/tier-1-definitions/**/*.js`,
21
+ ),
22
+ join(import.meta.dirname, `../tokens/themes/${theme}/tier-2-usage/**/*.js`),
23
+ join(
24
+ import.meta.dirname,
25
+ `../tokens/themes/${theme}/tier-3-components/**/*.js`,
26
+ ),
27
+ ],
28
+ log: {
29
+ verbosity: "verbose",
30
+ },
31
+ platforms: {
32
+ css: {
33
+ transformGroup: "css",
34
+ buildPath: `dist/css/${theme}/`,
35
+ prefix: SYSTEM,
36
+ files: [
37
+ {
38
+ destination: "style-dictionary.css",
39
+ format: "css/variables",
40
+ options: {
41
+ outputReferences: true,
42
+ },
43
+ },
44
+ // {
45
+ // destination: 'fonts.css',
46
+ // format: 'css/fonts.css',
47
+ // options: {
48
+ // outputReferences: true,
49
+ // },
50
+ // },
51
+ ],
52
+ },
53
+ scss: {
54
+ transformGroup: "scss",
55
+ buildPath: `dist/scss/${theme}/`,
56
+ prefix: SYSTEM,
57
+ files: [
58
+ {
59
+ destination: "_style-dictionary.scss",
60
+ format: "css/variables",
61
+ options: {
62
+ outputReferences: true,
63
+ selector: "@mixin css-variables",
64
+ },
65
+ },
66
+ // {
67
+ // destination: '_fonts.scss',
68
+ // format: 'css/fonts.css',
69
+ // options: {
70
+ // outputReferences: true,
71
+ // },
72
+ // },
73
+ ],
74
+ },
75
+ js: {
76
+ transformGroup: "js",
77
+ buildPath: `dist/js/${theme}/`,
78
+ prefix: SYSTEM,
79
+ files: [
80
+ {
81
+ format: "javascript/es6",
82
+ destination: "style-dictionary.js",
83
+ },
84
+ ],
85
+ },
86
+ // android: {
87
+ // transformGroup: 'android',
88
+ // buildPath: `dist/android/${theme}/`,
89
+ // files: [
90
+ // {
91
+ // destination: 'font_dimens.xml',
92
+ // format: 'android/fontDimens',
93
+ // },
94
+ // {
95
+ // destination: 'colors.xml',
96
+ // format: 'android/colors',
97
+ // },
98
+ // ],
99
+ // },
100
+ // compose: {
101
+ // transformGroup: 'compose',
102
+ // buildPath: `dist/compose/${theme}/`,
103
+ // files: [
104
+ // {
105
+ // destination: 'StyleDictionaryColor.kt',
106
+ // format: 'compose/object',
107
+ // className: 'StyleDictionaryColor',
108
+ // packageName: 'StyleDictionaryColor',
109
+ // filter: {
110
+ // attributes: {
111
+ // category: 'color',
112
+ // },
113
+ // },
114
+ // },
115
+ // {
116
+ // destination: 'StyleDictionarySize.kt',
117
+ // format: 'compose/object',
118
+ // className: 'StyleDictionarySize',
119
+ // packageName: 'StyleDictionarySize',
120
+ // type: 'float',
121
+ // filter: {
122
+ // attributes: {
123
+ // category: 'size',
124
+ // },
125
+ // },
126
+ // },
127
+ // ],
128
+ // },
129
+ // ios: {
130
+ // transformGroup: 'ios',
131
+ // buildPath: `dist/ios/${theme}/`,
132
+ // files: [
133
+ // {
134
+ // destination: 'StyleDictionaryColor.h',
135
+ // format: 'ios/colors.h',
136
+ // className: 'StyleDictionaryColor',
137
+ // type: 'StyleDictionaryColorName',
138
+ // filter: {
139
+ // attributes: {
140
+ // category: 'color',
141
+ // },
142
+ // },
143
+ // },
144
+ // {
145
+ // destination: 'StyleDictionaryColor.m',
146
+ // format: 'ios/colors.m',
147
+ // className: 'StyleDictionaryColor',
148
+ // type: 'StyleDictionaryColorName',
149
+ // filter: {
150
+ // attributes: {
151
+ // category: 'color',
152
+ // },
153
+ // },
154
+ // },
155
+ // {getStyleDictionaryConfig
156
+ // destination: 'StyleDictionarySize.h',
157
+ // format: 'ios/static.h',
158
+ // className: 'StyleDictionarySize',
159
+ // type: 'float',
160
+ // filter: {
161
+ // attributes: {
162
+ // category: 'size',
163
+ // },
164
+ // },
165
+ // },
166
+ // {
167
+ // destination: 'StyleDictionarySize.m',
168
+ // format: 'ios/static.m',
169
+ // className: 'StyleDictionarySize',
170
+ // type: 'float',
171
+ // filter: {
172
+ // attributes: {
173
+ // category: 'size',
174
+ // },
175
+ // },
176
+ // },
177
+ // ],
178
+ // },
179
+ // 'ios-swift': {
180
+ // transformGroup: 'ios-swift',
181
+ // buildPath: `dist/ios-swift/${theme}/`,
182
+ // files: [
183
+ // {
184
+ // destination: 'StyleDictionary.swift',
185
+ // format: 'ios-swift/class.swift',
186
+ // className: 'StyleDictionary',
187
+ // filter: {},
188
+ // },
189
+ // ],
190
+ // },
191
+ // 'ios-swift-separate-enums': {
192
+ // transformGroup: 'ios-swift-separate',
193
+ // buildPath: `dist/ios-swift/${theme}/`,
194
+ // files: [
195
+ // {
196
+ // destination: 'StyleDictionaryColor.swift',
197
+ // format: 'ios-swift/enum.swift',
198
+ // className: 'StyleDictionaryColor',
199
+ // filter: {
200
+ // attributes: {
201
+ // category: 'color',
202
+ // },
203
+ // },
204
+ // },
205
+ // {
206
+ // destination: 'StyleDictionarySize.swift',
207
+ // format: 'ios-swift/enum.swift',
208
+ // className: 'StyleDictionarySize',
209
+ // type: 'float',
210
+ // filter: {
211
+ // attributes: {
212
+ // category: 'size',
213
+ // },
214
+ // },
215
+ // },
216
+ // ],
217
+ // },
218
+ },
219
+ });
220
+
221
+ console.log("get style dictionary config");
222
+
223
+ export { getStyleDictionaryConfig };
package/lib/get-themes.js ADDED
@@ -0,0 +1,10 @@
1
+ import { readdirSync } from "node:fs";
2
+
3
+ /**
4
+ * Helper functions to get a list of supported brands.
5
+ *
6
+ * @return {string[]} List of brands found in the tokens/brands folder
7
+ */
8
+ const getThemes = () => readdirSync("./tokens/themes");
9
+
10
+ export { getThemes };
package/lib/index.js ADDED
@@ -0,0 +1,3 @@
1
+ export * from "./color-generator.js";
2
+ export * from "./get-themes.js";
3
+ export * from "./get-style-dictionary-config.js";
package/package.json CHANGED
@@ -1,30 +1,59 @@
1
1
  {
2
- "name": "@grantcodes/style-dictionary",
3
- "version": "1.0.0",
4
- "description": "My personal style dictionary",
5
- "main": "./build/js/default/style-dictionary.js",
6
- "exports": {
7
- "./default/js": "./build/js/default/style-dictionary.js",
8
- "./default/css": "./build/css/default/style-dictionary.css",
9
- "./default/scss": "./build/scss/default/style-dictionary.scss",
10
- "./todomap/js": "./build/js/todomap/style-dictionary.js",
11
- "./todomap/css": "./build/css/todomap/style-dictionary.css",
12
- "./todomap/scss": "./build/scss/todomap/style-dictionary.scss"
13
- },
14
- "scripts": {
15
- "build": "node ./build.js",
16
- "clean": "rm -rf build",
17
- "prepublishOnly": "npm run clean && npm run build",
18
- "test": "echo \"Error: no test specified\" && exit 1"
19
- },
20
- "author": {
21
- "email": "mail@grant.codes",
22
- "name": "Grant Richmond",
23
- "url": "https://grant.codes"
24
- },
25
- "license": "MIT",
26
- "devDependencies": {
27
- "@grantcodes/commit": "^1.0.7",
28
- "style-dictionary": "^3.1.1"
29
- }
2
+ "name": "@grantcodes/style-dictionary",
3
+ "version": "1.2.0",
4
+ "type": "module",
5
+ "description": "My personal style dictionary",
6
+ "main": "./dist/js/default/style-dictionary.js",
7
+ "exports": {
8
+ "./wireframe/css": "./dist/css/wireframe/tokens.css",
9
+ "./wireframe/js": "./dist/js/wireframe/style-dictionary.js",
10
+ "./wireframe/json": "./dist/json/wireframe/tokens.json",
11
+ "./grantcodes/css": "./dist/css/grantcodes/tokens.css",
12
+ "./grantcodes/js": "./dist/js/grantcodes/style-dictionary.js",
13
+ "./grantcodes/json": "./dist/json/grantcodes/tokens.json",
14
+ "./todomap/css": "./dist/css/todomap/tokens.css",
15
+ "./todomap/js": "./dist/js/todomap/style-dictionary.js",
16
+ "./todomap/json": "./dist/json/todomap/tokens.json",
17
+ "./assets/fonts/greycliff": "./assets/fonts/greycliff.css",
18
+ "./assets/fonts/quicksand": "./assets/fonts/quicksand.css"
19
+ },
20
+ "types": {
21
+ "./wireframe/js": "./dist/js/wireframe/style-dictionary.d.ts",
22
+ "./grantcodes/js": "./dist/js/grantcodes/style-dictionary.d.ts",
23
+ "./todomap/js": "./dist/js/todomap/style-dictionary.d.ts"
24
+ },
25
+ "scripts": {
26
+ "build": "node ./build.js",
27
+ "clean": "rm -rf dist",
28
+ "prepublishOnly": "npm run clean && npm run build",
29
+ "fix": "run-s fix:lint",
30
+ "fix:lint": "npx @biomejs/biome format --write tokens build.js",
31
+ "test": "run-s lint",
32
+ "lint": "npx @biomejs/biome lint tokens build.js lib",
33
+ "test:unit": "node --test"
34
+ },
35
+ "author": {
36
+ "email": "mail@grant.codes",
37
+ "name": "Grant Richmond",
38
+ "url": "https://grant.codes"
39
+ },
40
+ "repository": {
41
+ "type": "git",
42
+ "url": "git+https://github.com/grantcodes/style-dictionary.git"
43
+ },
44
+ "bugs": {
45
+ "url": "https://github.com/grantcodes/style-dictionary/issues"
46
+ },
47
+ "homepage": "https://github.com/grantcodes/style-dictionary#readme",
48
+ "license": "MIT",
49
+ "devDependencies": {
50
+ "@biomejs/biome": "2.1.1",
51
+ "@grantcodes/commit": "^2.0.0",
52
+ "minimist": "^1.2.8",
53
+ "npm-run-all": "^4.1.5",
54
+ "style-dictionary": "^5.0.1"
55
+ },
56
+ "dependencies": {
57
+ "colorjs.io": "^0.5.2"
58
+ }
30
59
  }
package/tests/tokens.test.js ADDED
@@ -0,0 +1,87 @@
1
+ import { describe, it } from "node:test";
2
+ import test from "node:test";
3
+ import assert from "node:assert";
4
+ import StyleDictionaryPackage from "style-dictionary";
5
+
6
+ import { TOKEN_TREE } from "../config.js";
7
+ import { getThemes, getStyleDictionaryConfig } from "../lib/index.js";
8
+
9
+ const getTokens = async () => {
10
+ const themes = getThemes();
11
+
12
+ const tokens = {};
13
+
14
+ for (const brand of brands) {
15
+ const config = getStyleDictionaryConfig(brand);
16
+ const dictionary = new StyleDictionaryPackage(config);
17
+ const brandTokens = await dictionary.getPlatformTokens("css");
18
+
19
+ tokens[brand] = brandTokens.allTokens;
20
+ }
21
+
22
+ return tokens;
23
+ };
24
+
25
+ const tokens = await getTokens();
26
+
27
+ describe("Token formatting", () => {
28
+ it("Should have multiple tokens", () => {
29
+ for (const brandTokens of Object.values(tokens)) {
30
+ assert.ok(Object.keys(brandTokens).length > 1);
31
+ }
32
+ });
33
+
34
+ it("Should be prefixed", () => {
35
+ if (SYSTEM) {
36
+ for (const brandTokens of Object.values(tokens)) {
37
+ const tokenNames = brandTokens.map((token) => token.name);
38
+ for (const tokenName of tokenNames) {
39
+ assert.ok(tokenName.startsWith(`${SYSTEM}-`));
40
+ }
41
+ }
42
+ }
43
+ });
44
+
45
+ it("Should have a category", () => {
46
+ for (const brandTokens of Object.values(tokens)) {
47
+ for (const token of brandTokens) {
48
+ assert.ok(
49
+ TOKEN_LEVELS.category.includes(token?.attributes?.category),
50
+ `The token ${token.name} has the category ${token?.attributes?.category} which is not in the defined categories (${TOKEN_LEVELS.category.join(", ")}).`,
51
+ );
52
+ }
53
+ }
54
+ });
55
+
56
+ it("Should have a valid css value", () => {
57
+ for (const brandTokens of Object.values(tokens)) {
58
+ for (const token of brandTokens) {
59
+ const tokenType = typeof token.value;
60
+
61
+ assert.ok(
62
+ ["string", "number"].includes(tokenType),
63
+ `The token ${token.name} has an invalid type (${tokenType}).`,
64
+ );
65
+ }
66
+ }
67
+ });
68
+
69
+ // it("Should have valid references", () => {
70
+ // for (const brandTokens of Object.values(tokens)) {
71
+ // for (const token of brandTokens) {
72
+ // if (token?.original?.value?.includes?.("{")) {
73
+ // const references = token.original.value
74
+ // .replace(/{/g, "")
75
+ // .replace(/}/g, "")
76
+ // .trim()
77
+ // .split(", ");
78
+ // console.log(reference);
79
+ // // assert.ok(
80
+ // // brandTokens.find((t) => t.name === token.attributes.reference),
81
+ // // `The token ${token.name} references a token that does not exist (${token.attributes.reference}).`,
82
+ // // );
83
+ // }
84
+ // }
85
+ // }
86
+ // });
87
+ });