Also improves how buttons are shown with the missing files.

This commit is contained in:
2026-02-16 09:13:54 +01:00
parent bc1d5a2796
commit 07a8276899
5 changed files with 45 additions and 60 deletions

View File

@@ -13,7 +13,7 @@ ### Root Level
### Frontend
- `docs/theming-templating-vue.md` - Design tokens, Tailwind config, layout, shared Vue components, icon and scoring color standards
- `docs/theming-templating-vue.md` - Design tokens, Tailwind config, layout, shared Vue components, RadioButtonGroup pill buttons, icon and scoring color standards
### Agents

View File

@@ -9,6 +9,7 @@ ### Color Palette
| Token | Hex | RGB | Tailwind Class | Usage |
|-------------|-----------|------------------|-----------------|---------------------------------------------|
| Primary | `#d1ec51` | 209, 236, 81 | `bg-primary`, `text-primary` | Buttons (default), accents, highlights |
| Primary Dark | `#b5d136` | 181, 209, 54 | `bg-primary-dark`, `text-primary-dark` | Selected/hover state for pill buttons, ~15% darker primary |
| Secondary | `#00b7b3` | 0, 183, 179 | `bg-secondary`, `text-secondary` | Button hover states, secondary accents |
| Background | `#2b303a` | 43, 48, 58 | `bg-surface` | Page background, card backgrounds |
| Text | `#ffffff` | 255, 255, 255 | `text-white` | Primary body text on dark background |
@@ -96,6 +97,23 @@ ### QuestionCard
- `has_na` -- show N/A button
- `details` -- show a text input for additional notes
### RadioButtonGroup
Pill-shaped button group that replaces native radio buttons. Options appear as connected segments with rounded outer edges.
| Prop | Type | Default | Description |
|--------------|-------------------------------|---------|--------------------------------|
| `modelValue` | `String \| null` | `null` | Selected value (v-model) |
| `options` | `Array<{value, label}>` | required | Options to render |
| `name` | `String` | required | HTML radio group name |
| `disabled` | `Boolean` | `false` | Disables all options |
Default state: `bg-primary` with `text-gray-900`.
Selected & hover state: `bg-primary-dark`.
Keyboard focus: visible ring using `ring-primary-dark`.
Used in `QuestionCard` (3-option: Yes/No/N/A) and `Screening/Show` (2-option: Yes/No).
## Icons
Heroicons is the only icon library. No other icon packages.