eomsangdon/Aislo
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(테마): 공통 값 한 벌 · Noto Sans KR 글꼴 파일 실음 (551-1)

Browse Source 
- ui_template_theme.css = 대시보드 값(초록 강조 #1f7a4d · 바탕 #f6f7f9 · 선 #e6e8ec · 글 #1f2328 · 둥글기 10) 밝음 · 어두움 두 블록 · 시스템 어두움 = 같은 값
- 옛 보라 이름(deep-iris · plum-velvet · royal-amethyst · mist-violet · lavender-wash) = 새 값의 별칭 · 안 쓰는 그라디언트 3 · twilight-beam · shadow-feature 지움
- 새 토큰 accent-soft · hover · surface-sunken · border-strong · primary-hover · danger-fill(#e5484d 채운 바탕) · scrim · 위험 글자 = #c0392b 그대로
- 글꼴 = --font-ui 한 토큰(--font-body · --font-display 별칭) · Inter · Britti 등 앞 이름 뺌 · ui_template/fonts/ 에 Noto Sans KR 가변 굵기 woff2 39 묶음(unicode-range) + OFL.txt · 첫 화면 = 196 KB 한 파일
- 대시보드 --b01-* = 공통 값의 별칭 · 셸 덮어쓰기 10 줄 · 셸 어두움 블록 지움(판 바탕 흰색 한 줄만 남김)
- test_546: 셸 hex 단정 → theme.css 값 · 셸 별칭 단정으로(값 자리가 theme.css 로 옮겨 감) · test_551_1 새 지킴 시험

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
eomsangdon
2026-10-26 21:08:01 +09:00
co-authored by Claude Opus 5.5
parent 85ae6319e4
commit aeb6bc498f
45 changed files with 931 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui_template/ui_template_theme.css
+93 -128
View File
@@ -1,83 +1,74 @@
/* =============================================================================
* ui_template_theme.css
* 글로벌 디자인 테마 및 CSS 변수 (라이트/다크)
* 글로벌 디자인 테마 및 CSS 변수 (라이트/다크) — 프로그램 전체 한 벌(대시보드 값)
*
* 출처: .agent/design.md — "Wiza" 스타일 레퍼런스
* 원칙:
* - 모든 색상/간격/폰트는 이 파일의 CSS 변수(var(--...))로만 참조.
* - 하드코딩된 Hex/px 값을 컴포넌트에 직접 입력 금지 (frontend.md §1).
* - 8px radius가 시그니처. pill/tag만 --radius-pills 사용.
* - 값은 이 파일 두 블록(밝음 · 어두움)에만 — 대시보드 `--b01-*` 는 여기 값의 별칭.
* ========================================================================== */
/* 글꼴 파일(Noto Sans KR · SIL OFL 1.1) — 모든 PC 가 같은 글꼴 · CAD 앱도 이 파일을 읽음 */
@import url("./fonts/noto_sans_kr.css");
:root {
/* 브라우저 기본 부품(체크 · 색 고르개 · 펼침 목록 · 스크롤 막대)이 테마를 따름 */
color-scheme: light;
/* ---------------------------------------------------------------------------
* 1. 색상 토큰 (Colors) — 바이올렛 단색 팔레트
* 1. 색상 토큰 (Colors) — 중립 회색 + 초록 강조
* ------------------------------------------------------------------------ */
--color-deep-iris: #26114a; /* 헤드라인, filled 버튼 배경 (24px 이하) */
--color-plum-velvet: #312749; /* 네비 텍스트, 보조 제목, 카드 타이틀 */
--color-royal-amethyst: #3e0079; /* 링크, 포커스 링, 아이콘 하이라이트 */
--color-mist-violet: #edecff; /* 소프트 하이라이트 배경, 태그 배경 */
--color-lavender-wash: #b99aff; /* 그라디언트 스톱, 히어로 분위기 */
--color-twilight-beam: #cf8aff; /* 멀티스톱 장식 그라디언트 시작색 */
/* 중립 (Neutrals) */
--color-canvas: #ffffff; /* 페이지 배경, 카드 표면, 입력 필드 */
--color-paper: #f6f7fa; /* 미묘한 표면 리프트, 테이블 교차행 */
--color-mist: #e6e2e3; /* 헤어라인 보더, 구분선 */
--color-canvas: #ffffff; /* 카드 표면, 입력 필드 */
--color-paper: #f6f7f9; /* 페이지 바탕, 테이블 교차행 */
--color-mist: #e6e8ec; /* 헤어라인 보더, 구분선 */
--color-smoke: #c1c7cf; /* 비활성 상태, 스켈레톤 플레이스홀더 */
--color-ash: #9491a1; /* 뮤트 헬퍼 텍스트, placeholder */
--color-slate: #615e6e; /* 보조 본문 텍스트, 설명 */
--color-charcoal: #333333; /* 본문 텍스트, 링크, 아이콘 스트로크 */
--color-ash: #9ca3af; /* 옅은 회색 글(장식) — 읽을 글은 --color-text-muted */
--color-slate: #6b7280; /* 보조 본문 텍스트, 설명 */
--color-charcoal: #1f2328; /* 본문 텍스트, 아이콘 스트로크 */
--color-carbon: #222222; /* 다크 UI 요소, 니어블랙 액센트 */
--color-ink: #000000; /* 최대 대비 텍스트/보더 */
/* 상태 색상 (Status) — 바이올렛 계열 유지, 필수 기능색만 최소 추가 */
--color-success: #1f8a4c; /* 성공/승인 */
--color-warning: #b8860b; /* 경고 (design.md 별색 #f5b800 계열) */
--color-danger: #c0392b; /* 에러/삭제 */
/* 패널 접기/펼치기 손잡이 테두리 — 배경에 묻히지 않는 강조색(라이트: 파랑, 다크: 노랑) */
--panel-handle-border: #2563eb;
--color-info: var(--color-royal-amethyst);
/* 강조 (Accent) */
--color-accent: #1f7a4d; /* 링크 · 주 액션 · 고른 것 */
--color-accent-soft: #eaf5ee; /* 고른 줄 · 태그 바탕 */
--color-hover: #f3f4f6; /* 줄 · 메뉴 hover 바탕 */
/* 그라디언트 (Gradient System) — 항상 흰 표면 뒤에만 배치, 텍스트 직상단 금지 */
--gradient-lavender-wash: linear-gradient(
90deg,
rgb(185, 154, 255),
rgb(125, 67, 255) 10%,
rgba(125, 67, 255, 0)
);
--gradient-twilight-beam: linear-gradient(
to right,
rgb(207, 138, 255),
rgb(255, 102, 193),
rgb(255, 173, 116),
rgb(170, 129, 255)
);
--gradient-section-tint: linear-gradient(
to bottom,
var(--color-canvas),
var(--color-mist-violet)
);
/* 상태 색상 (Status) — 성공 램프는 ✓ 를 같이 띄움(강조색과 같은 초록 계열) */
--color-success: #1f8a4c; /* 성공/승인 */
--color-warning: #b45309; /* 경고 */
--color-danger: #c0392b; /* 에러/삭제 글자 · 선 */
--color-danger-fill: #e5484d; /* 위험 채운 바탕(알림 점 · 배지) */
--color-info: #2e6fb5;
/* 패널 접기/펼치기 손잡이 테두리 — 강조색 */
--panel-handle-border: var(--color-accent);
--color-scrim: rgba(16, 24, 40, 0.4); /* 모달 · 서랍 뒤 가림막 */
/* 옛 이름 — 새 코드 금지 · 새 값의 별칭 */
--color-deep-iris: var(--color-text);
--color-plum-velvet: var(--color-text);
--color-royal-amethyst: var(--color-accent);
--color-mist-violet: var(--color-accent-soft);
--color-lavender-wash: var(--color-accent);
/* ---------------------------------------------------------------------------
* 2. 의미 기반 별칭 (Semantic Aliases)
* 컴포넌트는 가급적 아래 별칭을 사용해 라이트/다크 전환에 대응.
* ------------------------------------------------------------------------ */
--color-bg: var(--color-canvas); /* 페이지 배경 */
--color-surface: var(--color-paper); /* 카드/패널 표면 */
--color-surface-raised: var(--color-canvas); /* 떠 있는 표면 */
--color-bg: var(--color-paper); /* 페이지 바탕 */
--color-surface: var(--color-paper); /* 판 바탕 · 표 머리 · 얼룩줄 */
--color-surface-raised: var(--color-canvas); /* 카드 · 떠 있는 표면 */
--color-surface-sunken: var(--color-hover);
--color-border: var(--color-mist); /* 기본 보더 */
--color-text: var(--color-deep-iris); /* 기본 본문 (제목 강조) */
--color-border-strong: #cfd4db; /* 좌측 카드 외곽 · 표 머리 밑줄 */
--color-text: var(--color-charcoal); /* 기본 글 · 제목 */
--color-text-body: var(--color-charcoal); /* 일반 본문 */
--color-text-secondary: var(--color-slate); /* 보조 텍스트 */
--color-text-muted: var(--color-ash); /* 뮤트/placeholder */
--color-primary: var(--color-deep-iris); /* 주 액션 배경 */
--color-primary-text: var(--color-canvas); /* 주 액션 위 텍스트 */
--color-accent: var(--color-royal-amethyst); /* 링크/액센트 */
--color-focus-ring: var(--color-royal-amethyst);
--color-text-muted: var(--color-slate); /* 뮤트/placeholder */
--color-primary: var(--color-accent); /* 주 액션 배경 */
--color-primary-text: #ffffff; /* 주 액션 위 텍스트 */
--color-primary-hover: color-mix(in srgb, var(--color-primary) 88%, #000);
--color-focus-ring: var(--color-accent);
/* 차트 시리즈 색상 (CPU/메모리/디스크 등 구분용) */
--color-chart-0: #5b8def; /* 파랑 — CPU */
@@ -88,12 +79,10 @@
/* ---------------------------------------------------------------------------
* 3. 타이포그래피 (Typography)
* ------------------------------------------------------------------------ */
/* 폰트 패밀리 — 한글은 Noto Sans KR 우선 (resources/fonts) */
--font-display:
"Britti Sans", "Plus Jakarta Sans", "Noto Sans KR", ui-sans-serif, system-ui, -apple-system,
"Segoe UI", Roboto, sans-serif;
--font-body:
"Inter", "Noto Sans KR", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* 폰트 패밀리 — 한 토큰 · Noto Sans KR 는 실은 파일(fonts/) · 뒤는 파일을 못 받을 때만 */
--font-ui: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
--font-body: var(--font-ui);
--font-display: var(--font-ui);
--font-mono: "JetBrains Mono", "Consolas", ui-monospace, monospace;
/* 스케일 (px 고정 — design.md 명세) */
@@ -152,7 +141,7 @@
--radius-3xl: 24px; /* large 컨테이너 */
--radius-pills: 1440px; /* pill/tag/캡슐 네비 전용 */
--radius-cards: var(--radius-lg);
--radius-cards: 10px;
--radius-buttons: var(--radius-lg);
--radius-inputs: var(--radius-lg);
--radius-icons: var(--radius-lg);
@@ -174,19 +163,10 @@
--pill-font-size-lg: var(--text-body-sm);
/* ---------------------------------------------------------------------------
* 6. 그림자 (Shadows) — 블루틴트, 서브틀 (최대 32px blur / 6% opacity)
* 6. 그림자 (Shadows) — 떠 있는 것(메뉴 · 모달 · 툴팁)만 · 카드는 선만
* ------------------------------------------------------------------------ */
--shadow-sm:
rgba(18, 55, 105, 0.08) 0px 2px 4px 0px, rgba(18, 55, 105, 0.04) 0px 1px 1px 0px,
rgba(18, 55, 105, 0.08) 0px 0px 0px 1px;
--shadow-lg:
rgba(14, 59, 101, 0.06) 0px 32px 24px -12px, rgba(14, 59, 101, 0.01) 0px 11px 4px 0px,
rgba(14, 59, 101, 0.02) 0px 6px 4px 0px, rgba(14, 59, 101, 0.03) 0px 3px 3px 0px,
rgba(14, 59, 101, 0.04) 0px 1px 1px 0px;
--shadow-feature:
rgba(114, 49, 255, 0.32) 0px -6px 20px 0px inset, rgba(47, 1, 151, 0.12) 0px 11px 12px 0px,
rgba(47, 1, 151, 0.12) 0px 3px 3px 0px, rgba(47, 1, 151, 0.12) 0px 1px 1px 0px,
rgba(47, 1, 151, 0.08) 0px 0px 0px 1px;
--shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
--shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.12);
/* ---------------------------------------------------------------------------
* 7. 레이아웃 (Layout)
@@ -296,44 +276,34 @@
}
/* =============================================================================
* 다크 모드 (Dark) — 라이트 우선 브랜드이나 CAD 뷰어 야간 작업 대응
* design.md는 light 브랜드이므로, 다크는 중립 표면을 어둡게 반전하고
* 바이올렛 액센트는 명도를 올려 대비 확보.
* 다크 모드 (Dark) — 중립 회색 바탕 · 강조는 명도를 올려 대비 확보
* 의미 별칭(bg · surface · text …)은 :root 식 그대로라 여기서는 값만 바꿈.
* ========================================================================== */
:root[data-theme="dark"] {
color-scheme: dark;
--color-canvas: #16121f;
--color-paper: #1e1930;
--color-mist: #322a45;
--color-smoke: #4a4160;
--color-ash: #8b86a0;
--color-slate: #b3aec6;
--color-charcoal: #e4e0f0;
--color-carbon: #f0edf8;
--color-canvas: #1b1e23;
--color-paper: #121417;
--color-mist: #2c3038;
--color-smoke: #4a4f58;
--color-ash: #7d848e;
--color-slate: #9aa1ab;
--color-charcoal: #e6e8eb;
--color-carbon: #f0f1f3;
--color-ink: #ffffff;
--color-deep-iris: #d8ccff;
--color-plum-velvet: #c4b8e6;
--color-royal-amethyst: #b99aff;
--color-mist-violet: #2a2140;
--color-bg: var(--color-canvas);
--color-surface: var(--color-paper);
--color-surface-raised: #251f38;
--color-border: var(--color-mist);
--color-text: var(--color-deep-iris);
--color-text-body: var(--color-charcoal);
--color-text-secondary: var(--color-slate);
--color-text-muted: var(--color-ash);
--color-primary: var(--color-royal-amethyst);
--color-primary-text: #16121f;
--color-accent: var(--color-lavender-wash);
--color-focus-ring: var(--color-lavender-wash);
--color-accent: #3fae75;
--color-accent-soft: #173326;
--color-hover: #242830;
--color-border-strong: #3b414b;
--color-primary-text: #0e1512;
--color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, #fff);
--color-success: #3fbb6f;
--color-warning: #e0b64a;
--color-warning: #f5a524;
--color-danger: #e8695a;
--panel-handle-border: #e0b64a;
--color-danger-fill: #f06b6f;
--color-info: #6aa6e0;
--color-scrim: rgba(0, 0, 0, 0.55);
--map-route-locked: #facc15;
--map-route-node: #4ade80;
@@ -341,43 +311,38 @@
--shadow-lg: rgba(0, 0, 0, 0.5) 0px 32px 24px -12px, rgba(0, 0, 0, 0.3) 0px 3px 3px 0px;
}
/* 시스템 설정 기반 자동 다크 (사용자가 명시적으로 data-theme를 안 준 경우) */
/* 시스템 설정 기반 자동 다크 (사용자가 명시적으로 data-theme를 안 준 경우) — 위와 같은 값 */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--color-canvas: #16121f;
--color-paper: #1e1930;
--color-mist: #322a45;
--color-smoke: #4a4160;
--color-ash: #8b86a0;
--color-slate: #b3aec6;
--color-charcoal: #e4e0f0;
--color-carbon: #f0edf8;
--color-canvas: #1b1e23;
--color-paper: #121417;
--color-mist: #2c3038;
--color-smoke: #4a4f58;
--color-ash: #7d848e;
--color-slate: #9aa1ab;
--color-charcoal: #e6e8eb;
--color-carbon: #f0f1f3;
--color-ink: #ffffff;
--color-deep-iris: #d8ccff;
--color-plum-velvet: #c4b8e6;
--color-royal-amethyst: #b99aff;
--color-mist-violet: #2a2140;
--color-bg: var(--color-canvas);
--color-surface: var(--color-paper);
--color-surface-raised: #251f38;
--color-border: var(--color-mist);
--color-text: var(--color-deep-iris);
--color-text-body: var(--color-charcoal);
--color-text-secondary: var(--color-slate);
--color-text-muted: var(--color-ash);
--color-primary: var(--color-royal-amethyst);
--color-primary-text: #16121f;
--color-accent: var(--color-lavender-wash);
--color-focus-ring: var(--color-lavender-wash);
--color-accent: #3fae75;
--color-accent-soft: #173326;
--color-hover: #242830;
--color-border-strong: #3b414b;
--color-primary-text: #0e1512;
--color-primary-hover: color-mix(in srgb, var(--color-primary) 85%, #fff);
--color-success: #3fbb6f;
--color-warning: #f5a524;
--color-danger: #e8695a;
--panel-handle-border: #e0b64a;
--color-danger-fill: #f06b6f;
--color-info: #6aa6e0;
--color-scrim: rgba(0, 0, 0, 0.55);
--map-route-locked: #facc15;
--map-route-node: #4ade80;
--shadow-sm: rgba(0, 0, 0, 0.4) 0px 2px 4px 0px, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
--shadow-lg: rgba(0, 0, 0, 0.5) 0px 32px 24px -12px, rgba(0, 0, 0, 0.3) 0px 3px 3px 0px;
}
}