feat: css

docs/.vitepress/config.ts

@@ -63,6 +63,14 @@ export default defineConfig({
   },
   title: 'Elenext',
   vite: {
+    css: {
+      transformer: 'lightningcss',
+      lightningcss: {
+        drafts: {
+          nesting: true,
+        },
+      },
+    },
     plugins: [
       Inspect(),
       vueJsx(),

src/components/Button/button.css

@@ -1,4 +1,4 @@
-:where(.z-btn) {
+.z-btn {
   --z-btn-text-color: inherit;
   --z-btn-bg-color: #fff;
   --z-btn-border-color: #fff;
@@ -25,6 +25,22 @@
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 
+  &:enabled {
+    cursor: pointer;
+    &:hover {
+      background-color: var(--z-btn-bg-color-hover);
+      border-color: var(--z-btn-border-color-hover);
+    }
+    &:focus-visible {
+      outline: var(--z-btn-outline-color) solid 2px;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
   &.z-btn_icon {
     display: block;
     width: 1em;
@@ -42,52 +58,38 @@
     align-items: center;
     justify-content: center;
   }
-
-  &:enabled {
-    cursor: pointer;
-    &:hover {
-      background-color: var(--z-btn-bg-color-hover);
-      border-color: var(--z-btn-border-color-hover);
-    }
-    &:focus-visible {
-      outline: var(--z-btn-outline-color) solid 2px;
-    }
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
 }
 
 /* 'default' | 'solid' | 'soft' | 'plain' | 'link' */
-:where(.z-btn) {
+.z-btn {
   &.z-btn-default {
     box-shadow: var(--shadow-sm);
     border: 1px solid var(--z-btn-border-color);
   }
-  &.z-btn-outline {
-    border: 1px solid var(--z-btn-border-color);
-  }
   &.z-btn-solid {
-    box-shadow: var(--shadow-sm);
     color: #fff;
+    box-shadow: var(--shadow-sm);
+  }
+  &.z-btn-outline {
+    border: 1px solid var(--z-btn-border-color);
   }
+
   &.z-btn-soft {
     box-shadow: var(--shadow-sm);
   }
+
   &.z-btn-plain {
   }
 
   &.z-btn-link {
     &:enabled:hover {
-      text-decoration: underline solid green 2px;
+      text-decoration: underline solid var(--z-btn-text-color) 2px;
       text-underline-offset: 4px;
     }
   }
 }
 
-:where(.z-btn) {
+.z-btn {
   &.z-btn--xs {
     --z-btn-h: calc(1.75rem + 2px);
     font-size: 0.75rem;

src/components/Button/index.tsx

@@ -1,4 +1,4 @@
-// import './button.css'
+import './button.css'
 
 import {
   type ComponentObjectPropsOptions,
@@ -94,11 +94,11 @@ export const Button = defineComponent({
           }
         default:
           return {
-            'text-color': 'gray.700',
+            'text-color': 'slate.700',
             'bg-color': 'white',
             'bg-color-hover': 'slate.50',
-            'border-color': 'gray.300',
-            'border-color-hover': 'gray.300',
+            'border-color': 'slate.300',
+            'border-color-hover': 'slate.300',
             'outline-color': `primary.500`,
           }
       }
@@ -110,7 +110,6 @@ export const Button = defineComponent({
         emit('click', e)
       }
     }
-    const css = computed(()=>cssName(props.color,cssVars.value)) 
     return () => (
       <button
         class={{
@@ -120,7 +119,6 @@ export const Button = defineComponent({
           'z-btn--pill': props.pill || props.circle,
           'z-btn--square': props.square || props.circle,
           'z-btn--block': props.block,
-          [css.value]: true,
         }}
         style={cssVars.value}
         type="button"

vite.config.ts

@@ -7,6 +7,12 @@ import { defineConfig } from 'vite'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue(), vueJsx()],
+  css: {
+    transformer: 'lightningcss',
+    lightningcss: {
+      drafts: {},
+    },
+  },
   build: {
     lib: {
       entry: 'src/index.ts',