From 512f0a567ed3ecd8b039390d7a80576320245aaf Mon Sep 17 00:00:00 2001
From: "David R. Myers" <davidrmyersii@gmail.com>
Date: Thu, 1 Feb 2024 21:06:00 -0500
Subject: [PATCH 1/5] Update in-editor checkbox styles

---
 components/CoreEditor.vue | 6 ++++++
 components/Editor.vue     | 6 ++++++
 2 files changed, 12 insertions(+)

diff --git a/components/CoreEditor.vue b/components/CoreEditor.vue
index 6071c8b7..f9ca593e 100644
--- a/components/CoreEditor.vue
+++ b/components/CoreEditor.vue
@@ -86,6 +86,12 @@ export default defineComponent({
   border-radius: 0;
 }
 
+:deep(.ink-mde .ink-mde-task-toggle) {
+  @apply checkbox;
+
+  top: -2px;
+}
+
 :deep(.ink-mde .cm-editor),
 :deep(.ink-mde .cm-scroller) {
   flex-grow: 1;
diff --git a/components/Editor.vue b/components/Editor.vue
index c6e9a8e9..ecd4583a 100644
--- a/components/Editor.vue
+++ b/components/Editor.vue
@@ -218,6 +218,12 @@ export default defineComponent({
     --ink-syntax-processing-instruction-color: rgb(v-bind('nextLayer.textCssVar') / 0.1);
   }
 
+  :deep(.ink-mde .ink-mde-task-toggle) {
+    @apply checkbox;
+
+    top: -2px;
+  }
+
   @media (max-width: 767px) {
     :deep(.ink-mde-toolbar) {
       order: 1;

From 488ff7522375a3123afc8bf076273f9987ac2297 Mon Sep 17 00:00:00 2001
From: "David R. Myers" <davidrmyersii@gmail.com>
Date: Thu, 1 Feb 2024 21:07:16 -0500
Subject: [PATCH 2/5] Invert layers 0 and 1 for dark theme

---
 assets/css/tailwind.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/assets/css/tailwind.css b/assets/css/tailwind.css
index 27b304cc..32cf25a7 100644
--- a/assets/css/tailwind.css
+++ b/assets/css/tailwind.css
@@ -12,22 +12,22 @@
   }
 
   .dark {
-    --layer-0-bg: 24 24 27;
+    --layer-0-bg: 18 18 18;
     --layer-0-bg-hover: 39 39 42;
     --layer-0-bg-active: 39 39 42;
-    --layer-0-bg-disabled: 26 26 29;
-    --layer-0-border: var(--layer-0-bg-hover);
+    --layer-0-bg-disabled: 20 20 20;
+    --layer-0-border: var(--layer-1-bg-hover);
     --layer-0-text: 212 212 216;
     --layer-0-text-hover: 212 212 216;
     --layer-0-text-active: 212 212 216;
     --layer-0-text-disabled: 113 113 122;
     --layer-0-text-muted: 113 113 122;
 
-    --layer-1-bg: 18 18 18;
+    --layer-1-bg: 24 24 27;
     --layer-1-bg-hover: 39 39 42;
     --layer-1-bg-active: 39 39 42;
-    --layer-1-bg-disabled: 20 20 20;
-    --layer-1-border: var(--layer-1-bg-hover);
+    --layer-1-bg-disabled: 26 26 29;
+    --layer-1-border: var(--layer-0-bg-hover);
     --layer-1-text: 212 212 216;
     --layer-1-text-hover: 212 212 216;
     --layer-1-text-active: 212 212 216;

From 5aa77695c14bbe980581b934a7720bb97ef33285 Mon Sep 17 00:00:00 2001
From: "David R. Myers" <davidrmyersii@gmail.com>
Date: Thu, 1 Feb 2024 21:34:04 -0500
Subject: [PATCH 3/5] Make sure meta nav timestamps stay at the bottom

---
 pages/docs/[docId]/meta.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/docs/[docId]/meta.vue b/pages/docs/[docId]/meta.vue
index 80dfb1bf..bce58c96 100644
--- a/pages/docs/[docId]/meta.vue
+++ b/pages/docs/[docId]/meta.vue
@@ -196,7 +196,7 @@ export default {
       </div>
     </CoreNavPanel>
     <CoreDivider />
-    <CoreNavPanel class="flex flex-col gap-1">
+    <CoreNavPanel class="flex flex-col flex-grow justify-end gap-1">
       <div v-if="doc.updatedAt">
         <small class="text-layer-muted">Last Saved</small>
         <div class="capitalize pt-2 md:pt-1">

From 84ed71c7c9f58dafb0f3fe5e5317d7de275e7f49 Mon Sep 17 00:00:00 2001
From: "David R. Myers" <davidrmyersii@gmail.com>
Date: Fri, 2 Feb 2024 08:50:45 -0500
Subject: [PATCH 4/5] Update some more layer-related styles

---
 components/Editor.vue    | 7 ++++++-
 components/Providers.vue | 4 ++--
 composables/useLayers.ts | 5 +++++
 3 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/Editor.vue b/components/Editor.vue
index ecd4583a..1fb0d0d2 100644
--- a/components/Editor.vue
+++ b/components/Editor.vue
@@ -34,7 +34,7 @@ export default defineComponent({
     const { user } = useUser()
     const ink = ref()
     const { isMounted } = useVue()
-    const { nextLayer } = useLayers()
+    const { layer, nextLayer } = useLayers()
     const bgCssVar = computed(() => `var(--layer-${nextLayer.value.index}-bg)`)
     const bgHoverCssVar = computed(() => `var(--layer-${nextLayer.value.index}-bg-hover)`)
 
@@ -69,6 +69,7 @@ export default defineComponent({
       focus,
       ink,
       isMounted,
+      layer,
       nextLayer,
       uploadFiles,
       user,
@@ -264,6 +265,10 @@ export default defineComponent({
       border-radius: 0.25rem;
       padding: 0.25rem;
     }
+
+    :deep(.ink-mde .ink-mde-details) {
+      border-top: 2px solid rgb(v-bind('layer.bgHoverCssVar'));
+    }
   }
 
   :deep(.ink-mde) {
diff --git a/components/Providers.vue b/components/Providers.vue
index ad694e92..f197d0cd 100644
--- a/components/Providers.vue
+++ b/components/Providers.vue
@@ -93,7 +93,7 @@ export default defineComponent({
       </div>
     </div>
 
-    <div class="flex flex-col gap-2 lg:max-w-xs">
+    <CoreLayer class="flex flex-col gap-2 lg:max-w-xs">
       <CoreButton v-if="!github" class="w-full lg:w-auto whitespace-nowrap justify-start" @click="linkGitHub">
         <IconGitHub class="h-5 w-5" />
         <span>Link GitHub</span>
@@ -115,6 +115,6 @@ export default defineComponent({
         </svg>
         <span class="action">Sign Out</span>
       </CoreButton>
-    </div>
+    </CoreLayer>
   </section>
 </template>
diff --git a/composables/useLayers.ts b/composables/useLayers.ts
index d6da8215..687d8c42 100644
--- a/composables/useLayers.ts
+++ b/composables/useLayers.ts
@@ -7,6 +7,7 @@ export const layerMap = {
     bgDisabled: 'disabled:bg-layer-0',
     bgDisabledCssVar: 'var(--layer-0-bg-disabled)',
     bgHover: 'hover:bg-layer-0',
+    bgHoverCssVar: 'var(--layer-0-bg-hover)',
     bgUiActive: 'ui-active:bg-layer-0',
     bgUiOpen: 'ui-open:bg-layer-0',
     class: 'layer-0',
@@ -21,6 +22,7 @@ export const layerMap = {
     bgDisabled: 'disabled:bg-layer-1',
     bgDisabledCssVar: 'var(--layer-1-bg-disabled)',
     bgHover: 'hover:bg-layer-1',
+    bgHoverCssVar: 'var(--layer-1-bg-hover)',
     bgUiActive: 'ui-active:bg-layer-1',
     bgUiOpen: 'ui-open:bg-layer-1',
     class: 'layer-1',
@@ -35,6 +37,7 @@ export const layerMap = {
     bgDisabled: 'disabled:bg-layer-2',
     bgDisabledCssVar: 'var(--layer-2-bg-disabled)',
     bgHover: 'hover:bg-layer-2',
+    bgHoverCssVar: 'var(--layer-2-bg-hover)',
     bgUiActive: 'ui-active:bg-layer-2',
     bgUiOpen: 'ui-open:bg-layer-2',
     class: 'layer-2',
@@ -49,6 +52,7 @@ export const layerMap = {
     bgDisabled: 'disabled:bg-layer-3',
     bgDisabledCssVar: 'var(--layer-3-bg-disabled)',
     bgHover: 'hover:bg-layer-3',
+    bgHoverCssVar: 'var(--layer-3-bg-hover)',
     bgUiActive: 'ui-active:bg-layer-3',
     bgUiOpen: 'ui-open:bg-layer-3',
     class: 'layer-3',
@@ -63,6 +67,7 @@ export const layerMap = {
     bgDisabled: 'disabled:bg-layer-4',
     bgDisabledCssVar: 'var(--layer-4-bg-disabled)',
     bgHover: 'hover:bg-layer-4',
+    bgHoverCssVar: 'var(--layer-4-bg-hover)',
     bgUiActive: 'ui-active:bg-layer-4',
     bgUiDisabled: 'ui-disabled:bg-layer-4',
     class: 'layer-4',

From a08262cdc916fefbfd550f05b2dfa7c6dc64c2b2 Mon Sep 17 00:00:00 2001
From: "David R. Myers" <davidrmyersii@gmail.com>
Date: Fri, 2 Feb 2024 09:01:00 -0500
Subject: [PATCH 5/5] Remove unused code

---
 app.vue                  | 96 ----------------------------------------
 components/Alert.vue     |  8 ----
 components/CoreAlert.vue | 35 ++++-----------
 3 files changed, 9 insertions(+), 130 deletions(-)
 delete mode 100644 components/Alert.vue

diff --git a/app.vue b/app.vue
index e9a49b42..171987d6 100644
--- a/app.vue
+++ b/app.vue
@@ -85,12 +85,6 @@ export default defineComponent({
   height: var(--app-height, 100vh);
 }
 
-.october {
-  --ink-syntax-name-color: #eb6123;
-  --ink-syntax-name-label-color: #abb2bf;
-  --ink-syntax-name-variable-color: #ebda23;
-}
-
 * {
   box-sizing: border-box;
 }
@@ -101,7 +95,6 @@ export default defineComponent({
 
 body {
   font-family: "Inter", helvetica, sans-serif !important;
-  margin: 0;
 }
 
 body,
@@ -112,7 +105,6 @@ pre {
 
 pre {
   font-family: "Fira Code", monospace !important;
-  margin: 0;
 }
 
 .CodeMirror .cm-m-markdown:not(.cm-comment) {
@@ -127,98 +119,10 @@ pre {
   font-family: "Inter", helvetica, sans-serif !important;
 }
 
-.notification {
-  width: 20rem;
-  z-index: 90;
-}
-
-.notification .notification-body {
-  padding: 1rem;
-}
-
 svg {
   flex-shrink: 0;
 }
 
-.border-transparent {
-  border-color: transparent !important;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.relative-fixed {
-  /* this is a hack to position fixed elements relative to this container instead of the viewport */
-  transform: translateZ(0);
-}
-
-.bottom-0 {
-  bottom: 0 !important;
-}
-
-.bottom-3 {
-  bottom: 1rem !important;
-}
-
-.left-0 {
-  left: 0 !important;
-}
-
-.right-0 {
-  right: 0 !important;
-}
-
-.right-2 {
-  right: 0.5rem !important;
-}
-
-.right-3 {
-  right: 1rem !important;
-}
-
-.top-0 {
-  top: 0 !important;
-}
-
-.top-2 {
-  top: 0.5rem !important;
-}
-
-.top-3 {
-  top: 1rem !important;
-}
-
-.z-index-10 {
-  z-index: 10;
-}
-
-.z-index-1 {
-  z-index: 1;
-}
-
-.min-h-0 {
-  min-height: 0 !important;
-}
-
-.min-w-0 {
-  min-width: 0 !important;
-}
-
-/* theming */
-
-.dark .notification {
-  box-shadow: 0 0 0 0.125rem #111 !important;
-}
-
-.light .notification {
-  box-shadow: 0 0 0 0.125rem #eee !important;
-}
-
-hr {
-  background-color: #aaa;
-}
-
 /* lib */
 
 /* When overlay scrollbars are mounted, we need to remove overflow from the host element. */
diff --git a/components/Alert.vue b/components/Alert.vue
deleted file mode 100644
index 6f81f620..00000000
--- a/components/Alert.vue
+++ /dev/null
@@ -1,8 +0,0 @@
-<template>
-  <div role="alert" class="flex items-center gap-3 rounded p-2 border border-yellow-200 shadow">
-    <svg class="text-yellow-200" height="1.25em" width="1.25em" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-    </svg>
-    <slot />
-  </div>
-</template>
diff --git a/components/CoreAlert.vue b/components/CoreAlert.vue
index 25cd6651..fc9cc1cc 100644
--- a/components/CoreAlert.vue
+++ b/components/CoreAlert.vue
@@ -1,37 +1,20 @@
-<script lang="ts">
+<script lang="ts" setup>
 import { ExclamationCircleIcon, InformationCircleIcon, XCircleIcon } from '@heroicons/vue/24/outline'
-import { type PropType, defineComponent, ref } from 'vue'
+import { computed } from 'vue'
 
-export default defineComponent({
-  components: {
-    ExclamationCircleIcon,
-    InformationCircleIcon,
-    XCircleIcon,
-  },
-  props: {
-    type: {
-      default: 'notice',
-      type: String as PropType<'danger' | 'notice' | 'warning'>,
-    },
-  },
-  setup(props) {
-    const isDanger = ref(props.type === 'danger')
-    const isNotice = ref(props.type === 'notice')
-    const isWarning = ref(props.type === 'warning')
+const props = defineProps<{
+  type: 'danger' | 'notice' | 'warning',
+}>()
 
-    return {
-      isDanger,
-      isNotice,
-      isWarning,
-    }
-  },
-})
+const isDanger = computed(() => props.type === 'danger')
+const isNotice = computed(() => props.type === 'notice')
+const isWarning = computed(() => props.type === 'warning')
 </script>
 
 <template>
   <section
     :class="{ 'text-red-200': isDanger, 'text-blue-200': isNotice, 'text-yellow-200': isWarning }"
-    class="flex gap-3 rounded p-2 border border-current shadow"
+    class="flex gap-3 rounded p-2 border border-layer"
     role="alert"
   >
     <span class="flex items-start">