@vettvangur/design-system 2.0.33 → 2.0.36
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/LICENSE +11 -11
- package/README.md +45 -45
- package/dist/index.js +3038 -710
- package/package.json +1 -1
package/LICENSE
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
Portions of this package rely on third-party open source libraries, which are licensed under their respective open source licenses (such as MIT). Use of those libraries is governed solely by their respective license terms.
|
|
2
|
-
|
|
3
|
-
All original code in this repository is licensed under the terms below:
|
|
4
|
-
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
Copyright (c) 2025 Vettvangur
|
|
8
|
-
|
|
9
|
-
This software is provided for personal or internal non-commercial use only. You may not modify, distribute, sublicense, or use this software in commercial products or services without explicit written permission from Vettvangur.
|
|
10
|
-
|
|
11
|
-
All rights reserved.
|
|
1
|
+
Portions of this package rely on third-party open source libraries, which are licensed under their respective open source licenses (such as MIT). Use of those libraries is governed solely by their respective license terms.
|
|
2
|
+
|
|
3
|
+
All original code in this repository is licensed under the terms below:
|
|
4
|
+
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
Copyright (c) 2025 Vettvangur
|
|
8
|
+
|
|
9
|
+
This software is provided for personal or internal non-commercial use only. You may not modify, distribute, sublicense, or use this software in commercial products or services without explicit written permission from Vettvangur.
|
|
10
|
+
|
|
11
|
+
All rights reserved.
|
package/README.md
CHANGED
|
@@ -1,46 +1,46 @@
|
|
|
1
|
-
# @vettvangur/design-system
|
|
2
|
-
|
|
3
|
-
This package is a CLI that pulls design tokens and component metadata from a Figma file, then writes generated, framework-specific artifacts into your repo.
|
|
4
|
-
|
|
5
|
-
It is not a runtime component library.
|
|
6
|
-
|
|
7
|
-
## What It Does
|
|
8
|
-
|
|
9
|
-
- Connects to the Figma API and fetches:
|
|
10
|
-
- Variables (design tokens)
|
|
11
|
-
- Components/component sets (for props/variants)
|
|
12
|
-
- Effect styles (shadows/blur) referenced by nodes
|
|
13
|
-
- Normalizes + groups tokens (for example colors are grouped by the first segment of the token key)
|
|
14
|
-
- Emits deterministic, static output files (no runtime dependency on Figma)
|
|
15
|
-
|
|
16
|
-
## What It Generates
|
|
17
|
-
|
|
18
|
-
From Figma Variables + Components it generates:
|
|
19
|
-
|
|
20
|
-
- Tailwind v4 token CSS (via `@theme`) under `styles/config/*.css` (colors, typography, fonts, weights, shadows, scales, screens, sources)
|
|
21
|
-
- Tailwind core CSS under `styles/core/*.css` (bodies, headlines, button variants)
|
|
22
|
-
- Umbraco/Razor design-system partials under `Views/Partials/<Namespace>/DesignSystem/*.cshtml`
|
|
23
|
-
- A top-level view at `Views/<Namespace>DesignSystem.cshtml` that composes the partials
|
|
24
|
-
|
|
25
|
-
## Requirements
|
|
26
|
-
|
|
27
|
-
### Figma access
|
|
28
|
-
|
|
29
|
-
- `FIGMA_TOKEN` in the environment (falls back to `FIGMA_KEY` for older setups)
|
|
30
|
-
- The token must have access to the target Figma file
|
|
31
|
-
|
|
32
|
-
### Project config
|
|
33
|
-
|
|
34
|
-
The CLI reads `vettvangur.config.mjs` from the current working directory.
|
|
35
|
-
|
|
36
|
-
requited shape in `vettvangur.config.mjs`:
|
|
37
|
-
|
|
38
|
-
```js
|
|
39
|
-
{
|
|
40
|
-
...rest of config
|
|
41
|
-
figma: {
|
|
42
|
-
key: process.env.FIGMA_KEY,
|
|
43
|
-
file: "<figma-file-id>"
|
|
44
|
-
},
|
|
45
|
-
}
|
|
1
|
+
# @vettvangur/design-system
|
|
2
|
+
|
|
3
|
+
This package is a CLI that pulls design tokens and component metadata from a Figma file, then writes generated, framework-specific artifacts into your repo.
|
|
4
|
+
|
|
5
|
+
It is not a runtime component library.
|
|
6
|
+
|
|
7
|
+
## What It Does
|
|
8
|
+
|
|
9
|
+
- Connects to the Figma API and fetches:
|
|
10
|
+
- Variables (design tokens)
|
|
11
|
+
- Components/component sets (for props/variants)
|
|
12
|
+
- Effect styles (shadows/blur) referenced by nodes
|
|
13
|
+
- Normalizes + groups tokens (for example colors are grouped by the first segment of the token key)
|
|
14
|
+
- Emits deterministic, static output files (no runtime dependency on Figma)
|
|
15
|
+
|
|
16
|
+
## What It Generates
|
|
17
|
+
|
|
18
|
+
From Figma Variables + Components it generates:
|
|
19
|
+
|
|
20
|
+
- Tailwind v4 token CSS (via `@theme`) under `styles/config/*.css` (colors, typography, fonts, weights, shadows, scales, screens, sources)
|
|
21
|
+
- Tailwind core CSS under `styles/core/*.css` (bodies, headlines, button variants)
|
|
22
|
+
- Umbraco/Razor design-system partials under `Views/Partials/<Namespace>/DesignSystem/*.cshtml`
|
|
23
|
+
- A top-level view at `Views/<Namespace>DesignSystem.cshtml` that composes the partials
|
|
24
|
+
|
|
25
|
+
## Requirements
|
|
26
|
+
|
|
27
|
+
### Figma access
|
|
28
|
+
|
|
29
|
+
- `FIGMA_TOKEN` in the environment (falls back to `FIGMA_KEY` for older setups)
|
|
30
|
+
- The token must have access to the target Figma file
|
|
31
|
+
|
|
32
|
+
### Project config
|
|
33
|
+
|
|
34
|
+
The CLI reads `vettvangur.config.mjs` from the current working directory.
|
|
35
|
+
|
|
36
|
+
requited shape in `vettvangur.config.mjs`:
|
|
37
|
+
|
|
38
|
+
```js
|
|
39
|
+
{
|
|
40
|
+
...rest of config
|
|
41
|
+
figma: {
|
|
42
|
+
key: process.env.FIGMA_KEY,
|
|
43
|
+
file: "<figma-file-id>"
|
|
44
|
+
},
|
|
45
|
+
}
|
|
46
46
|
```
|