Merge pull request #13 from TeamVastsea/doc-ripple-doc

[WIP] Doc: improve doc

doc/docs/_meta.json

@@ -3,14 +3,5 @@
     "text": "Components",
     "link": "/components/button/button",
     "activeMatch": "/components/"
-  },
-  {
-    "text": "Hello World",
-    "link": "/hello/",
-    "activeMatch": "/hello/"
-  },
-  {
-    "text": "API",
-    "link": "https://rspress.dev/api/index.html"
   }
 ]

doc/docs/components/_meta.json

@@ -8,8 +8,8 @@
   },
   {
     "type": "dir",
-    "name": "ripple",
-    "label": "Ripple",
+    "name": "animation",
+    "label": "Animation",
     "collapsible": true,
     "collapsed": false
   },

doc/docs/components/ripple/_meta.json → doc/docs/components/animation/_meta.json

@@ -2,6 +2,6 @@
   {
     "type": "file",
     "name": "ripple",
-    "label": "Rutton"
+    "label": "Ripple"
   }
 ]

doc/docs/index.md

@@ -2,36 +2,27 @@
 pageType: home
 
 hero:
-  name: QwQUI - Docs
+  name: QwQUI
   text: Doc for QwQUI
   tagline: QwQUI - Docs tagline
   actions:
     - theme: brand
       text: Quick Start
-      link: /components/
+      link: /components/button/button
     - theme: alt
       text: GitHub
-      link: https://github.com/web-infra-dev/rspress
+      link: https://github.com/TeamVastsea/QwQUI
   image:
-    src: /rspress-icon.png
+    src: /Logo.svg
     alt: QwQUI - Docs Logo
 features:
-  - title: Blazing fast build speed
-    details: The core compilation module is based on the Rust front-end toolchain, providing a more ultimate development experience.
-    icon: 🏃🏻‍♀️
-  - title: Support for MDX content writing
-    details: MDX is a powerful way to write content, allowing you to use React components in Markdown.
-    icon: 📦
-  - title: Built-in full-text search
-    details: Automatically generates a full-text search index for you during construction, providing out-of-the-box full-text search capabilities.
+  - title: Modern Design
+    details: Embrace a sleek and contemporary aesthetic for your applications.
     icon: 🎨
-  - title: Simpler I18n solution
-    details: With the built-in I18n solution, you can easily provide multi-language support for documents or components.
-    icon: 🌍
-  - title: Static site generation
-    details: In production, it automatically builds into static HTML files, which can be easily deployed anywhere.
-    icon: 🌈
-  - title: Providing multiple custom capabilities
-    details: Through its extension mechanism, you can easily extend theme UI and build process.
+  - title: Silky-Smooth Performance
+    details: Enjoy fluid animations and fast interactions for a better user experience.
     icon: 🔥
+  - title: Based on RsPack
+    details: Leverage the power of RsPack for optimized builds and efficient development.
+    icon: 📈
 ---

doc/rspress.config.ts

@@ -7,10 +7,10 @@ export default defineConfig({
   root: path.join(__dirname, 'docs'),
   title: 'QwQUI - Docs',
   description: 'Doc for QwQUI',
-  icon: '/rspress-icon.png',
+  icon: '/Logo.svg',
   logo: {
-    light: '/rspress-light-logo.png',
-    dark: '/rspress-dark-logo.png',
+    light: '/logo-with-text-light.png',
+    dark: '/logo-with-text-dark.png',
   },
   themeConfig: {
     socialLinks: [

packages/components/button/src/button.tsx

@@ -41,6 +41,9 @@ export const Button = (props: ButtonProps) => {
           '--background-color': props.disabled ? 'var(--gray-300)' : `var(--${color}-300)`,
           '--background-color-hover': props.disabled ? 'var(--gray-300)' : `var(--${color}-200)`,
           '--background-color-active': props.disabled ? 'var(--gray-300)' : `var(--${color}-400)`,
+          '--color': props.disabled ? 'var(--gray-500)' : `var(--${color}-900)`,
+          '--color-hover': props.disabled ? 'var(--gray-500)' : `var(--${color}-600)`,
+          '--color-active': props.disabled ? 'var(--gray-500)' : `var(--${color}-900)`,
         } as React.CSSProperties}>
         {props.children}
       </button>