export const themeConfig = {
  // 圆角配置，统一控制卡片与胶囊样式。
  radius: {
    // 小圆角（像素）。
    sm: 12,
    // 中圆角（像素）。
    md: 16,
    // 大圆角（像素）。
    lg: 24,
    // 胶囊圆角（像素）。
    pill: 20,
  },
} as const;

// 设置根元素上的像素级样式变量。
const setPx = (root: HTMLElement, name: string, value: number) => {
  root.style.setProperty(name, `${value}px`);
};

// 将主题配置写入全局样式变量，供样式使用。
export const applyThemeConfig = (root: HTMLElement = document.documentElement) => {
  setPx(root, '--radius-sm', themeConfig.radius.sm);
  setPx(root, '--radius-md', themeConfig.radius.md);
  setPx(root, '--radius-lg', themeConfig.radius.lg);
  setPx(root, '--radius-pill', themeConfig.radius.pill);
};
