refactor: use tailwind to create utility colors by CSS variables

Author: ktquez

src/.vuepress/theme/components/CardPost.vue

@@ -88,7 +88,7 @@ export default {
 <style lang="scss">
 .card-post {
   &:hover, &:focus-within {
-    @apply border-accent;
+    @apply border-accent-primary;
 
     .card-post-title > a {
       text-decoration-color: var(--color);

src/.vuepress/theme/components/HeaderFullPage.vue

@@ -38,7 +38,7 @@ export default {
   }
 
   > div:first-child {
-    background: var(--bg-secondary);
+    @apply bg-primary;
     background: radial-gradient(circle at center, var(--accent) 10%, transparent 12%), transparent;
     background-size: 40px 40px;
   }

src/.vuepress/theme/components/NewsletterForm.vue

@@ -20,7 +20,7 @@
         type="email"
         required
         autocomplete="email"
-        class="w-full p-4 border border-solid rounded-md outline-none newsletter-form-input c-border-color hover:border-accent focus:border-accent"
+        class="w-full p-4 border border-solid rounded-md outline-none bg-main newsletter-form-input c-border-color hover:border-accent-primary focus:border-accent-primary"
         :placeholder="$themeLocaleConfig.a11y.newsletter.placeholder"
       >
     </label>
@@ -87,7 +87,6 @@ export default {
 .newsletter-form {
   &-input {
     border-bottom-width: 6px;
-    background-color: var(--bg-input-news);
   }
 
   &-btn {

src/.vuepress/theme/components/PageEdit.vue

@@ -7,7 +7,7 @@
       v-if="$themeConfig.editLinks"
       :href="editLink"
       :label="$themeLocaleConfig.editLinkText"
-      class="mb-4 border-b-2 border-accent"
+      class="mb-4 border-b-2 border-accent-primary"
     />
     <div
       v-if="$themeConfig.lastUpdated"

src/.vuepress/theme/components/SettingOption.vue

@@ -75,7 +75,7 @@ export default {
   }
 
   &:focus-within {
-    outline: 2px solid var(--border-outline);
+    outline: 2px solid var(--color);
     outline-offset: 3px;
   }
 

src/.vuepress/theme/components/TheFooter.vue

@@ -1,6 +1,6 @@
 <template>
   <footer class="relative z-10 footer">
-    <div class="flex justify-center w-full px-4 py-24 border border-solid lg:py-32 c-bg-secondary c-border-color">
+    <div class="flex justify-center w-full px-4 py-24 border border-solid lg:py-32 bg-primary c-border-color">
       <div class="max-w-md">
         <div class="flex justify-center">
           <vp-icon
@@ -26,7 +26,7 @@
           >
             <a
               :href="social.link"
-              class="block p-5 border border-solid rounded-full c-border-color btn-social"
+              class="block p-5 border border-solid rounded-full c-border-color bg-main hover:border-accent-primary"
               target="_blank"
               rel="me noopener"
             >
@@ -58,9 +58,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.btn-social {
-  background-color: var(--bg);
-}
-</style>

src/.vuepress/theme/components/TheHeader.vue

@@ -129,7 +129,7 @@ export default {
 
   &-logo--bg {
     @media (min-width: theme('screens.lg')) {
-      background-image: var(--bg-left);
+      @apply bg-page-gradient-left;
     }
   }
 

src/.vuepress/theme/components/TheNavigation.vue

@@ -16,8 +16,8 @@
           <a
             :href="href"
             :aria-current="isActive && $route.path.indexOf(item.link) === 0 ? 'page' : null"
-            class="px-3 py-3 border-b-4 border-transparent border-solid the-nav-link hover:border-accent"
-            :class="{ 'active border-accent': isActive && $route.path.indexOf(item.link) === 0 }"
+            class="px-3 py-3 border-b-4 border-transparent border-solid the-nav-link hover:border-accent-primary"
+            :class="{ 'active border-accent-primary': isActive && $route.path.indexOf(item.link) === 0 }"
             @click="navigate"
           >
             {{ item.text }}
@@ -26,7 +26,7 @@
       </li>
       <li>
         <ExternalLink
-          class="px-3 py-3 border-b-4 border-transparent border-solid the-nav-link hover:border-accent"
+          class="px-3 py-3 border-b-4 border-transparent border-solid the-nav-link hover:border-accent-primary"
           :href="`https://github.com/${$themeConfig.repo}`"
           label="Github"
         />

src/.vuepress/theme/components/TheSidebar.vue

@@ -109,10 +109,10 @@ export default {
       margin-top: 1px;
       > a:focus, > a:hover, > a.active {
         position: relative;
-        background-color: var(--bg-hover-sidebar);
+        background-color: var(--secondary);
 
         &:before {
-          @apply absolute top-0 right-0 h-full bg-accent;
+          @apply absolute top-0 right-0 h-full bg-accent-primary;
           content: '';
           width: 6px;
         }

src/.vuepress/theme/components/WebMentions.vue

@@ -6,7 +6,7 @@
     aria-label="Webmention"
   >
     <h2 class="text-2xl font-bold">
-      ({{ webmentions.length }}) Webmentions<span class="text-accent">.</span>
+      ({{ webmentions.length }}) Webmentions<span class="text-accent-primary">.</span>
     </h2>
 
     <div class="my-12 webmentions-interact">
@@ -20,7 +20,7 @@
         >
           <vp-icon
             name="like"
-            class="mr-1 text-accent"
+            class="mr-1 text-accent-primary"
           />
           <span class="ml-2 uppercase">Likes</span>
         </div>
@@ -64,7 +64,7 @@
         >
           <vp-icon
             name="share"
-            class="mr-1 text-accent"
+            class="mr-1 text-accent-primary"
           />
           <span class="ml-2 uppercase">Reposts</span>
         </div>
@@ -104,7 +104,7 @@
 
     <div class="mt-24 webmentions-comments">
       <h3 class="mb-12 text-xl">
-        <span class="text-2xl font-bold">Comments <span class="text-accent">.</span></span>
+        <span class="text-2xl font-bold">Comments <span class="text-accent-primary">.</span></span>
       </h3>
       <ul
         v-if="mentions.length"
@@ -281,7 +281,7 @@ export default {
       }
 
       a {
-        @apply text-accent;
+        @apply text-accent-primary;
       }
     }
   }