Merge pull request #31 from MasterFrontEndYu/main

fix:some

Author: MasterFrontEndYu

packages/ui/src/badge/badge.tsx

@@ -7,12 +7,10 @@ const badgeStyles = tv(
         base: "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none",
         variants: {
             variant: {
-                default:
-                    "border-transparent bg-zinc-900 text-zinc-50 hover:bg-zinc-900/80 dark:bg-zinc-50 dark:text-zinc-900",
+                default: "border-transparent bg-reveral-bg text-reveral",
                 secondary:
                     "border-transparent bg-zinc-100 text-zinc-900 hover:bg-zinc-100/80 dark:bg-zinc-800 dark:text-zinc-50",
-                outline:
-                    "text-zinc-950 border-base dark:text-zinc-50",
+                outline: "text-main border-light",
                 success:
                     "border-transparent bg-emerald-100 text-emerald-800 dark:bg-emerald-900/30 dark:text-emerald-400",
                 danger: "border-transparent bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400",
@@ -30,14 +28,13 @@ const badgeStyles = tv(
 type BadgeVariants = VariantProps<typeof badgeStyles>;
 
 export interface BadgeProps
-    extends ComponentProps<typeof KBadge>,
-        BadgeVariants {}
+    extends ComponentProps<typeof KBadge>, BadgeVariants {}
 
 export const Badge = (props: BadgeProps) => {
     const [local, variantProps, others] = splitProps(
         props,
         ["class"],
-        ["variant"]
+        ["variant"],
     );
 
     return (

packages/ui/src/style/global.css

@@ -7,19 +7,20 @@
         --warning: var(--color-orange-600);
         --danger: var(--color-red-600);
 
-        --app-bg: var(--color-white);  /* 应用背景色 */
+        --app-bg: var(--color-white); /* 应用背景色 */
+        --app-bg-reveral: var(--color-zinc-900); /* 应用反转背景色 */
         --app-foreground: var(--color-zinc-100); /* 应用前景色 */
-        --app-text-main: var(--color-zinc-950);  /* 应用主文字色 */
+        --app-text-main: var(--color-zinc-950); /* 应用主文字色 */
         --app-text-muted: var(--color-zinc-600); /* 应用次级文字色*/
         --app-border: var(--color-zinc-500); /* 应用边框色*/
         --app-border-light: var(--color-zinc-300); /* 应用浅边框色 */
         --app-ring: var(--color-zinc-300);
         --app-text-reversal: var(--color-zinc-100); /* 应用反转文字色 */
-     
     }
 
     [data-theme="dark"] {
         --app-text-reversal: var(--color-zinc-950);
+        --app-bg-reveral: var(--color-zinc-50);
         --app-bg: var(--color-zinc-950);
         --app-text-main: var(--color-zinc-50);
         --app-text-muted: var(--color-zinc-400);
@@ -32,7 +33,7 @@
         --app-text-main: #f3e5d8;
         --app-ring: #8b5e3c;
     }
-    
+
     @keyframes accordion-down {
         from {
             height: 0;
@@ -124,6 +125,7 @@
 
     --color-reversal: var(--app-text-reversal);
     --color-foreground: var(--app-foreground);
+    --color-reversal-bg: var(--app-bg-reveral);
     --color-app: var(--app-bg);
     --color-main: var(--app-text-main);
     --color-muted: var(--app-text-muted);