Add dark mode with CSS custom property theme system

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>
This commit is contained in:
Darko Gjorgjijoski
2026-04-04 02:05:00 +02:00
parent 7fbe3d85a3
commit 88adfe0e50
221 changed files with 1265 additions and 982 deletions

View File

@@ -6,7 +6,7 @@
px-4
py-2
rounded-lg
bg-gray-300/40
bg-surface-muted/40
whitespace-nowrap
flex-col
mt-1
@@ -18,7 +18,7 @@
pr-10
text-sm
font-medium
text-black
text-heading
truncate
select-all select-color
"

View File

@@ -53,13 +53,13 @@
ring-1 ring-black/5
"
>
<div class="relative grid bg-white">
<div class="relative grid bg-surface">
<div class="relative p-4">
<BaseInput
v-model="textSearch"
:placeholder="$t('general.search')"
type="text"
class="text-black"
class="text-heading"
>
</BaseInput>
</div>
@@ -75,9 +75,9 @@
class="
px-6
py-4
border-b border-gray-200 border-solid
border-b border-line-default border-solid
cursor-pointer
hover:bg-gray-100 hover:cursor-pointer
hover:bg-surface-tertiary hover:cursor-pointer
last:border-b-0
"
@click="selectNote(index, close)"
@@ -89,7 +89,7 @@
text-base
font-semibold
leading-tight
text-gray-700
text-body
cursor-pointer
"
>
@@ -98,8 +98,8 @@
</div>
</div>
</div>
<div v-else class="flex justify-center p-5 text-gray-400">
<label class="text-base text-gray-500">
<div v-else class="flex justify-center p-5 text-subtle">
<label class="text-base text-muted">
{{ $t('general.no_note_found') }}
</label>
</div>
@@ -115,7 +115,7 @@
w-full
px-2
py-3
bg-gray-200
bg-surface-muted
border-none
outline-hidden
"

View File

@@ -62,9 +62,23 @@ watchEffect(() => {
onMounted(() => {
let context = graph.value.getContext('2d')
const style = getComputedStyle(document.documentElement)
const gridColor = style.getPropertyValue('--color-line-light').trim() || 'rgba(0,0,0,0.1)'
const tickColor = style.getPropertyValue('--color-muted').trim() || '#6b7280'
let options = reactive({
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
grid: { color: gridColor },
ticks: { color: tickColor },
},
y: {
grid: { color: gridColor },
ticks: { color: tickColor },
},
},
plugins: {
tooltip: {
enabled: true,
@@ -91,16 +105,16 @@ onMounted(() => {
fill: false,
tension: 0.3,
backgroundColor: 'rgba(230, 254, 249)',
borderColor: '#040405',
borderColor: tickColor,
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: '#040405',
pointBackgroundColor: '#fff',
pointBorderColor: tickColor,
pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: '#040405',
pointHoverBackgroundColor: tickColor,
pointHoverBorderColor: 'rgba(220,220,220,1)',
pointHoverBorderWidth: 2,
pointRadius: 4,
@@ -118,7 +132,7 @@ onMounted(() => {
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(2, 201, 156)',
pointBackgroundColor: '#fff',
pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgb(2, 201, 156)',
@@ -139,7 +153,7 @@ onMounted(() => {
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgb(255,0,0)',
pointBackgroundColor: '#fff',
pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgb(255,0,0)',
@@ -160,7 +174,7 @@ onMounted(() => {
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: 'rgba(88, 81, 216, 1)',
pointBackgroundColor: '#fff',
pointBackgroundColor: style.getPropertyValue('--color-surface').trim() || '#fff',
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: 'rgba(88, 81, 216, 1)',

View File

@@ -3,7 +3,7 @@
<h6 class="font-medium text-lg text-left">
{{ $t('settings.exchange_rate.title') }}
</h6>
<p class="mt-2 text-sm leading-snug text-gray-500" style="max-width: 680px">
<p class="mt-2 text-sm leading-snug text-muted" style="max-width: 680px">
{{
$t('settings.exchange_rate.description', {
currency: companyStore.selectedCompanyCurrency.name,
@@ -34,12 +34,12 @@
@input="v.exchange_rate.$touch()"
>
<template #right>
<span class="text-gray-500 sm:text-sm">
<span class="text-muted sm:text-sm">
{{ companyStore.selectedCompanyCurrency.code }}
</span>
</template>
</BaseInput>
<span class="text-gray-400 text-xs mt-2 font-light">
<span class="text-subtle text-xs mt-2 font-light">
{{
$t('settings.exchange_rate.exchange_help_text', {
currency: c.code,

View File

@@ -1,14 +1,14 @@
<template>
<BaseDropdown>
<template #activator>
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<router-link :to="`/admin/administration/companies/${row.id}/edit`">
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>

View File

@@ -1,14 +1,14 @@
<template>
<BaseDropdown>
<template #activator>
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<router-link :to="`/admin/administration/users/${row.id}/edit`">
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -20,7 +20,7 @@
>
<BaseIcon
name="ArrowRightEndOnRectangleIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('administration.users.impersonate') }}
</BaseDropdownItem>

View File

@@ -1,7 +1,7 @@
<template>
<BaseDropdown>
<template #activator>
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit customField -->
@@ -11,7 +11,7 @@
>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -23,7 +23,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'customers.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- Edit Customer -->
@@ -15,7 +15,7 @@
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -32,7 +32,7 @@
<BaseDropdownItem>
<BaseIcon
name="EyeIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.view') }}
</BaseDropdownItem>
@@ -45,7 +45,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'estimates.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="text-white" />
</BaseButton>
<BaseIcon v-else class="text-gray-500" name="EllipsisHorizontalIcon" />
<BaseIcon v-else class="text-muted" name="EllipsisHorizontalIcon" />
</template>
<!-- Copy PDF url -->
@@ -14,7 +14,7 @@
>
<BaseIcon
name="LinkIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.copy_pdf_url') }}
</BaseDropdownItem>
@@ -27,7 +27,7 @@
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -40,7 +40,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>
@@ -56,7 +56,7 @@
<BaseDropdownItem>
<BaseIcon
name="EyeIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.view') }}
</BaseDropdownItem>
@@ -69,7 +69,7 @@
>
<BaseIcon
name="DocumentTextIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('estimates.clone_estimate') }}
</BaseDropdownItem>
@@ -81,7 +81,7 @@
>
<BaseIcon
name="DocumentTextIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('estimates.convert_to_invoice') }}
</BaseDropdownItem>
@@ -97,7 +97,7 @@
>
<BaseIcon
name="CheckCircleIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('estimates.mark_as_sent') }}
</BaseDropdownItem>
@@ -113,7 +113,7 @@
>
<BaseIcon
name="PaperAirplaneIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('estimates.send_estimate') }}
</BaseDropdownItem>
@@ -122,7 +122,7 @@
<BaseDropdownItem v-if="canResendEstimate(row)" @click="sendEstimate(row)">
<BaseIcon
name="PaperAirplaneIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('estimates.resend_estimate') }}
</BaseDropdownItem>
@@ -137,7 +137,7 @@
>
<BaseIcon
name="CheckCircleIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('estimates.mark_as_accepted') }}
</BaseDropdownItem>
@@ -152,7 +152,7 @@
>
<BaseIcon
name="XCircleIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('estimates.mark_as_rejected') }}
</BaseDropdownItem>

View File

@@ -7,7 +7,7 @@
>
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit expenseCategory -->
@@ -17,7 +17,7 @@
>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -29,7 +29,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'expenses.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit expense -->
@@ -15,7 +15,7 @@
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -28,7 +28,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'invoices.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- Edit Invoice -->
@@ -15,7 +15,7 @@
<BaseDropdownItem v-show="row.allow_edit">
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -25,7 +25,7 @@
<BaseDropdownItem v-if="route.name === 'invoices.view'" @click="copyPdfUrl">
<BaseIcon
name="LinkIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.copy_pdf_url') }}
</BaseDropdownItem>
@@ -41,7 +41,7 @@
<BaseDropdownItem>
<BaseIcon
name="EyeIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.view') }}
</BaseDropdownItem>
@@ -51,7 +51,7 @@
<BaseDropdownItem v-if="canSendInvoice(row)" @click="sendInvoice(row)">
<BaseIcon
name="PaperAirplaneIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('invoices.send_invoice') }}
</BaseDropdownItem>
@@ -60,7 +60,7 @@
<BaseDropdownItem v-if="canReSendInvoice(row)" @click="sendInvoice(row)">
<BaseIcon
name="PaperAirplaneIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('invoices.resend_invoice') }}
</BaseDropdownItem>
@@ -72,7 +72,7 @@
>
<BaseIcon
name="CreditCardIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('invoices.record_payment') }}
</BaseDropdownItem>
@@ -82,7 +82,7 @@
<BaseDropdownItem v-if="canSendInvoice(row)" @click="onMarkAsSent(row.id)">
<BaseIcon
name="CheckCircleIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('invoices.mark_as_sent') }}
</BaseDropdownItem>
@@ -94,7 +94,7 @@
>
<BaseIcon
name="DocumentTextIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('invoices.clone_invoice') }}
</BaseDropdownItem>
@@ -106,7 +106,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'items.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit item -->
@@ -15,7 +15,7 @@
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -28,7 +28,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'members.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit user -->
@@ -12,7 +12,7 @@
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -22,7 +22,7 @@
<BaseDropdownItem @click="removeUser(row.id)">
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'notes.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit note -->
@@ -14,7 +14,7 @@
>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -26,7 +26,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'payments.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- Copy pdf url -->
@@ -18,7 +18,7 @@
>
<BaseIcon
name="LinkIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.copy_pdf_url') }}
</BaseDropdown-item>
@@ -31,7 +31,7 @@
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -48,7 +48,7 @@
<BaseDropdownItem>
<BaseIcon
name="EyeIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.view') }}
</BaseDropdownItem>
@@ -65,7 +65,7 @@
>
<BaseIcon
name="PaperAirplaneIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('payments.send_payment') }}
</BaseDropdownItem>
@@ -77,7 +77,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,14 +4,14 @@
<BaseButton v-if="route.name === 'paymentModes.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit paymentMode -->
<BaseDropdownItem @click="editPaymentMode(row.id)">
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -20,7 +20,7 @@
<BaseDropdownItem @click="removePaymentMode(row.id)">
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -7,7 +7,7 @@
>
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- Edit Recurring Invoice -->
@@ -18,7 +18,7 @@
<BaseDropdownItem>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -35,7 +35,7 @@
<BaseDropdownItem>
<BaseIcon
name="EyeIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.view') }}
</BaseDropdownItem>
@@ -48,7 +48,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'roles.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit role -->
@@ -14,7 +14,7 @@
>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -26,7 +26,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -4,7 +4,7 @@
<BaseButton v-if="route.name === 'tax-types.view'" variant="primary">
<BaseIcon name="EllipsisHorizontalIcon" class="h-5 text-white" />
</BaseButton>
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-gray-500" />
<BaseIcon v-else name="EllipsisHorizontalIcon" class="h-5 text-muted" />
</template>
<!-- edit tax-type -->
@@ -14,7 +14,7 @@
>
<BaseIcon
name="PencilIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.edit') }}
</BaseDropdownItem>
@@ -26,7 +26,7 @@
>
<BaseIcon
name="TrashIcon"
class="w-5 h-5 mr-3 text-gray-400 group-hover:text-gray-500"
class="w-5 h-5 mr-3 text-subtle group-hover:text-muted"
/>
{{ $t('general.delete') }}
</BaseDropdownItem>

View File

@@ -1,5 +1,5 @@
<template>
<tr class="box-border bg-white border border-gray-200 border-solid rounded-b">
<tr class="box-border bg-surface border-b border-line-light">
<td colspan="5" class="p-0 text-left align-top">
<table class="w-full">
<colgroup>
@@ -17,7 +17,7 @@
<td class="px-5 py-4 text-left align-top">
<div class="flex justify-start">
<div
class="flex items-center justify-center w-5 h-5 mt-2 mr-2 text-gray-300 cursor-move handle"
class="flex items-center justify-center w-5 h-5 mt-2 mr-2 text-subtle cursor-move handle"
>
<DragIcon />
</div>
@@ -96,7 +96,7 @@
<BaseIcon
name="ChevronDownIcon"
class="w-4 h-4 ml-1 text-gray-500"
class="w-4 h-4 ml-1 text-muted"
/>
</span>
</BaseButton>
@@ -129,7 +129,7 @@
<div class="flex items-center justify-center w-6 h-10 mx-2">
<BaseIcon
v-if="showRemoveButton"
class="h-5 text-gray-700 cursor-pointer"
class="h-5 text-body cursor-pointer"
name="TrashIcon"
@click="store.removeItem(index)"
/>
@@ -143,7 +143,7 @@
<BaseContentPlaceholders v-if="loading">
<BaseContentPlaceholdersText
:lines="1"
class="w-24 h-8 border border-gray-200 rounded-md"
class="w-24 h-8 border border-line-light rounded-md"
/>
</BaseContentPlaceholders>

View File

@@ -42,7 +42,7 @@
<template v-if="userStore.hasAbilities(ability)" #action>
<button
type="button"
class="flex items-center justify-center w-full px-2 py-2 bg-gray-200 border-none outline-hidden cursor-pointer "
class="flex items-center justify-center w-full px-2 py-2 bg-surface-muted border-none outline-hidden cursor-pointer "
@click="openTaxModal"
>
<BaseIcon name="CheckCircleIcon" class="h-5 text-primary-400" />
@@ -65,7 +65,7 @@
<BaseIcon
v-if="taxes.length && index !== taxes.length - 1"
name="TrashIcon"
class="h-5 text-gray-700 cursor-pointer"
class="h-5 text-body cursor-pointer"
@click="removeTax(index)"
/>
</div>

View File

@@ -1,4 +1,5 @@
<template>
<div class="rounded-xl border border-line-light shadow overflow-hidden bg-surface">
<!-- Tax Included -->
<div
v-if="companyStore.selectedCompanySettings.tax_included === 'YES'"
@@ -9,10 +10,10 @@
w-full
px-6
text-base
border border-b-0 border-gray-200 border-solid
border-b border-line-light
cursor-pointer
text-primary-400
bg-white
bg-surface
"
>
<BaseSwitchSection
@@ -33,7 +34,7 @@
/>
<col style="width: 15%; min-width: 120px" />
</colgroup>
<thead class="bg-white border border-gray-200 border-solid">
<thead class="bg-surface-secondary border-b border-line-light">
<tr>
<th
class="
@@ -43,8 +44,8 @@
not-italic
font-medium
leading-5
text-left text-gray-700
border-t border-b border-gray-200 border-solid
text-left text-body
"
>
<BaseContentPlaceholders v-if="isLoading">
@@ -62,8 +63,8 @@
not-italic
font-medium
leading-5
text-right text-gray-700
border-t border-b border-gray-200 border-solid
text-right text-body
"
>
<BaseContentPlaceholders v-if="isLoading">
@@ -81,8 +82,8 @@
not-italic
font-medium
leading-5
text-left text-gray-700
border-t border-b border-gray-200 border-solid
text-left text-body
"
>
<BaseContentPlaceholders v-if="isLoading">
@@ -101,8 +102,8 @@
not-italic
font-medium
leading-5
text-left text-gray-700
border-t border-b border-gray-200 border-solid
text-left text-body
"
>
<BaseContentPlaceholders v-if="isLoading">
@@ -120,8 +121,8 @@
not-italic
font-medium
leading-5
text-right text-gray-700
border-t border-b border-gray-200 border-solid
text-right text-body
"
>
<BaseContentPlaceholders v-if="isLoading">
@@ -164,7 +165,7 @@
px-6
py-3
text-base
border border-t-0 border-gray-200 border-solid
border-t border-line-light
cursor-pointer
text-primary-400
hover:bg-primary-100
@@ -174,6 +175,7 @@
<BaseIcon name="PlusCircleIcon" class="mr-2" />
{{ $t('general.add_new_item') }}
</div>
</div><!-- end rounded wrapper -->
</template>
<script setup>

View File

@@ -5,7 +5,7 @@
>
<SelectNotePopup :type="type" @select="onSelectNote" />
</div>
<label class="text-gray-800 font-medium mb-4 text-sm">
<label class="text-heading font-medium mb-4 text-sm">
{{ $t('invoices.notes') }}
</label>
<BaseCustomInput

View File

@@ -4,9 +4,9 @@
px-5
py-4
mt-6
bg-white
border border-gray-200 border-solid
rounded
bg-surface
border border-line-light border-solid
rounded-xl shadow
md:min-w-[390px]
min-w-[300px]
lg:mt-7
@@ -18,7 +18,7 @@
</BaseContentPlaceholders>
<label
v-else
class="text-sm font-semibold leading-5 text-gray-400 uppercase"
class="text-sm font-semibold leading-5 text-subtle uppercase"
>
{{ $t('estimates.sub_total') }}
</label>
@@ -29,7 +29,7 @@
<label
v-else
class="flex items-center justify-center m-0 text-lg text-black uppercase "
class="flex items-center justify-center m-0 text-lg text-heading uppercase "
>
<BaseFormatMoney
:amount="store.getSubTotal"
@@ -59,7 +59,7 @@
</BaseContentPlaceholders>
<label
v-else-if="store[storeProp].tax_per_item === 'YES'"
class="m-0 text-sm font-semibold leading-5 text-gray-500 uppercase"
class="m-0 text-sm font-semibold leading-5 text-muted uppercase"
>
<template v-if="tax.calculation_type === 'percentage'">
{{ tax.name }} - {{ tax.percent }}%
@@ -75,7 +75,7 @@
<label
v-else-if="store[storeProp].tax_per_item === 'YES'"
class="flex items-center justify-center m-0 text-lg text-black uppercase "
class="flex items-center justify-center m-0 text-lg text-heading uppercase "
>
<BaseFormatMoney :amount="tax.amount" :currency="defaultCurrency" />
</label>
@@ -93,14 +93,14 @@
</BaseContentPlaceholders>
<label
v-else
class="text-sm font-semibold leading-5 text-gray-400 uppercase"
class="text-sm font-semibold leading-5 text-subtle uppercase"
>
{{ $t('estimates.discount') }}
</label>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText
:lines="1"
class="w-24 h-8 border border-gray-200 rounded-md"
class="w-24 h-8 border border-line-light rounded-md"
/>
</BaseContentPlaceholders>
<div v-else class="flex" style="width: 140px" role="group">
@@ -129,7 +129,7 @@
<BaseIcon
name="ChevronDownIcon"
class="w-4 h-4 ml-1 text-gray-500"
class="w-4 h-4 ml-1 text-muted"
/>
</span>
</BaseButton>
@@ -198,14 +198,14 @@
</div>
<div
class="flex items-center justify-between w-full pt-2 mt-5 border-t border-gray-200 border-solid "
class="flex items-center justify-between w-full pt-2 mt-5 border-t border-line-light border-solid "
>
<BaseContentPlaceholders v-if="isLoading">
<BaseContentPlaceholdersText :lines="1" class="w-16 h-5" />
</BaseContentPlaceholders>
<label
v-else
class="m-0 text-sm font-semibold leading-5 text-gray-400 uppercase"
class="m-0 text-sm font-semibold leading-5 text-subtle uppercase"
>{{ $t('estimates.total') }} {{ $t('estimates.amount') }}:</label
>

View File

@@ -1,12 +1,12 @@
<template>
<div class="flex items-center justify-between w-full mt-2 text-sm">
<label v-if="tax.calculation_type === 'percentage'" class="font-semibold leading-5 text-gray-500 uppercase">
<label v-if="tax.calculation_type === 'percentage'" class="font-semibold leading-5 text-muted uppercase">
{{ tax.name }} ({{ tax.percent }} %)
</label>
<label v-else class="font-semibold leading-5 text-gray-500 uppercase">
<label v-else class="font-semibold leading-5 text-muted uppercase">
{{ tax.name }} (<BaseFormatMoney :amount="tax.fixed_amount" :currency="currency" />)
</label>
<label class="flex items-center justify-center text-lg text-black">
<label class="flex items-center justify-center text-lg text-heading">
<BaseFormatMoney :amount="tax.amount" :currency="currency" />
<BaseIcon

View File

@@ -28,12 +28,12 @@
@input="v.exchange_rate.$touch()"
>
<template #right>
<span class="text-gray-500 sm:text-sm">
<span class="text-muted sm:text-sm">
{{ companyCurrency.code }}
</span>
</template>
</BaseInput>
<span class="text-gray-400 text-xs mt-2 font-light">
<span class="text-subtle text-xs mt-2 font-light">
{{
$t('settings.exchange_rate.exchange_help_text', {
currency: selectedCurrency.code,

View File

@@ -8,7 +8,7 @@
</BaseContentPlaceholders>
<label
v-else
class="text-sm font-semibold leading-5 text-gray-500 uppercase"
class="text-sm font-semibold leading-5 text-muted uppercase"
>
{{ $t('estimates.net_total') }}
</label>
@@ -19,7 +19,7 @@
<label
v-else
class="flex items-center justify-center m-0 text-lg text-black uppercase "
class="flex items-center justify-center m-0 text-lg text-heading uppercase "
>
<BaseFormatMoney
:amount="store.getNetTotal"

View File

@@ -44,13 +44,13 @@
>
<!-- Tax Search Input -->
<div class="relative bg-white">
<div class="relative bg-surface">
<div class="relative p-4">
<BaseInput
v-model="textSearch"
:placeholder="$t('general.search')"
type="text"
class="text-black"
class="text-heading"
>
</BaseInput>
</div>
@@ -64,14 +64,14 @@
overflow-auto
list
max-h-36
border-t border-gray-200
border-t border-line-default
"
>
<div
v-for="(taxType, index) in filteredTaxType"
:key="index"
:class="{
'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none':
'bg-surface-tertiary cursor-not-allowed opacity-50 pointer-events-none':
taxes.find((val) => {
return val.tax_type_id === taxType.id
}),
@@ -80,9 +80,9 @@
class="
px-6
py-4
border-b border-gray-200 border-solid
border-b border-line-default border-solid
cursor-pointer
hover:bg-gray-100 hover:cursor-pointer
hover:bg-surface-tertiary hover:cursor-pointer
last:border-b-0
"
@click="selectTaxType(taxType, close)"
@@ -94,7 +94,7 @@
text-base
font-semibold
leading-tight
text-gray-700
text-body
cursor-pointer
"
>
@@ -106,7 +106,7 @@
m-0
text-base
font-semibold
text-gray-700
text-body
cursor-pointer
"
>
@@ -121,8 +121,8 @@
</div>
</div>
<div v-else class="flex justify-center p-5 text-gray-400">
<label class="text-base text-gray-500 cursor-pointer">
<div v-else class="flex justify-center p-5 text-subtle">
<label class="text-base text-muted cursor-pointer">
{{ $t('general.no_tax_found') }}
</label>
</div>
@@ -140,7 +140,7 @@
h-10
px-2
py-3
bg-gray-200
bg-surface-muted
border-none
outline-hidden
"

View File

@@ -1,12 +1,12 @@
<template>
<div>
<label class="flex text-gray-800 font-medium text-sm mb-2">
<label class="flex text-heading font-medium text-sm mb-2">
{{ $t('general.select_template') }}
<span class="text-sm text-red-500"> *</span>
</label>
<BaseButton
type="button"
class="flex justify-center w-full text-sm lg:w-auto hover:bg-gray-200"
class="flex justify-center w-full text-sm lg:w-auto hover:bg-surface-muted"
variant="gray"
@click="openTemplateModal"
>

View File

@@ -5,7 +5,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="onCancel"
/>
</div>
@@ -58,7 +58,7 @@
</BaseInputGrid>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"

View File

@@ -5,7 +5,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeCategoryModal"
/>
</div>
@@ -53,7 +53,7 @@
flex
justify-end
p-4
border-t border-gray-200 border-solid
border-t border-line-default border-solid
"
>
<BaseButton

View File

@@ -6,7 +6,7 @@
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeCompanyModal"
/>
</div>
@@ -98,7 +98,7 @@
</BaseInputGrid>
</div>
<div class="z-0 flex justify-end p-4 bg-gray-50 border-t border-gray-200">
<div class="z-0 flex justify-end p-4 bg-surface-secondary border-t border-line-default">
<BaseButton
class="mr-3 text-sm"
variant="primary-outline"

View File

@@ -10,7 +10,7 @@
<BaseIcon
name="XMarkIcon"
class="h-6 w-6 text-gray-500 cursor-pointer"
class="h-6 w-6 text-muted cursor-pointer"
@click="closeCustomerModal"
/>
</div>
@@ -131,7 +131,7 @@
<BaseTab :title="$t('customers.portal_access')">
<BaseInputGrid class="col-span-5 lg:col-span-4">
<div class="md:col-span-2">
<p class="text-sm text-gray-500">
<p class="text-sm text-muted">
{{ $t('customers.portal_access_text') }}
</p>
@@ -168,7 +168,7 @@
<template #right>
<BaseIcon
:name="isShowPassword ? 'EyeIcon' : 'EyeSlashIcon'"
class="mr-1 text-gray-500 cursor-pointer"
class="mr-1 text-muted cursor-pointer"
@click="isShowPassword = !isShowPassword"
/>
</template>
@@ -194,7 +194,7 @@
<template #right>
<BaseIcon
:name="isShowConfirmPassword ? 'EyeIcon' : 'EyeSlashIcon'"
class="mr-1 text-gray-500 cursor-pointer"
class="mr-1 text-muted cursor-pointer"
@click="isShowConfirmPassword = !isShowConfirmPassword"
/>
</template>
@@ -423,7 +423,7 @@
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3 text-sm"

View File

@@ -6,7 +6,7 @@
{{ modalStore.title }}
</h6>
<p
class="mt-2 text-sm leading-snug text-gray-500"
class="mt-2 text-sm leading-snug text-muted"
style="max-width: 680px"
>
{{
@@ -38,7 +38,7 @@
</BaseInputGroup>
</div>
<div class="z-0 flex justify-end p-4 bg-gray-50 border-t border-gray-200">
<div class="z-0 flex justify-end p-4 bg-surface-secondary border-t border-line-default">
<BaseButton
class="mr-3 text-sm"
variant="primary-outline"

View File

@@ -10,7 +10,7 @@
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeExchangeRateModal"
/>
</div>
@@ -151,7 +151,7 @@
/>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"

View File

@@ -5,7 +5,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="h-6 w-6 text-gray-500 cursor-pointer"
class="h-6 w-6 text-muted cursor-pointer"
@click="closeDiskModal"
/>
</div>
@@ -21,7 +21,7 @@
>
<template #default="slotProps">
<div
class="z-0 flex justify-end p-4 border-t border-solid border-gray-200"
class="z-0 flex justify-end p-4 border-t border-solid border-line-default"
>
<BaseButton
class="mr-3 text-sm"

View File

@@ -5,7 +5,7 @@
{{ $t('members.invite_member') }}
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="$emit('close')"
/>
</div>
@@ -42,7 +42,7 @@
</BaseInputGroup>
</div>
<div class="flex justify-end p-4 border-t border-gray-200">
<div class="flex justify-end p-4 border-t border-line-default">
<BaseButton
variant="primary-outline"
class="mr-3"

View File

@@ -5,7 +5,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="h-6 w-6 text-gray-500 cursor-pointer"
class="h-6 w-6 text-muted cursor-pointer"
@click="closeItemModal"
/>
</div>
@@ -90,7 +90,7 @@
</BaseInputGrid>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"

View File

@@ -8,7 +8,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeItemUnitModal"
/>
</div>
@@ -37,7 +37,7 @@
flex
justify-end
p-4
border-t border-gray-200 border-solid
border-t border-line-default border-solid
"
>
<BaseButton

View File

@@ -5,7 +5,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeTestModal"
/>
</div>
@@ -63,7 +63,7 @@
</BaseInputGrid>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
variant="primary-outline"

View File

@@ -5,7 +5,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="h-6 w-6 text-gray-500 cursor-pointer"
class="h-6 w-6 text-muted cursor-pointer"
@click="closeNoteModal"
/>
</div>
@@ -75,7 +75,7 @@ _ />
justify-end
px-4
py-4
border-t border-solid border-gray-200
border-t border-solid border-line-default
"
>
<BaseButton

View File

@@ -5,7 +5,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closePaymentModeModal"
/>
</div>
@@ -30,7 +30,7 @@
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
variant="primary-outline"

View File

@@ -6,7 +6,7 @@
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeRolesModal"
/>
</div>
@@ -36,7 +36,7 @@
text-sm
not-italic
font-medium
text-gray-800
text-heading
px-4
md:px-8
py-1.5
@@ -50,7 +50,7 @@
text-sm
not-italic
font-medium
text-gray-300
text-subtle
px-4
md:px-8
py-1.5
@@ -72,7 +72,7 @@
</div>
</div>
<div class="border-t border-gray-200 py-3">
<div class="border-t border-line-default py-3">
<div
class="
grid grid-cols-1
@@ -89,7 +89,7 @@
:key="gIndex"
class="flex flex-col space-y-1"
>
<p class="text-sm text-gray-500 border-b border-gray-200 pb-1 mb-2">
<p class="text-sm text-muted border-b border-line-default pb-1 mb-2">
{{ gIndex }}
</p>
<div
@@ -122,7 +122,7 @@
flex
justify-end
p-4
border-t border-solid border-gray-200
border-t border-solid border-line-default
"
>
<BaseButton

View File

@@ -5,7 +5,7 @@
{{ modalTitle }}
<BaseIcon
name="XMarkIcon"
class="h-6 w-6 text-gray-500 cursor-pointer"
class="h-6 w-6 text-muted cursor-pointer"
@click="closeModal"
/>
</div>
@@ -26,7 +26,7 @@
relative
flex flex-col
m-2
border border-gray-200 border-solid
border border-line-default border-solid
cursor-pointer
hover:border-primary-300
"
@@ -46,11 +46,11 @@
/>
<span
:class="[
'w-full p-1 bg-gray-200 text-sm text-center absolute bottom-0 left-0',
'w-full p-1 bg-surface-muted text-sm text-center absolute bottom-0 left-0',
{
'text-primary-500 bg-primary-100':
selectedTemplate === template.name,
'text-gray-600': selectedTemplate != template.name,
'text-body': selectedTemplate != template.name,
},
]"
>
@@ -70,7 +70,7 @@
</div>
</div>
<div class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid">
<div class="z-0 flex justify-end p-4 border-t border-line-default border-solid">
<BaseButton class="mr-3" variant="primary-outline" @click="closeModal">
{{ $t('general.cancel') }}
</BaseButton>

View File

@@ -9,7 +9,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="h-6 w-6 text-gray-500 cursor-pointer"
class="h-6 w-6 text-muted cursor-pointer"
@click="closeSendEstimateModal"
/>
</div>
@@ -87,7 +87,7 @@
</BaseInputGrid>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"
@@ -112,7 +112,7 @@
</div>
</form>
<div v-else>
<div class="my-6 mx-4 border border-gray-200 relative">
<div class="my-6 mx-4 border border-line-default relative">
<BaseButton
class="absolute top-4 right-4"
:disabled="isLoading"
@@ -131,7 +131,7 @@
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"

View File

@@ -9,7 +9,7 @@
{{ modalTitle }}
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeSendInvoiceModal"
/>
</div>
@@ -90,7 +90,7 @@
</BaseInputGrid>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"
@@ -120,7 +120,7 @@
</div>
</form>
<div v-else>
<div class="my-6 mx-4 border border-gray-200 relative">
<div class="my-6 mx-4 border border-line-default relative">
<BaseButton
class="absolute top-4 right-4"
:disabled="isLoading"
@@ -139,7 +139,7 @@
></iframe>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"

View File

@@ -9,7 +9,7 @@
{{ modalTitle }}
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeSendPaymentModal"
/>
</div>
@@ -90,7 +90,7 @@
</BaseInputGrid>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"
@@ -120,7 +120,7 @@
</div>
</form>
<div v-else>
<div class="my-6 mx-4 border border-gray-200 relative">
<div class="my-6 mx-4 border border-line-default relative">
<BaseButton
class="absolute top-4 right-4"
:disabled="isLoading"
@@ -139,7 +139,7 @@
></iframe>
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3"

View File

@@ -8,7 +8,7 @@
{{ modalStore.title }}
<BaseIcon
name="XMarkIcon"
class="h-6 w-6 text-gray-500 cursor-pointer"
class="h-6 w-6 text-muted cursor-pointer"
@click="closeTaxTypeModal"
/>
</div>
@@ -106,7 +106,7 @@
flex
justify-end
p-4
border-t border-solid border-gray-200
border-t border-solid border-line-default
"
>
<BaseButton

View File

@@ -5,13 +5,13 @@
<div class="flex flex-col">
{{ modalStore.title }}
<p class="text-sm text-gray-500 mt-1">
<p class="text-sm text-muted mt-1">
{{ modalStore.content }}
</p>
</div>
<BaseIcon
name="XMarkIcon"
class="h-6 w-6 text-gray-500 cursor-pointer"
class="h-6 w-6 text-muted cursor-pointer"
@click="closeModal"
/>
</div>
@@ -88,7 +88,7 @@
</div>
<div
class="z-0 flex justify-end p-4 border-t border-gray-200 border-solid"
class="z-0 flex justify-end p-4 border-t border-line-default border-solid"
>
<BaseButton
class="mr-3 text-sm"

View File

@@ -6,7 +6,7 @@
<BaseIcon
name="XMarkIcon"
class="w-6 h-6 text-gray-500 cursor-pointer"
class="w-6 h-6 text-muted cursor-pointer"
@click="closeCustomFieldModal"
/>
</div>
@@ -123,7 +123,7 @@
class="ml-1 cursor-pointer"
:class="
customFieldStore.currentCustomField.in_use
? 'text-gray-300'
? 'text-subtle'
: 'text-red-300'
"
@click="removeOption(index)"
@@ -179,7 +179,7 @@
flex
justify-end
p-4
border-t border-solid border-gray-200
border-t border-solid border-line-default
"
>
<BaseButton

View File

@@ -153,7 +153,7 @@
<BaseSwitch v-model="set_as_default" class="flex" />
</div>
<div class="ml-4 right">
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
<p class="p-0 mb-1 text-base leading-snug text-heading box-title">
{{ $t('settings.disk.is_default') }}
</p>
</div>

View File

@@ -132,7 +132,7 @@
<BaseSwitch v-model="set_as_default" class="flex" />
</div>
<div class="ml-4 right">
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
<p class="p-0 mb-1 text-base leading-snug text-heading box-title">
{{ $t('settings.disk.is_default') }}
</p>
</div>

View File

@@ -63,7 +63,7 @@
</div>
<div class="ml-4 right">
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
<p class="p-0 mb-1 text-base leading-snug text-heading box-title">
{{ $t('settings.disk.is_default') }}
</p>
</div>

View File

@@ -152,7 +152,7 @@
<BaseSwitch v-model="set_as_default" class="flex" />
</div>
<div class="ml-4 right">
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
<p class="p-0 mb-1 text-base leading-snug text-heading box-title">
{{ $t('settings.disk.is_default') }}
</p>
</div>

View File

@@ -134,7 +134,7 @@
<BaseSwitch v-model="set_as_default" class="flex" />
</div>
<div class="ml-4 right">
<p class="p-0 mb-1 text-base leading-snug text-black box-title">
<p class="p-0 mb-1 text-base leading-snug text-heading box-title">
{{ $t('settings.disk.is_default') }}
</p>
</div>