feat: add transparent variant to Button component (#595)

Author: zoubingwu

.changeset/nice-walls-brake.md

@@ -0,0 +1,5 @@
+---
+"@tidbcloud/uikit": patch
+---
+
+feat: add transparent variant to Button component

packages/uikit/src/theme/theme.ts

@@ -324,12 +324,22 @@ const theme = createTheme({
           }
         }
 
+        const getTransparentStyles = () => {
+          return {
+            color: themeColor(theme, color, 7),
+            '&:hover': {
+              color: themeColor(theme, color, 7)
+            }
+          }
+        }
+
         const variantStyles = {
           filled: getFilledStyles(),
           light: getLightStyles(),
           default: getDefaultStyles(),
           subtle: getSubtleStyles(),
-          outline: getDefaultStyles()
+          outline: getDefaultStyles(),
+          transparent: getTransparentStyles()
         }
 
         const sizeStyles = {

stories/uikit/primitive/Button.stories.tsx

@@ -249,3 +249,11 @@ export const DataDisabled: Story = {
     </Button>
   )
 }
+
+export const Transparent = () => {
+  return (
+    <Button variant="transparent" color="peacock" leftSection={<IconSettings01 size={16} />}>
+      Transparent
+    </Button>
+  )
+}