style(frontend): ABAP_OPENCODE 디자인 시스템으로 맞춤 + 화면 재구성

DESIGN_SYSTEM.md 의 Dark Workspace 토큰을 shadcn 토큰으로 이식(다크 기본, radius 8px,
success/warning/shadow-float), 시스템 산세리프, PwC 로고(LogoMark). 목록·새 대화·대화·
로그인 화면을 가운데 760px 열로 통일하고, 떠 있던 테마·로그아웃 상자는 상단 바로,
말풍선은 다크 토큰(AI 답변은 상자 없이), ABAP 흰 에디터 룩은 라이트 모드에서만.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
2026-09-16 21:24:17 +09:00
co-authored by Claude Fable 5.1
parent 506fbf601d
commit 9c6b28782d
32 changed files with 490 additions and 353 deletions
+24 -23
View File
@@ -83,34 +83,35 @@ export type DerivedTokens = {
// 의미색 — 모든 테마 공통
const DESTRUCTIVE = "oklch(0.577 0.245 27.325)"
// 사용자가 선택한 목업 색을 그대로 유지. 명도 정렬로 primary가 차콜로 바뀌지 않게 함.
// 기본 팔레트(id 는 하위호환으로 clean-blue 유지) — ABAP_OPENCODE DESIGN_SYSTEM.md §7 라이트 값.
// globals.css :root 와 같은 값. 명도 정렬(derive)을 안 타서 블루가 차콜로 안 바뀜.
const CLEAN_BLUE_TOKENS: DerivedTokens = {
background: "#FFFFFF",
foreground: "#242C39",
card: "#F7F9FC",
cardForeground: "#242C39",
background: "#FAFBFC",
foreground: "#1A1D22",
card: "#FFFFFF",
cardForeground: "#1A1D22",
popover: "#FFFFFF",
popoverForeground: "#242C39",
primary: "#034EA2",
popoverForeground: "#1A1D22",
primary: "#3563E9",
primaryForeground: "#FFFFFF",
secondary: "#F0F3F8",
secondaryForeground: "#242C39",
muted: "#F7F9FC",
mutedForeground: "#606D7F",
accent: "#EDF3FC",
accentForeground: "#034EA2",
secondary: "#EFF1F4",
secondaryForeground: "#1A1D22",
muted: "#F2F3F5",
mutedForeground: "#494F59",
accent: "#E4E8EF",
accentForeground: "#1A1D22",
destructive: DESTRUCTIVE,
border: "#E1E6EE",
input: "#BBC7D8",
ring: "#034EA2",
sidebar: "#F7F9FC",
sidebarForeground: "#242C39",
sidebarPrimary: "#034EA2",
border: "#E1E3E8",
input: "#E1E3E8",
ring: "#3563E9",
sidebar: "#F2F3F5",
sidebarForeground: "#1A1D22",
sidebarPrimary: "#3563E9",
sidebarPrimaryForeground: "#FFFFFF",
sidebarAccent: "#EDF3FC",
sidebarAccentForeground: "#034EA2",
sidebarBorder: "#E1E6EE",
sidebarRing: "#034EA2",
sidebarAccent: "#E9EBEF",
sidebarAccentForeground: "#1A1D22",
sidebarBorder: "#E9EBEF",
sidebarRing: "#3563E9",
}
export function derivePaletteTokens(