223 lines
8.0 KiB
Plaintext
223 lines
8.0 KiB
Plaintext
/*
|
|
* ===================================
|
|
* UTKThemeDark.uss
|
|
* 다크 테마 색상 변수 정의
|
|
* ===================================
|
|
*
|
|
* 이 파일은 다크 테마의 모든 색상 변수를 정의합니다.
|
|
* 테마 전환 시 이 파일을 UTKThemeLight.uss로 교체합니다.
|
|
*/
|
|
|
|
* {
|
|
/* ===================================
|
|
Base Colors (color-base-*)
|
|
그레이스케일 팔레트 (밝음 -> 어두움)
|
|
=================================== */
|
|
--color-base-01: #FFFFFF;
|
|
--color-base-02: #F0F0F0;
|
|
--color-base-03: #E7E7E7;
|
|
--color-base-04: #E5E5E5;
|
|
--color-base-05: #D4D4D4;
|
|
--color-base-06: #CCCCCC;
|
|
--color-base-07: #C6C6C6;
|
|
--color-base-08: #BBBBBB;
|
|
--color-base-09: #A0A0A0;
|
|
--color-base-10: #888080;
|
|
--color-base-11: #7F7F7F;
|
|
--color-base-12: #606060;
|
|
--color-base-13: #454545;
|
|
--color-base-14: #3C3C3C;
|
|
--color-base-15: #3A3D41;
|
|
--color-base-16: #333333;
|
|
--color-base-17: #303031;
|
|
--color-base-18: #292929;
|
|
--color-base-19: #252526;
|
|
--color-base-20: #1E1E1E;
|
|
--color-base-21: #000000;
|
|
|
|
/* ===================================
|
|
Accent Colors - Blue (color-blue-*)
|
|
=================================== */
|
|
--color-blue-01: #75BEFF;
|
|
--color-blue-02: #4AA6FF;
|
|
--color-blue-03: #3399CC;
|
|
--color-blue-04: #3794FF;
|
|
--color-blue-05: #0897FB;
|
|
--color-blue-06: #087ACC;
|
|
--color-blue-07: #0E639C;
|
|
--color-blue-08: #264F78;
|
|
--color-blue-09: #094771;
|
|
--color-blue-10: #062F4A;
|
|
--color-blue-11: #001F33;
|
|
|
|
/* ===================================
|
|
Accent Colors - Red (color-red-*)
|
|
=================================== */
|
|
--color-red-01: #F14C4C;
|
|
--color-red-02: #C74E39;
|
|
--color-red-03: #FF0000;
|
|
--color-red-04: #782626;
|
|
|
|
/* ===================================
|
|
Accent Colors - Green (color-green-*)
|
|
=================================== */
|
|
--color-green-01: #73C991;
|
|
--color-green-02: #40C8AE;
|
|
--color-green-03: #16825D;
|
|
--color-green-04: #327E36;
|
|
--color-green-05: #28632B;
|
|
|
|
/* ===================================
|
|
Accent Colors - Purple (color-purple-*)
|
|
=================================== */
|
|
--color-purple-01: #6C6CC4;
|
|
--color-purple-02: #B180D7;
|
|
--color-purple-03: #BC3FBC;
|
|
--color-purple-04: #68217A;
|
|
|
|
/* ===================================
|
|
Accent Colors - Yellow (color-yellow-*)
|
|
=================================== */
|
|
--color-yellow-01: #D7BA7D;
|
|
--color-yellow-02: #CCA700;
|
|
--color-yellow-03: #B89500;
|
|
--color-yellow-04: #BF8803;
|
|
--color-yellow-05: #FFFF00;
|
|
|
|
/* ===================================
|
|
Accent Colors - Orange (color-orange-*)
|
|
=================================== */
|
|
--color-orange-01: #CC6633;
|
|
--color-orange-02: #EE9D28;
|
|
--color-orange-03: #EA5C00;
|
|
|
|
/* ===================================
|
|
Gray Colors (color-gray-*)
|
|
=================================== */
|
|
--color-gray-01: #E4E6F1;
|
|
--color-gray-02: #5F6A79;
|
|
--color-gray-03: #424750;
|
|
|
|
/* ===================================
|
|
Seti Colors (color-seti-*)
|
|
=================================== */
|
|
--color-seti-blue: #519ABA;
|
|
--color-seti-green: #8DC149;
|
|
--color-seti-orange: #E37933;
|
|
--color-seti-pink: #F55385;
|
|
--color-seti-red: #CC3E44;
|
|
--color-seti-steel: #7494A3;
|
|
--color-seti-yellow: #CBCB41;
|
|
--color-seti-purple: #A074C4;
|
|
--color-seti-ignore: #41535B;
|
|
--color-seti-white: #D4D7D6;
|
|
--color-seti-gray: #6D8086;
|
|
|
|
/* ===================================
|
|
Semantic Colors - Text (color-text-*)
|
|
=================================== */
|
|
--color-text-primary: var(--color-base-03);
|
|
--color-text-secondary: var(--color-base-08);
|
|
--color-text-disabled: var(--color-gray-02);
|
|
--color-text-placeholder: var(--color-base-12);
|
|
--color-text-inverse: var(--color-base-20);
|
|
--color-text-on-inverse: var(--color-base-21);
|
|
--color-text-on-primary: var(--color-base-04);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Background (color-bg-*)
|
|
=================================== */
|
|
--color-bg-base: var(--color-base-20);
|
|
--color-bg-primary: var(--color-base-20);
|
|
--color-bg-secondary: var(--color-base-19);
|
|
--color-bg-tertiary: var(--color-base-13);
|
|
--color-bg-elevated: var(--color-base-18);
|
|
--color-bg-modal: var(--color-base-18);
|
|
--color-bg-panel: var(--color-base-20);
|
|
--color-bg-input: var(--color-base-19);
|
|
--color-bg-hover: var(--color-base-16);
|
|
--color-bg-active: var(--color-base-14);
|
|
--color-bg-tooltip: rgba(38, 38, 38, 0.95);
|
|
--color-bg-overlay: rgba(0, 0, 0, 0.5);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Border (color-border-*)
|
|
=================================== */
|
|
--color-border: var(--color-base-16);
|
|
--color-border-light: var(--color-base-14);
|
|
--color-border-focus: var(--color-blue-05);
|
|
--color-border-error: var(--color-red-01);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Button (color-btn-*)
|
|
=================================== */
|
|
--color-btn-normal: var(--color-base-17);
|
|
--color-btn-hover: #3C3C3D;
|
|
--color-btn-pressed: var(--color-base-19);
|
|
--color-btn-disabled: var(--color-base-16);
|
|
--color-btn-primary: var(--color-blue-05);
|
|
--color-btn-primary-hover: var(--color-blue-06);
|
|
--color-btn-secondary: var(--color-base-14);
|
|
--color-btn-secondary-hover: var(--color-base-13);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Calendar (color-calendar-*)
|
|
=================================== */
|
|
--color-calendar-sunday: var(--color-red-01);
|
|
--color-calendar-saturday: var(--color-blue-02);
|
|
--color-calendar-today: var(--color-green-02);
|
|
--color-calendar-selected: var(--color-blue-06);
|
|
--color-calendar-range: var(--color-blue-06);
|
|
--color-calendar-range-hover: var(--color-blue-07);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Primary (color-primary-*)
|
|
=================================== */
|
|
--color-primary: var(--color-blue-05);
|
|
--color-primary-hover: var(--color-blue-06);
|
|
--color-primary-active: var(--color-blue-08);
|
|
|
|
/* ===================================
|
|
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-05);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Vector (color-vector-*)
|
|
=================================== */
|
|
--color-vector-x: rgba(230, 102, 102, 1);
|
|
--color-vector-y: rgba(102, 230, 102, 1);
|
|
--color-vector-z: rgba(102, 102, 230, 1);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Scrollbar (color-scroller-*)
|
|
=================================== */
|
|
--color-scroller-dragger-normal: var(--color-base-16);
|
|
--color-scroller-dragger-hover: #525252;
|
|
--color-scroller-dragger-active: var(--color-base-16);
|
|
--color-scroller-tracker-normal: rgba(0, 0, 0, 0);
|
|
--color-scroller-tracker-hover: rgba(26, 26, 26, 0);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Drag Ghost (color-drag-*)
|
|
=================================== */
|
|
--color-drag-ghost-bg: rgba(41, 41, 41, 1);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Collection (color-collection-*)
|
|
=================================== */
|
|
--color-collection-item: rgba(37, 37, 38, 0);
|
|
--color-collection-item-hover: var(--color-base-16);
|
|
--color-collection-item-selected: var(--color-blue-07);
|
|
--color-collection-item-selected-hover: var(--color-blue-08);
|
|
|
|
/* ===================================
|
|
Semantic Colors - Tree Checkmark (color-tree-checkmark-*)
|
|
=================================== */
|
|
--color-tree-checkmark: var(--color-text-secondary);
|
|
--color-tree-checkmark-hover: var(--color-text-primary);
|
|
}
|