Zephora UI

থিমিং

থিম হলো সাধারণ TypeScript অবজেক্ট, যা --z-* CSS কাস্টম প্রপার্টিতে কম্পাইল হয়। থিম বদলানো মানে ভেরিয়েবলগুলো নতুন করে লেখা — সঙ্গে সঙ্গে, CSS-in-JS ছাড়া, স্টাইলের জন্য কোনো re-render খরচ ছাড়া।

তৈরি থিম

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",
});

স্কোপড (scoped) বনাম গ্লোবাল

// 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>