2 Commits

Author SHA1 Message Date
5dc9e686fc fix(documents): restrict advance invoice creation to projects
All checks were successful
Build and Release FEDEO / verify (push) Successful in 1m8s
Build and Release FEDEO / build-and-release (push) Successful in 6m24s
2026-10-15 13:05:06 +02:00
6eea3c0687 feat(portal): configure customer portal accent color in company settings 2026-10-13 19:06:33 +02:00
12 changed files with 314 additions and 16 deletions

View File

@@ -58,6 +58,7 @@ export default async function meRoutes(server: FastifyInstance) {
features: tenants.features,
extraModules: tenants.extraModules,
businessInfo: tenants.businessInfo,
portalConfig: tenants.portalConfig,
numberRanges: tenants.numberRanges,
accountChart: tenants.accountChart,
taxEvaluationPeriod: tenants.taxEvaluationPeriod,

View File

@@ -271,6 +271,16 @@ export default async function tenantRoutes(server: FastifyInstance) {
if (!data) return reply.code(400).send({ error: "data required" })
if (Object.prototype.hasOwnProperty.call(data, "portalConfig")) {
const config = data.portalConfig
if (!config || typeof config !== "object" || Array.isArray(config)
|| typeof config.primaryColor !== "string" || !/^#[0-9a-f]{6}$/i.test(config.primaryColor.trim())) {
return reply.code(400).send({ error: "Die Portal-Akzentfarbe muss ein Hex-Farbwert wie #69c350 sein." })
}
data.portalConfig = { ...config, primaryColor: config.primaryColor.trim().toLowerCase() }
delete data.portalConfig.primayColor
}
const updated = await server.db
.update(tenants)
.set(data)

View File

@@ -124,6 +124,16 @@ const invoiceDeliveryNotes = () => {
router.push(`/createDocument/edit?type=invoices&loadMode=deliveryNotes&linkedDocuments=[${props.item.createddocuments.filter(i => deliveryNoteLikeDocumentTypes.includes(i.type)).map(i => i.id)}]`)
}
const createAdvanceInvoice = () => {
if (props.topLevelType !== 'projects' || !props.item.id) return
const query = new URLSearchParams(props.queryStringData)
query.set('type', 'advanceInvoices')
query.set('loadMode', 'advanceInvoice')
query.set('project', props.item.id)
router.push(`/createDocument/edit?${query.toString()}`)
}
const showFinalInvoiceConfig = ref(false)
const referenceDocument = ref(null)
const advanceInvoicesToAdd = ref([])
@@ -169,6 +179,13 @@ const selectItem = (item) => {
>
Dokument aus Vorlage
</UButton>
<UButton
v-if="props.topLevelType === 'projects'"
icon="i-heroicons-plus"
@click="createAdvanceInvoice"
>
Abschlagsrechnung
</UButton>
<UButton
@click="showFinalInvoiceConfig = true"
v-if="props.topLevelType === 'projects'"

View File

@@ -18,9 +18,9 @@ const props = defineProps({
const emit = defineEmits(["updateNeeded","returnData"])
const documentTypeToUse = ref(props.type)
const documentTypeToUse = ref(props.type === 'advanceInvoices' ? null : props.type)
const documentTypeItems = computed(() => {
return Object.keys(dataStore.documentTypesForCreation).map((key) => ({
return Object.keys(dataStore.documentTypesForCreation).filter(key => key !== 'advanceInvoices').map((key) => ({
...dataStore.documentTypesForCreation[key],
key
}))
@@ -83,6 +83,8 @@ const mappings = ref({
})
const startImport = () => {
if (!selectedDocumentType.value) return
router.push(`/createDocument/edit/?createddocument=${props.id}&type=${documentTypeToUse.value}&optionsToImport=${encodeURIComponent(JSON.stringify(optionsToImport.value))}`)
modal.close()
}
@@ -147,7 +149,7 @@ const startImport = () => {
<UButton color="neutral" variant="ghost" @click="modal.close()">
Abbrechen
</UButton>
<UButton @click="startImport">
<UButton :disabled="!selectedDocumentType" @click="startImport">
Kopieren
</UButton>
</div>

View File

@@ -10,10 +10,11 @@ const props = defineProps({
})
const documentTypes = computed(() => Object.entries(dataStore.documentTypesForCreation || {})
.filter(([key]) => key !== 'serialInvoices')
.filter(([key]) => !['serialInvoices', 'advanceInvoices'].includes(key))
.map(([key, value]) => ({ key, ...value })))
const visibleTemplates = computed(() => templates.value.filter(template => {
return !selectedType.value || template.documentType === selectedType.value
return template.documentType !== 'advanceInvoices'
&& (!selectedType.value || template.documentType === selectedType.value)
}))
const loadTemplates = async () => {
@@ -25,6 +26,8 @@ const loadTemplates = async () => {
}
const selectTemplate = (template) => {
if (template.documentType === 'advanceInvoices') return
const query = new URLSearchParams(props.queryStringData)
query.set('templateId', template.id)
query.set('type', template.documentType)

View File

@@ -9,10 +9,12 @@ const props = defineProps({
})
const documentTypes = computed(() => Object.entries(dataStore.documentTypesForCreation || {})
.filter(([key]) => key !== 'serialInvoices')
.filter(([key]) => !['serialInvoices', 'advanceInvoices'].includes(key))
.map(([key, value]) => ({ key, ...value })))
const createDocument = (type) => {
if (!documentTypes.value.some(documentType => documentType.key === type)) return
const query = new URLSearchParams(props.queryStringData)
query.set('type', type)
if (props.projectId) query.set('project', props.projectId)

View File

@@ -104,10 +104,36 @@ const bankaccounts = ref([])
const texttemplates = ref([])
const units = ref([])
const tenantUsers = ref([])
const documentTypeItems = computed(() => Object.keys(dataStore.documentTypesForCreation).map((key) => ({
const originalDocumentType = ref(null)
const canUseAdvanceInvoice = computed(() => originalDocumentType.value === 'advanceInvoices' || (
route.query.type === 'advanceInvoices'
&& route.query.loadMode === 'advanceInvoice'
&& Number.isSafeInteger(Number(route.query.project))
&& Number(route.query.project) > 0
&& !route.params.id
&& !route.query.createddocument
&& !route.query.optionsToImport
&& !route.query.linkedDocuments
&& !route.query.templateId
&& !isTemplateMode.value
))
const documentTypeItems = computed(() => Object.keys(dataStore.documentTypesForCreation)
.filter(key => key !== 'advanceInvoices' || canUseAdvanceInvoice.value)
.map((key) => ({
label: dataStore.documentTypesForCreation[key].labelSingle,
type: key
})))
})))
const validateAdvanceInvoiceCreation = () => {
if (itemInfo.value.type !== 'advanceInvoices' || isTemplateMode.value) return true
if (canUseAdvanceInvoice.value && (route.params.id || normalizeEntityId(itemInfo.value.project))) return true
toast.add({
title: 'Abschlagsrechnung nur im Projekt erstellen',
description: 'Bitte den Button „Abschlagsrechnung“ innerhalb eines Projekts verwenden.',
color: 'error'
})
return false
}
const taxTypeItems = [
{ key: 'Standard', label: 'Standard' },
{ key: '13b UStG', label: '13b UStG' },
@@ -391,6 +417,7 @@ const setupPage = async () => {
if (route.params.id) {
console.log(route.params)
itemInfo.value = await useEntities("createddocuments").selectSingle(route.params.id,'',false)
originalDocumentType.value = itemInfo.value.type
itemInfo.value.rows = normalizeCreatedDocumentRows(itemInfo.value.rows)
itemInfo.value.taxType = normalizeTaxTypeValue(itemInfo.value.taxType)
await setContactPersonData()
@@ -699,6 +726,10 @@ const setupPage = async () => {
itemInfo.value.rows = normalizeCreatedDocumentRows(itemInfo.value.rows)
if (!validateAdvanceInvoiceCreation()) {
await router.replace('/createDocument')
return
}
loaded.value = true
}
@@ -1817,6 +1848,7 @@ const saveDocumentTemplate = async () => {
}
const saveDocument = async (state, resetup = false) => {
if (!validateAdvanceInvoiceCreation()) return
itemInfo.value.state = state
normalizeCustomSurchargePercentage()

View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import dayjs from "dayjs"
import { getPortalColor, portalThemeStyle } from "~/utils/portalTheme"
definePageMeta({
layout: "notLoggedIn"
@@ -7,6 +8,7 @@ definePageMeta({
const auth = useAuthStore()
const toast = useToast()
const portalTheme = computed(() => portalThemeStyle(getPortalColor(auth.activeTenantData?.portalConfig)))
const customer = ref<any | null>(null)
const contracts = ref<any[]>([])
@@ -337,7 +339,7 @@ onMounted(async () => {
</script>
<template>
<div class="min-h-screen bg-gradient-to-b from-neutral-50 via-white to-neutral-100">
<div :style="portalTheme" class="min-h-screen bg-gradient-to-b from-neutral-50 via-white to-neutral-100">
<UContainer class="py-8 lg:py-12">
<div class="flex flex-col gap-6">
<div class="rounded-3xl border border-neutral-200 bg-white/90 p-6 shadow-sm lg:p-8">
@@ -392,7 +394,7 @@ onMounted(async () => {
</div>
<UCard v-else :ui="{ body: 'p-4 sm:p-6' }">
<UTabs v-model="activeTab" :items="portalTabs" class="portal-tabs">
<UTabs v-model="activeTab" :items="portalTabs" :ui="{ trigger: 'data-[state=active]:text-[var(--portal-accent-contrast)]' }" class="portal-tabs">
<template #customer>
<div class="pt-4">
<div class="mb-4 flex items-center justify-between gap-4">
@@ -470,7 +472,7 @@ onMounted(async () => {
</div>
<div class="mt-6 flex justify-end">
<UButton icon="i-heroicons-check" :loading="saving" @click="saveCustomerData">
<UButton icon="i-heroicons-check" class="text-[var(--portal-accent-contrast)]" :loading="saving" @click="saveCustomerData">
Kundendaten speichern
</UButton>
</div>
@@ -770,7 +772,7 @@ onMounted(async () => {
</div>
</UContainer>
<UModal v-model:open="contractChangeModalOpen">
<UModal v-model:open="contractChangeModalOpen" :content="{ style: portalTheme }">
<template #content>
<div class="space-y-5 p-6">
<div>
@@ -787,6 +789,7 @@ onMounted(async () => {
<USelectMenu
v-model="contractChangeForm.contracttype"
:items="selectedContractAllowedContracttypes"
:content="{ style: portalTheme }"
value-key="id"
label-key="name"
class="w-full"
@@ -813,6 +816,7 @@ onMounted(async () => {
</UButton>
<UButton
color="primary"
class="text-[var(--portal-accent-contrast)]"
:loading="submittingContractRequest"
:disabled="!contractChangeForm.contracttype"
@click="submitContractChangeRequest"
@@ -824,7 +828,7 @@ onMounted(async () => {
</template>
</UModal>
<UModal v-model:open="cancellationModalOpen">
<UModal v-model:open="cancellationModalOpen" :content="{ style: portalTheme }">
<template #content>
<div class="space-y-5 p-6">
<div>

View File

@@ -3,6 +3,7 @@ import {
TAX_EVALUATION_PERIOD_OPTIONS,
normalizeTaxEvaluationPeriod
} from "~/composables/useTaxEvaluation"
import { DEFAULT_PORTAL_COLOR, getPortalColor, normalizePortalColor, portalThemeStyle } from "~/utils/portalTheme"
const auth = useAuthStore()
const toast = useToast()
@@ -260,6 +261,16 @@ const setupPage = async () => {
const features = ref({ ...defaultFeatures, ...(auth.activeTenantData?.features || {}) })
const businessInfo = ref(normalizeBusinessInfo(auth.activeTenantData?.businessInfo))
const portalColor = ref(getPortalColor(auth.activeTenantData?.portalConfig))
const portalColorSaving = ref(false)
const validPortalColor = computed(() => normalizePortalColor(portalColor.value))
const portalPreviewStyle = computed(() => portalThemeStyle(portalColor.value))
watch(() => auth.activeTenant, () => {
portalColor.value = getPortalColor(auth.activeTenantData?.portalConfig)
})
watch(() => auth.activeTenantData?.portalConfig, (config) => {
portalColor.value = getPortalColor(config)
})
const accountChart = ref(auth.activeTenantData.accountChart || "skr03")
const taxEvaluationPeriod = ref(normalizeTaxEvaluationPeriod(auth.activeTenantData.taxEvaluationPeriod))
const accountChartOptions = [
@@ -288,6 +299,18 @@ const saveFeatures = async () => {
await updateTenant({features: features.value})
}
const savePortalColor = async () => {
if (!validPortalColor.value || portalColorSaving.value) return
portalColorSaving.value = true
try {
const { primayColor, ...portalConfig } = auth.activeTenantData?.portalConfig || {}
await updateTenant({ portalConfig: { ...portalConfig, primaryColor: validPortalColor.value } })
toast.add({ title: "Akzentfarbe für das Kundenportal gespeichert", color: "success" })
} finally {
portalColorSaving.value = false
}
}
const formatMcpTokenDate = (value) => {
if (!value) return "Nie"
@@ -614,6 +637,8 @@ onMounted(() => {
label: 'Dokubox'
},{
label: 'Rechnung & Kontakt'
},{
label: 'Kundenportal'
},{
label: 'Plantafel'
},{
@@ -755,6 +780,43 @@ onMounted(() => {
</UCard>
</div>
<div v-else-if="item.label === 'Kundenportal'">
<UCard class="mt-5">
<div class="max-w-xl space-y-6">
<div>
<h2 class="text-lg font-semibold">Akzentfarbe im Kundenportal</h2>
<p class="mt-1 text-sm text-muted">Wähle die Farbe für Schaltflächen, Reiter und Hervorhebungen im Kundenportal deiner Firma.</p>
</div>
<UFormField
label="Akzentfarbe"
help="Hex-Farbwert mit sechs Zeichen, zum Beispiel #69c350."
:error="!validPortalColor ? 'Bitte einen gültigen Hex-Farbwert eingeben.' : undefined"
>
<div class="flex items-center gap-3">
<input
type="color"
:value="validPortalColor || DEFAULT_PORTAL_COLOR"
aria-label="Akzentfarbe auswählen"
class="h-10 w-14 shrink-0 cursor-pointer rounded border border-default bg-default p-1"
@input="portalColor = $event.target.value"
>
<UInput v-model="portalColor" aria-label="Akzentfarbe als Hex-Wert" placeholder="#69c350" class="w-40" maxlength="7" />
</div>
</UFormField>
<div :style="portalPreviewStyle" class="rounded-xl border border-default p-5" aria-label="Vorschau der Portal-Akzentfarbe">
<p class="mb-3 text-sm font-medium text-primary-600">Vorschau Kundenportal</p>
<div class="flex flex-wrap items-center gap-3">
<UButton class="text-[var(--portal-accent-contrast)]" tabindex="-1">Kundendaten speichern</UButton>
<UBadge color="primary" variant="subtle">Rechnung</UBadge>
</div>
</div>
<div class="flex flex-wrap gap-3">
<UButton :loading="portalColorSaving" :disabled="!validPortalColor" @click="savePortalColor">Akzentfarbe speichern</UButton>
<UButton color="neutral" variant="outline" :disabled="portalColorSaving" @click="portalColor = DEFAULT_PORTAL_COLOR">FEDEO-Grün verwenden</UButton>
</div>
</div>
</UCard>
</div>
<div v-else-if="item.label === 'Plantafel'">
<UCard class="mt-5">
<UForm class="w-1/2">

View File

@@ -0,0 +1,131 @@
const { test } = require('node:test')
const assert = require('node:assert/strict')
const fs = require('node:fs')
const vm = require('node:vm')
const ts = require('typescript')
const { parse, compileScript } = require('@vue/compiler-sfc')
const documentTypesForCreation = Object.fromEntries([
'invoices', 'advanceInvoices', 'serialInvoices', 'quotes', 'costEstimates',
'deliveryNotes', 'packingSlips', 'confirmationOrders', 'cancellationInvoices',
].map(key => [key, { labelSingle: key }]))
function fixture(filename, names, globals = {}) {
const { descriptor } = parse(fs.readFileSync(`${__dirname}/../${filename}`, 'utf8'))
compileScript(descriptor, { id: filename, inlineTemplate: true })
const script = ts.createSourceFile(filename, descriptor.scriptSetup.content, ts.ScriptTarget.Latest, true, ts.ScriptKind.JS)
const source = script.statements.filter(statement => ts.isVariableStatement(statement)
&& statement.declarationList.declarations.some(declaration => names.includes(declaration.name.getText(script))))
.map(statement => statement.getText(script)).join('\n')
const navigations = []
const notices = []
const context = vm.createContext({
ref: value => ({ value }), computed: getter => ({ get value() { return getter() } }),
dataStore: { documentTypesForCreation }, URLSearchParams,
router: { push: url => navigations.push(url), replace: url => navigations.push(url) },
modal: { close() {} }, toast: { add: notice => notices.push(notice) },
...globals,
})
vm.runInContext(source, context)
return { context, navigations, notices, run: code => vm.runInContext(code, context) }
}
test('copying any document excludes advance invoices and requires an allowed target', () => {
for (const type of Object.keys(documentTypesForCreation)) {
const { run, navigations } = fixture('components/copyCreatedDocumentModal.vue', [
'documentTypeToUse', 'documentTypeItems', 'selectedDocumentType', 'optionsToImport', 'startImport',
], { props: { id: '12', type } })
assert.equal(run("documentTypeItems.value.some(item => item.key === 'advanceInvoices')"), false)
assert.equal(run('documentTypeToUse.value'), type === 'advanceInvoices' ? null : type)
run("documentTypeToUse.value = 'advanceInvoices'; startImport()")
assert.equal(navigations.length, 0)
run("documentTypeToUse.value = 'invoices'; startImport()")
const query = new URL(navigations[0], 'http://localhost').searchParams
assert.equal(query.get('type'), 'invoices')
assert.equal(query.get('createddocument'), '12')
}
})
test('+ Dokument excludes advance invoices even when opened inside a project', () => {
for (const queryStringData of ['', 'project=7&customer=8']) {
const { run, navigations } = fixture('components/createDocumentModal.vue', ['documentTypes', 'createDocument'], {
props: { queryStringData },
})
assert.equal(run("documentTypes.value.some(item => item.key === 'advanceInvoices')"), false)
run("createDocument('advanceInvoices')")
assert.equal(navigations.length, 0)
run("createDocument('quotes')")
assert.equal(new URL(navigations[0], 'http://localhost').searchParams.get('type'), 'quotes')
}
})
test('advance invoice templates cannot create outgoing documents', () => {
const { run, navigations } = fixture('components/createDocumentFromTemplateModal.vue', [
'templates', 'selectedType', 'documentTypes', 'visibleTemplates', 'selectTemplate',
], { props: { queryStringData: 'project=7' } })
run("templates.value = [{ id: 1, documentType: 'advanceInvoices' }, { id: 2, documentType: 'quotes' }]")
assert.equal(run("documentTypes.value.some(item => item.key === 'advanceInvoices')"), false)
assert.equal(run('visibleTemplates.value.length'), 1)
assert.equal(run('visibleTemplates.value[0].id'), 2)
run('selectTemplate(templates.value[0])')
assert.equal(navigations.length, 0)
run('selectTemplate(templates.value[1])')
assert.equal(new URL(navigations[0], 'http://localhost').searchParams.get('templateId'), '2')
})
function editorFixture(query = {}, id) {
return fixture('pages/createDocument/edit/[[id]].vue', [
'originalDocumentType', 'canUseAdvanceInvoice', 'documentTypeItems', 'normalizeEntityId',
'validateAdvanceInvoiceCreation', 'saveDocument',
], {
route: { params: { id }, query }, isTemplateMode: { value: false },
itemInfo: { value: { type: 'advanceInvoices', project: 7 } },
})
}
test('only the project action opens a new advance invoice with its project and customer', () => {
const { run, navigations, context } = fixture('components/EntityShowSubCreatedDocuments.vue', ['createAdvanceInvoice'], {
props: { topLevelType: 'projects', item: { id: 7 }, queryStringData: 'customer=8&project=99' },
})
run('createAdvanceInvoice()')
const query = Object.fromEntries(new URL(navigations[0], 'http://localhost').searchParams)
assert.equal(query.project, '7')
assert.equal(query.customer, '8')
const editor = editorFixture(query)
assert.equal(editor.run('validateAdvanceInvoiceCreation()'), true)
assert.equal(editor.run("documentTypeItems.value.some(item => item.type === 'advanceInvoices')"), true)
context.props.topLevelType = 'customers'
run('createAdvanceInvoice()')
assert.equal(navigations.length, 1)
})
test('editor rejects alternate creation routes and saving a switched document type', async () => {
const projectQuery = { type: 'advanceInvoices', loadMode: 'advanceInvoice', project: '7' }
for (const query of [
{}, { type: 'advanceInvoices' }, { type: 'advanceInvoices', project: '7' },
{ ...projectQuery, project: '' }, { ...projectQuery, project: 'invalid' },
{ ...projectQuery, createddocument: '12' }, { ...projectQuery, optionsToImport: '{}' },
{ ...projectQuery, linkedDocuments: '[12]' }, { ...projectQuery, templateId: '5' },
]) {
const { run, notices, navigations } = editorFixture(query)
assert.equal(run("documentTypeItems.value.some(item => item.type === 'advanceInvoices')"), false)
assert.equal(run('validateAdvanceInvoiceCreation()'), false)
await run("saveDocument('Entwurf')")
assert.equal(notices.length, 2)
assert.equal(navigations.length, 0)
}
})
test('new advance invoices require a project; existing advance invoices remain editable', () => {
const fresh = editorFixture({ type: 'advanceInvoices', loadMode: 'advanceInvoice', project: '7' })
fresh.run('itemInfo.value.project = null')
assert.equal(fresh.run('validateAdvanceInvoiceCreation()'), false)
const existing = editorFixture({}, '12')
existing.run("originalDocumentType.value = 'advanceInvoices'; itemInfo.value.project = null")
assert.equal(existing.run('validateAdvanceInvoiceCreation()'), true)
assert.equal(existing.run("documentTypeItems.value.some(item => item.type === 'advanceInvoices')"), true)
existing.run("originalDocumentType.value = 'invoices'")
assert.equal(existing.run('validateAdvanceInvoiceCreation()'), false)
existing.run("itemInfo.value.type = 'invoices'")
assert.equal(existing.run('validateAdvanceInvoiceCreation()'), true)
})

View File

@@ -8,7 +8,7 @@ const { parse } = require('@vue/compiler-sfc')
const { descriptor } = parse(fs.readFileSync(`${__dirname}/../pages/createDocument/edit/[[id]].vue`, 'utf8'))
const script = ts.createSourceFile('document-editor.js', descriptor.scriptSetup.content, ts.ScriptTarget.Latest, true, ts.ScriptKind.JS)
const handlers = new Set(['normalizeEntityId', 'normalizeUnitId', 'normalizeCreatedDocumentRow', 'normalizeCreatedDocumentRows', 'normalizeTaxTypeValue', 'setupPage', 'setRowData'])
const handlers = new Set(['normalizeEntityId', 'normalizeUnitId', 'normalizeCreatedDocumentRow', 'normalizeCreatedDocumentRows', 'normalizeTaxTypeValue', 'originalDocumentType', 'canUseAdvanceInvoice', 'validateAdvanceInvoiceCreation', 'setupPage', 'setRowData'])
const source = script.statements
.filter(statement => ts.isVariableStatement(statement) && statement.declarationList.declarations.some(declaration => handlers.has(declaration.name.getText(script))))
.map(statement => statement.getText(script)).join('\n')
@@ -18,6 +18,8 @@ function fixture(unit) {
const product = { id: 20, name: 'Artikel', unit, selling_price: 10, tax_percentage: 19 }
const service = { id: 30, name: 'Leistung', unit, sellingPrice: 20, sellingPriceComposed: {}, taxPercentage: 19 }
const context = vm.createContext({
ref, computed: getter => ({ get value() { return getter() } }),
isTemplateMode: ref(false),
dayjs, uuidv4: () => 'row-id', console: { log() {} },
products: ref([product]), services: ref([service]),
productcategories: ref([]), servicecategories: ref([]),

View File

@@ -0,0 +1,32 @@
export const DEFAULT_PORTAL_COLOR = "#69c350"
export function normalizePortalColor(value: unknown): string | null {
if (typeof value !== "string") return null
const color = value.trim().toLowerCase()
return /^#[0-9a-f]{6}$/.test(color) ? color : null
}
export function getPortalColor(config: any): string {
// Older tenant records contain the misspelled key from the original schema.
return normalizePortalColor(config?.primaryColor)
|| normalizePortalColor(config?.primayColor)
|| DEFAULT_PORTAL_COLOR
}
export function portalThemeStyle(value: unknown): Record<string, string> {
const color = normalizePortalColor(value) || DEFAULT_PORTAL_COLOR
const rgb = [1, 3, 5].map(offset => parseInt(color.slice(offset, offset + 2), 16) / 255)
const linear = rgb.map(channel => channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4)
const luminance = linear[0] * 0.2126 + linear[1] * 0.7152 + linear[2] * 0.0722
const style: Record<string, string> = {
"--ui-primary": color,
"--portal-accent-contrast": luminance > 0.179 ? "#000000" : "#ffffff",
}
const shades = { 50: 5, 100: 10, 200: 25, 300: 45, 400: 70, 500: 100, 600: 80, 700: 65, 800: 50, 900: 35, 950: 20 }
for (const [shade, percent] of Object.entries(shades)) {
style[`--ui-color-primary-${shade}`] = Number(shade) === 500
? color
: `color-mix(in srgb, ${color} ${percent}%, ${Number(shade) < 500 ? "white" : "black"})`
}
return style
}