refactor(editor): tailwind dark to css variables

Novout · Nov 10, 2021 · 8ec5e0a · 8ec5e0a
1 parent 18be21a
commit 8ec5e0a
Show file tree

Hide file tree

Showing 35 changed files with 200 additions and 203 deletions.
diff --git a/src/components/editor/absolute/EditorCommands.vue b/src/components/editor/absolute/EditorCommands.vue
@@ -6,8 +6,7 @@
       w-60
       h-60
       overflow-y-auto
-      bg-white
-      dark:bg-gray-700
+      bg-theme-background-1
       p-2
       rounded
       transition

diff --git a/src/components/editor/absolute/commands/EditorAbsoluteCommands.vue b/src/components/editor/absolute/commands/EditorAbsoluteCommands.vue
@@ -7,10 +7,8 @@
       items-center
       w-full
       p-1
-      border border-black
-      dark:border-gray-600
-      text-black
-      dark:text-gray-300
+      border border-theme-border-commands-1
+      text-theme-text-commands-1
       rounded
     "
   >

diff --git a/src/components/editor/absolute/project/new/AbsoluteProjectNewType.vue b/src/components/editor/absolute/project/new/AbsoluteProjectNewType.vue
@@ -3,8 +3,8 @@
     class="px-4 py-2 m-1 wb-text cursor-pointer rounded-full"
     :class="[
       props.title !== props.is
-        ? 'bg-gray-200 dark:bg-gray-600'
-        : 'bg-gray-400 dark:bg-gray-900 shadow-xl',
+        ? 'bg-theme-background-2'
+        : 'bg-theme-background-3 shadow-xl',
     ]"
   >
     {{ props.title }}

diff --git a/src/components/editor/absolute/shortcuts/EditorShortcutsFinder.vue b/src/components/editor/absolute/shortcuts/EditorShortcutsFinder.vue
@@ -2,7 +2,7 @@
   <div class="fixed left-0 top-0 w-full h-screen bg-modal z-max">
     <div
       ref="finder"
-      class="fixed w-60 bg-white dark:bg-gray-800 p-2 rounded shadow-2xl"
+      class="fixed w-60 bg-theme-background-absolute-1 p-2 rounded shadow-2xl"
       :style="style"
     >
       <div class="flex flex-col w-full">
@@ -69,7 +69,13 @@
         <input
           ref="search"
           v-model="entity.fstate.entry"
-          class="bg-transparent border border-gray-900 px-1 mb-1 wb-text"
+          class="
+            bg-transparent
+            border border-theme-border-absolute-2
+            px-1
+            mb-1
+            wb-text
+          "
           :placeholder="t('editor.text.placeholder.shortcuts.finderEntry')"
           @input="entity.finder().onFinder"
           @keypress.enter.prevent="entity.finder().onUp"

diff --git a/src/components/editor/absolute/shortcuts/EditorShortcutsSwitcher.vue b/src/components/editor/absolute/shortcuts/EditorShortcutsSwitcher.vue
@@ -2,7 +2,7 @@
   <div class="fixed left-0 top-0 w-full h-screen bg-modal z-max">
     <div
       ref="switcher"
-      class="fixed w-60 bg-white dark:bg-gray-800 p-2 rounded shadow-2xl"
+      class="fixed w-60 bg-theme-background-absolute-1 p-2 rounded shadow-2xl"
       :style="style"
     >
       <div
@@ -16,7 +16,7 @@
             <HeroIcon
               :class="[
                 entity.sstate.equal
-                  ? 'border border-black dark:border-white'
+                  ? 'border border-theme-border-absolute-1'
                   : '',
               ]"
               class="text-2xs wb-icon"
@@ -74,12 +74,23 @@
         <input
           ref="entry"
           v-model="entity.sstate.entry"
-          class="bg-transparent border border-gray-900 px-1 mb-1 wb-text"
+          class="
+            bg-transparent
+            border border-theme-border-absolute-2
+            px-1
+            mb-1
+            wb-text
+          "
           :placeholder="t('editor.text.placeholder.shortcuts.switcherEntry')"
         />
         <input
           v-model="entity.sstate.output"
-          class="bg-transparent border border-gray-900 px-1 wb-text"
+          class="
+            bg-transparent
+            border border-theme-border-absolute-2
+            px-1
+            wb-text
+          "
           :placeholder="t('editor.text.placeholder.shortcuts.switcherOutput')"
         />
       </div>

diff --git a/src/components/editor/aside/graph/AsideGraph.vue b/src/components/editor/aside/graph/AsideGraph.vue
@@ -2,15 +2,7 @@
   <div class="flex px-2 flex-col mt-5 w-full wb-text">
     <p
       v-if="!env.isEmptyProject(PROJECT.name)"
-      class="
-        cursor-pointer
-        font-bold
-        dark:hover:bg-gray-800
-        hover:bg-gray-200
-        active:bg-gray-700
-        dark:active:bg-black
-        transition
-      "
+      class="cursor-pointer font-bold"
       @click="graph.base()"
     >
       {{ PROJECT.nameRaw }}

diff --git a/src/components/editor/aside/graph/AsideGraphItem.vue b/src/components/editor/aside/graph/AsideGraphItem.vue
@@ -7,23 +7,21 @@
       props.entity.raw !== env.emptyLine()
     "
     class="
-      dark:hover:bg-gray-800
-      hover:bg-gray-200
-      active:bg-gray-700
-      dark:active:bg-black
+      bg-theme-background-aside-item
+      active:bg-theme-background-aside-item-active
       cursor-pointer
       transition
     "
     :class="[
       props.entity.type === 'heading-one'
-        ? 'border-l border-black dark:border-gray-500 ml-1'
+        ? 'border-l border-theme-border-aside-1 ml-1'
         : '',
       props.entity.type === 'heading-two' ||
       props.entity.type === 'heading-three'
-        ? 'flex items-end border-l border-black dark:border-gray-500 ml-1'
+        ? 'flex items-end border-l border-theme-border-aside-1 ml-1'
         : '',
       props.entity.type === 'image'
-        ? 'flex items-end border-l border-black dark:border-gray-500 ml-1'
+        ? 'flex items-end border-l border-theme-border-aside-1 ml-1'
         : '',
     ]"
   >
@@ -34,7 +32,7 @@
         props.entity.type === 'image'
       "
       :class="[props.entity.type === 'heading-two' ? 'w-6' : 'w-12']"
-      class="border-b mb-2 h-1 border-black dark:border-gray-500"
+      class="border-b mb-2 h-1 border-theme-border-aside-1"
     ></div>
     <p
       v-if="props.entity.type !== 'image'"

diff --git a/src/components/editor/entity/EditorEntityInput.vue b/src/components/editor/entity/EditorEntityInput.vue
@@ -15,8 +15,7 @@
         w-full
         rounded-none
         border-none
-        dark:bg-gray-700
-        bg-gray-100
+        bg-theme-background-1
         px-14
       "
       :style="{ minHeight: '50px' }"

diff --git a/src/components/editor/entity/EditorEntityShowPopover.vue b/src/components/editor/entity/EditorEntityShowPopover.vue
@@ -7,8 +7,7 @@
       items-start
       transition-all
       absolute
-      text-black
-      dark:text-gray-500
+      text-theme-text-1
     "
     :class="[
       props.entity.type === 'page-break' ? 'top-3' : '',
@@ -26,10 +25,8 @@
         rounded
         bottom-5
         wb-text
-        bg-gray-500
-        dark:bg-gray-800
-        border-gray-400
-        dark:border-gray-700
+        bg-theme-background-2
+        border-theme-border-1
       "
       @mouseleave="onReset"
     >
@@ -74,10 +71,8 @@
         bottom-5
         left-4
         wb-text
-        bg-gray-500
-        dark:bg-gray-800
-        border-gray-400
-        dark:border-gray-700
+        bg-theme-background-2
+        border-theme-border-1
         z-max
       "
     >
@@ -128,10 +123,8 @@
         bottom-5
         left-10
         wb-text
-        bg-gray-500
-        dark:bg-gray-800
-        border-gray-400
-        dark:border-gray-700
+        bg-theme-background-2
+        border-theme-border-1
       "
     >
       <EditorEntityShowSelect @click.prevent.stop="onUpEntity">
@@ -222,10 +215,8 @@
         left-16
         wb-text
         p-3
-        bg-gray-500
-        dark:bg-gray-800
-        border-gray-400
-        dark:border-gray-700
+        bg-theme-background-2
+        border-theme-border-1
       "
     >
       <div

diff --git a/src/components/editor/header/EditorHeaderBar.vue b/src/components/editor/header/EditorHeaderBar.vue
@@ -7,8 +7,7 @@
       flex flex-col
       w-52
       z-50
-      bg-gray-300
-      dark:bg-gray-700
+      bg-theme-background-1
       wb-text
     "
   >

diff --git a/src/components/editor/header/EditorHeaderButton.vue b/src/components/editor/header/EditorHeaderButton.vue
@@ -4,12 +4,7 @@
       :style="{
         backgroundColor: props.color !== 'none' ? props.color : 'none',
       }"
-      :class="[
-        value
-          ? 'text-gray-400 dark:text-white'
-          : 'text-black dark:text-gray-500',
-      ]"
-      class="inline-flex no-drag"
+      class="inline-flex no-drag wb-icon"
     >
       <slot name="icon" />
     </HeroIcon>

diff --git a/src/components/editor/header/EditorHeaderItem.vue b/src/components/editor/header/EditorHeaderItem.vue
@@ -6,10 +6,8 @@
       justify-between
       items-center
       w-full
-      bg-white-opacity
-      dark:bg-black-opacity
-      hover:bg-gray-500 hover:text-white
-      dark:hover:bg-gray-900
+      bg-theme-background-opacity-1
+      hover:bg-theme-background-2
       cursor-pointer
     "
     @click.prevent.stop="emit('action')"
@@ -21,8 +19,7 @@
         rounded-full
         px-1
         text-3xs text-white
-        bg-gray-500
-        dark:bg-gray-900
+        bg-theme-background-1
       "
     >
       {{ props.shortcut }}

diff --git a/src/components/editor/main/EditorAside.vue b/src/components/editor/main/EditorAside.vue
@@ -12,9 +12,8 @@
         overflow-y-auto
         w-full
         sm:w-60
-        bg-gray-100
+        bg-theme-background-1
         z-aside
-        dark:bg-gray-700
         shadow-lg
       "
       :initial="{

diff --git a/src/components/editor/main/EditorBase.vue b/src/components/editor/main/EditorBase.vue
@@ -21,8 +21,7 @@
         w-full
         max-h-screen
         overflow-y-auto overflow-x-hidden
-        bg-gray-100
-        dark:bg-gray-700
+        bg-theme-background-1
       "
     >
       <EditorEntityShow

diff --git a/src/components/editor/main/EditorBaseHeader.vue b/src/components/editor/main/EditorBaseHeader.vue
@@ -1,6 +1,14 @@
 <template>
   <header
-    class="flex py-1 justify-start items-center w-full bg-transparent z-50"
+    class="
+      flex
+      py-1
+      justify-start
+      items-center
+      w-full
+      bg-theme-transparent
+      z-50
+    "
   >
     <div>
       <HeroIcon

diff --git a/src/components/editor/pdf/PDFConfigurationSlot.vue b/src/components/editor/pdf/PDFConfigurationSlot.vue
@@ -4,12 +4,10 @@
       flex flex-col
       border
       rounded
-      dark:border-gray-500
-      border-gray-800
+      border-theme-border-1
       p-2
       my-3
-      bg-gray-200
-      dark:bg-gray-700
+      bg-theme-background-1
       wb-text
       w-full
       shadow-lg

diff --git a/src/components/editor/project/preferences/EditorProjectPreferencesDefault.vue b/src/components/editor/project/preferences/EditorProjectPreferencesDefault.vue
@@ -23,8 +23,7 @@
       class="
         flex
         font-bold
-        text-base text-black
-        dark:text-gray-300
+        text-base text-theme-text-1
         justify-between
         items-center
         w-full
@@ -38,19 +37,12 @@
     <SwitchGroup>
       <div class="flex px-2 items-center w-full justify-between">
         <SwitchLabel
-          class="
-            mr-4
-            text-black
-            dark:text-gray-300
-            transition
-            font-bold
-            text-base
-          "
+          class="mr-4 text-theme-text-1 transition font-bold text-base"
           >{{ t('editor.aside.configuration.dark') }}</SwitchLabel
         >
         <Switch
           v-model="dark"
-          :class="dark ? 'bg-gray-900' : 'bg-gray-500'"
+          :class="dark ? 'bg-theme-background-1' : 'bg-theme-background-4'"
           class="
             relative
             inline-flex
@@ -81,8 +73,7 @@
       class="
         flex
         font-bold
-        text-base text-black
-        dark:text-gray-300
+        text-base text-theme-text-1
         justify-between
         items-center
         w-full