@rxdrag/website-lib 0.0.151 → 0.0.153

package/components//344/270/273/351/242/230Token.md

@@ -1,198 +1,198 @@
-# 外贸网站 Theme Token（精简版）
-
-基于 **TailwindCSS + ShadcnUI**，专为 **ToB 外贸询盘转化** 设计。
-
-> ⚠️ **Tailwind 内置项不再重复**：font-size、font-weight、spacing、rounded、shadow、z-index、duration、ease 等直接使用 Tailwind 默认值。
-
----
-
-## 一、需要自定义的 Tailwind 配置
-
-修改 `tailwind.config.js` 的 `theme.extend`：
-
-```js
-// tailwind.config.js
-module.exports = {
-  theme: {
-    extend: {
-      // ========== 颜色（CSS变量映射）==========
-      colors: {
-        // ShadcnUI 基础色
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-        // 数据可视化
-        chart: {
-          1: "hsl(var(--chart-1))",
-          2: "hsl(var(--chart-2))",
-        },
-        // 营销高亮
-        highlight: "hsl(var(--highlight))",
-        // 社交品牌色（固定值）
-        social: {
-          whatsapp: "#25D366",
-          linkedin: "#0A66C2",
-          facebook: "#1877F2",
-          youtube: "#FF0000",
-        },
-      },
-      // ========== 圆角（基于 --radius 变量）==========
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 4px)",
-      },
-      // ========== 自定义字体（可选）==========
-      fontFamily: {
-        decorative: ["Cinzel", "Cormorant Garamond", "serif"],
-      },
-      // ========== 模块间距（响应式）==========
-      spacing: {
-        "section-compact": "3rem",    // 48px - 紧凑模块
-        "section-normal": "5rem",     // 80px - 标准模块
-        "section-relaxed": "7.5rem",  // 120px - Hero区域
-      },
-      // ========== 自定义动画 ==========
-      keyframes: {
-        "fade-up": {
-          "0%": { opacity: "0", transform: "translateY(20px)" },
-          "100%": { opacity: "1", transform: "translateY(0)" },
-        },
-        "fade-down": {
-          "0%": { opacity: "0", transform: "translateY(-20px)" },
-          "100%": { opacity: "1", transform: "translateY(0)" },
-        },
-        "scale-in": {
-          "0%": { opacity: "0", transform: "scale(0.95)" },
-          "100%": { opacity: "1", transform: "scale(1)" },
-        },
-        "slide-in-right": {
-          "0%": { transform: "translateX(100%)" },
-          "100%": { transform: "translateX(0)" },
-        },
-      },
-      animation: {
-        "fade-up": "fade-up 0.5s ease-out",
-        "fade-down": "fade-down 0.3s ease-out",
-        "scale-in": "scale-in 0.3s ease-out",
-        "slide-in-right": "slide-in-right 0.3s ease-out",
-      },
-    },
-  },
-};
-```
-
----
-
-## 二、CSS 变量定义
-
-在 `globals.css` 中定义（ShadcnUI 格式）：
-
-```css
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 20%;
-    --card: 0 0% 98%;
-    --card-foreground: 0 0% 20%;
-    --primary: 217 58% 43%;        /* 工业蓝 #2E5AAC */
-    --primary-foreground: 0 0% 100%;
-    --secondary: 0 0% 96%;
-    --secondary-foreground: 0 0% 20%;
-    --muted: 0 0% 96%;
-    --muted-foreground: 0 0% 45%;
-    --accent: 30 90% 50%;          /* 强调橙 */
-    --accent-foreground: 0 0% 100%;
-    --destructive: 0 84% 60%;
-    --destructive-foreground: 0 0% 100%;
-    --border: 0 0% 90%;
-    --input: 0 0% 90%;
-    --ring: 217 58% 43%;
-    --radius: 0.5rem;
-    --chart-1: 217 58% 43%;
-    --chart-2: 30 90% 50%;
-    --highlight: 48 96% 53%;       /* 高亮黄 */
-  }
-  .dark {
-    --background: 0 0% 10%;
-    --foreground: 0 0% 90%;
-    /* ... 暗色模式对应值 */
-  }
-}
-```
-
----
-
-## 三、语义化排版组合
-
-直接使用 Tailwind class 组合：
-
-| 用途 | Class 组合 |
-|:-----|:-----------|
-| **Lead 导语** | `text-xl text-muted-foreground` |
-| **Caption 注脚** | `text-xs text-muted-foreground` |
-| **Spec 参数** | `font-mono text-sm bg-muted px-1 rounded` |
-| **Quote 引用** | `font-serif italic text-lg text-foreground/80` |
-| **Eyebrow 眉题** | `text-sm font-medium tracking-widest uppercase text-primary` |
-| **Form Label** | `text-sm font-medium leading-none` |
-| **Error Text** | `text-sm font-medium text-destructive` |
-| **Success Text** | `text-sm font-medium text-green-600` |
-
----
-
-## 四、外贸站特有 Token
-
-### CTA 按钮层级
-
-| 类型 | 场景 |
-|:-----|:-----|
-| **Primary** | "Get a Quote"、"Contact Us"、"Inquiry Now" |
-| **Secondary** | "Learn More"、"View Details"、"Download Catalog" |
-| **Ghost** | 导航链接、紧凑操作 |
-
-### 社交品牌色
-
-| 平台 | 色值 | 用途 |
-|:-----|:-----|:-----|
-| WhatsApp | `#25D366` | 即时沟通核心 |
-| LinkedIn | `#0A66C2` | B2B 专业背书 |
-| Facebook | `#1877F2` | 社媒引流 |
-| YouTube | `#FF0000` | 工厂/产品视频 |
-
----
-
-## 五、AOS 滚动动效
-
-| Attribute | 效果 |
-|:----------|:-----|
-| `data-aos="fade-up"` | 向上淡入（通用入场） |
-| `data-aos="fade-in"` | 原地淡入 |
-| `data-aos="zoom-in"` | 缩放淡入 |
-| `data-aos-delay="100"` | 延迟（交错动画） |
-| `data-aos-once="true"` | 只播放一次（推荐）|
+# 外贸网站 Theme Token（精简版）
+
+基于 **TailwindCSS + ShadcnUI**，专为 **ToB 外贸询盘转化** 设计。
+
+> ⚠️ **Tailwind 内置项不再重复**：font-size、font-weight、spacing、rounded、shadow、z-index、duration、ease 等直接使用 Tailwind 默认值。
+
+---
+
+## 一、需要自定义的 Tailwind 配置
+
+修改 `tailwind.config.js` 的 `theme.extend`：
+
+```js
+// tailwind.config.js
+module.exports = {
+  theme: {
+    extend: {
+      // ========== 颜色（CSS变量映射）==========
+      colors: {
+        // ShadcnUI 基础色
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        // 数据可视化
+        chart: {
+          1: "hsl(var(--chart-1))",
+          2: "hsl(var(--chart-2))",
+        },
+        // 营销高亮
+        highlight: "hsl(var(--highlight))",
+        // 社交品牌色（固定值）
+        social: {
+          whatsapp: "#25D366",
+          linkedin: "#0A66C2",
+          facebook: "#1877F2",
+          youtube: "#FF0000",
+        },
+      },
+      // ========== 圆角（基于 --radius 变量）==========
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      // ========== 自定义字体（可选）==========
+      fontFamily: {
+        decorative: ["Cinzel", "Cormorant Garamond", "serif"],
+      },
+      // ========== 模块间距（响应式）==========
+      spacing: {
+        "section-compact": "3rem",    // 48px - 紧凑模块
+        "section-normal": "5rem",     // 80px - 标准模块
+        "section-relaxed": "7.5rem",  // 120px - Hero区域
+      },
+      // ========== 自定义动画 ==========
+      keyframes: {
+        "fade-up": {
+          "0%": { opacity: "0", transform: "translateY(20px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
+        },
+        "fade-down": {
+          "0%": { opacity: "0", transform: "translateY(-20px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
+        },
+        "scale-in": {
+          "0%": { opacity: "0", transform: "scale(0.95)" },
+          "100%": { opacity: "1", transform: "scale(1)" },
+        },
+        "slide-in-right": {
+          "0%": { transform: "translateX(100%)" },
+          "100%": { transform: "translateX(0)" },
+        },
+      },
+      animation: {
+        "fade-up": "fade-up 0.5s ease-out",
+        "fade-down": "fade-down 0.3s ease-out",
+        "scale-in": "scale-in 0.3s ease-out",
+        "slide-in-right": "slide-in-right 0.3s ease-out",
+      },
+    },
+  },
+};
+```
+
+---
+
+## 二、CSS 变量定义
+
+在 `globals.css` 中定义（ShadcnUI 格式）：
+
+```css
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 20%;
+    --card: 0 0% 98%;
+    --card-foreground: 0 0% 20%;
+    --primary: 217 58% 43%;        /* 工业蓝 #2E5AAC */
+    --primary-foreground: 0 0% 100%;
+    --secondary: 0 0% 96%;
+    --secondary-foreground: 0 0% 20%;
+    --muted: 0 0% 96%;
+    --muted-foreground: 0 0% 45%;
+    --accent: 30 90% 50%;          /* 强调橙 */
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 0 0% 90%;
+    --input: 0 0% 90%;
+    --ring: 217 58% 43%;
+    --radius: 0.5rem;
+    --chart-1: 217 58% 43%;
+    --chart-2: 30 90% 50%;
+    --highlight: 48 96% 53%;       /* 高亮黄 */
+  }
+  .dark {
+    --background: 0 0% 10%;
+    --foreground: 0 0% 90%;
+    /* ... 暗色模式对应值 */
+  }
+}
+```
+
+---
+
+## 三、语义化排版组合
+
+直接使用 Tailwind class 组合：
+
+| 用途 | Class 组合 |
+|:-----|:-----------|
+| **Lead 导语** | `text-xl text-muted-foreground` |
+| **Caption 注脚** | `text-xs text-muted-foreground` |
+| **Spec 参数** | `font-mono text-sm bg-muted px-1 rounded` |
+| **Quote 引用** | `font-serif italic text-lg text-foreground/80` |
+| **Eyebrow 眉题** | `text-sm font-medium tracking-widest uppercase text-primary` |
+| **Form Label** | `text-sm font-medium leading-none` |
+| **Error Text** | `text-sm font-medium text-destructive` |
+| **Success Text** | `text-sm font-medium text-green-600` |
+
+---
+
+## 四、外贸站特有 Token
+
+### CTA 按钮层级
+
+| 类型 | 场景 |
+|:-----|:-----|
+| **Primary** | "Get a Quote"、"Contact Us"、"Inquiry Now" |
+| **Secondary** | "Learn More"、"View Details"、"Download Catalog" |
+| **Ghost** | 导航链接、紧凑操作 |
+
+### 社交品牌色
+
+| 平台 | 色值 | 用途 |
+|:-----|:-----|:-----|
+| WhatsApp | `#25D366` | 即时沟通核心 |
+| LinkedIn | `#0A66C2` | B2B 专业背书 |
+| Facebook | `#1877F2` | 社媒引流 |
+| YouTube | `#FF0000` | 工厂/产品视频 |
+
+---
+
+## 五、AOS 滚动动效
+
+| Attribute | 效果 |
+|:----------|:-----|
+| `data-aos="fade-up"` | 向上淡入（通用入场） |
+| `data-aos="fade-in"` | 原地淡入 |
+| `data-aos="zoom-in"` | 缩放淡入 |
+| `data-aos-delay="100"` | 延迟（交错动画） |
+| `data-aos-once="true"` | 只播放一次（推荐）|