chore: css

jaskang · Sep 15, 2023 · 4173bee · 4173bee
1 parent 560222d
commit 4173bee
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 173 deletions.
diff --git a/src/components/Button/button.css b/src/components/Button/button.css
@@ -1,7 +1,7 @@
 .z-btn {
   --z-btn-text-color: inherit;
-  --z-btn-bg-color: #fff;
-  --z-btn-border-color: #fff;
+  --z-btn-bg-color: transparent;
+  --z-btn-border-color: transparent;
   --z-btn-bg-color-hover: var(--z-btn-bg-color);
   --z-btn-border-color-hover: var(--z-btn-border-color);
 
@@ -77,11 +77,13 @@
   &.z-btn-soft {
     box-shadow: var(--shadow-sm);
   }
-  
+
   &.z-btn-plain {
+
   }
 
   &.z-btn-link {
+    background-color: transparent;
     &:enabled:hover {
       text-decoration: underline solid var(--z-btn-text-color) 2px;
       text-underline-offset: 4px;

diff --git a/src/components/Button/css.ts b/src/components/Button/css.ts
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -15,13 +15,11 @@ import type { Color } from '@/theme/colors'
 import { useColorVars } from '@/utils/style'
 
 import { LoadingIcon } from '../Icon'
-import { cssName } from './css'
 
 const props = {
   variant: {
-    type: String as PropType<'default' | 'solid' | 'soft' | 'plain' | 'link'>,
+    type: String as PropType<'default' | 'solid' | 'soft' | 'outline' | 'plain' | 'link'>,
     default: 'default',
-    validator: (val: string) => ['default', 'solid', 'soft', 'plain', 'link'].includes(val),
   },
   color: {
     type: String as PropType<Color>,
@@ -39,8 +37,6 @@ const props = {
   disabled: Boolean,
 } satisfies ComponentObjectPropsOptions
 
-export type ButtonInnerProps = ExtractPropTypes<typeof props>
-
 export type ButtonProps = ExtractPublicPropTypes<typeof props>
 
 export const Button = defineComponent({
@@ -61,35 +57,24 @@ export const Button = defineComponent({
             'text-color': 'white',
             'bg-color': `${props.color}.500`,
             'bg-color-hover': `${props.color}.600`,
-            'border-color': 'transparent',
-            'border-color-hover': 'transparent',
             'outline-color': `${props.color}.500`,
           }
         case 'soft':
           return {
             'text-color': `${props.color}.600`,
             'bg-color': `${props.color}.100`,
             'bg-color-hover': `${props.color}.200`,
-            'border-color': 'transparent',
-            'border-color-hover': 'transparent',
             'outline-color': `${props.color}.500`,
           }
         case 'plain':
           return {
             'text-color': `${props.color}.600`,
-            'bg-color': 'transparent',
             'bg-color-hover': `${props.color}.100`,
-            'border-color': 'transparent',
-            'border-color-hover': 'transparent',
             'outline-color': `${props.color}.500`,
           }
         case 'link':
           return {
             'text-color': `${props.color}.600`,
-            'bg-color': 'transparent',
-            'bg-color-hover': 'transparent',
-            'border-color': 'transparent',
-            'border-color-hover': 'transparent',
             'outline-color': `${props.color}.500`,
           }
         default:
@@ -99,7 +84,7 @@ export const Button = defineComponent({
             'bg-color-hover': 'slate.50',
             'border-color': 'slate.300',
             'border-color-hover': 'slate.300',
-            'outline-color': `primary.500`,
+            'outline-color': 'primary.500',
           }
       }
     })

diff --git a/vite.config.ts b/vite.config.ts
@@ -10,7 +10,9 @@ export default defineConfig({
   css: {
     transformer: 'lightningcss',
     lightningcss: {
-      drafts: {},
+      drafts: {
+        nesting: true,
+      },
     },
   },
   build: {