@telegraph/tokens 0.1.1 → 0.1.3

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +560 -14
  3. package/dist/css/default.css +1 -1
  4. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @telegraph/tokens
2
2
 
3
+ ## 0.1.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#653](https://github.com/knocklabs/telegraph/pull/653) [`d6c6aa9`](https://github.com/knocklabs/telegraph/commit/d6c6aa9cb0e11ba96df7d7efd479c8e4652fc029) Thanks [@dependabot](https://github.com/apps/dependabot)! - chore(deps): bump react and @types/react
8
+
9
+ ## 0.1.2
10
+
11
+ ### Patch Changes
12
+
13
+ - [#587](https://github.com/knocklabs/telegraph/pull/587) [`0474256`](https://github.com/knocklabs/telegraph/commit/047425631c37101998e39896a34812da5bd4dcbb) Thanks [@kylemcd](https://github.com/kylemcd)! - fix: tokens shouldn't need explicit appearance data attribute
14
+
3
15
  ## 0.1.1
4
16
 
5
17
  ### Patch Changes
package/README.md CHANGED
@@ -1,32 +1,578 @@
1
- ![Telegraph by Knock](https://github.com/knocklabs/telegraph/assets/29106675/9b5022e3-b02c-4582-ba57-3d6171e45e44)
1
+ # 🎨 Design Tokens
2
2
 
3
- [![npm version](https://img.shields.io/npm/v/@telegraph/tokens.svg)](https://www.npmjs.com/package/@telegraph/tokens)
3
+ > Complete design token system providing consistent colors, spacing, typography, and layout values for the Telegraph design system.
4
4
 
5
- # @telegraph/tokens
6
- > Stylesheet that configures the design tokens inside of telegraph components
5
+ ![Telegraph by Knock](https://github.com/knocklabs/telegraph/assets/29106675/9b5022e3-b02c-4582-ba57-3d6171e45e44)
7
6
 
7
+ [![npm version](https://img.shields.io/npm/v/@telegraph/tokens.svg)](https://www.npmjs.com/package/@telegraph/tokens)
8
+ [![minzipped size](https://img.shields.io/bundlephobia/minzip/@telegraph/tokens)](https://bundlephobia.com/result?p=@telegraph/tokens)
9
+ [![license](https://img.shields.io/npm/l/@telegraph/tokens)](https://github.com/knocklabs/telegraph/blob/main/LICENSE)
8
10
 
9
- ### Installation Instructions
11
+ ## Installation
10
12
 
11
- ```
13
+ ```bash
12
14
  npm install @telegraph/tokens
13
15
  ```
14
16
 
17
+ ### Add stylesheet
15
18
 
16
- #### Add stylesheet
17
19
  Pick one:
18
20
 
19
21
  Via CSS (preferred):
20
- ```
21
- @import "@telegraph/tokens"
22
+
23
+ ```css
24
+ @import "@telegraph/tokens";
22
25
  ```
23
26
 
24
27
  Via Javascript:
28
+
29
+ ```tsx
30
+ import "@telegraph/tokens/dark.css";
31
+ import "@telegraph/tokens/default.css";
32
+ import "@telegraph/tokens/light.css";
33
+ ```
34
+
35
+ > **Note**: Include `className="tgph"` on the farthest parent element wrapping the telegraph components
36
+
37
+ ## Quick Start
38
+
39
+ ```css
40
+ /* Using tokens in CSS */
41
+ .my-component {
42
+ background: var(--tgph-blue-3);
43
+ color: var(--tgph-blue-11);
44
+ padding: var(--tgph-space-4);
45
+ border-radius: var(--tgph-radius-2);
46
+ font-size: var(--tgph-font-size-2);
47
+ }
48
+ ```
49
+
50
+ ```tsx
51
+ // Using tokens in JavaScript
52
+ import { tokens } from "@telegraph/tokens";
53
+
54
+ const MyComponent = () => (
55
+ <div
56
+ style={{
57
+ background: tokens["--tgph-blue-3"],
58
+ color: tokens["--tgph-blue-11"],
59
+ padding: tokens["--tgph-space-4"],
60
+ borderRadius: tokens["--tgph-radius-2"],
61
+ fontSize: tokens["--tgph-font-size-2"],
62
+ }}
63
+ >
64
+ Styled with tokens
65
+ </div>
66
+ );
67
+ ```
68
+
69
+ ## What are Design Tokens?
70
+
71
+ Design tokens are the atomic values of a design system. They store visual design decisions such as colors, spacing, typography scale, and more. Telegraph tokens provide:
72
+
73
+ - **Consistency**: Unified visual language across all components
74
+ - **Maintainability**: Single source of truth for design values
75
+ - **Scalability**: Easy theme changes and brand customization
76
+ - **Accessibility**: Built-in contrast ratios and accessibility considerations
77
+ - **Multi-platform**: Usable across web, mobile, and other platforms
78
+
79
+ ## Token Categories
80
+
81
+ ### Color System
82
+
83
+ Telegraph uses a semantic color system with 12-step scales for each color, providing optimal contrast ratios and visual hierarchy.
84
+
85
+ #### Primary Colors
86
+
87
+ | Token | Light Value | Dark Value | Usage |
88
+ | ---------------- | ----------- | ---------- | --------------------- |
89
+ | `--tgph-blue-1` | `#fbfdff` | `#0d1419` | Subtle backgrounds |
90
+ | `--tgph-blue-3` | `#e1f0ff` | `#1e2a35` | Component backgrounds |
91
+ | `--tgph-blue-6` | `#70b9ff` | `#3d6b8c` | Borders, separators |
92
+ | `--tgph-blue-9` | `#0066cc` | `#4a9eff` | Primary actions |
93
+ | `--tgph-blue-11` | `#004499` | `#70b9ff` | Text, high contrast |
94
+ | `--tgph-blue-12` | `#002244` | `#c2e5ff` | Headings, emphasis |
95
+
96
+ #### Semantic Colors
97
+
98
+ | Color | Scale | Primary Use Cases |
99
+ | -------- | ----- | -------------------------------------- |
100
+ | `gray` | 1-12 | Neutral backgrounds, text, borders |
101
+ | `red` | 1-12 | Errors, destructive actions, alerts |
102
+ | `green` | 1-12 | Success states, positive actions |
103
+ | `yellow` | 1-12 | Warnings, caution states |
104
+ | `purple` | 1-12 | Secondary brand, special features |
105
+ | `accent` | 1-12 | Contextual highlights, call-to-actions |
106
+
107
+ ### Spacing Scale
108
+
109
+ Consistent spacing system based on a 4px grid with exponential scaling.
110
+
111
+ | Token | Value | Rem | Usage |
112
+ | ----------------- | ------ | --------- | ------------------------------ |
113
+ | `--tgph-space-1` | `4px` | `0.25rem` | Minimal spacing, tight layouts |
114
+ | `--tgph-space-2` | `8px` | `0.5rem` | Small gaps, compact components |
115
+ | `--tgph-space-3` | `12px` | `0.75rem` | Component padding |
116
+ | `--tgph-space-4` | `16px` | `1rem` | Standard spacing unit |
117
+ | `--tgph-space-5` | `20px` | `1.25rem` | Comfortable spacing |
118
+ | `--tgph-space-6` | `24px` | `1.5rem` | Section spacing |
119
+ | `--tgph-space-8` | `32px` | `2rem` | Large gaps |
120
+ | `--tgph-space-12` | `48px` | `3rem` | Major layout spacing |
121
+
122
+ ### Typography Scale
123
+
124
+ Type system with optimal line heights and sizes for web interfaces.
125
+
126
+ | Token | Size | Line Height | Usage |
127
+ | -------------------- | ------ | ----------- | ------------------- |
128
+ | `--tgph-font-size-0` | `12px` | `16px` | Captions, meta text |
129
+ | `--tgph-font-size-1` | `14px` | `20px` | Body text, labels |
130
+ | `--tgph-font-size-2` | `16px` | `24px` | Default body text |
131
+ | `--tgph-font-size-3` | `18px` | `26px` | Emphasized text |
132
+ | `--tgph-font-size-4` | `20px` | `28px` | Small headings |
133
+ | `--tgph-font-size-5` | `24px` | `32px` | Section headings |
134
+ | `--tgph-font-size-6` | `30px` | `38px` | Page headings |
135
+ | `--tgph-font-size-7` | `36px` | `44px` | Large headings |
136
+ | `--tgph-font-size-8` | `48px` | `56px` | Display text |
137
+ | `--tgph-font-size-9` | `60px` | `68px` | Hero text |
138
+
139
+ ### Border Radius
140
+
141
+ Consistent corner rounding for components and layouts.
142
+
143
+ | Token | Value | Usage |
144
+ | -------------------- | -------- | ------------------------ |
145
+ | `--tgph-radius-1` | `3px` | Small components, badges |
146
+ | `--tgph-radius-2` | `6px` | Standard components |
147
+ | `--tgph-radius-3` | `9px` | Cards, panels |
148
+ | `--tgph-radius-4` | `12px` | Large components |
149
+ | `--tgph-radius-5` | `15px` | Prominent elements |
150
+ | `--tgph-radius-6` | `19px` | Extra large radius |
151
+ | `--tgph-radius-full` | `9999px` | Circular elements |
152
+
153
+ ### Shadows
154
+
155
+ Elevation system for depth and hierarchy.
156
+
157
+ | Token | Value | Usage |
158
+ | ----------------- | ----------------------------- | ------------------- |
159
+ | `--tgph-shadow-1` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle depth |
160
+ | `--tgph-shadow-2` | `0 2px 4px rgba(0,0,0,0.1)` | Component elevation |
161
+ | `--tgph-shadow-3` | `0 4px 8px rgba(0,0,0,0.12)` | Card elevation |
162
+ | `--tgph-shadow-4` | `0 8px 16px rgba(0,0,0,0.15)` | Modal, dropdown |
163
+ | `--tgph-shadow-5` | `0 16px 32px rgba(0,0,0,0.2)` | Maximum elevation |
164
+
165
+ ### Breakpoints
166
+
167
+ Responsive design breakpoints for consistent layouts.
168
+
169
+ | Token | Value | Usage |
170
+ | ----------------------- | -------- | -------------- |
171
+ | `--tgph-breakpoint-xs` | `480px` | Mobile devices |
172
+ | `--tgph-breakpoint-sm` | `640px` | Small tablets |
173
+ | `--tgph-breakpoint-md` | `768px` | Tablets |
174
+ | `--tgph-breakpoint-lg` | `1024px` | Laptops |
175
+ | `--tgph-breakpoint-xl` | `1280px` | Desktops |
176
+ | `--tgph-breakpoint-2xl` | `1536px` | Large screens |
177
+
178
+ ## Usage Patterns
179
+
180
+ ### Basic CSS Implementation
181
+
182
+ ```css
183
+ /* Component styling with tokens */
184
+ .card {
185
+ background: var(--tgph-gray-1);
186
+ border: 1px solid var(--tgph-gray-6);
187
+ border-radius: var(--tgph-radius-3);
188
+ padding: var(--tgph-space-4);
189
+ box-shadow: var(--tgph-shadow-2);
190
+ }
191
+
192
+ .card-title {
193
+ color: var(--tgph-gray-12);
194
+ font-size: var(--tgph-font-size-4);
195
+ line-height: var(--tgph-line-height-4);
196
+ margin-bottom: var(--tgph-space-2);
197
+ }
198
+
199
+ .card-content {
200
+ color: var(--tgph-gray-11);
201
+ font-size: var(--tgph-font-size-2);
202
+ line-height: var(--tgph-line-height-2);
203
+ }
204
+ ```
205
+
206
+ ### JavaScript/TypeScript Usage
207
+
208
+ ```tsx
209
+ import { tokens } from "@telegraph/tokens";
210
+
211
+ // Access individual tokens
212
+ const primaryColor = tokens["--tgph-blue-9"];
213
+ const spacing = tokens["--tgph-space-4"];
214
+
215
+ // Use in React styles
216
+ const Button = ({ children, variant = "primary" }) => {
217
+ const styles = {
218
+ backgroundColor:
219
+ variant === "primary" ? tokens["--tgph-blue-9"] : tokens["--tgph-gray-3"],
220
+ color:
221
+ variant === "primary"
222
+ ? tokens["--tgph-blue-contrast"]
223
+ : tokens["--tgph-gray-11"],
224
+ padding: `${tokens["--tgph-space-2"]} ${tokens["--tgph-space-4"]}`,
225
+ borderRadius: tokens["--tgph-radius-2"],
226
+ border: "none",
227
+ fontSize: tokens["--tgph-font-size-2"],
228
+ };
229
+
230
+ return <button style={styles}>{children}</button>;
231
+ };
25
232
  ```
26
- import "@telegraph/tokens/default.css"
27
- OR
28
- import "@telegraph/tokens/light.css"
29
- OR
30
- import "@telegraph/tokens/dark.css"
233
+
234
+ ### Theme Customization
235
+
236
+ ```css
237
+ /* Light theme overrides */
238
+ .tgph[data-theme="light"] {
239
+ --tgph-gray-1: #ffffff;
240
+ --tgph-gray-2: #fcfcfc;
241
+ --tgph-gray-12: #1a1a1a;
242
+ }
243
+
244
+ /* Dark theme overrides */
245
+ .tgph[data-theme="dark"] {
246
+ --tgph-gray-1: #0a0a0a;
247
+ --tgph-gray-2: #111111;
248
+ --tgph-gray-12: #ffffff;
249
+ }
250
+
251
+ /* Custom brand colors */
252
+ .tgph[data-brand="custom"] {
253
+ --tgph-accent-9: #ff6b35;
254
+ --tgph-accent-contrast: #ffffff;
255
+ }
31
256
  ```
32
257
 
258
+ ## Advanced Usage
259
+
260
+ ### Token Generation Scripts
261
+
262
+ ```javascript
263
+ // scripts/generate-tokens.js
264
+ const fs = require("fs");
265
+ const tokens = require("@telegraph/tokens");
266
+
267
+ // Generate CSS custom properties
268
+ const generateCSS = (tokens) => {
269
+ const css = Object.entries(tokens)
270
+ .map(([key, value]) => ` ${key}: ${value};`)
271
+ .join("\n");
272
+
273
+ return `.tgph {\n${css}\n}`;
274
+ };
275
+
276
+ // Generate TypeScript definitions
277
+ const generateTypes = (tokens) => {
278
+ const keys = Object.keys(tokens)
279
+ .map((key) => `"${key}"`)
280
+ .join(" | ");
281
+ return `export type TokenKey = ${keys};\n`;
282
+ };
283
+
284
+ // Write files
285
+ fs.writeFileSync("dist/tokens.css", generateCSS(tokens));
286
+ fs.writeFileSync("dist/tokens.d.ts", generateTypes(tokens));
287
+ ```
288
+
289
+ ### CSS-in-JS Integration
290
+
291
+ ```tsx
292
+ // Styled Components integration
293
+ // Emotion integration
294
+ import { css } from "@emotion/react";
295
+ import { tokens } from "@telegraph/tokens";
296
+ import styled from "styled-components";
297
+
298
+ const StyledCard = styled.div`
299
+ background: ${tokens["--tgph-gray-1"]};
300
+ border: 1px solid ${tokens["--tgph-gray-6"]};
301
+ border-radius: ${tokens["--tgph-radius-3"]};
302
+ padding: ${tokens["--tgph-space-4"]};
303
+ box-shadow: ${tokens["--tgph-shadow-2"]};
304
+ `;
305
+
306
+ const cardStyles = css`
307
+ background: ${tokens["--tgph-gray-1"]};
308
+ border: 1px solid ${tokens["--tgph-gray-6"]};
309
+ border-radius: ${tokens["--tgph-radius-3"]};
310
+ padding: ${tokens["--tgph-space-4"]};
311
+ box-shadow: ${tokens["--tgph-shadow-2"]};
312
+ `;
313
+ ```
314
+
315
+ ### Design System Documentation
316
+
317
+ ```tsx
318
+ // Token documentation component
319
+ import { tokens } from "@telegraph/tokens";
320
+
321
+ const ColorSwatches = () => {
322
+ const colorTokens = Object.entries(tokens)
323
+ .filter(([key]) => key.includes("blue"))
324
+ .map(([key, value]) => ({ key, value }));
325
+
326
+ return (
327
+ <div className="color-swatches">
328
+ {colorTokens.map(({ key, value }) => (
329
+ <div key={key} className="swatch">
330
+ <div className="swatch-color" style={{ backgroundColor: value }} />
331
+ <div className="swatch-info">
332
+ <code>{key}</code>
333
+ <span>{value}</span>
334
+ </div>
335
+ </div>
336
+ ))}
337
+ </div>
338
+ );
339
+ };
340
+ ```
341
+
342
+ ## Design Tokens & Styling
343
+
344
+ The tokens package is the foundation of Telegraph's design system:
345
+
346
+ - **Semantic Naming**: Tokens use semantic names that describe their purpose
347
+ - **Scale-based Values**: Consistent mathematical relationships between values
348
+ - **Accessibility Built-in**: Color contrasts meet WCAG AA standards
349
+ - **Platform Agnostic**: Usable across web, mobile, and other platforms
350
+
351
+ ### Token Naming Convention
352
+
353
+ ```
354
+ --tgph-{category}-{variant}-{scale}
355
+
356
+ Examples:
357
+ --tgph-blue-9 // Color: blue, scale 9
358
+ --tgph-space-4 // Spacing: scale 4
359
+ --tgph-font-size-2 // Typography: font size scale 2
360
+ --tgph-radius-3 // Border radius: scale 3
361
+ ```
362
+
363
+ ### Color Contrast Guidelines
364
+
365
+ | Scale | Contrast Use | Min Contrast |
366
+ | ----- | --------------------- | ------------ |
367
+ | 1-2 | Subtle backgrounds | - |
368
+ | 3-4 | Component backgrounds | 3:1 |
369
+ | 6-8 | Borders, non-text | 3:1 |
370
+ | 9-10 | Interactive elements | 4.5:1 |
371
+ | 11-12 | Text, high contrast | 7:1 |
372
+
373
+ ## Accessibility
374
+
375
+ - ✅ **WCAG Compliance**: All color combinations meet WCAG AA/AAA standards
376
+ - ✅ **High Contrast Support**: Compatible with high contrast modes
377
+ - ✅ **Color Independence**: Never rely solely on color to convey information
378
+ - ✅ **Consistent Focus**: Focus indicators use consistent color and spacing
379
+ - ✅ **Reduced Motion**: Respects user's motion preferences
380
+
381
+ ### Best Practices
382
+
383
+ 1. **Use Semantic Scales**: Choose the appropriate scale for your use case
384
+ 2. **Maintain Contrast**: Ensure sufficient contrast between foreground and background
385
+ 3. **Test with Users**: Validate accessibility with real users and tools
386
+ 4. **Document Usage**: Clearly document when and how to use each token
387
+ 5. **Stay Consistent**: Use tokens consistently across your application
388
+
389
+ ## Examples
390
+
391
+ ### Basic Example
392
+
393
+ ```css
394
+ /* Simple component styling */
395
+ .notification {
396
+ background: var(--tgph-blue-3);
397
+ border: 1px solid var(--tgph-blue-6);
398
+ color: var(--tgph-blue-11);
399
+ padding: var(--tgph-space-3) var(--tgph-space-4);
400
+ border-radius: var(--tgph-radius-2);
401
+ font-size: var(--tgph-font-size-1);
402
+ }
403
+ ```
404
+
405
+ ### Advanced Example
406
+
407
+ ```tsx
408
+ import { tokens } from "@telegraph/tokens";
409
+ import { useMemo } from "react";
410
+
411
+ export const ThemeableButton = ({
412
+ variant = "primary",
413
+ size = "medium",
414
+ children,
415
+ }) => {
416
+ const styles = useMemo(() => {
417
+ const baseStyles = {
418
+ border: "none",
419
+ borderRadius: tokens["--tgph-radius-2"],
420
+ fontFamily: "inherit",
421
+ fontWeight: "500",
422
+ cursor: "pointer",
423
+ transition: "all 0.2s ease",
424
+ };
425
+
426
+ const variantStyles = {
427
+ primary: {
428
+ backgroundColor: tokens["--tgph-blue-9"],
429
+ color: tokens["--tgph-blue-contrast"],
430
+ },
431
+ secondary: {
432
+ backgroundColor: tokens["--tgph-gray-3"],
433
+ color: tokens["--tgph-gray-11"],
434
+ border: `1px solid ${tokens["--tgph-gray-6"]}`,
435
+ },
436
+ ghost: {
437
+ backgroundColor: "transparent",
438
+ color: tokens["--tgph-gray-11"],
439
+ },
440
+ };
441
+
442
+ const sizeStyles = {
443
+ small: {
444
+ padding: `${tokens["--tgph-space-1"]} ${tokens["--tgph-space-3"]}`,
445
+ fontSize: tokens["--tgph-font-size-0"],
446
+ },
447
+ medium: {
448
+ padding: `${tokens["--tgph-space-2"]} ${tokens["--tgph-space-4"]}`,
449
+ fontSize: tokens["--tgph-font-size-1"],
450
+ },
451
+ large: {
452
+ padding: `${tokens["--tgph-space-3"]} ${tokens["--tgph-space-5"]}`,
453
+ fontSize: tokens["--tgph-font-size-2"],
454
+ },
455
+ };
456
+
457
+ return {
458
+ ...baseStyles,
459
+ ...variantStyles[variant],
460
+ ...sizeStyles[size],
461
+ };
462
+ }, [variant, size]);
463
+
464
+ return <button style={styles}>{children}</button>;
465
+ };
466
+ ```
467
+
468
+ ### Real-world Example
469
+
470
+ ```tsx
471
+ import { tokens } from "@telegraph/tokens";
472
+
473
+ export const DashboardCard = ({ title, value, trend, trendValue }) => {
474
+ const cardStyles = {
475
+ background: tokens["--tgph-gray-1"],
476
+ border: `1px solid ${tokens["--tgph-gray-6"]}`,
477
+ borderRadius: tokens["--tgph-radius-3"],
478
+ padding: tokens["--tgph-space-6"],
479
+ boxShadow: tokens["--tgph-shadow-2"],
480
+ transition: "all 0.2s ease",
481
+ };
482
+
483
+ const titleStyles = {
484
+ color: tokens["--tgph-gray-11"],
485
+ fontSize: tokens["--tgph-font-size-1"],
486
+ fontWeight: "500",
487
+ marginBottom: tokens["--tgph-space-2"],
488
+ textTransform: "uppercase",
489
+ letterSpacing: "0.5px",
490
+ };
491
+
492
+ const valueStyles = {
493
+ color: tokens["--tgph-gray-12"],
494
+ fontSize: tokens["--tgph-font-size-7"],
495
+ fontWeight: "700",
496
+ lineHeight: tokens["--tgph-line-height-7"],
497
+ marginBottom: tokens["--tgph-space-3"],
498
+ };
499
+
500
+ const trendStyles = {
501
+ display: "flex",
502
+ alignItems: "center",
503
+ gap: tokens["--tgph-space-2"],
504
+ fontSize: tokens["--tgph-font-size-0"],
505
+ fontWeight: "500",
506
+ color:
507
+ trend === "up"
508
+ ? tokens["--tgph-green-11"]
509
+ : trend === "down"
510
+ ? tokens["--tgph-red-11"]
511
+ : tokens["--tgph-gray-11"],
512
+ };
513
+
514
+ const indicatorStyles = {
515
+ width: tokens["--tgph-space-2"],
516
+ height: tokens["--tgph-space-2"],
517
+ borderRadius: tokens["--tgph-radius-full"],
518
+ backgroundColor:
519
+ trend === "up"
520
+ ? tokens["--tgph-green-9"]
521
+ : trend === "down"
522
+ ? tokens["--tgph-red-9"]
523
+ : tokens["--tgph-gray-9"],
524
+ };
525
+
526
+ return (
527
+ <div style={cardStyles}>
528
+ <div style={titleStyles}>{title}</div>
529
+ <div style={valueStyles}>{value}</div>
530
+ <div style={trendStyles}>
531
+ <div style={indicatorStyles} />
532
+ <span>{trendValue}</span>
533
+ <span>vs last month</span>
534
+ </div>
535
+ </div>
536
+ );
537
+ };
538
+
539
+ // Usage
540
+ export const Dashboard = () => (
541
+ <div className="dashboard-grid">
542
+ <DashboardCard
543
+ title="Total Revenue"
544
+ value="$24,750"
545
+ trend="up"
546
+ trendValue="+12.5%"
547
+ />
548
+ <DashboardCard
549
+ title="Active Users"
550
+ value="1,432"
551
+ trend="up"
552
+ trendValue="+8.2%"
553
+ />
554
+ <DashboardCard
555
+ title="Conversion Rate"
556
+ value="3.24%"
557
+ trend="down"
558
+ trendValue="-2.1%"
559
+ />
560
+ </div>
561
+ );
562
+ ```
563
+
564
+ ## References
565
+
566
+ - [Design System Documentation](https://github.com/knocklabs/telegraph)
567
+ - [Color Theory and Accessibility](https://webaim.org/resources/contrastchecker/)
568
+ - [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
569
+ - [Design Tokens W3C Specification](https://design-tokens.github.io/community-group/)
570
+ - [Radix Colors](https://www.radix-ui.com/colors)
571
+
572
+ ## Contributing
573
+
574
+ See our [Contributing Guide](../../CONTRIBUTING.md) for more details.
575
+
576
+ ## License
577
+
578
+ MIT License - see [LICENSE](../../LICENSE) for details.
package/dist/css/default.css CHANGED
@@ -1 +1 @@
1
- :root{--tgph-border-style-solid:solid;--tgph-border-style-dashed:dashed;--tgph-transparent:transparent;--tgph-white:#fff;--tgph-black:#000;--tgph-alpha-white-1:#ffffff0d;--tgph-alpha-white-2:#ffffff1a;--tgph-alpha-white-3:#ffffff26;--tgph-alpha-white-4:#fff3;--tgph-alpha-white-5:#ffffff4d;--tgph-alpha-white-6:#fff6;--tgph-alpha-white-7:#ffffff80;--tgph-alpha-white-8:#fff9;--tgph-alpha-white-9:#ffffffb3;--tgph-alpha-white-10:#fffc;--tgph-alpha-white-11:#ffffffe6;--tgph-alpha-white-12:#fffffff2;--tgph-alpha-black-1:#0000000d;--tgph-alpha-black-2:#0000001a;--tgph-alpha-black-3:#00000026;--tgph-alpha-black-4:#0003;--tgph-alpha-black-5:#0000004d;--tgph-alpha-black-6:#0006;--tgph-alpha-black-7:#00000080;--tgph-alpha-black-8:#0009;--tgph-alpha-black-9:#000000b3;--tgph-alpha-black-10:#000c;--tgph-alpha-black-11:#000000e6;--tgph-alpha-black-12:#000000f2;--tgph-rounded-0:0px;--tgph-rounded-1:.125rem;--tgph-rounded-2:.25rem;--tgph-rounded-3:.375rem;--tgph-rounded-4:.5rem;--tgph-rounded-5:.75rem;--tgph-rounded-6:1rem;--tgph-rounded-full:9999px;--tgph-shadow-0:0px 0px 0px 0px #0000;--tgph-shadow-1:0px 5px 2px 0px #1c202403,0px 3px 2px 0px #1c202408,0px 1px 1px 0px #1c20240d,0px 0px 1px 0px #1c20240f;--tgph-shadow-2:0px 16px 7px 0px #1c202403,0px 9px 6px 0px #1c202408,0px 4px 4px 0px #1c20240d,0px 1px 2px 0px #1c20240f;--tgph-shadow-3:0px 29px 12px 0px #1c202403,0px 16px 10px 0px #1c202408,0px 7px 7px 0px #1c20240d,0px 2px 4px 0px #1c20240f;--tgph-shadow-inner:0px 5px 2px 0px #1c202403 inset,0px 3px 2px 0px #1c202408 inset,0px 1px 1px 0px #1c20240d inset,0px 0px 1px 0px #1c20240f inset;--tgph-spacing-0:0px;--tgph-spacing-1:.25rem;--tgph-spacing-2:.5rem;--tgph-spacing-3:.75rem;--tgph-spacing-4:1rem;--tgph-spacing-5:1.25rem;--tgph-spacing-6:1.5rem;--tgph-spacing-7:1.75rem;--tgph-spacing-8:2rem;--tgph-spacing-9:2.25rem;--tgph-spacing-10:2.5rem;--tgph-spacing-11:2.75rem;--tgph-spacing-12:3rem;--tgph-spacing-14:3.5rem;--tgph-spacing-16:4rem;--tgph-spacing-20:5rem;--tgph-spacing-24:6rem;--tgph-spacing-28:7rem;--tgph-spacing-32:8rem;--tgph-spacing-36:9rem;--tgph-spacing-40:10rem;--tgph-spacing-44:11rem;--tgph-spacing-48:12rem;--tgph-spacing-52:13rem;--tgph-spacing-56:14rem;--tgph-spacing-60:15rem;--tgph-spacing-64:16rem;--tgph-spacing-72:18rem;--tgph-spacing-80:20rem;--tgph-spacing-96:24rem;--tgph-spacing-120:30rem;--tgph-spacing-140:35rem;--tgph-spacing-160:40rem;--tgph-spacing-px:1px;--tgph-spacing-0_5:.125rem;--tgph-spacing-1_5:.375rem;--tgph-spacing-2_5:.625rem;--tgph-spacing-3_5:.875rem;--tgph-spacing-full:100%;--tgph-spacing-auto:auto;--tgph-family-sans:Inter,-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--tgph-family-mono:Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;--tgph-leading-0:1rem;--tgph-leading-1:1rem;--tgph-leading-2:1.25rem;--tgph-leading-3:1.5rem;--tgph-leading-4:1.5rem;--tgph-leading-5:1.75rem;--tgph-leading-6:2rem;--tgph-leading-7:2.25rem;--tgph-leading-8:2.5rem;--tgph-leading-9:3.5rem;--tgph-leading-code-0:1rem;--tgph-leading-code-1:1rem;--tgph-leading-code-2:1.25rem;--tgph-leading-code-3:1.5rem;--tgph-leading-code-4:1.75rem;--tgph-leading-code-5:1.75rem;--tgph-leading-code-6:2rem;--tgph-leading-code-7:2.25rem;--tgph-leading-code-8:2.5rem;--tgph-leading-code-9:3rem;--tgph-tracking-0:0.25%;--tgph-tracking-1:0.25%;--tgph-tracking-2:0;--tgph-tracking-3:0;--tgph-tracking-4:-0.25%;--tgph-tracking-5:-0.5%;--tgph-tracking-6:-0.625%;--tgph-tracking-7:-0.75%;--tgph-tracking-8:-1%;--tgph-tracking-9:-2.5%;--tgph-text-0:.6875rem;--tgph-text-1:.75rem;--tgph-text-2:.8125rem;--tgph-text-3:.9375rem;--tgph-text-4:1.125rem;--tgph-text-5:1.25rem;--tgph-text-6:1.5rem;--tgph-text-7:1.875rem;--tgph-text-8:2.25rem;--tgph-text-9:3rem;--tgph-text-code-0:.625rem;--tgph-text-code-1:.688rem;--tgph-text-code-2:.812rem;--tgph-text-code-4:1.062rem;--tgph-text-code-5:1.188rem;--tgph-text-code-6:1.438rem;--tgph-text-code-7:1.75rem;--tgph-text-code-8:2.125rem;--tgph-text-code-9:2.875rem;--tgph-weight-regular:400;--tgph-weight-medium:500;--tgph-weight-semi-bold:600;--tgph-breakpoint-sm:640px;--tgph-breakpoint-md:768px;--tgph-breakpoint-lg:1024px;--tgph-breakpoint-xl:1280px;--tgph-breakpoint-2xl:1536px;--tgph-zIndex-hidden:-1;--tgph-zIndex-base:0;--tgph-zIndex-auto:auto;--tgph-zIndex-dropdown:1000;--tgph-zIndex-sticky:1100;--tgph-zIndex-banner:1200;--tgph-zIndex-overlay:1300;--tgph-zIndex-modal:1400;--tgph-zIndex-popover:1500;--tgph-zIndex-skipLink:1600;--tgph-zIndex-toast:1700;--tgph-zIndex-tooltip:1800}[data-tgph-appearance=light]{--tgph-surface-1:#fff;--tgph-surface-2:#fdfdfc;--tgph-gray-1:#fcfcfd;--tgph-gray-2:#f9f9fb;--tgph-gray-3:#eff0f3;--tgph-gray-4:#e6e8eb;--tgph-gray-5:#dfe2e5;--tgph-gray-6:#d7dadf;--tgph-gray-7:#cbcfd5;--tgph-gray-8:#b6bcc4;--tgph-gray-9:#888e95;--tgph-gray-10:#7e848a;--tgph-gray-11:#60646a;--tgph-gray-12:#1d2023;--tgph-beige-1:#fdfdfc;--tgph-beige-2:#f9f9f8;--tgph-beige-3:#f0f0ef;--tgph-beige-4:#e9e8e7;--tgph-beige-5:#e2e1df;--tgph-beige-6:#dad9d7;--tgph-beige-7:#cfcecc;--tgph-beige-8:#bcbbb8;--tgph-beige-9:#8e8c8a;--tgph-beige-10:#83827f;--tgph-beige-11:#646360;--tgph-beige-12:#21201e;--tgph-accent-1:#fffcfb;--tgph-accent-2:#fff5f2;--tgph-accent-3:#ffe9e2;--tgph-accent-4:#ffd6cb;--tgph-accent-5:#ffc8ba;--tgph-accent-6:#ffb7a6;--tgph-accent-7:#ffa28f;--tgph-accent-8:#f88872;--tgph-accent-9:#ff573a;--tgph-accent-10:#f2472a;--tgph-accent-11:#db3619;--tgph-accent-12:#5c291f;--tgph-green-1:#fbfefc;--tgph-green-2:#f4fbf7;--tgph-green-3:#e4f7ec;--tgph-green-4:#d3f1e0;--tgph-green-5:#bfead2;--tgph-green-6:#a7dfc1;--tgph-green-7:#86d0aa;--tgph-green-8:#4fba8a;--tgph-green-9:#00aa72;--tgph-green-10:#009c68;--tgph-green-11:#00834f;--tgph-green-12:#183b2b;--tgph-yellow-1:#fefdfb;--tgph-yellow-2:#fefbe9;--tgph-yellow-3:#fff7c2;--tgph-yellow-4:#ffee9c;--tgph-yellow-5:#fbe577;--tgph-yellow-6:#f3d673;--tgph-yellow-7:#e9c162;--tgph-yellow-8:#f3d673;--tgph-yellow-9:#ffc53d;--tgph-yellow-10:#ffba18;--tgph-yellow-11:#ab6400;--tgph-yellow-12:#4f3422;--tgph-blue-1:#fcfdff;--tgph-blue-2:#f6f9ff;--tgph-blue-3:#ebf2ff;--tgph-blue-4:#deebff;--tgph-blue-5:#cee0ff;--tgph-blue-6:#bbd3ff;--tgph-blue-7:#a3c1fb;--tgph-blue-8:#81a8f6;--tgph-blue-9:#4a82ff;--tgph-blue-10:#4276ec;--tgph-blue-11:#3569e0;--tgph-blue-12:#193065;--tgph-red-1:#fffcfc;--tgph-red-2:#fff7f7;--tgph-red-3:#ffe9e9;--tgph-red-4:#ffdadb;--tgph-red-5:#ffcbcd;--tgph-red-6:#ffbbbe;--tgph-red-7:#faa7ab;--tgph-red-8:#f28b92;--tgph-red-9:#e9004a;--tgph-red-10:#d9003d;--tgph-red-11:#d9003e;--tgph-red-12:#6c041f;--tgph-purple-1:#fcfcff;--tgph-purple-2:#f8f8ff;--tgph-purple-3:#f1f1ff;--tgph-purple-4:#e6e6ff;--tgph-purple-5:#dadaff;--tgph-purple-6:#cccbff;--tgph-purple-7:#b9b6ff;--tgph-purple-8:#9f99fc;--tgph-purple-9:#6547de;--tgph-purple-10:#583dc4;--tgph-purple-11:#6148d0;--tgph-purple-12:#2e2269}[data-tgph-appearance=dark]{--tgph-surface-1:#18191b;--tgph-surface-2:#101112;--tgph-gray-1:#101112;--tgph-gray-2:#18191b;--tgph-gray-3:#212325;--tgph-gray-4:#282a2d;--tgph-gray-5:#2f3235;--tgph-gray-6:#383b3e;--tgph-gray-7:#45484d;--tgph-gray-8:#5c6268;--tgph-gray-9:#6a6f76;--tgph-gray-10:#777d84;--tgph-gray-11:#afb5bb;--tgph-gray-12:#edeeef;--tgph-beige-1:#12110f;--tgph-beige-2:#191817;--tgph-beige-3:#232220;--tgph-beige-4:#2a2927;--tgph-beige-5:#31302e;--tgph-beige-6:#3b3937;--tgph-beige-7:#484745;--tgph-beige-8:#61605d;--tgph-beige-9:#6e6d6a;--tgph-beige-10:#7c7a78;--tgph-beige-11:#b4b3b0;--tgph-beige-12:#eeedeb;--tgph-accent-1:#160f0d;--tgph-accent-2:#201412;--tgph-accent-3:#3b140d;--tgph-accent-4:#530e04;--tgph-accent-5:#631507;--tgph-accent-6:#742315;--tgph-accent-7:#8d3323;--tgph-accent-8:#b5432f;--tgph-accent-9:#ff573a;--tgph-accent-10:#f1492d;--tgph-accent-11:#ff917a;--tgph-accent-12:#ffd1c7;--tgph-green-1:#0c130f;--tgph-green-2:#111b16;--tgph-green-3:#112d20;--tgph-green-4:#0c3c28;--tgph-green-5:#104a32;--tgph-green-6:#18583d;--tgph-green-7:#1e6949;--tgph-green-8:#217d57;--tgph-green-9:#00aa72;--tgph-green-10:#009d66;--tgph-green-11:#4dd399;--tgph-green-12:#aaf3cc;--tgph-yellow-1:#16120c;--tgph-yellow-2:#1d180f;--tgph-yellow-3:#302008;--tgph-yellow-4:#3f2700;--tgph-yellow-5:#4d3000;--tgph-yellow-6:#5c3d05;--tgph-yellow-7:#714f19;--tgph-yellow-8:#8f6424;--tgph-yellow-9:#ffc53d;--tgph-yellow-10:#ffd60a;--tgph-yellow-11:#ffca16;--tgph-yellow-12:#ffe7b3;--tgph-blue-1:#0b111c;--tgph-blue-2:#111826;--tgph-blue-3:#152548;--tgph-blue-4:#172e63;--tgph-blue-5:#1f3a76;--tgph-blue-6:#294787;--tgph-blue-7:#35569d;--tgph-blue-8:#3f66bb;--tgph-blue-9:#4a82ff;--tgph-blue-10:#3e75f1;--tgph-blue-11:#89b3ff;--tgph-blue-12:#d1e1ff;--tgph-red-1:#180e0f;--tgph-red-2:#201314;--tgph-red-3:#3f0f15;--tgph-red-4:#550517;--tgph-red-5:#670a1f;--tgph-red-6:#79182a;--tgph-red-7:#932738;--tgph-red-8:#c1334a;--tgph-red-9:#e9004a;--tgph-red-10:#c3354c;--tgph-red-11:#ff8e98;--tgph-red-12:#ffcfd1;--tgph-purple-1:#100f1d;--tgph-purple-2:#161528;--tgph-purple-3:#241e4b;--tgph-purple-4:#2e2368;--tgph-purple-5:#382c77;--tgph-purple-6:#423786;--tgph-purple-7:#4f449c;--tgph-purple-8:#6153bd;--tgph-purple-9:#6547de;--tgph-purple-10:#5936cd;--tgph-purple-11:#aea8ff;--tgph-purple-12:#dedeff}
1
+ :root{--tgph-border-style-solid:solid;--tgph-border-style-dashed:dashed;--tgph-transparent:transparent;--tgph-white:#fff;--tgph-black:#000;--tgph-alpha-white-1:#ffffff0d;--tgph-alpha-white-2:#ffffff1a;--tgph-alpha-white-3:#ffffff26;--tgph-alpha-white-4:#fff3;--tgph-alpha-white-5:#ffffff4d;--tgph-alpha-white-6:#fff6;--tgph-alpha-white-7:#ffffff80;--tgph-alpha-white-8:#fff9;--tgph-alpha-white-9:#ffffffb3;--tgph-alpha-white-10:#fffc;--tgph-alpha-white-11:#ffffffe6;--tgph-alpha-white-12:#fffffff2;--tgph-alpha-black-1:#0000000d;--tgph-alpha-black-2:#0000001a;--tgph-alpha-black-3:#00000026;--tgph-alpha-black-4:#0003;--tgph-alpha-black-5:#0000004d;--tgph-alpha-black-6:#0006;--tgph-alpha-black-7:#00000080;--tgph-alpha-black-8:#0009;--tgph-alpha-black-9:#000000b3;--tgph-alpha-black-10:#000c;--tgph-alpha-black-11:#000000e6;--tgph-alpha-black-12:#000000f2;--tgph-rounded-0:0px;--tgph-rounded-1:.125rem;--tgph-rounded-2:.25rem;--tgph-rounded-3:.375rem;--tgph-rounded-4:.5rem;--tgph-rounded-5:.75rem;--tgph-rounded-6:1rem;--tgph-rounded-full:9999px;--tgph-shadow-0:0px 0px 0px 0px #0000;--tgph-shadow-1:0px 5px 2px 0px #1c202403,0px 3px 2px 0px #1c202408,0px 1px 1px 0px #1c20240d,0px 0px 1px 0px #1c20240f;--tgph-shadow-2:0px 16px 7px 0px #1c202403,0px 9px 6px 0px #1c202408,0px 4px 4px 0px #1c20240d,0px 1px 2px 0px #1c20240f;--tgph-shadow-3:0px 29px 12px 0px #1c202403,0px 16px 10px 0px #1c202408,0px 7px 7px 0px #1c20240d,0px 2px 4px 0px #1c20240f;--tgph-shadow-inner:0px 5px 2px 0px #1c202403 inset,0px 3px 2px 0px #1c202408 inset,0px 1px 1px 0px #1c20240d inset,0px 0px 1px 0px #1c20240f inset;--tgph-spacing-0:0px;--tgph-spacing-1:.25rem;--tgph-spacing-2:.5rem;--tgph-spacing-3:.75rem;--tgph-spacing-4:1rem;--tgph-spacing-5:1.25rem;--tgph-spacing-6:1.5rem;--tgph-spacing-7:1.75rem;--tgph-spacing-8:2rem;--tgph-spacing-9:2.25rem;--tgph-spacing-10:2.5rem;--tgph-spacing-11:2.75rem;--tgph-spacing-12:3rem;--tgph-spacing-14:3.5rem;--tgph-spacing-16:4rem;--tgph-spacing-20:5rem;--tgph-spacing-24:6rem;--tgph-spacing-28:7rem;--tgph-spacing-32:8rem;--tgph-spacing-36:9rem;--tgph-spacing-40:10rem;--tgph-spacing-44:11rem;--tgph-spacing-48:12rem;--tgph-spacing-52:13rem;--tgph-spacing-56:14rem;--tgph-spacing-60:15rem;--tgph-spacing-64:16rem;--tgph-spacing-72:18rem;--tgph-spacing-80:20rem;--tgph-spacing-96:24rem;--tgph-spacing-120:30rem;--tgph-spacing-140:35rem;--tgph-spacing-160:40rem;--tgph-spacing-px:1px;--tgph-spacing-0_5:.125rem;--tgph-spacing-1_5:.375rem;--tgph-spacing-2_5:.625rem;--tgph-spacing-3_5:.875rem;--tgph-spacing-full:100%;--tgph-spacing-auto:auto;--tgph-family-sans:Inter,-apple-system,BlinkMacSystemFont,avenir next,avenir,segoe ui,helvetica neue,helvetica,Cantarell,Ubuntu,roboto,noto,arial,sans-serif;--tgph-family-mono:Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;--tgph-leading-0:1rem;--tgph-leading-1:1rem;--tgph-leading-2:1.25rem;--tgph-leading-3:1.5rem;--tgph-leading-4:1.5rem;--tgph-leading-5:1.75rem;--tgph-leading-6:2rem;--tgph-leading-7:2.25rem;--tgph-leading-8:2.5rem;--tgph-leading-9:3.5rem;--tgph-leading-code-0:1rem;--tgph-leading-code-1:1rem;--tgph-leading-code-2:1.25rem;--tgph-leading-code-3:1.5rem;--tgph-leading-code-4:1.75rem;--tgph-leading-code-5:1.75rem;--tgph-leading-code-6:2rem;--tgph-leading-code-7:2.25rem;--tgph-leading-code-8:2.5rem;--tgph-leading-code-9:3rem;--tgph-tracking-0:0.25%;--tgph-tracking-1:0.25%;--tgph-tracking-2:0;--tgph-tracking-3:0;--tgph-tracking-4:-0.25%;--tgph-tracking-5:-0.5%;--tgph-tracking-6:-0.625%;--tgph-tracking-7:-0.75%;--tgph-tracking-8:-1%;--tgph-tracking-9:-2.5%;--tgph-text-0:.6875rem;--tgph-text-1:.75rem;--tgph-text-2:.8125rem;--tgph-text-3:.9375rem;--tgph-text-4:1.125rem;--tgph-text-5:1.25rem;--tgph-text-6:1.5rem;--tgph-text-7:1.875rem;--tgph-text-8:2.25rem;--tgph-text-9:3rem;--tgph-text-code-0:.625rem;--tgph-text-code-1:.688rem;--tgph-text-code-2:.812rem;--tgph-text-code-4:1.062rem;--tgph-text-code-5:1.188rem;--tgph-text-code-6:1.438rem;--tgph-text-code-7:1.75rem;--tgph-text-code-8:2.125rem;--tgph-text-code-9:2.875rem;--tgph-weight-regular:400;--tgph-weight-medium:500;--tgph-weight-semi-bold:600;--tgph-breakpoint-sm:640px;--tgph-breakpoint-md:768px;--tgph-breakpoint-lg:1024px;--tgph-breakpoint-xl:1280px;--tgph-breakpoint-2xl:1536px;--tgph-zIndex-hidden:-1;--tgph-zIndex-base:0;--tgph-zIndex-auto:auto;--tgph-zIndex-dropdown:1000;--tgph-zIndex-sticky:1100;--tgph-zIndex-banner:1200;--tgph-zIndex-overlay:1300;--tgph-zIndex-modal:1400;--tgph-zIndex-popover:1500;--tgph-zIndex-skipLink:1600;--tgph-zIndex-toast:1700;--tgph-zIndex-tooltip:1800;--tgph-surface-1:#fff;--tgph-surface-2:#fdfdfc;--tgph-gray-1:#fcfcfd;--tgph-gray-2:#f9f9fb;--tgph-gray-3:#eff0f3;--tgph-gray-4:#e6e8eb;--tgph-gray-5:#dfe2e5;--tgph-gray-6:#d7dadf;--tgph-gray-7:#cbcfd5;--tgph-gray-8:#b6bcc4;--tgph-gray-9:#888e95;--tgph-gray-10:#7e848a;--tgph-gray-11:#60646a;--tgph-gray-12:#1d2023;--tgph-beige-1:#fdfdfc;--tgph-beige-2:#f9f9f8;--tgph-beige-3:#f0f0ef;--tgph-beige-4:#e9e8e7;--tgph-beige-5:#e2e1df;--tgph-beige-6:#dad9d7;--tgph-beige-7:#cfcecc;--tgph-beige-8:#bcbbb8;--tgph-beige-9:#8e8c8a;--tgph-beige-10:#83827f;--tgph-beige-11:#646360;--tgph-beige-12:#21201e;--tgph-accent-1:#fffcfb;--tgph-accent-2:#fff5f2;--tgph-accent-3:#ffe9e2;--tgph-accent-4:#ffd6cb;--tgph-accent-5:#ffc8ba;--tgph-accent-6:#ffb7a6;--tgph-accent-7:#ffa28f;--tgph-accent-8:#f88872;--tgph-accent-9:#ff573a;--tgph-accent-10:#f2472a;--tgph-accent-11:#db3619;--tgph-accent-12:#5c291f;--tgph-green-1:#fbfefc;--tgph-green-2:#f4fbf7;--tgph-green-3:#e4f7ec;--tgph-green-4:#d3f1e0;--tgph-green-5:#bfead2;--tgph-green-6:#a7dfc1;--tgph-green-7:#86d0aa;--tgph-green-8:#4fba8a;--tgph-green-9:#00aa72;--tgph-green-10:#009c68;--tgph-green-11:#00834f;--tgph-green-12:#183b2b;--tgph-yellow-1:#fefdfb;--tgph-yellow-2:#fefbe9;--tgph-yellow-3:#fff7c2;--tgph-yellow-4:#ffee9c;--tgph-yellow-5:#fbe577;--tgph-yellow-6:#f3d673;--tgph-yellow-7:#e9c162;--tgph-yellow-8:#f3d673;--tgph-yellow-9:#ffc53d;--tgph-yellow-10:#ffba18;--tgph-yellow-11:#ab6400;--tgph-yellow-12:#4f3422;--tgph-blue-1:#fcfdff;--tgph-blue-2:#f6f9ff;--tgph-blue-3:#ebf2ff;--tgph-blue-4:#deebff;--tgph-blue-5:#cee0ff;--tgph-blue-6:#bbd3ff;--tgph-blue-7:#a3c1fb;--tgph-blue-8:#81a8f6;--tgph-blue-9:#4a82ff;--tgph-blue-10:#4276ec;--tgph-blue-11:#3569e0;--tgph-blue-12:#193065;--tgph-red-1:#fffcfc;--tgph-red-2:#fff7f7;--tgph-red-3:#ffe9e9;--tgph-red-4:#ffdadb;--tgph-red-5:#ffcbcd;--tgph-red-6:#ffbbbe;--tgph-red-7:#faa7ab;--tgph-red-8:#f28b92;--tgph-red-9:#e9004a;--tgph-red-10:#d9003d;--tgph-red-11:#d9003e;--tgph-red-12:#6c041f;--tgph-purple-1:#fcfcff;--tgph-purple-2:#f8f8ff;--tgph-purple-3:#f1f1ff;--tgph-purple-4:#e6e6ff;--tgph-purple-5:#dadaff;--tgph-purple-6:#cccbff;--tgph-purple-7:#b9b6ff;--tgph-purple-8:#9f99fc;--tgph-purple-9:#6547de;--tgph-purple-10:#583dc4;--tgph-purple-11:#6148d0;--tgph-purple-12:#2e2269}[data-tgph-appearance=dark]{--tgph-surface-1:#18191b;--tgph-surface-2:#101112;--tgph-gray-1:#101112;--tgph-gray-2:#18191b;--tgph-gray-3:#212325;--tgph-gray-4:#282a2d;--tgph-gray-5:#2f3235;--tgph-gray-6:#383b3e;--tgph-gray-7:#45484d;--tgph-gray-8:#5c6268;--tgph-gray-9:#6a6f76;--tgph-gray-10:#777d84;--tgph-gray-11:#afb5bb;--tgph-gray-12:#edeeef;--tgph-beige-1:#12110f;--tgph-beige-2:#191817;--tgph-beige-3:#232220;--tgph-beige-4:#2a2927;--tgph-beige-5:#31302e;--tgph-beige-6:#3b3937;--tgph-beige-7:#484745;--tgph-beige-8:#61605d;--tgph-beige-9:#6e6d6a;--tgph-beige-10:#7c7a78;--tgph-beige-11:#b4b3b0;--tgph-beige-12:#eeedeb;--tgph-accent-1:#160f0d;--tgph-accent-2:#201412;--tgph-accent-3:#3b140d;--tgph-accent-4:#530e04;--tgph-accent-5:#631507;--tgph-accent-6:#742315;--tgph-accent-7:#8d3323;--tgph-accent-8:#b5432f;--tgph-accent-9:#ff573a;--tgph-accent-10:#f1492d;--tgph-accent-11:#ff917a;--tgph-accent-12:#ffd1c7;--tgph-green-1:#0c130f;--tgph-green-2:#111b16;--tgph-green-3:#112d20;--tgph-green-4:#0c3c28;--tgph-green-5:#104a32;--tgph-green-6:#18583d;--tgph-green-7:#1e6949;--tgph-green-8:#217d57;--tgph-green-9:#00aa72;--tgph-green-10:#009d66;--tgph-green-11:#4dd399;--tgph-green-12:#aaf3cc;--tgph-yellow-1:#16120c;--tgph-yellow-2:#1d180f;--tgph-yellow-3:#302008;--tgph-yellow-4:#3f2700;--tgph-yellow-5:#4d3000;--tgph-yellow-6:#5c3d05;--tgph-yellow-7:#714f19;--tgph-yellow-8:#8f6424;--tgph-yellow-9:#ffc53d;--tgph-yellow-10:#ffd60a;--tgph-yellow-11:#ffca16;--tgph-yellow-12:#ffe7b3;--tgph-blue-1:#0b111c;--tgph-blue-2:#111826;--tgph-blue-3:#152548;--tgph-blue-4:#172e63;--tgph-blue-5:#1f3a76;--tgph-blue-6:#294787;--tgph-blue-7:#35569d;--tgph-blue-8:#3f66bb;--tgph-blue-9:#4a82ff;--tgph-blue-10:#3e75f1;--tgph-blue-11:#89b3ff;--tgph-blue-12:#d1e1ff;--tgph-red-1:#180e0f;--tgph-red-2:#201314;--tgph-red-3:#3f0f15;--tgph-red-4:#550517;--tgph-red-5:#670a1f;--tgph-red-6:#79182a;--tgph-red-7:#932738;--tgph-red-8:#c1334a;--tgph-red-9:#e9004a;--tgph-red-10:#c3354c;--tgph-red-11:#ff8e98;--tgph-red-12:#ffcfd1;--tgph-purple-1:#100f1d;--tgph-purple-2:#161528;--tgph-purple-3:#241e4b;--tgph-purple-4:#2e2368;--tgph-purple-5:#382c77;--tgph-purple-6:#423786;--tgph-purple-7:#4f449c;--tgph-purple-8:#6153bd;--tgph-purple-9:#6547de;--tgph-purple-10:#5936cd;--tgph-purple-11:#aea8ff;--tgph-purple-12:#dedeff}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@telegraph/tokens",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "author": "@knocklabs",
5
5
  "license": "MIT",
6
6
  "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/tokens",
@@ -44,15 +44,15 @@
44
44
  "dev": "vite build --watch --emptyOutDir false"
45
45
  },
46
46
  "devDependencies": {
47
- "@knocklabs/eslint-config": "^0.0.4",
47
+ "@knocklabs/eslint-config": "^0.0.5",
48
48
  "@knocklabs/typescript-config": "^0.0.2",
49
49
  "@telegraph/prettier-config": "^0.0.7",
50
50
  "@telegraph/vite-config": "^0.0.15",
51
51
  "eslint": "^8.56.0",
52
- "lightningcss": "^1.30.1",
53
- "react": "^18.3.1",
54
- "typescript": "^5.7.3",
55
- "vite": "^6.0.11"
52
+ "lightningcss": "^1.30.2",
53
+ "react": "^19.2.3",
54
+ "typescript": "^5.9.3",
55
+ "vite": "^6.4.1"
56
56
  },
57
57
  "peerDependencies": {
58
58
  "react": "^18.0.0 || ^19.0.0"