| 1 |
{ |
| 2 |
"$description": "The look, as data (W3C design tokens). Every colour the app shows is here and nowhere else: src/tokens.ts compiles this to /tokens.css at boot, and bun run lint:design refuses a raw colour anywhere else. A colour's $value is the light theme; $extensions.mode.dark is the dark one.", |
| 3 |
"color": { |
| 4 |
"$type": "color", |
| 5 |
"bg": { |
| 6 |
"$value": "#f6f6f3", |
| 7 |
"$extensions": { "mode": { "dark": "#131312" } } |
| 8 |
}, |
| 9 |
"surface": { |
| 10 |
"$value": "#ffffff", |
| 11 |
"$extensions": { "mode": { "dark": "#1d1d1b" } } |
| 12 |
}, |
| 13 |
"fg": { |
| 14 |
"$value": "#1c1c1a", |
| 15 |
"$extensions": { "mode": { "dark": "#ecece7" } } |
| 16 |
}, |
| 17 |
"muted": { |
| 18 |
"$value": "#6b6b65", |
| 19 |
"$extensions": { "mode": { "dark": "#9a9a93" } } |
| 20 |
}, |
| 21 |
"line": { |
| 22 |
"$value": "#e3e3dd", |
| 23 |
"$extensions": { "mode": { "dark": "#2c2c29" } } |
| 24 |
}, |
| 25 |
"accent": { |
| 26 |
"$value": "#2f5bea", |
| 27 |
"$extensions": { "mode": { "dark": "#7c96ff" } } |
| 28 |
}, |
| 29 |
"accent-fg": { |
| 30 |
"$value": "#ffffff", |
| 31 |
"$extensions": { "mode": { "dark": "#0f1a4d" } } |
| 32 |
}, |
| 33 |
"danger": { |
| 34 |
"$value": "#c2410c", |
| 35 |
"$extensions": { "mode": { "dark": "#fb923c" } } |
| 36 |
}, |
| 37 |
"toast-bg": { |
| 38 |
"$value": "#1c1c1a", |
| 39 |
"$extensions": { "mode": { "dark": "#ecece7" } } |
| 40 |
}, |
| 41 |
"toast-fg": { |
| 42 |
"$value": "#f6f6f3", |
| 43 |
"$extensions": { "mode": { "dark": "#131312" } } |
| 44 |
}, |
| 45 |
"shadow": { |
| 46 |
"$value": "#0000002e", |
| 47 |
"$extensions": { "mode": { "dark": "#00000080" } } |
| 48 |
} |
| 49 |
}, |
| 50 |
"space": { |
| 51 |
"$type": "dimension", |
| 52 |
"1": { "$value": "0.25rem" }, |
| 53 |
"2": { "$value": "0.5rem" }, |
| 54 |
"3": { "$value": "0.75rem" }, |
| 55 |
"4": { "$value": "1rem" }, |
| 56 |
"5": { "$value": "1.5rem" }, |
| 57 |
"6": { "$value": "2.5rem" } |
| 58 |
}, |
| 59 |
"radius": { |
| 60 |
"$type": "dimension", |
| 61 |
"md": { "$value": "10px" }, |
| 62 |
"pill": { "$value": "999px" } |
| 63 |
}, |
| 64 |
"size": { |
| 65 |
"$type": "dimension", |
| 66 |
"tap": { |
| 67 |
"$value": "44px", |
| 68 |
"$description": "The least a control measures on a side." |
| 69 |
} |
| 70 |
}, |
| 71 |
"font": { |
| 72 |
"$type": "fontFamily", |
| 73 |
"sans": { |
| 74 |
"$value": ["system-ui", "-apple-system", "Segoe UI", "sans-serif"] |
| 75 |
}, |
| 76 |
"mono": { |
| 77 |
"$value": ["ui-monospace", "SFMono-Regular", "Menlo", "monospace"] |
| 78 |
} |
| 79 |
}, |
| 80 |
"text": { |
| 81 |
"$type": "dimension", |
| 82 |
"sm": { "$value": "0.875rem" }, |
| 83 |
"base": { |
| 84 |
"$value": "1rem", |
| 85 |
"$description": "Never below 16px: a phone zooms into a smaller input." |
| 86 |
}, |
| 87 |
"lg": { "$value": "1.125rem" }, |
| 88 |
"xl": { "$value": "1.5rem" } |
| 89 |
}, |
| 90 |
"leading": { |
| 91 |
"$type": "number", |
| 92 |
"body": { "$value": 1.55 }, |
| 93 |
"tight": { "$value": 1.2 } |
| 94 |
} |
| 95 |
} |