refactor: theming

This commit is contained in:
Anthony Fu 2022-11-23 10:16:31 +08:00
parent 9a77c7da2a
commit a4d235b6fe
22 changed files with 351 additions and 39 deletions

10
app.vue
View file

@ -7,6 +7,9 @@ useHead({
}, },
], ],
}) })
// eslint-disable-next-line no-unused-expressions
isDark.value
</script> </script>
<template> <template>
@ -24,7 +27,10 @@ html, body , #__nuxt{
} }
html.dark { html.dark {
background: #222; color-scheme: dark;
color: white; }
html {
--at-apply: bg-base text-base;
} }
</style> </style>

View file

@ -13,7 +13,7 @@ const createdAt = $computed(() => {
<template> <template>
<div flex flex-col> <div flex flex-col>
<div border="b border"> <div border="b base">
<img h-50 w-full object-cover :src="account.header"> <img h-50 w-full object-cover :src="account.header">
</div> </div>
<div p3 style="margin-top:-3.5rem;" flex flex-col gap-6> <div p3 style="margin-top:-3.5rem;" flex flex-col gap-6>

View file

@ -9,12 +9,12 @@ const { paginator } = defineProps<{
<template> <template>
<CommonPaginator <CommonPaginator
:paginator="paginator" :paginator="paginator"
border="t border" border="t base"
> >
<template #default="{ item }"> <template #default="{ item }">
<AccountCard <AccountCard
:account="item" :account="item"
border="b border" py-1 border="b base" py-1
/> />
</template> </template>
</CommonPaginator> </CommonPaginator>

View file

@ -0,0 +1,17 @@
<script setup lang="ts">
const { modelValue } = defineModel<{
modelValue: boolean
}>()
const el = ref<HTMLDivElement>()
onClickOutside(el, () => {
modelValue.value = false
})
</script>
<template>
<div ref="el" absolute bg-base>
<slot />
</div>
</template>

View file

@ -9,12 +9,12 @@ const { paginator } = defineProps<{
<template> <template>
<CommonPaginator <CommonPaginator
:paginator="paginator" :paginator="paginator"
border="t border" border="t base"
> >
<template #default="{ item }"> <template #default="{ item }">
<ConversationCard <ConversationCard
:conversation="item" :conversation="item"
border="b border" py-1 border="b base" py-1
/> />
</template> </template>
</CommonPaginator> </CommonPaginator>

View file

@ -6,8 +6,9 @@ const buildTimeAgo = useTimeAgo(buildTime)
</script> </script>
<template> <template>
<div p4 text-sm op25> <div p4 text-sm op25 flex="~ col">
A Mastodon client by Nuxt<br> <button i-ri-sun-line dark:i-ri-moon-line text-lg mb4 @click="toggleDark()" />
Built <span :title="buildTime">{{ buildTimeAgo }}</span> · <a href="https://github.com/antfu/nuxtodon" target="_blank">GitHub</a> <div>A Mastodon client by Nuxt</div>
<div>Built <span :title="buildTime">{{ buildTimeAgo }}</span> · <a href="https://github.com/antfu/nuxtodon" target="_blank">GitHub</a></div>
</div> </div>
</template> </template>

View file

@ -9,12 +9,12 @@ const { paginator } = defineProps<{
<template> <template>
<CommonPaginator <CommonPaginator
:paginator="paginator" :paginator="paginator"
border="t border" border="t base"
> >
<template #default="{ item }"> <template #default="{ item }">
<NotificationCard <NotificationCard
:notification="item" :notification="item"
border="t border" pt-4 border="t base" pt-4
/> />
</template> </template>
</CommonPaginator> </CommonPaginator>

View file

@ -51,7 +51,7 @@ onUnmounted(() => {
v-model="draft.status" v-model="draft.status"
:placeholder="placeholder" :placeholder="placeholder"
p2 border-rounded w-full h-40 p2 border-rounded w-full h-40
bg-gray:10 outline-none border="~ border" bg-gray:10 outline-none border="~ base"
/> />
<div flex justify-end> <div flex justify-end>
<button <button

View file

@ -31,7 +31,7 @@ const aspectRatio = computed(() => {
:style="{ :style="{
aspectRatio, aspectRatio,
}" }"
border="~ border" border="~ base"
object-cover rounded-lg object-cover rounded-lg
/> />
</template> </template>
@ -39,7 +39,7 @@ const aspectRatio = computed(() => {
<video <video
:poster="attachment.previewUrl" :poster="attachment.previewUrl"
controls controls
border="~ border" border="~ base"
object-cover object-cover
:style="{ :style="{
aspectRatio, aspectRatio,

View file

@ -29,6 +29,6 @@ const date = computed(() => formatter.format(new Date(status.createdAt)))
{{ date }} · {{ status.application?.name || 'Unknown client' }} {{ date }} · {{ status.application?.name || 'Unknown client' }}
</span> </span>
</div> </div>
<StatusActions :status="status" border="t border" pt-2 /> <StatusActions :status="status" border="t base" pt-2 />
</div> </div>
</template> </template>

View file

@ -8,6 +8,6 @@ defineProps<{
<template> <template>
<template v-for="status of timelines" :key="status.id"> <template v-for="status of timelines" :key="status.id">
<StatusCard :status="status" border="t border" pt-4 /> <StatusCard :status="status" border="t base" pt-4 />
</template> </template>
</template> </template>

View file

@ -9,12 +9,12 @@ const { paginator } = defineProps<{
<template> <template>
<CommonPaginator <CommonPaginator
:paginator="paginator" :paginator="paginator"
border="t border" border="t base"
> >
<template #default="{ item }"> <template #default="{ item }">
<StatusCard <StatusCard
:status="item" :status="item"
border="b border" py-3 border="b base" py-3
/> />
</template> </template>
</CommonPaginator> </CommonPaginator>

2
composables/dark.ts Normal file
View file

@ -0,0 +1,2 @@
export const isDark = useDark()
export const toggleDark = useToggle(isDark)

View file

@ -9,14 +9,14 @@
</div> </div>
</div> </div>
<div class="lg:w-3/4" flex> <div class="lg:w-3/4" flex>
<div class="w-full md:w-2/3" border="l r border" min-h-screen> <div class="w-full md:w-2/3" border="l r base" min-h-screen>
<slot /> <slot />
</div> </div>
<div hidden md:flex="~ col" class="w-1/3"> <div hidden md:flex="~ col" class="w-1/3">
<div fixed> <div fixed>
<slot name="right"> <slot name="right">
<NavTitle p5 /> <NavTitle p5 />
<NavSide border="y border" py8 /> <NavSide border="y base" py8 />
<div flex-auto /> <div flex-auto />
<NavFooter /> <NavFooter />
</slot> </slot>

View file

@ -1,10 +1,11 @@
import VueMacros from 'unplugin-vue-macros/vite'
export default defineNuxtConfig({ export default defineNuxtConfig({
ssr: false, ssr: false,
modules: [ modules: [
'@vueuse/nuxt', '@vueuse/nuxt',
'@unocss/nuxt', '@unocss/nuxt',
'@pinia/nuxt', '@pinia/nuxt',
'@nuxtjs/color-mode',
], ],
experimental: { experimental: {
reactivityTransform: true, reactivityTransform: true,
@ -15,9 +16,6 @@ export default defineNuxtConfig({
'~/styles/vars.css', '~/styles/vars.css',
'~/styles/global.css', '~/styles/global.css',
], ],
colorMode: {
classSuffix: '',
},
alias: { alias: {
querystring: 'rollup-plugin-node-polyfills/polyfills/qs', querystring: 'rollup-plugin-node-polyfills/polyfills/qs',
}, },
@ -28,6 +26,11 @@ export default defineNuxtConfig({
build: { build: {
target: 'esnext', target: 'esnext',
}, },
plugins: [
VueMacros({
defineModel: true,
}),
],
}, },
postcss: { postcss: {
plugins: { plugins: {

View file

@ -22,6 +22,7 @@
"@types/fs-extra": "^9.0.13", "@types/fs-extra": "^9.0.13",
"@types/sanitize-html": "^2.6.2", "@types/sanitize-html": "^2.6.2",
"@unocss/nuxt": "^0.46.5", "@unocss/nuxt": "^0.46.5",
"@vue-macros/volar": "^0.5.3",
"@vueuse/nuxt": "^9.5.0", "@vueuse/nuxt": "^9.5.0",
"blurhash": "^2.0.4", "blurhash": "^2.0.4",
"eslint": "^8.27.0", "eslint": "^8.27.0",
@ -35,6 +36,7 @@
"rollup-plugin-node-polyfills": "^0.2.1", "rollup-plugin-node-polyfills": "^0.2.1",
"sanitize-html": "^2.7.3", "sanitize-html": "^2.7.3",
"typescript": "^4.9.3", "typescript": "^4.9.3",
"ufo": "^1.0.0" "ufo": "^1.0.0",
"unplugin-vue-macros": "^0.16.4"
} }
} }

View file

@ -11,10 +11,10 @@ const { data: context } = await useAsyncData(`${id}-context`, () => masto.status
<template> <template>
<template v-if="status"> <template v-if="status">
<template v-for="comment of context?.ancestors" :key="comment.id"> <template v-for="comment of context?.ancestors" :key="comment.id">
<StatusCard :status="comment" border="t border" pt-4 /> <StatusCard :status="comment" border="t base" pt-4 />
</template> </template>
<StatusDetails :status="status" border="t border" pt-4 /> <StatusDetails :status="status" border="t base" pt-4 />
<div v-if="currentUser" border="t border" p6 flex gap-4> <div v-if="currentUser" border="t base" p6 flex gap-4>
<AccountAvatar :account="currentUser.account" w-10 h-10 /> <AccountAvatar :account="currentUser.account" w-10 h-10 />
<PublishWidget <PublishWidget
w-full w-full
@ -25,7 +25,7 @@ const { data: context } = await useAsyncData(`${id}-context`, () => masto.status
</div> </div>
<template v-for="comment of context?.descendants" :key="comment.id"> <template v-for="comment of context?.descendants" :key="comment.id">
<StatusCard :status="comment" border="t border" pt-4 /> <StatusCard :status="comment" border="t base" pt-4 />
</template> </template>
</template> </template>

View file

@ -11,6 +11,7 @@ specifiers:
'@types/fs-extra': ^9.0.13 '@types/fs-extra': ^9.0.13
'@types/sanitize-html': ^2.6.2 '@types/sanitize-html': ^2.6.2
'@unocss/nuxt': ^0.46.5 '@unocss/nuxt': ^0.46.5
'@vue-macros/volar': ^0.5.3
'@vueuse/nuxt': ^9.5.0 '@vueuse/nuxt': ^9.5.0
blurhash: ^2.0.4 blurhash: ^2.0.4
eslint: ^8.27.0 eslint: ^8.27.0
@ -25,6 +26,7 @@ specifiers:
sanitize-html: ^2.7.3 sanitize-html: ^2.7.3
typescript: ^4.9.3 typescript: ^4.9.3
ufo: ^1.0.0 ufo: ^1.0.0
unplugin-vue-macros: ^0.16.4
devDependencies: devDependencies:
'@antfu/eslint-config': 0.30.1_e3uo4sehh4zr4i6m57mkkxxv7y '@antfu/eslint-config': 0.30.1_e3uo4sehh4zr4i6m57mkkxxv7y
@ -37,6 +39,7 @@ devDependencies:
'@types/fs-extra': 9.0.13 '@types/fs-extra': 9.0.13
'@types/sanitize-html': 2.6.2 '@types/sanitize-html': 2.6.2
'@unocss/nuxt': 0.46.5 '@unocss/nuxt': 0.46.5
'@vue-macros/volar': 0.5.3
'@vueuse/nuxt': 9.5.0_nuxt@3.0.0 '@vueuse/nuxt': 9.5.0_nuxt@3.0.0
blurhash: 2.0.4 blurhash: 2.0.4
eslint: 8.27.0 eslint: 8.27.0
@ -51,6 +54,7 @@ devDependencies:
sanitize-html: 2.7.3 sanitize-html: 2.7.3
typescript: 4.9.3 typescript: 4.9.3
ufo: 1.0.0 ufo: 1.0.0
unplugin-vue-macros: 0.16.4
packages: packages:
@ -162,6 +166,10 @@ packages:
resolution: {integrity: sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==} resolution: {integrity: sha512-CQkeV+oJxUazwjlHD0/3ZD08QWKuGQkhnrKo3e6ly5pd48VUpXbb77q0xMU4+vc2CkJnDS02Eq/M9ugyX20XZA==}
dev: true dev: true
/@antfu/utils/0.6.3:
resolution: {integrity: sha512-sEYpyyKUPOew9QsXZ8feRVMzW6DWLviwOl+/ap06UQW02A8Srbc95CPHVm4eUbiBzBgD46eyIT+przv//KSSlQ==}
dev: true
/@babel/code-frame/7.18.6: /@babel/code-frame/7.18.6:
resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==} resolution: {integrity: sha512-TDCmlK5eOvH+eH7cdAFlNXeVJqWIQ7gW9tY1GJIpUtFb6CmjVyq2VM3u71bOyR8CRihcCgMUYoDNyLXao3+70Q==}
engines: {node: '>=6.9.0'} engines: {node: '>=6.9.0'}
@ -1671,6 +1679,14 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@vitejs/plugin-vue/3.2.0:
resolution: {integrity: sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
vite: ^3.0.0
vue: ^3.2.25
dev: true
/@vitejs/plugin-vue/3.2.0_vite@3.2.4+vue@3.2.45: /@vitejs/plugin-vue/3.2.0_vite@3.2.4+vue@3.2.45:
resolution: {integrity: sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==} resolution: {integrity: sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==}
engines: {node: ^14.18.0 || >=16.0.0} engines: {node: ^14.18.0 || >=16.0.0}
@ -1682,6 +1698,180 @@ packages:
vue: 3.2.45 vue: 3.2.45
dev: true dev: true
/@volar/language-core/1.0.9:
resolution: {integrity: sha512-5Fty3slLet6svXiJw2YxhYeo6c7wFdtILrql5bZymYLM+HbiZtJbryW1YnUEKAP7MO9Mbeh+TNH4Z0HFxHgIqw==}
dependencies:
'@volar/source-map': 1.0.9
'@vue/reactivity': 3.2.45
muggle-string: 0.1.0
dev: true
/@volar/source-map/1.0.9:
resolution: {integrity: sha512-fazB/vy5ZEJ3yKx4fabJyGNI3CBkdLkfEIRVu6+1P3VixK0Mn+eqyUIkLBrzGYaeFM3GybhCLCvsVdNz0Fu/CQ==}
dependencies:
muggle-string: 0.1.0
dev: true
/@vue-macros/api/0.2.0:
resolution: {integrity: sha512-E0rhhszd3MSE8l+A78gj9ONs4lsqOLHpONNzrc7H2nlPhEDsp4ZyQt+A9rRfxX+BTeLYfq64mli2qRV0tixiaw==}
engines: {node: '>=14.19.0'}
dependencies:
'@babel/types': 7.20.2
'@vue-macros/common': 0.13.4
dev: true
/@vue-macros/better-define/0.2.0:
resolution: {integrity: sha512-hcYGpfGLGBw+32jQyAwJU4bd1eE95cD7/aqv9Ov86LJFR5nZ/d7P/Fh1HJBE4KUxC9vJa2ZtdkdiV83n6NADYA==}
engines: {node: '>=14.19.0'}
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/api': 0.2.0
'@vue-macros/common': 0.13.4
unplugin: 1.0.0
dev: true
/@vue-macros/common/0.13.4:
resolution: {integrity: sha512-mQooO33XcY4kQyKBrbGfdIPPsYhpcfmH75SQnXx2vNsNLSNvhLuDaIIV0fhMJ0HV5Z02V9Ka1gx7v1g5bk9Q0A==}
engines: {node: '>=14.19.0'}
dependencies:
'@babel/types': 7.20.2
'@vue/compiler-sfc': 3.2.45
magic-string: 0.26.7
dev: true
/@vue-macros/define-model/0.14.1:
resolution: {integrity: sha512-Mwg/+OGDTEzaGyGXcAUJ0ZfEmgXKEVeWk3zVR6wC7l0f8OOBZ4lb1gWq9NJT+D1Xxy34mdNmkmRVoevW5kN0iQ==}
engines: {node: '>=14.19.0'}
peerDependencies:
'@vueuse/core': ^9.0.0
peerDependenciesMeta:
'@vueuse/core':
optional: true
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
ast-walker-scope: 0.3.0
unplugin: 1.0.0
dev: true
/@vue-macros/define-props/0.0.3:
resolution: {integrity: sha512-GAiALWSrIogwdjbIe60Hi4CSvWFmZG7KySK8JBf7lszWNgoSirj/NKzmJOaHY0/I217tfq4Ew/brbdvcEhCikg==}
engines: {node: '>=14.19.0'}
peerDependencies:
vue: ^3.2.25
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
unplugin: 1.0.0
dev: true
/@vue-macros/define-render/0.13.9:
resolution: {integrity: sha512-TD4/vpVagRiOELKMzbT8VpLd0vTgYcjLzO/GVmtXLQ7LxnAgOQCTdmoQNfCp4B2Jx0KgKINgZJIoHV2c9n84pA==}
engines: {node: '>=14.19.0'}
peerDependencies:
vue: ^2.7.0 || ^3.0.0
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
unplugin: 1.0.0
dev: true
/@vue-macros/define-slots/0.0.6:
resolution: {integrity: sha512-pK4P/oUjcrP/Rr5clsV2eZ53OJ3QlU2fZlnn91w++L0+lio+0M06ptr/IkHNVLNQ9U9Z43MkjHkMLX8Df8BknA==}
engines: {node: '>=14.19.0'}
peerDependencies:
vue: ^2.7.0 || ^3.0.0
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
unplugin: 1.0.0
dev: true
/@vue-macros/hoist-static/0.12.8:
resolution: {integrity: sha512-aSjTBntS/DhQvhyvbSluXwVtrw1WRAxcGjIJTUrgXLyagurIt0KQR8B2ut4ulnMzRaxD8TYmhoWmnzkSNUpXdw==}
engines: {node: '>=14.19.0'}
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
unplugin: 1.0.0
dev: true
/@vue-macros/named-template/0.0.6:
resolution: {integrity: sha512-nEoutSYbwu7QC+uWcs90rD28erP6xZ0aU4uYnrxTUnVcbga9xMchxcs3MgI/2ax6dz/EXf1f1utYXXpGgLi+Tw==}
engines: {node: '>=14.19.0'}
dependencies:
'@rollup/pluginutils': 4.2.1
'@vitejs/plugin-vue': 3.2.0
'@vue-macros/common': 0.13.4
'@vue/compiler-dom': 3.2.45
unplugin: 1.0.0
unplugin-combine: 0.2.8
transitivePeerDependencies:
- esbuild
- rollup
- vite
- vue
- webpack
dev: true
/@vue-macros/setup-component/0.12.8:
resolution: {integrity: sha512-2tRMl8l8OYMpIRYsZyAZfH0dNT7CONMTcmdGEffJb5GvK8XOmdgGk7NFUhaQg3EEnk1SUq1Kdcx+gyH/a0qE4A==}
engines: {node: '>=14.19.0'}
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
unplugin: 1.0.0
unplugin-combine: 0.2.8
transitivePeerDependencies:
- esbuild
- rollup
- vite
- webpack
dev: true
/@vue-macros/setup-sfc/0.12.8:
resolution: {integrity: sha512-eOQxlY53GD/WkJrDHpDvHecWQ70Cw9aSYwS9eT1dQ9vWJVeJ/2R96z09GfYKz6cr9T00OPeZjftU5sC1FO+3xA==}
engines: {node: '>=14.19.0'}
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
unplugin: 1.0.0
dev: true
/@vue-macros/short-emits/0.12.9:
resolution: {integrity: sha512-DrvdyMuiqSVLY26VJCLm5neVmqiAlEVbLAmdH9gORGDn2u+OsmyY9bb2T+04PGzBsu2F64XbJwi0GmXypdcLgQ==}
engines: {node: '>=14.19.0'}
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
unplugin: 1.0.0
dev: true
/@vue-macros/short-vmodel/0.3.8:
resolution: {integrity: sha512-S2MP0/ZusUWpnfCJ5J9lSaEhIbaGB9uxmsUI9liA+bFH5yqPG+DDw63tod2HLfthxk9hPQcz1YZR/ZEd3wUaRA==}
engines: {node: '>=14.19.0'}
dependencies:
'@vue-macros/common': 0.13.4
'@vue/compiler-core': 3.2.45
dev: true
/@vue-macros/volar/0.5.3:
resolution: {integrity: sha512-M0dBOZrOT2kGcay3+oDYdif4EepfmBU5bNVlnojTufTGAsmEtiS/CfqexCDH+zBxfjEpc9bqHVSYFxswPkxjpA==}
peerDependencies:
vue-tsc: ^1.0.9
peerDependenciesMeta:
vue-tsc:
optional: true
dependencies:
'@volar/language-core': 1.0.9
'@vue-macros/common': 0.13.4
'@vue-macros/define-props': 0.0.3
'@vue-macros/short-vmodel': 0.3.8
muggle-string: 0.1.0
transitivePeerDependencies:
- vue
dev: true
/@vue/babel-helper-vue-transform-on/1.0.2: /@vue/babel-helper-vue-transform-on/1.0.2:
resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==} resolution: {integrity: sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==}
dev: true dev: true
@ -2017,6 +2207,14 @@ packages:
es-shim-unscopables: 1.0.0 es-shim-unscopables: 1.0.0
dev: true dev: true
/ast-walker-scope/0.3.0:
resolution: {integrity: sha512-bsOBv3jB+1kGaxwPHhkLiagS+75KfzEqtkNWvATgMGtXM6kJZG3PlG4fYQFMiHeLpoAkwc6G61w07+hEXx39aA==}
engines: {node: '>=14.19.0'}
dependencies:
'@babel/parser': 7.20.3
'@babel/types': 7.20.2
dev: true
/async-sema/3.1.1: /async-sema/3.1.1:
resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==} resolution: {integrity: sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==}
dev: true dev: true
@ -4917,6 +5115,10 @@ packages:
resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
dev: true dev: true
/muggle-string/0.1.0:
resolution: {integrity: sha512-Tr1knR3d2mKvvWthlk7202rywKbiOm4rVFLsfAaSIhJ6dt9o47W4S+JMtWhd/PW9Wrdew2/S2fSvhz3E2gkfEg==}
dev: true
/mute-stream/0.0.8: /mute-stream/0.0.8:
resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==} resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
dev: true dev: true
@ -6933,6 +7135,66 @@ packages:
- vite - vite
dev: true dev: true
/unplugin-combine/0.2.8:
resolution: {integrity: sha512-Z38AC/TEjXbVyZ5HjVqo+lADj0/dcfwWC0Z4y0LNhybJzJQwmcMxm+ZsqHY3faauj4YigmlRMdptR5JEW9RuLg==}
engines: {node: '>=14.19.0'}
peerDependencies:
esbuild: '>=0.13'
rollup: ^2.50.0
vite: ^2.3.0 || ^3.0.0
webpack: 4 || 5
peerDependenciesMeta:
esbuild:
optional: true
rollup:
optional: true
vite:
optional: true
webpack:
optional: true
dependencies:
'@antfu/utils': 0.6.3
unplugin: 0.10.2
dev: true
/unplugin-vue-define-options/0.12.8:
resolution: {integrity: sha512-/5NjICUI9Ick6LI31pc0jTh7DUdEBerLS3UKor3AanldLtqKWYd0lzjHjgg4JXUvuOEkpDf7e0f3jpqE362mKA==}
engines: {node: '>=14.19.0'}
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/common': 0.13.4
ast-walker-scope: 0.3.0
unplugin: 1.0.0
dev: true
/unplugin-vue-macros/0.16.4:
resolution: {integrity: sha512-1dxQ/U4rZhf+LXP/7HSP2ycjCYQFCSB3QYu3zGPSiuN9M3yWjDkSTcXQcsFcdEvJGMbFWzKB/NJd4PnEqhQWOQ==}
engines: {node: '>=14.19.0'}
peerDependencies:
vue: ^2.7.0 || ^3.2.25
dependencies:
'@rollup/pluginutils': 4.2.1
'@vue-macros/better-define': 0.2.0
'@vue-macros/define-model': 0.14.1
'@vue-macros/define-props': 0.0.3
'@vue-macros/define-render': 0.13.9
'@vue-macros/define-slots': 0.0.6
'@vue-macros/hoist-static': 0.12.8
'@vue-macros/named-template': 0.0.6
'@vue-macros/setup-component': 0.12.8
'@vue-macros/setup-sfc': 0.12.8
'@vue-macros/short-emits': 0.12.9
local-pkg: 0.4.2
unplugin-combine: 0.2.8
unplugin-vue-define-options: 0.12.8
transitivePeerDependencies:
- '@vueuse/core'
- esbuild
- rollup
- vite
- webpack
dev: true
/unplugin/0.10.2: /unplugin/0.10.2:
resolution: {integrity: sha512-6rk7GUa4ICYjae5PrAllvcDeuT8pA9+j5J5EkxbMFaV+SalHhxZ7X2dohMzu6C3XzsMT+6jwR/+pwPNR3uK9MA==} resolution: {integrity: sha512-6rk7GUa4ICYjae5PrAllvcDeuT8pA9+j5J5EkxbMFaV+SalHhxZ7X2dohMzu6C3XzsMT+6jwR/+pwPNR3uK9MA==}
dependencies: dependencies:

View file

@ -1,5 +1,5 @@
* { * {
scrollbar-color: #5555 var(--color-border); scrollbar-color: #5555 var(--c-border);
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@ -11,7 +11,7 @@
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
background: var(--color-border); background: var(--c-border);
border-radius: 1px; border-radius: 1px;
} }
@ -31,8 +31,8 @@ html {
.custom-emoji { .custom-emoji {
display: inline-block; display: inline-block;
height: 1.2em; max-height: 1.2em;
width: 1.2em; max-width: 1.2em;
vertical-align: middle; vertical-align: middle;
} }

View file

@ -1,4 +1,11 @@
:root { :root {
--color-primary: #53b3cb; --c-primary: #53b3cb;
--color-border: #88888820; --c-border: #88888820;
--c-bg-base: #fff;
--c-text-base: #222;
}
.dark {
--c-bg-base: #111;
--c-text-base: #fff;
} }

View file

@ -1,6 +1,14 @@
{ {
"extends": "./.nuxt/tsconfig.json", "extends": "./.nuxt/tsconfig.json",
"compilerOptions": { "compilerOptions": {
"strict": true "types": [
"unplugin-vue-macros/macros-global"
]
},
"vueCompilerOptions": {
"plugins": [
"@vue-macros/volar/define-model",
"@vue-macros/volar/short-vmodel"
]
} }
} }

View file

@ -11,6 +11,11 @@ import {
export default defineConfig({ export default defineConfig({
shortcuts: [ shortcuts: [
{
'border-base': 'border-$c-border',
'bg-base': 'bg-$c-bg-base',
'text-base': 'text-$c-text-base',
},
], ],
presets: [ presets: [
presetUno({ presetUno({
@ -35,8 +40,7 @@ export default defineConfig({
], ],
theme: { theme: {
colors: { colors: {
primary: 'var(--color-primary)', primary: 'var(--c-primary)',
border: 'var(--color-border)',
}, },
}, },
}) })