feat(docs): add colors showcase

.prettierignore

@@ -1,5 +1,7 @@
 dist
 .github/
+.vitepress/dist
+.vitepress/cache
 pnpm-lock.yaml
 package-lock.json
 yarn.lock

docs/.vitepress/config.ts

@@ -1,34 +1,26 @@
-import { defineConfig } from "vitepress";
-import UnoCSS from "unocss/vite";
-import { presetUno, presetWind, presetTypography } from "unocss";
-// https://vitepress.dev/reference/site-config
+import { defineConfig } from 'vitepress'
+import UnoCSS from 'unocss/vite'
+import { presetUno, presetWind, presetTypography } from 'unocss'
+
 export default defineConfig({
-  title: "Design System",
-  description: "🎋",
+  title: 'Design System',
+  description: '🎋',
   vite: {
     plugins: [
-      UnoCSS({ presets: [presetUno(), presetWind(), presetTypography()] }),
-    ],
+      UnoCSS({ presets: [presetUno(), presetWind(), presetTypography()] })
+    ]
   },
   themeConfig: {
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-      { text: "Home", link: "/" },
-      { text: "Examples", link: "/markdown-examples" },
+      { text: 'Home', link: '/' },
+      { text: 'Colors', link: '/colors' }
     ],
 
-    sidebar: [
-      {
-        text: "Examples",
-        items: [
-          { text: "Markdown Examples", link: "/markdown-examples" },
-          { text: "Runtime API Examples", link: "/api-examples" },
-        ],
-      },
-    ],
+    sidebar: [{ text: 'Colors', link: '/colors' }],
 
     socialLinks: [
-      { icon: "github", link: "https://github.com/vuejs/vitepress" },
-    ],
-  },
-});
+      { icon: 'github', link: 'https://github.com/fmhy/design-system' }
+    ]
+  }
+})

docs/.vitepress/theme/components/ColorShowcase.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="flex flex-col space-y-12">
+    <div v-for="name in colorNames" :key="name">
+      <h3 class="capitalize">{{ name.replaceAll('-', ' ') }}</h3>
+      <div class="grid grid-cols-5 md:grid-cols-10 mt-2">
+        <div v-for="color in colors[name]" :key="color">
+          <div
+            class="h-12 transition-all"
+            :style="`background: ${color}`"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { colors } from '@fmhy/colors'
+
+const colorNames = Object.keys(colors)
+</script>

docs/.vitepress/theme/index.ts

@@ -1,18 +1,18 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from "vue";
-import type { Theme } from "vitepress";
-import DefaultTheme from "vitepress/theme";
-import "./style.css";
-import "uno.css";
+import { h } from 'vue'
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+import './style.css'
+import 'uno.css'
 
 export default {
   extends: DefaultTheme,
   Layout: () => {
     return h(DefaultTheme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
-    });
+    })
   },
   enhanceApp({ app, router, siteData }) {
     // ...
-  },
-} satisfies Theme;
+  }
+} satisfies Theme

docs/.vitepress/theme/style.css

@@ -43,7 +43,7 @@
  *   in custom container, badges, etc.
  * -------------------------------------------------------------------------- */
 
- :root {
+:root {
   --vp-c-default-1: var(--vp-c-gray-1);
   --vp-c-default-2: var(--vp-c-gray-2);
   --vp-c-default-3: var(--vp-c-gray-3);
@@ -136,4 +136,3 @@
 .DocSearch {
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
-

docs/colors.md

@@ -0,0 +1,9 @@
+---
+outline: deep
+---
+
+<script setup>
+import Colors from "./.vitepress/theme/components/ColorShowcase.vue"
+</script>
+
+<Colors />

docs/index.md

@@ -3,23 +3,14 @@
 layout: home
 
 hero:
-  name: "Design System"
-  text: "🎋"
-  tagline: My great project tagline
+  name: 'Design System'
+  text: '🎋'
+  tagline: so cool
   actions:
     - theme: brand
-      text: Markdown Examples
-      link: /markdown-examples
+      text: Colors
+      link: /colors
     - theme: alt
       text: API Examples
       link: /api-examples
-
-features:
-  - title: Feature A
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature B
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature C
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
 ---
-

docs/package.json

@@ -1,17 +1,19 @@
 {
-	"name": "@fmhy/docs",
-	"private": true,
-	"version": "1.0.0",
-	"type": "module",
-	"scripts": {
-		"dev": "vitepress dev",
-		"build": "vitepress build",
-		"preview": "vitepress preview"
-	},
-	"dependencies": {
-		"sass": "^1.71.1",
-		"unocss": "^0.58.5",
-		"vitepress": "1.0.0-rc.45",
-		"vue": "^3.4.21"
-	}
+  "name": "@fmhy/docs",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vitepress build",
+    "dev": "vitepress dev",
+    "format": "prettier --write --cache .",
+    "preview": "vitepress preview"
+  },
+  "dependencies": {
+    "@fmhy/colors": "workspace:^",
+    "sass": "^1.71.1",
+    "unocss": "^0.58.5",
+    "vitepress": "1.0.0-rc.45",
+    "vue": "^3.4.21"
+  }
 }

package.json

@@ -8,6 +8,7 @@
 		"format": "pnpm --parallel -r format",
 		"build": "pnpm --parallel -r build",
 		"release": "pnpm build && pnpm changeset publish",
+		"docs": "pnpm -F docs",
 		"version-packages": "changeset version",
 		"knip": "knip"
 	},