Zephora UI

테마

테마는 --z-* CSS 사용자 정의 속성으로 컴파일되는 순수 TypeScript 객체입니다. 테마를 전환하면 변수가 다시 작성됩니다 — 즉시, CSS-in-JS 없이, 스타일에 대한 리렌더 비용 없이.

미리 만들어진 테마

import { lightTheme, darkTheme, auraTheme, materialTheme } from "@zephora/theme";

createTheme

import { createTheme, lightTheme } from "@zephora/theme";

const brand = createTheme(lightTheme, {
  name: "brand",
  colors: {
    primary: "#0f766e",
    primaryHover: "#115e59",
    ring: "#14b8a6",
  },
  radius: "0.75rem",
});

스코프 지정 vs 전역

// Scoped — wraps a subtree in a themed scope element
<ThemeProvider theme={brand}>...</ThemeProvider>

// Global — writes variables onto <html>, ideal for app-level switching
import { applyTheme } from "@zephora/theme";
applyTheme(brand);

CSS 수준 재정의

컴포넌트는 변수를 직접 읽으므로, 어떤 CSS 규칙이든 어떤 하위 트리든 다시 테마를 적용할 수 있습니다:

.marketing-section {
  --z-primary: #ea580c;
  --z-radius: 9999px;
}

다크 모드

const [scheme, setScheme] = useState<"light" | "dark">("light");
<ThemeProvider theme={scheme === "dark" ? darkTheme : lightTheme} global>
  <App />
</ThemeProvider>