Skip to content

Commit 956d598

Browse files
committed
Readme updates
1 parent 75c9da7 commit 956d598

File tree

1 file changed

+22
-98
lines changed

1 file changed

+22
-98
lines changed

docs-intro/why-tokenscript.md

Lines changed: 22 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -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
228165
if (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**
330266
Write 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**
335271
Embed 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

Comments
 (0)