295 lines
11 KiB
Dart
295 lines
11 KiB
Dart
|
import 'package:flutter/material.dart';
|
|||
|
|
|
|||
|
|
/// AppColors ThemeExtension
|
|||
|
|
///
|
|||
|
|
/// セマンティックカラーシステム：色の「意味」に基づいて定義
|
|||
|
|
/// テーマバリアント（和紙×墨×琥珀 / Current）とブライトネス（Light/Dark）に完全対応
|
|||
|
|
///
|
|||
|
|
/// 使用例:
|
|||
|
|
/// ```dart
|
|||
|
|
/// final colors = Theme.of(context).extension<AppColors>()!;
|
|||
|
|
/// Icon(icon, color: colors.brandPrimary);
|
|||
|
|
/// Text('テキスト', style: TextStyle(color: colors.textPrimary));
|
|||
|
|
/// ```
|
|||
|
|
@immutable
|
|||
|
|
class AppColors extends ThemeExtension<AppColors> {
|
|||
|
|
// ===== テキストカラー（構造的） =====
|
|||
|
|
/// メインテキスト（本文、タイトル）
|
|||
|
|
final Color textPrimary;
|
|||
|
|
/// セカンダリテキスト（説明文、補足）
|
|||
|
|
final Color textSecondary;
|
|||
|
|
/// ターシャリテキスト（無効化、プレースホルダー）
|
|||
|
|
final Color textTertiary;
|
|||
|
|
|
|||
|
|
// ===== ブランドカラー（テーマバリアント依存） =====
|
|||
|
|
/// プライマリブランドカラー
|
|||
|
|
/// - Washi Light: 墨色（焦げ茶）
|
|||
|
|
/// - Washi Dark: 琥珀色（ゴールド）
|
|||
|
|
/// - Current Light: Posimai Blue
|
|||
|
|
/// - Current Dark: ライトブルー
|
|||
|
|
final Color brandPrimary;
|
|||
|
|
|
|||
|
|
/// アクセントブランドカラー
|
|||
|
|
/// - Washi Light: 琥珀色
|
|||
|
|
/// - Washi Dark: 深い琥珀
|
|||
|
|
/// - Current Light: オレンジ
|
|||
|
|
/// - Current Dark: ライトオレンジ
|
|||
|
|
final Color brandAccent;
|
|||
|
|
|
|||
|
|
/// サーフェイスブランドカラー（背景のティント）
|
|||
|
|
/// - Washi Light: 和紙ホワイト
|
|||
|
|
/// - Washi Dark: ダークグレー
|
|||
|
|
/// - Current Light: ホワイト
|
|||
|
|
/// - Current Dark: ダークグレー
|
|||
|
|
final Color brandSurface;
|
|||
|
|
|
|||
|
|
// ===== アイコンカラー =====
|
|||
|
|
/// デフォルトアイコンカラー（通常のアイコン）
|
|||
|
|
final Color iconDefault;
|
|||
|
|
/// サブアイコンカラー（セカンダリ、無効化）
|
|||
|
|
final Color iconSubtle;
|
|||
|
|
/// アクセントアイコンカラー（強調、アクション）
|
|||
|
|
final Color iconAccent;
|
|||
|
|
|
|||
|
|
// ===== サーフェイスカラー =====
|
|||
|
|
/// カード背景、エレベーション
|
|||
|
|
final Color surfaceElevated;
|
|||
|
|
/// サブトル背景（微妙な差）
|
|||
|
|
final Color surfaceSubtle;
|
|||
|
|
/// ボーダー、区切り線
|
|||
|
|
final Color divider;
|
|||
|
|
|
|||
|
|
// ===== セマンティックカラー（機能的） =====
|
|||
|
|
/// 成功、安全（緑系）
|
|||
|
|
final Color success;
|
|||
|
|
/// 警告、注意（オレンジ系）
|
|||
|
|
final Color warning;
|
|||
|
|
/// エラー、危険（赤系）
|
|||
|
|
final Color error;
|
|||
|
|
/// 情報、中立（青系）
|
|||
|
|
final Color info;
|
|||
|
|
|
|||
|
|
const AppColors({
|
|||
|
|
required this.textPrimary,
|
|||
|
|
required this.textSecondary,
|
|||
|
|
required this.textTertiary,
|
|||
|
|
required this.brandPrimary,
|
|||
|
|
required this.brandAccent,
|
|||
|
|
required this.brandSurface,
|
|||
|
|
required this.iconDefault,
|
|||
|
|
required this.iconSubtle,
|
|||
|
|
required this.iconAccent,
|
|||
|
|
required this.surfaceElevated,
|
|||
|
|
required this.surfaceSubtle,
|
|||
|
|
required this.divider,
|
|||
|
|
required this.success,
|
|||
|
|
required this.warning,
|
|||
|
|
required this.error,
|
|||
|
|
required this.info,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
AppColors copyWith({
|
|||
|
|
Color? textPrimary,
|
|||
|
|
Color? textSecondary,
|
|||
|
|
Color? textTertiary,
|
|||
|
|
Color? brandPrimary,
|
|||
|
|
Color? brandAccent,
|
|||
|
|
Color? brandSurface,
|
|||
|
|
Color? iconDefault,
|
|||
|
|
Color? iconSubtle,
|
|||
|
|
Color? iconAccent,
|
|||
|
|
Color? surfaceElevated,
|
|||
|
|
Color? surfaceSubtle,
|
|||
|
|
Color? divider,
|
|||
|
|
Color? success,
|
|||
|
|
Color? warning,
|
|||
|
|
Color? error,
|
|||
|
|
Color? info,
|
|||
|
|
}) {
|
|||
|
|
return AppColors(
|
|||
|
|
textPrimary: textPrimary ?? this.textPrimary,
|
|||
|
|
textSecondary: textSecondary ?? this.textSecondary,
|
|||
|
|
textTertiary: textTertiary ?? this.textTertiary,
|
|||
|
|
brandPrimary: brandPrimary ?? this.brandPrimary,
|
|||
|
|
brandAccent: brandAccent ?? this.brandAccent,
|
|||
|
|
brandSurface: brandSurface ?? this.brandSurface,
|
|||
|
|
iconDefault: iconDefault ?? this.iconDefault,
|
|||
|
|
iconSubtle: iconSubtle ?? this.iconSubtle,
|
|||
|
|
iconAccent: iconAccent ?? this.iconAccent,
|
|||
|
|
surfaceElevated: surfaceElevated ?? this.surfaceElevated,
|
|||
|
|
surfaceSubtle: surfaceSubtle ?? this.surfaceSubtle,
|
|||
|
|
divider: divider ?? this.divider,
|
|||
|
|
success: success ?? this.success,
|
|||
|
|
warning: warning ?? this.warning,
|
|||
|
|
error: error ?? this.error,
|
|||
|
|
info: info ?? this.info,
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@override
|
|||
|
|
AppColors lerp(ThemeExtension<AppColors>? other, double t) {
|
|||
|
|
if (other is! AppColors) {
|
|||
|
|
return this;
|
|||
|
|
}
|
|||
|
|
return AppColors(
|
|||
|
|
textPrimary: Color.lerp(textPrimary, other.textPrimary, t)!,
|
|||
|
|
textSecondary: Color.lerp(textSecondary, other.textSecondary, t)!,
|
|||
|
|
textTertiary: Color.lerp(textTertiary, other.textTertiary, t)!,
|
|||
|
|
brandPrimary: Color.lerp(brandPrimary, other.brandPrimary, t)!,
|
|||
|
|
brandAccent: Color.lerp(brandAccent, other.brandAccent, t)!,
|
|||
|
|
brandSurface: Color.lerp(brandSurface, other.brandSurface, t)!,
|
|||
|
|
iconDefault: Color.lerp(iconDefault, other.iconDefault, t)!,
|
|||
|
|
iconSubtle: Color.lerp(iconSubtle, other.iconSubtle, t)!,
|
|||
|
|
iconAccent: Color.lerp(iconAccent, other.iconAccent, t)!,
|
|||
|
|
surfaceElevated: Color.lerp(surfaceElevated, other.surfaceElevated, t)!,
|
|||
|
|
surfaceSubtle: Color.lerp(surfaceSubtle, other.surfaceSubtle, t)!,
|
|||
|
|
divider: Color.lerp(divider, other.divider, t)!,
|
|||
|
|
success: Color.lerp(success, other.success, t)!,
|
|||
|
|
warning: Color.lerp(warning, other.warning, t)!,
|
|||
|
|
error: Color.lerp(error, other.error, t)!,
|
|||
|
|
info: Color.lerp(info, other.info, t)!,
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ===== ファクトリーメソッド：和紙×墨×琥珀テーマ =====
|
|||
|
|
|
|||
|
|
/// 和紙×墨×琥珀 ライトモード
|
|||
|
|
/// - プライマリ: 墨色（焦げ茶）
|
|||
|
|
/// - アクセント: 琥珀色（ゴールド）
|
|||
|
|
/// - サーフェイス: 和紙ホワイト
|
|||
|
|
static AppColors washiLight() {
|
|||
|
|
return const AppColors(
|
|||
|
|
// テキスト
|
|||
|
|
textPrimary: Color(0xFF2C2C2C), // ほぼ黒（墨インスパイア）
|
|||
|
|
textSecondary: Color(0xFF757575), // グレー
|
|||
|
|
textTertiary: Color(0xFFBDBDBD), // ライトグレー
|
|||
|
|
|
|||
|
|
// ブランド
|
|||
|
|
brandPrimary: Color(0xFF4A3B32), // 墨色（焦げ茶）
|
|||
|
|
brandAccent: Color(0xFFD4A574), // 琥珀色
|
|||
|
|
brandSurface: Color(0xFFFDFBF7), // 和紙ホワイト
|
|||
|
|
|
|||
|
|
// アイコン
|
|||
|
|
iconDefault: Color(0xFF4A3B32), // 墨色
|
|||
|
|
iconSubtle: Color(0xFF9E9E9E), // グレー
|
|||
|
|
iconAccent: Color(0xFFD4A574), // 琥珀色
|
|||
|
|
|
|||
|
|
// サーフェイス
|
|||
|
|
surfaceElevated: Color(0xFFFFFFFF), // 純白（カード）
|
|||
|
|
surfaceSubtle: Color(0xFFF5F5F5), // オフホワイト
|
|||
|
|
divider: Color(0xFFE0E0E0), // ライトグレー
|
|||
|
|
|
|||
|
|
// セマンティック
|
|||
|
|
success: Color(0xFF388E3C), // 緑
|
|||
|
|
warning: Color(0xFFF57C00), // オレンジ
|
|||
|
|
error: Color(0xFFD32F2F), // 赤
|
|||
|
|
info: Color(0xFF1976D2), // 青
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// 和紙×墨×琥珀 ダークモード
|
|||
|
|
/// - プライマリ: 琥珀色（ゴールド）
|
|||
|
|
/// - アクセント: 深い琥珀
|
|||
|
|
/// - サーフェイス: ダークグレー
|
|||
|
|
static AppColors washiDark() {
|
|||
|
|
return const AppColors(
|
|||
|
|
// テキスト
|
|||
|
|
textPrimary: Color(0xFFFFFFFF), // 白
|
|||
|
|
textSecondary: Color(0xFFBDBDBD), // ライトグレー
|
|||
|
|
textTertiary: Color(0xFF757575), // グレー
|
|||
|
|
|
|||
|
|
// ブランド
|
|||
|
|
brandPrimary: Color(0xFFD4A574), // 琥珀色（ゴールド）
|
|||
|
|
brandAccent: Color(0xFFB8860B), // 深い琥珀
|
|||
|
|
brandSurface: Color(0xFF1E1E1E), // ダークグレー
|
|||
|
|
|
|||
|
|
// アイコン
|
|||
|
|
iconDefault: Color(0xFFD4A574), // 琥珀色
|
|||
|
|
iconSubtle: Color(0xFF9E9E9E), // グレー
|
|||
|
|
iconAccent: Color(0xFFFFD54F), // ライトゴールド
|
|||
|
|
|
|||
|
|
// サーフェイス
|
|||
|
|
surfaceElevated: Color(0xFF2C2C2C), // ややライトなダーク
|
|||
|
|
surfaceSubtle: Color(0xFF1A1A1A), // 深いダーク
|
|||
|
|
divider: Color(0xFF424242), // ダークグレー
|
|||
|
|
|
|||
|
|
// セマンティック
|
|||
|
|
success: Color(0xFF66BB6A), // ライトグリーン
|
|||
|
|
warning: Color(0xFFFFB74D), // ライトオレンジ
|
|||
|
|
error: Color(0xFFEF5350), // ライトレッド
|
|||
|
|
info: Color(0xFF42A5F5), // ライトブルー
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// ===== ファクトリーメソッド：Currentテーマ（オリジナル） =====
|
|||
|
|
|
|||
|
|
/// Current（オリジナル）ライトモード
|
|||
|
|
/// - プライマリ: Posimai Blue
|
|||
|
|
/// - アクセント: オレンジ
|
|||
|
|
/// - サーフェイス: ホワイト
|
|||
|
|
static AppColors currentLight() {
|
|||
|
|
return const AppColors(
|
|||
|
|
// テキスト
|
|||
|
|
textPrimary: Color(0xFF212121), // ほぼ黒
|
|||
|
|
textSecondary: Color(0xFF757575), // グレー
|
|||
|
|
textTertiary: Color(0xFFBDBDBD), // ライトグレー
|
|||
|
|
|
|||
|
|
// ブランド
|
|||
|
|
brandPrimary: Color(0xFF376495), // Posimai Blue
|
|||
|
|
brandAccent: Color(0xFFFF6F00), // 深いオレンジ
|
|||
|
|
brandSurface: Color(0xFFFFFFFF), // 純白
|
|||
|
|
|
|||
|
|
// アイコン
|
|||
|
|
iconDefault: Color(0xFF376495), // Posimai Blue
|
|||
|
|
iconSubtle: Color(0xFF9E9E9E), // グレー
|
|||
|
|
iconAccent: Color(0xFFFF6F00), // オレンジ
|
|||
|
|
|
|||
|
|
// サーフェイス
|
|||
|
|
surfaceElevated: Color(0xFFFFFFFF), // 純白
|
|||
|
|
surfaceSubtle: Color(0xFFFAFAFA), // オフホワイト
|
|||
|
|
divider: Color(0xFFE0E0E0), // ライトグレー
|
|||
|
|
|
|||
|
|
// セマンティック
|
|||
|
|
success: Color(0xFF388E3C), // 緑
|
|||
|
|
warning: Color(0xFFF57C00), // オレンジ
|
|||
|
|
error: Color(0xFFD32F2F), // 赤
|
|||
|
|
info: Color(0xFF1976D2), // 青
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/// Current（オリジナル）ダークモード
|
|||
|
|
/// - プライマリ: ライトブルー
|
|||
|
|
/// - アクセント: ライトオレンジ
|
|||
|
|
/// - サーフェイス: ダークグレー
|
|||
|
|
static AppColors currentDark() {
|
|||
|
|
return const AppColors(
|
|||
|
|
// テキスト
|
|||
|
|
textPrimary: Color(0xFFFFFFFF), // 白
|
|||
|
|
textSecondary: Color(0xFFBDBDBD), // ライトグレー
|
|||
|
|
textTertiary: Color(0xFF757575), // グレー
|
|||
|
|
|
|||
|
|
// ブランド
|
|||
|
|
brandPrimary: Color(0xFF8AB4F8), // ライトブルー
|
|||
|
|
brandAccent: Color(0xFFFFB74D), // ライトオレンジ
|
|||
|
|
brandSurface: Color(0xFF1E1E1E), // ダークグレー
|
|||
|
|
|
|||
|
|
// アイコン
|
|||
|
|
iconDefault: Color(0xFF8AB4F8), // ライトブルー
|
|||
|
|
iconSubtle: Color(0xFF9E9E9E), // グレー
|
|||
|
|
iconAccent: Color(0xFFFFB74D), // ライトオレンジ
|
|||
|
|
|
|||
|
|
// サーフェイス
|
|||
|
|
surfaceElevated: Color(0xFF2C2C2C), // ややライトなダーク
|
|||
|
|
surfaceSubtle: Color(0xFF1A1A1A), // 深いダーク
|
|||
|
|
divider: Color(0xFF424242), // ダークグレー
|
|||
|
|
|
|||
|
|
// セマンティック
|
|||
|
|
success: Color(0xFF66BB6A), // ライトグリーン
|
|||
|
|
warning: Color(0xFFFFB74D), // ライトオレンジ
|
|||
|
|
error: Color(0xFFEF5350), // ライトレッド
|
|||
|
|
info: Color(0xFF42A5F5), // ライトブルー
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|