Skip to content

Color.mdx

Latest commit

 

History

History
99 lines (73 loc) · 4.58 KB

Color.mdx

File metadata and controls

99 lines (73 loc) · 4.58 KB

import { Canvas, Meta } from '@storybook/addon-docs/blocks' import { Table, TableHeader, TableBody, Column, Row, Cell } from '../Table' import * as ColorStories from './Color.stories'

Colors

wip-ui のカラーシステムは inhouse のカラートークン に基づいています。プリミティブカラーとセマンティックカラーの 2 層で構成され、フレーバーごとに異なるパレットが適用されます。

プリミティブカラー

色名とレベル（明度段階）の組み合わせで定義される直接的な色値です。

色名 レベル範囲 Black / White1000 Gray50〜900 Blue50〜900 Green50〜900 Red50〜900 Yellow50〜900

レベルの数値が大きいほど暗くなります。コンポーネント実装では直接使用せず、セマンティックカラーを使用してください。

セマンティックカラー

意図（intention）に基づいた名前で定義される色です。コンポーネントの color prop はこの体系に対応しています。

セマンティック名 意味 使用場面 **Neutral**中立標準の背景、ボーダー、テキスト **Informative**情報提供ヘルプ、案内、リンク **Positive**肯定・成功完了メッセージ、成功状態 **Negative**否定・エラーエラーメッセージ、削除 **Notice**注意・警告警告メッセージ、注意喚起

Implication カラー

慣例的に色の意味が定着しているケースに使用します。

名前 意味 例 **Interactive**インタラクティブ要素ハイパーリンク **Favorite**お気に入りハートアイコン

カラートークン一覧

ツールバーのフレーバー切り替えで各テーマのカラーを確認できます。

コンポーネントでの使い方

多くのコンポーネントが color prop でセマンティックカラーを受け付けます。

  • Button: neutral、interactive、negative
  • Callout: informative、neutral、negative、notice、positive
  • Typography: high_emphasis、medium_emphasis、low_emphasis、informative、positive、notice、negative

CSS 変数として参照する

wip-ui/styles.css または wip-ui/css/{flavor}.css を読み込むと、カラートークンが CSS カスタムプロパティとして公開されます。アプリ側の CSS から直接参照できるので、#f4f4f5 のようなハードコードは不要です。

.my-card {
  background-color: var(--wip-color-semantic-neutral-100);
  color: var(--wip-color-semantic-neutral-800);
}
  • セマンティックカラー: --wip-color-semantic-{intent}-{level}（例: --wip-color-semantic-neutral-100）
  • プリミティブカラー: --wip-color-primitive-{color}-{level}（例: --wip-color-primitive-gray-100）

コンポーネント実装と同様、アプリ側でも基本はセマンティックカラーを使用してください。

アクセシビリティ

色だけで情報を伝えないでください。色覚に依存しないよう、アイコンやテキストなど他の区別手段を併用してください。