79 lines
12 KiB
Text
79 lines
12 KiB
Text
{/* Generated by packages/docs/script/generate-theme-tokens.ts. Do not edit. */}
|
|
|
|
```json title="my-theme.json"
|
|
{
|
|
"version": 2,
|
|
"light": {
|
|
"hue": {
|
|
"accent": "$hue.purple",
|
|
"interactive": "$hue.purple"
|
|
},
|
|
"text": {
|
|
"default": "$hue.neutral.900"
|
|
},
|
|
"background": {
|
|
"default": "#fafafa"
|
|
}
|
|
},
|
|
"dark": {
|
|
"mergeMode": true,
|
|
"text": {
|
|
"default": "$hue.neutral.100"
|
|
},
|
|
"background": {
|
|
"default": "#101014"
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Token reference
|
|
|
|
This reference is generated from the Effect schema in
|
|
`packages/tui/src/theme/v2/schema.ts`. Changes to the runtime schema update
|
|
this section through `bun run generate`.
|
|
|
|
### Hue tokens
|
|
|
|
Every hue is a 9-step scale. Define a scale with all of these
|
|
steps, or alias it to another hue with a value such as `$hue.blue`.
|
|
|
|
| | Values |
|
|
| ----- | -------------------------------------------------------------------------------------------------------- |
|
|
| Hues | `gray`, `red`, `orange`, `yellow`, `green`, `cyan`, `blue`, `purple`, `accent`, `interactive`, `neutral` |
|
|
| Steps | `100`, `200`, `300`, `400`, `500`, `600`, `700`, `800`, `900` |
|
|
|
|
Reference a hue color as `$hue.<name>.<step>`, for example
|
|
`$hue.interactive.500`.
|
|
|
|
### Semantic tokens
|
|
|
|
Semantic values can reference another token by prefixing its path with `$`,
|
|
for example `$text.default`. Stateful tokens inherit their `default`
|
|
value when a state is omitted.
|
|
|
|
| Group | Tokens |
|
|
| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
| `text` | `text.default`<br />`text.subdued` |
|
|
| `text.action` | `text.action.primary.default`<br />`text.action.primary.$hovered`<br />`text.action.primary.$focused`<br />`text.action.primary.$pressed`<br />`text.action.primary.$selected`<br />`text.action.primary.$disabled`<br />`text.action.destructive.default`<br />`text.action.destructive.$hovered`<br />`text.action.destructive.$focused`<br />`text.action.destructive.$pressed`<br />`text.action.destructive.$selected`<br />`text.action.destructive.$disabled` |
|
|
| `text.formfield` | `text.formfield.default`<br />`text.formfield.$hovered`<br />`text.formfield.$focused`<br />`text.formfield.$pressed`<br />`text.formfield.$selected`<br />`text.formfield.$disabled` |
|
|
| `text.feedback` | `text.feedback.error.default`<br />`text.feedback.error.subdued`<br />`text.feedback.warning.default`<br />`text.feedback.warning.subdued`<br />`text.feedback.success.default`<br />`text.feedback.success.subdued`<br />`text.feedback.info.default`<br />`text.feedback.info.subdued` |
|
|
| `background` | `background.default` |
|
|
| `background.surface` | `background.surface.offset`<br />`background.surface.overlay` |
|
|
| `background.action` | `background.action.primary.default`<br />`background.action.primary.$hovered`<br />`background.action.primary.$focused`<br />`background.action.primary.$pressed`<br />`background.action.primary.$selected`<br />`background.action.primary.$disabled`<br />`background.action.destructive.default`<br />`background.action.destructive.$hovered`<br />`background.action.destructive.$focused`<br />`background.action.destructive.$pressed`<br />`background.action.destructive.$selected`<br />`background.action.destructive.$disabled` |
|
|
| `background.formfield` | `background.formfield.default`<br />`background.formfield.$hovered`<br />`background.formfield.$focused`<br />`background.formfield.$pressed`<br />`background.formfield.$selected`<br />`background.formfield.$disabled` |
|
|
| `background.feedback` | `background.feedback.error.default`<br />`background.feedback.warning.default`<br />`background.feedback.success.default`<br />`background.feedback.info.default` |
|
|
| `border` | `border.default` |
|
|
| `scrollbar` | `scrollbar.default` |
|
|
| `diff.text` | `diff.text.added`<br />`diff.text.removed`<br />`diff.text.context`<br />`diff.text.hunkHeader` |
|
|
| `diff.background` | `diff.background.added`<br />`diff.background.removed`<br />`diff.background.context` |
|
|
| `diff.highlight` | `diff.highlight.added`<br />`diff.highlight.removed` |
|
|
| `diff.lineNumber` | `diff.lineNumber.text`<br />`diff.lineNumber.background.added`<br />`diff.lineNumber.background.removed` |
|
|
| `syntax` | `syntax.comment`<br />`syntax.keyword`<br />`syntax.function`<br />`syntax.variable`<br />`syntax.string`<br />`syntax.number`<br />`syntax.type`<br />`syntax.operator`<br />`syntax.punctuation` |
|
|
| `markdown` | `markdown.text`<br />`markdown.heading`<br />`markdown.link`<br />`markdown.linkText`<br />`markdown.code`<br />`markdown.blockQuote`<br />`markdown.emphasis`<br />`markdown.strong`<br />`markdown.horizontalRule`<br />`markdown.listItem`<br />`markdown.listEnumeration`<br />`markdown.image`<br />`markdown.imageText`<br />`markdown.codeBlock` |
|
|
|
|
### Contexts
|
|
|
|
`@context:elevated` and `@context:overlay` accept partial
|
|
overrides of the semantic tokens above. Components apply these contexts to
|
|
surfaces that need different contrast without changing the base theme.
|