Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make the dark theme more consistent #266

Merged
merged 5 commits into from
Feb 3, 2024
+41 −140
Merged

Make the dark theme more consistent #266

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
512f0a5
Update in-editor checkbox styles
davidmyersdev Feb 2, 2024
488ff75
Invert layers 0 and 1 for dark theme
davidmyersdev Feb 2, 2024
5aa7769
Make sure meta nav timestamps stay at the bottom
davidmyersdev Feb 2, 2024
84ed71c
Update some more layer-related styles
davidmyersdev Feb 2, 2024
a08262c
Remove unused code
davidmyersdev Feb 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 0 additions & 96 deletions app.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -101,7 +95,6 @@ export default defineComponent({

body {
font-family: "Inter", helvetica, sans-serif !important;
margin: 0;
}

body,
Expand All @@ -112,7 +105,6 @@ pre {

pre {
font-family: "Fira Code", monospace !important;
margin: 0;
}

.CodeMirror .cm-m-markdown:not(.cm-comment) {
Expand All @@ -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. */
Expand Down
12 changes: 6 additions & 6 deletions assets/css/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
8 changes: 0 additions & 8 deletions components/Alert.vue
View file
Open in desktop

This file was deleted.

35 changes: 9 additions & 26 deletions components/CoreAlert.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
6 changes: 6 additions & 0 deletions components/CoreEditor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
13 changes: 12 additions & 1 deletion components/Editor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)`)

Expand Down Expand Up @@ -69,6 +69,7 @@ export default defineComponent({
focus,
ink,
isMounted,
layer,
nextLayer,
uploadFiles,
user,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down
4 changes: 2 additions & 2 deletions components/Providers.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -115,6 +115,6 @@ export default defineComponent({
</svg>
<span class="action">Sign Out</span>
</CoreButton>
</div>
</CoreLayer>
</section>
</template>
5 changes: 5 additions & 0 deletions composables/useLayers.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand All @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion pages/docs/[docId]/meta.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading