From f523752971340d34d0fb97f996640515769a910f Mon Sep 17 00:00:00 2001 From: Hyungi Ahn Date: Tue, 7 Apr 2026 08:15:33 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20Tailwind=20v4=20@theme=20=ED=86=A0?= =?UTF-8?q?=ED=81=B0=20=EB=8F=84=EC=9E=85=20=E2=80=94=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EA=B8=B0=EB=B0=98=20?= =?UTF-8?q?=EB=A7=88=EB=A0=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit UX/UI 개편 Phase A-1. CSS 변수를 Tailwind 유틸리티로 노출해서 이후 컴포넌트가 bg-surface / text-dim / border-default 형태로 작성될 수 있도록 한다. bg-[var(--*)] 임의값 패턴은 후속 lint 규칙으로 차단 예정. - app.css에 @theme 블록 추가 (color/radius/z/spacing/domain 토큰) - 기존 :root 변수는 .markdown-body 호환 위해 공존 유지 - +layout.svelte nav 한 줄 swap으로 v4 빌드/HMR 인식 검증 (동일 색상값) Co-Authored-By: Claude Opus 4.6 (1M context) --- frontend/src/app.css | 47 ++++++++++++++++++++++++++++++ frontend/src/routes/+layout.svelte | 2 +- 2 files changed, 48 insertions(+), 1 deletion(-) diff --git a/frontend/src/app.css b/frontend/src/app.css index 9d9d2a9..47962ea 100644 --- a/frontend/src/app.css +++ b/frontend/src/app.css @@ -1,5 +1,52 @@ @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; +} + +/* 기존 :root 변수는 .markdown-body와의 호환을 위해 유지 (공존 layer). */ +/* 후속 phase에서 markdown-body도 토큰 마이그레이션 검토 가능. */ :root { --bg: #0f1117; --surface: #1a1d27; diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 3512d28..05862c2 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -60,7 +60,7 @@ {#if showChrome}
-