feat(ui): 레트로 색상 시스템 확장
- 새로운 색상 팔레트 추가 - 테마별 색상 그룹 정리 - 색상 유틸리티 함수 추가
This commit is contained in:
JiWoong Sul
@@ -1,147 +1,297 @@
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
/// 레트로 RPG 스타일 색상 팔레트 (8-bit/16-bit 클래식 RPG 느낌)
|
||||
/// 레트로 RPG 스타일 색상 팔레트 (다크/라이트 모드 지원)
|
||||
///
|
||||
/// 다크 모드: Dark Fantasy (도쿄 나이트 영감)
|
||||
/// 라이트 모드: Classic Parchment (양피지/세피아 톤)
|
||||
class RetroColors {
|
||||
RetroColors._();
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════
|
||||
// 메인 UI 컬러 (Main UI Colors)
|
||||
// 테마 감지 유틸리티 (Theme Detection)
|
||||
// ═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// 골드 (테두리, 강조, 타이틀)
|
||||
static const Color gold = Color(0xFFD4A84B);
|
||||
|
||||
/// 밝은 골드 (호버, 하이라이트)
|
||||
static const Color goldLight = Color(0xFFE8C97A);
|
||||
|
||||
/// 어두운 골드 (눌림 상태)
|
||||
static const Color goldDark = Color(0xFFB08A3A);
|
||||
|
||||
/// 갈색 (프레임, 테두리)
|
||||
static const Color brown = Color(0xFF8B4513);
|
||||
|
||||
/// 크림색 (텍스트 배경, 밝은 패널)
|
||||
static const Color cream = Color(0xFFF5E6C8);
|
||||
|
||||
/// 다크 브라운 (패널 배경)
|
||||
static const Color darkBrown = Color(0xFF3D2817);
|
||||
|
||||
/// 매우 어두운 브라운 (딥 배경)
|
||||
static const Color deepBrown = Color(0xFF2A1A0F);
|
||||
/// 다크 모드 여부 확인
|
||||
static bool isDarkMode(BuildContext context) =>
|
||||
Theme.of(context).brightness == Brightness.dark;
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════
|
||||
// 상태 바 컬러 (Status Bar Colors)
|
||||
// 다크 모드 색상 (Dark Fantasy)
|
||||
// ═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// HP 바 빨간색
|
||||
static const Color hpRed = Color(0xFFCC3333);
|
||||
// 배경 계열 (어두운 블루-그레이 기반)
|
||||
static const Color _darkBg = Color(0xFF1A1B26);
|
||||
static const Color _darkPanelBg = Color(0xFF24283B);
|
||||
static const Color _darkSurface = Color(0xFF2A2E3F);
|
||||
|
||||
/// HP 바 빨간색 (어두운)
|
||||
static const Color hpRedDark = Color(0xFF8B2222);
|
||||
// 테두리/강조
|
||||
static const Color _darkGold = Color(0xFFE0AF68);
|
||||
static const Color _darkGoldLight = Color(0xFFF0C98A);
|
||||
static const Color _darkGoldDark = Color(0xFFC89B50);
|
||||
static const Color _darkBorder = Color(0xFF3B4261);
|
||||
static const Color _darkBorderLight = Color(0xFF545C7E);
|
||||
|
||||
/// MP 바 파란색
|
||||
static const Color mpBlue = Color(0xFF3366CC);
|
||||
// 텍스트 (고대비)
|
||||
static const Color _darkTextPrimary = Color(0xFFC0CAF5);
|
||||
static const Color _darkTextSecondary = Color(0xFF9AA5CE);
|
||||
static const Color _darkTextMuted = Color(0xFF565F89);
|
||||
|
||||
/// MP 바 파란색 (어두운)
|
||||
static const Color mpBlueDark = Color(0xFF224488);
|
||||
// 상태 색상
|
||||
static const Color _darkHp = Color(0xFFF7768E);
|
||||
static const Color _darkHpDark = Color(0xFFB85A6A);
|
||||
static const Color _darkMp = Color(0xFF7AA2F7);
|
||||
static const Color _darkMpDark = Color(0xFF5A7AB8);
|
||||
static const Color _darkExp = Color(0xFF9ECE6A);
|
||||
static const Color _darkExpDark = Color(0xFF7AA850);
|
||||
static const Color _darkWarning = Color(0xFFFF9E64);
|
||||
|
||||
/// EXP/성공 초록색
|
||||
static const Color expGreen = Color(0xFF33CC66);
|
||||
|
||||
/// EXP/성공 초록색 (어두운)
|
||||
static const Color expGreenDark = Color(0xFF228844);
|
||||
// 버튼
|
||||
static const Color _darkButtonPrimary = Color(0xFF3D4260);
|
||||
static const Color _darkButtonPressed = Color(0xFF2D3250);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════
|
||||
// ASCII 애니메이션 컬러 (기존 유지)
|
||||
// 라이트 모드 색상 (Classic Parchment)
|
||||
// ═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
// 배경 계열 (양피지/크림 기반)
|
||||
static const Color _lightBg = Color(0xFFFAF4ED);
|
||||
static const Color _lightPanelBg = Color(0xFFF2E8DC);
|
||||
static const Color _lightSurface = Color(0xFFFFFFFF);
|
||||
|
||||
// 테두리/강조
|
||||
static const Color _lightGold = Color(0xFFB8860B);
|
||||
static const Color _lightGoldLight = Color(0xFFD4A84B);
|
||||
static const Color _lightGoldDark = Color(0xFF8B6914);
|
||||
static const Color _lightBorder = Color(0xFFD4C4B0);
|
||||
static const Color _lightBorderDark = Color(0xFF8B7355);
|
||||
|
||||
// 텍스트 (고대비)
|
||||
static const Color _lightTextPrimary = Color(0xFF1F1F28);
|
||||
static const Color _lightTextSecondary = Color(0xFF4A4458);
|
||||
static const Color _lightTextMuted = Color(0xFF797593);
|
||||
|
||||
// 상태 색상
|
||||
static const Color _lightHp = Color(0xFFD7263D);
|
||||
static const Color _lightHpDark = Color(0xFFA81C30);
|
||||
static const Color _lightMp = Color(0xFF2E5EAA);
|
||||
static const Color _lightMpDark = Color(0xFF234A88);
|
||||
static const Color _lightExp = Color(0xFF2E8B57);
|
||||
static const Color _lightExpDark = Color(0xFF236B44);
|
||||
static const Color _lightWarning = Color(0xFFCD7F32);
|
||||
|
||||
// 버튼
|
||||
static const Color _lightButtonPrimary = Color(0xFFE8DDD0);
|
||||
static const Color _lightButtonPressed = Color(0xFFD8C8B8);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════
|
||||
// ASCII 애니메이션 컬러 (테마 무관, 고정)
|
||||
// ═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// ASCII 흰색 (캐릭터/몬스터)
|
||||
static const Color asciiWhite = Color(0xFFFFFFFF);
|
||||
|
||||
/// ASCII 시안 (긍정 효과)
|
||||
static const Color asciiCyan = Color(0xFF00FFFF);
|
||||
|
||||
/// ASCII 마젠타 (부정 효과)
|
||||
static const Color asciiMagenta = Color(0xFFFF00FF);
|
||||
|
||||
/// ASCII 노란색 (경고, 중요)
|
||||
static const Color asciiYellow = Color(0xFFFFFF00);
|
||||
|
||||
/// ASCII 초록색 (성공, 회복)
|
||||
static const Color asciiGreen = Color(0xFF00FF00);
|
||||
|
||||
/// ASCII 빨간색 (데미지, 위험)
|
||||
static const Color asciiRed = Color(0xFFFF0000);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════
|
||||
// 텍스트 컬러 (Text Colors)
|
||||
// 동적 색상 Getter (테마에 따라 자동 전환)
|
||||
// 사용법: RetroColors.goldOf(context), RetroColors.textPrimaryOf(context)
|
||||
// ═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// 기본 텍스트 (밝은 배경용)
|
||||
static const Color textDark = Color(0xFF2A1A0F);
|
||||
// === 배경 색상 ===
|
||||
static Color backgroundOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkBg : _lightBg;
|
||||
|
||||
/// 기본 텍스트 (어두운 배경용)
|
||||
static const Color textLight = Color(0xFFF5E6C8);
|
||||
static Color panelBgOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkPanelBg : _lightPanelBg;
|
||||
|
||||
/// 비활성 텍스트
|
||||
static const Color textDisabled = Color(0xFF7A6A5A);
|
||||
static Color surfaceOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkSurface : _lightSurface;
|
||||
|
||||
// === 강조/골드 색상 ===
|
||||
static Color goldOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkGold : _lightGold;
|
||||
|
||||
static Color goldLightOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkGoldLight : _lightGoldLight;
|
||||
|
||||
static Color goldDarkOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkGoldDark : _lightGoldDark;
|
||||
|
||||
// === 테두리 색상 ===
|
||||
static Color borderOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkBorder : _lightBorder;
|
||||
|
||||
static Color borderLightOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkBorderLight : _lightBorderDark;
|
||||
|
||||
// === 텍스트 색상 ===
|
||||
static Color textPrimaryOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkTextPrimary : _lightTextPrimary;
|
||||
|
||||
static Color textSecondaryOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkTextSecondary : _lightTextSecondary;
|
||||
|
||||
static Color textMutedOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkTextMuted : _lightTextMuted;
|
||||
|
||||
// === 상태 바 색상 ===
|
||||
static Color hpOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkHp : _lightHp;
|
||||
|
||||
static Color hpDarkOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkHpDark : _lightHpDark;
|
||||
|
||||
static Color mpOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkMp : _lightMp;
|
||||
|
||||
static Color mpDarkOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkMpDark : _lightMpDark;
|
||||
|
||||
static Color expOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkExp : _lightExp;
|
||||
|
||||
static Color expDarkOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkExpDark : _lightExpDark;
|
||||
|
||||
static Color warningOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkWarning : _lightWarning;
|
||||
|
||||
// === 버튼 색상 ===
|
||||
static Color buttonPrimaryOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkButtonPrimary : _lightButtonPrimary;
|
||||
|
||||
static Color buttonPressedOf(BuildContext context) =>
|
||||
isDarkMode(context) ? _darkButtonPressed : _lightButtonPressed;
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════
|
||||
// 버튼 컬러 (Button Colors)
|
||||
// 레거시 호환 (Static Colors) - 마이그레이션 중 사용
|
||||
// 점진적으로 context 버전으로 교체 예정
|
||||
// ═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// 주요 버튼 배경
|
||||
static const Color buttonPrimary = Color(0xFF5A4A3A);
|
||||
/// @deprecated Use goldOf(context) instead
|
||||
static const Color gold = _darkGold;
|
||||
|
||||
/// 주요 버튼 배경 (눌림)
|
||||
static const Color buttonPrimaryPressed = Color(0xFF3A2A1A);
|
||||
/// @deprecated Use goldLightOf(context) instead
|
||||
static const Color goldLight = _darkGoldLight;
|
||||
|
||||
/// 보조 버튼 배경
|
||||
/// @deprecated Use goldDarkOf(context) instead
|
||||
static const Color goldDark = _darkGoldDark;
|
||||
|
||||
/// @deprecated Use textPrimary(context) instead
|
||||
static const Color textLight = _darkTextPrimary;
|
||||
|
||||
/// @deprecated Use textSecondary(context) instead
|
||||
static const Color textDark = _lightTextPrimary;
|
||||
|
||||
/// @deprecated Use textMuted(context) instead
|
||||
static const Color textDisabled = _darkTextMuted;
|
||||
|
||||
/// @deprecated Use panelBgOf(context) instead
|
||||
static const Color panelBg = _darkPanelBg;
|
||||
|
||||
/// @deprecated Use surfaceOf(context) instead
|
||||
static const Color panelBgLight = _darkSurface;
|
||||
|
||||
/// @deprecated Use border(context) instead
|
||||
static const Color panelBorderOuter = _darkBorder;
|
||||
|
||||
/// @deprecated Use borderLight(context) instead
|
||||
static const Color panelBorderInner = _darkBorderLight;
|
||||
|
||||
/// @deprecated Use background(context) instead
|
||||
static const Color deepBrown = _darkBg;
|
||||
|
||||
/// @deprecated 레거시 색상 - 다크 브라운
|
||||
static const Color darkBrown = _darkPanelBg;
|
||||
|
||||
/// @deprecated 레거시 색상 - 브라운
|
||||
static const Color brown = Color(0xFF8B4513);
|
||||
|
||||
/// @deprecated 레거시 색상 - 크림
|
||||
static const Color cream = Color(0xFFF5E6C8);
|
||||
|
||||
/// @deprecated Use hp(context) instead
|
||||
static const Color hpRed = _darkHp;
|
||||
|
||||
/// @deprecated Use hpDark(context) instead
|
||||
static const Color hpRedDark = _darkHpDark;
|
||||
|
||||
/// @deprecated Use mp(context) instead
|
||||
static const Color mpBlue = _darkMp;
|
||||
|
||||
/// @deprecated Use mpDark(context) instead
|
||||
static const Color mpBlueDark = _darkMpDark;
|
||||
|
||||
/// @deprecated Use exp(context) instead
|
||||
static const Color expGreen = _darkExp;
|
||||
|
||||
/// @deprecated Use expDark(context) instead
|
||||
static const Color expGreenDark = _darkExpDark;
|
||||
|
||||
/// @deprecated Use buttonPrimary(context) instead
|
||||
static const Color buttonPrimary = _darkButtonPrimary;
|
||||
|
||||
/// @deprecated Use buttonPressed(context) instead
|
||||
static const Color buttonPrimaryPressed = _darkButtonPressed;
|
||||
|
||||
/// @deprecated 레거시 호환
|
||||
static const Color buttonSecondary = Color(0xFF4A3A2A);
|
||||
|
||||
/// 보조 버튼 배경 (눌림)
|
||||
/// @deprecated 레거시 호환
|
||||
static const Color buttonSecondaryPressed = Color(0xFF2A1A0A);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════
|
||||
// 패널 컬러 (Panel Colors)
|
||||
// ColorScheme 생성기 (Theme Data용)
|
||||
// ═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// 패널 배경 (기본)
|
||||
static const Color panelBg = Color(0xFF3D2817);
|
||||
|
||||
/// 패널 배경 (밝은)
|
||||
static const Color panelBgLight = Color(0xFF5D4837);
|
||||
|
||||
/// 패널 테두리 (외곽, 어두운)
|
||||
static const Color panelBorderOuter = Color(0xFF1A0F08);
|
||||
|
||||
/// 패널 테두리 (내곽, 밝은)
|
||||
static const Color panelBorderInner = Color(0xFF8B7355);
|
||||
|
||||
// ═══════════════════════════════════════════════════════════════════════
|
||||
// 유틸리티 메서드 (Utility Methods)
|
||||
// ═══════════════════════════════════════════════════════════════════════
|
||||
|
||||
/// 레트로 테마용 ColorScheme 생성
|
||||
static ColorScheme get colorScheme => ColorScheme.dark(
|
||||
primary: gold,
|
||||
onPrimary: textDark,
|
||||
primaryContainer: goldDark,
|
||||
onPrimaryContainer: textLight,
|
||||
secondary: brown,
|
||||
onSecondary: textLight,
|
||||
secondaryContainer: darkBrown,
|
||||
onSecondaryContainer: textLight,
|
||||
tertiary: cream,
|
||||
onTertiary: textDark,
|
||||
tertiaryContainer: panelBgLight,
|
||||
onTertiaryContainer: textLight,
|
||||
error: hpRed,
|
||||
onError: textLight,
|
||||
surface: deepBrown,
|
||||
onSurface: textLight,
|
||||
surfaceContainerHighest: panelBg,
|
||||
outline: panelBorderOuter,
|
||||
outlineVariant: panelBorderInner,
|
||||
/// 다크 모드 ColorScheme
|
||||
static ColorScheme get darkColorScheme => ColorScheme.dark(
|
||||
primary: _darkGold,
|
||||
onPrimary: _darkBg,
|
||||
primaryContainer: _darkGoldDark,
|
||||
onPrimaryContainer: _darkTextPrimary,
|
||||
secondary: _darkBorder,
|
||||
onSecondary: _darkTextPrimary,
|
||||
secondaryContainer: _darkPanelBg,
|
||||
onSecondaryContainer: _darkTextPrimary,
|
||||
tertiary: _darkMp,
|
||||
onTertiary: _darkBg,
|
||||
tertiaryContainer: _darkMpDark,
|
||||
onTertiaryContainer: _darkTextPrimary,
|
||||
error: _darkHp,
|
||||
onError: _darkBg,
|
||||
surface: _darkBg,
|
||||
onSurface: _darkTextPrimary,
|
||||
surfaceContainerHighest: _darkPanelBg,
|
||||
outline: _darkBorder,
|
||||
outlineVariant: _darkBorderLight,
|
||||
);
|
||||
|
||||
/// 라이트 모드 ColorScheme
|
||||
static ColorScheme get lightColorScheme => ColorScheme.light(
|
||||
primary: _lightGold,
|
||||
onPrimary: _lightSurface,
|
||||
primaryContainer: _lightGoldLight,
|
||||
onPrimaryContainer: _lightTextPrimary,
|
||||
secondary: _lightBorder,
|
||||
onSecondary: _lightTextPrimary,
|
||||
secondaryContainer: _lightPanelBg,
|
||||
onSecondaryContainer: _lightTextPrimary,
|
||||
tertiary: _lightMp,
|
||||
onTertiary: _lightSurface,
|
||||
tertiaryContainer: _lightMpDark,
|
||||
onTertiaryContainer: _lightSurface,
|
||||
error: _lightHp,
|
||||
onError: _lightSurface,
|
||||
surface: _lightBg,
|
||||
onSurface: _lightTextPrimary,
|
||||
surfaceContainerHighest: _lightPanelBg,
|
||||
outline: _lightBorder,
|
||||
outlineVariant: _lightBorderDark,
|
||||
);
|
||||
|
||||
/// @deprecated Use darkColorScheme or lightColorScheme instead
|
||||
static ColorScheme get colorScheme => darkColorScheme;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user