Also improves how buttons are shown with the missing files.
This commit is contained in:
@@ -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
|
||||
|
||||
|
||||
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user