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

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
 

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/page.ts

@@ -132,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 {
@@ -151,15 +148,11 @@ 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">

ts_web/elements/pagecontainer.ts

@@ -50,7 +50,7 @@ export class DePageContainer extends DeesElement {
         position: relative;
         border-radius: 3px;
         overflow: hidden;
-        background: #ffffff;
+        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 */