docs: update theme

docs/components/home/flows/Additional.vue

@@ -101,16 +101,19 @@ onPaneReady((i) => emit('pane', i))
       <Background variant="lines" pattern-color="#aaa" :gap="46" />
     </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>Additional Features</h1>
+
       <p>
         On top of all the features Vue Flow comes with several components like a Background, Minimap or Controls.
 
         <br />
         Plus it's built for composition, making the access of the internal state easy as can be!
       </p>
-      <a class="docs-button max-w-max" href="/guide/"> Documentation </a>
+
+      <a class="docs-button" href="/guide/"> Documentation </a>
     </div>
   </div>
 </template>

docs/components/home/flows/Basic.vue

@@ -11,9 +11,7 @@ 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-green-500/80', '!shadow-md', '!shadow-green-500/50', '!bg-green-100/80 dark:(!bg-white)', '!text-gray-700'],
-    )
+    classes.push(...['!border-primary/80', '!shadow-md', '!shadow-primary/50', '!bg-primary-100/50', '!text-gray-700'])
   }
 
   return classes.join(' ')
@@ -111,13 +109,16 @@ onConnect((param) => {
   <div class="md:max-w-1/3 flex flex-col justify-center">
     <div class="flex flex-col items-center md:items-start">
       <h1>Interactive Graphs</h1>
+
       <p>
         Vue Flow comes with built-in features like zoom & pan and dedicated controls, single & multi-selections, draggable
         elements, customizable nodes and edges and a bunch of event handlers.
       </p>
-      <a class="docs-button max-w-max" href="/guide/"> Documentation </a>
+
+      <a class="docs-button" href="/guide/"> Documentation </a>
     </div>
   </div>
+
   <div
     class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden"
   >
@@ -134,14 +135,14 @@ onConnect((param) => {
 
 <style>
 .basic .vue-flow__node-input.selected .vue-flow__handle {
-  @apply bg-green-500;
+  @apply bg-primary;
 }
 
 .basic .vue-flow__node-default.selected .vue-flow__handle {
-  @apply bg-green-500;
+  @apply bg-primary;
 }
 
 .basic .vue-flow__node-output.selected .vue-flow__handle {
-  @apply bg-green-500;
+  @apply bg-primary;
 }
 </style>

docs/components/home/flows/Intro.vue

@@ -243,7 +243,7 @@ function scrollTo() {
 
       <template v-else-if="props.id === 'examples'">
         <div class="flex">
-          <a class="intro-link group bg-[#ef467e]" href="/examples/"> Check The Examples </a>
+          <a class="intro-link group bg-pink-500" href="/examples/"> Check The Examples </a>
         </div>
 
         <Handle
@@ -278,7 +278,7 @@ function scrollTo() {
 <style>
 .intro {
   @apply cursor-pointer
-  bg-green-500
+  bg-primary
   text-white
   transform
   transition-transform

docs/components/home/flows/Nested.vue

@@ -9,7 +9,7 @@ const emit = defineEmits(['pane'])
 const breakpoints = useBreakpoints(breakpointsTailwind)
 
 const nodeClasses = ['!normal-case font-semibold !text-white', '!border-1', 'shadow-md'].join(' ')
-const childClasses = `${nodeClasses} !bg-green-500/70 !border-white`
+const childClasses = `${nodeClasses} !bg-primary-500/70 !border-white`
 
 const { onPaneReady, panOnDrag } = useVueFlow({
   fitViewOnInit: true,
@@ -27,7 +27,7 @@ const { onPaneReady, panOnDrag } = useVueFlow({
       id: '2',
       label: 'Parent Node',
       position: { x: -125, y: 100 },
-      class: `${nodeClasses} !bg-green-500/30 !border-green-500`,
+      class: `${nodeClasses} !bg-primary-500/30 !border-primary-500`,
       style: { width: '400px', height: '160px' },
     },
     {
@@ -72,7 +72,7 @@ onPaneReady((i) => emit('pane', i))
     </div>
   </div>
   <div
-    class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-green-500 overflow-hidden"
+    class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-primary-500 overflow-hidden"
   >
     <VueFlow class="nested">
       <Controls class="md:(!left-auto !right-[10px])" />