# Radio Pixel Review

This note tracks the first pixel-review pass for `Radio`.

## Figma Baseline

- File: `TVU UX Design System`
- Page: `— — Buttons`
- Component set: `radio`
- Node id: `3242:15188`

Confirmed variant axes:

- `dark theme = on | off`
- `status = off | on`
- `enable = yes | no`

Total variants:

- `8`

## Confirmed Visual Facts

### Size and layout

- Control size is `16px x 16px`.
- Text style is `Roboto / 14 / Regular`.
- Gap between icon and text is `8px`.

### State groups

The component set clearly separates:

1. `off + yes`
2. `on + yes`
3. `off + no`
4. `on + no`

for both dark and light themes.

### Current high-confidence implementation decisions

- Border stroke should be treated closer to `1.2px` than `1.5px`.
- `disabled-off` and `disabled-selected` must stay separate first-class states.
- `selected-disabled` must not be approximated by a generic `opacity` reduction.

## Current Implementation Files

- Base visual component:
  - `/Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/src/components/Radio/Radio.vue`
- Figma-first wrapper:
  - `/Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/src/canonical/Radio.vue`
- Docs page:
  - `/Users/nancy/Documents/AICoding/VS_Code/tvu-design-system/playground/docs/pages/RadioPage.vue`

## First-Round Fixes Already Applied

1. Border stroke was reduced from `1.5px` to `1.2px`.
2. State rendering now maps explicitly by:
   - `data-figma-status`
   - `data-figma-enable`
3. These state groups are now independently styled:
   - unchecked enabled
   - unchecked disabled
   - selected enabled
   - selected disabled

## Remaining High-Value Gaps

### 1. Circle geometry likely still differs from Figma assets

The Figma export uses dedicated circle artwork assets for several states. The current implementation still renders the ring and dot with plain CSS circles.

Impact:

- global shape is correct
- but border optical weight and inner-dot centering can still differ

### 2. Selected-disabled dot color should be verified per theme

The current token mapping is plausible, but should still be checked against the captured Figma baseline before being treated as final.

### 3. Disabled-off rendering should be checked for fill/border split

The Figma export indicates disabled-off uses a more explicit outer/inner treatment than a single neutral border line.

## Recommended Next Review Pass

Compare these four variants first:

1. dark `off + yes`
2. dark `on + yes`
3. dark `off + no`
4. dark `on + no`

Then repeat for light mode.