fix: improve filter and other style

Author: HerringtonDarkholme

website/src/catalog/Option.vue

@@ -24,10 +24,6 @@ defineProps({
   transition: all 0.25s;
 }
 .highlight {
-  color: var(--catalog-filter-color);
-  border-color: var(--catalog-filter-color);
-}
-.highlight-filter:hover {
-  color: var(--catalog-filter-color);
+  border-color: currentColor;
 }
 </style>

website/src/catalog/RuleFilter.vue

@@ -120,13 +120,12 @@ input[type="checkbox"] {
   min-width: 3em;
 }
 .filter-option:hover {
+  color: var(--vp-c-brand-1);
   opacity: 1;
-  color: var(--catalog-filter-color);
 }
 
 input[type="checkbox"]:checked + code.option {
   opacity: 1;
-  color: var(--catalog-filter-color);
   border-color: currentColor;
 }
 

website/src/catalog/RuleItem.vue

@@ -30,7 +30,7 @@ const moreFeatures = computed(() => Math.max(meta.features.length - 2, 0))
       <div class="rule-badges">
         <a :href="`/catalog/${meta.language}/`" target="_blank">
           <Badge type="info" :class="filter.selectedLanguages.length && 'highlight-filter'">
-            {{ languages[meta.language] }}
+            📚 {{ languages[meta.language] }}
           </Badge>
         </a>
         <Badge v-if="meta.hasFix" type="tip">
@@ -62,7 +62,7 @@ const moreFeatures = computed(() => Math.max(meta.features.length - 2, 0))
           />
           <Option v-if="moreFeatures" :text="`+${moreFeatures}`"/>
       </div>
-      <a :href="meta.playgroundLink" class="playground" target="_blank">
+      <a :href="meta.playgroundLink" class="playground link" target="_blank">
         Try in Playground →
       </a>
     </div>
@@ -140,11 +140,14 @@ a:hover {
   transition-property: all;
   transition-duration: 0.25s;
 }
+a > .VPBadge:hover {
+  text-decoration: underline;
+}
 .highlight-filter {
-  color: var(--catalog-filter-color);
-  border-color: var(--catalog-filter-color);
+  color: var(--vp-c-text-2);
+  border-color: currentColor;
 }
 .highlight-filter:hover {
-  color: var(--catalog-filter-color);
+  color: var(--vp-c-text-2);
 }
 </style>

website/src/catalog/index.vue

@@ -22,6 +22,5 @@ const filter = ref<Filter>({
 <style scoped>
 .catalog-filter {
   min-height: 300px;
-  --catalog-filter-color: #407cb5;
 }
 </style>