refactor(ui): better color names

components/smart/AccentModePicker.vue

@@ -29,7 +29,7 @@
           cursor-pointer
           hover:shadow-none
         "
-        :class="[`text-${color}-400`, { 'bg-actColor': color === active }]"
+        :class="[`text-${color}-400`, { 'bg-primary': color === active }]"
         @click="setActiveColor(color)"
       >
         <i class="material-icons">lens</i>

components/smart/AceEditor.vue

@@ -270,11 +270,11 @@ export default {
     @apply items-center;
     @apply flex-grow-0;
     @apply flex-shrink-0;
-    @apply text-fgLightColor;
+    @apply text-secondaryLight;
     @apply text-sm;
 
     &:hover {
-      @apply text-fgColor;
+      @apply text-secondary;
       @apply cursor-pointer;
     }
 
@@ -289,11 +289,11 @@ export default {
       @apply absolute;
       @apply z-50;
       @apply top-9;
-      @apply bg-bgColor;
+      @apply bg-primary;
       @apply max-h-60;
       @apply overflow-auto;
       @apply shadow-lg;
-      @apply text-fgLightColor;
+      @apply text-secondaryLight;
       @apply overscroll-none;
 
       border-radius: 0 0 8px 8px;
@@ -304,8 +304,8 @@ export default {
       @apply py-1;
 
       &:hover {
-        @apply text-fgColor;
-        @apply bg-bgLightColor;
+        @apply text-secondary;
+        @apply bg-primaryLight;
       }
     }
   }

components/smart/AutoComplete.vue

@@ -194,7 +194,7 @@ export default {
 
   ul.suggestions {
     @apply hidden;
-    @apply bg-actColor;
+    @apply bg-primary;
     @apply absolute;
     @apply mx-2;
     @apply left-0;
@@ -222,8 +222,8 @@ export default {
 
       &:hover,
       &.active {
-        @apply bg-acColor;
-        @apply text-actColor;
+        @apply bg-accent;
+        @apply text-primary;
         @apply cursor-pointer;
       }
     }

components/smart/ColorModePicker.vue

@@ -30,12 +30,12 @@
           rounded-full
           cursor-pointer
           border-collapseer-2
-          text-fgLightColor
-          hover:text-fgColor
+          text-secondaryLight
+          hover:text-secondary
         "
         :class="[
-          { 'bg-actColor': color === $colorMode.preference },
-          { 'text-acColor hover:text-acColor': color === $colorMode.value },
+          { 'bg-primary': color === $colorMode.preference },
+          { 'text-accent hover:text-accent': color === $colorMode.value },
         ]"
         @click="$colorMode.preference = color"
       >

components/smart/DeletableChip.vue

@@ -15,15 +15,15 @@
   @apply rounded-lg;
   @apply m-1;
   @apply pl-4;
-  @apply bg-bgDarkColor;
-  @apply text-fgColor;
+  @apply bg-primaryDark;
+  @apply text-secondary;
   @apply font-mono;
   @apply font-normal;
   @apply transition;
   @apply ease-in-out;
   @apply duration-150;
   @apply border;
-  @apply border-brdColor;
+  @apply border-divider;
 }
 
 .close-button {

components/smart/HideMenu.vue

@@ -9,9 +9,9 @@
       justify-center
       px-2
       py-1
-      bg-brdColor
-      text-fgLightColor
-      hover:text-fgColor
+      bg-divider
+      text-secondaryLight
+      hover:text-secondary
       my-4
       z-10
       rounded-l

components/smart/Modal.vue

@@ -63,11 +63,11 @@ export default {
   @apply transition;
   @apply ease-in-out;
   @apply duration-150;
-  @apply bg-bgColor;
+  @apply bg-primary;
   @apply rounded-lg;
   @apply shadow-2xl;
   @apply border;
-  @apply border-ttColor;
+  @apply border-tooltip;
 
   max-height: calc(100vh - 128px);
   max-width: 640px;
@@ -121,12 +121,12 @@ export default {
 
   &.top {
     top: 68px;
-    background: linear-gradient(to bottom, var(--bg-color), transparent);
+    background: linear-gradient(to bottom, var(--primary-color), transparent);
   }
 
   &.bottom {
     bottom: 16px;
-    background: linear-gradient(to top, var(--bg-color), transparent);
+    background: linear-gradient(to top, var(--primary-color), transparent);
   }
 }
 </style>

components/smart/Tabs.vue

@@ -83,7 +83,7 @@ export default {
         @apply justify-center;
         @apply py-2;
         @apply px-4;
-        @apply text-fgLightColor;
+        @apply text-secondaryLight;
         @apply text-sm;
         @apply rounded-lg;
         @apply cursor-pointer;
@@ -96,17 +96,17 @@ export default {
         }
 
         &:hover {
-          @apply text-fgColor;
+          @apply text-secondary;
         }
       }
 
       &:focus a {
-        @apply text-fgColor;
+        @apply text-secondary;
       }
 
       &.is-active a {
-        @apply bg-brdColor;
-        @apply text-fgColor;
+        @apply bg-divider;
+        @apply text-secondary;
       }
     }
   }

components/smart/Toggle.vue

@@ -29,11 +29,11 @@ export default {
 
 <style scoped lang="scss">
 $useBorder: false;
-$borderColor: var(--fg-light-color);
-$activeColor: var(--ac-color);
-$inactiveColor: var(--fg-light-color);
-$inactiveHandleColor: var(--bg-color);
-$activeHandleColor: var(--act-color);
+$borderColor: var(--secondary-light-color);
+$activeColor: var(--accent-color);
+$inactiveColor: var(--secondary-light-color);
+$inactiveHandleColor: var(--primary-color);
+$activeHandleColor: var(--primary-color);
 $width: 32px;
 $height: 16px;
 $handleSpacing: 4px;

components/smart/UrlField.vue

@@ -1,4 +1,4 @@
-<!-- 
+<!--
  This code is a complete adaptation of the work done here
  https://github.com/SyedWasiHaider/vue-highlightable-input
 -->
@@ -392,14 +392,14 @@ export default {
 <style lang="scss">
 .VAR {
   @apply font-bold;
-  @apply text-acColor;
+  @apply text-accent;
 }
 .url-field-container {
   @apply inline-grid;
 }
 .url-field {
   @apply border-dashed;
-  @apply border-brdColor;
+  @apply border-divider;
   @apply whitespace-nowrap;
   @apply overflow-x-auto;
   @apply resize-none;