fix(docs): use theme tokens in styling examples (#6720)

* fix(docs): use theme tokens in styling examples

* fix(docs): use theme tokens in styling examples

apps/docs/content/docs/cn/react/components/(forms)/input.mdx

@@ -64,7 +64,7 @@ function CustomInput() {
       <Label htmlFor="custom-input">Project name</Label>
       <Input
         id="custom-input"
-        className="rounded-xl border border-border/70 bgsurface px-4 py-2 text-sm shadow-sm focus-visible:border-primary"
+        className="rounded-xl border border-border/70 bg-surface px-4 py-2 text-sm shadow-sm focus-visible:border-accent"
         placeholder="New web app"
       />
     </div>
@@ -79,7 +79,7 @@ function CustomInput() {
 ```css
 @layer components {
   .input {
-    @apply rounded-lg border border-border bgsurface px-4 py-2 text-sm shadow-sm transition-colors;
+    @apply rounded-lg border border-border bg-surface px-4 py-2 text-sm shadow-sm transition-colors;
 
     &:hover,
     &[data-hovered="true"] {
@@ -88,11 +88,11 @@ function CustomInput() {
 
     &:focus-visible,
     &[data-focus-visible="true"] {
-      @apply border-primary ring-2 ring-primary/20;
+      @apply border-accent ring-2 ring-accent/20;
     }
 
     &[data-invalid="true"] {
-      @apply border-danger bg-danger-50/10 text-danger;
+      @apply border-danger bg-danger-soft text-danger;
     }
   }
 }

apps/docs/content/docs/cn/react/components/(forms)/text-area.mdx

@@ -66,7 +66,7 @@ function CustomTextArea() {
       <Label htmlFor="custom-textarea">Message</Label>
       <TextArea
         id="custom-textarea"
-        className="rounded-xl border border-border/70 bgsurface px-4 py-3 text-sm leading-6 shadow-sm"
+        className="rounded-xl border border-border/70 bg-surface px-4 py-3 text-sm leading-6 shadow-sm"
         placeholder="Let us know how we can help..."
         rows={5}
         style={{resize: "vertical"}}
@@ -83,7 +83,7 @@ function CustomTextArea() {
 ```css
 @layer components {
   .textarea {
-    @apply rounded-xl border border-border bgsurface px-4 py-3 text-sm leading-6 shadow-sm;
+    @apply rounded-xl border border-border bg-surface px-4 py-3 text-sm leading-6 shadow-sm;
 
     &:hover,
     &[data-hovered="true"] {
@@ -92,11 +92,11 @@ function CustomTextArea() {
 
     &:focus-visible,
     &[data-focus-visible="true"] {
-      @apply border-primary ring-2 ring-primary/20;
+      @apply border-accent ring-2 ring-accent/20;
     }
 
     &[data-invalid="true"] {
-      @apply border-danger bg-danger-50/10 text-danger;
+      @apply border-danger bg-danger-soft text-danger;
     }
   }
 }

apps/docs/content/docs/cn/react/components/(navigation)/link.mdx

@@ -62,7 +62,7 @@ Link 默认在悬浮时显示下划线。可使用 Tailwind CSS 的 text-decorat
 - 默认 `Link` 样式 — 下划线在悬浮时显示
 
 **文本装饰色：**
-- `decoration-primary`、`decoration-secondary` 等 — 使用主题色设置下划线颜色
+- `decoration-accent`、`decoration-muted` 等 — 使用主题色设置下划线颜色
 - `decoration-muted/50` — 使用透明度修饰符实现半透明下划线
 
 **文本装饰样式：**
@@ -215,7 +215,7 @@ export default function Demo() {
 // 或使用原生 <a>
 export default function NativeLink() {
   return (
-    <a href="/about" className="link underline decoration-primary underline-offset-4">
+    <a href="/about" className="link underline decoration-accent underline-offset-4">
       About Page
       <Link.Icon className="link__icon" />
     </a>

apps/docs/content/docs/en/react/components/(forms)/input.mdx

@@ -64,7 +64,7 @@ function CustomInput() {
       <Label htmlFor="custom-input">Project name</Label>
       <Input
         id="custom-input"
-        className="rounded-xl border border-border/70 bgsurface px-4 py-2 text-sm shadow-sm focus-visible:border-primary"
+        className="rounded-xl border border-border/70 bg-surface px-4 py-2 text-sm shadow-sm focus-visible:border-accent"
         placeholder="New web app"
       />
     </div>
@@ -79,7 +79,7 @@ The base class `.input` powers every instance. Override it once with `@layer com
 ```css
 @layer components {
   .input {
-    @apply rounded-lg border border-border bgsurface px-4 py-2 text-sm shadow-sm transition-colors;
+    @apply rounded-lg border border-border bg-surface px-4 py-2 text-sm shadow-sm transition-colors;
 
     &:hover,
     &[data-hovered="true"] {
@@ -88,11 +88,11 @@ The base class `.input` powers every instance. Override it once with `@layer com
 
     &:focus-visible,
     &[data-focus-visible="true"] {
-      @apply border-primary ring-2 ring-primary/20;
+      @apply border-accent ring-2 ring-accent/20;
     }
 
     &[data-invalid="true"] {
-      @apply border-danger bg-danger-50/10 text-danger;
+      @apply border-danger bg-danger-soft text-danger;
     }
   }
 }

apps/docs/content/docs/en/react/components/(forms)/text-area.mdx

@@ -66,7 +66,7 @@ function CustomTextArea() {
       <Label htmlFor="custom-textarea">Message</Label>
       <TextArea
         id="custom-textarea"
-        className="rounded-xl border border-border/70 bgsurface px-4 py-3 text-sm leading-6 shadow-sm"
+        className="rounded-xl border border-border/70 bg-surface px-4 py-3 text-sm leading-6 shadow-sm"
         placeholder="Let us know how we can help..."
         rows={5}
         style={{resize: "vertical"}}
@@ -83,7 +83,7 @@ Override the shared `.textarea` class once with Tailwind's `@layer components`.
 ```css
 @layer components {
   .textarea {
-    @apply rounded-xl border border-border bgsurface px-4 py-3 text-sm leading-6 shadow-sm;
+    @apply rounded-xl border border-border bg-surface px-4 py-3 text-sm leading-6 shadow-sm;
 
     &:hover,
     &[data-hovered="true"] {
@@ -92,11 +92,11 @@ Override the shared `.textarea` class once with Tailwind's `@layer components`.
 
     &:focus-visible,
     &[data-focus-visible="true"] {
-      @apply border-primary ring-2 ring-primary/20;
+      @apply border-accent ring-2 ring-accent/20;
     }
 
     &[data-invalid="true"] {
-      @apply border-danger bg-danger-50/10 text-danger;
+      @apply border-danger bg-danger-soft text-danger;
     }
   }
 }

apps/docs/content/docs/en/react/components/(navigation)/link.mdx

@@ -62,7 +62,7 @@ Link is underlined on hover by default. Use Tailwind CSS text-decoration utiliti
 - default `Link` styles - Underline appears on hover
 
 **Text Decoration Color:**
-- `decoration-primary`, `decoration-secondary`, etc. - Set underline color using theme colors
+- `decoration-accent`, `decoration-muted`, etc. - Set underline color using theme colors
 - `decoration-muted/50` - Use opacity modifiers for semi-transparent underlines
 
 **Text Decoration Style:**
@@ -215,7 +215,7 @@ export default function Demo() {
 // Or with a native anchor
 export default function NativeLink() {
   return (
-    <a href="/about" className="link underline decoration-primary underline-offset-4">
+    <a href="/about" className="link underline decoration-accent underline-offset-4">
       About Page
       <Link.Icon className="link__icon" />
     </a>