@mhamz.01/easyflow-texteditor 0.1.76 → 0.1.78

package/dist/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 @import "https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-ui-primitive/tooltip/tooltip.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-ui-primitive/tooltip/tooltip.css */
 .tiptap-tooltip {
   --tt-tooltip-bg: rgba(255, 255, 255, 1);
   --tt-tooltip-text: rgba(83, 86, 90, 1);
@@ -36,7 +36,7 @@
   color: var(--tt-kbd);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button-colors.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button-colors.css */
 .tiptap-button {
   --tt-button-default-bg-color: rgba(231, 231, 243, 0.07);
   --tt-button-hover-bg-color: rgba(45, 45, 47, 1);
@@ -143,7 +143,7 @@
   --tt-button-disabled-dropdown-arrows-color: rgba(244, 244, 255, 0.37);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button-group.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button-group.css */
 .tiptap-button-group {
   position: relative;
   display: flex;
@@ -164,7 +164,7 @@
   align-items: center;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-ui-primitive/button/button.css */
 .tiptap-button {
   font-size: 0.875rem;
   font-weight: 500;
@@ -427,7 +427,7 @@
   color: var(--tt-button-disabled-icon-color);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-ui-primitive/separator/separator.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-ui-primitive/separator/separator.css */
 .tiptap-separator {
   --tt-link-border-color: var(--tt-gray-light-a-200);
 }
@@ -448,7 +448,7 @@
   width: 1px;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-ui-primitive/toolbar/toolbar.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-ui-primitive/toolbar/toolbar.css */
 .easyflow-editor {
   --tt-toolbar-height: 2.75rem;
   --tt-safe-area-bottom: env(safe-area-inset-bottom, 0px);
@@ -556,7 +556,7 @@
   }
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-node/image-upload-node/image-upload-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-node/image-upload-node/image-upload-node.css */
 .tiptap-image-upload {
   --tiptap-image-upload-active: rgba(122, 82, 255, 1);
   --tiptap-image-upload-progress-bg: rgba(43, 25, 102, 1);
@@ -747,7 +747,7 @@
   }
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-node/blockquote-node/blockquote-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-node/blockquote-node/blockquote-node.css */
 .tiptap.ProseMirror {
   --blockquote-bg-color: rgba(245, 245, 245, 1);
 }
@@ -774,7 +774,7 @@
   border-radius: 0;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-node/code-block-node/code-block-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-node/code-block-node/code-block-node.css */
 .tiptap.ProseMirror {
   --tt-inline-code-bg-color: rgba(231, 231, 243, 0.07);
   --tt-inline-code-text-color: rgba(251, 251, 254, 0.75);
@@ -811,7 +811,7 @@
   color: inherit;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-node/horizontal-rule-node/horizontal-rule-node.css */
 .tiptap.ProseMirror {
   --horizontal-rule-color: rgba(238, 238, 246, 0.11);
 }
@@ -827,7 +827,7 @@
   padding-bottom: 0.75rem;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-node/list-node/list-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-node/list-node/list-node.css */
 .tiptap.ProseMirror {
   --tt-checklist-bg-color: rgba(231, 231, 243, 0.07);
   --tt-checklist-bg-active-color: rgba(255, 255, 255, 0.96);
@@ -946,7 +946,7 @@
   min-width: 0;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-node/image-node/image-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-node/image-node/image-node.css */
 .tiptap.ProseMirror img {
   max-width: 100%;
   height: auto;
@@ -971,7 +971,7 @@
   margin: 0;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-node/heading-node/heading-node.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-node/heading-node/heading-node.css */
 .tiptap.ProseMirror h1,
 .tiptap.ProseMirror h2,
 .tiptap.ProseMirror h3,
@@ -1011,7 +1011,7 @@
   margin-top: 2em;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge-colors.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge-colors.css */
 .tiptap-badge {
   --tt-badge-border-color: var(--tt-gray-light-a-200);
   --tt-badge-border-color-subdued: var(--tt-gray-light-a-200);
@@ -1209,7 +1209,7 @@
   --tt-badge-icon-color-emphasized: var( --tt-brand-color-900 );
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge-group.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge-group.css */
 .tiptap-badge-group {
   align-items: center;
   display: flex;
@@ -1223,7 +1223,7 @@
   flex-direction: row;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-ui-primitive/badge/badge.css */
 .tiptap-badge {
   font-size: 0.625rem;
   font-weight: 700;
@@ -1301,7 +1301,7 @@
   color: var(--tt-badge-icon-color-subdued);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-ui-primitive/dropdown-menu/dropdown-menu.css */
 .tiptap-dropdown-menu {
   --tt-dropdown-menu-bg-color: var(--white);
   --tt-dropdown-menu-border-color: var(--tt-gray-light-a-100);
@@ -1348,7 +1348,7 @@
   animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-ui-primitive/card/card.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-ui-primitive/card/card.css */
 .easyflow-editor {
   --tiptap-card-bg-color: var(--white);
   --tiptap-card-border-color: var(--tt-gray-light-a-100);
@@ -1421,7 +1421,7 @@
   color: var(--tiptap-card-group-label-color);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-ui-primitive/popover/popover.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-ui-primitive/popover/popover.css */
 .tiptap-popover {
   --tt-popover-bg-color: var(--white);
   --tt-popover-border-color: var(--tt-gray-light-a-100);
@@ -1468,7 +1468,7 @@
   animation: slideFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-ui/color-highlight-button/color-highlight-button.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-ui/color-highlight-button/color-highlight-button.css */
 .tiptap-button-highlight {
   position: relative;
   width: 1.25rem;
@@ -1502,7 +1502,7 @@
   filter: brightness(180%);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-ui-primitive/input/input.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-ui-primitive/input/input.css */
 .easyflow-editor {
   --tiptap-input-placeholder: var(--tt-gray-light-a-400);
 }
@@ -1542,7 +1542,7 @@
   align-items: stretch;
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/components/tiptap-templates/simple/simple-editor.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/components/tiptap-templates/simple/simple-editor.css */
 body {
   --tt-toolbar-height: 44px;
   --tt-theme-text: #fff;
@@ -1686,7 +1686,7 @@ table .column-resize-handle {
   }
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/styles/index.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/styles/index.css */
 .tiptap.ProseMirror {
   --blockquote-bg-color: rgba(245, 245, 245, 1);
 }
@@ -3386,7 +3386,7 @@ table .column-resize-handle {
   color: var(--tt-kbd);
 }
 
-/* C:/Users/hamza/AppData/Local/Temp/tmp-28144-3JyjkQIM1a44/easyflow-texteditor/src/styles/_variables.css */
+/* C:/Users/hamza/AppData/Local/Temp/tmp-4736-nOApz31xAp1c/easyflow-texteditor/src/styles/_variables.css */
 easyflow-editor {
   overflow-wrap: break-word;
   text-size-adjust: none;
@@ -3542,6 +3542,23 @@ easyflow-editor .easyflow-editor *::after {
 @layer theme {
   :root,
   :host {
+    --font-sans:
+      ui-sans-serif,
+      system-ui,
+      sans-serif,
+      "Apple Color Emoji",
+      "Segoe UI Emoji",
+      "Segoe UI Symbol",
+      "Noto Color Emoji";
+    --font-mono:
+      ui-monospace,
+      SFMono-Regular,
+      Menlo,
+      Monaco,
+      Consolas,
+      "Liberation Mono",
+      "Courier New",
+      monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-black: #000;
@@ -3565,9 +3582,8 @@ easyflow-editor .easyflow-editor *::after {
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    --default-font-family: var(--font-geist-sans);
-    --default-mono-font-family: var(--font-geist-mono);
-    --font-red-hat-display: var(--font-red-hat-display);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
   }
 }
 @layer base {
@@ -3810,6 +3826,9 @@ easyflow-editor .easyflow-editor *::after {
   .top-\[50\%\] {
     top: 50%;
   }
+  .top-full {
+    top: 100%;
+  }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
@@ -3882,6 +3901,9 @@ easyflow-editor .easyflow-editor *::after {
   .my-1 {
     margin-block: calc(var(--spacing) * 1);
   }
+  .mt-1 {
+    margin-top: calc(var(--spacing) * 1);
+  }
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
@@ -3891,6 +3913,9 @@ easyflow-editor .easyflow-editor *::after {
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
+  .mb-4 {
+    margin-bottom: calc(var(--spacing) * 4);
+  }
   .ml-2 {
     margin-left: calc(var(--spacing) * 2);
   }
@@ -3999,6 +4024,9 @@ easyflow-editor .easyflow-editor *::after {
   .h-px {
     height: 1px;
   }
+  .h-screen {
+    height: 100vh;
+  }
   .h-svh {
     height: 100svh;
   }
@@ -4041,6 +4069,9 @@ easyflow-editor .easyflow-editor *::after {
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
   .w-72 {
     width: calc(var(--spacing) * 72);
   }
@@ -4155,9 +4186,6 @@ easyflow-editor .easyflow-editor *::after {
   .scroll-py-1 {
     scroll-padding-block: calc(var(--spacing) * 1);
   }
-  .list-none {
-    list-style-type: none;
-  }
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
@@ -4290,10 +4318,10 @@ easyflow-editor .easyflow-editor *::after {
     }
   }
   .border-input {
-    border-color: var(--input);
+    border-color: var(--ef-input);
   }
   .border-sidebar-border {
-    border-color: var(--sidebar-border);
+    border-color: var(--ef-sidebar-border);
   }
   .border-t-transparent {
     border-top-color: transparent;
@@ -4305,10 +4333,10 @@ easyflow-editor .easyflow-editor *::after {
     background-color: #171717;
   }
   .bg-accent {
-    background-color: var(--accent);
+    background-color: var(--ef-accent);
   }
   .bg-background {
-    background-color: var(--background);
+    background-color: var(--ef-background);
   }
   .bg-black\/50 {
     background-color: color-mix(in srgb, #000 50%, transparent);
@@ -4317,28 +4345,28 @@ easyflow-editor .easyflow-editor *::after {
     }
   }
   .bg-border {
-    background-color: var(--border);
+    background-color: var(--ef-border);
   }
   .bg-destructive {
-    background-color: var(--destructive);
+    background-color: var(--ef-destructive);
   }
   .bg-foreground {
-    background-color: var(--foreground);
+    background-color: var(--ef-foreground);
   }
   .bg-popover {
-    background-color: var(--popover);
+    background-color: var(--ef-popover);
   }
   .bg-primary {
-    background-color: var(--primary);
+    background-color: var(--ef-primary);
   }
   .bg-secondary {
-    background-color: var(--secondary);
+    background-color: var(--ef-secondary);
   }
   .bg-sidebar {
-    background-color: var(--sidebar);
+    background-color: var(--ef-sidebar);
   }
   .bg-sidebar-border {
-    background-color: var(--sidebar-border);
+    background-color: var(--ef-sidebar-border);
   }
   .bg-transparent {
     background-color: transparent;
@@ -4347,7 +4375,7 @@ easyflow-editor .easyflow-editor *::after {
     fill: currentcolor;
   }
   .fill-foreground {
-    fill: var(--foreground);
+    fill: var(--ef-foreground);
   }
   .p-0 {
     padding: calc(var(--spacing) * 0);
@@ -4422,7 +4450,7 @@ easyflow-editor .easyflow-editor *::after {
     text-align: left;
   }
   .font-sans {
-    font-family: var(--font-geist-sans);
+    font-family: var(--font-sans);
   }
   .text-base {
     font-size: var(--text-base);
@@ -4475,36 +4503,36 @@ easyflow-editor .easyflow-editor *::after {
     color: #d5d5d5;
   }
   .text-background {
-    color: var(--background);
+    color: var(--ef-background);
   }
   .text-foreground {
-    color: var(--foreground);
+    color: var(--ef-foreground);
   }
   .text-muted-foreground {
-    color: var(--muted-foreground);
+    color: var(--ef-muted-foreground);
   }
   .text-popover-foreground {
-    color: var(--popover-foreground);
+    color: var(--ef-popover-foreground);
   }
   .text-primary {
-    color: var(--primary);
+    color: var(--ef-primary);
   }
   .text-primary-foreground {
-    color: var(--primary-foreground);
+    color: var(--ef-primary-foreground);
   }
   .text-red-500 {
     color: var(--color-red-500);
   }
   .text-secondary-foreground {
-    color: var(--secondary-foreground);
+    color: var(--ef-secondary-foreground);
   }
   .text-sidebar-foreground {
-    color: var(--sidebar-foreground);
+    color: var(--ef-sidebar-foreground);
   }
   .text-sidebar-foreground\/70 {
-    color: var(--sidebar-foreground);
+    color: var(--ef-sidebar-foreground);
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
+      color: color-mix(in oklab, var(--ef-sidebar-foreground) 70%, transparent);
     }
   }
   .text-white {
@@ -4587,10 +4615,10 @@ easyflow-editor .easyflow-editor *::after {
       var(--tw-shadow);
   }
   .ring-sidebar-ring {
-    --tw-ring-color: var(--sidebar-ring);
+    --tw-ring-color: var(--ef-sidebar-ring);
   }
   .ring-offset-background {
-    --tw-ring-offset-color: var(--background);
+    --tw-ring-offset-color: var(--ef-background);
   }
   .outline-hidden {
     --tw-outline-style: none;
@@ -4709,10 +4737,6 @@ easyflow-editor .easyflow-editor *::after {
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
-  .duration-300 {
-    --tw-duration: 300ms;
-    transition-duration: 300ms;
-  }
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -4892,7 +4916,7 @@ easyflow-editor .easyflow-editor *::after {
   }
   .group-data-\[variant\=floating\]\:border-sidebar-border {
     &:is(:where(.group)[data-variant=floating] *) {
-      border-color: var(--sidebar-border);
+      border-color: var(--ef-sidebar-border);
     }
   }
   .group-data-\[variant\=floating\]\:shadow-sm {
@@ -4909,7 +4933,7 @@ easyflow-editor .easyflow-editor *::after {
   .peer-hover\/menu-button\:text-sidebar-accent-foreground {
     &:is(:where(.peer\/menu-button):hover ~ *) {
       @media (hover: hover) {
-        color: var(--sidebar-accent-foreground);
+        color: var(--ef-sidebar-accent-foreground);
       }
     }
   }
@@ -4925,7 +4949,7 @@ easyflow-editor .easyflow-editor *::after {
   }
   .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground {
     &:is(:where(.peer\/menu-button)[data-active=true] ~ *) {
-      color: var(--sidebar-accent-foreground);
+      color: var(--ef-sidebar-accent-foreground);
     }
   }
   .peer-data-\[size\=default\]\/menu-button\:top-1\.5 {
@@ -4945,18 +4969,18 @@ easyflow-editor .easyflow-editor *::after {
   }
   .selection\:bg-primary {
     & *::selection {
-      background-color: var(--primary);
+      background-color: var(--ef-primary);
     }
     &::selection {
-      background-color: var(--primary);
+      background-color: var(--ef-primary);
     }
   }
   .selection\:text-primary-foreground {
     & *::selection {
-      color: var(--primary-foreground);
+      color: var(--ef-primary-foreground);
     }
     &::selection {
-      color: var(--primary-foreground);
+      color: var(--ef-primary-foreground);
     }
   }
   .file\:inline-flex {
@@ -4994,12 +5018,12 @@ easyflow-editor .easyflow-editor *::after {
   }
   .file\:text-foreground {
     &::file-selector-button {
-      color: var(--foreground);
+      color: var(--ef-foreground);
     }
   }
   .placeholder\:text-muted-foreground {
     &::placeholder {
-      color: var(--muted-foreground);
+      color: var(--ef-muted-foreground);
     }
   }
   .after\:absolute {
@@ -5070,16 +5094,16 @@ easyflow-editor .easyflow-editor *::after {
   .hover\:bg-accent {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--accent);
+        background-color: var(--ef-accent);
       }
     }
   }
   .hover\:bg-accent\/50 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--accent);
+        background-color: var(--ef-accent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+          background-color: color-mix(in oklab, var(--ef-accent) 50%, transparent);
         }
       }
     }
@@ -5087,9 +5111,9 @@ easyflow-editor .easyflow-editor *::after {
   .hover\:bg-accent\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--accent);
+        background-color: var(--ef-accent);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--accent) 80%, transparent);
+          background-color: color-mix(in oklab, var(--ef-accent) 80%, transparent);
         }
       }
     }
@@ -5097,9 +5121,9 @@ easyflow-editor .easyflow-editor *::after {
   .hover\:bg-destructive\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--destructive);
+        background-color: var(--ef-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+          background-color: color-mix(in oklab, var(--ef-destructive) 90%, transparent);
         }
       }
     }
@@ -5107,9 +5131,9 @@ easyflow-editor .easyflow-editor *::after {
   .hover\:bg-primary\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--primary);
+        background-color: var(--ef-primary);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--primary) 90%, transparent);
+          background-color: color-mix(in oklab, var(--ef-primary) 90%, transparent);
         }
       }
     }
@@ -5117,9 +5141,9 @@ easyflow-editor .easyflow-editor *::after {
   .hover\:bg-secondary\/80 {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--secondary);
+        background-color: var(--ef-secondary);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--secondary) 80%, transparent);
+          background-color: color-mix(in oklab, var(--ef-secondary) 80%, transparent);
         }
       }
     }
@@ -5127,7 +5151,7 @@ easyflow-editor .easyflow-editor *::after {
   .hover\:bg-sidebar-accent {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--sidebar-accent);
+        background-color: var(--ef-sidebar-accent);
       }
     }
   }
@@ -5141,14 +5165,28 @@ easyflow-editor .easyflow-editor *::after {
   .hover\:text-accent-foreground {
     &:hover {
       @media (hover: hover) {
-        color: var(--accent-foreground);
+        color: var(--ef-accent-foreground);
+      }
+    }
+  }
+  .hover\:text-foreground {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--ef-foreground);
+      }
+    }
+  }
+  .hover\:text-red-600 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-red-600);
       }
     }
   }
   .hover\:text-sidebar-accent-foreground {
     &:hover {
       @media (hover: hover) {
-        color: var(--sidebar-accent-foreground);
+        color: var(--ef-sidebar-accent-foreground);
       }
     }
   }
@@ -5190,7 +5228,7 @@ easyflow-editor .easyflow-editor *::after {
     &:hover {
       @media (hover: hover) {
         &:is(:where(.group)[data-collapsible=offcanvas] *) {
-          background-color: var(--sidebar);
+          background-color: var(--ef-sidebar);
         }
       }
     }
@@ -5200,24 +5238,19 @@ easyflow-editor .easyflow-editor *::after {
       @media (hover: hover) {
         &::after {
           content: var(--tw-content);
-          background-color: var(--sidebar-border);
+          background-color: var(--ef-sidebar-border);
         }
       }
     }
   }
   .focus\:bg-accent {
     &:focus {
-      background-color: var(--accent);
+      background-color: var(--ef-accent);
     }
   }
   .focus\:text-accent-foreground {
     &:focus {
-      color: var(--accent-foreground);
-    }
-  }
-  .focus\:text-red-600 {
-    &:focus {
-      color: var(--color-red-600);
+      color: var(--ef-accent-foreground);
     }
   }
   .focus\:ring-2 {
@@ -5233,7 +5266,7 @@ easyflow-editor .easyflow-editor *::after {
   }
   .focus\:ring-ring {
     &:focus {
-      --tw-ring-color: var(--ring);
+      --tw-ring-color: var(--ef-ring);
     }
   }
   .focus\:ring-offset-2 {
@@ -5252,9 +5285,15 @@ easyflow-editor .easyflow-editor *::after {
       }
     }
   }
+  .focus\:outline-none {
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
   .focus-visible\:border-ring {
     &:focus-visible {
-      border-color: var(--ring);
+      border-color: var(--ef-ring);
     }
   }
   .focus-visible\:ring-2 {
@@ -5281,17 +5320,17 @@ easyflow-editor .easyflow-editor *::after {
   }
   .focus-visible\:ring-destructive\/20 {
     &:focus-visible {
-      --tw-ring-color: var(--destructive);
+      --tw-ring-color: var(--ef-destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ef-destructive) 20%, transparent);
       }
     }
   }
   .focus-visible\:ring-ring\/50 {
     &:focus-visible {
-      --tw-ring-color: var(--ring);
+      --tw-ring-color: var(--ef-ring);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ef-ring) 50%, transparent);
       }
     }
   }
@@ -5303,12 +5342,12 @@ easyflow-editor .easyflow-editor *::after {
   }
   .active\:bg-sidebar-accent {
     &:active {
-      background-color: var(--sidebar-accent);
+      background-color: var(--ef-sidebar-accent);
     }
   }
   .active\:text-sidebar-accent-foreground {
     &:active {
-      color: var(--sidebar-accent-foreground);
+      color: var(--ef-sidebar-accent-foreground);
     }
   }
   .disabled\:pointer-events-none {
@@ -5338,7 +5377,7 @@ easyflow-editor .easyflow-editor *::after {
   }
   .has-data-\[variant\=inset\]\:bg-sidebar {
     &:has(*[data-variant=inset]) {
-      background-color: var(--sidebar);
+      background-color: var(--ef-sidebar);
     }
   }
   .has-\[\>svg\]\:px-2\.5 {
@@ -5368,20 +5407,20 @@ easyflow-editor .easyflow-editor *::after {
   }
   .aria-invalid\:border-destructive {
     &[aria-invalid=true] {
-      border-color: var(--destructive);
+      border-color: var(--ef-destructive);
     }
   }
   .aria-invalid\:ring-destructive\/20 {
     &[aria-invalid=true] {
-      --tw-ring-color: var(--destructive);
+      --tw-ring-color: var(--ef-destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--ef-destructive) 20%, transparent);
       }
     }
   }
   .data-\[active\=true\]\:bg-sidebar-accent {
     &[data-active=true] {
-      background-color: var(--sidebar-accent);
+      background-color: var(--ef-sidebar-accent);
     }
   }
   .data-\[active\=true\]\:font-medium {
@@ -5392,7 +5431,7 @@ easyflow-editor .easyflow-editor *::after {
   }
   .data-\[active\=true\]\:text-sidebar-accent-foreground {
     &[data-active=true] {
-      color: var(--sidebar-accent-foreground);
+      color: var(--ef-sidebar-accent-foreground);
     }
   }
   .data-\[disabled\]\:pointer-events-none {
@@ -5442,12 +5481,12 @@ easyflow-editor .easyflow-editor *::after {
   }
   .data-\[selected\=true\]\:bg-accent {
     &[data-selected=true] {
-      background-color: var(--accent);
+      background-color: var(--ef-accent);
     }
   }
   .data-\[selected\=true\]\:text-accent-foreground {
     &[data-selected=true] {
-      color: var(--accent-foreground);
+      color: var(--ef-accent-foreground);
     }
   }
   .data-\[side\=bottom\]\:slide-in-from-top-2 {
@@ -5527,22 +5566,22 @@ easyflow-editor .easyflow-editor *::after {
   }
   .data-\[state\=open\]\:bg-accent {
     &[data-state=open] {
-      background-color: var(--accent);
+      background-color: var(--ef-accent);
     }
   }
   .data-\[state\=open\]\:bg-secondary {
     &[data-state=open] {
-      background-color: var(--secondary);
+      background-color: var(--ef-secondary);
     }
   }
   .data-\[state\=open\]\:text-accent-foreground {
     &[data-state=open] {
-      color: var(--accent-foreground);
+      color: var(--ef-accent-foreground);
     }
   }
   .data-\[state\=open\]\:text-muted-foreground {
     &[data-state=open] {
-      color: var(--muted-foreground);
+      color: var(--ef-muted-foreground);
     }
   }
   .data-\[state\=open\]\:opacity-100 {
@@ -5592,7 +5631,7 @@ easyflow-editor .easyflow-editor *::after {
     &[data-state=open] {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--sidebar-accent);
+          background-color: var(--ef-sidebar-accent);
         }
       }
     }
@@ -5601,22 +5640,22 @@ easyflow-editor .easyflow-editor *::after {
     &[data-state=open] {
       &:hover {
         @media (hover: hover) {
-          color: var(--sidebar-accent-foreground);
+          color: var(--ef-sidebar-accent-foreground);
         }
       }
     }
   }
   .data-\[variant\=destructive\]\:text-destructive {
     &[data-variant=destructive] {
-      color: var(--destructive);
+      color: var(--ef-destructive);
     }
   }
   .data-\[variant\=destructive\]\:focus\:bg-destructive\/10 {
     &[data-variant=destructive] {
       &:focus {
-        background-color: var(--destructive);
+        background-color: var(--ef-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--destructive) 10%, transparent);
+          background-color: color-mix(in oklab, var(--ef-destructive) 10%, transparent);
         }
       }
     }
@@ -5624,7 +5663,7 @@ easyflow-editor .easyflow-editor *::after {
   .data-\[variant\=destructive\]\:focus\:text-destructive {
     &[data-variant=destructive] {
       &:focus {
-        color: var(--destructive);
+        color: var(--ef-destructive);
       }
     }
   }
@@ -5731,87 +5770,87 @@ easyflow-editor .easyflow-editor *::after {
     }
   }
   .dark\:border-\[\#a3a3a8\] {
-    &:is(.dark *) {
+    @media (prefers-color-scheme: dark) {
       border-color: #a3a3a8;
     }
   }
   .dark\:border-input {
-    &:is(.dark *) {
-      border-color: var(--input);
+    @media (prefers-color-scheme: dark) {
+      border-color: var(--ef-input);
     }
   }
   .dark\:bg-destructive\/60 {
-    &:is(.dark *) {
-      background-color: var(--destructive);
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--ef-destructive);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
+        background-color: color-mix(in oklab, var(--ef-destructive) 60%, transparent);
       }
     }
   }
   .dark\:bg-input\/30 {
-    &:is(.dark *) {
-      background-color: var(--input);
+    @media (prefers-color-scheme: dark) {
+      background-color: var(--ef-input);
       @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--input) 30%, transparent);
+        background-color: color-mix(in oklab, var(--ef-input) 30%, transparent);
       }
     }
   }
   .dark\:bg-transparent {
-    &:is(.dark *) {
+    @media (prefers-color-scheme: dark) {
       background-color: transparent;
     }
   }
   .dark\:hover\:bg-accent\/50 {
-    &:is(.dark *) {
+    @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--accent);
+          background-color: var(--ef-accent);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+            background-color: color-mix(in oklab, var(--ef-accent) 50%, transparent);
           }
         }
       }
     }
   }
   .dark\:hover\:bg-input\/50 {
-    &:is(.dark *) {
+    @media (prefers-color-scheme: dark) {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--input);
+          background-color: var(--ef-input);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--input) 50%, transparent);
+            background-color: color-mix(in oklab, var(--ef-input) 50%, transparent);
           }
         }
       }
     }
   }
   .dark\:focus-visible\:ring-destructive\/40 {
-    &:is(.dark *) {
+    @media (prefers-color-scheme: dark) {
       &:focus-visible {
-        --tw-ring-color: var(--destructive);
+        --tw-ring-color: var(--ef-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--ef-destructive) 40%, transparent);
         }
       }
     }
   }
   .dark\:aria-invalid\:ring-destructive\/40 {
-    &:is(.dark *) {
+    @media (prefers-color-scheme: dark) {
       &[aria-invalid=true] {
-        --tw-ring-color: var(--destructive);
+        --tw-ring-color: var(--ef-destructive);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--ef-destructive) 40%, transparent);
         }
       }
     }
   }
   .dark\:data-\[variant\=destructive\]\:focus\:bg-destructive\/20 {
-    &:is(.dark *) {
+    @media (prefers-color-scheme: dark) {
       &[data-variant=destructive] {
         &:focus {
-          background-color: var(--destructive);
+          background-color: var(--ef-destructive);
           @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--destructive) 20%, transparent);
+            background-color: color-mix(in oklab, var(--ef-destructive) 20%, transparent);
           }
         }
       }
@@ -5841,7 +5880,7 @@ easyflow-editor .easyflow-editor *::after {
   }
   .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground {
     & [cmdk-group-heading] {
-      color: var(--muted-foreground);
+      color: var(--ef-muted-foreground);
     }
   }
   .\[\&_\[cmdk-group\]\]\:px-2 {
@@ -5907,14 +5946,14 @@ easyflow-editor .easyflow-editor *::after {
   }
   .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground {
     & svg:not([class*=text-]) {
-      color: var(--muted-foreground);
+      color: var(--ef-muted-foreground);
     }
   }
   .data-\[variant\=destructive\]\:\*\:\[svg\]\:\!text-destructive {
     &[data-variant=destructive] {
       :is(& > *) {
         &:is(svg) {
-          color: var(--destructive) !important;
+          color: var(--ef-destructive) !important;
         }
       }
     }
@@ -5944,7 +5983,7 @@ easyflow-editor .easyflow-editor *::after {
   }
   .\[\&\>svg\]\:text-sidebar-accent-foreground {
     & > svg {
-      color: var(--sidebar-accent-foreground);
+      color: var(--ef-sidebar-accent-foreground);
     }
   }
   .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2 {
@@ -6215,111 +6254,31 @@ easyflow-editor {
     transform: rotate(360deg);
   }
 }
-:root {
-  --title: 24px;
-  --h1: 18px;
-  --body: 16px;
-  --primary-blue: #0D8EFF;
-  --primary-yellow: #FFC53D;
-  --primary-green: #51FF00;
-  --primary-pink: #FF00C8;
-  --gray-50: #2E2E2E;
-  --gray-100: #6E6E6E;
-  --gray-200: #727272;
-  --gray-300: #737373;
-  --background-200: #1C1C1C;
-  --radius: 0.625rem;
-  --background: #191919;
-  --foreground: oklch(0.141 0.005 285.823);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.141 0.005 285.823);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.141 0.005 285.823);
-  --primary: oklch(0.21 0.006 285.885);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.967 0.001 286.375);
-  --secondary-foreground: oklch(0.21 0.006 285.885);
-  --muted: oklch(0.967 0.001 286.375);
-  --muted-foreground: oklch(0.552 0.016 285.938);
-  --accent: oklch(0.967 0.001 286.375);
-  --accent-foreground: oklch(0.21 0.006 285.885);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.92 0.004 286.32);
-  --input: oklch(0.92 0.004 286.32);
-  --ring: oklch(0.705 0.015 286.067);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.141 0.005 285.823);
-  --sidebar-primary: oklch(0.21 0.006 285.885);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.967 0.001 286.375);
-  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
-  --sidebar-border: oklch(0.92 0.004 286.32);
-  --sidebar-ring: oklch(0.705 0.015 286.067);
-}
-.dark {
-  --background: #191919;
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.21 0.006 285.885);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.21 0.006 285.885);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.92 0.004 286.32);
-  --primary-foreground: oklch(0.21 0.006 285.885);
-  --secondary: oklch(0.274 0.006 286.033);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.274 0.006 286.033);
-  --muted-foreground: oklch(0.705 0.015 286.067);
-  --accent: oklch(0.274 0.006 286.033);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.552 0.016 285.938);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: #18181b;
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.274 0.006 286.033);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.552 0.016 285.938);
-}
-@layer base {
+.easyflow-editor {
   * {
-    border-color: var(--border);
-    font-family: var(--font-red-hat-display);
-    outline-color: var(--ring);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
-    }
-  }
-  body {
-    background-color: var(--background);
-    color: var(--foreground);
+    border-color: #1e1e1e;
   }
 }
-@layer base {
-  * {
-    border-color: var(--border);
-    outline-color: var(--ring);
-    @supports (color: color-mix(in lab, red, red)) {
-      outline-color: color-mix(in oklab, var(--ring) 50%, transparent);
-    }
-  }
-  body {
-    background-color: var(--background);
-    color: var(--foreground);
-  }
+.easyflow-editor {
+  --radius: 0.625rem;
+  --ef-background: oklch(0.145 0 0);
+  --ef-foreground: oklch(0.985 0 0);
+  --ef-card: oklch(0.205 0 0);
+  --ef-card-foreground: oklch(0.985 0 0);
+  --ef-popover: oklch(0.205 0 0);
+  --ef-popover-foreground: oklch(0.985 0 0);
+  --ef-primary: oklch(0.922 0 0);
+  --ef-primary-foreground: oklch(0.205 0 0);
+  --ef-secondary: oklch(0.269 0 0);
+  --ef-secondary-foreground: oklch(0.985 0 0);
+  --ef-muted: oklch(0.269 0 0);
+  --ef-muted-foreground: oklch(0.708 0 0);
+  --ef-border: oklch(1 0 0 / 10%);
+  --ef-input: oklch(1 0 0 / 15%);
+  --ef-ring: oklch(0.556 0 0);
+  --ef-sidebar: oklch(0.205 0 0);
+  --ef-sidebar-foreground: oklch(0.985 0 0);
+  --ef-sidebar-border: oklch(1 0 0 / 10%);
 }
 @property --tw-translate-x { syntax: "*"; inherits: false; initial-value: 0; }
 @property --tw-translate-y { syntax: "*"; inherits: false; initial-value: 0; }