refactor(theme): use semantic color tokens

src/components/ChainSummary.vue

@@ -23,7 +23,7 @@ const addFavor = (e: Event) => {
 <template>
   <RouterLink
     :to="`/${name}`"
-    class="bg-base-100 hover:bg-gray-100 dark:hover:bg-[#373f59] rounded shadow flex items-center px-3 py-3 cursor-pointer"
+    class="bg-base-100 hover:bg-active rounded shadow flex items-center px-3 py-3 cursor-pointer"
   >
     <div class="w-8 h-8 rounded-full overflow-hidden">
       <img :src="conf.logo" />
@@ -36,7 +36,7 @@ const addFavor = (e: Event) => {
       class="pl-4 text-xl"
       :class="{
         'text-warning': dashboardStore?.favoriteMap?.[props.name],
-        'text-gray-300 dark:text-gray-500': !dashboardStore?.favoriteMap?.[props.name],
+        'text-base-content/60': !dashboardStore?.favoriteMap?.[props.name],
       }"
     >
       <Icon icon="mdi-star" />

src/components/PaginationBar.vue

@@ -41,7 +41,7 @@ function gotoPage(pageNum: number) {
       <button
         v-for="{ page, color } in pages"
         :key="page"
-        class="btn bg-gray-100 text-gray-500 hover:text-white border-none dark:bg-gray-800 dark:text-white"
+        class="btn bg-base-200 text-base-content/70 hover:text-primary-content border-none"
         :class="{
           '!btn-primary': color === 'btn-primary',
         }"

src/components/ProposalListItem.vue

@@ -39,7 +39,7 @@ function metaItem(metadata: string | undefined): { title: string; summary: strin
 }
 </script>
 <template>
-  <div class="bg-white dark:bg-[#28334e] rounded text-sm">
+  <div class="bg-white dark:bg-base-200 rounded text-sm">
     <table class="table-compact w-full table-fixed hidden lg:!table">
       <tbody>
         <tr v-for="(item, index) in proposals?.proposals" :key="index">
@@ -64,7 +64,7 @@ function metaItem(metadata: string | undefined): { title: string; summary: strin
               </RouterLink>
               <div
                 v-if="item.content"
-                class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
+                class="bg-base-200 text-base-content/80 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
               >
                 {{ showType(item.content['@type']) }}
               </div>
@@ -100,7 +100,7 @@ function metaItem(metadata: string | undefined): { title: string; summary: strin
                 </div>
               </div>
               <div
-                class="truncate col-span-2 md:!col-span-1 text-xs text-gray-500 dark:text-gray-400 text-right md:!flex md:!justify-start"
+                class="truncate col-span-2 md:!col-span-1 text-xs text-base-content/70 text-right md:!flex md:!justify-start"
               >
                 {{ format.toDay(item.voting_end_time, 'from') }}
               </div>
@@ -149,13 +149,13 @@ function metaItem(metadata: string | undefined): { title: string; summary: strin
           <div class="col-span-2">
             <div
               v-if="item.content"
-              class="bg-[#f6f2ff] text-[#9c6cff] dark:bg-gray-600 dark:text-gray-300 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
+              class="bg-base-200 text-base-content/80 inline-block rounded-full px-2 py-[1px] text-xs mb-1"
             >
               {{ showType(item.content['@type']) }}
             </div>
           </div>
 
-          <div class="truncate text-xs text-gray-500 dark:text-gray-400 flex items-center justify-end">
+          <div class="truncate text-xs text-base-content/70 flex items-center justify-end">
             {{ format.toDay(item.voting_end_time, 'from') }}
           </div>
         </div>

src/components/ValidatorCommissionRate.vue

@@ -105,7 +105,7 @@ const chartConfig = computed(() => {
 <template>
   <div class="bg-base-100 rounded shadow p-4">
     <div class="text-lg text-main font-semibold mb-1">Commission Rate</div>
-    <div class="text-sm text-gray-500 dark:text-gray-400">
+    <div class="text-sm text-base-content/70">
       {{ `Updated at ${format.toDay(props.commission?.update_time, 'short')}` }}
     </div>
     <div class="w-80 m-auto">

src/components/WasmVerification.vue

@@ -274,7 +274,7 @@ function callFunction(title: string, method: string, arg: Argument) {
     </div>
 
     <!-- alert-info -->
-    <div class="text-[#00cfe8] bg-[rgba(0,207,232,0.12)] rounded shadow mt-4 alert-info">
+    <div class="text-info bg-info/10 rounded shadow mt-4 alert-info">
       <div class="drop-shadow-md px-4 pt-2 pb-2" style="box-shadow: rgba(0, 207, 232, 0.4) 0px 6px 15px -7px">
         <h2 class="text-base font-semibold">{{ $t('consensus.tips') }}</h2>
       </div>

src/components/charts/PriceMarketChart.vue

@@ -33,14 +33,14 @@ function changeChart(type: string) {
 <template>
   <div class="tabs tabs-boxed bg-transparent justify-end">
     <a
-      class="tab text-xs mr-2 text-gray-400 uppercase"
+      class="tab text-xs mr-2 text-base-content/60 uppercase"
       :class="{ 'tab-active': kind === 'price' }"
       @click="changeChart('price')"
     >
       Price
     </a>
     <a
-      class="tab text-xs text-gray-400 uppercase"
+      class="tab text-xs text-base-content/60 uppercase"
       :class="{ 'tab-active': kind === 'volume' }"
       @click="changeChart('volume')"
     >

src/components/dynamic/ObjectHorizontalElement.vue

@@ -12,7 +12,7 @@ const changeTab = (val: string) => {
   <div>
     <div class="tabs">
       <a
-        class="tab tab-bordered text-gray-400 capitalize"
+        class="tab tab-bordered text-base-content/60 capitalize"
         v-for="(item, index) of value"
         :value="index"
         :class="{ 'tab-active': tab === String(index) }"

src/layouts/components/ChainProfile.vue

@@ -28,7 +28,7 @@ function changeEndpoint(item: Endpoint) {
       <div class="flex-1 w-0">
         <div
           :key="baseStore.latest?.block?.header?.height || chainStore.chainName || ''"
-          class="capitalize whitespace-nowrap text-base font-semibold text-gray-600 dark:text-gray-200 hidden md:!block"
+          class="capitalize whitespace-nowrap text-base font-semibold text-base-content/70 hidden md:!block"
         >
           {{
             baseStore.latest?.block?.header?.height
@@ -37,38 +37,38 @@ function changeEndpoint(item: Endpoint) {
           }}
           <span class="text-error">{{ baseStore.connected ? '' : 'disconnected' }}</span>
         </div>
-        <div class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap hidden md:!block">
+        <div class="text-xs text-base-content/70 whitespace-nowrap hidden md:!block">
           {{ chainStore.connErr || chainStore.endpoint.address }}
         </div>
       </div>
     </label>
     <div tabindex="0" class="dropdown-content -left-6 w-80 menu shadow bg-base-200 rounded-box overflow-auto">
       <!-- rest -->
-      <div class="px-4 py-2 text-sm text-gray-400" v-if="chainStore.current?.endpoints?.rest">Rest Endpoint</div>
+      <div class="px-4 py-2 text-sm text-base-content/60" v-if="chainStore.current?.endpoints?.rest">Rest Endpoint</div>
       <div
         v-for="(item, index) in chainStore.current?.endpoints?.rest"
-        class="px-4 py-2 w-full hover:bg-gray-100 dark:hover:bg-[#384059] cursor-pointer"
+        class="px-4 py-2 w-full hover:bg-active cursor-pointer"
         :key="index"
         @click="changeEndpoint(item)"
       >
         <div class="flex flex-col">
           <div class="flex items-center justify-between w-full">
-            <div class="text-gray-500 dark:text-gray-200 capitalize">
+            <div class="text-base-content/70 capitalize">
               {{ item.provider }}
             </div>
             <span
               v-if="item.address === chainStore.endpoint?.address"
               class="bg-yes inline-block h-2 w-2 rounded-full"
             />
           </div>
-          <div class="text-gray-400 text-xs whitespace-nowrap">
+          <div class="text-base-content/60 text-xs whitespace-nowrap">
             {{ item.address }}
           </div>
         </div>
       </div>
 
       <!-- rest -->
-      <div class="px-4 py-2 text-sm text-gray-400">Information</div>
+      <div class="px-4 py-2 text-sm text-base-content/60">Information</div>
       <div class="w-full">
         <div class="py-2 px-4">
           Chain Id:

src/layouts/components/DefaultLayout.vue

@@ -115,19 +115,19 @@ const show_ad = computed(() => {
         >
           <input v-if="index > 0" type="checkbox" class="cursor-pointer !h-10 block" @click="changeOpen(index)" />
           <div
-            class="collapse-title !py-0 px-4 flex items-center cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]"
+            class="collapse-title !py-0 px-4 flex items-center cursor-pointer hover:bg-active"
           >
             <Icon
               v-if="item?.icon?.icon"
               :icon="item?.icon?.icon"
               class="text-xl mr-2"
               :class="{
-                'text-yellow-500': item?.title === 'Favorite',
+                'text-warning': item?.title === 'Favorite',
                 'text-blue-500': item?.title !== 'Favorite',
               }"
             />
             <img v-if="item?.icon?.image" :src="item?.icon?.image" class="w-6 h-6 rounded-full mr-3" />
-            <div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap">
+            <div class="text-base capitalize flex-1 text-base-content whitespace-nowrap">
               {{ item?.title }}
             </div>
             <div
@@ -143,7 +143,7 @@ const show_ad = computed(() => {
               <RouterLink
                 v-if="isNavLink(el)"
                 @click="sidebarShow = false"
-                class="hover:bg-gray-100 dark:hover:bg-[#373f59] rounded cursor-pointer px-3 py-2 flex items-center"
+                class="hover:bg-active rounded cursor-pointer px-3 py-2 flex items-center"
                 :class="{
                   '!bg-primary': selected($route, el),
                 }"
@@ -166,7 +166,7 @@ const show_ad = computed(() => {
                   }"
                 />
                 <div
-                  class="text-base capitalize text-gray-500 dark:text-gray-300"
+                  class="text-base capitalize text-base-content/70"
                   :class="{
                     '!text-white': selected($route, el),
                   }"
@@ -180,11 +180,11 @@ const show_ad = computed(() => {
               class="menu bg-base-100 w-full !p-0"
             >
               <RouterLink
-                class="hover:bg-gray-100 dark:hover:bg-[#373f59] rounded cursor-pointer px-3 py-2 flex items-center"
+                class="hover:bg-active rounded cursor-pointer px-3 py-2 flex items-center"
                 :to="`/${blockchain.chainName}/faucet`"
               >
                 <Icon icon="mdi:chevron-right" class="mr-2 ml-3"></Icon>
-                <div class="text-base capitalize text-gray-500 dark:text-gray-300">Faucet</div>
+                <div class="text-base capitalize text-base-content/70">Faucet</div>
                 <div class="badge badge-sm text-white border-none badge-error ml-auto">New</div>
               </RouterLink>
             </div>
@@ -195,14 +195,14 @@ const show_ad = computed(() => {
           v-if="isNavLink(item)"
           :to="item?.to"
           @click="sidebarShow = false"
-          class="cursor-pointer rounded-lg px-4 flex items-center py-2 hover:bg-gray-100 dark:hover:bg-[#373f59]"
+          class="cursor-pointer rounded-lg px-4 flex items-center py-2 hover:bg-active"
         >
           <Icon
             v-if="item?.icon?.icon"
             :icon="item?.icon?.icon"
             class="text-xl mr-2"
             :class="{
-              'text-yellow-500': item?.title === 'Favorite',
+              'text-warning': item?.title === 'Favorite',
               'text-blue-500': item?.title !== 'Favorite',
             }"
           />
@@ -211,7 +211,7 @@ const show_ad = computed(() => {
             :src="item?.icon?.image"
             class="w-6 h-6 rounded-full mr-3 border border-blue-100"
           />
-          <div class="text-base capitalize flex-1 text-gray-700 dark:text-gray-200 whitespace-nowrap">
+          <div class="text-base capitalize flex-1 text-base-content whitespace-nowrap">
             {{ item?.title }}
           </div>
           <div
@@ -224,52 +224,52 @@ const show_ad = computed(() => {
         </RouterLink>
         <div
           v-if="isNavTitle(item)"
-          class="px-4 text-sm text-gray-400 pb-2 uppercase"
+          class="px-4 text-sm text-base-content/60 pb-2 uppercase"
         >
           {{ item?.heading }}
         </div>
       </div>
       <div class="px-2">
-        <div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">Tools</div>
+        <div class="px-4 text-sm pt-2 text-base-content/60 pb-2 uppercase">Tools</div>
         <RouterLink
           to="/wallet/suggest"
-          class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]"
+          class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-active"
         >
           <Icon icon="mdi:frequently-asked-questions" class="text-xl mr-2" />
-          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">Wallet Helper</div>
+          <div class="text-base capitalize flex-1 text-base-content/70">Wallet Helper</div>
         </RouterLink>
         <div
           v-if="showDiscord"
-          class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase"
+          class="px-4 text-sm pt-2 text-base-content/60 pb-2 uppercase"
         >
           {{ $t('module.sponsors') }}
         </div>
         <Sponsors v-if="showDiscord" />
-        <div class="px-4 text-sm pt-2 text-gray-400 pb-2 uppercase">{{ $t('module.links') }}</div>
+        <div class="px-4 text-sm pt-2 text-base-content/60 pb-2 uppercase">{{ $t('module.links') }}</div>
         <a
           href="https://twitter.com/ping_pub"
           target="_blank"
-          class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-gray-100 dark:hover:bg-[#373f59]"
+          class="py-2 px-4 flex items-center cursor-pointer rounded-lg hover:bg-active"
         >
           <Icon icon="mdi:twitter" class="text-xl mr-2" />
-          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">Twitter</div>
+          <div class="text-base capitalize flex-1 text-base-content/70">Twitter</div>
         </a>
         <a
           v-if="showDiscord"
           href="https://discord.com/invite/CmjYVSr6GW"
           target="_blank"
-          class="py-2 px-4 flex items-center rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]"
+          class="py-2 px-4 flex items-center rounded-lg cursor-pointer hover:bg-active"
         >
           <Icon icon="mdi:discord" class="text-xl mr-2" />
-          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">Discord</div>
+          <div class="text-base capitalize flex-1 text-base-content/70">Discord</div>
         </a>
         <a
           href="https://github.com/ping-pub/explorer/discussions"
           target="_blank"
-          class="py-2 px-4 flex items-center rounded-lg cursor-pointer hover:bg-gray-100 dark:hover:bg-[#373f59]"
+          class="py-2 px-4 flex items-center rounded-lg cursor-pointer hover:bg-active"
         >
           <Icon icon="mdi:frequently-asked-questions" class="text-xl mr-2" />
-          <div class="text-base capitalize flex-1 text-gray-600 dark:text-gray-200">FAQ</div>
+          <div class="text-base capitalize flex-1 text-base-content/70">FAQ</div>
         </a>
       </div>
     </div>

src/layouts/components/NavBarI18n.vue

@@ -55,12 +55,12 @@ const handleLangChange = (lang: string) => {
 <template>
   <div class="dropdown" :class="currentLang === 'ar' ? 'dropdown-right' : 'dropdown-bottom dropdown-end'">
     <label tabindex="0" class="btn btn-ghost btn-circle btn-sm mx-1">
-      <Icon icon="mdi-translate" class="text-2xl text-gray-500 dark:text-gray-400" />
+      <Icon icon="mdi-translate" class="text-2xl text-base-content/70" />
     </label>
     <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40">
       <li v-for="lang in i18nLangs" :key="lang.i18nLang">
         <a
-          class="hover:bg-gray-100 dark:hover:bg-[#373f59]"
+          class="hover:bg-active"
           :class="{ 'text-primary': currentLang === lang.i18nLang }"
           @click="handleLangChange(lang.i18nLang)"
           >{{ lang.label }}</a

src/layouts/components/NavBarWallet.vue

@@ -66,13 +66,13 @@ const params = computed(() => {
       >
         <Icon icon="mdi:wallet" /><span class="ml-1 block">Connect Wallet</span>
       </label>
-      <div class="px-2 mb-1 text-gray-500 dark:text-gray-400 font-semibold">
+      <div class="px-2 mb-1 text-base-content/70 font-semibold">
         {{ walletStore.connectedWallet?.wallet }}
       </div>
       <div>
         <a
           v-if="walletStore.currentAddress"
-          class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
+          class="block py-2 px-2 hover:bg-active rounded cursor-pointer"
           style="overflow-wrap: anywhere"
           @click="copyAdress(walletStore.currentAddress)"
         >
@@ -81,14 +81,14 @@ const params = computed(() => {
         <div class="divider mt-1 mb-1"></div>
         <RouterLink to="/wallet/accounts">
           <div
-            class="block py-2 px-2 hover:!bg-gray-100 rounded cursor-pointer"
+            class="block py-2 px-2 hover:!bg-base-200 rounded cursor-pointer"
           >
             Accounts
           </div>
         </RouterLink>
         <RouterLink to="/wallet/portfolio">
           <div
-            class="block py-2 px-2 hover:!bg-gray-100 rounded cursor-pointer"
+            class="block py-2 px-2 hover:!bg-base-200 rounded cursor-pointer"
           >
             Portfolio
           </div>
@@ -106,7 +106,7 @@ const params = computed(() => {
         <div v-if="walletStore.currentAddress" class="divider mt-1 mb-1"></div>
         <a
           v-if="walletStore.currentAddress"
-          class="block py-2 px-2 hover:bg-gray-100 dark:hover:bg-[#353f5a] rounded cursor-pointer"
+          class="block py-2 px-2 hover:bg-active rounded cursor-pointer"
           @click="walletStore.disconnect()"
           >Disconnect</a
         >

src/layouts/components/NavFooter.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- footer -->
-  <footer class="flex items-center h-12 mt-5 text-sm bg-gray-100 dark:bg-[#171d30] py-2 z-10 w-full">
+  <footer class="flex items-center h-12 mt-5 text-sm bg-base-200 py-2 z-10 w-full">
     <div class="flex flex-1">
       &copy;&nbsp;
       {{ new Date().getFullYear() }}&nbsp; Made With&nbsp; <img src="../../assets/images/heart.svg" />&nbsp; By&nbsp;

src/layouts/components/NavbarSearch.vue

@@ -64,7 +64,7 @@ function confirm() {
 <template>
   <div>
     <button class="btn btn-ghost btn-circle btn-sm mx-1" @click="openSearchModal">
-      <Icon icon="mdi:magnify" class="text-2xl text-gray-500 dark:text-gray-400" />
+      <Icon icon="mdi:magnify" class="text-2xl text-base-content/70" />
     </button>
 
     <!-- modal -->
@@ -81,7 +81,7 @@ function confirm() {
             <span class="capitalize text-sm md:!text-base">Height/Transaction/Account Address</span>
           </div>
           <label htmlFor="modal-pool-modal" class="cursor-pointer" @click="closeSearchModal">
-            <Icon icon="zondicons:close-outline" class="text-2xl text-gray-500 dark:text-gray-400" />
+            <Icon icon="zondicons:close-outline" class="text-2xl text-base-content/70" />
           </label>
         </div>
         <!-- body -->