docs: styled up darkmode toggle

* docs: adds theme toggle in header * docs: add date log to `applyOffset` example * feat: add date select for dynamically change in all examples, update UI * fix: remove datePicker logic * revert: remove `shadcn-vue` * fix: add theme switch in `SuperHeader` * chore: update `pnpm-lock.yaml` * dcos: tightens up light/dark toggle button --------- Co-authored-by: Roman Hrynevych <[email protected]>
formkit · Feb 23, 2024 · 542efd3 · 542efd3
1 parent 6d7ff26
commit 542efd3
Show file tree

Hide file tree

Showing 17 changed files with 274 additions and 294 deletions.
diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
@@ -56,17 +56,17 @@ html.dark body::before {
 }
 
 .page-section p {
-  @apply lg:text-base mb-8 text-slate-800 leading-6 lg:leading-8 dark:text-slate-200;
+  @apply mb-8 leading-6 text-slate-800 lg:text-base lg:leading-8 dark:text-slate-200;
 }
 
 .page-section p code,
 .page-section ul code,
 .page-section aside code {
-  @apply bg-black/10 font-mono p-1 min-[1400px]:text-base rounded dark:bg-black/30 dark:border dark:border-purple-950 dark:text-fuchsia-300;
+  @apply rounded bg-black/10 p-1 font-mono min-[1400px]:text-base dark:border dark:border-purple-950 dark:bg-black/30 dark:text-fuchsia-300;
 }
 
 .page-section > ul {
-  @apply pl-8 min-[1400px]:text-base text-slate-800 leading-7 mb-8;
+  @apply mb-8 pl-8 leading-7 text-slate-800 min-[1400px]:text-base;
   @apply dark:text-slate-200;
 }
 
@@ -75,12 +75,12 @@ html.dark body::before {
 }
 
 .jump-list a {
-  @apply block p-4 rounded-lg cursor-pointer bg-transparent duration-300 border border-slate-300 bg-slate-50 hover:bg-white hover:shadow-md transition-all;
-  @apply dark:border-purple-950 dark:bg-black/10 dark:hover:bg-purple-950 dark:text-gray-200;
+  @apply block cursor-pointer rounded-lg border border-slate-300 bg-slate-50 bg-transparent p-4 transition-all duration-300 hover:bg-white hover:shadow-md;
+  @apply dark:border-purple-950 dark:bg-black/10 dark:text-gray-200 dark:hover:bg-purple-950;
 }
 
 .page-section > ul.jump-list {
-  @apply pl-4 -mt-4;
+  @apply -mt-4 pl-4;
 }
 
 .page-section > ul.jump-list a {
@@ -96,11 +96,11 @@ html.dark body::before {
 }
 
 .page-section h3 {
-  @apply text-lg font-bold mb-3 dark:text-gray-100;
+  @apply mb-3 text-lg font-bold dark:text-gray-100;
 }
 .page-section table {
-  @apply w-full mb-10 min-[1400px]: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;
+  @apply mb-10 w-full border-separate border-spacing-0 rounded-lg border border-slate-300 text-slate-700 shadow-sm min-[1400px]:text-base;
+  @apply dark:border-purple-950 dark:text-slate-200 dark:shadow-none;
 }
 .page-section table th {
   @apply bg-gray-50 p-3 text-left text-black;
@@ -114,7 +114,7 @@ html.dark body::before {
 }
 
 .page-section table td {
-  @apply bg-gray-50 py-2 px-3 leading-8;
+  @apply bg-gray-50 px-3 py-2 leading-8;
   @apply dark:bg-black/25;
 }
 .page-section table td:first-child {
@@ -137,7 +137,7 @@ html.dark body::before {
 }
 
 .page-section table code {
-  @apply bg-slate-100 font-mono p-1 min-[1400px]:text-base rounded;
+  @apply rounded bg-slate-100 p-1 font-mono min-[1400px]:text-base;
   @apply dark:bg-purple-950 dark:text-slate-100;
 }
 .page-section table tr:nth-child(odd) code {

diff --git a/docs/assets/moon.svg b/docs/assets/moon.svg
diff --git a/docs/assets/sun.svg b/docs/assets/sun.svg
diff --git a/docs/assets/system.svg b/docs/assets/system.svg
diff --git a/docs/components/CodeExample.client.vue b/docs/components/CodeExample.client.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import * as monacoGlobal from "monaco-editor"
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api"
 import "../monaco-config"
 import { processPlaygroundCode } from "~/src/processPlaygroundCode"
@@ -11,6 +12,8 @@ const result = ref<Array<string[]>>([])
 const error = ref("")
 const sensibleError = ref<string>()
 
+const colorMode = useColorMode()
+
 const stopWatch = watch(el, () => {
   if (!(el.value instanceof HTMLElement)) return
   const container = el.value
@@ -117,12 +120,22 @@ const stopWatch = watch(el, () => {
 
   // Run the initial code
   runInsideWorker(editor.getValue())
+
+  watch(colorMode, () => {
+    nextTick(() => {
+      const isDarkMode = document.documentElement.classList.contains("dark")
+      if (isDarkMode) {
+        editor.updateOptions({ ...editor.getOptions(), theme: "night-owl" })
+      } else {
+        editor.updateOptions({ ...editor.getOptions(), theme: "chrome-dev-tools" })
+      }
+    })
+  })
 })
 </script>
 
 <template>
-  <div
-    :class="`
+  <div :class="`
       relative
       flex
       flex-col
@@ -151,11 +164,9 @@ const stopWatch = watch(el, () => {
       dark:bg-[#180626] ${'' /* --vs-editor-background */}
       dark:after:-inset-px
       dark:after:bg-purple-900
-    `"
-  >
+    `">
     <div class="md:w-3/5 min-[1200px]:w-1/2" ref="el"></div>
-    <div
-      :class="`
+    <div :class="`
         md:w-2/5
         min-[1200px]:w-1/2
         bg-slate-200
@@ -176,13 +187,10 @@ const stopWatch = watch(el, () => {
         dark:border-r-0
         dark:border-b-0
         dark:border-l-purple-950/50
-      `"
-    >
+      `">
       <ul v-if="result">
-        <li
-          v-for="logs in result"
-          class="text-nowrap h-[21px] text-slate-800 text-sm empty:hidden md:empty:block dark:text-purple-300"
-        >
+        <li v-for="logs in result"
+          class="text-nowrap h-[21px] text-slate-800 text-sm empty:hidden md:empty:block dark:text-purple-300">
           {{ logs ? logs.join(", ") : "" }}
         </li>
       </ul>
@@ -192,11 +200,11 @@ const stopWatch = watch(el, () => {
     </div>
     <div
       class="sensible-error bg-red-600 text-white font-mono font-sm p-2 text-xs relative -top-3 -mb-10 h-9 leading-0 z-50 w-auto rounded-lg border border-red-400 shadow-md"
-      v-if="sensibleError"
-    >
+      v-if="sensibleError">
       {{ sensibleError }}
     </div>
   </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+</style>
diff --git a/docs/components/CopyCode.vue b/docs/components/CopyCode.vue
@@ -9,17 +9,15 @@ function copyCode() {
 
 <template>
   <div>
-    <div
-      ref="code"
-      :class="`
+    <div ref="code" :class="`
         group
         cursor-pointer
         relative
         font-mono
         text-sm
         border
         border-slate-300
-        text-fuchsia-700
+        text-blue-600
         data-[success]:text-green-600
         py-3
         px-6
@@ -32,35 +30,21 @@ function copyCode() {
         dark:border-purple-900
         dark:text-fuchsia-400
         dark:data-[success]:text-green-400
-      `"
-      :data-success="success || null"
-      @click.prevent="copyCode"
-    >
+      `" :data-success="success || null" @click.prevent="copyCode">
       <span v-if="!success" class="flex flex-grow items-center justify-between">
         <slot />
-        <IconCopy
-          class="w-3 text-slate-400 group-hover:text-fuchsia-700 dark:group-hover:text-sky-400"
-        />
+        <IconCopy class="w-3 text-slate-400 group-hover:text-fuchsia-700 dark:group-hover:text-sky-400" />
       </span>
       <span v-else class="flex items-center w-full gap-2">
         Install command copied!
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="w-4 h-4 ml-auto"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="m4.5 12.75 6 6 9-13.5"
-          />
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+          class="w-4 h-4 ml-auto">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
         </svg>
       </span>
     </div>
   </div>
 </template>
 
-<style></style>
+<style>
+</style>
diff --git a/docs/components/HeaderButtons.vue b/docs/components/HeaderButtons.vue
@@ -15,8 +15,8 @@ onMounted(() => {
     if (pause.value) return
     packageManager.value =
       packageManagers[
-        (packageManagers.indexOf(packageManager.value) + 1) %
-          packageManagers.length
+      (packageManagers.indexOf(packageManager.value) + 1) %
+      packageManagers.length
       ]
   }, 3500)
 })
@@ -28,63 +28,34 @@ function copyCode() {
 </script>
 
 <template>
-  <div
-    :data-show="showButtons"
-    class="flex flex-col justify-center items-center gap-4 sm:flex-row sm:gap-8 opacity-0 translate-y-4 transition-all duration-700 data-[show]:opacity-100 data-[show]:translate-y-0"
-  >
-    <a
-      class="bg-black py-3 px-6 text-white rounded-lg flex items-center text-sm dark:bg-purple-900"
-      href="https://github.com/formkit/tempo"
-    >
+  <div :data-show="showButtons"
+    class="flex flex-col justify-center items-center gap-4 sm:flex-row sm:gap-8 opacity-0 translate-y-4 transition-all duration-700 data-[show]:opacity-100 data-[show]:translate-y-0">
+    <a class="bg-black py-3 px-6 text-white rounded-lg flex items-center text-sm dark:bg-purple-900"
+      href="https://github.com/formkit/tempo">
       <svg viewBox="0 0 16 16" class="w-4 fill-[#EAC54F] mr-2">
         <path
-          d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"
-        ></path>
+          d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z">
+        </path>
       </svg>
       Star on GitHub
     </a>
-    <a
-      href="#copy-code"
-      @click.prevent="copyCode"
-      @mouseenter="pause = true"
-      @mouseleave="pause = false"
-      ref="code"
-      class="group relative font-mono text-sm text-fuchsia-700 shadow-lg py-3 px-6 bg-white rounded-lg flex items-center min-w-[300px] dark:bg-purple-950/50 dark:border dark:border-purple-900 dark:text-fuchsia-400"
-    >
-      <span
-        v-if="!didCopy"
-        v-text="packageManager"
-        :key="packageManager"
-        class="whitespace-nowrap"
-      />
+    <a href="#copy-code" @click.prevent="copyCode" @mouseenter="pause = true" @mouseleave="pause = false" ref="code"
+      class="group relative font-mono text-sm text-blue-600 shadow-lg py-3 px-6 bg-white rounded-lg flex items-center min-w-[300px] dark:bg-purple-950/50 dark:border dark:border-purple-900 dark:text-fuchsia-400">
+      <span v-if="!didCopy" v-text="packageManager" :key="packageManager" class="whitespace-nowrap" />
       <span class="ml-2 mr-4" v-if="!didCopy">@formkit/tempo</span>
-      <IconCopy
-        v-if="!didCopy"
-        class="w-3 basis-3 flex-shrink-0 ml-auto text-gray-400 group-hover:text-sky-700 dark:group-hover:text-sky-400"
-      />
-      <span
-        v-if="didCopy"
-        :key="packageManager"
-        class="whitespace-nowrap text-green-700 flex w-full items-center gap-2 dark:text-green-400"
-      >
+      <IconCopy v-if="!didCopy"
+        class="w-3 basis-3 flex-shrink-0 ml-auto text-gray-400 group-hover:text-sky-700 dark:group-hover:text-sky-400" />
+      <span v-if="didCopy" :key="packageManager"
+        class="whitespace-nowrap text-green-700 flex w-full items-center gap-2 dark:text-green-400">
         Command copied!
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          class="w-4 h-4 ml-auto"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="m4.5 12.75 6 6 9-13.5"
-          />
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+          class="w-4 h-4 ml-auto">
+          <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
         </svg>
       </span>
     </a>
   </div>
 </template>
 
-<style></style>
+<style>
+</style>
diff --git a/docs/components/SuperHeader.vue b/docs/components/SuperHeader.vue
@@ -1,4 +1,13 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import IconSun from "@/assets/sun.svg"
+import IconMoon from "@/assets/moon.svg"
+
+const colorMode = useColorMode()
+
+const handleColorModeChange = () => {
+  colorMode.preference = colorMode.value === "light" ? "dark" : "light"
+}
+</script>
 
 <template>
   <div
@@ -42,19 +51,36 @@
       <span class="hidden sm:inline sm:mx-[0.5ch]">the</span> FormKit
       <span class="hidden sm:inline sm:ml-[0.5ch]">team</span>
     </NuxtLink>
-    <ul class="flex gap-4">
-      <li>
-        <NuxtLink
-          to="https://github.com/formkit/tempo"
-          class="group/github flex items-center relative"
-        >
-          <GitHubStars />
-          <GitHubLogo
-            class="text-slate-500 opacity-60 group-hover/github:opacity-100 w-4 h-4 sm:w-5 sm:h-5 dark:text-purple-500"
-          />
-        </NuxtLink>
-      </li>
-    </ul>
+    <div class="flex items-center gap-3">
+      <ul class="flex gap-4">
+        <li>
+          <NuxtLink
+            to="https://github.com/formkit/tempo"
+            class="group/github flex items-center relative"
+          >
+            <GitHubStars />
+            <GitHubLogo
+              class="text-slate-500 opacity-60 group-hover/github:opacity-100 w-4 h-4 sm:w-5 sm:h-5 dark:text-purple-500"
+            />
+          </NuxtLink>
+        </li>
+      </ul>
+
+      <button
+        @click="handleColorModeChange"
+        aria-label="Toggle color mode"
+        class="w-5 text-slate-400 hover:text-sky-500 dark:text-purple-700 dark:hover:text-purple-500 outline-none"
+      >
+        <IconSun
+          v-if="colorMode.preference === 'light'"
+          class="block text-xl !m-0"
+        />
+        <IconMoon
+          v-else-if="colorMode.preference === 'dark'"
+          class="block text-xl !m-0"
+        />
+      </button>
+    </div>
   </div>
 </template>