From c0d8c4b21ac28acf22dad97f2cb570c390daedd7 Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Tue, 5 Aug 2025 13:18:15 +0800
Subject: [PATCH] =?UTF-8?q?style(button):=20=E6=B7=BB=E5=8A=A0=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE=E7=BB=84=E4=BB=B6=E7=9A=84=E5=A4=9A=E7=A7=8D=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 增加了普通、悬浮、激活和禁用状态的样式
- 添加了多种颜色主题的样式，包括：primary、secondary、tertiary、accent、danger、success、warn、info、progressive、defensive
- 实现了实心和轮廓两种样式风格
---
 src/index.css | 69 +++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 67 insertions(+), 2 deletions(-)

diff --git a/src/index.css b/src/index.css
index 3bae0c3..64873a4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -50,8 +50,73 @@
 
   button {
     @apply border-0 flex flex-row items-center justify-center gap-1 px-2 py-1;
-    &.icon {
-      @apply bg-swatch-neutral-40 text-on-surface;
+    &:not(.outlined) {
+      &.primary {
+        @apply bg-primary hover:bg-primary-hover active:bg-primary-active text-on-primary disabled:bg-primary-disabled disabled:text-on-primary-disabled;
+      }
+      &.secondary {
+        @apply bg-secondary hover:bg-secondary-hover active:bg-secondary-active text-on-secondary disabled:bg-secondary-disabled disabled:text-on-secondary-disabled;
+      }
+      &.tertiary {
+        @apply bg-tertiary hover:bg-tertiary-hover active:bg-tertiary-active text-on-tertiary disabled:bg-tertiary-disabled disabled:text-on-tertiary-disabled;
+      }
+      &.accent {
+        @apply bg-accent hover:bg-accent-hover active:bg-accent-active text-on-accent disabled:bg-accent-disabled disabled:text-on-accent-disabled;
+      }
+      &.danger {
+        @apply bg-danger hover:bg-danger-hover active:bg-danger-active text-on-danger disabled:bg-danger-disabled disabled:text-on-danger-disabled;
+      }
+      &.success {
+        @apply bg-success hover:bg-success-hover active:bg-success-active text-on-success disabled:bg-success-disabled disabled:text-on-success-disabled;
+      }
+      &.warn {
+        @apply bg-warn hover:bg-warn-hover active:bg-warn-active text-on-warn disabled:bg-warn-disabled disabled:text-on-warn-disabled;
+      }
+      &.info {
+        @apply bg-info hover:bg-info-hover active:bg-info-active text-on-info disabled:bg-info-disabled disabled:text-on-info-disabled;
+      }
+      &.progressive {
+        @apply bg-progressive hover:bg-progressive-hover active:bg-progressive-active text-on-progressive disabled:bg-progressive-disabled disabled:text-on-progressive-disabled;
+      }
+      &.defensive {
+        @apply bg-defensive hover:bg-defensive-hover active:bg-defensive-active text-on-defensive disabled:bg-defensive-disabled disabled:text-on-defensive-disabled;
+      }
+      &.neutral {
+        @apply bg-neutral hover:bg-neutral-hover active:bg-neutral-active text-on-neutral disabled:bg-neutral-disabled disabled:text-on-neutral-disabled;
+      }
+    }
+    &.outlined {
+      @apply bg-transparent border;
+      &.primary {
+        @apply border-primary text-primary hover:border-primary-hover hover:text-primary-hover active:border-primary-active active:text-primary-active disabled:border-primary-disabled disabled:text-primary-disabled;
+      }
+      &.secondary {
+        @apply border-secondary text-secondary hover:border-secondary-hover hover:text-secondary-hover active:border-secondary-active active:text-secondary-active disabled:border-secondary-disabled disabled:text-secondary-disabled;
+      }
+      &.tertiary {
+        @apply border-tertiary text-tertiary hover:border-tertiary-hover hover:text-tertiary-hover active:border-tertiary-active active:text-tertiary-active disabled:border-tertiary-disabled disabled:text-tertiary-disabled;
+      }
+      &.accent {
+        @apply border-accent text-accent hover:border-accent-hover hover:text-accent-hover active:border-accent-active active:text-accent-active disabled:border-accent-disabled disabled:text-accent-disabled;
+      }
+      &.danger {
+        @apply border-danger text-danger hover:border-danger-hover hover:text-danger-hover active:border-danger-active active:text-danger-active disabled:border-danger-disabled disabled:text-danger-disabled;
+      }
+      &.success {
+        @apply border-success text-success hover:border-success-hover hover:text-success-hover active:border-success-active active:text-success-active disabled:border-success-disabled disabled:text-success-disabled;
+      }
+      &.warn {
+        @apply border-warn text-warn hover:border-warn-hover hover:text-warn-hover active:border-warn-active active:text-warn-active disabled:border-warn-disabled disabled:text-warn-disabled;
+      }
+      &.info {
+        @apply border-info text-info hover:border-info-hover hover:text-info-hover active:border-info-active active:text-info-active disabled:border-info-disabled disabled:text-info-disabled;
+      }
+      &.progressive {
+        @apply border-progressive text-progressive hover:border-progressive-hover hover:text-progressive-hover active:border-progressive-active active:text-progressive-active disabled:border-progressive-disabled disabled:text-progressive-disabled;
+      }
+      &.defensive {
+        @apply border-defensive text-defensive hover:border-defensive-hover hover:text-defensive-hover active:border-defensive-active active:text-defensive-active disabled:border-defensive-disabled disabled:text-defensive-disabled;
+      }
     }
   }
 }