v2.0.2

changelog.md

@@ -1,5 +1,13 @@
 # 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)
 Migrate file I/O to @push.rocks/smartfs, adopt TC39 decorators v3 accessor in web components, and update docs/tests
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-document",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "private": false,
   "description": "A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.",
   "main": "dist_ts_web/index.js",

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   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.'
 }

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   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.'
 }

ts_web/elements/document.ts

@@ -25,7 +25,6 @@ import { DePage } from "./page.js";
 import { DeContentInvoice } from "./contentinvoice.js";
 
 import { demoFunc } from "./document.demo.js";
-import { dedocumentSharedStyle } from "../style.js";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -95,7 +94,6 @@ export class DeDocument extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
-    dedocumentSharedStyle,
     css`
       :host {
         display: block;

ts_web/elements/page.ts

@@ -12,7 +12,6 @@ import {
 import * as plugins from "../plugins.js";
 
 import { defaultDocumentSettings } from "./document.js";
-import { dedocumentSharedStyle } from "../style.js";
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -75,7 +74,6 @@ export class DePage extends DeesElement {
 
   public static styles = [
     domtools.elementBasic.staticStyles,
-    dedocumentSharedStyle,
     css`
       :host {
         display: block;
@@ -134,17 +132,14 @@ export class DePage extends DeesElement {
   ];
 
   public render(): TemplateResult {
+    const theme = this.documentSettings.theme;
     return html`
       <style>
         :host {
-          --theme-color-primary-fg: ${this.documentSettings.theme
-            ?.colorPrimaryForeground};
-          --theme-color-primary-bg: ${this.documentSettings.theme
-            ?.colorPrimaryBackground};
-          --theme-color-accent-fg: ${this.documentSettings.theme
-            ?.colorAccentForeground};
-          --theme-color-accent-bg: ${this.documentSettings.theme
-            ?.colorAccentBackground};
+          ${theme?.colorPrimaryForeground ? `--theme-color-primary-fg: ${theme.colorPrimaryForeground};` : ''}
+          ${theme?.colorPrimaryBackground ? `--theme-color-primary-bg: ${theme.colorPrimaryBackground};` : ''}
+          ${theme?.colorAccentForeground ? `--theme-color-accent-fg: ${theme.colorAccentForeground};` : ''}
+          ${theme?.colorAccentBackground ? `--theme-color-accent-bg: ${theme.colorAccentBackground};` : ''}
         }
 
         .page {
@@ -153,21 +148,17 @@ export class DePage extends DeesElement {
         }
 
         .page:not(.page--first) {
-          background-image: ${this.documentSettings.theme?.pageBackground ??
-          "none"};
+          background-image: ${theme?.pageBackground ?? "none"};
         }
 
         .page.page--first {
-          background-image: ${this.documentSettings.theme
-            ?.coverPageBackground ??
-          this.documentSettings.theme?.pageBackground ??
-          "none"};
+          background-image: ${theme?.coverPageBackground ?? theme?.pageBackground ?? "none"};
         }
       </style>
       <div id="scaleWrapper">
         <dedocument-pagecontainer .printMode=${this.printMode}>
           <div
-            class="page page__background ${this.pageNumber === 1
+            class="page ${this.pageNumber === 1
               ? "page--first"
               : ""}"
           ></div>

ts_web/elements/pagecontainer.ts

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

ts_web/style.ts

@@ -21,7 +21,7 @@ export const dedocumentSharedStyle = css`
     --text-bg-color: var(--color-primary-bg);
     --label-fg: var(--color-dark);
     --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);
 
     /* Functional variables */
@@ -32,7 +32,6 @@ export const dedocumentSharedStyle = css`
     --text-font-size: var(--theme-text-font-size, 12px);
 
     color: var(--text-fg-color);
-    background: var(--text-bg-color);
     font-family: var(--text-font-family);
     font-size: var(--text-font-size);
   }