feat(projects): add ThemeCustomize

Author: honghuangdc

docs/.vitepress/theme/layout/components/app-logo.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'AppLogo'
+});
+</script>
+
+<template>
+  <svg viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M81.28 55.9c-.1-11.67-2.93-22.55-9.37-32.38-1-1.5-2.14-2.86-2.5-4.71a8.1 8.1 0 014-8.61 7.89 7.89 0 019.3 1.23 35.999 35.999 0 015.9 8.83 75.18 75.18 0 018.44 28.58 83.211 83.211 0 01-5.23 36.74 102.983 102.983 0 01-3 7.28 1.2 1.2 0 000 1.41c9.58 13.3 21.76 23 37.85 27.24a54.37 54.37 0 0019.68 1.57 7.72 7.72 0 018.36 6.9 7.903 7.903 0 01-6.7 9 64.744 64.744 0 01-23-1.33 77.68 77.68 0 01-36.93-19.88 93.628 93.628 0 01-11.91-13.71 2.18 2.18 0 00-2.3-1.06 72.744 72.744 0 00-27.38 7.55c-11.6 6-20.67 14.58-26.4 26.45a10.134 10.134 0 01-3.7 4.7 8 8 0 01-9.19-.7 7.86 7.86 0 01-2.36-9.28 60.324 60.324 0 018.72-14.52c12.2-15.43 28.21-24.59 47.32-28.57A85.085 85.085 0 0173.07 87c.524.015 1-.307 1.18-.8a76.06 76.06 0 006.53-22.3c.351-2.652.518-5.325.5-8z"
+      fill="currentColor"
+    />
+    <path
+      d="M136.26 108.34a44.742 44.742 0 01-11.13-2.87 46.108 46.108 0 01-19.66-13.76 8 8 0 015.72-13.22 7.93 7.93 0 016.54 2.93 33.27 33.27 0 0018.87 10.75c1.546.155 3.058.553 4.48 1.18a8.08 8.08 0 013.84 9.21c-.92 3.52-4.13 5.81-8.66 5.78zm-80.6-75.02a7.61 7.61 0 016.64 5 49.139 49.139 0 013.64 17 46.33 46.33 0 01-2.46 17.28c-2 5.77-8.24 7.79-12.89 4.15a8.1 8.1 0 01-2.39-9 31.679 31.679 0 001.68-12.36 35.77 35.77 0 00-2.43-11c-2.1-5.45 1.75-11.07 8.21-11.07zm22.26 93.25a8 8 0 01-6.68 7.86 32.88 32.88 0 00-19.7 12.19 8.13 8.13 0 01-11.21 1.62 8 8 0 01-1.41-11.58A51.043 51.043 0 0154 123.81a45.842 45.842 0 0114-5.1c5.35-1.04 9.91 2.56 9.92 7.86z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

docs/.vitepress/theme/layout/components/navbar.vue

@@ -70,6 +70,7 @@ watch(path, () => {
       </SDropdownMenu>
     </template>
     <SSeparator class="mx-4 h-4" decorative orientation="vertical" />
+    <slot name="theme-customize" />
     <ThemeToggle />
     <SSeparator class="mx-4 h-4" decorative orientation="vertical" />
     <SButtonIcon v-for="link in theme.socialLinks" :key="link.link" @click="openLink(link.link)">

docs/.vitepress/theme/layout/components/theme-customize.vue

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import { useVModel } from '@vueuse/core';
+import { SButton, SLabel } from 'soy-ui';
+import { builtinColorMap, builtinRadiuses } from '@soybean-ui/unocss-preset';
+import type { ThemeConfigColor } from '@soybean-ui/unocss-preset';
+import { Check } from 'lucide-vue-next';
+
+defineOptions({
+  name: 'ThemeCustomize'
+});
+
+interface ThemeCustomizeProps {
+  color: ThemeConfigColor;
+  radius: number;
+}
+
+const props = defineProps<ThemeCustomizeProps>();
+
+type ThemeCustomizeEmits = {
+  (e: 'update:theme', value: ThemeConfigColor): void;
+  (e: 'update:radius', value: number): void;
+};
+
+const emit = defineEmits<ThemeCustomizeEmits>();
+
+const color = useVModel(props, 'color', emit);
+const radius = useVModel(props, 'radius', emit);
+
+function setTheme(item: ThemeConfigColor) {
+  color.value = item;
+}
+
+function setRadius(item: number) {
+  radius.value = item;
+}
+</script>
+
+<template>
+  <div class="p-4">
+    <div class="grid space-y-1">
+      <h1 class="text-md text-foreground font-semibold">Customize</h1>
+      <p class="text-xs text-muted-foreground">Pick a style and color for your components.</p>
+    </div>
+    <div class="pt-6 space-y-1.5">
+      <SLabel for="color" class="text-xs">Color</SLabel>
+      <div class="grid grid-cols-3 gap-2 py-1.5">
+        <SButton
+          v-for="(value, key) in builtinColorMap"
+          :key="key"
+          :variant="color === key ? 'outline' : 'pure'"
+          class="h-8 justify-start px-3"
+          @click="setTheme(key)"
+        >
+          <span
+            class="h-5 w-5 flex shrink-0 items-center justify-center rounded-full"
+            :style="{ backgroundColor: `hsl(${value})` }"
+          >
+            <Check v-if="color === key" class="h-3 w-3 text-white" />
+          </span>
+          <span class="ml-2 text-xs capitalize">
+            {{ key }}
+          </span>
+        </SButton>
+      </div>
+    </div>
+    <div class="pt-6 space-y-1.5">
+      <SLabel for="radius" class="text-xs">Radius</SLabel>
+      <div class="grid grid-cols-5 gap-2 py-1.5">
+        <SButton
+          v-for="(r, index) in builtinRadiuses"
+          :key="index"
+          :variant="r === radius ? 'outline' : 'pure'"
+          class="h-8 justify-center px-3"
+          @click="setRadius(r)"
+        >
+          <span class="text-xs">{{ r }}</span>
+        </SButton>
+      </div>
+    </div>
+  </div>
+</template>

docs/.vitepress/theme/layout/index.vue

@@ -1,48 +1,77 @@
 <script setup lang="ts">
 import { useData } from 'vitepress';
-import { toRefs } from 'vue';
+import { computed, ref, toRefs } from 'vue';
 import { useScroll } from '@vueuse/core';
+import { SButtonIcon, SConfigProvider, SPopover } from 'soy-ui';
+import type { ConfigProviderProps } from 'soy-ui';
+import type { ThemeConfigColor } from '@soybean-ui/unocss-preset';
+import { SwatchBook } from 'lucide-vue-next';
+import AppLogo from './components/app-logo.vue';
 import Home from './components/home.vue';
 import Navbar from './components/navbar.vue';
 import Docs from './components/docs.vue';
+import ThemeCustomize from './components/theme-customize.vue';
 
-const { site, theme, frontmatter } = useData();
+const { site, frontmatter } = useData();
 
 const { arrivedState } = useScroll(globalThis.window);
 
 const { top } = toRefs(arrivedState);
+
+const color = ref<ThemeConfigColor>('default');
+const radius = ref(0.5);
+
+const configProviderProps = computed<ConfigProviderProps>(() => ({
+  theme: {
+    color: color.value,
+    radius: radius.value
+  }
+}));
 </script>
 
 <template>
-  <div class="flex-c items-center">
-    <header
-      class="sticky top-0 z-10 h-17 w-full py-4 transition-all duration-500"
-      :class="[
-        top
-          ? 'bg-transparent backdrop-blur-0'
-          : 'bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/90'
-      ]"
-    >
-      <div class="mx-auto max-w-1440px flex-y-center justify-between px-6">
-        <div class="w-full flex-y-center justify-between gap-8 md:justify-unset">
-          <a href="/" class="flex-y-center gap-2">
-            <img class="w-8 md:w-9" alt="Soybean UI logo" :src="theme.logo" />
-            <span class="text-xl font-bold md:text-2xl">{{ site.title }}</span>
-          </a>
-          <!-- <SearchTrigger /> -->
+  <SConfigProvider v-bind="configProviderProps">
+    <div class="flex-c items-center">
+      <header
+        class="sticky top-0 z-10 h-17 w-full py-4 transition-all duration-500"
+        :class="[
+          top
+            ? 'bg-transparent backdrop-blur-0'
+            : 'bg-background/90 backdrop-blur supports-[backdrop-filter]:bg-background/90'
+        ]"
+      >
+        <div class="mx-auto max-w-1440px flex-y-center justify-between px-6">
+          <div class="w-full flex-y-center justify-between gap-8 md:justify-unset">
+            <a href="/" class="flex-y-center gap-2">
+              <AppLogo class="size-8 text-primary md:size-9" />
+              <span class="text-xl font-bold md:text-2xl">{{ site.title }}</span>
+            </a>
+            <!-- <SearchTrigger /> -->
+          </div>
+
+          <Navbar>
+            <template #theme-customize>
+              <SPopover content-class="z-15" side="bottom" align="end">
+                <template #trigger>
+                  <SButtonIcon size="lg" class="mr-3">
+                    <SwatchBook />
+                  </SButtonIcon>
+                </template>
+                <ThemeCustomize v-model:color="color" v-model:radius="radius" />
+              </SPopover>
+            </template>
+          </Navbar>
         </div>
+      </header>
 
-        <Navbar />
+      <div v-if="frontmatter.layout === 'home'" class="size-full flex-c flex-1 justify-between">
+        <Home />
+        <div></div>
       </div>
-    </header>
 
-    <div v-if="frontmatter.layout === 'home'" class="size-full flex-c flex-1 justify-between">
-      <Home />
-      <div></div>
-    </div>
-
-    <div v-else class="w-full flex-grow">
-      <Docs />
+      <div v-else class="w-full flex-grow">
+        <Docs />
+      </div>
     </div>
-  </div>
+  </SConfigProvider>
 </template>

docs/package.json

@@ -15,6 +15,7 @@
     "preview": "vitepress preview"
   },
   "dependencies": {
+    "@soybean-ui/unocss-preset": "workspace:*",
     "@vueuse/core": "13.0.0",
     "lucide-vue-next": "0.482.0",
     "soy-ui": "workspace:*",

package.json

@@ -34,6 +34,7 @@
     "lint": "eslint . --fix",
     "prepare": "simple-git-hooks",
     "preview": "vite preview",
+    "preview:docs": "pnpm -r --filter='./docs' run preview",
     "publish-pkg": "pnpm -r publish --access public",
     "release": "soy release",
     "restore": "tsx scripts/restore.ts",

packages/soy-ui/src/components/config-provider/config-provider.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import { computed, toRefs, watch } from 'vue';
+import { useStyleTag } from '@vueuse/core';
+import { ConfigProvider, useOmitForwardProps } from '@soybean-ui/primitives';
+import { builtinColors, generateCSSVars } from '@soybean-ui/unocss-preset';
+import type { ThemeOptions } from '@soybean-ui/unocss-preset';
+import { provideConfigProviderContext } from './context';
+import type { ConfigProviderProps } from './types';
+
+defineOptions({
+  name: 'SConfigProvider',
+  inheritAttrs: false
+});
+
+const props = withDefaults(defineProps<ConfigProviderProps>(), {
+  theme: () => ({ color: 'default' }),
+  size: 'md'
+});
+
+const delegatedProps = useOmitForwardProps(props, ['theme', 'size']);
+
+const { theme, size } = toRefs(props);
+
+provideConfigProviderContext({ theme, size });
+
+const cssVars = computed(() => {
+  const keys = Object.keys(theme.value);
+
+  if (!keys.length) return '';
+
+  if (keys.length === 1 && keys.includes('color')) {
+    if (typeof theme.value.color === 'string' && builtinColors.includes(theme.value.color)) {
+      return '';
+    }
+  }
+
+  return generateCSSVars(theme.value);
+});
+
+useStyleTag(cssVars, { id: '__SOYBEAN_UI_THEME_VARS__' });
+
+function getThemeName(color: ThemeOptions['color']) {
+  let themeName = 'default';
+
+  if (typeof color === 'string') {
+    themeName = color;
+  }
+
+  if (typeof color === 'object') {
+    if ('base' in color) {
+      themeName = color.base || color.name;
+    } else {
+      themeName = color.name;
+    }
+  }
+
+  return themeName;
+}
+
+function addThemeClass(newThemeName: string, oldThemeName: string) {
+  if (newThemeName === oldThemeName) {
+    if (newThemeName === 'default') {
+      document.documentElement.classList.add(`theme-${newThemeName}`);
+    }
+
+    return;
+  }
+
+  document.documentElement.classList.add(`theme-${newThemeName}`);
+  document.documentElement.classList.remove(`theme-${oldThemeName}`);
+}
+
+watch(
+  () => theme.value.color,
+  (newVal, oldVal) => {
+    const newThemeName = getThemeName(newVal);
+    const oldThemeName = getThemeName(oldVal);
+
+    addThemeClass(newThemeName, oldThemeName);
+  },
+  { flush: 'post' }
+);
+</script>
+
+<template>
+  <ConfigProvider v-bind="delegatedProps">
+    <slot />
+  </ConfigProvider>
+</template>

packages/soy-ui/src/components/config-provider/context.ts

@@ -0,0 +1,15 @@
+import { createContext } from '@soybean-ui/primitives';
+import type { ConfigProviderContext } from './types';
+
+export const [provideConfigProviderContext, injectConfigProviderContext] =
+  createContext<ConfigProviderContext>('ConfigProvider');
+
+export function useConfigProvider(required = false) {
+  const context = injectConfigProviderContext();
+
+  if (required && !context) {
+    throw new Error('ConfigProviderContext is not provided');
+  }
+
+  return context;
+}

packages/soy-ui/src/components/config-provider/index.ts

@@ -0,0 +1,6 @@
+import SConfigProvider from './config-provider.vue';
+import { useConfigProvider } from './context';
+
+export { SConfigProvider, useConfigProvider };
+
+export * from './types';

packages/soy-ui/src/components/config-provider/types.ts

@@ -0,0 +1,16 @@
+import type { Ref } from 'vue';
+import type { ConfigProviderProps as _ConfigProviderProps } from '@soybean-ui/primitives';
+import type { ThemeSize } from '@soybean-ui/variants';
+import type { ThemeOptions } from '@soybean-ui/unocss-preset';
+
+export interface ConfigProviderProps extends _ConfigProviderProps {
+  /** The theme options. */
+  theme?: ThemeOptions;
+  /** The size options. */
+  size?: ThemeSize;
+}
+
+export interface ConfigProviderContext {
+  theme: Ref<ThemeOptions | undefined>;
+  size: Ref<ThemeSize | undefined>;
+}

packages/soy-ui/src/index.ts

@@ -13,6 +13,7 @@ export * from './components/chip';
 export * from './components/collapsible';
 export * from './components/combobox';
 export * from './components/command';
+export * from './components/config-provider';
 export * from './components/context-menu';
 export * from './components/dialog';
 export * from './components/drawer';