feat(styles): migrate design system tokens to CSS variables
Replace minimal background/foreground vars with a comprehensive design system covering colors (background, text, brand, profile, gifts, activities, nav), spacing, and border-radius tokens. Mirrors the original Dart design constants under src/design/*.ts and supports dark mode.
This commit is contained in:
+2
-1
@@ -10,6 +10,7 @@
|
||||
"./src/data/storage/auth",
|
||||
"./src/data/storage/user",
|
||||
"./src/data/storage/chat",
|
||||
"./src/data/storage/app"
|
||||
"./src/data/storage/app",
|
||||
"./src/design"
|
||||
]
|
||||
}
|
||||
|
||||
+104
-17
@@ -1,26 +1,113 @@
|
||||
@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";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
/* ============================================================
|
||||
* 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
|
||||
* ============================================================ */
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
/* ==================== 颜色 ==================== */
|
||||
--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);
|
||||
|
||||
/* ==================== 间距 ==================== */
|
||||
--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(--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);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
/* ============================================================
|
||||
* 基础样式
|
||||
* ============================================================ */
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
background: var(--color-page-background);
|
||||
color: var(--color-text-foreground);
|
||||
font-family: var(--font-system);
|
||||
}
|
||||
|
||||
+2
-2
@@ -13,8 +13,8 @@ const geistMono = Geist_Mono({
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "cozsweet",
|
||||
description: "cozsweet frontend (Next.js)",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
|
||||
+11
-1
@@ -2,4 +2,14 @@
|
||||
* @file Automatically generated by barrelsby.
|
||||
*/
|
||||
|
||||
export * from "./index";
|
||||
export * from "./api_path";
|
||||
export * from "./api_result";
|
||||
export * from "./auth_api";
|
||||
export * from "./chat_api";
|
||||
export * from "./http_client";
|
||||
export * from "./metrics_api";
|
||||
export * from "./user_api";
|
||||
export * from "./config/api_config";
|
||||
export * from "./interceptor/auth_refresh_interceptor";
|
||||
export * from "./interceptor/logging_interceptor";
|
||||
export * from "./interceptor/token_interceptor";
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
* @file Automatically generated by barrelsby.
|
||||
*/
|
||||
|
||||
export * from "./auth_storage";
|
||||
export * from "./local_storage";
|
||||
export * from "./result";
|
||||
export * from "./storage_keys";
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
/* ============================================================
|
||||
* 设计系统 - 边框宽度变量
|
||||
* 原始 Dart: lib/design/border_widths.dart
|
||||
* 集中管理应用边框宽度数值
|
||||
* ============================================================ */
|
||||
|
||||
:root {
|
||||
--border-thin: 0.5px;
|
||||
--border-light: 1px;
|
||||
--border-normal: 1.5px;
|
||||
--border-medium: 2px;
|
||||
--border-bold: 3px;
|
||||
--border-heavy: 4px;
|
||||
}
|
||||
@@ -0,0 +1,58 @@
|
||||
/* ============================================================
|
||||
* 设计系统 - 颜色变量
|
||||
* 原始 Dart: lib/design/colors.dart (light 主题)
|
||||
* 集中管理颜色值，CSS 变量 + Tailwind utility 通过 globals.css 暴露
|
||||
* ============================================================ */
|
||||
|
||||
:root {
|
||||
/* ==================== 文字颜色 ==================== */
|
||||
--color-text-primary: #ffffff;
|
||||
--color-text-secondary: #9e9e9e;
|
||||
--color-text-hint: #757575;
|
||||
--color-text-banner: #8c8b8b;
|
||||
--color-text-light: #e0e0e0;
|
||||
--color-text-foreground: #171717;
|
||||
|
||||
/* ==================== 品牌色 ==================== */
|
||||
--color-accent: #f84d96;
|
||||
--color-primary: #1677ff;
|
||||
--color-success: #52c41a;
|
||||
--color-error: #ff4d4f;
|
||||
--color-warning: #ffa940;
|
||||
|
||||
/* ==================== Profile 页面 ==================== */
|
||||
--color-gold: #ffd700;
|
||||
--color-section-title: #a59db1;
|
||||
--color-settings-card-background: #261c31;
|
||||
--color-settings-divider: #3d314a;
|
||||
--color-settings-text-primary: #e0dce6;
|
||||
--color-destructive: #ff6b6b;
|
||||
--color-chevron-icon: #f67e9f;
|
||||
--color-version-text: #6c6378;
|
||||
--color-profile-tag-background: #2a2833;
|
||||
|
||||
/* ==================== Gifts 页面 ==================== */
|
||||
--color-gifts-background: #0d0b14;
|
||||
--color-gift-card-background: #2d253a;
|
||||
--color-coin-icon: #ffa940;
|
||||
--color-button-gradient-start: #8b5cf6;
|
||||
--color-button-gradient-end: #ec4899;
|
||||
--color-nav-active-border: #8b5cf6;
|
||||
--color-gift-price-text: #ffa940;
|
||||
|
||||
/* ==================== Activities 页面 ==================== */
|
||||
--color-activities-background: #0e0b16;
|
||||
|
||||
/* ==================== 导航激活状态 ==================== */
|
||||
--color-nav-active-gradient-start: #667eea;
|
||||
--color-nav-active-gradient-end: #764ba2;
|
||||
--color-nav-active-icon: #667eea;
|
||||
--color-nav-active-label: #667eea;
|
||||
|
||||
/* ==================== Splash 页面 Facebook 按钮 ==================== */
|
||||
--color-facebook-button-gradient-start: #ff67e0;
|
||||
--color-facebook-button-gradient-end: #ff52a2;
|
||||
|
||||
/* ==================== 页面背景（body 用） ==================== */
|
||||
--color-page-background: #ffffff;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
/* ============================================================
|
||||
* 设计系统 - 图标尺寸变量
|
||||
* 原始 Dart: lib/design/icon_sizes.dart
|
||||
* 集中管理应用图标尺寸数值
|
||||
* ============================================================ */
|
||||
|
||||
:root {
|
||||
--icon-size-sm: 16px;
|
||||
--icon-size-md: 18px;
|
||||
--icon-size-lg: 20px;
|
||||
--icon-size-xl: 24px;
|
||||
--icon-size-xxl: 28px;
|
||||
--icon-size-xxxl: 32px;
|
||||
--icon-size-34: 34px;
|
||||
--icon-size-40: 40px;
|
||||
--icon-size-43: 43px;
|
||||
--icon-size-56: 56px;
|
||||
--icon-size-86: 86px;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/* ============================================================
|
||||
* 设计系统 - 圆角变量
|
||||
* 原始 Dart: lib/design/radius.dart
|
||||
* 集中管理应用圆角数值
|
||||
* ============================================================ */
|
||||
|
||||
:root {
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
--radius-xl: 16px;
|
||||
--radius-xxl: 20px;
|
||||
--radius-xxxl: 24px;
|
||||
--radius-full: 999px;
|
||||
}
|
||||
@@ -0,0 +1,15 @@
|
||||
/* ============================================================
|
||||
* 设计系统 - 间距变量
|
||||
* 原始 Dart: lib/design/spacing.dart
|
||||
* 集中管理应用间距数值
|
||||
* ============================================================ */
|
||||
|
||||
:root {
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 12px;
|
||||
--spacing-lg: 16px;
|
||||
--spacing-xl: 20px;
|
||||
--spacing-xxl: 24px;
|
||||
--spacing-xxxl: 32px;
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
/* ============================================================
|
||||
* 设计系统 - 字体
|
||||
* 原始 Dart: lib/design/fonts.dart + font_sizes.dart
|
||||
*
|
||||
* body 使用跨平台系统字体栈
|
||||
* Athelas 为 Apple 平台专用字体
|
||||
* ============================================================ */
|
||||
|
||||
:root {
|
||||
/* 字体族 */
|
||||
--font-system: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||
Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
--font-athelas: "Athelas", serif;
|
||||
|
||||
/* 字体尺寸 */
|
||||
--font-size-xs: 10px;
|
||||
--font-size-sm: 12px;
|
||||
--font-size-md: 14px;
|
||||
--font-size-lg: 16px;
|
||||
--font-size-xl: 18px;
|
||||
--font-size-xxl: 20px;
|
||||
--font-size-title: 24px;
|
||||
--font-size-title-large: 28px;
|
||||
--font-size-title-x-large: 32px;
|
||||
}
|
||||
@@ -6,7 +6,7 @@
|
||||
*
|
||||
* 注：仅在浏览器环境可用；SSR/Server Components 中调用会抛错。
|
||||
*/
|
||||
import { authStorage } from "../../storage/auth_storage";
|
||||
import { authStorage } from "../data/storage/auth_storage";
|
||||
|
||||
export class DeviceIdentifier {
|
||||
private cachedId: string | null = null;
|
||||
|
||||
+1
-1
@@ -19,7 +19,7 @@
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
|
||||
Reference in New Issue
Block a user