subbiahjcp-design-tokens 1.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 +171 -0
- package/package.json +26 -0
- package/tokens-output.css +9 -0
- package/tokens-output.js +7 -0
package/README.md
ADDED
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
# Design Tokens App
|
|
2
|
+
|
|
3
|
+
Automated design tokens generation from Figma Token Studio using StyleDictionary.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🎨 **W3C Design Tokens Format** - Supports the latest design tokens specification
|
|
8
|
+
- 🔄 **Multi-Platform Output** - Generates tokens for Web (JS/CSS) and React Native
|
|
9
|
+
- 🚀 **GitLab CI/CD** - Automated build and deployment pipeline
|
|
10
|
+
- 📦 **NPM Publishing** - Ready for package distribution
|
|
11
|
+
- 🔗 **Webhook Integration** - Automatic builds from Figma Token Studio
|
|
12
|
+
|
|
13
|
+
## Quick Start
|
|
14
|
+
|
|
15
|
+
### Installation
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### Build Tokens
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm run build
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
### Test Build
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npm run test
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
### Watch for Changes
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npm run watch
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Start Webhook Server
|
|
40
|
+
|
|
41
|
+
```bash
|
|
42
|
+
npm run serve
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Project Structure
|
|
46
|
+
|
|
47
|
+
```
|
|
48
|
+
design-tokens-app/
|
|
49
|
+
├── tokens/
|
|
50
|
+
│ ├── tokens.json # Source W3C design tokens
|
|
51
|
+
│ └── transformed.json # StyleDictionary format
|
|
52
|
+
├── build/
|
|
53
|
+
│ ├── web/
|
|
54
|
+
│ │ ├── tokens.js # JavaScript ES6 exports
|
|
55
|
+
│ │ └── tokens.css # CSS custom properties
|
|
56
|
+
│ └── native/
|
|
57
|
+
│ └── tokens.js # React Native tokens
|
|
58
|
+
├── scripts/
|
|
59
|
+
│ ├── build-tokens.js # Main build script
|
|
60
|
+
│ ├── test-build.js # Build verification
|
|
61
|
+
│ └── webhook-server.js # Figma webhook server
|
|
62
|
+
└── .gitlab-ci.yml # CI/CD configuration
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Token Categories
|
|
66
|
+
|
|
67
|
+
- **Colors** - Complete color palette with semantic naming
|
|
68
|
+
- **Spacing** - Consistent spacing scale
|
|
69
|
+
- **Typography** - Font families, sizes, weights, and line heights
|
|
70
|
+
- **Border Radius** - Consistent corner radius values
|
|
71
|
+
- **Opacity** - Standard opacity levels
|
|
72
|
+
- **Dimensions** - Base dimension scale
|
|
73
|
+
|
|
74
|
+
## Usage Examples
|
|
75
|
+
|
|
76
|
+
### JavaScript/TypeScript
|
|
77
|
+
|
|
78
|
+
```javascript
|
|
79
|
+
import {
|
|
80
|
+
ColorsBlue600,
|
|
81
|
+
SpacingMd,
|
|
82
|
+
FontSizesH1
|
|
83
|
+
} from './build/web/tokens.js';
|
|
84
|
+
|
|
85
|
+
const button = {
|
|
86
|
+
backgroundColor: ColorsBlue600,
|
|
87
|
+
padding: SpacingMd,
|
|
88
|
+
fontSize: FontSizesH1
|
|
89
|
+
};
|
|
90
|
+
```
|
|
91
|
+
|
|
92
|
+
### CSS
|
|
93
|
+
|
|
94
|
+
```css
|
|
95
|
+
@import './build/web/tokens.css';
|
|
96
|
+
|
|
97
|
+
.button {
|
|
98
|
+
background-color: var(--colors-blue-600);
|
|
99
|
+
padding: var(--spacing-md);
|
|
100
|
+
font-size: var(--font-sizes-h1);
|
|
101
|
+
}
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
## CI/CD Pipeline
|
|
105
|
+
|
|
106
|
+
The GitLab CI pipeline includes:
|
|
107
|
+
|
|
108
|
+
1. **Build Stage** - Transforms tokens and generates output files
|
|
109
|
+
2. **Test Stage** - Verifies build artifacts
|
|
110
|
+
3. **Publish Stage** - (Commented) NPM package publishing
|
|
111
|
+
4. **Deploy Stage** - (Commented) Vercel deployment trigger
|
|
112
|
+
|
|
113
|
+
## Configuration
|
|
114
|
+
|
|
115
|
+
### StyleDictionary Config
|
|
116
|
+
|
|
117
|
+
The build process uses StyleDictionary v3 with custom transforms for:
|
|
118
|
+
- W3C token format conversion
|
|
119
|
+
- Font weight mapping (Regular → 400, Bold → 700)
|
|
120
|
+
- Reference resolution
|
|
121
|
+
- Multi-platform output
|
|
122
|
+
|
|
123
|
+
### Webhook Server
|
|
124
|
+
|
|
125
|
+
Configure the webhook server for Figma Token Studio integration:
|
|
126
|
+
|
|
127
|
+
```javascript
|
|
128
|
+
// Set environment variables
|
|
129
|
+
WEBHOOK_PORT=3000
|
|
130
|
+
WEBHOOK_SECRET=your-secret-key
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
## Troubleshooting
|
|
134
|
+
|
|
135
|
+
### Build Issues
|
|
136
|
+
|
|
137
|
+
1. **Dependency conflicts**: Use `npm install --legacy-peer-deps` if needed
|
|
138
|
+
2. **Missing build directory**: The script automatically creates required directories
|
|
139
|
+
3. **Token references**: Complex references may need manual resolution
|
|
140
|
+
|
|
141
|
+
### Common Fixes
|
|
142
|
+
|
|
143
|
+
- Ensure Node.js version 16+ is installed
|
|
144
|
+
- Clear `node_modules` and reinstall if build fails
|
|
145
|
+
- Check token syntax in `tokens/tokens.json`
|
|
146
|
+
|
|
147
|
+
## Development
|
|
148
|
+
|
|
149
|
+
### Adding New Tokens
|
|
150
|
+
|
|
151
|
+
1. Update `tokens/tokens.json` with W3C format
|
|
152
|
+
2. Run `npm run build` to generate outputs
|
|
153
|
+
3. Test with `npm run test`
|
|
154
|
+
|
|
155
|
+
### Modifying Build Process
|
|
156
|
+
|
|
157
|
+
Edit `scripts/build-tokens.js` to customize:
|
|
158
|
+
- Token transformation logic
|
|
159
|
+
- Output formats
|
|
160
|
+
- Platform-specific builds
|
|
161
|
+
|
|
162
|
+
## License
|
|
163
|
+
|
|
164
|
+
MIT License - see LICENSE file for details.
|
|
165
|
+
|
|
166
|
+
## Support
|
|
167
|
+
|
|
168
|
+
For issues and questions:
|
|
169
|
+
- Create an issue in the GitLab repository
|
|
170
|
+
- Check the troubleshooting section above
|
|
171
|
+
- Review StyleDictionary documentation
|
package/package.json
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "subbiahjcp-design-tokens",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"description": "Design tokens generated from Figma",
|
|
6
|
+
"main": "tokens-output.js",
|
|
7
|
+
"module": "tokens-output.js",
|
|
8
|
+
"files": [
|
|
9
|
+
"tokens-output.js",
|
|
10
|
+
"tokens-output.css"
|
|
11
|
+
],
|
|
12
|
+
"scripts": {
|
|
13
|
+
"build": "node scripts/build-tokens.js",
|
|
14
|
+
"debug": "node scripts/debug-ci.js",
|
|
15
|
+
"watch": "chokidar 'tokens/**/*.json' -c 'npm run build'",
|
|
16
|
+
"serve": "node scripts/webhook-server.js"
|
|
17
|
+
},
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"@tokens-studio/sd-transforms": "^0.16.0",
|
|
20
|
+
"chokidar-cli": "^3.0.0",
|
|
21
|
+
"express": "^4.18.0",
|
|
22
|
+
"style-dictionary": "^4.0.1"
|
|
23
|
+
},
|
|
24
|
+
"devDependencies": {
|
|
25
|
+
}
|
|
26
|
+
}
|