docs: update theme

Author: bcakmakoglu

docs/components/home/Features.vue

@@ -27,7 +27,7 @@ onBeforeUnmount(stop)
 <template>
   <div ref="el" class="w-full">
     <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-5/6 xl:max-w-7xl 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" />

docs/components/home/Showcase.vue

@@ -2,13 +2,13 @@
 
 <template>
   <div class="w-full">
-    <div class="max-w-3/4 md:max-w-5xl mx-auto py-4 md:py-12 lg:py-12 text-center">
+    <div class="max-w-5/6 lg:max-w-7xl mx-auto py-4 md:py-12 lg:py-12 text-center">
       <div class="flex flex-col items-center justify-center gap-2">
         <h1>Showcase</h1>
 
         <p class="text-lg">Vue Flow is used in a variety of projects and applications. Here are some of them:</p>
 
-        <div class="flex flex-col md:flex-row justify-between gap-12 mt-8">
+        <div class="flex flex-col md:flex-row justify-between items-center gap-12 mt-8">
           <div class="flex-1 flex flex-col justify-center">
             <div
               class="h-[200px] md:min-h-[300px] w-full shadow-xl rounded-xl font-mono uppercase border-1 border-gray overflow-hidden"
@@ -20,7 +20,7 @@
               <h2 class="text-3xl mt-6 font-semibold text-[#2196f3]">Octai</h2>
             </a>
 
-            <h3 class="text-lg">Machine Learning NoCode Platform for Data Scientists and Developers.</h3>
+            <h3 class="text-lg">A Machine-Learning NoCode platform using a node-based UI for Data Scientists and Developers.</h3>
           </div>
 
           <div class="flex-1 flex flex-col justify-center">

docs/components/home/Team.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/Additional.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/Basic.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/Intro.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])" />

docs/components/home/flows/Nested.vue

@@ -6,10 +6,10 @@ import '@vue-flow/core/dist/style.css'
 import '@vue-flow/core/dist/theme-default.css'
 import '@vue-flow/controls/dist/style.css'
 import '@vue-flow/minimap/dist/style.css'
-import './../../assets/index.css'
 
 import Theme from 'vitepress/theme'
 import Layout from './layouts/default.vue'
+import './style.css'
 
 export default {
   extends: Theme,

docs/src/.vitepress/theme/index.ts

@@ -0,0 +1,202 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ *
+ * Each colors have exact same color scale system with 3 levels of solid
+ * colors with different brightness, and 1 soft color.
+ *
+ * - `XXX-1`: The most solid color used mainly for colored text. It must
+ *   satisfy the contrast ratio against when used on top of `XXX-soft`.
+ *
+ * - `XXX-2`: The color used mainly for hover state of the button.
+ *
+ * - `XXX-3`: The color for solid background, such as bg color of the button.
+ *   It must satisfy the contrast ratio with pure white (#ffffff) text on
+ *   top of it.
+ *
+ * - `XXX-soft`: The color used for subtle background such as custom container
+ *   or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
+ *   on top of it.
+ *
+ *   The soft color must be semi transparent alpha channel. This is crucial
+ *   because it allows adding multiple "soft" colors on top of each other
+ *   to create a accent, such as when having inline code block inside
+ *   custom containers.
+ *
+ * - `default`: The color used purely for subtle indication without any
+ *   special meanings attched to it such as bg color for menu hover state.
+ *
+ * - `brand`: Used for primary brand colors, such as link text, button with
+ *   brand theme, etc.
+ *
+ * - `tip`: Used to indicate useful information. The default theme uses the
+ *   brand color for this by default.
+ *
+ * - `warning`: Used to indicate warning to the users. Used in custom
+ *   container, badges, etc.
+ *
+ * - `danger`: Used to show error, or dangerous message to the users. Used
+ *   in custom container, badges, etc.
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-c-default-1: var(--vp-c-gray-1);
+  --vp-c-default-2: var(--vp-c-gray-2);
+  --vp-c-default-3: var(--vp-c-gray-3);
+  --vp-c-default-soft: var(--vp-c-gray-soft);
+
+  --vp-c-brand-1: #42B983;
+  --vp-c-brand-2: #339066;
+  --vp-c-brand-3: #246648;
+  --vp-c-brand-soft: #35495E;
+
+  --vp-c-tip-1: var(--vp-c-brand-1);
+  --vp-c-tip-2: var(--vp-c-brand-2);
+  --vp-c-tip-3: var(--vp-c-brand-3);
+  --vp-c-tip-soft: var(--vp-c-brand-soft);
+
+  --vp-c-warning-1: var(--vp-c-yellow-1);
+  --vp-c-warning-2: var(--vp-c-yellow-2);
+  --vp-c-warning-3: var(--vp-c-yellow-3);
+  --vp-c-warning-soft: var(--vp-c-yellow-soft);
+
+  --vp-c-danger-1: var(--vp-c-red-1);
+  --vp-c-danger-2: var(--vp-c-red-2);
+  --vp-c-danger-3: var(--vp-c-red-3);
+  --vp-c-danger-soft: var(--vp-c-red-soft);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: transparent;
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand-3);
+  --vp-button-brand-hover-border: transparent;
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-2);
+  --vp-button-brand-active-border: transparent;
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-c-brand-1);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #bd34fe 30%,
+    #41d1ff
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #bd34fe 50%,
+    #47caff 50%
+  );
+  --vp-home-hero-image-filter: blur(40px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(72px);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --primary: #42B983;
+  --secondary: #35495E;
+  --vp-custom-block-tip-border: transparent;
+  --vp-custom-block-tip-text: white;
+  --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
+  --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand-1) !important;
+}
+
+.VPHome {
+  padding-bottom: 0 !important;
+}
+
+.VPNavBar.has-sidebar .content, .VPNav {
+  background-color: rgba(var(--vp-c-bg), 0.75);
+  backdrop-filter: blur(1px);
+}
+
+.examples .VPDoc {
+  @apply !px-8 !py-6;
+}
+
+.examples .content-container {
+  @apply !w-full !max-w-7xl;
+}
+
+.examples .aside {
+  @apply !hidden;
+}
+
+html, body {
+  @apply scrollbar scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-green-500 scrollbar-track-black;
+}
+
+ul li {
+  @apply mt-2;
+}
+
+.docs-button {
+  @apply mt-4 z-1 shadow-lg transition-colors duration-200 text-white font-semibold text-lg px-4 py-3 rounded-lg bg-accent dark:shadow-white/10;
+}
+
+.examples-button {
+  @apply z-1 shadow-lg transition-colors duration-200 font-semibold text-lg text-white px-4 py-3 rounded-lg bg-primary dark:shadow-white/10;
+}
+
+.slider {
+  --color: red;
+  @apply bg-gray-200 w-full h-[10px] outline-none rounded-full;
+  -webkit-appearance: none;
+  appearance: none;
+
+  &::-moz-range-thumb {
+    @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
+    -webkit-appearance: none;
+    background: var(--color);
+  }
+  &::-webkit-slider-thumb {
+    @apply w-[15px] h-[15px] cursor-pointer border-1 border-solid border-white rounded-full;
+    -webkit-appearance: none;
+    background: var(--color);
+  }
+}
+
+.vue-repl pre, .vue-repl pre[class*=language-] {
+  padding: unset;
+  margin: unset;
+  border-radius: unset;
+  line-height: unset;
+}