Needless UI

ガイド

テーマ設定

見た目に関するあらゆる決定は、W3C デザイントークンから生成された CSS カスタムプロパティです。コンポーネントは --nui-color-accent-solid のようなセマンティックトークンだけを使うため、トークンを1つ変えれば、それを使うすべてのコンポーネントのスタイルが変わります。

ライトとダーク

デフォルトでは OS の設定に従ってモードが決まります。data-nui-theme を使えば任意の要素でモードを固定でき、自由に入れ子にすることもできます。

theme-attribute.html
<html data-nui-theme="dark">
  <!-- Everything here is dark… -->
  <aside data-nui-theme="light">…except this panel.</aside>
</html>
data-nui-theme="light"
data-nui-theme="dark"

トークンの上書き

トークンは @layer nui の中にあるため、アプリの通常の CSS で上書きできます。アプリ全体に適用するなら :root に、一部だけに適用するなら任意の要素に設定します。

override.css
/* The whole app */
:root {
  --nui-color-accent-solid: oklch(0.52 0.16 150);
  --nui-radius-md: 0.75rem;
}

/* One part of it */
.checkout {
  --nui-color-accent-solid: var(--nui-color-success-solid);
}

ブランドパレット

カラースケールは自動生成されています。packages/tokens/scripts/palette.ts で色相を変更して再生成すると、スクリプトがすべての色を sRGB の色域に収め直し、テキストと背景の組み合わせごとにコントラストを再チェックします。

palette.sh
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens