@vettvangur/design-system 1.0.8 → 2.0.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.
- package/README.md +97 -11
- package/dist/index.js +2916 -0
- package/package.json +20 -8
- package/dist/buttons-o2a9tpOe.js +0 -19
- package/dist/generate-astro-BDPRsAax.js +0 -536
- package/dist/generate-razor-Ce5nWj1n.js +0 -480
- package/dist/generate-tailwind-DGiO1-km.js +0 -242
- package/dist/index.esm.js +0 -1154
- package/dist/inputs-RHH3YuXh.js +0 -352
package/README.md
CHANGED
|
@@ -1,18 +1,104 @@
|
|
|
1
|
-
# vettvangur-
|
|
1
|
+
# @vettvangur/design-system
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Single source of truth for visual consistency.
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
* Typography
|
|
7
|
-
* Buttons
|
|
8
|
-
* Inputs
|
|
5
|
+
Design tokens are extracted directly from Figma and compiled into production-ready artifacts for multiple targets.
|
|
9
6
|
|
|
10
|
-
|
|
7
|
+
---
|
|
11
8
|
|
|
12
|
-
|
|
9
|
+
## What This Package Does
|
|
13
10
|
|
|
14
|
-
|
|
11
|
+
Automatically generates the following from a Figma file:
|
|
15
12
|
|
|
16
|
-
|
|
13
|
+
- Colors
|
|
14
|
+
- Typography
|
|
15
|
+
- Buttons
|
|
16
|
+
- Inputs
|
|
17
|
+
|
|
18
|
+
All outputs are deterministic and reproducible.
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## Requirements
|
|
23
|
+
|
|
24
|
+
### Configuration
|
|
25
|
+
|
|
26
|
+
Inside vettvangur.config.mjs:
|
|
27
|
+
|
|
28
|
+
```js
|
|
29
|
+
export default {
|
|
30
|
+
figma: {
|
|
31
|
+
key: process.env.FIGMA_KEY,
|
|
32
|
+
file: '<file-id>',
|
|
33
|
+
},
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Environment
|
|
38
|
+
|
|
39
|
+
in .env file:
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
FIGMA_TOKEN=<your-figma-token>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
The token must have access to the target Figma file.
|
|
46
|
+
|
|
47
|
+
---
|
|
48
|
+
|
|
49
|
+
## Installation
|
|
50
|
+
|
|
51
|
+
```bash
|
|
52
|
+
pnpm add @vettvangur/design-system
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
or
|
|
56
|
+
|
|
57
|
+
```bash
|
|
58
|
+
npm install @vettvangur/design-system
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
---
|
|
62
|
+
|
|
63
|
+
## Commands
|
|
64
|
+
|
|
65
|
+
### Astro Output
|
|
66
|
+
|
|
67
|
+
Generates design tokens and components for Astro projects.
|
|
68
|
+
|
|
69
|
+
```bash
|
|
70
|
+
vettvangur-styleguide astro
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
### Umbraco (Razor) Output
|
|
74
|
+
|
|
75
|
+
Generates Razor-compatible assets and helpers.
|
|
76
|
+
|
|
77
|
+
```bash
|
|
78
|
+
vettvangur-styleguide razor -n=<ProjectName>
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
`<ProjectName>` is used for namespace and file structure generation.
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
## How It Works
|
|
86
|
+
|
|
87
|
+
1. Connects to the Figma API
|
|
88
|
+
2. Pulls variables, styles, and components
|
|
89
|
+
3. Normalizes naming and structure
|
|
90
|
+
4. Groups tokens by intent, not raw structure
|
|
91
|
+
5. Emits framework-specific output
|
|
92
|
+
|
|
93
|
+
No runtime dependency on Figma. Output is static.
|
|
94
|
+
|
|
95
|
+
---
|
|
96
|
+
|
|
97
|
+
## Design Principles
|
|
98
|
+
|
|
99
|
+
- Figma is the authority
|
|
100
|
+
- Tokens over opinions
|
|
101
|
+
- Explicit output, no magic
|
|
102
|
+
|
|
103
|
+
If it differs from Figma, it is a bug.
|
|
17
104
|
|
|
18
|
-
`vettvangur-styleguide razor -n=UmbracoStarter`
|