fix: improve ui contrast

app/components/ConfigItem.vue

@@ -179,7 +179,7 @@ const extraConfigs = computed(() => {
           <template #popup-actions="{ ruleName }">
             <button
               v-close-popper
-              action-button
+              btn-action-sm
               @click="emit('badgeClick', ruleName)"
             >
               <div i-ph-funnel-duotone />

app/components/FileGroupItem.vue

@@ -100,7 +100,7 @@ function goToConfig(idx: number) {
               <div v-if="shown" max-h="50vh" min-w-100>
                 <div flex="~ items-center gap-2" p3>
                   <button
-                    action-button
+                    btn-action-sm
                     title="Copy"
                     @click="goToConfig(idx)"
                   >

app/components/NavBar.vue

@@ -49,26 +49,26 @@ function toggleRuleView() {
   </div>
   <div flex="~ gap-3 items-center wrap" py4>
     <NuxtLink
-      to="/configs" active-class="op100! bg-active"
-      px3 py1 op50 border="~ base rounded"
-      flex="~ gap-2 items-center"
+      to="/configs"
+      btn-action text-base px3 py1
+      active-class="btn-action-active"
     >
       <div i-ph-stack-duotone flex-none />
       Configs
     </NuxtLink>
     <NuxtLink
-      to="/rules" active-class="op100! bg-active"
-      px3 py1 op50 border="~ base rounded"
-      flex="~ gap-2 items-center"
+      to="/rules"
+      btn-action text-base px3 py1
+      active-class="btn-action-active"
     >
       <div i-ph-list-dashes-duotone flex-none />
       Rules
     </NuxtLink>
     <NuxtLink
       v-if="payload.files"
-      to="/files" active-class="op100! bg-active"
-      px3 py1 op50 border="~ base rounded"
-      flex="~ gap-2 items-center"
+      to="/files"
+      btn-action text-base px3 py1
+      active-class="btn-action-active"
     >
       <div i-ph-files-duotone flex-none />
       Files

app/components/OptionSelectGroup.vue

@@ -19,15 +19,15 @@ const value = defineModel<string | number>('modelValue', {
       v-for="i, idx of options" :key="i"
       border="~ base rounded-full" relative hover:bg-hover px2.5 py0.5
       :class="[
-        i === value ? 'bg-active' : '',
+        i === value ? 'bg-active' : 'saturate-0 hover:saturate-100',
         props?.[idx]?.class || '',
       ]"
       v-bind="props?.[idx]"
       :title="titles?.[idx]"
     >
       <div
         :class="[
-          i === value ? '' : 'op35 saturate-0',
+          i === value ? '' : 'op50',
           titles?.[idx] ? '' : 'capitalize',
           classes?.[idx] || '',
         ]"

app/components/RuleItem.vue

@@ -71,15 +71,15 @@ function capitalize(str?: string) {
         <div v-if="shown" max-h="50vh">
           <div flex="~ items-center gap-2" p3>
             <NuxtLink
-              action-button
+              btn-action-sm
               :to="rule.docs?.url" target="_blank" rel="noopener noreferrer"
               title="Docs"
             >
               <div i-ph-book-duotone />
               Docs
             </NuxtLink>
             <button
-              action-button
+              btn-action-sm
               title="Copy"
               @click="copy(rule.name)"
             >

app/pages/configs.vue

@@ -250,19 +250,17 @@ onMounted(async () => {
         <template v-if="filters.filepath">
           <div border="~ base rounded" flex>
             <button
-              :class="stateStorage.viewFileMatchType === 'configs' ? 'bg-gray:5' : 'op25'"
-              flex="~ gap-2 items-center"
-              px3 py1 hover:bg-gray:15
+              :class="stateStorage.viewFileMatchType === 'configs' ? 'btn-action-active' : 'op50'"
+              btn-action border-none
               @click="stateStorage.viewFileMatchType = stateStorage.viewFileMatchType === 'configs' ? 'merged' : 'configs'"
             >
               <div i-ph-stack-duotone />
               <span>Matched Config Items</span>
             </button>
             <div border="l base" />
             <button
-              :class="stateStorage.viewFileMatchType !== 'configs' ? 'bg-gray:5' : 'op25'"
-              flex="~ gap-2 items-center"
-              px3 py1 hover:bg-gray:15
+              :class="stateStorage.viewFileMatchType !== 'configs' ? 'btn-action-active' : 'op50'"
+              btn-action border-none
               @click="stateStorage.viewFileMatchType = stateStorage.viewFileMatchType === 'configs' ? 'merged' : 'configs'"
             >
               <div i-ph-film-script-duotone />

app/pages/files.vue

@@ -12,19 +12,17 @@ import { payload } from '~/composables/payload'
     <div>
       <div border="~ base rounded" flex="~ inline">
         <button
-          :class="stateStorage.viewFilesTab === 'list' ? 'bg-gray:5' : 'op25'"
-          flex="~ gap-2 items-center"
-          px3 py1 hover:bg-gray:15
+          :class="stateStorage.viewFilesTab === 'list' ? 'btn-action-active' : 'op50'"
+          btn-action border-none
           @click="stateStorage.viewFilesTab = 'list'"
         >
           <div i-ph-files-duotone />
-          <span>Flies List</span>
+          <span>List</span>
         </button>
         <div border="l base" />
         <button
-          :class="stateStorage.viewFilesTab === 'group' ? 'bg-gray:5' : 'op25'"
-          flex="~ gap-2 items-center"
-          px3 py1 hover:bg-gray:15
+          :class="stateStorage.viewFilesTab === 'group' ? 'btn-action-active' : 'op50'"
+          btn-action border-none
           @click="stateStorage.viewFilesTab = 'group' "
         >
           <div i-ph-rows-duotone />
@@ -41,7 +39,7 @@ import { payload } from '~/composables/payload'
         <div i-ph-files-duotone flex-none />
         <div>Matched Local Files ({{ payload.files.length }})</div>
       </div>
-      <div flex="~ col gap-1" ml6 py4 font-mono>
+      <div flex="~ col gap-1" py4 font-mono>
         <FileItem v-for="file of payload.files" :key="file" :filepath="file" />
       </div>
     </div>

uno.config.ts

@@ -13,17 +13,20 @@ export default defineConfig({
   shortcuts: {
     'color-base': 'color-neutral-500 dark:color-neutral-300',
     'bg-base': 'bg-white dark:bg-neutral-900',
+    'border-base': 'border-#aaa3',
+
     'bg-tooltip': 'bg-white:75 dark:bg-neutral-900:75 backdrop-blur-8',
     'bg-glass': 'bg-white:75 dark:bg-neutral-900:75 backdrop-blur-5',
     'bg-code': 'bg-gray5:5',
-    'bg-hover': 'bg-gray:5',
-    'bg-active': 'bg-gray:10',
-    'border-base': 'border-#aaa3',
-    'border-box': 'border border-base rounded',
-    'text-button': 'border-box bg-hover hover:bg-active px3 py1 flex gap-1 items-center justify-center',
-    'icon-button': 'border-box bg-hover hover:bg-active p1',
-    'icon-button-sm': 'icon-button p0.5 text-sm',
-    'action-button': 'border border-base rounded flex gap-2 items-center px2 py1 text-sm op75 hover:op100 hover:bg-hover',
+    'bg-hover': 'bg-primary-400:5',
+
+    'text-active': 'color-primary-600 dark:color-primary-400',
+    'border-active': 'border-primary-600/25 dark:border-primary-400/25',
+    'bg-active': 'bg-primary-400:10',
+
+    'btn-action': 'border border-base rounded flex gap-2 items-center px2 py1 op75 hover:op100 hover:bg-hover',
+    'btn-action-sm': 'btn-action text-sm',
+    'btn-action-active': 'text-active border-active! bg-active op100!',
   },
   theme: {
     // Reference: https://github.com/eslint/eslint.org/blob/main/src/assets/scss/tokens/themes.scss