fix: mask height difference in code editor and reduce contrast of edi…

…tor elements in light mode
formkit · Feb 12, 2024 · d9cd123 · d9cd123
1 parent 8c839ae
commit d9cd123
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 6 deletions.
diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
@@ -94,7 +94,7 @@ html.dark::before {
   @apply text-lg font-bold mb-3 dark:text-gray-100;
 }
 .page-section table {
-  @apply w-full mb-10 text-base text-slate-700 rounded-lg shadow-md border border-slate-300 border-separate border-spacing-0;
+  @apply w-full mb-10 text-base text-slate-700 rounded-lg shadow-sm border border-slate-300 border-separate border-spacing-0;
   @apply dark:border-purple-950 dark:shadow-none dark:text-slate-200;
 }
 .page-section table th {

diff --git a/docs/components/CodeExample.client.vue b/docs/components/CodeExample.client.vue
@@ -119,12 +119,14 @@ const stopWatch = watch(el, () => {
       mdl:-mx-8
       lg:-mx-24
       shadow-sm
+      bg-[#f9f9f9] ${'' /* --vs-editor-background */}
       after:-z-10
       after:absolute
-      after:-inset-1
-      after:bg-sky-600
+      after:-inset-px
+      after:bg-sky-600/50
       after:rounded-lg
 
+      dark:bg-[#180626] ${'' /* --vs-editor-background */}
       dark:after:-inset-px
       dark:after:bg-purple-900
     `"
@@ -144,8 +146,11 @@ const stopWatch = watch(el, () => {
         md:rounded-tr-lg
         md:rounded-bl-none
 
-        dark:bg-black/40
-        dark:border-0
+        dark:bg-purple-600/5
+        dark:border-t-0
+        dark:border-r-0
+        dark:border-b-0
+        dark:border-l-purple-950/50
       `"
     >
       <ul v-if="result">

diff --git a/docs/components/HeadingSection.vue b/docs/components/HeadingSection.vue
@@ -16,7 +16,7 @@ const isInView = useElementVisibility(heading)
     <span class="sr-only">{{ title }}</span>
     <ClockFont
       :chars="title.toLocaleLowerCase()"
-      :delay="200"
+      :delay="120"
       :start="isInView"
     />
   </h2>