feat: update components and prose configuration

Author: phojie

components/common/card/Card.vue

@@ -11,7 +11,7 @@ const props = defineProps<{
   <div
     :class="
       cn(
-        'rounded-lg border bg-card text-card-foreground shadow-sm',
+        'rounded-lg border bg-background text-foreground shadow-sm',
         props.class,
       )
     "

components/common/command/CommandSeparator.vue

@@ -17,7 +17,7 @@ const delegatedProps = computed(() => {
 <template>
   <ComboboxSeparator
     v-bind="delegatedProps"
-    :class="cn('-mx-1 h-px bg-$c-border', props.class)"
+    :class="cn('-mx-1 h-px bg-muted-border', props.class)"
   >
     <slot />
   </ComboboxSeparator>

components/common/navigation-menu/NavigationMenuIndicator.vue

@@ -21,6 +21,6 @@ const forwardedProps = useForwardProps(delegatedProps)
     v-bind="forwardedProps"
     :class="cn('top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in', props.class)"
   >
-    <div class="relative top-[60%] rotate-45 rounded-tl-sm bg-$c-border shadow-md square-2" />
+    <div class="relative top-[60%] rotate-45 rounded-tl-sm bg-muted-border shadow-md square-2" />
   </NavigationMenuIndicator>
 </template>

components/common/navigation-menu/index.ts

@@ -9,5 +9,5 @@ export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue'
 
 // @unocss-include
 export const navigationMenuTriggerStyle = cva(
-  'group inline-flex h-8 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-$c-accent/50 data-[state=open]:bg-$c-accent/50',
+  'group inline-flex h-8 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-muted-accent/50 data-[state=open]:bg-muted-accent/50',
 )

components/common/scroll-area/ScrollBar.vue

@@ -27,6 +27,6 @@ const delegatedProps = computed(() => {
            && 'h-2.5 flex-col border-t border-t-transparent p-px',
          props.class)"
   >
-    <ScrollAreaThumb class="relative flex-1 rounded-full bg-$c-border" />
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-muted-border" />
   </ScrollAreaScrollbar>
 </template>

components/common/separator/Separator.vue

@@ -17,6 +17,6 @@ const delegatedProps = computed(() => {
 <template>
   <Separator
     v-bind="delegatedProps"
-    :class="cn('shrink-0 bg-$c-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)"
+    :class="cn('shrink-0 bg-muted-border', props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full', props.class)"
   />
 </template>

components/content/Alert.vue

@@ -39,7 +39,7 @@ async function alertClick() {
 <template>
   <CommonAlert
     class="transition-all [&:not(:first-child)]:mt-5"
-    :class="[typeTwClass[type], to && 'cursor-pointer hover:bg-$c-muted/50']"
+    :class="[typeTwClass[type], to && 'cursor-pointer hover:bg-muted/50']"
     @click="alertClick"
   >
     <SmartIcon v-if="icon && title" :name="icon" :size="16" />

components/content/ProseCode.vue

@@ -43,7 +43,7 @@ const icon = iconMap.get(props.filename?.toLowerCase()) || iconMap.get(props.lan
     <span v-if="!filename" class="absolute right-3 top-3 z-10">
       <CodeCopy :code="code" />
     </span>
-    <div class="bg-$c-muted/30">
+    <div class="bg-muted/30">
       <CommonScrollArea>
         <div
           class="overflow-x-auto py-3 text-sm"

components/content/ProseTr.vue

@@ -1,5 +1,5 @@
 <template>
-  <tr class="m-0 border-t p-0 even:bg-$c-muted/50">
+  <tr class="m-0 border-t p-0 even:bg-muted/50">
     <slot />
   </tr>
 </template>

components/layout/PrevNextButton.vue

@@ -11,7 +11,7 @@ defineProps<{
     :to="prevNext._path"
     class="basis-1/3"
   >
-    <div class="mb-4 border rounded-lg p-4 transition-all space-y-2 hover:bg-$c-muted/50">
+    <div class="mb-4 border rounded-lg p-4 transition-all space-y-2 hover:bg-muted/50">
       <div class="flex flex-row gap-3">
         <div v-if="side === 'left'" class="min-w-6 flex square-6">
           <Icon name="lucide:arrow-left" size="20" class="mx-auto self-center" />