feat: enhance translation and invoice layout

ts_web/style.ts

@@ -1,7 +1,39 @@
-import { css } from '@design.estate/dees-element';
+import { css } from "@design.estate/dees-element";
+import * as plugins from "./plugins.js";
 
 export const dedocumentSharedStyle = css`
   :host {
-    font-family: 'Exo 2';
+    /* Primitive colors */
+    --color-light: #ffffff;
+    --color-dark: #333333;
+    --color-grey: #dddddd;
+    --color-grey-100: #dddddd;
+    --color-red: #e4002b;
+
+    /* Semantic colors */
+    --color-primary-fg: var(--theme-color-primary-fg, var(--color-dark));
+    --color-primary-bg: var(--theme-color-primary-bg, var(--color-light));
+    --color-accent-fg: var(--theme-color-accent-fg, var(--color-light));
+    --color-accent-bg: var(--theme-color-accent-bg, var(--color-red));
+
+    /* Functional colors */
+    --text-fg-color: var(--color-primary-fg);
+    --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-fg-color: var(--color-light);
+
+    /* Functional variables */
+    --DPI-FACTOR: ${plugins.shared.cmToPx(1)}px;
+    --RIGHT-MARGIN: ${plugins.shared.cmToPx(2)}px;
+    --LEFT-MARGIN: ${plugins.shared.cmToPx(2)}px;
+    --text-font-family: var(--theme-text-font-family, "Exo 2");
+    --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);
   }
-`;
+`;