design.estate/dees-document
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(page): Use theme variables for page styling, make pagecontainer background theme-aware, and use accent background for footer separator

Browse Source
This commit is contained in:
Jürgen Kunz
2025-12-11 02:38:18 +00:00
parent 3be8de28c6
commit 0e30684c2f
6 changed files with 19 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
changelog.md
View File

@@ -1,5 +1,13 @@
# Changelog # Changelog
## 2025-12-11 - 2.0.2 - fix(page)
Use theme variables for page styling, make pagecontainer background theme-aware, and use accent background for footer separator
- Extract documentSettings.theme to a local variable in dedocument-page and use safe optional checks when emitting CSS custom properties
- Use theme pageBackground / coverPageBackground values consistently for page background-image fallback logic
- Make pagecontainer background follow the --text-bg-color CSS variable instead of a hard #ffffff color
- Switch footer separator color variable to --color-accent-bg so the footer stripe uses the theme accent background
## 2025-12-10 - 2.0.1 - fix(core) ## 2025-12-10 - 2.0.1 - fix(core)
Migrate file I/O to @push.rocks/smartfs, adopt TC39 decorators v3 accessor in web components, and update docs/tests Migrate file I/O to @push.rocks/smartfs, adopt TC39 decorators v3 accessor in web components, and update docs/tests

2
ts/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-document', name: '@design.estate/dees-document',
version: '2.0.1', version: '2.0.2',
description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.' description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
} }

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@design.estate/dees-document', name: '@design.estate/dees-document',
version: '2.0.1', version: '2.0.2',
description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.' description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
} }

21
ts_web/elements/page.ts
View File

@@ -132,17 +132,14 @@ export class DePage extends DeesElement {
]; ];
public render(): TemplateResult { public render(): TemplateResult {
const theme = this.documentSettings.theme;
return html` return html`
<style> <style>
:host { :host {
--theme-color-primary-fg: ${this.documentSettings.theme ${theme?.colorPrimaryForeground ? `--theme-color-primary-fg: ${theme.colorPrimaryForeground};` : ''}
?.colorPrimaryForeground}; ${theme?.colorPrimaryBackground ? `--theme-color-primary-bg: ${theme.colorPrimaryBackground};` : ''}
--theme-color-primary-bg: ${this.documentSettings.theme ${theme?.colorAccentForeground ? `--theme-color-accent-fg: ${theme.colorAccentForeground};` : ''}
?.colorPrimaryBackground}; ${theme?.colorAccentBackground ? `--theme-color-accent-bg: ${theme.colorAccentBackground};` : ''}
--theme-color-accent-fg: ${this.documentSettings.theme
?.colorAccentForeground};
--theme-color-accent-bg: ${this.documentSettings.theme
?.colorAccentBackground};
} }
.page { .page {
@@ -151,15 +148,11 @@ export class DePage extends DeesElement {
} }
.page:not(.page--first) { .page:not(.page--first) {
background-image: ${this.documentSettings.theme?.pageBackground ?? background-image: ${theme?.pageBackground ?? "none"};
"none"};
} }
.page.page--first { .page.page--first {
background-image: ${this.documentSettings.theme background-image: ${theme?.coverPageBackground ?? theme?.pageBackground ?? "none"};
?.coverPageBackground ??
this.documentSettings.theme?.pageBackground ??
"none"};
} }
</style> </style>
<div id="scaleWrapper"> <div id="scaleWrapper">

2
ts_web/elements/pagecontainer.ts
View File

@@ -50,7 +50,7 @@ export class DePageContainer extends DeesElement {
position: relative; position: relative;
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
background: #ffffff; background: var(--text-bg-color, #ffffff);
} }
`, `,
]; ];

2
ts_web/style.ts
View File

@@ -21,7 +21,7 @@ export const dedocumentSharedStyle = css`
--text-bg-color: var(--color-primary-bg); --text-bg-color: var(--color-primary-bg);
--label-fg: var(--color-dark); --label-fg: var(--color-dark);
--label-bg: var(--color-grey); --label-bg: var(--color-grey);
--footer-separator-bg-color: var(--color-accent); --footer-separator-bg-color: var(--color-accent-bg);
--footer-separator-fg-color: var(--color-light); --footer-separator-fg-color: var(--color-light);
/* Functional variables */ /* Functional variables */