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.