Schatten
陰影のあるインターフェースを、ふたつの配信層で。
React のコンポーネントと、素の HTML で使える CSS クラス。Schatten はこの両方を、共通のデザイントークンの上で提供しています。
このページ自体も React コンポーネントで組み、ビルド時に静的 HTML へ書き出しています。ブラウザに届くのは、その HTML と配布している CSS 1 枚です。
v1.1.0
API stable
ESM only
ひとつのボタン、ふたつの書き方
React でも、素の HTML でも、届く CSS は同じ 1 枚。だから描画も同じになります。
<Button variant="primary"
size="md">
保存
</Button><button class="st-btn
st-btn--primary st-btn--md">
保存
</button>Render(このページの実物)
ダークモードは OS 設定に追従します(
prefers-color-scheme)。この切り替えもトークン層の仕事で、ページ側のコードはゼロです。