fix: improve color & style

app.vue

@@ -12,7 +12,7 @@ const language = computed(() => {
 <template>
   <Suspense>
     <main flex="~ col" lg:h-screen>
-      <NavBar mb-1 />
+      <NavBar />
 
       <div min-h-0 flex flex-1 flex-col gap2 lg:flex-row>
         <SideBar v-show="showSideBar" overflow-auto lg:w-75 lg:flex-none />

components/AstViewer.vue

@@ -152,9 +152,6 @@ function print() {
           v-model="hideKeysValue"
           type="input"
           placeholder="field1, field2, ..."
-          border="~ $c-border"
-          rounded
-          p1
         />
       </label>
       <button
@@ -166,10 +163,10 @@ function print() {
         px1
         py0.5
         text-sm
-        hover:border-emerald
+        hover:border-current
         @click="print"
       >
-        <div class="i-ri:printer-line" />
+        <div i-ri:printer-line />
         Print in Console
       </button>
     </div>

components/NavBar.vue

@@ -18,7 +18,7 @@ function editVersion() {
 </script>
 
 <template>
-  <div flex="~ wrap" items-center justify-between gap2 p2>
+  <div flex="~ wrap" items-center justify-between gap2 border-b p2>
     <div flex="~ gap4 wrap" max-sm:flex-col>
       <div flex="~ gap1">
         <Logo />

components/SideBar.vue

@@ -3,7 +3,7 @@ import { currentParserGui as ParserGui } from '~/composables/language'
 </script>
 
 <template>
-  <div border-r="1 $c-border" p2>
+  <div border-r p2>
     <h2 flex="~ gap1" mb3 items-center justify-center text-lg font-bold>
       Parser Options
       <ParserOptions v-if="currentParser.options.configurable" />

composables/language/javascript/BabelGui.vue

@@ -122,11 +122,11 @@ const throwExpressions = usePlugin('throwExpressions')
       <span>ESTree</span>
     </label>
 
-    <h3 border-t="1 $c-border" pt1 text-center font-bold>Options</h3>
+    <h3 border-t pt1 text-center font-bold>Options</h3>
 
     <label>
       <span>sourceType</span>
-      <select v-model="sourceType" p1>
+      <select v-model="sourceType">
         <option value="script">script</option>
         <option value="module">module</option>
         <option value="unambiguous">unambiguous</option>
@@ -203,7 +203,7 @@ const throwExpressions = usePlugin('throwExpressions')
       <span>attachComment</span>
     </label>
 
-    <h3 border-t="1 $c-border" pt1 text-center font-bold>Languages</h3>
+    <h3 border-t pt1 text-center font-bold>Languages</h3>
 
     <label>
       <input v-model="typeScript" type="checkbox" switch />
@@ -225,7 +225,7 @@ const throwExpressions = usePlugin('throwExpressions')
       <span>V8 Intrinsic</span>
     </label>
 
-    <h3 border-t="1 $c-border" pt1 text-center font-bold>ES Modules</h3>
+    <h3 border-t pt1 text-center font-bold>ES Modules</h3>
 
     <label>
       <!-- Stage 3 -->
@@ -263,7 +263,7 @@ const throwExpressions = usePlugin('throwExpressions')
       <span>exportDefaultFrom</span>
     </label>
 
-    <h3 border-t="1 $c-border" pt1 text-center font-bold>Functions</h3>
+    <h3 border-t pt1 text-center font-bold>Functions</h3>
 
     <label>
       <!-- Stage 2 -->
@@ -289,7 +289,7 @@ const throwExpressions = usePlugin('throwExpressions')
       <span>partialApplication</span>
     </label>
 
-    <h3 border-t="1 $c-border" pt1 text-center font-bold>Syntaxes</h3>
+    <h3 border-t pt1 text-center font-bold>Syntaxes</h3>
 
     <label>
       <!-- Stage 3 -->

composables/language/javascript/OxcGui.vue

@@ -12,7 +12,7 @@ const sourceFilename = useOption('sourceFilename', '', true)
   <div flex="~ col gap4" text-sm font-mono>
     <label flex="~ col gap1">
       <span>source type</span>
-      <select v-model="sourceType" p1>
+      <select v-model="sourceType">
         <option value="script">script</option>
         <option value="module">module</option>
       </select>

composables/language/javascript/SwcGui.vue

@@ -34,7 +34,7 @@ watch(language, (language) => {
   <div flex="~ col gap4" text-sm font-mono>
     <label>
       <span>Language</span>
-      <select v-model="language" p1>
+      <select v-model="language">
         <option value="ecmascript">JavaScript</option>
         <option value="typescript">TypeScript</option>
       </select>

styles/global.css

@@ -1,16 +1,17 @@
-html,
-body,
-#__nuxt {
-  height: 100vh;
-  margin: 0;
-  padding: 0;
-}
-
 html.dark {
   color-scheme: dark;
   background-color: var(--c-bg-base);
 }
 
+select,
+input {
+  --at-apply: 'border rounded p1 accent-current';
+}
+
+select {
+  --at-apply: 'bg-#0000000d dark:bg-#ffffff1a';
+}
+
 /* Color Mode transition */
 ::view-transition-old(root),
 ::view-transition-new(root) {

styles/vars.css

@@ -2,10 +2,11 @@
   --c-border: #eee;
   --c-bg-base: #fff;
   --c-text-base: #232323;
+  --un-default-border-color: var(--c-border);
 }
 
 .dark {
-  --c-border: #222;
+  --c-border: #333;
   --c-bg-base: #1e1e1e;
   --c-text-base: #fff;
 }