7cf7662ba5
## 증상
/documents 페이지에서 사이드바 drawer 를 열면 뒤의 필터 칩 row
(`+ 태그`, `+ 형식`) 와 sticky 선택 toolbar 가 사이드바 위로 **그대로
비쳐 보이는** 시각 버그. 사이드바 tree 내용과 섞여 완전히 사용 불가.
## 근본 원인
`@theme { --z-dropdown: 30; --z-drawer: 40; --z-toast: 60 }` 로 정의했지만,
Tailwind v4 는 `--z-*` 를 utility namespace 로 인식하지 않음. 그래서 Drawer
및 페이지의 `class="... z-drawer"`, `class="... z-dropdown"` 이
컴파일 CSS 에 **아예 없는 클래스 (.z-drawer 등 생성 안 됨)** → `z-index:
auto` 로 fallback.
CSS 2.1 stacking 규칙상 positioned z-auto 끼리는 **DOM order** 로 paint 됨.
layout.svelte 의 Drawer 가 먼저 렌더되고 페이지 `<slot/>` 의 `.relative`
필터 칩 popover 컨테이너가 나중에 렌더 → 필터 칩이 사이드바 위에 그려짐.
`--z-modal` 만 살아남은 이유: Modal.svelte 가 `calc(var(--z-modal) + ...)`
로 inline style 에서 실제 var() 참조해서 Tailwind 가 tree-shaking 에서
제외함.
## 수정
`frontend/src/app.css` 의 `@theme` 블록 바로 아래에 Tailwind v4
`@utility` directive 로 4개 유틸리티 명시 등록:
```css
@utility z-dropdown { z-index: var(--z-dropdown); }
@utility z-drawer { z-index: var(--z-drawer); }
@utility z-modal { z-index: var(--z-modal); }
@utility z-toast { z-index: var(--z-toast); }
```
var() 참조 덕분에 `--z-*` 변수도 tree-shaking 에서 제외됨.
## 다른 파일 변경 없음
Drawer.svelte, documents/+page.svelte, inbox/+page.svelte, Modal.svelte
의 기존 클래스 사용부는 **한 글자도 수정 안 함**. @utility 등록만으로
자동 재활성.
## 검증
- npm run build 통과
- 컴파일 CSS 에 .z-drawer/.z-dropdown/.z-modal 클래스 실제 생성 확인
(.z-toast 는 소스 사용부가 없어 JIT 제외, 필요 시 자동 생성)
- --z-dropdown/--z-drawer/--z-modal/--z-toast 4개 모두 :root 에 emit
- lint:tokens 168 유지
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
134 lines
4.9 KiB
CSS
134 lines
4.9 KiB
CSS
@import "tailwindcss";
|
|
|
|
/* Tailwind v4 theme tokens — 모든 color/radius/z/spacing은 여기서 노출 */
|
|
/* 이후 컴포넌트는 bg-surface, text-dim, border-default, bg-success/10, */
|
|
/* bg-domain-engineering, rounded-card, z-modal, w-rail 형태로 작성한다. */
|
|
/* 새 코드에서 bg-[var(--*)] 작성 금지 (lint:tokens 으로 차단). */
|
|
@theme {
|
|
--color-bg: #0f1117;
|
|
--color-surface: #1a1d27;
|
|
--color-surface-hover: #222636;
|
|
--color-surface-active: #2a2f42;
|
|
--color-sidebar: #141720;
|
|
--color-default: #2a2d3a;
|
|
--color-border-strong: #3a3e52;
|
|
--color-text: #e4e4e7;
|
|
--color-dim: #8b8d98;
|
|
--color-faint: #5e616c;
|
|
--color-accent: #6c8aff;
|
|
--color-accent-hover: #859dff;
|
|
--color-accent-ring: #6c8aff80;
|
|
--color-error: #f5564e;
|
|
--color-success: #4ade80;
|
|
--color-warning: #fbbf24;
|
|
--color-scrim: #00000099;
|
|
|
|
--color-domain-philosophy: #a78bfa;
|
|
--color-domain-language: #f472b6;
|
|
--color-domain-engineering: #38bdf8;
|
|
--color-domain-safety: #fb923c;
|
|
--color-domain-programming: #34d399;
|
|
--color-domain-general: #94a3b8;
|
|
--color-domain-reference: #fbbf24;
|
|
|
|
--radius-sm: 4px;
|
|
--radius-md: 6px;
|
|
--radius-lg: 10px;
|
|
--radius-card: 12px;
|
|
|
|
--z-dropdown: 30;
|
|
--z-drawer: 40;
|
|
--z-modal: 50;
|
|
--z-toast: 60;
|
|
|
|
--spacing-sidebar: 320px;
|
|
--spacing-rail: 320px;
|
|
}
|
|
|
|
/* Tailwind v4 는 --z-* 를 utility namespace 로 인식하지 않으므로
|
|
@utility 로 명시적으로 등록해야 z-drawer / z-dropdown / z-toast 가
|
|
실제 클래스로 생성된다. --z-modal 은 Modal.svelte 가 inline style 로
|
|
var() 참조해서 이미 보존되고 있지만, z-modal 클래스도 일관성 차원에서
|
|
함께 등록한다. var() 참조 덕분에 Tailwind v4 가 --z-* 변수도 tree-shaking
|
|
에서 제외하고 :root 에 emit 한다. */
|
|
@utility z-dropdown {
|
|
z-index: var(--z-dropdown);
|
|
}
|
|
@utility z-drawer {
|
|
z-index: var(--z-drawer);
|
|
}
|
|
@utility z-modal {
|
|
z-index: var(--z-modal);
|
|
}
|
|
@utility z-toast {
|
|
z-index: var(--z-toast);
|
|
}
|
|
|
|
/* 기존 :root 변수는 .markdown-body와의 호환을 위해 유지 (공존 layer). */
|
|
/* 후속 phase에서 markdown-body도 토큰 마이그레이션 검토 가능. */
|
|
:root {
|
|
--bg: #0f1117;
|
|
--surface: #1a1d27;
|
|
--border: #2a2d3a;
|
|
--text: #e4e4e7;
|
|
--text-dim: #8b8d98;
|
|
--accent: #6c8aff;
|
|
--accent-hover: #859dff;
|
|
--error: #f5564e;
|
|
--success: #4ade80;
|
|
--warning: #fbbf24;
|
|
|
|
/* domain 색상 */
|
|
--domain-philosophy: #a78bfa;
|
|
--domain-language: #f472b6;
|
|
--domain-engineering: #38bdf8;
|
|
--domain-safety: #fb923c;
|
|
--domain-programming: #34d399;
|
|
--domain-general: #94a3b8;
|
|
--domain-reference: #fbbf24;
|
|
|
|
/* sidebar */
|
|
--sidebar-w: 320px;
|
|
--sidebar-bg: #141720;
|
|
}
|
|
|
|
body {
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 스크롤바 */
|
|
::-webkit-scrollbar { width: 6px; }
|
|
::-webkit-scrollbar-track { background: var(--bg); }
|
|
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
|
|
|
/* Markdown 렌더링 (GitHub Dark 스타일) */
|
|
.markdown-body {
|
|
color: var(--text);
|
|
line-height: 1.7;
|
|
font-size: 14px;
|
|
}
|
|
.markdown-body h1 { font-size: 1.6em; font-weight: 700; margin: 1.5em 0 0.5em; padding-bottom: 0.3em; border-bottom: 1px solid var(--border); }
|
|
.markdown-body h2 { font-size: 1.3em; font-weight: 600; margin: 1.3em 0 0.4em; padding-bottom: 0.2em; border-bottom: 1px solid var(--border); }
|
|
.markdown-body h3 { font-size: 1.1em; font-weight: 600; margin: 1.2em 0 0.3em; }
|
|
.markdown-body h4 { font-size: 1em; font-weight: 600; margin: 1em 0 0.2em; }
|
|
.markdown-body p { margin: 0.6em 0; }
|
|
.markdown-body ul, .markdown-body ol { padding-left: 1.5em; margin: 0.5em 0; }
|
|
.markdown-body li { margin: 0.2em 0; }
|
|
.markdown-body li > ul, .markdown-body li > ol { margin: 0.1em 0; }
|
|
.markdown-body blockquote { border-left: 3px solid var(--accent); padding: 0.5em 1em; margin: 0.8em 0; color: var(--text-dim); background: var(--surface); border-radius: 0 4px 4px 0; }
|
|
.markdown-body code { background: var(--surface); padding: 0.15em 0.4em; border-radius: 3px; font-size: 0.9em; font-family: 'SF Mono', Menlo, monospace; }
|
|
.markdown-body pre { background: var(--surface); padding: 1em; border-radius: 6px; overflow-x: auto; margin: 0.8em 0; border: 1px solid var(--border); }
|
|
.markdown-body pre code { background: none; padding: 0; }
|
|
.markdown-body table { border-collapse: collapse; width: 100%; margin: 0.8em 0; }
|
|
.markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 0.5em 0.8em; text-align: left; font-size: 0.9em; }
|
|
.markdown-body th { background: var(--surface); font-weight: 600; }
|
|
.markdown-body tr:nth-child(even) { background: rgba(255,255,255,0.02); }
|
|
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 1.5em 0; }
|
|
.markdown-body a { color: var(--accent); text-decoration: none; }
|
|
.markdown-body a:hover { text-decoration: underline; }
|
|
.markdown-body strong { font-weight: 600; }
|
|
.markdown-body img { max-width: 100%; border-radius: 4px; }
|