@@ -131,8 +131,6 @@ return lighter.to.oklch();
131131
132132#### 4. ** Standards-Based** 📋
133133
134- Works with DTCG JSON - the emerging standard for design tokens:
135-
136134<TokenScriptCodeBlock mode =" json " >
137135{`{
138136 "spacing.base": {
@@ -146,67 +144,6 @@ Works with DTCG JSON - the emerging standard for design tokens:
146144}`}
147145</TokenScriptCodeBlock >
148146
149- TokenScript evaluates the expressions in ` $value ` fields.
150-
151- #### 5. ** Embeddable Everywhere** 🔌
152-
153- Use it how you want:
154-
155- - ** CLI** : ` tokenscript parse_json --json tokens.json `
156- - ** Node.js** : ` import { Interpreter } from '@tokens-studio/tokenscript-interpreter' `
157- - ** Build pipelines** : Integrate with webpack, vite, rollup, etc.
158- - ** Design tools** : Embed in Figma plugins, Sketch, etc.
159-
160- ---
161-
162- ## When Should You Use TokenScript?
163-
164- ### ✅ Perfect for:
165-
166- ** 1. Design Systems with Scale**
167- - 100+ tokens that need to stay in sync
168- - Multiple themes (light/dark, brand variations)
169- - Computed values and relationships
170-
171- ** 2. Color-Heavy Applications**
172- - Need color transformations (lighten, darken, mix)
173- - Working across color spaces (sRGB, P3, Oklch)
174- - Generating accessible color palettes
175-
176- ** 3. Multi-Platform Design Systems**
177- - Tokens used in web, iOS, Android
178- - Need unit conversions (px, pt, dp)
179- - Single source of truth for all platforms
180-
181- ** 4. Design Token Automation**
182- - Automated theme generation
183- - CI/CD integration
184- - Token validation and testing
185-
186- ** 5. Advanced Token Logic**
187- - Conditional tokens based on context
188- - Complex mathematical relationships
189- - Type-safe token transformations
190-
191- ### ⚠️ Maybe overkill for:
192-
193- ** 1. Tiny Projects**
194- - < 20 static tokens
195- - No computed values
196- - Single theme only
197-
198- ** 2. Pure CSS Projects**
199- - Only need CSS custom properties
200- - No JavaScript/native platforms
201- - Simple static values
202-
203- ** 3. No Token Logic**
204- - All values are hardcoded
205- - No relationships between tokens
206- - No transformations needed
207-
208- ---
209-
210147## Real-World Use Cases
211148
212149### Use Case 1: Automated Theme Generation
@@ -226,7 +163,7 @@ variable darkText: Color = invert(lightText);
226163
227164// Ensure accessibility
228165if (contrast(darkText, darkBg) < 4.5) [
229- darkText = lighten(darkText, 20);
166+ darkText = lighten(darkText, 20);
230167] `}
231168</TokenScriptCodeBlock >
232169
@@ -290,28 +227,28 @@ variable remSpacing: NumberWithUnit = baseSpacing.convertTo("rem", 16); // 1rem
290227
291228## TokenScript vs. Alternatives
292229
293- | Feature | TokenScript | Style Dictionary | Theo | CSS Variables | Custom Scripts |
294- | ---------| -------------| ------------------| ------| ---------------| ----------------|
295- | ** Type Safety** | ✅ Built-in | ❌ No | ❌ No | ❌ No | 🟡 DIY |
296- | ** Color Spaces** | ✅ Oklch, P3+ | 🟡 Basic | 🟡 Basic | 🟡 Limited | 🟡 DIY |
297- | ** DTCG Standard** | ✅ Native | 🟡 Plugin | ❌ No | N/A | 🟡 DIY |
298- | ** Logic/Conditions** | ✅ Full language | 🟡 Transforms | 🟡 Limited | ❌ No | ✅ Yes (custom) |
299- | ** Embeddable** | ✅ CLI + API | 🟡 CLI mainly | 🟡 CLI mainly | N/A | 🟡 DIY |
300- | ** Learning Curve** | 🟡 Moderate | 🟡 Moderate | 🟢 Easy | 🟢 Easy | 🔴 High (custom) |
301- | ** Extensibility** | ✅ JSON schemas | 🟡 Transforms | 🟡 Limited | ❌ No | ✅ Full (custom) |
230+ | Feature | TokenScript | Style Dictionary | Theo | CSS Variables | Custom Scripts |
231+ | ---------------------- | ------------------ | ------------------| --------------- | ---------------| -- ----------------|
232+ | ** Type Safety** | ✅ Built-in | ❌ No | ❌ No | ❌ No | 🟡 DIY |
233+ | ** Color Spaces** | ✅ Oklch, P3+ | 🟡 Basic | 🟡 Basic | 🟡 Limited | 🟡 DIY |
234+ | ** DTCG Standard** | ✅ Native | 🟡 Plugin | ❌ No | N/A | 🟡 DIY |
235+ | ** Logic/Conditions** | ✅ Full language | 🟡 Transforms | 🟡 Limited | ❌ No | ✅ Yes (custom) |
236+ | ** Embeddable** | ✅ CLI + API | 🟡 CLI mainly | 🟡 CLI mainly | N/A | 🟡 DIY |
237+ | ** Learning Curve** | 🟡 Moderate | 🟡 Moderate | 🟢 Easy | 🟢 Easy | 🔴 High (custom) |
238+ | ** Extensibility** | ✅ JSON schemas | 🟡 Transforms | 🟡 Limited | ❌ No | ✅ Full (custom) |
302239
303240---
304241
305242## What Can You Build With TokenScript?
306243
307- - ✅ ** Design token resolvers** - Turn DTCG JSON into platform-specific formats
308- - ✅ ** Theme generators** - Auto-generate theme variations
309- - ✅ ** Color tools** - Build color palette generators
310- - ✅ ** Design system validators** - Check token consistency
311- - ✅ ** Build plugins** - Integrate with webpack, vite, rollup
312- - ✅ ** Design tool plugins** - Use in Figma, Sketch, etc.
313- - ✅ ** CLI tools** - Automate token workflows
314- - ✅ ** Token documentation** - Auto-generate docs from tokens
244+ - ** Design token resolvers** - Turn DTCG JSON into platform-specific formats
245+ - ** Theme generators** - Auto-generate theme variations
246+ - ** Color tools** - Build color palette generators
247+ - ** Design system validators** - Check token consistency
248+ - ** Build plugins** - Integrate with webpack, vite, rollup
249+ - ** Design tool plugins** - Use in Figma, Sketch, etc.
250+ - ** CLI tools** - Automate token workflows
251+ - ** Token documentation** - Auto-generate docs from tokens
315252
316253---
317254
@@ -321,32 +258,19 @@ Ready to try TokenScript? Here's how:
321258
322259### 1. ** Quick Start (5 minutes)**
323260``` bash
324- npm install -g @tokens-studio/tokenscript-interpreter
325- tokenscript parse_json --json your-tokens.json
261+ npm install @tokens-studio/tokenscript-interpreter
326262```
327- [ → Follow the Quick Start Guide] ( /intro/quick-start )
263+ [ Follow the Quick Start Guide] ( /intro/quick-start )
328264
329265### 2. ** Learn the Language**
330266Write your first TokenScript and understand the syntax.
331267
332- [ → Language Tutorial] ( /language/tutorial )
268+ [ Language Tutorial] ( /language/tutorial )
333269
334270### 3. ** Integrate in Your Project**
335271Embed the interpreter in your build pipeline.
336272
337- [ → API & Integration Guide] ( /api/getting-started )
338-
339- ---
340-
341- ## Still Have Questions?
342-
343- - ** "Is this production-ready?"** - Yes! Used in production by design systems teams.
344- - ** "Can I extend it?"** - Absolutely! Add custom color spaces, units, and functions.
345- - ** "Does it work with [ tool] ?"** - If it can run Node.js or call a CLI, yes!
346- - ** "How's the performance?"** - Fast! Processes thousands of tokens in milliseconds.
347- - ** "Is there a community?"** - Growing! Join us on GitHub.
348-
349- ---
273+ [ API & Integration Guide] ( /api/getting-started )
350274
351275## Next Steps
352276
0 commit comments