feat: update filter color

Author: HerringtonDarkholme

website/.vitepress/theme/custom.css

@@ -14,4 +14,4 @@
 }
 .dark {
   --vp-custom-selector-option-text: #213547;
-}
+}

website/src/catalog/Option.vue

@@ -12,27 +12,22 @@ defineProps({
 </template>
 
 <style scoped>
-code.option {
-  cursor: pointer;
-  filter: saturate(0);
-  opacity: 0.8;
+.option {
+  color: var(--vp-c-text-2);
   user-select: none;
   border: 1px solid transparent;
-  min-width: 3em;
   display: inline-block;
   height: 24px;
   line-height: 24px;
   text-align: center;
   padding-top: 0;
-}
-code.option:hover {
-  opacity: 1;
-  filter: saturate(1);
+  transition: all 0.25s;
 }
 .highlight {
-  color: var(--vp-c-brand-1);
+  color: var(--catalog-filter-color);
+  border-color: var(--catalog-filter-color);
 }
 .highlight-filter:hover {
-  color: var(--vp-c-brand-1);
+  color: var(--catalog-filter-color);
 }
 </style>

website/src/catalog/RuleFilter.vue

@@ -30,7 +30,7 @@ watchEffect(() => {
       <div class="checkbox-group">
         <label v-for="displayName, lang in languages" :key="lang">
           <input type="checkbox" v-model="filter.selectedLanguages" :value="lang">
-          <Option :text="displayName"/>
+          <Option :text="displayName" class="filter-option"/>
         </label>
       </div>
     </details>
@@ -43,7 +43,7 @@ watchEffect(() => {
           <div class="checkbox-group">
             <label v-for="rule in rules" :key="rule">
               <input type="checkbox" v-model="filter.selectedRuleFilters" :value="rule">
-              <Option :text="rule"/>
+              <Option :text="rule" class="filter-option"/>
             </label>
           </div>
         </div>
@@ -58,7 +58,7 @@ watchEffect(() => {
           <div class="checkbox-group">
             <label v-for="type in ruleTypes" :key="type">
               <input type="checkbox" v-model="filter.selectedTypes" :value="type">
-              <Option :text="type"/>
+              <Option :text="type" class="filter-option"/>
             </label>
           </div>
         </div>
@@ -67,7 +67,7 @@ watchEffect(() => {
           <div class="checkbox-group">
             <label v-for="feature in features" :key="feature">
               <input type="checkbox" v-model="filter.selectedFeatures" :value="feature">
-              <Option :text="feature"/>
+              <Option :text="feature" class="filter-option"/>
             </label>
           </div>
         </div>
@@ -85,7 +85,7 @@ watchEffect(() => {
 .checkbox-group {
   margin-top: 0.2em;
   display: flex;
-  gap: 5px;
+  gap: 4px;
 }
 
 label {
@@ -114,9 +114,19 @@ input[type="checkbox"] {
   display: none;
 }
 
+.filter-option {
+  cursor: pointer;
+  opacity: 0.8;
+  min-width: 3em;
+}
+.filter-option:hover {
+  opacity: 1;
+  color: var(--catalog-filter-color);
+}
+
 input[type="checkbox"]:checked + code.option {
-  filter: saturate(1);
   opacity: 1;
+  color: var(--catalog-filter-color);
   border-color: currentColor;
 }
 

website/src/catalog/RuleItem.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { type RuleMeta, type Filter, languages } from './data'
 import { type PropType, computed } from 'vue'
 
+import { type RuleMeta, type Filter, languages } from './data'
+import Option from './Option.vue'
+
 const { meta } = defineProps({
   meta: {
     type: Object as PropType<RuleMeta>,
@@ -41,24 +43,26 @@ const moreFeatures = computed(() => Math.max(meta.features.length - 2, 0))
         <Badge v-if="meta.type === 'Pattern'" type="info" text="Simple Pattern Example" />
         <template v-else>
           📏<span class="emoji-offset"/>
-          <code class="used" v-for="rule in displayedRules" :class="filter.selectedRuleFilters.includes(rule) && 'highlight-filter'">
-            {{ rule }}
-          </code>
-          <code class="used" v-if="moreRules">
-            +{{ moreRules }}
-          </code>
+          <Option
+            v-for="rule in displayedRules"
+            :key="rule"
+            :text="rule"
+            :highlight="filter.selectedRuleFilters.includes(rule)"
+          />
+          <Option v-if="moreRules" :text="`+${moreRules}`"/>
         </template>
       </div>
       <div class="rule-badges" v-if="meta.features.length > 0">
           💡
-          <code class="used" v-for="feature in meta.features">
-            {{ feature }}
-          </code>
-          <code class="used" v-if="moreFeatures">
-            +{{ moreFeatures }}
-          </code>
+          <Option
+            v-for="feature in meta.features"
+            :key="feature"
+            :text="feature"
+            :highlight="filter.selectedFeatures.includes(feature)"
+          />
+          <Option v-if="moreFeatures" :text="`+${moreFeatures}`"/>
       </div>
-      <a :href="meta.playgroundLink" class="link playground" target="_blank">
+      <a :href="meta.playgroundLink" class="playground" target="_blank">
         Try in Playground →
       </a>
     </div>
@@ -137,10 +141,10 @@ a:hover {
   transition-duration: 0.25s;
 }
 .highlight-filter {
-  color: var(--vp-c-brand-1);
-  border-color: var(--vp-c-brand-1);
+  color: var(--catalog-filter-color);
+  border-color: var(--catalog-filter-color);
 }
 .highlight-filter:hover {
-  color: var(--vp-c-brand-1);
+  color: var(--catalog-filter-color);
 }
 </style>

website/src/catalog/RuleList.vue

@@ -17,7 +17,12 @@ const ruleMetaData = computed(() => getRuleMetaData(props.filter))
   <h3>Rule List</h3>
   <br/>
   <TransitionGroup class="rule-list" tag="ul">
-    <RuleItem v-for="meta in ruleMetaData" :key="meta.language + meta.id" :meta="meta" :filter="filter"/>
+    <RuleItem
+      v-for="meta in ruleMetaData"
+      :key="meta.language + meta.id"
+      :meta="meta"
+      :filter="filter"
+    />
   </TransitionGroup>
 </template>
 

website/src/catalog/index.vue

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