From f56903a8ba08b55b08f9df943f312c767cebdfe0 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 8 Apr 2024 17:39:35 +0200
Subject: [PATCH] fix: improve ui contrast

---
 app/components/ConfigItem.vue        |  2 +-
 app/components/FileGroupItem.vue     |  2 +-
 app/components/NavBar.vue            | 18 +++++++++---------
 app/components/OptionSelectGroup.vue |  4 ++--
 app/components/RuleItem.vue          |  4 ++--
 app/pages/configs.vue                | 10 ++++------
 app/pages/files.vue                  | 14 ++++++--------
 uno.config.ts                        | 19 +++++++++++--------
 8 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/app/components/ConfigItem.vue b/app/components/ConfigItem.vue
index e289b83..5ac72c2 100644
--- a/app/components/ConfigItem.vue
+++ b/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 />
diff --git a/app/components/FileGroupItem.vue b/app/components/FileGroupItem.vue
index fa2dd0f..8af3f2e 100644
--- a/app/components/FileGroupItem.vue
+++ b/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)"
                   >
diff --git a/app/components/NavBar.vue b/app/components/NavBar.vue
index 9289c71..0eae39a 100644
--- a/app/components/NavBar.vue
+++ b/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
diff --git a/app/components/OptionSelectGroup.vue b/app/components/OptionSelectGroup.vue
index b437d37..5ffa00e 100644
--- a/app/components/OptionSelectGroup.vue
+++ b/app/components/OptionSelectGroup.vue
@@ -19,7 +19,7 @@ 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]"
@@ -27,7 +27,7 @@ const value = defineModel<string | number>('modelValue', {
     >
       <div
         :class="[
-          i === value ? '' : 'op35 saturate-0',
+          i === value ? '' : 'op50',
           titles?.[idx] ? '' : 'capitalize',
           classes?.[idx] || '',
         ]"
diff --git a/app/components/RuleItem.vue b/app/components/RuleItem.vue
index fb852ed..04cd3e4 100644
--- a/app/components/RuleItem.vue
+++ b/app/components/RuleItem.vue
@@ -71,7 +71,7 @@ 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"
             >
@@ -79,7 +79,7 @@ function capitalize(str?: string) {
               Docs
             </NuxtLink>
             <button
-              action-button
+              btn-action-sm
               title="Copy"
               @click="copy(rule.name)"
             >
diff --git a/app/pages/configs.vue b/app/pages/configs.vue
index 3c26d58..d42c72f 100644
--- a/app/pages/configs.vue
+++ b/app/pages/configs.vue
@@ -250,9 +250,8 @@ 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 />
@@ -260,9 +259,8 @@ onMounted(async () => {
             </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 />
diff --git a/app/pages/files.vue b/app/pages/files.vue
index d94d7bc..57a19f8 100644
--- a/app/pages/files.vue
+++ b/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>
diff --git a/uno.config.ts b/uno.config.ts
index 528d47a..66aadf4 100644
--- a/uno.config.ts
+++ b/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