Visual QA — Theming System Redesign

Branch: theming-system-redesign Created: 2026-03-31

Must fix

[ ] Maximize/minimize sidebar skalering — Når preview maximeres forblir ConfigurationPanel (480→350px) og BlockPanel synlige. Sidepanelene bør gjemmes helt ved maximize.
[ ] Repeat count tillater desimaler — step-prop i InputField bindes ikke til native HTML-input (fjernes fra $attrs fordi den er deklarert som prop). Fix: legg til :step="inputType === 'number' ? step : undefined" på v-text-field. Alle number inputs bør revideres.
[ ] Revert-knapp vs revert-dot farge — OverrideControls bruker --status-purple, mens TemplateButton og AnimationEffectList bruker --accent-revert. Skal standardiseres til --accent-revert overalt. Unpublished (--accent-warning, oransje) er korrekt distinkt.
[ ] Input fokus-kant under drag — Under scrubbing brukes inset box-shadow som er hard/firkantet og ikke følger border-radius. Den runde .selection-rect skjules under drag. Fix: vis selection-rect også under scrub, eller gi box-shadow matching border-radius.

[ ] Dropdown valgt element kontrast — Valgt element bruker --surface-active bakgrunn med --text-primary tekst. I noen temaer kan kontrasten være for lav. Bør verifiseres visuelt.
[ ] Templates-tekst spacing i HTML block — Mangler gap mellom label og knapp i .template-group (TemplateButton.vue). Prettify + Template-knappene er allerede på samme linje. CodeMirror-editoren er allerede oppdatert.
[ ] Tab highlighting standardisering — TabNavigation (config-paneler) bruker riktige tokens. Builder top-bar tabs bruker var(--accent-primary) som slider — kan standardiseres med dedikert --tab-active-indicator token.

[ ] Card squircle avrunding — Nåværende: Card=20px, Dropdown=12px, Page tiles=10px. Alle har corner-shape: superellipse(3). Bruker vil se 4-6px mer — test visuelt.
[ ] Dark mode farger (Things-inspirert) — Nåværende verdier er allerede nær Things (#1e1e20 vs #1a1a1a). Systemet bruker OKLCH med hue 260 (svak blå). Things-verdier er pure neutral. Liten justering mulig. Juridisk: fargeverdier er ikke opphavsrettslig beskyttet.
[ ] Dropdown-piler (TooltipWrapper) — TooltipWrapper har full pilstøtte i 4 retninger. Men dropdowns bruker v-menu (separat system) med kun caret-top-left. Å gjøre alle konsistente krever arkitekturvalg.
[ ] Operator branding borders — Nåværende: first operator har solid, branding har dashed. Bruker nevnte å bytte (dashed på first, solid på branding) — avklar ønsket retning.
[ ] Design/Animations tabs — Ser bra ut med riktige tokens og smooth animasjon. Visuell vurdering i browser anbefales.
[ ] Maskot og brand-gradient bruk — Bubbles og Cavai-gradient er definert men underutnyttet. BuildProgress har hardkodet gradient (bør bruke --cavai-gradient). Muligheter: empty states, loading, knappaksenter, card-headere.

[x] Table action dots too harsh in light themes — Changed .v-btn.v-btn--icon in _components-tables.scss to use opacity (0.35 default, 0.7 hover) instead of just color
[x] Select dropdown active item hardcoded blue — Added --accent-primary token + 8% opacity background + border-radius 6px to .v-list-item--active in _vuetify-reset.scss
[x] Table background mismatch at bottom — Root cause: useTheme.ts set hardcoded hex on <html> that didn't match --surface-base oklch token. Fixed by using var(--surface-base) in inline style
[x] Top-bar dropdowns not flush — Added align-items: stretch + .v-menu, .v-menu > * { display: flex; align-items: stretch } to .top-bar in _components-navigation.scss
[x] Custom dropdown menus missing rounded hover — Fixed .preset-menu scoped styles in AnimationEffectList.vue and ShowHideOp.vue (padding 4px, item border-radius 6px)
[x] Dropdown menus global polish — Added padding 4px, item border-radius 6px, active item accent color to .v-menu__content in _vuetify-reset.scss

[ ] Add-block toolbar orange hover — Original uses #ffdd57 (yellow) hover and $grey-30 dark bg. Tried many approaches (accent-primary, chrome, surface-active, pills, color-mix). User reverted all changes. Status: needs redesign in theming branch — keep the dark toolbar look but replace the yellow hover with something theme-appropriate
[ ] ImagePreview overflow clipping — Card.vue has overflow: hidden (needed for border-radius) which clips expanded preview. Tried position: fixed approach but positioning was wrong. Reverted. Root cause identified: Card.vue:100 overflow: hidden. Consider reducing $max-size from 229px to ~140px as simpler fix
[ ] Animation keyframe negative values — InputField min defaults to 0, blocking negative values in keyframe scrubbing. Fix: pass :min="null" on kf-value InputField. User reverted (file was on main branch). Needs re-applying on theming branch

[ ] Animation keyframe units — Support percentage (%) in addition to px for animation keyframe values (e.g. slideY: -100% to 0%)

[x] Preview-grid vignett — Finnes allerede: box-shadow: inset 0 0 120px 40px rgba(0,0,0,0.15) på PreviewPanel.
[x] Shape inputs gammel vs ny — Alle konfig-komponenter bruker allerede nye InputField med number-input. Ingen gamle inputs funnet.
[x] Dark mode footer farge — Footer-styling er i preview-iframen / Creative Engine, ikke i frontend-repo.