# CheckBox Pixel Review

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

## Figma Baseline

- File: `TVU UX Design System`
- Page: `— — Buttons`
- Component set: `check box`
- Node id: `3242:13521`

Confirmed variant axes:

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

Total variants:

- `12`

## Confirmed Visual Facts

### Size and stroke

- Control size is `16px x 16px`.
- Border/corner artwork in Figma reads visually closer to `1.2px` than `1px` or `2px`.
- The current implementation already uses `1.2px` for the unchecked border.

### Text colors

From the raw exported component data and previous review confirmation:

- dark enabled text: `#F8F8F8`
- dark disabled text: `#595959`
- light enabled text: `#141414`
- light disabled text: `#CCCCCC`

### Light unchecked / disabled-off

Already confirmed against Figma:

- light unchecked border: `#9E9E9E`
- light disabled border: `#F0F0F0`
- light disabled fill: `#DBDBDB`

## Current Implementation Files

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

## First-Round Gaps

### 1. Base component state model is too compressed

Current base component only knows:

- `modelValue`
- `indeterminate`
- `disabled`

The Figma component set actually distinguishes:

- `off / on / some`
- `yes / no`
- `dark / light`

This means the wrapper can express the variant semantics, but the visual component still derives most appearance from a smaller boolean state space.

Impact:

- pixel-level parity is harder to maintain
- disabled selected and disabled indeterminate rely on shared muted rules instead of variant-specific rendering
- later fine-tuning is more fragile

### 2. Checkmark geometry likely still differs from Figma

Current code uses:

- `svg` size `10 x 8`
- a single path with `stroke-width="1.5"`

The Figma-generated structure for checked state is not a simple single-path icon. It is built from rounded bars positioned inside the 16px box, and the resulting shape is more constrained than the current SVG stroke.

Impact:

- the overall checkmark thickness may be close
- but tip angle, bar lengths, and optical centering are likely still off

### 3. Unchecked disabled rendering is still a browser approximation

Current light/dark disabled-off uses:

- neutral fill/background
- inset border rendering

Figma’s exported structure shows a more explicit inner 14px neutral square plus vector border artwork.

Impact:

- color values can be correct
- but edge crispness and border/fill relationship may still differ from Figma

### 4. Off/on/some variants are correct semantically, but not yet treated as first-class review units

The docs page correctly groups:

- basic states
- disabled states
- interactive example

But the actual pixel review should use the following four anchor variants first:

1. `dark theme=on, status=off, enable=yes`
2. `dark theme=on, status=on, enable=yes`
3. `dark theme=on, status=off, enable=no`
4. `dark theme=on, status=on, enable=no`

Then repeat the same for light mode.

## Recommended Repair Order

1. Keep the current wrapper API as-is.
2. Refactor the base checkbox visual layer so variant rendering is controlled by explicit classes for:
   - `off`
   - `on`
   - `some`
   - `disabled-off`
   - `disabled-on`
   - `disabled-some`
3. Replace the current checked SVG with a shape that matches the Figma geometry more closely.
4. Revisit unchecked disabled rendering after the glyph geometry is stable.
5. Only after dark mode is aligned, repeat the same pass for light mode.

## Next Review Pass

The next practical pass should only compare these four dark-mode variants:

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

Once these four look right, `some + yes` and `some + no` usually become much faster to tune.