Merge pull request #266 from davidmyersdev/update-dark-theme

Make the dark theme more consistent

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. */

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;

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">

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;

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,
@@ -218,6 +219,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;
@@ -258,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) {

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>

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',

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">