style(frontend): PwC 로고 제거, 기본 라이트 모드, 삼성 팔레트 포인트 Samsung Blue
- LogoMark 는 null 렌더(호출부 6곳 그대로), logo.png·logo-dark.png 삭제, 파비콘 투명 - themeStore·index.html 기본 light. 예전 dark 저장값은 첫 실행 때 한 번만 초기화 - samsung 팔레트 primary/ring/link = #1428A0(브랜드 파랑). 바탕·글씨·면은 실측값 유지 - Message 테스트: 기본 라이트 기준으로 코드블럭 흰 배경 기대 Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Fable 5.1
parent
efb9fb46de
commit
72a06d6c07
@@ -21,11 +21,15 @@
|
|||||||
}
|
}
|
||||||
document.documentElement.setAttribute("data-theme", pal)
|
document.documentElement.setAttribute("data-theme", pal)
|
||||||
var raw = localStorage.getItem("theme-store")
|
var raw = localStorage.getItem("theme-store")
|
||||||
var mode = "dark" // 저장값 없으면 다크 (themeStore 기본과 동일)
|
var mode = "light" // 저장값 없으면 라이트 (themeStore 기본과 동일)
|
||||||
if (raw) {
|
// 기본 모드를 라이트로 바꾸면서(2026-09) 예전 저장값 dark 는 한 번만 light 로. 이후 직접 고른 건 유지.
|
||||||
|
if (raw && localStorage.getItem("light-default-v1")) {
|
||||||
try {
|
try {
|
||||||
mode = (JSON.parse(raw).state || {}).theme || "dark"
|
mode = (JSON.parse(raw).state || {}).theme || "light"
|
||||||
} catch (e) {}
|
} catch (e) {}
|
||||||
|
} else {
|
||||||
|
localStorage.removeItem("theme-store")
|
||||||
|
localStorage.setItem("light-default-v1", "1")
|
||||||
}
|
}
|
||||||
var dark =
|
var dark =
|
||||||
mode === "dark" ||
|
mode === "dark" ||
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 83 B |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
@@ -23,8 +23,8 @@ describe("Message 코드펜스 렌더", () => {
|
|||||||
// 스크롤 컨테이너 있는 CodeBlock 으로 감싸져야 함
|
// 스크롤 컨테이너 있는 CodeBlock 으로 감싸져야 함
|
||||||
const block = container.querySelector("[data-code-block]")
|
const block = container.querySelector("[data-code-block]")
|
||||||
expect(block).not.toBeNull()
|
expect(block).not.toBeNull()
|
||||||
// 코드 상자 색은 앱 테마를 따름 — 기본(다크)에선 어두운 코드 상자, 라이트 모드면 흰 에디터 룩
|
// 코드 상자 색은 앱 테마를 따름 — 기본이 라이트(2026-09-21)라 언어 없는 블럭은 흰 에디터 룩, 다크면 bg-[#0d1117]
|
||||||
expect(block?.className).toContain("bg-[#0d1117]")
|
expect(block?.className).toContain("bg-white")
|
||||||
// 인라인 code 스타일(bg-black/10)로 새지 않아야 함
|
// 인라인 code 스타일(bg-black/10)로 새지 않아야 함
|
||||||
expect(container.querySelector("code.rounded")).toBeNull()
|
expect(container.querySelector("code.rounded")).toBeNull()
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,19 +1,9 @@
|
|||||||
import logo from "@/assets/logo.png"
|
|
||||||
import logoDark from "@/assets/logo-dark.png"
|
|
||||||
import { cn } from "@/lib/utils/cn"
|
|
||||||
|
|
||||||
interface LogoMarkProps {
|
interface LogoMarkProps {
|
||||||
/** 로고 가로 폭(px) — 원본 비율(약 2.06:1) 유지 */
|
|
||||||
width?: number
|
width?: number
|
||||||
className?: string
|
className?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 브랜드 마크 — ABAP_OPENCODE 와 같은 PwC 로고. 다크에선 밝은 글자 변형. */
|
/** 브랜드 마크 자리 — 지금은 아무것도 안 그림(PwC 로고 제거, 2026-09-21). 호출부 6곳은 그대로 두고 여기서만 끔. */
|
||||||
export function LogoMark({ width = 38, className }: LogoMarkProps) {
|
export function LogoMark(_props: LogoMarkProps) {
|
||||||
return (
|
return null
|
||||||
<span className={cn("inline-flex shrink-0", className)} style={{ width }}>
|
|
||||||
<img src={logo} alt="PwC" className="block h-auto w-full dark:hidden" />
|
|
||||||
<img src={logoDark} alt="PwC" className="hidden h-auto w-full dark:block" />
|
|
||||||
</span>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -35,8 +35,8 @@ const ORDER: Theme[] = ["light", "dark", "system"]
|
|||||||
export const useThemeStore = create<ThemeState>()(
|
export const useThemeStore = create<ThemeState>()(
|
||||||
persist(
|
persist(
|
||||||
(set, get) => ({
|
(set, get) => ({
|
||||||
theme: "dark", // ABAP_OPENCODE 와 같이 다크가 기본
|
theme: "light", // 삼성향 팔레트가 라이트라 라이트 기본(2026-09-21)
|
||||||
resolved: resolve("dark"),
|
resolved: resolve("light"),
|
||||||
setTheme: (theme) => {
|
setTheme: (theme) => {
|
||||||
const resolved = resolve(theme)
|
const resolved = resolve(theme)
|
||||||
applyToDocument(resolved)
|
applyToDocument(resolved)
|
||||||
|
|||||||
@@ -83,8 +83,8 @@ export type DerivedTokens = {
|
|||||||
// 의미색 — 모든 테마 공통
|
// 의미색 — 모든 테마 공통
|
||||||
const DESTRUCTIVE = "oklch(0.577 0.245 27.325)"
|
const DESTRUCTIVE = "oklch(0.577 0.245 27.325)"
|
||||||
|
|
||||||
// 삼성향 — 삼성닷컴(sec) 공개 웹 2026-07 실측값. 검정 주색·흰 바탕·회색 면, 그림자 없음, 알약 버튼(20px).
|
// 삼성향 — 삼성닷컴(sec) 공개 웹 2026-07 실측값(흰 바탕·검정 글씨·회색 면, 그림자 없음, 알약 20px)에
|
||||||
// One UI 파랑(#0381fe)은 폰 앱용이라 안 씀. 링크만 #007aff. 폰트는 재배포 근거 없어 안 넣음.
|
// 포인트로 Samsung Blue #1428A0(브랜드 로고 색) — 버튼·링·활성 표시. One UI 파랑(#0381fe)은 폰 앱용이라 안 씀.
|
||||||
const SAMSUNG_TOKENS: DerivedTokens = {
|
const SAMSUNG_TOKENS: DerivedTokens = {
|
||||||
background: "#FFFFFF", // canvas
|
background: "#FFFFFF", // canvas
|
||||||
foreground: "#000000",
|
foreground: "#000000",
|
||||||
@@ -92,7 +92,7 @@ const SAMSUNG_TOKENS: DerivedTokens = {
|
|||||||
cardForeground: "#000000",
|
cardForeground: "#000000",
|
||||||
popover: "#FFFFFF",
|
popover: "#FFFFFF",
|
||||||
popoverForeground: "#000000",
|
popoverForeground: "#000000",
|
||||||
primary: "#000000", // contained CTA
|
primary: "#1428A0", // Samsung Blue — 포인트
|
||||||
primaryForeground: "#FFFFFF",
|
primaryForeground: "#FFFFFF",
|
||||||
secondary: "#F7F7F7", // surface
|
secondary: "#F7F7F7", // surface
|
||||||
secondaryForeground: "#000000",
|
secondaryForeground: "#000000",
|
||||||
@@ -103,15 +103,15 @@ const SAMSUNG_TOKENS: DerivedTokens = {
|
|||||||
destructive: DESTRUCTIVE,
|
destructive: DESTRUCTIVE,
|
||||||
border: "#DDDDDD",
|
border: "#DDDDDD",
|
||||||
input: "#DDDDDD",
|
input: "#DDDDDD",
|
||||||
ring: "#000000",
|
ring: "#1428A0",
|
||||||
sidebar: "#F7F7F7",
|
sidebar: "#F7F7F7",
|
||||||
sidebarForeground: "#000000",
|
sidebarForeground: "#000000",
|
||||||
sidebarPrimary: "#000000",
|
sidebarPrimary: "#1428A0",
|
||||||
sidebarPrimaryForeground: "#FFFFFF",
|
sidebarPrimaryForeground: "#FFFFFF",
|
||||||
sidebarAccent: "#EDEDED",
|
sidebarAccent: "#EDEDED",
|
||||||
sidebarAccentForeground: "#000000",
|
sidebarAccentForeground: "#000000",
|
||||||
sidebarBorder: "#DDDDDD",
|
sidebarBorder: "#DDDDDD",
|
||||||
sidebarRing: "#000000",
|
sidebarRing: "#1428A0",
|
||||||
}
|
}
|
||||||
|
|
||||||
// 기본 팔레트(id 는 하위호환으로 clean-blue 유지) — ABAP_OPENCODE DESIGN_SYSTEM.md §7 라이트 값.
|
// 기본 팔레트(id 는 하위호환으로 clean-blue 유지) — ABAP_OPENCODE DESIGN_SYSTEM.md §7 라이트 값.
|
||||||
@@ -152,7 +152,7 @@ const FIXED_TOKENS: Record<string, DerivedTokens> = {
|
|||||||
}
|
}
|
||||||
// 팔레트별 추가 CSS — samsung 은 알약 radius(실측 20px) + 링크색
|
// 팔레트별 추가 CSS — samsung 은 알약 radius(실측 20px) + 링크색
|
||||||
const EXTRA_CSS: Record<string, string> = {
|
const EXTRA_CSS: Record<string, string> = {
|
||||||
samsung: `[data-theme="samsung"]:not(.dark){--radius:20px;--link:#007aff}`,
|
samsung: `[data-theme="samsung"]:not(.dark){--radius:20px;--link:#1428A0}`,
|
||||||
}
|
}
|
||||||
|
|
||||||
export function derivePaletteTokens(
|
export function derivePaletteTokens(
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ export const PALETTES: RawPalette[] = [
|
|||||||
{
|
{
|
||||||
id: "samsung", // 고정 토큰(derive.ts SAMSUNG_TOKENS) — 삼성닷컴 공개 웹 실측값. 라이트 전용, 다크는 공통
|
id: "samsung", // 고정 토큰(derive.ts SAMSUNG_TOKENS) — 삼성닷컴 공개 웹 실측값. 라이트 전용, 다크는 공통
|
||||||
name: "Samsung",
|
name: "Samsung",
|
||||||
swatch: ["#FFFFFF", "#F7F7F7", "#000000", "#707070"],
|
swatch: ["#FFFFFF", "#F7F7F7", "#1428A0", "#000000"],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: "clean-blue", // id 는 저장된 값 호환 위해 유지 — 실제 토큰은 derive.ts 워크스페이스(ABAP_OPENCODE) 값
|
id: "clean-blue", // id 는 저장된 값 호환 위해 유지 — 실제 토큰은 derive.ts 워크스페이스(ABAP_OPENCODE) 값
|
||||||
|
|||||||
Reference in New Issue
Block a user