1 files changed, 26 insertions, 20 deletions

diff --git a/source/library/components/DocExplorer/FieldView.svelte b/source/library/components/DocExplorer/FieldView.svelte
index 71d215c..1cc62ae 100644
--- a/source/library/components/DocExplorer/FieldView.svelte
+++ b/source/library/components/DocExplorer/FieldView.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
-  import TypeLink from "./TypeLink.svelte";
+  /*** IMPORT ------------------------------------------- ***/
   import type { GraphQLField, GraphQLInputField } from "graphql";
 
+  /*** UTILITY ------------------------------------------ ***/
+  import { markdown } from "../../graphql/markdown.ts";
+  import TypeLink from "./TypeLink.svelte";
+
   type Props = {
     field: GraphQLField<unknown, unknown> | GraphQLInputField;
     onNavigate: (typeName: string) => void;
@@ -15,7 +19,7 @@
 <style lang="scss">
   .field {
     display: grid;
-    gap: 0.75rem;
+    gap: 1.5rem;
     padding: 0.75rem 1rem;
   }
 
@@ -24,60 +28,62 @@
     font-weight: 600;
   }
 
+  .section-label,
+  .description,
+  .arg-description {
+    color: var(--uchu-yin-6);
+  }
+
   .section-label {
-    color: var(--graphiql-muted, #858585);
     font-size: 0.7rem;
-    letter-spacing: 0.05em;
+    letter-spacing: 0.05rem;
     margin-bottom: 0.25rem;
     text-transform: uppercase;
   }
 
   .description {
-    color: var(--graphiql-muted, #858585);
-    font-size: 0.8125rem;
+    font-size: 0.8rem;
     line-height: 1.4;
   }
 
   .args {
     display: grid;
-    gap: 0.375rem;
+    gap: 1.5rem;
   }
 
   .arg {
-    font-size: 0.8125rem;
-  }
+    font-size: 0.8rem;
 
-  .arg-name {
-    color: var(--graphiql-fg, #d4d4d4);
-  }
-
-  .arg-description {
-    color: var(--graphiql-muted, #858585);
-    font-size: 0.75rem;
-    margin-left: 1rem;
-    margin-top: 0.125rem;
+    &-description {
+      font-size: 0.7rem;
+      margin-left: 1rem;
+      margin-top: 0.125rem;
+    }
   }
 </style>
 
 <div class="field">
   <div class="heading">{field.name}</div>
   {#if field.description}
-    <div class="description">{field.description}</div>
+    <div class="description">{@html markdown(field.description)}</div>
   {/if}
+
   <div>
     <div class="section-label">Type</div>
     <TypeLink {onNavigate} type={field.type}/>
   </div>
+
   {#if args.length > 0}
     <div>
       <div class="section-label">Arguments</div>
+
       <div class="args">
         {#each args as arg}
           <div class="arg">
             <span class="arg-name">{arg.name}</span>:
             <TypeLink {onNavigate} type={arg.type}/>
             {#if arg.description}
-              <div class="arg-description">{arg.description}</div>
+              <div class="arg-description">{@html markdown(arg.description)}</div>
             {/if}
           </div>
         {/each}