docs: update home page styles

docs/components/home/flows/Basic.vue

@@ -11,7 +11,15 @@ const emit = defineEmits(['pane'])
 const getNodeClass: ClassFunc<GraphNode> = (el) => {
   const classes = ['font-semibold', '!border-2', 'transition-colors', 'duration-300', 'ease-in-out']
   if (el.selected) {
-    classes.push(...['!border-primary/80', '!shadow-md', '!shadow-primary/50', '!bg-primary-100/50', '!text-gray-700'])
+    classes.push(
+      ...[
+        '!border-primary/80',
+        '!shadow-lg',
+        'shadow-secondary dark:(!shadow-primary/50)',
+        '!bg-primary-100/50 dark:(!bg-primary-300/80)',
+        '!text-gray-700 dark:(!text-white)',
+      ],
+    )
   }
 
   return classes.join(' ')
@@ -26,7 +34,8 @@ const getEdgeStyle: StyleFunc<GraphEdge> = (el) => {
   const sourceNodeSelected = el.sourceNode.selected
   return {
     transition: 'stroke ease-in-out 300ms',
-    stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : '',
+    stroke: el.selected || sourceNodeSelected ? 'var(--primary)' : '',
+    strokeWidth: 2,
   }
 }
 

docs/components/home/flows/RGB.vue

@@ -95,15 +95,18 @@ const nodeColor: MiniMapNodeFunc = (node) => {
         <RGBOutputNode v-bind="rgbOutputProps" :rgb="`rgb(${color.red}, ${color.green}, ${color.blue})`" />
       </template>
       <Controls class="hidden md:block" />
+
       <Background
         :variant="BackgroundVariant.Lines"
         :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
         :gap="48"
         :size="1"
       />
+
       <MiniMap class="hidden sm:block transform scale-25 md:scale-50 lg:scale-75 origin-bottom-right" :node-color="nodeColor" />
     </VueFlow>
   </div>
+
   <div class="md:max-w-1/3 flex flex-col gap-12 justify-center <md:pt-12">
     <div class="flex flex-col gap-2 items-center md:items-start">
       <h1>Customizable</h1>