Skeletonic Stylus v2.0.0 поставляется с тремя опциональными цветовыми палитрами, каждая из которых распространяется как отдельный минифицированный файл стилей — вы платите только за то, что используете.
| Палитра | Файл | Размер (min) |
|---|---|---|
| Material | dist/css/palettes/material/skeletonic-material.min.css |
≈8 КБ |
| Tachyons | dist/css/palettes/tachyons/skeletonic-tachyons.min.css |
7,3 КБ |
| Web-safe | dist/css/palettes/websafe/skeletonic-websafe.min.css |
≈4 КБ |
На этой странице загружена палитра Tachyons, поэтому утилитарные классы цветов ниже отображаются корректно.
Базовые серые тона Skeletonic
Основной файл стилей содержит доступную 11-ступенчатую шкалу серого, доступную через --cl-grey-100 … --cl-grey-1000.
Фирменные цвета (v2.0.0 — контраст AA)
В v2.0.0 токены primary и secondary были затемнены для соответствия WCAG 4.5:1 контраста на белом тексте прямо из коробки.
hsl(210 100% 42%)
hsl(195 100% 33%)
#757c8a
Примечание.
--cl-tertiary(#757c8a) обеспечивает коэффициент контрастности 4.71:1 по отношению к белому — соответствует уровню AA для крупного текста (от 18 px жирный / от 24 px обычный), но не для основного текста. Используйте его на тёмном фоне или только для декоративных элементов, не несущих смысловой нагрузки.
Утилитарные классы палитры Tachyons
При загрузке skeletonic-tachyons.min.css вы получаете полный набор однозадачных цветовых классов — тот же поставляемый артефакт, опциональный модуль.
<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>
Полная спецификация палитры Tachyons описана на tachyons.io/docs/themes/skins; здесь представлена версия, компилируемая Skeletonic.