Từ Fluent UI React v9

// Fluent UI React v9
import { FluentProvider, webLightTheme } from "@fluentui/react-components";

<FluentProvider theme={webLightTheme} dir="ltr">
  <App />
</FluentProvider>

// Yugen UI
import { YugenProvider } from "@/components/ui";

<YugenProvider applyToDocument theme="light" brand="web" dir="ltr">
  <Toaster />
  <App />
</YugenProvider>

// Fluent: BrandVariants 10 → 160 truyền vào createLightTheme / createDarkTheme
const brand: BrandVariants = { 10: "#061724", 20: "#082338", /* … */ 160: "#ebf3fc" };
const theme = createLightTheme(brand);

/* Yugen: cùng 16 bậc, khai báo một lần trong tokens.css — light và dark tự lấy đúng bậc */
[data-brand="contoso"] {
  --brand-10: #061724;
  --brand-20: #082338;
  /* … */
  --brand-160: #ebf3fc;
}

// Fluent UI React v9 — Griffel
import { makeStyles, tokens, typographyStyles } from "@fluentui/react-components";

const useStyles = makeStyles({
  root: {
    display: "flex",
    flexDirection: "column",
    gap: tokens.spacingVerticalS,
    padding: `${tokens.spacingVerticalL} ${tokens.spacingHorizontalXL}`,
    backgroundColor: tokens.colorNeutralBackground1,
    borderRadius: tokens.borderRadiusMedium,
    boxShadow: tokens.shadow4,
    ":hover": { backgroundColor: tokens.colorNeutralBackground1Hover },
  },
  title: { ...typographyStyles.subtitle1, color: tokens.colorNeutralForeground1 },
  meta: { ...typographyStyles.caption1, color: tokens.colorNeutralForeground3 },
});

function Tile() {
  const styles = useStyles();
  return (
    <div className={styles.root}>
      <h3 className={styles.title}>Doanh thu</h3>
      <span className={styles.meta}>Cập nhật 5 phút trước</span>
    </div>
  );
}

// Yugen UI — cùng token, viết bằng utility
function Tile() {
  return (
    <div className="flex flex-col gap-2 rounded-medium bg-background-1 px-5 py-4 shadow-4 hover:bg-background-1-hover">
      <h3 className="text-subtitle1 font-semibold text-foreground-1">Doanh thu</h3>
      <span className="text-caption1 text-foreground-3">Cập nhật 5 phút trước</span>
    </div>
  );
}

// Fluent UI React v9
<Combobox placeholder="Chọn thành phố" onOptionSelect={(_, data) => setCity(data.optionValue)}>
  <Option value="hn">Hà Nội</Option>
  <Option value="dn">Đà Nẵng</Option>
</Combobox>

// Yugen UI — options là mảng, callback nhận thẳng giá trị
<Combobox
  placeholder="Chọn thành phố"
  options={[
    { value: "hn", label: "Hà Nội" },
    { value: "dn", label: "Đà Nẵng" },
  ]}
  onValueChange={setCity}
/>

// Fluent UI React v9
const toasterId = useId("toaster");
const { dispatchToast } = useToastController(toasterId);
dispatchToast(
  <Toast>
    <ToastTitle>Đã lưu</ToastTitle>
    <ToastBody>Thay đổi có hiệu lực ngay.</ToastBody>
  </Toast>,
  { intent: "success" },
);
<Toaster toasterId={toasterId} />

// Yugen UI — tuỳ chọn là object, không cần JSX
const { dispatchToast } = useToast("settings");
dispatchToast({ intent: "success", title: "Đã lưu", body: "Thay đổi có hiệu lực ngay." });
<Toaster toasterId="settings" />

// Hoặc helper tĩnh tới Toaster mặc định (đặt <Toaster /> trong YugenProvider)
toast({ intent: "success", title: "Đã lưu" });