Skip to content

docs(skill): list all Theme tokens, warn about hallucinated ones #287

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
codemonkeychris merged 2 commits into from
May 15, 2026
Merged

docs(skill): list all Theme tokens, warn about hallucinated ones #287

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f685088
docs(skill): list all Theme tokens, warn about hallucinated ones
sundaramramaswamy May 14, 2026
26eb6c0
refactor: move token table to reactor-design skill
sundaramramaswamy May 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 29 additions & 1 deletion plugins/reactor/skills/reactor-getting-started/SKILL.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,12 +230,40 @@ items.Select(i => Component<Card, CardProps>(new CardProps(i)).WithKey(i.Id)).To

## Theme tokens (always)

Use `Theme.*` for all themed colors — never hardcoded hex on themed surfaces. The full token list with WinUI keys is in the api index.
Use `Theme.*` for all themed colors — never hardcoded hex on themed surfaces.

> ⚠️ **`Theme.Error`, `Theme.Success`, `Theme.Warning`, `Theme.ErrorText` do NOT exist.**
> Use `Theme.SystemCritical` (red/error), `Theme.SystemSuccess` (green), `Theme.SystemCaution` (yellow).

**Available tokens:**

| Category | Token | Use for |
|---|---|---|
| Accent | `Theme.Accent` | Primary action buttons, links |
| Accent | `Theme.AccentSecondary`, `.AccentTertiary` | Hover/pressed states |
| Text | `Theme.PrimaryText` | Body text |
| Text | `Theme.SecondaryText`, `.TertiaryText` | Subtitles, captions |
| Text | `Theme.AccentText` | Colored/linked text |
| Surface | `Theme.SolidBackground` | Page/window background |
| Surface | `Theme.CardBackground` | Card/panel fill |
| Surface | `Theme.SubtleFill`, `.LayerFill` | Hover/surface layers |
| Stroke | `Theme.CardStroke`, `.SurfaceStroke` | Card/panel borders |
| Stroke | `Theme.DividerStroke` | Separators |
| Signal | `Theme.SystemCritical` | Error/danger (red) |
| Signal | `Theme.SystemSuccess` | Success (green) |
| Signal | `Theme.SystemCaution` | Warning (yellow/orange) |
| Signal | `Theme.SystemAttention` | Info/attention (blue) |
| Signal | `Theme.SystemCriticalBackground` | Error background |
| Signal | `Theme.SystemSuccessBackground` | Success background |

For any WinUI resource not listed: `Theme.Ref("YourResourceKeyBrush")`

```csharp
TextBlock("Hi").Foreground(Theme.PrimaryText)
Border(child).Background(Theme.CardBackground).WithBorder(Theme.CardStroke, 1)
Button("Action").Background(Theme.Accent)
TextBlock("Error!").Foreground(Theme.SystemCritical) // NOT Theme.Error
TextBlock("Saved").Foreground(Theme.SystemSuccess) // NOT Theme.Success
```

## Critical gotchas
Expand Down
Loading