refactor(design-tokens): move @theme declarations to individual token files

Consolidate the design system registration by removing the centralized
`@theme inline` block and all design token imports from globals.css.
Each token file now declares its own `@theme` rules directly, allowing
Tailwind 4 to auto-collect them and generate utility classes (e.g.
`bg-accent`, `p-md`, `rounded-lg`) without redundant re-mapping.

This simplifies globals.css, removes a layer of indirection, and keeps
the design token definitions co-located with their `@theme` exposure.
This commit is contained in:
2026-06-09 16:28:06 +08:00
parent e2f60bc4f2
commit 763bec4e74
12 changed files with 117 additions and 251 deletions
+11 -113
View File
@@ -1,121 +1,19 @@
@import "tailwindcss";
@import "../design/colors.css";
@import "../design/spacing.css";
@import "../design/typography.css";
@import "../design/radius.css";
@import "../design/border-widths.css";
@import "../design/icon-sizes.css";
@import "../design/breakpoints.css";
@import "../design/dimensions.css";
/* ============================================================
* Tailwind 4 @theme - 将 CSS 变量注册为 utility 类
* 在这里统一暴露,业务层可直接使用:
* - bg-accent / text-primary / border-error
* - p-md / m-lg / gap-sm
* - rounded-md
* - text-lg font-medium
* - border-thin / border-light
* - w-icon-sm / h-icon-md
* 设计系统 - 集中导入所有 token
* 每个 token 文件用 `@theme` 直接声明,Tailwind 4 自动收集
* 并生成 utility 类(如 `bg-accent` / `p-md` / `rounded-lg`
* ============================================================ */
@theme inline {
/* ==================== 颜色 ==================== */
--color-text-primary: var(--color-text-primary);
--color-text-secondary: var(--color-text-secondary);
--color-text-hint: var(--color-text-hint);
--color-text-banner: var(--color-text-banner);
--color-text-light: var(--color-text-light);
--color-text-foreground: var(--color-text-foreground);
--color-accent: var(--color-accent);
--color-primary: var(--color-primary);
--color-success: var(--color-success);
--color-error: var(--color-error);
--color-warning: var(--color-warning);
--color-gold: var(--color-gold);
--color-section-title: var(--color-section-title);
--color-settings-card-background: var(--color-settings-card-background);
--color-settings-divider: var(--color-settings-divider);
--color-settings-text-primary: var(--color-settings-text-primary);
--color-destructive: var(--color-destructive);
--color-chevron-icon: var(--color-chevron-icon);
--color-version-text: var(--color-version-text);
--color-profile-tag-background: var(--color-profile-tag-background);
--color-gifts-background: var(--color-gifts-background);
--color-gift-card-background: var(--color-gift-card-background);
--color-coin-icon: var(--color-coin-icon);
--color-button-gradient-start: var(--color-button-gradient-start);
--color-button-gradient-end: var(--color-button-gradient-end);
--color-nav-active-border: var(--color-nav-active-border);
--color-gift-price-text: var(--color-gift-price-text);
--color-activities-background: var(--color-activities-background);
--color-nav-active-gradient-start: var(--color-nav-active-gradient-start);
--color-nav-active-gradient-end: var(--color-nav-active-gradient-end);
--color-nav-active-icon: var(--color-nav-active-icon);
--color-nav-active-label: var(--color-nav-active-label);
--color-facebook-button-gradient-start: var(
--color-facebook-button-gradient-start
);
--color-facebook-button-gradient-end: var(
--color-facebook-button-gradient-end
);
--color-page-background: var(--color-page-background);
/* 扩展色 */
--color-sidebar-background: var(--color-sidebar-background);
--color-dark-background: var(--color-dark-background);
--color-dark-gray: var(--color-dark-gray);
--color-bubble-background: var(--color-bubble-background);
--color-chat-input-border: var(--color-chat-input-border);
--color-input-placeholder: var(--color-input-placeholder);
--color-pwa-button-text: var(--color-pwa-button-text);
--color-facebook-blue: var(--color-facebook-blue);
--color-dialog-background: var(--color-dialog-background);
--color-dialog-border: var(--color-dialog-border);
--color-blur-background: var(--color-blur-background);
/* ==================== 间距 ==================== */
--spacing-xs: var(--spacing-xs);
--spacing-sm: var(--spacing-sm);
--spacing-md: var(--spacing-md);
--spacing-lg: var(--spacing-lg);
--spacing-xl: var(--spacing-xl);
--spacing-xxl: var(--spacing-xxl);
--spacing-xxxl: var(--spacing-xxxl);
/* ==================== 圆角 ==================== */
--radius-sm: var(--radius-sm);
--radius-md: var(--radius-md);
--radius-lg: var(--radius-lg);
--radius-xl: var(--radius-xl);
--radius-xxl: var(--radius-xxl);
--radius-xxxl: var(--radius-xxxl);
/* ==================== 字体 ==================== */
--font-sans: var(--font-system);
--font-athelas: var(--color-athelas, var(--font-athelas));
/* ==================== 边框宽度 ==================== */
--border-thin: var(--border-thin);
--border-light: var(--border-light);
--border-normal: var(--border-normal);
--border-medium: var(--border-medium);
--border-bold: var(--border-bold);
--border-heavy: var(--border-heavy);
/* ==================== 图标尺寸 ==================== */
--icon-size-sm: var(--icon-size-sm);
--icon-size-md: var(--icon-size-md);
--icon-size-lg: var(--icon-size-lg);
--icon-size-xl: var(--icon-size-xl);
--icon-size-xxl: var(--icon-size-xxl);
--icon-size-xxxl: var(--icon-size-xxxl);
--icon-size-34: var(--icon-size-34);
--icon-size-40: var(--icon-size-40);
--icon-size-43: var(--icon-size-43);
--icon-size-56: var(--icon-size-56);
--icon-size-86: var(--icon-size-86);
}
@import "../tokens/colors.css";
@import "../tokens/spacing.css";
@import "../tokens/typography.css";
@import "../tokens/radius.css";
@import "../tokens/border-widths.css";
@import "../tokens/icon-sizes.css";
@import "../tokens/breakpoints.css";
@import "../tokens/dimensions.css";
/* ============================================================
* 基础样式