| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879 |
- {/* Generated by packages/www/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
- `@opencode-ai/theme/tui`. 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.
|
