Skip to content

feat(ui): design token di motion + scala radius coerente (v0.7.0) - #10

Merged
marcofarina merged 3 commits into
mainfrom
feat/ui-polish-motion-tokens
Jun 17, 2026
Merged

feat(ui): design token di motion + scala radius coerente (v0.7.0)#10
marcofarina merged 3 commits into
mainfrom
feat/ui-polish-motion-tokens

Conversation

@marcofarina

Copy link
Copy Markdown
Owner

Polish UI a basso rischio (solo CSS / inline-style: nessun cambio di contenuto o logica), su due assi, più il bump di release v0.7.0.

Motion — token di casa

  • Applica i token --ease-* / --dur-* alle transizioni che usavano l'ease/ease-in-out di default del browser (footer, sidebar, link prosa, Pagefind, PyRunner, Quiz, Algorithm, Bento, navbar).
  • Aggiunge il press feedback :active { transform: scale(0.98) } ai controlli button-like.
  • Guardia globale prefers-reduced-motion in coda a custom.css: neutralizza ogni animazione/transizione, rendendo ridondanti i blocchi per-componente.

Radius — scala coerente a step 4px

  • Introduce la scala --radius-xs(6) / -sm(10) / -md(14) / -lg(18) / -pill / -circle e la applica a 16 file CSS, collassando ~14 valori sparsi a 4 + pill + cerchio.
  • Tokenizza anche i borderRadius inline di /support (scheda Treasure inclusa) e di src/theme/Footer — hardcoded perché quelle superfici sono theme-driven via oggetto JS (getV4VTheme), quindi ora usano borderRadius: 'var(--radius-*)'.
  • Nesting concentrico preservato: lo step di 4px coincide col padding tipico (contenitore − padding = figlio); dove il padding è frazionario si usa calc() (es. pannello Treasure: esterno lg 18, interno calc(var(--radius-lg) - 1.4px)).

Commit

  • feat(ui) — motion token + scala radius (18 file)
  • chore(format) — drift Prettier isolato (index.module.css, perche-python.mdx)
  • chore(release): v0.7.0 — package.json + lock + badge README

Verifica

  • npm run build / typecheck / lint / format — tutti verdi.
  • Check visivo desktop e mobile (build servita in LAN), light + dark.

🤖 Generated with Claude Code

marcofarina and others added 3 commits June 17, 2026 22:33
Motion: applica i token --ease-*/--dur-* alle transizioni che usavano
l'ease di default del browser, aggiunge il press feedback scale(0.98)
sui controlli e una guardia globale prefers-reduced-motion.

Radius: introduce una scala a step 4px (--radius-xs/sm/md/lg + pill +
circle) e la applica ai CSS dei componenti, collassando ~14 valori
sparsi a 4 + pill + cerchio. Tokenizza anche i radius inline di
/support (scheda Treasure inclusa, nesting concentrico preservato via
calc) e del footer, hardcoded perche theme-driven via JS.

Solo CSS / inline-style: nessun cambio di contenuto o logica.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Drift residuo emerso da `npm run format`: filter su singola riga in
index.module.css ed emphasis markdown *...* → _..._ in perche-python.
Nessun cambio funzionale o di contenuto.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
@marcofarina
marcofarina merged commit b456151 into main Jun 17, 2026
1 check passed
@marcofarina
marcofarina deleted the feat/ui-polish-motion-tokens branch June 20, 2026 21:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant