From 6c7fde01c9aa3e0842a7924184952a99f0430f35 Mon Sep 17 00:00:00 2001
From: Braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Fri, 1 Apr 2022 00:10:50 +0200
Subject: [PATCH] update(docs): dark mode colors for home

---
 docs/components/home/Banner.vue   |   2 +-
 docs/components/home/Basic.vue    | 131 ++++++++++++++----------------
 docs/components/home/Features.vue |  43 ++++------
 docs/components/home/Home.vue     |   4 +-
 4 files changed, 83 insertions(+), 97 deletions(-)

diff --git a/docs/components/home/Banner.vue b/docs/components/home/Banner.vue
index ba0530b3..4701c718 100644
--- a/docs/components/home/Banner.vue
+++ b/docs/components/home/Banner.vue
@@ -4,7 +4,7 @@ import Star from '~icons/carbon/star'
 import Download from '~icons/carbon/download'
 </script>
 <template>
-  <div class="w-full bg-black text-white">
+  <div class="w-full bg-black text-white border-b-1 border-white">
     <div class="max-w-9/12 md:max-w-3/4 lg:max-w-4xl m-auto py-4 md:py-12">
       <div class="grid md:grid-cols-3 gap-3 md:gap-0 text-center <md:divide-y md:divide-x divide-blue-200">
         <div class="grid grid-rows-auto gap-2 py-4 md:py-0">
diff --git a/docs/components/home/Basic.vue b/docs/components/home/Basic.vue
index 23a8ee70..4a7812f3 100644
--- a/docs/components/home/Basic.vue
+++ b/docs/components/home/Basic.vue
@@ -1,120 +1,113 @@
 <script lang="ts" setup>
-import { GraphEdge, useVueFlow, VueFlow, Background, Controls, ClassFunc } from "@braks/vue-flow";
+import { GraphEdge, useVueFlow, VueFlow, Background, Controls, ClassFunc } from '@braks/vue-flow'
 
 const getClass: ClassFunc = (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/45",
-      "!text-gray-700"
-    ]
-  );
+  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'],
+    )
 
-  return classes.join(" ");
-};
+  return classes.join(' ')
+}
 
-const emit = defineEmits(["pane"]);
+const emit = defineEmits(['pane'])
 
 const { onPaneReady } = useVueFlow({
   modelValue: [
     {
-      id: "1",
-      type: "input",
-      label: "input",
+      id: '1',
+      type: 'input',
+      label: 'input',
       position: { x: 250, y: 5 },
-      class: getClass
+      class: getClass,
     },
     {
-      id: "2",
-      label: "default",
+      id: '2',
+      label: 'default',
       position: { x: 100, y: 100 },
-      class: getClass
+      class: getClass,
     },
-    { id: "3", label: "default", position: { x: 400, y: 100 }, class: getClass },
+    { id: '3', label: 'default', position: { x: 400, y: 100 }, class: getClass },
     {
-      id: "4",
-      type: "output",
-      label: "output",
+      id: '4',
+      type: 'output',
+      label: 'output',
       position: { x: 250, y: 225 },
-      class: getClass
+      class: getClass,
     },
     {
-      id: "e1-2",
-      source: "1",
-      label: "animated edge",
-      target: "2",
+      id: 'e1-2',
+      source: '1',
+      label: 'animated edge',
+      target: '2',
       animated: true,
       class: (el: GraphEdge) => {
-        const classes = ["transition-colors duration-300", el.sourceNode.selected ? "font-semibold" : ""];
-        return classes.join(" ");
+        const classes = ['transition-colors duration-300', el.sourceNode.selected ? 'font-semibold' : '']
+        return classes.join(' ')
       },
       style: (el: GraphEdge) => {
-        const sourceNodeSelected = el.sourceNode.selected;
+        const sourceNodeSelected = el.sourceNode.selected
         return {
-          transition: "stroke ease-in-out 300ms",
-          stroke: el.selected || sourceNodeSelected ? "var(--secondary)" : undefined
-        };
-      }
+          transition: 'stroke ease-in-out 300ms',
+          stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : undefined,
+        }
+      },
     },
     {
-      id: "e1-3",
-      source: "1",
-      target: "3",
-      label: "default edge",
+      id: 'e1-3',
+      source: '1',
+      target: '3',
+      label: 'default edge',
       class: (el: GraphEdge) => {
-        const classes = ["transition-colors duration-300", el.sourceNode.selected ? 'font-semibold' : '']
-        return classes.join(" ")
+        const classes = ['transition-colors duration-300', el.sourceNode.selected ? 'font-semibold' : '']
+        return classes.join(' ')
       },
       style: (el: GraphEdge) => {
-        const sourceNodeSelected = el.sourceNode.selected;
+        const sourceNodeSelected = el.sourceNode.selected
         return {
-          transition: "stroke ease-in-out 300ms",
-          stroke: el.selected || sourceNodeSelected ? "red" : undefined
-        };
-      }
+          transition: 'stroke ease-in-out 300ms',
+          stroke: el.selected || sourceNodeSelected ? 'red' : undefined,
+        }
+      },
     },
     {
-      id: "e2-4",
-      source: "2",
-      target: "4",
-      type: "step",
+      id: 'e2-4',
+      source: '2',
+      target: '4',
+      type: 'step',
       animated: true,
       class: (el: GraphEdge) => {
-        const classes = ["transition-colors duration-300", el.sourceNode.selected ? 'font-semibold' : '']
-        return classes.join(" ")
+        const classes = ['transition-colors duration-300', el.sourceNode.selected ? 'font-semibold' : '']
+        return classes.join(' ')
       },
       style: (el: GraphEdge) => {
-        const sourceNodeSelected = el.sourceNode.selected;
+        const sourceNodeSelected = el.sourceNode.selected
         return {
-          transition: "stroke ease-in-out 300ms",
-          stroke: el.selected || sourceNodeSelected ? "var(--secondary)" : undefined
-        };
-      }
-    }
-  ]
-});
+          transition: 'stroke ease-in-out 300ms',
+          stroke: el.selected || sourceNodeSelected ? 'var(--secondary)' : undefined,
+        }
+      },
+    },
+  ],
+})
 
-onPaneReady((i) => emit("pane", i));
+onPaneReady((i) => emit('pane', i))
 </script>
 <template>
   <div class="md:max-w-1/3 flex flex-col justify-center">
     <div class="flex flex-col gap-2 items-center md:items-start">
       <h1>Feature-rich</h1>
       <p>
-        Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection,
-        controls,
+        Vue Flow comes with seamless zooming & panning, different edge and node types, single and multi-selection, controls,
         several event handlers and more.
       </p>
-      <a class="button max-w-max" href="/docs">
-        Documentation
-      </a>
+      <a class="button max-w-max" href="/docs"> 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">
+    class="w-full h-[300px] md:min-h-[400px] shadow-xl rounded-xl font-mono uppercase border-1 border-secondary overflow-hidden"
+  >
     <VueFlow class="basic">
       <Controls class="md:!left-auto md:!right-[10px]" />
       <Background pattern-color="#aaa" :gap="16" />
diff --git a/docs/components/home/Features.vue b/docs/components/home/Features.vue
index a92eab93..a51f79ff 100644
--- a/docs/components/home/Features.vue
+++ b/docs/components/home/Features.vue
@@ -1,38 +1,32 @@
 <script lang="ts" setup>
-import { reactive, watch } from "vue";
-import { useBreakpoints, breakpointsTailwind } from "@vueuse/core";
-import { FlowInstance } from "@braks/vue-flow";
+import { reactive, watch } from 'vue'
+import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'
+import { FlowInstance } from '@braks/vue-flow'
 
-const breakpoints = useBreakpoints(breakpointsTailwind);
+const breakpoints = useBreakpoints(breakpointsTailwind)
 
-const instances = reactive<FlowInstance[]>([]);
+const instances = reactive<FlowInstance[]>([])
 
 const onLoad = (instance: FlowInstance) => {
-  instances.push(instance);
-  instance.fitView();
-};
+  instances.push(instance)
+  instance.fitView()
+}
 
 const fitViews = () => {
-  instances.forEach(i => i.fitView());
-};
+  instances.forEach((i) => i.fitView())
+}
 
-watch(
-  [
-    breakpoints.sm,
-    breakpoints.md,
-    breakpoints.lg,
-    breakpoints.xl,
-    breakpoints["2xl"]
-  ],
-  () => setTimeout(() => {
+watch([breakpoints.sm, breakpoints.md, breakpoints.lg, breakpoints.xl, breakpoints['2xl']], () =>
+  setTimeout(() => {
     fitViews()
-  }, 5)
-);
+  }, 5),
+)
 </script>
 <template>
-  <div class="w-full bg-gray-50">
+  <div class="w-full dark:(bg-black text-white)">
     <div
-      class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left">
+      class="flex flex-col divide-y divide-gray-500 md:divide-y-0 gap-12 md:gap-24 lg:gap-36 max-w-9/12 md:max-w-11/12 lg:max-w-9/12 m-auto py-12 md:py-24 text-center md:text-left"
+    >
       <div class="flex flex-col md:flex-row gap-12 md:gap-24">
         <Basic @pane="onLoad" />
       </div>
@@ -50,7 +44,6 @@ watch(
 </template>
 <style>
 .button {
-  @apply
-  shadow-lg transition-colors duration-200 hover:bg-black font-semibold text-lg mt-4 px-5 py-3 rounded-xl bg-green-500 text-white;
+  @apply shadow-lg transition-colors duration-200 hover:(dark:(bg-white text-black) bg-black) text-white font-semibold text-lg mt-4 px-5 py-3 rounded-xl bg-green-500;
 }
 </style>
diff --git a/docs/components/home/Home.vue b/docs/components/home/Home.vue
index e730c5de..96ada40a 100644
--- a/docs/components/home/Home.vue
+++ b/docs/components/home/Home.vue
@@ -54,8 +54,8 @@ onPaneReady(async ({ fitView }) => {
 })
 </script>
 <template>
-  <div class="bg-white h-[90vh] md:h-[75vh]">
-    <VueFlow class="dark:bg-black bg-white">
+  <div class="h-[90vh] md:h-[75vh]">
+    <VueFlow class="dark:bg-black bg-white transition-colors duration-200 ease-in-out">
       <template #node-box="props">
         <template v-if="props.id === 'intro'">
           <div class="max-w-[500px]">