feat: align better with ESLint's design system (#16)

eslint · Apr 2, 2024 · f0f8392 · f0f8392
1 parent 258c2b5
commit f0f8392
Show file tree

Hide file tree

Showing 7 changed files with 113 additions and 20 deletions.
diff --git a/app.vue b/app.vue
@@ -15,7 +15,7 @@ await ensureDataFetch()
 </script>
 
 <template>
-  <div v-if="errorInfo" grid h-full w-full place-content-center whitespace-pre-line>
+  <div v-if="errorInfo" bg-base color-base grid h-full w-full place-content-center whitespace-pre-line>
     <div font-200 text-xl mb6>
       <a
         href="https://github.com/eslint/config-inspector" target="_blank"

diff --git a/components/NavBar.vue b/components/NavBar.vue
@@ -36,9 +36,12 @@ function toggleRuleView() {
     >
       <img src="/favicon.svg" inline-block h-1em> ESLint Config Inspector
     </a>
-    <div op50 font-mono text-base inline-block translate-y--5 ml1>
+    <a
+      op50 font-mono text-base inline-block translate-y--5 ml1
+      :href="`https://github.com/eslint/config-inspector/releases/tag/v${version}`" target="_blank"
+    >
       v{{ version }}
-    </div>
+    </a>
   </div>
   <div v-if="payload.meta.configPath" flex="~ gap-1 items-center" text-sm my1>
     <span font-mono op35>{{ payload.meta.configPath }}</span>

diff --git a/components/RuleItem.vue b/components/RuleItem.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useClipboard } from '@vueuse/core'
+import { vTooltip } from 'floating-vue'
 import { getRuleLevel } from '~/composables/rules'
 import type { RuleConfigStates, RuleInfo, RuleLevel } from '~/composables/types'
 
@@ -93,11 +94,20 @@ function capitalize(str?: string) {
     </VDropdown>
   </div>
 
-  <div v-if="!gridView" grid="~ cols-2 items-center gap2" mx1>
-    <div v-if="rule.fixable" title="Fixable" i-ph-hammer-duotone op35 />
+  <div v-if="!gridView" grid="~ cols-2 items-center gap1" mx2>
+    <div
+      v-if="rule.docs?.recommended"
+      v-tooltip="'✅ Recommended'"
+      i-ph-check-square-duotone op50
+    />
     <div v-else />
 
-    <div v-if="rule.docs?.recommended" title="Recommended" i-ph-thumbs-up-duotone op35 />
+    <div
+      v-if="rule.fixable"
+      v-tooltip="'🔧 Fixable'"
+      i-ph-wrench-duotone op50
+    />
+    <div v-else />
   </div>
 
   <div :class="props.class" flex="~ gap-2 items-center">
@@ -122,8 +132,16 @@ function capitalize(str?: string) {
       <div v-if="rule.deprecated" border="~ red/25 rounded" bg-red:5 px1 text-xs text-red>
         DEPRECATED
       </div>
-      <div v-if="rule.fixable" title="Fixable" i-ph-hammer-duotone op35 />
-      <div v-if="rule.docs?.recommended" title="Recommended" i-ph-thumbs-up-duotone op35 />
+      <div
+        v-if="rule.docs?.recommended"
+        v-tooltip="'✅ Recommended'"
+        i-ph-check-square-duotone op50
+      />
+      <div
+        v-if="rule.fixable"
+        v-tooltip="'🔧 Fixable'"
+        i-ph-wrench-duotone op50
+      />
     </div>
   </div>
 </template>
diff --git a/pages/configs.vue b/pages/configs.vue
@@ -172,7 +172,8 @@ debouncedWatch(
           v-model="input"
           placeholder="Test matching with filepath..."
           border="~ base rounded-full"
-          w-full bg-transparent px3 py2 pl10 font-mono outline-none
+          :class="input ? 'font-mono' : ''"
+          w-full bg-transparent px3 py2 pl10 outline-none
           @focus="autoCompleteOpen = true"
           @click="autoCompleteOpen = true"
           @blur="autoCompleteBlur"

diff --git a/pages/rules.vue b/pages/rules.vue
@@ -80,9 +80,10 @@ function resetFilters() {
       <div relative flex>
         <input
           v-model="filters.search"
+          :class="filters.search ? 'font-mono' : ''"
           placeholder="Search rules..."
           border="~ base rounded-full"
-          w-full bg-transparent px3 py2 pl10 font-mono outline-none
+          w-full bg-transparent px3 py2 pl10 outline-none
         >
         <div absolute bottom-0 left-0 top-0 flex="~ items-center justify-center" p4 op50>
           <div i-ph-magnifying-glass-duotone />

diff --git a/styles/global.css b/styles/global.css
@@ -4,9 +4,11 @@ html, body , #__nuxt{
   padding: 0;
 }
 
+body {
+  --at-apply: bg-base color-base font-sans;
+}
+
 html.dark {
-  background: #111;
-  color: white;
   color-scheme: dark;
 }
 
@@ -25,7 +27,7 @@ html.dark .shiki span {
 /* Overrides Floating Vue */
 .v-popper--theme-dropdown .v-popper__inner,
 .v-popper--theme-tooltip .v-popper__inner {
-  --at-apply: bg-base text-black dark:text-white rounded border border-base shadow;
+  --at-apply: bg-base color-base font-sans rounded border border-base shadow;
   box-shadow: 0 6px 30px #0000001a;
 }
 

diff --git a/uno.config.ts b/uno.config.ts
@@ -11,8 +11,9 @@ import {
 
 export default defineConfig({
   shortcuts: {
-    'bg-base': 'bg-white dark:bg-#111',
-    'bg-glass': 'bg-white:75 dark:bg-#111:75 backdrop-blur-5',
+    'color-base': 'color-neutral-500 dark:color-neutral-300',
+    'bg-base': 'bg-white dark:bg-neutral-900',
+    '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',
@@ -24,9 +25,77 @@ export default defineConfig({
     'action-button': 'border border-base rounded flex gap-2 items-center px2 py1 text-sm op75 hover:op100 hover:bg-hover',
   },
   theme: {
+    // Reference: https://github.com/eslint/eslint.org/blob/main/src/assets/scss/tokens/themes.scss
     colors: {
-      primary: '#4B32C3',
-      accent: '#8080F2',
+      neutral: {
+        25: '#FCFCFD',
+        50: '#F9FAFB',
+        100: '#F2F4F7',
+        200: '#E4E7EC',
+        300: '#D0D5DD',
+        400: '#98A2B3',
+        500: '#667085',
+        600: '#475467',
+        700: '#344054',
+        800: '#1D2939',
+        900: '#101828',
+      },
+
+      primary: {
+        25: '#FBFBFF',
+        50: '#F6F6FE',
+        100: '#ECECFD',
+        200: '#DEDEFF',
+        300: '#CCCCFA',
+        400: '#B7B7FF',
+        500: '#A0A0F5',
+        600: '#8080F2',
+        700: '#6358D4',
+        800: '#4B32C3',
+        900: '#341BAB',
+      },
+
+      warning: {
+        25: '#FFFCF5',
+        50: '#FFFAEB',
+        100: '#FEF0C7',
+        200: '#FEDF89',
+        300: '#FEC84B',
+        400: '#FDB022',
+        500: '#F79009',
+        600: '#DC6803',
+        700: '#B54708',
+        800: '#93370D',
+        900: '#7A2E0E',
+      },
+
+      success: {
+        25: '#F6FEF9',
+        50: '#ECFDF3',
+        100: '#D1FADF',
+        200: '#A6F4C5',
+        300: '#6CE9A6',
+        400: '#32D583',
+        500: '#12B76A',
+        600: '#039855',
+        700: '#027A48',
+        800: '#05603A',
+        900: '#054F31',
+      },
+
+      rose: {
+        25: '#FFF5F6',
+        50: '#FFF1F3',
+        100: '#FFE4E8',
+        200: '#FECDD6',
+        300: '#FEA3B4',
+        400: '#FD6F8E',
+        500: '#F63D68',
+        600: '#E31B54',
+        700: '#C01048',
+        800: '#A11043',
+        900: '#89123E',
+      },
     },
   },
   presets: [
@@ -38,9 +107,8 @@ export default defineConfig({
     presetTypography(),
     presetWebFonts({
       fonts: {
-        sans: 'DM Sans',
-        serif: 'DM Serif Display',
-        mono: 'DM Mono',
+        sans: 'Inter',
+        mono: 'Space Mono',
       },
     }),
   ],