mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-16 09:44:06 +00:00
88adfe0e50
Define 13 semantic color tokens (surface, text, border, hover) with light/dark values in themes.css. Register with Tailwind via @theme inline. Migrate all 335 Vue files from hardcoded gray/white classes to semantic tokens. Add theme toggle (sun/moon/system) in user avatar dropdown. Replace @tailwindcss/forms with custom form reset using theme vars. Add status badge and alert tokens for dark mode. Theme-aware chart grid/labels, skeleton placeholders, and editor. Inline script in <head> prevents flash of wrong theme on load. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
49 lines
1.3 KiB
Vue
49 lines
1.3 KiB
Vue
<template>
|
|
<BaseContentPlaceholders>
|
|
<div
|
|
class="
|
|
shadow-md
|
|
border-2 border-line-default/60
|
|
rounded-lg
|
|
cursor-pointer
|
|
overflow-hidden
|
|
h-100
|
|
"
|
|
>
|
|
<BaseContentPlaceholdersBox class="h-48 lg:h-64 md:h-48 w-full" rounded />
|
|
<div class="px-6 py-5 flex flex-col bg-surface-secondary flex-1 justify-between">
|
|
<BaseContentPlaceholdersText class="w-32 h-8" :lines="1" rounded />
|
|
<div class="flex items-center mt-2">
|
|
<BaseContentPlaceholdersBox
|
|
class="h-10 w-10 rounded-full sm:inline-block mr-2"
|
|
/>
|
|
<div>
|
|
<BaseContentPlaceholdersText
|
|
class="w-32 h-8 ml-2"
|
|
:lines="1"
|
|
rounded
|
|
/>
|
|
</div>
|
|
</div>
|
|
<BaseContentPlaceholdersText
|
|
class="pt-4 w-full h-16"
|
|
:lines="1"
|
|
rounded
|
|
/>
|
|
<div
|
|
class="
|
|
flex
|
|
justify-between
|
|
mt-4
|
|
flex-col
|
|
space-y-2
|
|
sm:space-y-0 sm:flex-row
|
|
"
|
|
>
|
|
<BaseContentPlaceholdersText class="w-32 h-8" :lines="1" rounded />
|
|
<BaseContentPlaceholdersText class="w-32 h-8" :lines="1" rounded />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</BaseContentPlaceholders>
|
|
</template> |