@digdir/designsystemet 1.13.2 → 1.13.3

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 (74) hide show
  1. package/dist/bin/config.js +50 -658
  2. package/dist/bin/designsystemet.js +131 -4623
  3. package/dist/bin/options.js +22 -14
  4. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js +9 -0
  5. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js +8 -0
  6. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js +13 -0
  7. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js +10 -0
  8. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js +10 -0
  9. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js +53 -0
  10. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js +14 -0
  11. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js +9 -0
  12. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js +32 -0
  13. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js +15 -0
  14. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/index.js +11 -0
  15. package/dist/package.js +5 -0
  16. package/dist/src/colors/colorMetadata.js +255 -261
  17. package/dist/src/colors/index.js +5 -522
  18. package/dist/src/colors/theme.js +104 -343
  19. package/dist/src/colors/types.js +22 -25
  20. package/dist/src/colors/utils.js +241 -154
  21. package/dist/src/config.js +103 -444
  22. package/dist/src/index.js +10 -3588
  23. package/dist/src/migrations/beta-to-v1.js +339 -537
  24. package/dist/src/migrations/codemods/css/plugins.js +31 -42
  25. package/dist/src/migrations/codemods/css/run.js +20 -151
  26. package/dist/src/migrations/color-rename-next49.js +44 -220
  27. package/dist/src/migrations/index.js +7 -577
  28. package/dist/src/tokens/build.js +39 -1816
  29. package/dist/src/tokens/create/files.js +43 -602
  30. package/dist/src/tokens/create/generators/$designsystemet.js +8 -97
  31. package/dist/src/tokens/create/generators/$metadata.js +17 -20
  32. package/dist/src/tokens/create/generators/$themes.js +137 -311
  33. package/dist/src/tokens/create/generators/primitives/color-scheme.js +68 -443
  34. package/dist/src/tokens/create/generators/primitives/globals.js +141 -147
  35. package/dist/src/tokens/create/generators/primitives/size.js +146 -156
  36. package/dist/src/tokens/create/generators/primitives/typography.js +213 -217
  37. package/dist/src/tokens/create/generators/semantic/color-modes.js +24 -59
  38. package/dist/src/tokens/create/generators/semantic/color.js +42 -326
  39. package/dist/src/tokens/create/generators/semantic/style.js +379 -382
  40. package/dist/src/tokens/create/generators/themes/theme.js +108 -392
  41. package/dist/src/tokens/create.js +47 -1591
  42. package/dist/src/tokens/format.js +38 -3324
  43. package/dist/src/tokens/generate-config.js +155 -298
  44. package/dist/src/tokens/index.js +3 -3344
  45. package/dist/src/tokens/process/configs/color.js +50 -1085
  46. package/dist/src/tokens/process/configs/semantic.js +45 -1083
  47. package/dist/src/tokens/process/configs/shared.js +18 -109
  48. package/dist/src/tokens/process/configs/size-mode.js +27 -1082
  49. package/dist/src/tokens/process/configs/size.js +32 -1083
  50. package/dist/src/tokens/process/configs/type-scale.js +49 -1083
  51. package/dist/src/tokens/process/configs/typography.js +63 -1084
  52. package/dist/src/tokens/process/configs.js +88 -1224
  53. package/dist/src/tokens/process/formats/css/color.js +58 -1079
  54. package/dist/src/tokens/process/formats/css/semantic.js +27 -1081
  55. package/dist/src/tokens/process/formats/css/size-mode.js +43 -1077
  56. package/dist/src/tokens/process/formats/css/size.js +86 -1079
  57. package/dist/src/tokens/process/formats/css/type-scale.js +53 -1083
  58. package/dist/src/tokens/process/formats/css/typography.js +27 -1081
  59. package/dist/src/tokens/process/formats/css.js +18 -1081
  60. package/dist/src/tokens/process/output/declarations.js +18 -1201
  61. package/dist/src/tokens/process/output/tailwind.js +26 -40
  62. package/dist/src/tokens/process/output/theme.js +73 -206
  63. package/dist/src/tokens/process/platform.js +165 -1355
  64. package/dist/src/tokens/process/transformers.js +49 -89
  65. package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +100 -1183
  66. package/dist/src/tokens/process/utils/kebab-case.js +7 -5
  67. package/dist/src/tokens/types.js +6 -7
  68. package/dist/src/tokens/utils.js +102 -93
  69. package/dist/src/types.js +1 -5
  70. package/dist/src/utils/filesystem.js +112 -124
  71. package/package.json +10 -13
  72. package/configs/test-tokens.config.json +0 -82
  73. package/dist/src/scripts/createJsonSchema.js +0 -409
  74. package/dist/src/scripts/update-preview-tokens.js +0 -3353
@@ -1,99 +1,10 @@
1
- // package.json
2
- var package_default = {
3
- name: "@digdir/designsystemet",
4
- version: "1.13.2",
5
- description: "CLI for Designsystemet",
6
- author: "Designsystemet team",
7
- engines: {
8
- node: ">=20.20.2"
9
- },
10
- repository: {
11
- type: "git",
12
- url: "git+https://github.com/digdir/designsystemet.git"
13
- },
14
- homepage: "https://github.com/digdir/designsystemet/tree/main/packages/cli",
15
- license: "MIT",
16
- type: "module",
17
- main: "./dist/src/index.js",
18
- files: [
19
- "./dist/**",
20
- "./configs/**"
21
- ],
22
- bin: "dist/bin/designsystemet.js",
23
- exports: {
24
- ".": {
25
- import: "./dist/src/index.js"
26
- },
27
- "./color": {
28
- import: "./dist/src/colors/index.js"
29
- },
30
- "./tokens": {
31
- import: "./dist/src/tokens/index.js"
32
- },
33
- "./types": {
34
- import: "./dist/src/types.js"
35
- }
36
- },
37
- publishConfig: {
38
- access: "public"
39
- },
40
- scripts: {
41
- designsystemet: "tsx ./bin/designsystemet.ts",
42
- "designsystemet:inspect": "tsx --inspect-brk ./bin/designsystemet.ts",
43
- build: "tsup && pnpm build:types && pnpm build:json-schema",
44
- "build:types": "tsc --emitDeclarationOnly --declaration",
45
- "build:json-schema": "tsx ./src/scripts/createJsonSchema.ts",
46
- types: "tsc --noEmit",
47
- "test:tokens-create-options": 'pnpm run designsystemet tokens create -m dominant:"#007682" -n "#003333" -b 99 -o ./temp/options/design-tokens --theme options --clean',
48
- "test:tokens-create-config": "pnpm run designsystemet tokens create --config ./configs/test-tokens.config.json",
49
- "test:tokens-build": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean",
50
- "test:tokens-build-tailwind": "pnpm run designsystemet tokens build -t ./temp/options/design-tokens -o ./temp/options/build --clean --experimental-tailwind",
51
- "test:tokens-build-config": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
52
- "test:tokens-build-config:inspect": "pnpm run designsystemet:inspect tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean",
53
- "test:tokens-build-config-tailwind": "pnpm run designsystemet tokens build -t ./temp/config/design-tokens -o ./temp/config/build --clean --experimental-tailwind",
54
- "test:tokens-create-and-build-options": "pnpm test:tokens-create-options && pnpm test:tokens-build",
55
- "test:tokens-create-and-build-config": "pnpm test:tokens-create-config && pnpm test:tokens-build-config",
56
- "test:generate-config-from-tokens": "pnpm run designsystemet generate-config-from-tokens -d ../../design-tokens --dry",
57
- test: "node -v && pnpm test:tokens-create-and-build-options && pnpm test:generate-config-from-tokens && pnpm test:tokens-create-and-build-config",
58
- "update:preview-tokens": "tsx ./src/scripts/update-preview-tokens.ts",
59
- verify: "pnpm test && pnpm update:template && pnpm --filter @internal/digdir update:theme-digdir"
60
- },
61
- dependencies: {
62
- "@commander-js/extra-typings": "^14.0.0",
63
- "@digdir/designsystemet-types": "workspace:",
64
- "@tokens-studio/sd-transforms": "2.0.3",
65
- "chroma-js": "^3.2.0",
66
- "colorjs.io": "^0.6.1",
67
- commander: "^14.0.3",
68
- "fast-glob": "^3.3.3",
69
- hsluv: "^1.0.1",
70
- "object-hash": "^3.0.0",
71
- picocolors: "^1.1.1",
72
- postcss: "^8.5.8",
73
- ramda: "^0.32.0",
74
- "style-dictionary": "^5.4.0",
75
- zod: "^4.3.6",
76
- "zod-validation-error": "^5.0.0"
77
- },
78
- devDependencies: {
79
- "@tokens-studio/types": "0.5.2",
80
- "@types/chroma-js": "3.1.2",
81
- "@types/node": "24.12.2",
82
- "@types/object-hash": "3.0.6",
83
- "@types/ramda": "0.31.1",
84
- tsup: "8.5.1",
85
- tsx: "4.21.0",
86
- typescript: "5.9.3"
87
- }
88
- };
89
-
90
- // src/tokens/create/generators/$designsystemet.ts
1
+ import { name, version } from "../../../../package.js";
2
+ //#region src/tokens/create/generators/$designsystemet.ts
91
3
  function generate$Designsystemet() {
92
- return {
93
- name: package_default.name,
94
- version: package_default.version
95
- };
4
+ return {
5
+ name,
6
+ version
7
+ };
96
8
  }
97
- export {
98
- generate$Designsystemet
99
- };
9
+ //#endregion
10
+ export { generate$Designsystemet };
@@ -1,22 +1,19 @@
1
- // src/tokens/create/generators/$metadata.ts
1
+ //#region src/tokens/create/generators/$metadata.ts
2
2
  function generate$Metadata(schemes, themes, colors, sizeModes) {
3
- return {
4
- tokenSetOrder: [
5
- "primitives/globals",
6
- ...sizeModes.map((size) => `primitives/modes/size/${size}`),
7
- "primitives/modes/size/global",
8
- ...sizeModes.map((size) => `primitives/modes/typography/size/${size}`),
9
- ...themes.map((theme) => `primitives/modes/typography/primary/${theme}`),
10
- ...themes.map((theme) => `primitives/modes/typography/secondary/${theme}`),
11
- ...schemes.flatMap((scheme) => [...themes.map((theme) => `primitives/modes/color-scheme/${scheme}/${theme}`)]),
12
- ...themes.map((theme) => `themes/${theme}`),
13
- "semantic/color",
14
- ...Object.entries(colors.main).map(([color]) => `semantic/modes/main-color/${color}`),
15
- ...Object.entries(colors.support).map(([color]) => `semantic/modes/support-color/${color}`),
16
- "semantic/style"
17
- ]
18
- };
3
+ return { tokenSetOrder: [
4
+ "primitives/globals",
5
+ ...sizeModes.map((size) => `primitives/modes/size/${size}`),
6
+ "primitives/modes/size/global",
7
+ ...sizeModes.map((size) => `primitives/modes/typography/size/${size}`),
8
+ ...themes.map((theme) => `primitives/modes/typography/primary/${theme}`),
9
+ ...themes.map((theme) => `primitives/modes/typography/secondary/${theme}`),
10
+ ...schemes.flatMap((scheme) => [...themes.map((theme) => `primitives/modes/color-scheme/${scheme}/${theme}`)]),
11
+ ...themes.map((theme) => `themes/${theme}`),
12
+ "semantic/color",
13
+ ...Object.entries(colors.main).map(([color]) => `semantic/modes/main-color/${color}`),
14
+ ...Object.entries(colors.support).map(([color]) => `semantic/modes/support-color/${color}`),
15
+ "semantic/style"
16
+ ] };
19
17
  }
20
- export {
21
- generate$Metadata
22
- };
18
+ //#endregion
19
+ export { generate$Metadata };
@@ -1,332 +1,158 @@
1
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js
2
- var BoxShadowTypes;
3
- (function(BoxShadowTypes2) {
4
- BoxShadowTypes2["DROP_SHADOW"] = "dropShadow";
5
- BoxShadowTypes2["INNER_SHADOW"] = "innerShadow";
6
- })(BoxShadowTypes || (BoxShadowTypes = {}));
7
-
8
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js
9
- var ColorModifierTypes;
10
- (function(ColorModifierTypes2) {
11
- ColorModifierTypes2["LIGHTEN"] = "lighten";
12
- ColorModifierTypes2["DARKEN"] = "darken";
13
- ColorModifierTypes2["MIX"] = "mix";
14
- ColorModifierTypes2["ALPHA"] = "alpha";
15
- })(ColorModifierTypes || (ColorModifierTypes = {}));
16
-
17
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js
18
- var ColorSpaceTypes;
19
- (function(ColorSpaceTypes2) {
20
- ColorSpaceTypes2["LCH"] = "lch";
21
- ColorSpaceTypes2["SRGB"] = "srgb";
22
- ColorSpaceTypes2["P3"] = "p3";
23
- ColorSpaceTypes2["HSL"] = "hsl";
24
- })(ColorSpaceTypes || (ColorSpaceTypes = {}));
25
-
26
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js
27
- var Properties;
28
- (function(Properties2) {
29
- Properties2["sizing"] = "sizing";
30
- Properties2["height"] = "height";
31
- Properties2["width"] = "width";
32
- Properties2["spacing"] = "spacing";
33
- Properties2["verticalPadding"] = "verticalPadding";
34
- Properties2["horizontalPadding"] = "horizontalPadding";
35
- Properties2["paddingTop"] = "paddingTop";
36
- Properties2["paddingRight"] = "paddingRight";
37
- Properties2["paddingBottom"] = "paddingBottom";
38
- Properties2["paddingLeft"] = "paddingLeft";
39
- Properties2["itemSpacing"] = "itemSpacing";
40
- Properties2["fill"] = "fill";
41
- Properties2["backgroundBlur"] = "backgroundBlur";
42
- Properties2["border"] = "border";
43
- Properties2["borderTop"] = "borderTop";
44
- Properties2["borderRight"] = "borderRight";
45
- Properties2["borderBottom"] = "borderBottom";
46
- Properties2["borderLeft"] = "borderLeft";
47
- Properties2["borderColor"] = "borderColor";
48
- Properties2["borderRadius"] = "borderRadius";
49
- Properties2["borderRadiusTopLeft"] = "borderRadiusTopLeft";
50
- Properties2["borderRadiusTopRight"] = "borderRadiusTopRight";
51
- Properties2["borderRadiusBottomRight"] = "borderRadiusBottomRight";
52
- Properties2["borderRadiusBottomLeft"] = "borderRadiusBottomLeft";
53
- Properties2["borderWidth"] = "borderWidth";
54
- Properties2["borderWidthTop"] = "borderWidthTop";
55
- Properties2["borderWidthRight"] = "borderWidthRight";
56
- Properties2["borderWidthBottom"] = "borderWidthBottom";
57
- Properties2["borderWidthLeft"] = "borderWidthLeft";
58
- Properties2["boxShadow"] = "boxShadow";
59
- Properties2["opacity"] = "opacity";
60
- Properties2["fontFamilies"] = "fontFamilies";
61
- Properties2["fontWeights"] = "fontWeights";
62
- Properties2["fontSizes"] = "fontSizes";
63
- Properties2["lineHeights"] = "lineHeights";
64
- Properties2["typography"] = "typography";
65
- Properties2["composition"] = "composition";
66
- Properties2["letterSpacing"] = "letterSpacing";
67
- Properties2["paragraphSpacing"] = "paragraphSpacing";
68
- Properties2["textCase"] = "textCase";
69
- Properties2["dimension"] = "dimension";
70
- Properties2["textDecoration"] = "textDecoration";
71
- Properties2["asset"] = "asset";
72
- Properties2["tokenValue"] = "tokenValue";
73
- Properties2["value"] = "value";
74
- Properties2["tokenName"] = "tokenName";
75
- Properties2["description"] = "description";
76
- })(Properties || (Properties = {}));
77
-
78
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js
79
- var TokenSetStatus;
80
- (function(TokenSetStatus2) {
81
- TokenSetStatus2["DISABLED"] = "disabled";
82
- TokenSetStatus2["SOURCE"] = "source";
83
- TokenSetStatus2["ENABLED"] = "enabled";
84
- })(TokenSetStatus || (TokenSetStatus = {}));
1
+ import { TokenSetStatus } from "../../../../node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js";
2
+ import "../../../../node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/index.js";
3
+ //#region src/tokens/create/generators/$themes.ts
4
+ const capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
5
+ async function createHash(text, algo = "SHA-1") {
6
+ const crypto = globalThis.crypto;
7
+ return Array.from(new Uint8Array(await crypto.subtle.digest(algo, new TextEncoder().encode(text))), (byte) => byte.toString(16).padStart(2, "0")).join("");
8
+ }
9
+ /**
85
10
 
86
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js
87
- var TokenTypes;
88
- (function(TokenTypes2) {
89
- TokenTypes2["OTHER"] = "other";
90
- TokenTypes2["COLOR"] = "color";
91
- TokenTypes2["BORDER_RADIUS"] = "borderRadius";
92
- TokenTypes2["SIZING"] = "sizing";
93
- TokenTypes2["SPACING"] = "spacing";
94
- TokenTypes2["TEXT"] = "text";
95
- TokenTypes2["TYPOGRAPHY"] = "typography";
96
- TokenTypes2["OPACITY"] = "opacity";
97
- TokenTypes2["BORDER_WIDTH"] = "borderWidth";
98
- TokenTypes2["STROKE_STYLE"] = "strokeStyle";
99
- TokenTypes2["BOX_SHADOW"] = "boxShadow";
100
- TokenTypes2["FONT_FAMILIES"] = "fontFamilies";
101
- TokenTypes2["FONT_WEIGHTS"] = "fontWeights";
102
- TokenTypes2["LINE_HEIGHTS"] = "lineHeights";
103
- TokenTypes2["FONT_SIZES"] = "fontSizes";
104
- TokenTypes2["LETTER_SPACING"] = "letterSpacing";
105
- TokenTypes2["PARAGRAPH_SPACING"] = "paragraphSpacing";
106
- TokenTypes2["PARAGRAPH_INDENT"] = "paragraphIndent";
107
- TokenTypes2["TEXT_DECORATION"] = "textDecoration";
108
- TokenTypes2["TEXT_CASE"] = "textCase";
109
- TokenTypes2["COMPOSITION"] = "composition";
110
- TokenTypes2["DIMENSION"] = "dimension";
111
- TokenTypes2["BORDER"] = "border";
112
- TokenTypes2["ASSET"] = "asset";
113
- TokenTypes2["BOOLEAN"] = "boolean";
114
- TokenTypes2["NUMBER"] = "number";
115
- })(TokenTypes || (TokenTypes = {}));
11
+ * Generates the `$themes.json` file which is used by Token Studio to update Figma variable collections and modes.
116
12
 
117
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js
118
- var BorderValues;
119
- (function(BorderValues2) {
120
- BorderValues2["BORDER_COLOR"] = "color";
121
- BorderValues2["BORDER_WIDTH"] = "width";
122
- BorderValues2["BORDER_STYLE"] = "style";
123
- })(BorderValues || (BorderValues = {}));
13
+ * **IMPORTANT:**
124
14
 
125
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js
126
- var StrokeStyleValues;
127
- (function(StrokeStyleValues2) {
128
- StrokeStyleValues2["SOLID"] = "solid";
129
- StrokeStyleValues2["DASHED"] = "dashed";
130
- StrokeStyleValues2["DOTTED"] = "dotted";
131
- StrokeStyleValues2["DOUBLE"] = "double";
132
- StrokeStyleValues2["GROOVE"] = "groove";
133
- StrokeStyleValues2["RIDGE"] = "ridge";
134
- StrokeStyleValues2["OUTSET"] = "outset";
135
- StrokeStyleValues2["INSET"] = "inset";
136
- })(StrokeStyleValues || (StrokeStyleValues = {}));
15
+ * We use existing Figma variable ids to update existing collections/modes fetched from our published Figma community file.
137
16
 
138
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js
139
- var BoxShadowValues;
140
- (function(BoxShadowValues2) {
141
- BoxShadowValues2["TYPE"] = "type";
142
- BoxShadowValues2["COLOR"] = "color";
143
- BoxShadowValues2["X"] = "x";
144
- BoxShadowValues2["Y"] = "y";
145
- BoxShadowValues2["BLUR"] = "blur";
146
- BoxShadowValues2["SPREAD"] = "spread";
147
- BoxShadowValues2["BLEND_MODE"] = "blendMode";
148
- })(BoxShadowValues || (BoxShadowValues = {}));
17
+ * These are important for maintaining existing variables in user files when updating tokens.
149
18
 
150
- // ../../node_modules/.pnpm/@tokens-studio+types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js
151
- var TypographyValues;
152
- (function(TypographyValues2) {
153
- TypographyValues2["FONT_FAMILY"] = "fontFamily";
154
- TypographyValues2["FONT_WEIGHT"] = "fontWeight";
155
- TypographyValues2["LINE_HEIGHT"] = "lineHeight";
156
- TypographyValues2["FONT_SIZE"] = "fontSize";
157
- TypographyValues2["LETTER_SPACING"] = "letterSpacing";
158
- TypographyValues2["PARAGRAPH_SPACING"] = "paragraphSpacing";
159
- TypographyValues2["PARAGRAPH_INDENT"] = "paragraphIndent";
160
- TypographyValues2["TEXT_DECORATION"] = "textDecoration";
161
- TypographyValues2["TEXT_CASE"] = "textCase";
162
- })(TypographyValues || (TypographyValues = {}));
19
+ * Omitting these ids results will result in the following bugs:
20
+ - New collections/modes being created which may cause ghost variables in Figma.
21
+ - New collections/modes may cause users hitting the cap on Figma variable modes which is at time of writing 4 (or unlimited for enterprise).
163
22
 
164
- // src/tokens/create/generators/$themes.ts
165
- var capitalize = (word) => word.charAt(0).toUpperCase() + word.slice(1);
166
- async function createHash(text, algo = "SHA-1") {
167
- const crypto = globalThis.crypto;
168
- return Array.from(
169
- new Uint8Array(await crypto.subtle.digest(algo, new TextEncoder().encode(text))),
170
- (byte) => byte.toString(16).padStart(2, "0")
171
- ).join("");
172
- }
23
+ */
173
24
  async function generate$Themes(colorSchemes, themes, colors, sizeModes) {
174
- return [
175
- ...generateSizeGroup(sizeModes),
176
- ...await generateThemesGroup(themes),
177
- ...generateTypographyGroup(themes),
178
- ...generateColorSchemesGroup(colorSchemes, themes),
179
- generateSemanticGroup(),
180
- ...await generateColorGroup("main", colors),
181
- ...await generateColorGroup("support", colors)
182
- ];
25
+ return [
26
+ ...generateSizeGroup(sizeModes),
27
+ ...await generateThemesGroup(themes),
28
+ ...generateTypographyGroup(themes),
29
+ ...generateColorSchemesGroup(colorSchemes, themes),
30
+ generateSemanticGroup(),
31
+ ...await generateColorGroup("main", colors),
32
+ ...await generateColorGroup("support", colors)
33
+ ];
183
34
  }
184
35
  function generateSizeGroup(_sizes) {
185
- return [
186
- {
187
- id: "8b2c8cc86611a34b135cb22948666779361fd729",
188
- name: "medium",
189
- $figmaStyleReferences: {},
190
- selectedTokenSets: {
191
- "primitives/modes/size/medium": TokenSetStatus.SOURCE,
192
- "primitives/modes/size/global": TokenSetStatus.ENABLED,
193
- "primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
194
- },
195
- $figmaCollectionId: "VariableCollectionId:36248:20757",
196
- $figmaModeId: "41630:1",
197
- group: "Size"
198
- },
199
- {
200
- id: "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
201
- name: "large",
202
- $figmaStyleReferences: {},
203
- selectedTokenSets: {
204
- "primitives/modes/size/large": TokenSetStatus.SOURCE,
205
- "primitives/modes/size/global": TokenSetStatus.ENABLED,
206
- "primitives/modes/typography/size/large": TokenSetStatus.ENABLED
207
- },
208
- $figmaCollectionId: "VariableCollectionId:36248:20757",
209
- $figmaModeId: "41630:2",
210
- group: "Size"
211
- },
212
- {
213
- id: "fb11567729c298ca37c9da4e3a27716a23480824",
214
- name: "small",
215
- $figmaStyleReferences: {},
216
- selectedTokenSets: {
217
- "primitives/modes/size/small": TokenSetStatus.SOURCE,
218
- "primitives/modes/size/global": TokenSetStatus.ENABLED,
219
- "primitives/modes/typography/size/small": TokenSetStatus.ENABLED
220
- },
221
- $figmaCollectionId: "VariableCollectionId:36248:20757",
222
- $figmaModeId: "41630:3",
223
- group: "Size"
224
- }
225
- ];
36
+ return [
37
+ {
38
+ id: "8b2c8cc86611a34b135cb22948666779361fd729",
39
+ name: "medium",
40
+ $figmaStyleReferences: {},
41
+ selectedTokenSets: {
42
+ "primitives/modes/size/medium": TokenSetStatus.SOURCE,
43
+ "primitives/modes/size/global": TokenSetStatus.ENABLED,
44
+ "primitives/modes/typography/size/medium": TokenSetStatus.ENABLED
45
+ },
46
+ $figmaCollectionId: "VariableCollectionId:36248:20757",
47
+ $figmaModeId: "41630:1",
48
+ group: "Size"
49
+ },
50
+ {
51
+ id: "d49b9eebeb48a4f165a74b7261733d0a73370f0e",
52
+ name: "large",
53
+ $figmaStyleReferences: {},
54
+ selectedTokenSets: {
55
+ "primitives/modes/size/large": TokenSetStatus.SOURCE,
56
+ "primitives/modes/size/global": TokenSetStatus.ENABLED,
57
+ "primitives/modes/typography/size/large": TokenSetStatus.ENABLED
58
+ },
59
+ $figmaCollectionId: "VariableCollectionId:36248:20757",
60
+ $figmaModeId: "41630:2",
61
+ group: "Size"
62
+ },
63
+ {
64
+ id: "fb11567729c298ca37c9da4e3a27716a23480824",
65
+ name: "small",
66
+ $figmaStyleReferences: {},
67
+ selectedTokenSets: {
68
+ "primitives/modes/size/small": TokenSetStatus.SOURCE,
69
+ "primitives/modes/size/global": TokenSetStatus.ENABLED,
70
+ "primitives/modes/typography/size/small": TokenSetStatus.ENABLED
71
+ },
72
+ $figmaCollectionId: "VariableCollectionId:36248:20757",
73
+ $figmaModeId: "41630:3",
74
+ group: "Size"
75
+ }
76
+ ];
226
77
  }
227
- var colorSchemeDefaults = {
228
- light: {
229
- name: "Light",
230
- selectedTokenSets: {},
231
- id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
232
- $figmaCollectionId: "VariableCollectionId:34811:5472",
233
- $figmaModeId: "34811:0"
234
- },
235
- dark: {
236
- name: "Dark",
237
- selectedTokenSets: {},
238
- id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
239
- $figmaCollectionId: "VariableCollectionId:34811:5472",
240
- $figmaModeId: "34811:1"
241
- },
242
- contrast: {
243
- name: "Contrast",
244
- selectedTokenSets: {},
245
- id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
246
- $figmaCollectionId: "VariableCollectionId:34811:5472",
247
- $figmaModeId: "34811:2"
248
- }
78
+ const colorSchemeDefaults = {
79
+ light: {
80
+ name: "Light",
81
+ selectedTokenSets: {},
82
+ id: "0daa3ca0b427b9349da7e7dc00101b5668972926",
83
+ $figmaCollectionId: "VariableCollectionId:34811:5472",
84
+ $figmaModeId: "34811:0"
85
+ },
86
+ dark: {
87
+ name: "Dark",
88
+ selectedTokenSets: {},
89
+ id: "9ebd8aed52afbffc17e2666e8b4653a53498b257",
90
+ $figmaCollectionId: "VariableCollectionId:34811:5472",
91
+ $figmaModeId: "34811:1"
92
+ },
93
+ contrast: {
94
+ name: "Contrast",
95
+ selectedTokenSets: {},
96
+ id: "9ebd8aed52afbffc17e2666e8b4653a53498b123",
97
+ $figmaCollectionId: "VariableCollectionId:34811:5472",
98
+ $figmaModeId: "34811:2"
99
+ }
249
100
  };
250
101
  function generateColorSchemesGroup(colorSchemes, themes) {
251
- return colorSchemes.map(
252
- (scheme) => ({
253
- ...colorSchemeDefaults[scheme],
254
- selectedTokenSets: Object.fromEntries([
255
- ...themes.map((theme) => [`primitives/modes/color-scheme/${scheme}/${theme}`, TokenSetStatus.ENABLED])
256
- ]),
257
- group: "Color scheme"
258
- })
259
- );
102
+ return colorSchemes.map((scheme) => ({
103
+ ...colorSchemeDefaults[scheme],
104
+ selectedTokenSets: Object.fromEntries([...themes.map((theme) => [`primitives/modes/color-scheme/${scheme}/${theme}`, TokenSetStatus.ENABLED])]),
105
+ group: "Color scheme"
106
+ }));
260
107
  }
261
108
  async function generateThemesGroup(themes) {
262
- return Promise.all(
263
- themes.map(
264
- async (theme, index) => ({
265
- id: await createHash(theme),
266
- $figmaCollectionId: "VariableCollectionId:36528:61712",
267
- $figmaModeId: `40960:${index + 6}`,
268
- // Start on 6 in Token Studio and Community file for some reason
269
- name: theme,
270
- selectedTokenSets: {
271
- [`themes/${theme}`]: TokenSetStatus.ENABLED
272
- },
273
- group: "Theme"
274
- })
275
- )
276
- );
109
+ return Promise.all(themes.map(async (theme, index) => ({
110
+ id: await createHash(theme),
111
+ $figmaCollectionId: "VariableCollectionId:36528:61712",
112
+ $figmaModeId: `40960:${index + 6}`,
113
+ name: theme,
114
+ selectedTokenSets: { [`themes/${theme}`]: TokenSetStatus.ENABLED },
115
+ group: "Theme"
116
+ })));
277
117
  }
278
118
  function generateSemanticGroup() {
279
- return {
280
- id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
281
- name: "Semantic",
282
- selectedTokenSets: {
283
- "semantic/style": TokenSetStatus.ENABLED,
284
- "semantic/color": TokenSetStatus.ENABLED,
285
- "primitives/globals": TokenSetStatus.SOURCE
286
- },
287
- $figmaCollectionId: "VariableCollectionId:34811:5976",
288
- $figmaModeId: "34811:5",
289
- group: "Semantic"
290
- };
119
+ return {
120
+ id: "541629445ef90ad5363f9e88f52a1ccb617e6f84",
121
+ name: "Semantic",
122
+ selectedTokenSets: {
123
+ "semantic/style": TokenSetStatus.ENABLED,
124
+ "semantic/color": TokenSetStatus.ENABLED,
125
+ "primitives/globals": TokenSetStatus.SOURCE
126
+ },
127
+ $figmaCollectionId: "VariableCollectionId:34811:5976",
128
+ $figmaModeId: "34811:5",
129
+ group: "Semantic"
130
+ };
291
131
  }
292
132
  async function generateColorGroup(group, colors) {
293
- return Promise.all(
294
- Object.entries(colors[group]).map(
295
- async ([color]) => ({
296
- id: await createHash(`${group}-${color}`),
297
- name: color,
298
- selectedTokenSets: {
299
- [`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED
300
- },
301
- group: `${capitalize(group)} color`
302
- })
303
- )
304
- );
133
+ return Promise.all(Object.entries(colors[group]).map(async ([color]) => ({
134
+ id: await createHash(`${group}-${color}`),
135
+ name: color,
136
+ selectedTokenSets: { [`semantic/modes/${group}-color/${color}`]: TokenSetStatus.ENABLED },
137
+ group: `${capitalize(group)} color`
138
+ })));
305
139
  }
306
140
  function generateTypographyGroup(themes) {
307
- return [
308
- {
309
- id: "368d753fcac4455f289500eaa42e70dc0a03522f",
310
- $figmaCollectionId: "VariableCollectionId:36248:20769",
311
- $figmaModeId: "36248:2",
312
- name: "Primary",
313
- selectedTokenSets: Object.fromEntries(
314
- themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])
315
- ),
316
- group: "Typography"
317
- },
318
- {
319
- id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
320
- $figmaCollectionId: "VariableCollectionId:36248:20769",
321
- $figmaModeId: "36248:3",
322
- name: "Secondary",
323
- selectedTokenSets: Object.fromEntries(
324
- themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])
325
- ),
326
- group: "Typography"
327
- }
328
- ];
141
+ return [{
142
+ id: "368d753fcac4455f289500eaa42e70dc0a03522f",
143
+ $figmaCollectionId: "VariableCollectionId:36248:20769",
144
+ $figmaModeId: "36248:2",
145
+ name: "Primary",
146
+ selectedTokenSets: Object.fromEntries(themes.map((theme) => [`primitives/modes/typography/primary/${theme}`, TokenSetStatus.ENABLED])),
147
+ group: "Typography"
148
+ }, {
149
+ id: "264b8bd1d40b364e1ea3acf09e49795ddd4c513c",
150
+ $figmaCollectionId: "VariableCollectionId:36248:20769",
151
+ $figmaModeId: "36248:3",
152
+ name: "Secondary",
153
+ selectedTokenSets: Object.fromEntries(themes.map((theme) => [`primitives/modes/typography/secondary/${theme}`, TokenSetStatus.ENABLED])),
154
+ group: "Typography"
155
+ }];
329
156
  }
330
- export {
331
- generate$Themes
332
- };
157
+ //#endregion
158
+ export { generate$Themes };