/* * =================================== * UTKThemeLight.uss * 라이트 테마 색상 변수 정의 * =================================== * * 이 파일은 라이트 테마의 모든 색상 변수를 정의합니다. * 테마 전환 시 UTKThemeDark.uss를 이 파일로 교체합니다. * * 라이트 테마에서는 base 색상 순서가 반전됩니다: * - 배경: 밝은 색상 (base-01 ~ base-05) * - 텍스트: 어두운 색상 (base-16 ~ base-21) */ :root { /* =================================== Base Colors (color-base-*) 그레이스케일 팔레트 (밝음 -> 어두움) =================================== */ --color-base-01: #FFFFFF; --color-base-02: #F8F8F8; --color-base-03: #F0F0F0; --color-base-04: #E8E8E8; --color-base-05: #E0E0E0; --color-base-06: #D0D0D0; --color-base-07: #C0C0C0; --color-base-08: #A0A0A0; --color-base-09: #808080; --color-base-10: #707070; --color-base-11: #606060; --color-base-12: #505050; --color-base-13: #404040; --color-base-14: #353535; --color-base-15: #303030; --color-base-16: #282828; --color-base-17: #222222; --color-base-18: #1C1C1C; --color-base-19: #161616; --color-base-20: #101010; --color-base-21: #000000; /* =================================== Accent Colors - Blue (color-blue-*) 라이트 테마에서는 약간 더 어두운 톤 사용 =================================== */ --color-blue-01: #0066CC; --color-blue-02: #0078D4; --color-blue-03: #106EBE; --color-blue-04: #005A9E; --color-blue-05: #004578; --color-blue-06: #003F6E; --color-blue-07: #003462; --color-blue-08: #002952; --color-blue-09: #001F3F; --color-blue-10: #001530; --color-blue-11: #000B1A; /* =================================== Accent Colors - Red (color-red-*) =================================== */ --color-red-01: #D32F2F; --color-red-02: #B71C1C; --color-red-03: #E53935; --color-red-04: #C62828; /* =================================== Accent Colors - Green (color-green-*) =================================== */ --color-green-01: #388E3C; --color-green-02: #2E7D32; --color-green-03: #1B5E20; --color-green-04: #4CAF50; --color-green-05: #43A047; /* =================================== Accent Colors - Purple (color-purple-*) =================================== */ --color-purple-01: #7B1FA2; --color-purple-02: #6A1B9A; --color-purple-03: #9C27B0; --color-purple-04: #8E24AA; /* =================================== Accent Colors - Yellow (color-yellow-*) =================================== */ --color-yellow-01: #F9A825; --color-yellow-02: #F57F17; --color-yellow-03: #FF8F00; --color-yellow-04: #FF6F00; --color-yellow-05: #FFD600; /* =================================== Accent Colors - Orange (color-orange-*) =================================== */ --color-orange-01: #E65100; --color-orange-02: #EF6C00; --color-orange-03: #F57C00; /* =================================== Gray Colors (color-gray-*) =================================== */ --color-gray-01: #424242; --color-gray-02: #757575; --color-gray-03: #9E9E9E; /* =================================== Seti Colors (color-seti-*) =================================== */ --color-seti-blue: #1976D2; --color-seti-green: #689F38; --color-seti-orange: #E65100; --color-seti-pink: #D81B60; --color-seti-red: #C62828; --color-seti-steel: #455A64; --color-seti-yellow: #F9A825; --color-seti-purple: #7B1FA2; --color-seti-ignore: #78909C; --color-seti-white: #ECEFF1; --color-seti-gray: #607D8B; /* =================================== Semantic Colors - Text (color-text-*) 라이트 테마에서는 어두운 텍스트 사용 =================================== */ --color-text-primary: var(--color-base-17); --color-text-secondary: var(--color-base-12); --color-text-disabled: var(--color-base-08); --color-text-placeholder: var(--color-base-09); --color-text-inverse: var(--color-base-01); --color-text-on-primary: var(--color-base-01); /* =================================== Semantic Colors - Background (color-bg-*) 라이트 테마에서는 밝은 배경 사용 =================================== */ --color-bg-base: var(--color-base-01); --color-bg-elevated: var(--color-base-02); --color-bg-modal: var(--color-base-02); --color-bg-panel: var(--color-base-01); --color-bg-input: var(--color-base-01); --color-bg-tooltip: rgba(50, 50, 50, 0.95); --color-bg-overlay: rgba(0, 0, 0, 0.3); /* =================================== Semantic Colors - Border (color-border-*) =================================== */ --color-border: var(--color-base-05); --color-border-light: var(--color-base-04); --color-border-focus: var(--color-blue-02); --color-border-error: var(--color-red-01); /* =================================== Semantic Colors - Button (color-btn-*) =================================== */ --color-btn-normal: var(--color-base-04); --color-btn-hover: var(--color-base-05); --color-btn-pressed: var(--color-base-06); --color-btn-disabled: var(--color-base-03); --color-btn-primary: var(--color-blue-02); --color-btn-primary-hover: var(--color-blue-03); --color-btn-secondary: var(--color-base-05); --color-btn-secondary-hover: var(--color-base-06); /* =================================== Semantic Colors - Calendar (color-calendar-*) =================================== */ --color-calendar-sunday: var(--color-red-01); --color-calendar-saturday: var(--color-blue-02); --color-calendar-today: var(--color-orange-02); --color-calendar-selected: var(--color-blue-02); /* =================================== Semantic Colors - State (color-state-*) =================================== */ --color-state-success: var(--color-green-01); --color-state-warning: var(--color-orange-02); --color-state-error: var(--color-red-01); --color-state-info: var(--color-blue-02); /* =================================== Semantic Colors - Vector (color-vector-*) =================================== */ --color-vector-x: rgba(200, 60, 60, 1); --color-vector-y: rgba(60, 160, 60, 1); --color-vector-z: rgba(60, 60, 200, 1); /* =================================== Semantic Colors - Scrollbar (color-scroller-*) =================================== */ --color-scroller-dragger-normal: var(--color-base-07); --color-scroller-dragger-hover: var(--color-base-09); --color-scroller-dragger-active: var(--color-base-10); --color-scroller-tracker-normal: rgba(0, 0, 0, 0); --color-scroller-tracker-hover: rgba(0, 0, 0, 0.05); /* =================================== Semantic Colors - Drag Ghost (color-drag-*) =================================== */ --color-drag-ghost-bg: rgba(255, 255, 255, 0.95); /* =================================== Semantic Colors - Collection (color-collection-*) =================================== */ --color-collection-item: rgba(255, 255, 255, 0); --color-collection-item-hover: var(--color-base-04); --color-collection-item-selected: var(--color-blue-01); --color-collection-item-selected-hover: var(--color-blue-02); }