From 34b2523c2b57f7241fbdf1e6d7b2fa1981e3f433 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Jul 2024 20:50:46 +0200
Subject: [PATCH 01/10] refactor(core): move background component to core pkg

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/background/src/types.ts              | 42 ------------
 .../src/addons/Background}/Background.vue     | 47 +++++--------
 packages/core/src/addons/Background/index.ts  |  2 +
 .../src/addons/Background}/patterns.ts        | 10 +--
 packages/core/src/addons/Background/types.ts  | 67 +++++++++++++++++++
 packages/core/src/index.ts                    |  2 +
 6 files changed, 91 insertions(+), 79 deletions(-)
 delete mode 100644 packages/background/src/types.ts
 rename packages/{background/src => core/src/addons/Background}/Background.vue (56%)
 create mode 100644 packages/core/src/addons/Background/index.ts
 rename packages/{background/src => core/src/addons/Background}/patterns.ts (79%)
 create mode 100644 packages/core/src/addons/Background/types.ts

diff --git a/packages/background/src/types.ts b/packages/background/src/types.ts
deleted file mode 100644
index 01f93dcd2..000000000
--- a/packages/background/src/types.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * @deprecated - will be removed in the next major version. You can use simple string values for `variant` prop instead, i.e. `lines` or `dots`
- */
-export enum BackgroundVariant {
-  Lines = 'lines',
-  Dots = 'dots',
-}
-
-export type BackgroundVariantType = Lowercase<keyof typeof BackgroundVariant>
-
-export interface BackgroundProps {
-  id?: string
-  /** The background pattern variant */
-  variant?: BackgroundVariant | BackgroundVariantType
-  /** Background pattern gap */
-  gap?: number | number[]
-  /** Background pattern size */
-  size?: number
-  lineWidth?: number
-  /**
-   * @deprecated - will be removed in the next major version. Use `color` instead
-   * Background pattern color
-   */
-  patternColor?: string
-  /** Background pattern color */
-  color?: string
-  /**
-   * @deprecated - will be removed in the next major version. You can assign a bg color to `<VueFlow />` directly instead.
-   * Background color
-   */
-  bgColor?: string
-  /** @deprecated Background height */
-  height?: number
-  /** @deprecated Background width */
-  width?: number
-  /** Background x-coordinate (offset x) */
-  x?: number
-  /** Background y-coordinate (offset y) */
-  y?: number
-  /** Background offset */
-  offset?: number
-}
diff --git a/packages/background/src/Background.vue b/packages/core/src/addons/Background/Background.vue
similarity index 56%
rename from packages/background/src/Background.vue
rename to packages/core/src/addons/Background/Background.vue
index 7dd2375a8..94aa77bb9 100644
--- a/packages/background/src/Background.vue
+++ b/packages/core/src/addons/Background/Background.vue
@@ -1,39 +1,32 @@
 <script lang="ts" setup>
-import { useVueFlow } from '@vue-flow/core'
-import { computed, toRef } from 'vue'
-import { BackgroundVariant } from './types'
+import { computed } from 'vue'
+import { useVueFlow } from '../../composables/useVueFlow'
 import type { BackgroundProps } from './types'
 import { DefaultBgColors, DotPattern, LinePattern } from './patterns'
 
-const {
-  id,
-  variant = BackgroundVariant.Dots,
+const props = withDefaults(defineProps<BackgroundProps>(), {
+  variant = 'dots',
   gap = 20,
   size = 1,
   lineWidth = 1,
-  height = 100,
-  width = 100,
   x = 0,
   y = 0,
-  bgColor,
-  patternColor: initialPatternColor,
-  color: _patternColor,
   offset = 2,
-} = defineProps<BackgroundProps>()
+})
 
 const { id: vueFlowId, viewport } = useVueFlow()
 
 const background = computed(() => {
-  const [gapX, gapY] = Array.isArray(gap) ? gap : [gap, gap]
+  const [gapX, gapY] = Array.isArray(props.gap) ? props.gap : [props.gap, props.gap]
 
   const scaledGap: [number, number] = [gapX * viewport.value.zoom || 1, gapY * viewport.value.zoom || 1]
 
-  const scaledSize = size * viewport.value.zoom
+  const scaledSize = props.size * viewport.value.zoom
 
   const patternOffset =
-    variant === BackgroundVariant.Dots
-      ? [scaledSize / offset, scaledSize / offset]
-      : [scaledGap[0] / offset, scaledGap[1] / offset]
+    props.variant === 'dots'
+      ? [scaledSize / props.offset, scaledSize / props.offset]
+      : [scaledGap[0] / props.offset, scaledGap[1] / props.offset]
 
   return {
     scaledGap,
@@ -43,9 +36,9 @@ const background = computed(() => {
 })
 
 // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
-const patternId = toRef(() => `pattern-${vueFlowId}${id ? `-${id}` : ''}`)
+const patternId = computed(() => `pattern-${vueFlowId}${props.id ? `-${props.id}` : ''}`)
 
-const patternColor = toRef(() => _patternColor || initialPatternColor || DefaultBgColors[variant || BackgroundVariant.Dots])
+const patternColor = computed(() => props.color || DefaultBgColors[props.variant || 'dots'])
 </script>
 
 <script lang="ts">
@@ -56,13 +49,7 @@ export default {
 </script>
 
 <template>
-  <svg
-    class="vue-flow__background vue-flow__container"
-    :style="{
-      height: `${height > 100 ? 100 : height}%`,
-      width: `${width > 100 ? 100 : width}%`,
-    }"
-  >
+  <svg class="vue-flow__background vue-flow__container">
     <slot :id="patternId" name="pattern-container">
       <pattern
         :id="patternId"
@@ -74,17 +61,13 @@ export default {
         patternUnits="userSpaceOnUse"
       >
         <slot name="pattern">
-          <template v-if="variant === BackgroundVariant.Lines">
+          <template v-if="variant === 'lines'">
             <LinePattern :size="lineWidth" :color="patternColor" :dimensions="background.scaledGap" />
           </template>
 
-          <template v-else-if="variant === BackgroundVariant.Dots">
+          <template v-else-if="variant === 'dots'">
             <DotPattern :color="patternColor" :radius="background.size / offset" />
           </template>
-
-          <svg v-if="bgColor" height="100" width="100">
-            <rect width="100%" height="100%" :fill="bgColor" />
-          </svg>
         </slot>
       </pattern>
     </slot>
diff --git a/packages/core/src/addons/Background/index.ts b/packages/core/src/addons/Background/index.ts
new file mode 100644
index 000000000..e7aaa4b7b
--- /dev/null
+++ b/packages/core/src/addons/Background/index.ts
@@ -0,0 +1,2 @@
+export { default as Background } from './Background.vue'
+export * from './types'
diff --git a/packages/background/src/patterns.ts b/packages/core/src/addons/Background/patterns.ts
similarity index 79%
rename from packages/background/src/patterns.ts
rename to packages/core/src/addons/Background/patterns.ts
index 228175700..0aeccfdf2 100644
--- a/packages/background/src/patterns.ts
+++ b/packages/core/src/addons/Background/patterns.ts
@@ -1,6 +1,6 @@
 import type { FunctionalComponent } from 'vue'
 import { h } from 'vue'
-import { BackgroundVariant } from './types'
+import type { BackgroundVariant } from './types'
 
 interface LinePatternProps {
   dimensions: [number, number]
@@ -26,11 +26,11 @@ export const DotPattern: FunctionalComponent<DotPatternProps> = function ({ radi
 }
 
 export const Patterns = {
-  [BackgroundVariant.Lines]: LinePattern,
-  [BackgroundVariant.Dots]: DotPattern,
+  lines: LinePattern,
+  dots: DotPattern,
 }
 
 export const DefaultBgColors: Record<BackgroundVariant, string> = {
-  [BackgroundVariant.Dots]: '#81818a',
-  [BackgroundVariant.Lines]: '#eee',
+  lines: '#81818a',
+  dots: '#eee',
 }
diff --git a/packages/core/src/addons/Background/types.ts b/packages/core/src/addons/Background/types.ts
new file mode 100644
index 000000000..3b8c62d62
--- /dev/null
+++ b/packages/core/src/addons/Background/types.ts
@@ -0,0 +1,67 @@
+/**
+ * The Background can be either a dotted one or a lined one
+ *
+ * @default 'dots'
+ */
+export type BackgroundVariant = 'dots' | 'lines'
+
+export interface BackgroundProps {
+  /**
+   * `<Background>` component id
+   *
+   * This is necessary when you have multiple flows with backgrounds visible at the same time.
+   * If no id is explicitly assigned, an auto-generated one is used.
+   *
+   * @default `pattern-${vueFlowId}${id ? `-${id}` : ''}`
+   */
+  id?: string
+  /**
+   * The background pattern variant {@link BackgroundVariant}
+   *
+   * @default 'dots'
+   */
+  variant?: BackgroundVariant
+  /**
+   * The background pattern gap
+   *
+   * Can be either a number or [xGap: number, yGap: number], defining the gap on the X and Y axis respectively
+   *
+   * @default 20
+   */
+  gap?: number | number[]
+  /**
+   * Background pattern size
+   *
+   * @default 1
+   */
+  size?: number
+  /**
+   * @default 1
+   */
+  lineWidth?: number
+  /**
+   * The background pattern color
+   *
+   * This only changes the color of the *pattern*, not the background color itself.
+   *
+   * If you want to change the background color itself, you can apply a bg-color to the `<VueFlow>` element instead
+   */
+  color?: string
+  /**
+   * Background x-coordinate (offset x)
+   *
+   * @default 0
+   */
+  x?: number
+  /**
+   * Background y-coordinate (offset y)
+   * @default 0
+   */
+  y?: number
+  /**
+   * Background pattern offset
+   *
+   * @default 2
+   */
+  offset?: number
+}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 371c4dfa9..c3253b2ec 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -18,6 +18,8 @@ export { default as BaseEdge } from './components/Edges/BaseEdge.vue'
 export { default as EdgeText } from './components/Edges/EdgeText.vue'
 export { default as EdgeLabelRenderer } from './components/Edges/EdgeLabelRenderer.vue'
 
+export * from './addons/Background'
+
 export {
   getBezierPath,
   getSimpleBezierPath,

From 6d8f4904b1a27c3182068bae75a643cb8e391688 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Jul 2024 20:53:26 +0200
Subject: [PATCH 02/10] chore(changeset): add

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .changeset/late-toys-play.md    | 6 ++++++
 .changeset/spicy-cups-argue.md  | 5 +++++
 .changeset/witty-seals-cough.md | 5 +++++
 3 files changed, 16 insertions(+)
 create mode 100644 .changeset/late-toys-play.md
 create mode 100644 .changeset/spicy-cups-argue.md
 create mode 100644 .changeset/witty-seals-cough.md

diff --git a/.changeset/late-toys-play.md b/.changeset/late-toys-play.md
new file mode 100644
index 000000000..e6c7bcbbf
--- /dev/null
+++ b/.changeset/late-toys-play.md
@@ -0,0 +1,6 @@
+---
+"@vue-flow/background": minor
+"@vue-flow/core": minor
+---
+
+Move `<Background>` component to core package
diff --git a/.changeset/spicy-cups-argue.md b/.changeset/spicy-cups-argue.md
new file mode 100644
index 000000000..e94b6b8d2
--- /dev/null
+++ b/.changeset/spicy-cups-argue.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/background": minor
+---
+
+Re-export `<Background>` from core pkg
diff --git a/.changeset/witty-seals-cough.md b/.changeset/witty-seals-cough.md
new file mode 100644
index 000000000..a9108666e
--- /dev/null
+++ b/.changeset/witty-seals-cough.md
@@ -0,0 +1,5 @@
+---
+"@vue-flow/background": minor
+---
+
+Deprecate `@vue-flow/background` pkg

From 68b472015b7acb3404d5c01b57c5c86cebb47bea Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Jul 2024 20:54:40 +0200
Subject: [PATCH 03/10] chore(core): cleanup

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 .../Background/Background.vue                      | 14 +++++++-------
 .../src/{addons => components}/Background/index.ts |  0
 .../{addons => components}/Background/patterns.ts  |  0
 .../src/{addons => components}/Background/types.ts |  0
 packages/core/src/index.ts                         |  2 +-
 5 files changed, 8 insertions(+), 8 deletions(-)
 rename packages/core/src/{addons => components}/Background/Background.vue (96%)
 rename packages/core/src/{addons => components}/Background/index.ts (100%)
 rename packages/core/src/{addons => components}/Background/patterns.ts (100%)
 rename packages/core/src/{addons => components}/Background/types.ts (100%)

diff --git a/packages/core/src/addons/Background/Background.vue b/packages/core/src/components/Background/Background.vue
similarity index 96%
rename from packages/core/src/addons/Background/Background.vue
rename to packages/core/src/components/Background/Background.vue
index 94aa77bb9..2cebdb175 100644
--- a/packages/core/src/addons/Background/Background.vue
+++ b/packages/core/src/components/Background/Background.vue
@@ -5,13 +5,13 @@ import type { BackgroundProps } from './types'
 import { DefaultBgColors, DotPattern, LinePattern } from './patterns'
 
 const props = withDefaults(defineProps<BackgroundProps>(), {
-  variant = 'dots',
-  gap = 20,
-  size = 1,
-  lineWidth = 1,
-  x = 0,
-  y = 0,
-  offset = 2,
+  variant: 'dots',
+  gap: 20,
+  size: 1,
+  lineWidth: 1,
+  x: 0,
+  y: 0,
+  offset: 2,
 })
 
 const { id: vueFlowId, viewport } = useVueFlow()
diff --git a/packages/core/src/addons/Background/index.ts b/packages/core/src/components/Background/index.ts
similarity index 100%
rename from packages/core/src/addons/Background/index.ts
rename to packages/core/src/components/Background/index.ts
diff --git a/packages/core/src/addons/Background/patterns.ts b/packages/core/src/components/Background/patterns.ts
similarity index 100%
rename from packages/core/src/addons/Background/patterns.ts
rename to packages/core/src/components/Background/patterns.ts
diff --git a/packages/core/src/addons/Background/types.ts b/packages/core/src/components/Background/types.ts
similarity index 100%
rename from packages/core/src/addons/Background/types.ts
rename to packages/core/src/components/Background/types.ts
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index c3253b2ec..dbd591546 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -18,7 +18,7 @@ export { default as BaseEdge } from './components/Edges/BaseEdge.vue'
 export { default as EdgeText } from './components/Edges/EdgeText.vue'
 export { default as EdgeLabelRenderer } from './components/Edges/EdgeLabelRenderer.vue'
 
-export * from './addons/Background'
+export * from './components/Background'
 
 export {
   getBezierPath,

From 4c2484375633ca47898f0c131844030b8b20d761 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Jul 2024 21:22:45 +0200
Subject: [PATCH 04/10] refactor(background): re-export background from core
 pkg

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/background/package.json  | 11 ++++-------
 packages/background/src/index.ts  |  3 +--
 packages/background/tsconfig.json |  5 +----
 3 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/packages/background/package.json b/packages/background/package.json
index 3bde3f4ab..0cfa1a7f0 100644
--- a/packages/background/package.json
+++ b/packages/background/package.json
@@ -49,22 +49,19 @@
     "dev": "pnpm types:watch & pnpm build:watch",
     "build": "vite build",
     "build:watch": "vite build --watch",
-    "types": "vue-tsc --declaration --emitDeclarationOnly && pnpm lint:dist",
-    "types:watch": "vue-tsc --declaration --emitDeclarationOnly --watch",
+    "types": "tsc && pnpm lint:dist",
+    "types:watch": "tsc --watch",
     "lint": "eslint --ext .js,.ts,.vue ./",
     "lint:dist": "eslint --ext \".ts,.tsx\" -c .eslintrc.js --fix --ignore-pattern !**/*  ./dist",
     "test": "exit 0"
   },
   "peerDependencies": {
-    "@vue-flow/core": "^1.23.0",
-    "vue": "^3.3.0"
+    "@vue-flow/core": "^1.23.0"
   },
   "devDependencies": {
     "@tooling/eslint-config": "workspace:*",
     "@tooling/tsconfig": "workspace:*",
-    "@tooling/vite-config": "workspace:*",
-    "@vue-flow/core": "workspace:*",
-    "vue-tsc": "^1.8.16"
+    "@vue-flow/core": "workspace:*"
   },
   "publishConfig": {
     "access": "public",
diff --git a/packages/background/src/index.ts b/packages/background/src/index.ts
index e7aaa4b7b..08fa7288d 100644
--- a/packages/background/src/index.ts
+++ b/packages/background/src/index.ts
@@ -1,2 +1 @@
-export { default as Background } from './Background.vue'
-export * from './types'
+export { Background, BackgroundVariant, BackgroundProps } from '@vue-flow/core'
diff --git a/packages/background/tsconfig.json b/packages/background/tsconfig.json
index f02b0a03e..4409e4bb0 100644
--- a/packages/background/tsconfig.json
+++ b/packages/background/tsconfig.json
@@ -3,10 +3,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "declarationDir": "./dist",
-    "types": [
-      "vite/client",
-      "vue/macros"
-    ]
+    "types": ["vite/client"]
   },
   "include": [
     "./src"

From 0ab63d7a17da58e4b3e59f388014371700c4823a Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Jul 2024 21:22:53 +0200
Subject: [PATCH 05/10] refactor(background): add deprecation notice

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/background/README.md    | 3 +++
 packages/background/src/index.ts | 5 +++++
 2 files changed, 8 insertions(+)

diff --git a/packages/background/README.md b/packages/background/README.md
index 177b637ce..701b45772 100644
--- a/packages/background/README.md
+++ b/packages/background/README.md
@@ -1,5 +1,8 @@
 # Vue Flow: Background Component
 
+> [!WARNING] DEPRECATED
+> This package has been deprecated. Please use the `<Background>` component export directly from the core pkg `import { Background } from '@vue-flow/core'`
+
 This is a background component for Vue Flow.
 It can be used to create a background in your canvas.
 
diff --git a/packages/background/src/index.ts b/packages/background/src/index.ts
index 08fa7288d..7ce99dea8 100644
--- a/packages/background/src/index.ts
+++ b/packages/background/src/index.ts
@@ -1 +1,6 @@
+/**
+ * Re-export of the Background component and types from the core pkg.
+ *
+ * @deprecated Please import these directly from `@vue-flow/core` instead and remove `@vue-flow/background` as a dependency.
+ */
 export { Background, BackgroundVariant, BackgroundProps } from '@vue-flow/core'

From 459e681092bba3c1f0252d16e6f4a0a7dcd7ca2d Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Jul 2024 21:24:39 +0200
Subject: [PATCH 06/10] chore: update lock file

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 pnpm-lock.yaml | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7c9cc7511..361b32f54 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -236,10 +236,6 @@ importers:
         version: 1.8.16(typescript@5.4.5)
 
   packages/background:
-    dependencies:
-      vue:
-        specifier: ^3.3.0
-        version: 3.3.4
     devDependencies:
       '@tooling/eslint-config':
         specifier: workspace:*
@@ -247,15 +243,9 @@ importers:
       '@tooling/tsconfig':
         specifier: workspace:*
         version: link:../../tooling/tsconfig
-      '@tooling/vite-config':
-        specifier: workspace:*
-        version: link:../../tooling/vite-config
       '@vue-flow/core':
         specifier: workspace:*
         version: link:../core
-      vue-tsc:
-        specifier: ^1.8.16
-        version: 1.8.16(typescript@5.4.5)
 
   packages/controls:
     dependencies:

From dda78c1380806822ee6d7600b239e5fc08a81981 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Jul 2024 21:43:58 +0200
Subject: [PATCH 07/10] chore(core,background): update default colors

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/background/src/index.ts                    | 2 +-
 packages/core/src/components/Background/patterns.ts | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/background/src/index.ts b/packages/background/src/index.ts
index 7ce99dea8..55cc73259 100644
--- a/packages/background/src/index.ts
+++ b/packages/background/src/index.ts
@@ -3,4 +3,4 @@
  *
  * @deprecated Please import these directly from `@vue-flow/core` instead and remove `@vue-flow/background` as a dependency.
  */
-export { Background, BackgroundVariant, BackgroundProps } from '@vue-flow/core'
+export { Background, type BackgroundVariant, type BackgroundProps } from '@vue-flow/core'
diff --git a/packages/core/src/components/Background/patterns.ts b/packages/core/src/components/Background/patterns.ts
index 0aeccfdf2..ffabf2c23 100644
--- a/packages/core/src/components/Background/patterns.ts
+++ b/packages/core/src/components/Background/patterns.ts
@@ -31,6 +31,6 @@ export const Patterns = {
 }
 
 export const DefaultBgColors: Record<BackgroundVariant, string> = {
-  lines: '#81818a',
-  dots: '#eee',
+  lines: '#eee',
+  dots: '#91919a',
 }

From bf1b7e538d3453bfc8d02c49431a4d556a4d3131 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Jul 2024 21:49:24 +0200
Subject: [PATCH 08/10] chore(docs,examples): cleanup

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 docs/components/home/flows/Additional.vue         | 2 +-
 docs/components/home/flows/Intro.vue              | 4 ++--
 docs/components/home/flows/Nested.vue             | 2 +-
 docs/components/home/flows/RGB.vue                | 9 ++-------
 docs/examples/basic/App.vue                       | 2 +-
 docs/examples/dnd/DropzoneBackground.vue          | 2 +-
 docs/src/guide/components/background.md           | 2 +-
 examples/nuxt3/components/Flow.vue                | 2 +-
 examples/vite/src/EasyConnect/EasyConnect.vue     | 2 +-
 examples/vite/src/Empty/EmptyExample.vue          | 4 ++--
 examples/vite/src/FloatingEdges/FloatingEdges.vue | 4 ++--
 examples/vite/src/Overview/Overview.vue           | 2 +-
 12 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/docs/components/home/flows/Additional.vue b/docs/components/home/flows/Additional.vue
index b0a1334b6..4bca121f0 100644
--- a/docs/components/home/flows/Additional.vue
+++ b/docs/components/home/flows/Additional.vue
@@ -98,7 +98,7 @@ onPaneReady((i) => emit('pane', i))
     <VueFlow>
       <Controls :show-interactive="false" />
       <MiniMap mask-color="rgba(16, 185, 129, 0.5)" class="transform scale-60 origin-bottom-right opacity-75" />
-      <Background variant="lines" pattern-color="#aaa" :gap="46" />
+      <Background variant="lines" color="#aaa" :gap="46" />
     </VueFlow>
   </div>
 
diff --git a/docs/components/home/flows/Intro.vue b/docs/components/home/flows/Intro.vue
index 538af3bb0..e06ec763c 100644
--- a/docs/components/home/flows/Intro.vue
+++ b/docs/components/home/flows/Intro.vue
@@ -190,8 +190,8 @@ function scrollTo() {
 
 <template>
   <VueFlow ref="el" :style="{ opacity: !!currentBreakpoint ? 1 : 0 }">
-    <Background id="dots" pattern-color="#aaa" :size="0.75" :gap="25" />
-    <Background id="lines" variant="lines" :pattern-color="isDark ? '#fff' : '#000'" :size="1" :gap="100" />
+    <Background id="dots" color="#aaa" :size="0.75" :gap="25" />
+    <Background id="lines" variant="lines" :color="isDark ? '#fff' : '#000'" :size="1" :gap="100" />
 
     <template #node-box="props">
       <template v-if="props.id === 'intro'">
diff --git a/docs/components/home/flows/Nested.vue b/docs/components/home/flows/Nested.vue
index 7d614ee03..ec29656cd 100644
--- a/docs/components/home/flows/Nested.vue
+++ b/docs/components/home/flows/Nested.vue
@@ -76,7 +76,7 @@ onPaneReady((i) => emit('pane', i))
   >
     <VueFlow class="nested">
       <Controls class="md:(!left-auto !right-[10px])" />
-      <Background pattern-color="#aaa" class="!bg-gray-800" :gap="18" />
+      <Background color="#aaa" class="!bg-gray-800" :gap="18" />
     </VueFlow>
   </div>
 </template>
diff --git a/docs/components/home/flows/RGB.vue b/docs/components/home/flows/RGB.vue
index d411c851b..81dba8ef6 100644
--- a/docs/components/home/flows/RGB.vue
+++ b/docs/components/home/flows/RGB.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 import { breakpointsTailwind } from '@vueuse/core'
-import { Background, BackgroundVariant } from '@vue-flow/background'
+import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 import type { MiniMapNodeFunc } from '@vue-flow/minimap'
@@ -96,12 +96,7 @@ const nodeColor: MiniMapNodeFunc = (node) => {
       </template>
       <Controls class="hidden md:block" />
 
-      <Background
-        :variant="BackgroundVariant.Lines"
-        :pattern-color="`rgb(${color.red}, ${color.green}, ${color.blue})`"
-        :gap="48"
-        :size="1"
-      />
+      <Background variant="lines" :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>
diff --git a/docs/examples/basic/App.vue b/docs/examples/basic/App.vue
index afb5322e4..3f7ae56d6 100644
--- a/docs/examples/basic/App.vue
+++ b/docs/examples/basic/App.vue
@@ -102,7 +102,7 @@ function toggleDarkMode() {
     :min-zoom="0.2"
     :max-zoom="4"
   >
-    <Background pattern-color="#aaa" :gap="16" />
+    <Background color="#aaa" :gap="16" />
 
     <MiniMap />
 
diff --git a/docs/examples/dnd/DropzoneBackground.vue b/docs/examples/dnd/DropzoneBackground.vue
index b78be6a4c..78eb9f140 100644
--- a/docs/examples/dnd/DropzoneBackground.vue
+++ b/docs/examples/dnd/DropzoneBackground.vue
@@ -4,7 +4,7 @@ import { Background } from '@vue-flow/background'
 
 <template>
   <div class="dropzone-background">
-    <Background :size="2" :gap="20" pattern-color="#BDBDBD" />
+    <Background :size="2" :gap="20" color="#BDBDBD" />
 
     <div class="overlay">
       <slot />
diff --git a/docs/src/guide/components/background.md b/docs/src/guide/components/background.md
index e3e1242bb..c2769b8de 100644
--- a/docs/src/guide/components/background.md
+++ b/docs/src/guide/components/background.md
@@ -32,7 +32,7 @@ import { Background } from '@vue-flow/background'
 
 | Name         | Definition                            | Type                                                   | Optional | Default |
 |--------------|---------------------------------------|--------------------------------------------------------|----------|---------|
-| variant      | Pattern variant                       | [BackgroundVariant](/typedocs/enums/BackgroundVariant) | true     | dots    |
+| variant      | Pattern variant                       | [BackgroundVariant](/typedocs/types/BackgroundVariant) | true     | dots    |
 | gap          | Pattern gap                           | number                                                 | true     | 10      |
 | size         | Pattern size                          | number                                                 | true     | 0.4     |
 | patternColor | Pattern color                         | string                                                 | true     | #81818a |
diff --git a/examples/nuxt3/components/Flow.vue b/examples/nuxt3/components/Flow.vue
index 320229360..06ce05529 100644
--- a/examples/nuxt3/components/Flow.vue
+++ b/examples/nuxt3/components/Flow.vue
@@ -99,7 +99,7 @@ function toggleDarkMode() {
     :min-zoom="0.2"
     :max-zoom="4"
   >
-    <Background pattern-color="#aaa" :gap="16" />
+    <Background :gap="16" />
 
     <MiniMap />
 
diff --git a/examples/vite/src/EasyConnect/EasyConnect.vue b/examples/vite/src/EasyConnect/EasyConnect.vue
index ce63463a6..ccce6472a 100644
--- a/examples/vite/src/EasyConnect/EasyConnect.vue
+++ b/examples/vite/src/EasyConnect/EasyConnect.vue
@@ -57,7 +57,7 @@ onConnect(addEdges)
       :min-zoom="0.2"
       :max-zoom="4"
     >
-      <Background pattern-color="#aaa" :gap="8" />
+      <Background :gap="8" />
 
       <MiniMap />
 
diff --git a/examples/vite/src/Empty/EmptyExample.vue b/examples/vite/src/Empty/EmptyExample.vue
index 31d9f1b20..791b02f87 100644
--- a/examples/vite/src/Empty/EmptyExample.vue
+++ b/examples/vite/src/Empty/EmptyExample.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { VueFlow, useVueFlow } from '@vue-flow/core'
 
-import { Background, BackgroundVariant } from '@vue-flow/background'
+import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
@@ -28,7 +28,7 @@ function addRandomNode() {
   <VueFlow>
     <MiniMap />
     <Controls />
-    <Background :variant="BackgroundVariant.Lines" />
+    <Background variant="lines" />
 
     <button type="button" :style="{ position: 'absolute', left: '10px', top: '10px', zIndex: 4 }" @click="addRandomNode">
       add node
diff --git a/examples/vite/src/FloatingEdges/FloatingEdges.vue b/examples/vite/src/FloatingEdges/FloatingEdges.vue
index c84100628..8488ea756 100644
--- a/examples/vite/src/FloatingEdges/FloatingEdges.vue
+++ b/examples/vite/src/FloatingEdges/FloatingEdges.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { MarkerType, VueFlow, useVueFlow } from '@vue-flow/core'
-import { Background, BackgroundVariant } from '@vue-flow/background'
+import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 
@@ -18,7 +18,7 @@ onConnect((params) => addEdges({ ...params, type: 'floating', markerEnd: MarkerT
 <template>
   <div class="floatingedges">
     <VueFlow fit-view-on-init>
-      <Background :variant="BackgroundVariant.Lines" :gap="24" />
+      <Background variant="lines" :gap="24" />
 
       <MiniMap />
 
diff --git a/examples/vite/src/Overview/Overview.vue b/examples/vite/src/Overview/Overview.vue
index 46ad71276..42047186f 100644
--- a/examples/vite/src/Overview/Overview.vue
+++ b/examples/vite/src/Overview/Overview.vue
@@ -174,6 +174,6 @@ const elements = ref<Elements>(initialElements)
   >
     <MiniMap :node-stroke-color="nodeStrokeColor" :node-color="nodeColor" :node-border-radius="2" />
     <Controls />
-    <Background color="#aaa" :gap="20" />
+    <Background variant="lines" />
   </VueFlow>
 </template>

From 36d8a7d21b89952854e78bce2cece68ded9b9c37 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Jul 2024 22:26:53 +0200
Subject: [PATCH 09/10] chore(background): update README.md

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/background/README.md | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/packages/background/README.md b/packages/background/README.md
index 701b45772..1dd2a9181 100644
--- a/packages/background/README.md
+++ b/packages/background/README.md
@@ -1,7 +1,20 @@
 # Vue Flow: Background Component
 
-> [!WARNING] DEPRECATED
-> This package has been deprecated. Please use the `<Background>` component export directly from the core pkg `import { Background } from '@vue-flow/core'`
+> [!WARNING]
+> This package has been deprecated. 
+> Please import the `<Background>` component from `@vue-flow/core`
+> ```vue
+> <script setup>
+> import { VueFlow, Background } from '@vue-flow/core'
+> // ...
+> </script>
+> 
+> <template>
+>   <VueFlow :nodes="nodes" :edges="edges">
+>     <Background />
+>   </VueFlow>
+> </template>
+> ```
 
 This is a background component for Vue Flow.
 It can be used to create a background in your canvas.

From 145e7f4c788d0932693d5fe35ccd94320ba1b203 Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Mon, 15 Jul 2024 22:51:25 +0200
Subject: [PATCH 10/10] chore(background): update package.json

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
---
 packages/background/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/background/package.json b/packages/background/package.json
index 0cfa1a7f0..04c7a85c6 100644
--- a/packages/background/package.json
+++ b/packages/background/package.json
@@ -56,7 +56,7 @@
     "test": "exit 0"
   },
   "peerDependencies": {
-    "@vue-flow/core": "^1.23.0"
+    "@vue-flow/core": "^2.0.0"
   },
   "devDependencies": {
     "@tooling/eslint-config": "workspace:*",