@vettvangur/design-system 2.0.32 → 2.0.35
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -45
- package/dist/index.js +2559 -190
- package/package.json +1 -1
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
|
```
|