@digdir/designsystemet 0.0.0-deps-tsdown-20260421103939

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 (195) hide show
  1. package/LICENSE +7 -0
  2. package/README.md +115 -0
  3. package/configs/test-tokens.config.json +82 -0
  4. package/dist/bin/config.d.ts +12 -0
  5. package/dist/bin/config.d.ts.map +1 -0
  6. package/dist/bin/config.js +58 -0
  7. package/dist/bin/designsystemet.d.ts +3 -0
  8. package/dist/bin/designsystemet.d.ts.map +1 -0
  9. package/dist/bin/designsystemet.js +156 -0
  10. package/dist/bin/options.d.ts +21 -0
  11. package/dist/bin/options.d.ts.map +1 -0
  12. package/dist/bin/options.js +23 -0
  13. package/dist/config.schema.json +209 -0
  14. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BorderValues.js +9 -0
  15. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowTypes.js +8 -0
  16. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/BoxShadowValues.js +13 -0
  17. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorModifierTypes.js +10 -0
  18. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/ColorSpaceTypes.js +10 -0
  19. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/Properties.js +53 -0
  20. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/StrokeStyleValues.js +14 -0
  21. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenSetStatus.js +9 -0
  22. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TokenTypes.js +32 -0
  23. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/constants/TypographyValues.js +15 -0
  24. package/dist/node_modules/.pnpm/@tokens-studio_types@0.5.2/node_modules/@tokens-studio/types/dist/types/index.js +11 -0
  25. package/dist/package.js +5 -0
  26. package/dist/src/colors/colorMetadata.d.ts +56 -0
  27. package/dist/src/colors/colorMetadata.d.ts.map +1 -0
  28. package/dist/src/colors/colorMetadata.js +259 -0
  29. package/dist/src/colors/index.d.ts +5 -0
  30. package/dist/src/colors/index.d.ts.map +1 -0
  31. package/dist/src/colors/index.js +5 -0
  32. package/dist/src/colors/theme.d.ts +30 -0
  33. package/dist/src/colors/theme.d.ts.map +1 -0
  34. package/dist/src/colors/theme.js +111 -0
  35. package/dist/src/colors/types.d.ts +69 -0
  36. package/dist/src/colors/types.d.ts.map +1 -0
  37. package/dist/src/colors/types.js +24 -0
  38. package/dist/src/colors/utils.d.ts +128 -0
  39. package/dist/src/colors/utils.d.ts.map +1 -0
  40. package/dist/src/colors/utils.js +244 -0
  41. package/dist/src/config.d.ts +181 -0
  42. package/dist/src/config.d.ts.map +1 -0
  43. package/dist/src/config.js +118 -0
  44. package/dist/src/index.d.ts +4 -0
  45. package/dist/src/index.d.ts.map +1 -0
  46. package/dist/src/index.js +10 -0
  47. package/dist/src/migrations/beta-to-v1.d.ts +3 -0
  48. package/dist/src/migrations/beta-to-v1.d.ts.map +1 -0
  49. package/dist/src/migrations/beta-to-v1.js +340 -0
  50. package/dist/src/migrations/codemods/css/plugins.d.ts +6 -0
  51. package/dist/src/migrations/codemods/css/plugins.d.ts.map +1 -0
  52. package/dist/src/migrations/codemods/css/plugins.js +35 -0
  53. package/dist/src/migrations/codemods/css/run.d.ts +8 -0
  54. package/dist/src/migrations/codemods/css/run.d.ts.map +1 -0
  55. package/dist/src/migrations/codemods/css/run.js +23 -0
  56. package/dist/src/migrations/color-rename-next49.d.ts +3 -0
  57. package/dist/src/migrations/color-rename-next49.d.ts.map +1 -0
  58. package/dist/src/migrations/color-rename-next49.js +46 -0
  59. package/dist/src/migrations/index.d.ts +6 -0
  60. package/dist/src/migrations/index.d.ts.map +1 -0
  61. package/dist/src/migrations/index.js +9 -0
  62. package/dist/src/scripts/createJsonSchema.d.ts +2 -0
  63. package/dist/src/scripts/createJsonSchema.d.ts.map +1 -0
  64. package/dist/src/scripts/update-preview-tokens.d.ts +3 -0
  65. package/dist/src/scripts/update-preview-tokens.d.ts.map +1 -0
  66. package/dist/src/tokens/build.d.ts +4 -0
  67. package/dist/src/tokens/build.d.ts.map +1 -0
  68. package/dist/src/tokens/build.js +41 -0
  69. package/dist/src/tokens/create/files.d.ts +11 -0
  70. package/dist/src/tokens/create/files.d.ts.map +1 -0
  71. package/dist/src/tokens/create/files.js +44 -0
  72. package/dist/src/tokens/create/generators/$designsystemet.d.ts +5 -0
  73. package/dist/src/tokens/create/generators/$designsystemet.d.ts.map +1 -0
  74. package/dist/src/tokens/create/generators/$designsystemet.js +10 -0
  75. package/dist/src/tokens/create/generators/$metadata.d.ts +8 -0
  76. package/dist/src/tokens/create/generators/$metadata.d.ts.map +1 -0
  77. package/dist/src/tokens/create/generators/$metadata.js +19 -0
  78. package/dist/src/tokens/create/generators/$themes.d.ts +27 -0
  79. package/dist/src/tokens/create/generators/$themes.d.ts.map +1 -0
  80. package/dist/src/tokens/create/generators/$themes.js +158 -0
  81. package/dist/src/tokens/create/generators/primitives/color-scheme.d.ts +5 -0
  82. package/dist/src/tokens/create/generators/primitives/color-scheme.d.ts.map +1 -0
  83. package/dist/src/tokens/create/generators/primitives/color-scheme.js +71 -0
  84. package/dist/src/tokens/create/generators/primitives/globals.d.ts +3 -0
  85. package/dist/src/tokens/create/generators/primitives/globals.d.ts.map +1 -0
  86. package/dist/src/tokens/create/generators/primitives/globals.js +142 -0
  87. package/dist/src/tokens/create/generators/primitives/size.d.ts +4 -0
  88. package/dist/src/tokens/create/generators/primitives/size.d.ts.map +1 -0
  89. package/dist/src/tokens/create/generators/primitives/size.js +147 -0
  90. package/dist/src/tokens/create/generators/primitives/typography.d.ts +4 -0
  91. package/dist/src/tokens/create/generators/primitives/typography.d.ts.map +1 -0
  92. package/dist/src/tokens/create/generators/primitives/typography.js +216 -0
  93. package/dist/src/tokens/create/generators/semantic/color-modes.d.ts +8 -0
  94. package/dist/src/tokens/create/generators/semantic/color-modes.d.ts.map +1 -0
  95. package/dist/src/tokens/create/generators/semantic/color-modes.js +26 -0
  96. package/dist/src/tokens/create/generators/semantic/color.d.ts +5 -0
  97. package/dist/src/tokens/create/generators/semantic/color.d.ts.map +1 -0
  98. package/dist/src/tokens/create/generators/semantic/color.js +46 -0
  99. package/dist/src/tokens/create/generators/semantic/style.d.ts +3 -0
  100. package/dist/src/tokens/create/generators/semantic/style.d.ts.map +1 -0
  101. package/dist/src/tokens/create/generators/semantic/style.js +381 -0
  102. package/dist/src/tokens/create/generators/themes/theme.d.ts +3 -0
  103. package/dist/src/tokens/create/generators/themes/theme.d.ts.map +1 -0
  104. package/dist/src/tokens/create/generators/themes/theme.js +112 -0
  105. package/dist/src/tokens/create.d.ts +21 -0
  106. package/dist/src/tokens/create.d.ts.map +1 -0
  107. package/dist/src/tokens/create.js +47 -0
  108. package/dist/src/tokens/format.d.ts +15 -0
  109. package/dist/src/tokens/format.d.ts.map +1 -0
  110. package/dist/src/tokens/format.js +41 -0
  111. package/dist/src/tokens/generate-config.d.ts +10 -0
  112. package/dist/src/tokens/generate-config.d.ts.map +1 -0
  113. package/dist/src/tokens/generate-config.js +178 -0
  114. package/dist/src/tokens/index.d.ts +4 -0
  115. package/dist/src/tokens/index.d.ts.map +1 -0
  116. package/dist/src/tokens/index.js +3 -0
  117. package/dist/src/tokens/process/configs/color.d.ts +12 -0
  118. package/dist/src/tokens/process/configs/color.d.ts.map +1 -0
  119. package/dist/src/tokens/process/configs/color.js +51 -0
  120. package/dist/src/tokens/process/configs/semantic.d.ts +3 -0
  121. package/dist/src/tokens/process/configs/semantic.d.ts.map +1 -0
  122. package/dist/src/tokens/process/configs/semantic.js +47 -0
  123. package/dist/src/tokens/process/configs/shared.d.ts +10 -0
  124. package/dist/src/tokens/process/configs/shared.d.ts.map +1 -0
  125. package/dist/src/tokens/process/configs/shared.js +19 -0
  126. package/dist/src/tokens/process/configs/size-mode.d.ts +3 -0
  127. package/dist/src/tokens/process/configs/size-mode.d.ts.map +1 -0
  128. package/dist/src/tokens/process/configs/size-mode.js +28 -0
  129. package/dist/src/tokens/process/configs/size.d.ts +3 -0
  130. package/dist/src/tokens/process/configs/size.d.ts.map +1 -0
  131. package/dist/src/tokens/process/configs/size.js +34 -0
  132. package/dist/src/tokens/process/configs/type-scale.d.ts +3 -0
  133. package/dist/src/tokens/process/configs/type-scale.d.ts.map +1 -0
  134. package/dist/src/tokens/process/configs/type-scale.js +49 -0
  135. package/dist/src/tokens/process/configs/typography.d.ts +3 -0
  136. package/dist/src/tokens/process/configs/typography.d.ts.map +1 -0
  137. package/dist/src/tokens/process/configs/typography.js +64 -0
  138. package/dist/src/tokens/process/configs.d.ts +20 -0
  139. package/dist/src/tokens/process/configs.d.ts.map +1 -0
  140. package/dist/src/tokens/process/configs.js +90 -0
  141. package/dist/src/tokens/process/formats/css/color.d.ts +4 -0
  142. package/dist/src/tokens/process/formats/css/color.d.ts.map +1 -0
  143. package/dist/src/tokens/process/formats/css/color.js +63 -0
  144. package/dist/src/tokens/process/formats/css/semantic.d.ts +3 -0
  145. package/dist/src/tokens/process/formats/css/semantic.d.ts.map +1 -0
  146. package/dist/src/tokens/process/formats/css/semantic.js +29 -0
  147. package/dist/src/tokens/process/formats/css/size-mode.d.ts +4 -0
  148. package/dist/src/tokens/process/formats/css/size-mode.d.ts.map +1 -0
  149. package/dist/src/tokens/process/formats/css/size-mode.js +50 -0
  150. package/dist/src/tokens/process/formats/css/size.d.ts +21 -0
  151. package/dist/src/tokens/process/formats/css/size.d.ts.map +1 -0
  152. package/dist/src/tokens/process/formats/css/size.js +93 -0
  153. package/dist/src/tokens/process/formats/css/type-scale.d.ts +3 -0
  154. package/dist/src/tokens/process/formats/css/type-scale.d.ts.map +1 -0
  155. package/dist/src/tokens/process/formats/css/type-scale.js +55 -0
  156. package/dist/src/tokens/process/formats/css/typography.d.ts +3 -0
  157. package/dist/src/tokens/process/formats/css/typography.d.ts.map +1 -0
  158. package/dist/src/tokens/process/formats/css/typography.js +29 -0
  159. package/dist/src/tokens/process/formats/css.d.ts +11 -0
  160. package/dist/src/tokens/process/formats/css.d.ts.map +1 -0
  161. package/dist/src/tokens/process/formats/css.js +18 -0
  162. package/dist/src/tokens/process/output/declarations.d.ts +5 -0
  163. package/dist/src/tokens/process/output/declarations.d.ts.map +1 -0
  164. package/dist/src/tokens/process/output/declarations.js +38 -0
  165. package/dist/src/tokens/process/output/tailwind.d.ts +3 -0
  166. package/dist/src/tokens/process/output/tailwind.d.ts.map +1 -0
  167. package/dist/src/tokens/process/output/tailwind.js +45 -0
  168. package/dist/src/tokens/process/output/theme.d.ts +27 -0
  169. package/dist/src/tokens/process/output/theme.d.ts.map +1 -0
  170. package/dist/src/tokens/process/output/theme.js +83 -0
  171. package/dist/src/tokens/process/platform.d.ts +106 -0
  172. package/dist/src/tokens/process/platform.d.ts.map +1 -0
  173. package/dist/src/tokens/process/platform.js +168 -0
  174. package/dist/src/tokens/process/transformers.d.ts +6 -0
  175. package/dist/src/tokens/process/transformers.d.ts.map +1 -0
  176. package/dist/src/tokens/process/transformers.js +54 -0
  177. package/dist/src/tokens/process/utils/getMultidimensionalThemes.d.ts +36 -0
  178. package/dist/src/tokens/process/utils/getMultidimensionalThemes.d.ts.map +1 -0
  179. package/dist/src/tokens/process/utils/getMultidimensionalThemes.js +114 -0
  180. package/dist/src/tokens/process/utils/kebab-case.d.ts +5 -0
  181. package/dist/src/tokens/process/utils/kebab-case.d.ts.map +1 -0
  182. package/dist/src/tokens/process/utils/kebab-case.js +9 -0
  183. package/dist/src/tokens/types.d.ts +74 -0
  184. package/dist/src/tokens/types.d.ts.map +1 -0
  185. package/dist/src/tokens/types.js +7 -0
  186. package/dist/src/tokens/utils.d.ts +63 -0
  187. package/dist/src/tokens/utils.d.ts.map +1 -0
  188. package/dist/src/tokens/utils.js +121 -0
  189. package/dist/src/types.d.ts +6 -0
  190. package/dist/src/types.d.ts.map +1 -0
  191. package/dist/src/types.js +2 -0
  192. package/dist/src/utils/filesystem.d.ts +40 -0
  193. package/dist/src/utils/filesystem.d.ts.map +1 -0
  194. package/dist/src/utils/filesystem.js +115 -0
  195. package/package.json +87 -0
package/LICENSE ADDED
@@ -0,0 +1,7 @@
1
+ Copyright 2024 Digitaliseringsdirektoratet (Digdir)
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4
+
5
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6
+
7
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,115 @@
1
+ # @digdir/designsystemet
2
+
3
+ CLI and tooling for Designsystemet
4
+
5
+ Use `--help` for available commands and options
6
+
7
+ Read the Designsystemet [README](https://github.com/digdir/designsystemet) to get started.
8
+
9
+
10
+ ## Usage
11
+
12
+ ### Create tokens
13
+
14
+ Use `npx @digdir/designsystemet tokens create <options>` to create design tokens for use with Designsystemet.
15
+
16
+ This allows you to define themes including custom colors, font-family, and border-radius.
17
+ We recommend using the [Designsystemet theme builder](https://theme.designsystemet.no/) for generating a valid command with correct options.
18
+
19
+ #### Update tokens
20
+
21
+ Whenever a new version of the CLI is released, or you have done changes, we recommend to update design tokens with the `--clean` option to potentially remove any changes deprecated files or unneeded files.
22
+
23
+ To update design tokens, re-run `npx @digdir/designsystemet tokens create <options> --clean`.
24
+ If a [config file](#using-a-config-file) you can also re-run with `"clean": true`.
25
+
26
+ > ⚠️ **WARNING** ⚠️
27
+ > The design tokens created by this tool are considered an implementation detail, and is subject
28
+ > to change at any time without being considered a breaking change. We **only** support customisations
29
+ > done through the CLI options and config. Direct editing of the design tokens are **not** supported.
30
+ >
31
+ > Since tokens may be added or removed at any time, it is necessary to routinely re-run this
32
+ > command when upgrading the libraries. This will remove any direct edits to the design tokens.
33
+
34
+ ### Build CSS from tokens
35
+
36
+ Use `npx @digdir/designsystemet tokens build <options>` to build CSS from design tokens generated in the previous step.
37
+
38
+ > ⚠️ **WARNING** ⚠️
39
+ > The CSS files from created by this tool are considered build artifacts. They should **not** be
40
+ > edited directly. While the CSS will not change unexpectedly, new variables may be added at any
41
+ > time. Therefore, it is necessary to routinely re-run this command when upgrading the libraries.
42
+ > This will remove any direct edits to the CSS.
43
+
44
+ #### Update built CSS
45
+
46
+ Whenever a new version of the CLI is released, or you have done changes, we recommend to build a new set of CSS from design tokens with the `--clean` option to potentially remove any changes deprecated files or unneeded files.
47
+
48
+
49
+ ### Using a config file
50
+
51
+ > ⚠️ **WARNING** ⚠️
52
+ > The typography feature is experimental. The config schema may change at any time.
53
+
54
+
55
+ The `tokens create` command supports a config file. It will auto-detect a `designsystemet.config.json` file in the current directory. You can also use the `--config <path>` option to supply a different config name and location.
56
+
57
+ The main advantage of using a config file is for automation in scenarios with multiple themes.
58
+
59
+ To get started, use this template for a `designsystemet.config.json` file:
60
+
61
+ ```jsonc
62
+ {
63
+ "$schema": "node_modules/@digdir/designsystemet/dist/config.schema.json",
64
+ }
65
+ ```
66
+
67
+ In editors which support JSON Schema, the `$schema` will then give you editor hints for the structure of the file.
68
+
69
+ #### Minimal config example
70
+ As a minimal example, the following CLI snippet from the theme builder
71
+
72
+ ```
73
+ npx @digdir/designsystemet tokens create \
74
+ --main-colors "primary:#0062BA" "accent:#1E98F5" \
75
+ --neutral-color "#1E2B3C" \
76
+ --support-colors "extra1:#F45F63" "extra2:#E5AA20" \
77
+ --border-radius 4 \
78
+ --theme "theme"
79
+ ```
80
+
81
+ ...is equivalent to this `designsystemet.config.json` file
82
+ ```jsonc
83
+ {
84
+ "$schema": "./node_modules/@digdir/designsystemet/dist/config.schema.json",
85
+ "outDir": "../path/to/design-tokens",
86
+ "themes": {
87
+ "theme": {
88
+ "colors": {
89
+ "main": { "primary": "#0062BA", "accent": "#1E98F5" },
90
+ "neutral": "#1E2B3C",
91
+ "support": { "extra1": "#F45F63", "extra2": "#E5AA20" }
92
+ },
93
+ "borderRadius": 4
94
+ }
95
+ }
96
+ }
97
+ ```
98
+ To generate new design tokens and CSS files, you would then run.
99
+
100
+ ```
101
+ npx @digdir/designsystemet tokens create
102
+ npx @digdir/designsystemet tokens build
103
+ ```
104
+
105
+ #### Complex config example
106
+
107
+ Have a look at the `*.config.json` files under the `packages/cli` in the Github repo for more complex examples.
108
+
109
+ #### Create config from existing tokens
110
+
111
+ You can get a minimal config file, meaning without overrides, generated from existing design tokens using the following command:
112
+
113
+ ```sh
114
+ npx @digdir/designsystemet generate-config-from-tokens --dir <path to design tokens>
115
+ ```
@@ -0,0 +1,82 @@
1
+ {
2
+ "$schema": "../dist/config.schema.json",
3
+ "outDir": "./temp/config/design-tokens",
4
+ "clean": true,
5
+ "themes": {
6
+ "some-org": {
7
+ "colors": {
8
+ "main": {
9
+ "dominant": "#0062BA",
10
+ "complimentary": "#94237C"
11
+ },
12
+ "support": {
13
+ "first": "#F45F63",
14
+ "second": "#E5AA20",
15
+ "third": "#1E98F5",
16
+ "fourth": "#F167EC"
17
+ },
18
+ "neutral": "#303030"
19
+ },
20
+ "typography": {
21
+ "fontFamily": "Inter"
22
+ },
23
+ "borderRadius": 8,
24
+ "overrides": {
25
+ "colors": {
26
+ "dominant": {
27
+ "background-default": {
28
+ "light": "#ff0000",
29
+ "dark": "#000fff"
30
+ },
31
+ "background-tinted": {
32
+ "light": "#f0ff00",
33
+ "dark": "#ff00ff"
34
+ }
35
+ },
36
+ "danger": {
37
+ "background-default": {
38
+ "light": "#0000ff",
39
+ "dark": "#0000ff"
40
+ }
41
+ }
42
+ },
43
+ "severity": {
44
+ "danger": "#ff00ff"
45
+ },
46
+ "linkVisited": {
47
+ "light": "#ff1234",
48
+ "dark": "#1234ff"
49
+ },
50
+ "focus": {
51
+ "inner": {
52
+ "light": "#00ff00",
53
+ "dark": "#00ffff"
54
+ },
55
+ "outer": {
56
+ "light": "#ffff00",
57
+ "dark": "#ff00aa"
58
+ }
59
+ }
60
+ }
61
+ },
62
+ "other-org": {
63
+ "colors": {
64
+ "main": {
65
+ "dominant": "#ffaaaa",
66
+ "complimentary": "#00ff00"
67
+ },
68
+ "support": {
69
+ "first": "#abcdef",
70
+ "second": "#123456",
71
+ "third": "#994a22",
72
+ "fourth": "#3d5f30"
73
+ },
74
+ "neutral": "#c05030"
75
+ },
76
+ "typography": {
77
+ "fontFamily": "Roboto"
78
+ },
79
+ "borderRadius": 99
80
+ }
81
+ }
82
+ }
@@ -0,0 +1,12 @@
1
+ import type { Command, OptionValues } from '@commander-js/extra-typings';
2
+ import { type BuildConfigSchema, type CreateConfigSchema } from '../src/config.js';
3
+ export declare function readConfigFile(configFilePath: string, allowFileNotFound?: boolean): Promise<string>;
4
+ export declare function parseCreateConfig(configFile: string, options: {
5
+ theme: string;
6
+ cmd: Command<unknown[], OptionValues>;
7
+ configFilePath: string;
8
+ }): Promise<CreateConfigSchema>;
9
+ export declare function parseBuildConfig(configFile: string, { configFilePath }: {
10
+ configFilePath: string;
11
+ }): Promise<BuildConfigSchema>;
12
+ //# sourceMappingURL=config.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../bin/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAGzE,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,kBAAkB,EAKxB,MAAM,kBAAkB,CAAC;AAI1B,wBAAsB,cAAc,CAAC,cAAc,EAAE,MAAM,EAAE,iBAAiB,UAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAkBtG;AAED,wBAAsB,iBAAiB,CACrC,UAAU,EAAE,MAAM,EAClB,OAAO,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,EAAE,YAAY,CAAC,CAAC;IAAC,cAAc,EAAE,MAAM,CAAA;CAAE,GACxF,OAAO,CAAC,kBAAkB,CAAC,CAiE7B;AAED,wBAAsB,gBAAgB,CACpC,UAAU,EAAE,MAAM,EAClB,EAAE,cAAc,EAAE,EAAE;IAAE,cAAc,EAAE,MAAM,CAAA;CAAE,GAC7C,OAAO,CAAC,iBAAiB,CAAC,CAI5B"}
@@ -0,0 +1,58 @@
1
+ import { commonConfig, configFileCreateSchema, parseConfig, validateConfig } from "../src/config.js";
2
+ import { dsfs } from "../src/utils/filesystem.js";
3
+ import { getCliOption, getDefaultCliOption, getSuppliedCliOption } from "./options.js";
4
+ import pc from "picocolors";
5
+ import * as R from "ramda";
6
+ //#region bin/config.ts
7
+ async function readConfigFile(configFilePath, allowFileNotFound = true) {
8
+ let configFile;
9
+ try {
10
+ configFile = await dsfs.readFile(configFilePath, allowFileNotFound);
11
+ } catch (err) {
12
+ if (allowFileNotFound) return "";
13
+ console.error(pc.redBright(`Could not read config file at ${pc.blue(configFilePath)}`));
14
+ throw err;
15
+ }
16
+ if (configFile) console.log(`Found config file: ${pc.green(configFilePath)}`);
17
+ return configFile;
18
+ }
19
+ async function parseCreateConfig(configFile, options) {
20
+ const { cmd, theme = "theme", configFilePath } = options;
21
+ const configParsed = parseConfig(configFile, configFilePath);
22
+ const themeColors = Object.values(configParsed?.themes ?? {}).map((x) => new Set([...R.keys(x.colors.main), ...R.keys(x.colors.support)]));
23
+ if (!R.all(R.equals(R.__, themeColors[0]), themeColors)) {
24
+ console.error(pc.redBright(`In config, all themes must have the same custom color names, but we found:`));
25
+ const themeNames = R.keys(configParsed.themes ?? {});
26
+ themeColors.forEach((colors, index) => {
27
+ const colorNames = Array.from(colors);
28
+ console.log(` - ${themeNames[index]}: ${colorNames.join(", ")}`);
29
+ });
30
+ console.log();
31
+ process.exit(1);
32
+ }
33
+ const noUndefined = R.reject(R.isNil);
34
+ const getThemeOptions = (optionGetter) => noUndefined({
35
+ colors: noUndefined({
36
+ main: optionGetter(cmd, "mainColors"),
37
+ support: optionGetter(cmd, "supportColors"),
38
+ neutral: optionGetter(cmd, "neutralColor")
39
+ }),
40
+ typography: noUndefined({ fontFamily: optionGetter(cmd, "fontFamily") }),
41
+ borderRadius: optionGetter(cmd, "borderRadius"),
42
+ defaultColor: optionGetter(cmd, "defaultColor")
43
+ });
44
+ return validateConfig(configFileCreateSchema, noUndefined({
45
+ outDir: configParsed?.outDir ?? getCliOption(cmd, "outDir"),
46
+ clean: configParsed?.clean ?? getCliOption(cmd, "clean"),
47
+ themes: configParsed?.themes ? R.map((jsonThemeValues) => {
48
+ const defaultThemeValues = getThemeOptions(getDefaultCliOption);
49
+ const cliThemeValues = getThemeOptions(getSuppliedCliOption);
50
+ return R.mergeDeepRight(defaultThemeValues, R.mergeDeepRight(jsonThemeValues, cliThemeValues));
51
+ }, configParsed.themes) : { [theme]: getThemeOptions(getCliOption) }
52
+ }), configFilePath);
53
+ }
54
+ async function parseBuildConfig(configFile, { configFilePath }) {
55
+ return validateConfig(commonConfig, parseConfig(configFile, configFilePath), configFilePath);
56
+ }
57
+ //#endregion
58
+ export { parseBuildConfig, parseCreateConfig, readConfigFile };
@@ -0,0 +1,3 @@
1
+ #!/usr/bin/env node
2
+ export declare const figletAscii = "\n _____ _ _ _\n| __ \\ (_) | | | |\n| | | | ___ ___ _ __ _ _ __ ___ _ _ ___| |_ ___ _ __ ___ ___| |_\n| | | |/ _ \\/ __| |/ _` | '_ \\/ __| | | / __| __/ _ \\ '_ ` _ \\ / _ \\ __|\n| |__| | __/\\__ \\ | (_| | | | \\__ \\ |_| \\__ \\ || __/ | | | | | __/ |_\n|_____/ \\___||___/_|\\__, |_| |_|___/\\__, |___/\\__\\___|_| |_| |_|\\___|\\__|\n __/ | __/ |\n |___/ |___/\n";
3
+ //# sourceMappingURL=designsystemet.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"designsystemet.d.ts","sourceRoot":"","sources":["../../bin/designsystemet.ts"],"names":[],"mappings":";AAgBA,eAAO,MAAM,WAAW,4iBASvB,CAAC"}
@@ -0,0 +1,156 @@
1
+ #!/usr/bin/env node
2
+ import { convertToHex } from "../src/colors/utils.js";
3
+ import "../src/colors/index.js";
4
+ import { cliOptions, createTokens } from "../src/tokens/create.js";
5
+ import { dsfs } from "../src/utils/filesystem.js";
6
+ import { parseCreateConfig, readConfigFile } from "./config.js";
7
+ import migrations_default from "../src/migrations/index.js";
8
+ import { buildTokens } from "../src/tokens/build.js";
9
+ import { createTokenFiles } from "../src/tokens/create/files.js";
10
+ import { generateConfigFromTokens } from "../src/tokens/generate-config.js";
11
+ import pc from "picocolors";
12
+ import * as R from "ramda";
13
+ import path from "node:path";
14
+ import { Argument, createCommand, program } from "@commander-js/extra-typings";
15
+ //#region bin/designsystemet.ts
16
+ const figletAscii = `
17
+ _____ _ _ _
18
+ | __ \\ (_) | | | |
19
+ | | | | ___ ___ _ __ _ _ __ ___ _ _ ___| |_ ___ _ __ ___ ___| |_
20
+ | | | |/ _ \\/ __| |/ _\` | '_ \\/ __| | | / __| __/ _ \\ '_ \` _ \\ / _ \\ __|
21
+ | |__| | __/\\__ \\ | (_| | | | \\__ \\ |_| \\__ \\ || __/ | | | | | __/ |_
22
+ |_____/ \\___||___/_|\\__, |_| |_|___/\\__, |___/\\__\\___|_| |_| |_|\\___|\\__|
23
+ __/ | __/ |
24
+ |___/ |___/
25
+ `;
26
+ program.name("designsystemet").description("CLI for working with Designsystemet").showHelpAfterError();
27
+ const DEFAULT_TOKENS_CREATE_DIR = "./design-tokens";
28
+ const DEFAULT_TOKENS_BUILD_DIR = "./design-tokens-build";
29
+ const DEFAULT_FONT = "Inter";
30
+ const DEFAULT_THEME_NAME = "theme";
31
+ const DEFAULT_CONFIG_FILEPATH = "designsystemet.config.json";
32
+ function makeTokenCommands() {
33
+ const tokenCmd = createCommand("tokens");
34
+ tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${pc.blue("design-tokens")}`, DEFAULT_TOKENS_CREATE_DIR).option("-o, --out-dir <string>", `Output directory for built ${pc.blue("design-tokens")}`, DEFAULT_TOKENS_BUILD_DIR).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before building tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for built ${pc.blue("design-tokens")}`, parseBoolean, false).option("--verbose", "Enable verbose output", false).option("--config <string>", `Path to config file (default: "${DEFAULT_CONFIG_FILEPATH}")`).option("--experimental-tailwind", "Generate Tailwind CSS classes for tokens", false).action(async (opts) => {
35
+ console.log(figletAscii);
36
+ const { verbose, clean, dry, experimentalTailwind, tokens } = opts;
37
+ dsfs.init({
38
+ dry,
39
+ outdir: opts.outDir,
40
+ verbose
41
+ });
42
+ const outDir = dsfs.outDir;
43
+ if (clean) await dsfs.cleanDir(outDir);
44
+ const files = await buildTokens({
45
+ tokensDir: tokens,
46
+ verbose,
47
+ tailwind: experimentalTailwind
48
+ });
49
+ console.log(`\n💾 Writing build to ${pc.green(outDir)}`);
50
+ await dsfs.writeFiles(files, outDir, true);
51
+ console.log(`\n✅ Finished building tokens in ${pc.green(outDir)}`);
52
+ return Promise.resolve();
53
+ });
54
+ tokenCmd.command("create").description("Create Designsystemet tokens").option(`-m, --${cliOptions.theme.colors.main} <name:hex...>`, `Main colors`, parseColorValues).option(`-s, --${cliOptions.theme.colors.support} <name:hex...>`, `Support colors`, parseColorValues).option(`-n, --${cliOptions.theme.colors.neutral} <hex>`, `Neutral hex color`, convertToHex).option(`-o, --${cliOptions.outDir} <string>`, `Output directory for created ${pc.blue("design-tokens")}`, DEFAULT_TOKENS_CREATE_DIR).option(`--${cliOptions.clean} [boolean]`, "Clean output directory before creating tokens", parseBoolean, false).option("--dry [boolean]", `Dry run for created ${pc.blue("design-tokens")}`, parseBoolean, false).option(`-f, --${cliOptions.theme.typography.fontFamily} <string>`, `Font family (experimental)`, DEFAULT_FONT).option(`-b, --${cliOptions.theme.borderRadius} <number>`, `Unitless base border-radius in px`, (radiusAsString) => Number(radiusAsString), 4).option("--theme <string>", "Theme name (ignored when using JSON config file)", DEFAULT_THEME_NAME).option("--config <string>", `Path to config file (default: "${DEFAULT_CONFIG_FILEPATH}")`).action(async (opts, cmd) => {
55
+ console.log(figletAscii);
56
+ if (opts.dry) console.log(`Performing dry run, no files will be written`);
57
+ const themeName = opts.theme;
58
+ const { configFile, configFilePath } = await getConfigFile(opts.config);
59
+ const config = await parseCreateConfig(configFile, {
60
+ theme: themeName,
61
+ cmd,
62
+ configFilePath
63
+ });
64
+ const themeNames = Object.keys(config.themes);
65
+ if (themeNames.length > 0) console.log(`Using themes from config file: ${pc.blue(themeNames.join(", "))}`);
66
+ dsfs.init({
67
+ dry: opts.dry,
68
+ outdir: config.outDir
69
+ });
70
+ const outDir = dsfs.outDir;
71
+ if (config.clean) await dsfs.cleanDir(outDir);
72
+ let files = [];
73
+ if (config.themes) for (const [name, themeWithoutName] of Object.entries(config.themes)) {
74
+ const theme = {
75
+ name,
76
+ ...themeWithoutName
77
+ };
78
+ const { tokenSets } = await createTokens(theme);
79
+ files = files.concat(await createTokenFiles({
80
+ outDir,
81
+ theme,
82
+ tokenSets,
83
+ themeNames
84
+ }));
85
+ }
86
+ await dsfs.writeFiles(files, outDir);
87
+ console.log(`\n✅ Finished creating tokens in ${pc.green(outDir)} for themes: ${pc.blue(themeNames.join(", "))}`);
88
+ return Promise.resolve();
89
+ });
90
+ return tokenCmd;
91
+ }
92
+ program.addCommand(makeTokenCommands());
93
+ program.command("generate-config-from-tokens").description("Generate a config file from existing design tokens. Will not include overrides.").option("-d, --dir <string>", "Path to design tokens directory", DEFAULT_TOKENS_CREATE_DIR).option("-o, --out <string>", "Output path for config file", DEFAULT_CONFIG_FILEPATH).option("--dry [boolean]", "Dry run - show config without writing file", parseBoolean, false).action(async (opts) => {
94
+ console.log(figletAscii);
95
+ const { dry } = opts;
96
+ const tokensDir = path.resolve(opts.dir);
97
+ const configFilePath = path.resolve(opts.out);
98
+ dsfs.init({
99
+ dry,
100
+ outdir: path.dirname(configFilePath)
101
+ });
102
+ try {
103
+ const config = await generateConfigFromTokens({
104
+ tokensDir,
105
+ outFile: configFilePath
106
+ });
107
+ if (dry) {
108
+ console.log();
109
+ console.log("Generated config (dry run):");
110
+ console.log(JSON.stringify(config, null, 2));
111
+ }
112
+ if (configFilePath) {
113
+ const configJson = JSON.stringify(config, null, 2);
114
+ await dsfs.writeFile(configFilePath, configJson);
115
+ console.log();
116
+ console.log(`\n✅ Config file written to ${pc.blue(configFilePath)}`);
117
+ }
118
+ } catch (error) {
119
+ console.error(pc.redBright("Error generating config:"));
120
+ console.error(error instanceof Error ? error.message : String(error));
121
+ process.exit(1);
122
+ }
123
+ });
124
+ program.command("migrate").description("run a Designsystemet migration").addArgument(new Argument("[migration]", "Available migrations").choices(Object.keys(migrations_default))).option("-l --list", "List available migrations").option("-g --glob <glob>", "Glob for files upon which to apply the migration", "./**/*.(tsx|css)").action((migrationKey, opts) => {
125
+ console.log(figletAscii);
126
+ const { glob, list } = opts;
127
+ if (list) for (const key of Object.keys(migrations_default)) console.log(key);
128
+ else if (migrationKey) {
129
+ const migration = migrations_default[migrationKey];
130
+ if (!migration) {
131
+ console.error("Migration not found!");
132
+ throw "Aborting";
133
+ }
134
+ console.log(`Applying migration ${pc.blue(migrationKey)} with glob: ${pc.green(glob)}`);
135
+ migration?.(glob).then(() => console.log(`Migration ${pc.blue(migrationKey)} finished`)).catch((error) => console.log(error));
136
+ } else console.log("Migrate: please specify a migration name or --list");
137
+ });
138
+ await program.parseAsync(process.argv);
139
+ function parseColorValues(value, previous = {}) {
140
+ const [name, hex] = value.split(":");
141
+ previous[name] = convertToHex(hex);
142
+ return previous;
143
+ }
144
+ function parseBoolean(value) {
145
+ return value === "true" || value === true;
146
+ }
147
+ async function getConfigFile(userConfigFilePath) {
148
+ const allowFileNotFound = R.isNil(userConfigFilePath) || userConfigFilePath === DEFAULT_CONFIG_FILEPATH;
149
+ const configFilePath = userConfigFilePath ?? DEFAULT_CONFIG_FILEPATH;
150
+ return {
151
+ configFile: await readConfigFile(configFilePath, allowFileNotFound),
152
+ configFilePath
153
+ };
154
+ }
155
+ //#endregion
156
+ export { figletAscii };
@@ -0,0 +1,21 @@
1
+ import type { Command, OptionValueSource, OptionValues } from '@commander-js/extra-typings';
2
+ declare const getOptionIfMatchingSource: (...sources: OptionValueSource[]) => <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
3
+ export type OptionGetter = ReturnType<typeof getOptionIfMatchingSource>;
4
+ /**
5
+ * Get an option value if it is explicitly supplied to the CLI command.
6
+ * The difference between this and using the option directly is that we return undefined
7
+ * instead of the default value if the option was not explicitly set.
8
+ */
9
+ export declare const getSuppliedCliOption: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
10
+ /**
11
+ * Get the default value specified for a CLI command option.
12
+ * Mostly useful for getting values which may later be overridden.
13
+ */
14
+ export declare const getDefaultCliOption: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
15
+ /**
16
+ * Try to get the explicitly supplied CLI option, and fall back to the default value
17
+ * for the option as defined in the {@link Command}
18
+ */
19
+ export declare const getCliOption: <Args extends unknown[], Opts extends OptionValues, K extends keyof Opts>(command: Command<Args, Opts>, option: K) => Opts[K] | undefined;
20
+ export {};
21
+ //# sourceMappingURL=options.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../bin/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAE5F,QAAA,MAAM,yBAAyB,GAC5B,GAAG,SAAS,iBAAiB,EAAE,MAC/B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,EACtE,SAAS,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,EAC5B,QAAQ,CAAC,wBAMV,CAAC;AAEJ,MAAM,MAAM,YAAY,GAAG,UAAU,CAAC,OAAO,yBAAyB,CAAC,CAAC;AAExE;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,GAjB9B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAeuD,CAAC;AAErE;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAvB7B,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBAqB0D,CAAC;AAExE;;;GAGG;AACH,eAAO,MAAM,YAAY,GA7BtB,IAAI,SAAS,OAAO,EAAE,EAAE,IAAI,SAAS,YAAY,EAAE,CAAC,SAAS,MAAM,IAAI,WAC7D,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,UACpB,CAAC,wBA2B0D,CAAC"}
@@ -0,0 +1,23 @@
1
+ //#region bin/options.ts
2
+ const getOptionIfMatchingSource = (...sources) => (command, option) => {
3
+ const source = command.getOptionValueSource(option);
4
+ if (sources.includes(source)) return command.getOptionValue(option);
5
+ };
6
+ /**
7
+ * Get an option value if it is explicitly supplied to the CLI command.
8
+ * The difference between this and using the option directly is that we return undefined
9
+ * instead of the default value if the option was not explicitly set.
10
+ */
11
+ const getSuppliedCliOption = getOptionIfMatchingSource("cli");
12
+ /**
13
+ * Get the default value specified for a CLI command option.
14
+ * Mostly useful for getting values which may later be overridden.
15
+ */
16
+ const getDefaultCliOption = getOptionIfMatchingSource("default");
17
+ /**
18
+ * Try to get the explicitly supplied CLI option, and fall back to the default value
19
+ * for the option as defined in the {@link Command}
20
+ */
21
+ const getCliOption = getOptionIfMatchingSource("cli", "default");
22
+ //#endregion
23
+ export { getCliOption, getDefaultCliOption, getSuppliedCliOption };