mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-15 17:24:10 +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>
46 lines
1.0 KiB
Vue
46 lines
1.0 KiB
Vue
<template>
|
|
<router-link v-bind="$attrs" :class="containerClass">
|
|
<span v-if="hasIconSlot" class="mr-3">
|
|
<slot name="icon" />
|
|
</span>
|
|
<span>{{ title }}</span>
|
|
</router-link>
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, computed } from 'vue'
|
|
|
|
export default {
|
|
name: 'ListItem',
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
required: false,
|
|
default: '',
|
|
},
|
|
active: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
index: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
},
|
|
setup(props, { slots }) {
|
|
const defaultClass = `cursor-pointer px-3 py-2 mb-0.5 text-sm font-medium leading-5 flex items-center rounded-lg transition-colors`
|
|
let hasIconSlot = computed(() => {
|
|
return !!slots.icon
|
|
})
|
|
let containerClass = computed(() => {
|
|
if (props.active) return `${defaultClass} text-primary-600 bg-primary-50 font-semibold`
|
|
else return `${defaultClass} text-body hover:bg-hover hover:text-heading`
|
|
})
|
|
return {
|
|
hasIconSlot,
|
|
containerClass,
|
|
}
|
|
},
|
|
}
|
|
</script>
|