カラーシステム

カラーシステム

INGRED UIのカラーシステムは、一貫性のある視覚的階層と意味のある色使いを実現するために設計されています。

カラーパレット

基本カラー

const colors = {
  primary: '#0B82F4',  // メインカラー
  success: '#63C427',  // 成功
  warning: '#FCD914',  // 警告
  danger: '#EB0A4E',   // エラー
  basic: {
    50: '#FDFEFF',    // 最も明るい
    100: '#F5F7F8',
    200: '#E2E8EA',
    300: '#D1D5DA',
    400: '#B3BAC1',
    500: '#959FA9',
    600: '#778490',
    700: '#596978',
    800: '#1F3449',
    900: '#041C33'    // 最も暗い
  }
};

セマンティックカラー

意味を持った色の使い方について説明します。

プライマリーカラー

• メインの操作や重要な情報の強調に使用
• ブランドカラーとしても機能

サクセスカラー

• 成功メッセージ
• 完了ステータス
• ポジティブなアクション

ワーニングカラー

• 警告メッセージ
• 注意が必要な状態
• 未完了ステータス

デンジャーカラー

• エラーメッセージ
• 破壊的な操作
• 重大な警告

使用例

ボタンでの使用

// プライマリーボタン
<Button variant="primary">Primary Button</Button>

// デンジャーボタン
<Button variant="danger">Delete</Button>

メッセージでの使用

// 成功メッセージ
<Box backgroundColor="success.light" padding={2}>
  <Typography color="success.dark">
    データの保存に成功しました
  </Typography>
</Box>

// エラーメッセージ
<Box backgroundColor="danger.light" padding={2}>
  <Typography color="danger.dark">
    エラーが発生しました
  </Typography>
</Box>

アクセシビリティ

カラーシステムは、WCAG 2.1のアクセシビリティガイドラインに準拠するように設計されています：

• テキストと背景のコントラスト比は4.5:1以上
• 色だけでなく、形状や文字による情報伝達
• カラーブラインドフレンドリーな配色

カスタマイズ

テーマを通じてカラーパレットをカスタマイズできます：

import { createTheme, ThemeProvider } from 'ingred-ui';

const customTheme = createTheme({
  palette: {
    primary: {
      main: '#1a73e8',
      light: '#4285f4',
      dark: '#0d47a1',
    },
    // その他のカラーカスタマイズ
  },
});

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* アプリケーションのコンテンツ */}
    </ThemeProvider>
  );
}

ベストプラクティス

1. 一貫性のある使用

   • 同じ意味には同じ色を使用
   • コンポーネント間で統一された色使い

2. 意味のある使用

   • 装飾的ではなく、情報を伝えるために色を使用
   • ユーザーの操作や状態を明確に示す

3. アクセシビリティへの配慮

   • 色だけに依存しない情報伝達
   • 十分なコントラスト比の確保