Skeletonic Stylus v2.0.0 には 3つのオプションカラーパレット が付属しており、それぞれ独立したミニファイ済みスタイルシートとして配布されるため、使用するものだけにコストを支払います。
| パレット | ファイル | サイズ (min) |
|---|---|---|
| Material | dist/css/palettes/material/skeletonic-material.min.css |
約8 KB |
| Tachyons | dist/css/palettes/tachyons/skeletonic-tachyons.min.css |
7.3 KB |
| ウェブセーフ | dist/css/palettes/websafe/skeletonic-websafe.min.css |
約4 KB |
このページは Tachyons パレットを読み込んでいるため、以下のカラーユーティリティクラスが正しくレンダリングされます。
Skeletonic コアグレー
コアスタイルシートには、--cl-grey-100 … --cl-grey-1000 として公開されるアクセシブルな11段階のグレースケールが含まれています。
100
300
500
700
200
400
600
900
ブランドカラー (v2.0.0 — AA コントラスト)
v2.0.0 では、プライマリとセカンダリのトークンが暗くなり、白いテキストに対して WCAG 4.5:1 コントラストをそのまま満たすようになりました。
--cl-primary
hsl(210 100% 42%)
hsl(210 100% 42%)
--cl-secondary
hsl(195 100% 33%)
hsl(195 100% 33%)
--cl-tertiary
#757c8a
#757c8a
注意.
--cl-tertiary(#757c8a) は白に対して 4.71:1 のコントラスト比を 達成します。大きなテキスト（≥ 18 px 太字 / ≥ 24 px 標準）には AA 準拠ですが、本文テキストには適合しません。暗い背景と組み合わせるか、 装飾的な非必須要素にのみ使用してください。
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 がコンパイルしたものです。