Vai al contenuto

Estrattore di token CSS

CSS Token Extractor

Tira fuori da un foglio di stile colori, spaziature, raggi e caratteri e propone un insieme di proprietà personalizzate.

Legge un foglio di stile, conta ogni colore, lunghezza, raggio, font e ombra che vi compaiono e propone una `--variabile` per ciascuno, ordinati per frequenza d’uso. Può poi riscrivere il foglio di stile perché le usi. È uno scanner di dichiarazioni costruito sul tokenizzatore del formattatore CSS, non un parser completo e non un linter: dice quali valori ci sono nel file, che è la parte noiosa da fare a mano.

🔒 Funziona interamente nel tuo browsercsstokensdesign-systemrefactor

CSS in ingresso

Trascina qui un file .css

Letto solo in questa scheda.

Token proposti

Uscita

Va davanti, come in --app-color-1.

Dichiarazioni

29

Colori

11

Valori di spaziatura

5

Raggi

3

Caratteri

1

Variabili già presenti

1

Colori 11

  • #6366f1×2
  • #fff×2
  • #1f2937×1
  • rgba(0,0,0,.06)×1
  • rgba(0,0,0,.08)×1
  • #111827×1
  • #4b5563×1
  • #4f46e5×1
  • #eef2ff×1
  • #4338ca×1
  • #e5e7eb×1

Spaziature 5

  • 4px×1
  • 8px×3
  • 16px×4
  • 24px×3
  • 32px×1

Raggi 3

  • 8px×1
  • 12px×1
  • 999px×1

Corpi del testo 3

  • 12px×1
  • 14px×2
  • 20px×1

Interlinee 1

  • 1.6×1

Caratteri 1

  • "Pretendard", system-ui, sans-serif×1

Ombre 2

  • 0 1px 2px rgba(0,0,0,.06)×1
  • 0 8px 24px rgba(0,0,0,.08)×1

Come legge il file

  • · Letto con il tokenizer del formattatore CSS, così un url() o un #fff dentro una stringa non viene contato come colore, e calc() resta intero.
  • · I colori sono normalizzati in esadecimale, così #FFF, white e rgb(255 255 255) confluiscono in una voce sola con il suo conteggio. I nomi sono numerati per frequenza d’uso, quindi --color-1 di solito è il colore di marca o quello del testo: rinominali.
  • · Le spaziature arrivano solo da margin, padding, gap e dalle proprietà inset, e i raggi solo da border-radius, numerati per dimensione. width e height restano fuori: sono misure, non ritmo.
  • · Il JSON ha la forma della bozza W3C Design Tokens (DTCG), con $type e $value. «CSS riscritto con var()» sostituisce solo le corrispondenze esatte di valore e non tocca nessun altro carattere.

Per costruire una scala da un colore che hai estratto, la scala di tinte e ombre fa proprio questo; per il tema scuro, la tavolozza per il tema scuro.

Come si usa

  1. Incollare il foglio di stile oppure trascinare il file

    Un file alla volta. L’esempio che si carica per primo serve a mostrare la forma dell’output prima di andare a recuperare il proprio CSS.

  2. Leggere i conteggi prima dei token

    Quaranta colori in un file che dovrebbe averne dodici: è quello il risultato. Gli elenchi raggruppati qui sotto mostrano ogni valore con il numero di volte in cui compare, così quelli che vale la pena battezzare stanno in cima e quelli usati una volta sola — che di solito sono errori o regole morte — stanno in fondo.

  3. Impostare un prefisso se il progetto lo richiede

    Vuoto dà `--color-1`; digitando `app` si ottiene `--app-color-1`. In entrambi i casi i numeri sono la classifica d’uso, non un significato, quindi vanno rinominati appena si capisce a che cosa serve ciascun valore.

  4. Prendere le variabili, il JSON o il file riscritto

    L’output CSS è un blocco `:root` da incollare in cima. Il JSON ha la forma della bozza W3C Design Tokens, per un passaggio di build o per uno strumento di design. La riscrittura è il foglio di stile originale con le corrispondenze esatte sostituite da `var()` e nient’altro toccato: conviene leggere il diff prima di committarlo.

Domande frequenti

Il CSS riscritto si può mandare in produzione così com’è?

Prima va letto il diff. La sostituzione è testuale e solo su corrispondenza esatta, quindi non romperà un valore che non riconosce; però non può nemmeno sapere che due grigi identici significano due cose diverse: il colore di un bordo e un’etichetta disattivata che per caso condividono un esadecimale riceveranno la stessa variabile, e più avanti qualcuno ne cambierà uno. Dare ai token nomi giusti è il passaggio che intercetta questo, ed è un passaggio umano.

Perché width e height non sono nell’elenco delle spaziature?

Deliberatamente. La spaziatura è un ritmo — margini, padding, distanze, scostamenti — e un sistema di design la trasforma in token. Larghezze e altezze sono dimensioni: una barra laterale da 240px e un bersaglio tattile da 44px non sono due punti della stessa scala, e metterli nell’elenco seppellisce i valori che lo sono.

Gestisce SCSS, Less o CSS-in-JS?

In modo affidabile solo il CSS puro. Il tokenizzatore attraversa buona parte di uno SCSS, ma annidamenti, corpi di `@mixin` e valori interpolati non vengono risolti, quindi i conteggi slittano. Conviene compilare prima e analizzare l’output: fra l’altro è anche il file che il browser vede davvero.

Ha trovato un colore dentro un URL. Davvero?

No: quel caso è gestito. L’analisi gira sul tokenizzatore del formattatore CSS, quindi un `#fff` dentro un `url()` o dentro una stringa è una stringa, e `calc()` resta intero invece di essere smontato in lunghezze. Sono i due punti in cui un’espressione regolare sbaglia.

Può ricevere da

Formattatore e minificatore CSS

CSS Beautifier & Minifier

Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.

Funziona interamente nel tuo browser

Generatore di tavolozze

Palette Generator

Costruisce una tavolozza armonica a partire da un colore di base, con le regole del complementare, della triade e degli analoghi.

Funziona interamente nel tuo browser

Tavolozza per il tema scuro

Dark Mode Palette

Costruisce da un colore la rampa 50–950 e la rispecchia in una scura, così ogni coppia di token conserva il proprio contrasto.

Funziona interamente nel tuo browser

Colore Tailwind più vicino

Nearest Tailwind Colour

Trova la voce della tavolozza Tailwind più vicina a un colore qualsiasi e mostra la distanza percepita.

Funziona interamente nel tuo browser

Dopo

Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.

Scala di tinte e ombre

Tint & Shade Scale

Genera da un colore solo una scala di luminosità da 50 a 950 con passi percettivamente regolari, pronta come insieme di token.

Funziona interamente nel tuo browser

Formattatore e minificatore CSS

CSS Beautifier & Minifier

Formatta o minifica il CSS senza riordinare niente, conservando esattamente il flusso dei token.

Funziona interamente nel tuo browser

Tavolozza per il tema scuro

Dark Mode Palette

Costruisce da un colore la rampa 50–950 e la rispecchia in una scura, così ogni coppia di token conserva il proprio contrasto.

Funziona interamente nel tuo browser

Generatore di tavolozze

Palette Generator

Costruisce una tavolozza armonica a partire da un colore di base, con le regole del complementare, della triade e degli analoghi.

Funziona interamente nel tuo browser

Convertitore di codici colore

Colour Format Converter

Converte un colore tra HEX, RGB, HSL, HWB, LAB, LCH e OKLCH e dice qual è il colore con nome più vicino.

Funziona interamente nel tuo browser

Selettore di colore

Colour Picker

Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.

Funziona interamente nel tuo browser