# Sistema di progettazione Tamagui ## Anteprima dell’interfaccia del sistema di progettazione sistema di design Tamagui Aggiungi un’abitudine, segna i progressi, filtra le attività incomplete e passa al tema blu. ## Riferimento di progettazione del sistema di progettazione sistema di design Tamagui Valori esportati da @tamagui/config/v5 e @tamagui/themes alla versione 2.7.7, oltre ai contratti verificati dei componenti nativi. ### Token di dimensione v5 | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | size.$1 | 20 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | size.$2 | 28 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | size.$3 | 36 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | size.$4 | 44 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | size.$5 | 52 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | size.$6 | 64 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | ### Token di spaziatura v5 | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | space.$1 | 2 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | space.$1.5 | 4 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | space.$2 | 7 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | space.$2.5 | 10 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | space.$3 | 13 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | space.$3.5 | 16 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | space.$4 | 18 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | space.$5 | 24 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | space.$6 | 32 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | ### Token di raggio v5 | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | radius.0 | 0 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | radius.1 | 3 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | radius.2 | 5 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | radius.3 | 7 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | radius.4 | 9 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | radius.5 | 10 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | | radius.6 | 16 | Valore effettivo della configurazione v5. La stessa etichetta numerica del token ha un significato diverso per dimensione, spaziatura e raggio; non considerare $4 un valore universale in pixel. | ### Tema semantico light_blue | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | light_blue.background | hsla(207, 100%, 98%, 1) | Ruolo semantico risolto dal tema blu v5. Per gli stati al passaggio del puntatore, pressione o attivazione, il componente può selezionare un tema figlio più specifico. | | light_blue.backgroundHover | hsla(210, 100%, 99%, 1) | Ruolo semantico risolto dal tema blu v5. Per gli stati al passaggio del puntatore, pressione o attivazione, il componente può selezionare un tema figlio più specifico. | | light_blue.backgroundPress | hsla(205, 92%, 95%, 1) | Ruolo semantico risolto dal tema blu v5. Per gli stati al passaggio del puntatore, pressione o attivazione, il componente può selezionare un tema figlio più specifico. | | light_blue.color | hsla(216, 71%, 23%, 1) | Ruolo semantico risolto dal tema blu v5. Per gli stati al passaggio del puntatore, pressione o attivazione, il componente può selezionare un tema figlio più specifico. | | light_blue.borderColor | hsla(203, 100%, 92%, 1) | Ruolo semantico risolto dal tema blu v5. Per gli stati al passaggio del puntatore, pressione o attivazione, il componente può selezionare un tema figlio più specifico. | | light_blue.borderColorFocus | hsla(203, 100%, 92%, 1) | Ruolo semantico risolto dal tema blu v5. Per gli stati al passaggio del puntatore, pressione o attivazione, il componente può selezionare un tema figlio più specifico. | | light_blue.placeholderColor | hsla(206, 100%, 50%, 1) | Ruolo semantico risolto dal tema blu v5. Per gli stati al passaggio del puntatore, pressione o attivazione, il componente può selezionare un tema figlio più specifico. | ### Tema semantico dark_blue | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | dark_blue.background | hsla(218, 39%, 11%, 1) | Ruolo semantico risolto dal tema blu v5. Per gli stati al passaggio del puntatore, pressione o attivazione, il componente può selezionare un tema figlio più specifico. | | dark_blue.backgroundHover | hsla(212, 69%, 16%, 1) | Ruolo semantico risolto dal tema blu v5. Per gli stati al passaggio del puntatore, pressione o attivazione, il componente può selezionare un tema figlio più specifico. | | dark_blue.backgroundPress | hsla(215, 42%, 9%, 1) | Ruolo semantico risolto dal tema blu v5. Per gli stati al passaggio del puntatore, pressione o attivazione, il componente può selezionare un tema figlio più specifico. | | dark_blue.color | hsla(205, 100%, 88%, 1) | Ruolo semantico risolto dal tema blu v5. Per gli stati al passaggio del puntatore, pressione o attivazione, il componente può selezionare un tema figlio più specifico. | | dark_blue.borderColor | hsla(209, 100%, 19%, 1) | Ruolo semantico risolto dal tema blu v5. Per gli stati al passaggio del puntatore, pressione o attivazione, il componente può selezionare un tema figlio più specifico. | | dark_blue.borderColorFocus | hsla(209, 100%, 19%, 1) | Ruolo semantico risolto dal tema blu v5. Per gli stati al passaggio del puntatore, pressione o attivazione, il componente può selezionare un tema figlio più specifico. | | dark_blue.placeholderColor | hsla(206, 100%, 50%, 1) | Ruolo semantico risolto dal tema blu v5. Per gli stati al passaggio del puntatore, pressione o attivazione, il componente può selezionare un tema figlio più specifico. | ### Ruoli dei font di sistema | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | body.family | -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif | Lo stack di sistema v5 non richiede richieste di font remoti. | | body.$2 | 13px / 20px | Dimensione e altezza della riga sono ruoli tipografici associati, indipendenti dal token di dimensione del componente con la stessa etichetta. | | body.$3 | 14px / 21px | Dimensione e altezza della riga sono ruoli tipografici associati, indipendenti dal token di dimensione del componente con la stessa etichetta. | | body.$4 | 15px / 23px | Dimensione e altezza della riga sono ruoli tipografici associati, indipendenti dal token di dimensione del componente con la stessa etichetta. | | body.$5 | 16px / 24px | Dimensione e altezza della riga sono ruoli tipografici associati, indipendenti dal token di dimensione del componente con la stessa etichetta. | | body.$6 | 18px / 27px | Dimensione e altezza della riga sono ruoli tipografici associati, indipendenti dal token di dimensione del componente con la stessa etichetta. | | body.$8 | 26px / 38px | Dimensione e altezza della riga sono ruoli tipografici associati, indipendenti dal token di dimensione del componente con la stessa etichetta. | ### Contratti di composizione nativi | Nome / regola | Valore / configurazione | Utilizzo | | --- | --- | --- | | createTamagui | defaultConfig from @tamagui/config/v5 | Una sola istanza di configurazione fuori da React; getCSS() fornisce il tema web CSS. | | TamaguiProvider | config + defaultTheme | L’applicazione sceglie la modalità chiara o scura preservando lo stato della bacheca. | | Theme | name="blue" | Risoluzione del tema figlio blu corrispondente all’aspetto corrente. | | Checkbox | checked + onCheckedChange | La bacheca considera completato solo il valore === true; lo stato indeterminato non indica il completamento. | | Input | value + onChangeText | Bozza controllata, validazione con rimozione degli spazi superflui e gestione esplicita dei duplicati. | | Progress | value from 0 to 100 | L’indicatore è calcolato dividendo il numero di attività completate per il numero totale di righe. | | YStack / XStack | directional layout with token gap | Mantieni il layout di lettura responsivo senza un foglio di stile imitativo separato. | ## Guida completa al sistema di progettazione sistema di design Tamagui Una guida pratica per scegliere, applicare e valutare questo sistema in un’interfaccia reale. Indicazioni complete, un punto di partenza per l’implementazione e link alle fonti. ## Configurazione versionata e CSS del sistema di progettazione sistema di design Tamagui ### Usa il preset v5 specificato > Questo esempio fissa tamagui e @tamagui/config alla versione 2.7.7 e importa defaultConfig da @tamagui/config/v5. Il nome della configurazione è v5: non è la versione principale del pacchetto npm. Confondere questi due numeri porterebbe chi legge a usare il comando di installazione sbagliato. createTamagui viene eseguito una sola volta, fuori dal componente, e il relativo CSS generato viene inserito prima del rendering della bacheca, così le variabili del tema e gli stili nativi hanno una definizione web effettiva. ### Rendi esplicita la piccola personalizzazione della configurazione La sorgente fornita imposta onlyAllowShorthands su false perché questo esempio didattico usa proprietà estese leggibili, come padding e backgroundColor. È una scelta applicativa aggiuntiva rispetto al preset. La base v5 non include un motore di animazione e questo esempio non ne inventa uno né dichiara di avere transizioni animate. Il semplice comportamento di avanzamento e della casella di controllo funziona senza aggiungere una dipendenza separata per le animazioni. ## Token di dimensione, spaziatura e raggio del sistema di progettazione sistema di design Tamagui ### Non confondere token con etichette identiche Nella configurazione v5 fissata, la dimensione $4 vale 44, la spaziatura $4 vale 18 e il raggio 4 vale 9. Una dimensione del componente, uno spazio nel layout e un raggio degli angoli non possono quindi essere convertiti usando un’unica regola di moltiplicazione. Il riferimento elenca separatamente ogni categoria e l’esempio usa valori specifici per ciascuna categoria tramite le effettive proprietà Tamagui. È più utile di un elenco di incrementi generici da 4px, che la configurazione non usa. - size.$4 = 44 - space.$4 = 18 - radius.4 = 9 - font body $4 = 15px con altezza della riga di 23px ### Mantieni separata anche la scala tipografica Il font body $4 è 15px con un’altezza della riga di 23px, mentre la dimensione del componente $4 resta 44. Lo stack di font di sistema è fornito da v5 e non richiede il download di alcun font. H1, H2 e Text ricevono i rispettivi contesti tipografici nativi; i valori espliciti di fontSize e lineHeight nel codice sorgente definiscono la gerarchia della bacheca originale. La larghezza esterna di 880px è una scelta locale di layout, non un token globale Tamagui. ## Temi semantici e aspetto del sistema di progettazione sistema di design Tamagui ### Combina la modalità chiara o scura con un tema figlio blu TamaguiProvider riceve defaultTheme selezionato e Theme name="blue" risolve il tema figlio corrispondente. Il codice sorgente usa i ruoli background, backgroundHover, color e borderColor anziché ripetere valori esadecimali letterali in tutto l’albero dei componenti. La tabella riporta i valori effettivi di light_blue e dark_blue, così chi legge può confrontare la configurazione risolta invece di dare per scontata una palette di brand fissa. ### Mantieni lo stato della bacheca quando cambia l’aspetto Il flag dark è indipendente dalle righe, dalla bozza di testo e dal filtro. Cambiare aspetto aggiorna i componenti nativi senza modificare la bacheca. Pulsanti e checkbox possono selezionare valori del tema figlio specifici per il componente, quindi il colore calcolato potrebbe non coincidere con quello del token di sfondo principale. Esamina lo stato renderizzato prima di appiattire la gerarchia in token CSS personalizzati. ## Checkbox e progresso derivato del sistema di progettazione sistema di design Tamagui ### Mantieni il completamento in un’unica raccolta di righe Ogni riga ha un ID stabile, un testo leggibile e un valore booleano done. Checkbox riceve checked e onCheckedChange; solo il valore letterale true indica il completamento. Checkbox.Indicator mostra il segno di spunta. Il testo adiacente e il nome accessibile identificano la stessa abitudine, mentre la barratura ripropone visivamente lo stato di completamento. Il codice sorgente non crea un conteggio separato che potrebbe non essere più sincronizzato con le righe. ### Calcola il progresso sull’intera bacheca Il numero di attività completate viene calcolato su tutte le righe e poi convertito in percentuale per Progress. Filtrare le attività incomplete cambia solo ciò che viene mostrato, non il denominatore. In questo modo la barra di progresso non si azzera quando le righe completate scompaiono dalla vista. Il conteggio compare anche come testo leggibile in una regione live con modalità polite, così la percentuale non viene comunicata solo tramite la lunghezza della barra. ## Validazione delle bozze e gestione dei duplicati del sistema di progettazione sistema di design Tamagui ### Aggiungi un vero input controllato Input mantiene la bozza corrente tramite value e onChangeText. L’azione Add habit rimuove gli spazi superflui e rifiuta i valori vuoti mostrando un messaggio, aria-invalid e una descrizione dell’errore. Dopo l’invio di un valore vuoto, il focus torna sull’input. Un controllo dei duplicati senza distinzione tra maiuscole e minuscole impedisce di aggiungere una seconda riga con lo stesso testo e conserva la bozza per consentirne la correzione. Queste regole appartengono alla bacheca originale, non alla libreria. ### Aggiorna la bacheca solo dopo un’aggiunta valida Una bozza valida aggiunge una nuova riga incompleta, svuota l’input e rimuove l’errore. Il denominatore del progresso si aggiorna subito perché deriva dalla nuova raccolta. Aggiungere un’abitudine non registra promemoria né crea un account. La bacheca usa deliberatamente lo stato locale React; ricaricando il documento si torna all’esempio. ## Viste filtrate e recupero dagli stati vuoti del sistema di progettazione sistema di design Tamagui ### Specifica l’ambito del filtro Show unfinished only nasconde le righe completate senza rimuoverle dalla raccolta. Quando nella vista non resta nulla, uno stato vuoto testuale spiega che l’elenco completo esiste ancora e offre un’azione diretta per tornarvi. È uno stato vuoto significativo, prodotto dalle scelte dell’utente, non un interruttore decorativo che sostituisce schede arbitrarie con segnaposto. ### Tieni separati il ripristino e l’aspetto Reset sample board ripristina le tre righe iniziali, cancella la bozza e l’errore e torna all’elenco completo. Non modifica l’aspetto corrente. Poiché ogni modifica è uno stato esplicito, il ripristino non richiede di ricaricare il documento né di eliminare il provider configurato. Il tema e il ripristino dei contenuti restano verificabili in modo indipendente. ## Stack responsivi e lettura accessibile del sistema di progettazione sistema di design Tamagui ### Lascia che il contenuto dello stack determini l’altezza YStack organizza il flusso di lettura principale e XStack allinea i controlli dell’intestazione, le righe delle checkbox e le azioni. I gruppi di controlli vanno a capo, senza imporre una larghezza fissa da desktop. Il contenitore esterno è largo al massimo 880px e usa il token effettivo di spaziatura $4 per il padding. Il testo di ogni riga può restringersi e andare a capo, mentre i controlli restano disponibili sia a 280px sia a larghezze di prova maggiori. ### Verifica le interazioni dopo il riadattamento del layout La verifica nel browser aggiunge un’abitudine, la segna come completata, filtra l’elenco e cambia l’aspetto prima di misurare l’overflow. Uno screenshot del solo layout iniziale non rivelerebbe se un errore, un’etichetta lunga o uno stato filtrato compromettono la composizione a larghezza ridotta. Sono stati verificati anche la semantica nativa delle checkbox e il testo visibile, insieme al progresso derivato, anziché limitarsi a constatarne la presenza e presumere che funzionino. ## Build completa per browser del sistema di progettazione sistema di design Tamagui ### Fornisci il provider, CSS e le definizioni di build I tre file forniti sono sufficienti per lo studio web locale. Il JSX include il provider, una configurazione, il tema generato CSS e l’intera bacheca. build.mjs imposta la destinazione web e l’ambiente di produzione e fornisce un fallback vuoto per process.env, necessario per altre letture delle variabili d’ambiente riservate al browser. Senza quest’ultima definizione, il bundle semplice può generare l’errore process is not defined anche se la compilazione riesce. 1. Salva tamagui.jsx, build.mjs e index.html nella stessa cartella. 2. Installa i pacchetti React e Tamagui nelle versioni fissate. 3. Compila e servi la directory locale. 4. Verifica gli inserimenti vuoti e duplicati, il completamento, i filtri, il tema e il ripristino. ### Tieni separati l’adozione nativa e quella web L’esempio è una composizione per browser di componenti Tamagui effettivi. Non dimostra la compilazione nativa, l’integrazione della navigazione né il comportamento degli input specifico della piattaforma. Un’applicazione di produzione dovrebbe adottare la configurazione supportata dal framework scelto e valutare separatamente le esigenze di estrazione, rendering lato server e animazione. Il bundle locale concreto resta un modo completo per esaminare il tema e i contratti di stato illustrati qui. ## Esempi di componenti del sistema di design Tamagui ### tamagui.jsx Configurazione, CSS generato, componenti nativi e stato completo della bacheca. ``` import React,{useState} from 'react';import{createRoot}from'react-dom/client'; import{createTamagui,TamaguiProvider,Theme,YStack,XStack,Text,H1,H2,Button,Input,Checkbox,Progress,Separator}from'tamagui';import{defaultConfig}from'@tamagui/config/v5'; const config=createTamagui({...defaultConfig,settings:{...defaultConfig.settings,onlyAllowShorthands:false}});const sheet=document.createElement('style');sheet.textContent=config.getCSS();document.head.append(sheet); const initial=[{id:1,text:'Read ten pages',done:false},{id:2,text:'Step outside for a break',done:true},{id:3,text:'Write one useful note',done:false}]; function App(){const[dark,setDark]=useState(false),[rows,setRows]=useState(initial),[draft,setDraft]=useState(''),[error,setError]=useState(''),[filter,setFilter]=useState(false);const done=rows.filter(x=>x.done).length;let shown=rows.filter(x=>!filter||!x.done);function add(){let text=draft.trim();if(!text){setError('Write a small habit before adding it.');document.querySelector('#habit-input')?.focus();return}if(rows.some(x=>x.text.toLowerCase()===text.toLowerCase())){setError('That habit is already in this list.');return}setRows([...rows,{id:Date.now(),text,done:false}]);setDraft('');setError('')}return TAMAGUI / ORIGINAL HABIT BOARD

A little progress, every day.

A local board built with Tamagui 2.7.7 and its v5 blue theme. Your changes stay in this page; no account or daily reminder is connected.

Today’s small steps

{done} of {rows.length} complete{shown.length?shown.map(row=>setRows(rows.map(x=>x.id===row.id?{...x,done:value===true}:x))} aria-label={row.text} size="$4">✓{row.text}):Nothing unfinished in this viewAll your habits remain in the full list. You can revisit any completed item.}Add one small habit{setDraft(v);setError('')}} placeholder="For example, stretch for five minutes" aria-describedby={error?'habit-error':undefined} aria-invalid={!!error} onKeyPress={e=>{if(e.nativeEvent.key==='Enter')add()}}/>{error}Native Checkbox, Input, Button and Progress components; original board content and state. Theme changes preserve the current board.} createRoot(document.getElementById('root')).render(); ``` Riferimento del codice - Usa insieme questi tre file completi. ### build.mjs Definizioni dell’ambiente browser usate dal bundle testato. ``` import {build} from 'esbuild'; await build({entryPoints:['tamagui.jsx'],bundle:true,minify:true,outfile:'tamagui.bundle.js',define:{'process.env.NODE_ENV':'"production"','process.env.TAMAGUI_TARGET':'"web"','process.env':'{}'}}); ``` Riferimento del codice - Usa insieme questi tre file completi. ### index.html Documento root autonomo e import del bundle. ``` Small habits board
``` Riferimento del codice - Usa insieme questi tre file completi. ## Configurazione dell’agente per il sistema di design Tamagui ### Punto di partenza per l’implementazione Prima salva i file forniti, poi apri http://localhost:8000/. Questa configurazione è destinata appositamente al browser. ``` npm init -y npm install react@19.2.0 react-dom@19.2.0 tamagui@2.7.7 @tamagui/config@2.7.7 npm install --save-dev esbuild node build.mjs python3 -m http.server 8000 ``` ### Un prompt per il tuo progetto ``` Implementa la bacheca delle abitudini completa per il web con Tamagui 2.7.7 e il preset v5. Mantieni distinte le categorie di token per dimensioni, spaziatura, raggio e font; conserva il tema generato CSS, i temi secondari blu chiaro/scuro, le caselle di controllo controllate, la convalida con rimozione degli spazi superflui e dei duplicati, il denominatore di avanzamento basato su tutte le righe, il ripristino della visualizzazione delle attività non completate e il reset, senza modificare l’aspetto. ``` ## Origine e ambito del sistema di design Tamagui Componenti web Tamagui 2.7.7 effettivi con il preset v5. La bacheca delle abitudini e le regole di stato sono codice originale OpenDesign; non sono collegate a funzioni di account, promemoria o dispositivi nativi. - Configurazione Responsabilità di provider, preset e configurazione. - Token Risoluzione dei token in base alla categoria. - Checkbox Stato controllato e struttura dell’indicatore. - Avanzamento Composizione del valore di avanzamento e dell’indicatore. - Installazione ufficiale Opzioni di configurazione per framework e piattaforma. ## Risorse correlate al sistema di design Tamagui ### UIkit UIkit combina un framework CSS, la personalizzazione Less e componenti JavaScript basati su attributi. Lo Switcher, l’Accordion e la griglia responsive collaborano nel pianificatore di workshop qui sotto, mostrando dove termina il comportamento nativo dei componenti e dove inizia lo stato di selezione dell’applicazione. ### Vant Un flusso mobile di selezione dell’indirizzo realizzato con Vant 4: variabili CSS reali, identità dell’indirizzo controllata, convalida dei campi, cambio di tema e salvataggio esplicitamente limitato al dispositivo. ### Vuestic UI Un foglio di valutazione nativo Vuestic con preset chiari e scuri verificati sulle fonti, etichette di valutazione accessibili, convalida delle aree di testo, media calcolata e uno stato salvato che conserva la valutazione completata. - [Riferimento per l’implementazione](https://tamagui.dev/docs/core/configuration) - [Fonte](https://cdn.jsdelivr.net/npm/@tamagui/themes@2.7.7/src/v5-tokens.ts) - [Fonte](https://cdn.jsdelivr.net/npm/@tamagui/themes@2.7.7/src/generated-v5.ts) - [Fonte](https://cdn.jsdelivr.net/npm/@tamagui/config@2.7.7/src/v5-fonts.ts) - [Fonte](https://tamagui.dev/docs/core/configuration) - [Riferimento del codice](https://tamagui.dev/docs/core/configuration) - [Configurazione Responsabilità di provider, preset e configurazione.](https://tamagui.dev/docs/core/configuration) - [Token Risoluzione dei token in base alla categoria.](https://tamagui.dev/docs/core/tokens) - [Checkbox Stato controllato e struttura dell’indicatore.](https://tamagui.dev/ui/checkbox) - [Avanzamento Composizione del valore di avanzamento e dell’indicatore.](https://tamagui.dev/ui/progress) - [Installazione ufficiale Opzioni di configurazione per framework e piattaforma.](https://tamagui.dev/docs/intro/installation)