feat: enhance GradientPalette component with ShikiBlock for Tailwind output and update build config for CSS output

Author: onmax

docs/.vitepress/theme/components/GradientPalette.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, Teleport, nextTick, watch } from 'vue';
 import CodeBlock from './CodeBlock.vue';
-import { computedAsync } from '@vueuse/core';
+import ShikiBlock from './ShikiBlock.vue';
 
 const gradients = ['Neutral', 'Blue', 'Green', 'Red', 'Orange', 'Gold']
 
@@ -15,7 +15,10 @@ function setActiveGradient(gradient: string, darkened?: boolean) {
 }
 
 const cssVar = computed(() => `background-image: var(--nq-${activeGradient.value?.color.toLowerCase()}-gradient${activeGradient.value?.darkened ? '-darkened' : ''})`)
-const tailwind = computed(() => `bg-gradient-${activeGradient.value?.color.toLowerCase()}<br />hover:bg-gradient-${activeGradient.value?.color.toLowerCase()}-darkened`)
+const tailwind = computed(() => {
+  const className = `bg-gradient-${activeGradient.value?.color.toLowerCase()} hover:bg-gradient-${activeGradient.value?.color.toLowerCase()}-darkened transition-colors`
+  return `<div class="${className}" />`
+})
 
 const card= ref<HTMLDivElement>()
 
@@ -31,6 +34,9 @@ watch(activeGradient, async () => {
 
 <template>
   <div grid="~ cols-[auto_1fr_1fr] items-center gap-16" f-my-md class="nq-raw" max-w-800 relative>
+    <div></div>
+    <span nq-label text-center>Default</span>
+    <span nq-label text-center>Darkened</span>
     <div v-for="gradient in gradients" :key="gradient" contents>
       <p text="neutral-700 right" font-semibold f-text-xs sm:pr-24>{{ gradient }}</p>
       <button bg-transparent  :style="getBg(`${gradient}`)" max-h-48 aspect-square w-full rounded="4 md:6"
@@ -49,10 +55,10 @@ watch(activeGradient, async () => {
         <CodeBlock :code="css!" text-wrap />
 
         <span block nq-label text-10 f-mt-md mb-2>CSS Variable</span>
-        <CodeBlock :code="cssVar" text-wrap />
+        <CodeBlock :code="`${cssVar}; /* Defined in nq-colors layer */`" text-wrap />
 
         <span block nq-label text-10 f-mt-md mb-2>Tailwind / UnoCSS</span>
-        <CodeBlock :code="tailwind" text-wrap />
+        <ShikiBlock :code="tailwind" lang="html" />
       </div>
     </Teleport>
   </ClientOnly>

packages/nimiq-vitepress-theme/build.config.ts

@@ -55,7 +55,7 @@ export default defineBuildConfig({
       //
       // The use of CLI was suggested by how to use unocss with rollup? · unocss/unocss · Discussion #542
       // https:// github.com/unocss/unocss/discussions/542
-      await execAsync('unocss "./src/**/*.vue" -o dist/style.css')
+      await execAsync('unocss "./src/**/*.vue" -o dist/assets/index.css')
     },
   },
 })

packages/nimiq-vitepress-theme/src/assets/index.css

@@ -0,0 +1 @@
+/* An empty file to let vite know this file exists, but it will be replaced by UnoCSS */

packages/nimiq-vitepress-theme/src/layout/Layout.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '../assets/index.css';
 import PageContent from './PageContent.vue';
 import Sidebar from './Sidebar.vue'
 </script>