Skeletonic Stylus v2.0.0 include tre palette di colori opzionali, ognuna distribuita come foglio di stile minificato separato cosi paghi solo quello che usi.
| Palette | File | Dimensione (min) |
|---|---|---|
| Material | dist/css/palettes/material/skeletonic-material.min.css |
≈17.4 KB |
| Tachyons | dist/css/palettes/tachyons/skeletonic-tachyons.min.css |
7,3 KB |
| Web-safe | dist/css/palettes/websafe/skeletonic-websafe.min.css |
≈3.5 KB |
Questa pagina carica la palette Tachyons cosi le classi utility per i colori qui sotto vengono renderizzate correttamente.
Scala di grigi di Skeletonic
Il foglio di stile principale include una scala di grigi accessibile a 11 livelli esposta come --cl-grey-100 ... --cl-grey-1000.
Colori del brand (v2.0.0 — contrasto AA)
Nella v2.0.0 i token primario e secondario sono stati scuriti per soddisfare il rapporto di contrasto WCAG 4,5:1 contro il testo bianco fin da subito.
hsl(210 100% 42%)
hsl(195 100% 33%)
#757c8a
Nota.
--cl-tertiary(#757c8a) raggiunge un rapporto di contrasto di 4.71:1 rispetto al bianco — conforme AA per testo grande (≥ 18 px grassetto / ≥ 24 px normale) ma non per il testo del corpo. Abbinalo a sfondi piu scuri o usalo solo per elementi decorativi non essenziali.
Classi utility della palette Tachyons
Quando carichi skeletonic-tachyons.min.css ottieni un set completo di classi colore a scopo singolo — stesso artefatto distribuito, modulo opt-in.
<span class="bg-blue white pa2">.bg-blue .white</span>
<span class="bg-light-green dark-green pa2">.bg-light-green .dark-green</span>
<span class="bg-washed-yellow dark-gray pa2">.bg-washed-yellow .dark-gray</span>
La specifica completa della palette Tachyons e documentata su tachyons.io/docs/themes/skins; la versione qui inclusa e quella compilata da Skeletonic.