From 3d7f5253e8686e775a0c38cc11960d041ab00315 Mon Sep 17 00:00:00 2001
From: Juergen Kunz <juergen@foss.global>
Date: Fri, 27 Jun 2025 17:32:01 +0000
Subject: [PATCH] update fonts

---
 ts_web/elements/00fonts.ts                       | 16 ++++++++++++++++
 ts_web/elements/dees-dataview-codebox.ts         |  5 +++--
 ts_web/elements/dees-heading.ts                  |  3 ++-
 ts_web/elements/dees-input-checkbox.ts           |  3 ++-
 ts_web/elements/dees-input-dropdown.ts           |  3 ++-
 ts_web/elements/dees-input-text.ts               |  5 +++--
 ts_web/elements/dees-modal.ts                    |  5 +++--
 ts_web/elements/dees-statsgrid.ts                | 16 +++++++++++-----
 ts_web/elements/dees-table.ts                    |  9 +++++----
 ts_web/elements/dees-toast.ts                    |  3 ++-
 .../elements/wysiwyg/blocks/text/code.block.ts   |  9 +++++----
 11 files changed, 54 insertions(+), 23 deletions(-)

diff --git a/ts_web/elements/00fonts.ts b/ts_web/elements/00fonts.ts
index c13a238..7ce3c13 100644
--- a/ts_web/elements/00fonts.ts
+++ b/ts_web/elements/00fonts.ts
@@ -26,6 +26,22 @@ export const monoFontFamily = `'${intelOneMonoFont}', 'SF Mono', 'Monaco', 'Inco
 export const cssGeistFontFamily = unsafeCSS(geistFontFamily);
 export const cssMonoFontFamily = unsafeCSS(monoFontFamily);
 
+/**
+ * Cal Sans font for headings - Display font
+ * May need to be loaded separately
+ */
+export const calSansFont = 'Cal Sans';
+export const calSansFontFamily = `'${calSansFont}', ${geistFontFamily}`;
+export const cssCalSansFontFamily = unsafeCSS(calSansFontFamily);
+
+/**
+ * Roboto Slab font for special content - Serif font
+ * May need to be loaded separately
+ */
+export const robotoSlabFont = 'Roboto Slab';
+export const robotoSlabFontFamily = `'${robotoSlabFont}', Georgia, serif`;
+export const cssRobotoSlabFontFamily = unsafeCSS(robotoSlabFontFamily);
+
 /**
  * Base font styles that can be applied to components
  */
diff --git a/ts_web/elements/dees-dataview-codebox.ts b/ts_web/elements/dees-dataview-codebox.ts
index 8710e50..9a5865e 100644
--- a/ts_web/elements/dees-dataview-codebox.ts
+++ b/ts_web/elements/dees-dataview-codebox.ts
@@ -8,6 +8,7 @@ import {
   state,
   cssManager,
 } from '@design.estate/dees-element';
+import { cssGeistFontFamily, cssMonoFontFamily } from './00fonts.js';
 
 import hlight from 'highlight.js';
 
@@ -48,7 +49,7 @@ export class DeesDataviewCodebox extends DeesElement {
           display: block;
           text-align: left;
           font-size: 16px;
-          font-family: 'Geist Sans', sans-serif;
+          font-family: ${cssGeistFontFamily};
         }
         .mainbox {
           position: relative;
@@ -142,7 +143,7 @@ export class DeesDataviewCodebox extends DeesElement {
         .lineNumbers {
           line-height: 1.4em;
           font-weight: 200;
-          font-family: 'Intel One Mono', 'Geist Mono', 'monospace';
+          font-family: ${cssMonoFontFamily};
         }
 
         .hljs-string {
diff --git a/ts_web/elements/dees-heading.ts b/ts_web/elements/dees-heading.ts
index 6406b1f..8c54da3 100644
--- a/ts_web/elements/dees-heading.ts
+++ b/ts_web/elements/dees-heading.ts
@@ -10,6 +10,7 @@ import {
 } from '@design.estate/dees-element';
 
 import { demoFunc } from './dees-heading.demo.js';
+import { cssCalSansFontFamily } from './00fonts.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -39,7 +40,7 @@ export class DeesHeading extends DeesElement {
         font-weight: 600;
         color: ${cssManager.bdTheme('#000', '#fff')};
       }
-      h1 { font-size: 32px; font-family: 'Cal Sans'; letter-spacing: 0.025em;}
+      h1 { font-size: 32px; font-family: ${cssCalSansFontFamily}; letter-spacing: 0.025em;}
       h2 { font-size: 28px; }
       h3 { font-size: 24px; }
       h4 { font-size: 20px; }
diff --git a/ts_web/elements/dees-input-checkbox.ts b/ts_web/elements/dees-input-checkbox.ts
index 3c10a79..7431d4c 100644
--- a/ts_web/elements/dees-input-checkbox.ts
+++ b/ts_web/elements/dees-input-checkbox.ts
@@ -8,6 +8,7 @@ import {
 } from '@design.estate/dees-element';
 import { DeesInputBase } from './dees-input-base.js';
 import { demoFunc } from './dees-input-checkbox.demo.js';
+import { cssGeistFontFamily } from './00fonts.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -44,7 +45,7 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
         :host {
           position: relative;
           cursor: default;
-          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+          font-family: ${cssGeistFontFamily};
         }
 
         .maincontainer {
diff --git a/ts_web/elements/dees-input-dropdown.ts b/ts_web/elements/dees-input-dropdown.ts
index 02e0140..460e0a9 100644
--- a/ts_web/elements/dees-input-dropdown.ts
+++ b/ts_web/elements/dees-input-dropdown.ts
@@ -10,6 +10,7 @@ import {
 import * as domtools from '@design.estate/dees-domtools';
 import { demoFunc } from './dees-input-dropdown.demo.js';
 import { DeesInputBase } from './dees-input-base.js';
+import { cssGeistFontFamily } from './00fonts.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -67,7 +68,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
       }
 
       :host {
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-family: ${cssGeistFontFamily};
         position: relative;
         color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
       }
diff --git a/ts_web/elements/dees-input-text.ts b/ts_web/elements/dees-input-text.ts
index 6a6e3a9..e62244d 100644
--- a/ts_web/elements/dees-input-text.ts
+++ b/ts_web/elements/dees-input-text.ts
@@ -1,6 +1,7 @@
 import * as colors from './00colors.js';
 import { DeesInputBase } from './dees-input-base.js';
 import { demoFunc } from './dees-input-text.demo.js';
+import { cssGeistFontFamily, cssMonoFontFamily } from './00fonts.js';
 
 import {
   customElement,
@@ -65,7 +66,7 @@ export class DeesInputText extends DeesInputBase {
       :host {
         position: relative;
         z-index: auto;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
+        font-family: ${cssGeistFontFamily};
       }
 
       .maincontainer {
@@ -193,7 +194,7 @@ export class DeesInputText extends DeesInputBase {
     return html`
       <style>
         input {
-          font-family: ${this.isPasswordBool ? 'SF Mono, Monaco, Consolas, Liberation Mono, Courier New, monospace' : 'inherit'};
+          font-family: ${this.isPasswordBool ? cssMonoFontFamily : 'inherit'};
           letter-spacing: ${this.isPasswordBool ? '0.5px' : 'normal'};
           padding-right: ${this.isPasswordBool ? '48px' : '12px'};
         }
diff --git a/ts_web/elements/dees-modal.ts b/ts_web/elements/dees-modal.ts
index 4ff18c8..8649c2e 100644
--- a/ts_web/elements/dees-modal.ts
+++ b/ts_web/elements/dees-modal.ts
@@ -1,6 +1,7 @@
 import * as colors from './00colors.js';
 import * as plugins from './00plugins.js';
 import { zIndexLayers, zIndexRegistry } from './00zindex.js';
+import { cssGeistFontFamily } from './00fonts.js';
 
 import { demoFunc } from './dees-modal.demo.js';
 import {
@@ -117,7 +118,7 @@ export class DeesModal extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        font-family: 'Geist Sans', sans-serif;
+        font-family: ${cssGeistFontFamily};
         color: ${cssManager.bdTheme('#333', '#fff')};
         will-change: transform;
       }
@@ -208,7 +209,7 @@ export class DeesModal extends DeesElement {
       .modal .heading {
         height: 40px;
         min-height: 40px;
-        font-family: 'Geist Sans', sans-serif;
+        font-family: ${cssGeistFontFamily};
         display: flex;
         align-items: center;
         justify-content: space-between;
diff --git a/ts_web/elements/dees-statsgrid.ts b/ts_web/elements/dees-statsgrid.ts
index 34e63c0..dfdbda0 100644
--- a/ts_web/elements/dees-statsgrid.ts
+++ b/ts_web/elements/dees-statsgrid.ts
@@ -1,5 +1,6 @@
 import { demoFunc } from './dees-statsgrid.demo.js';
 import * as plugins from './00plugins.js';
+import { cssGeistFontFamily } from './00fonts.js';
 import {
   customElement,
   html,
@@ -79,6 +80,7 @@ export class DeesStatsGrid extends DeesElement {
       :host {
         display: block;
         width: 100%;
+        font-family: ${cssGeistFontFamily};
       }
 
       /* CSS Variables for consistent spacing and sizing */
@@ -194,7 +196,7 @@ export class DeesStatsGrid extends DeesElement {
         font-size: var(--value-font-size);
         font-weight: 600;
         color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
-        line-height: 1;
+        line-height: 1.1;
         display: flex;
         align-items: baseline;
         gap: 4px;
@@ -251,10 +253,10 @@ export class DeesStatsGrid extends DeesElement {
 
       .gauge-text {
         fill: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        font-family: ${cssGeistFontFamily};
         font-size: var(--value-font-size);
         font-weight: 600;
         text-anchor: middle;
-        dominant-baseline: alphabetic;
         letter-spacing: -0.025em;
       }
       
@@ -262,6 +264,7 @@ export class DeesStatsGrid extends DeesElement {
         font-size: var(--unit-font-size);
         fill: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
         font-weight: 400;
+        font-family: ${cssGeistFontFamily};
       }
 
       /* Percentage Styles */
@@ -274,6 +277,7 @@ export class DeesStatsGrid extends DeesElement {
         font-size: var(--value-font-size);
         font-weight: 600;
         color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        line-height: 1.1;
         letter-spacing: -0.025em;
         margin-bottom: 8px;
       }
@@ -311,6 +315,7 @@ export class DeesStatsGrid extends DeesElement {
         font-size: var(--value-font-size);
         font-weight: 600;
         color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        line-height: 1.1;
         letter-spacing: -0.025em;
       }
 
@@ -358,6 +363,7 @@ export class DeesStatsGrid extends DeesElement {
         font-size: var(--value-font-size);
         font-weight: 600;
         color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
+        line-height: 1.1;
         letter-spacing: -0.025em;
       }
 
@@ -401,7 +407,7 @@ export class DeesStatsGrid extends DeesElement {
         <dees-contextmenu
           .x=${this.contextMenuPosition.x}
           .y=${this.contextMenuPosition.y}
-          .menuItems=${this.contextMenuActions}
+          .menuItems=${this.contextMenuActions as any}
           @clicked=${() => this.contextMenuVisible = false}
         ></dees-contextmenu>
       ` : ''}
@@ -521,8 +527,8 @@ export class DeesStatsGrid extends DeesElement {
               stroke-dashoffset="${strokeDashoffset}"
             />
             <!-- Value text -->
-            <text class="gauge-text" x="${centerX}" y="${centerY}">
-              <tspan>${value}</tspan>${tile.unit ? html`<tspan class="gauge-unit" dx="4">${tile.unit}</tspan>` : ''}
+            <text class="gauge-text" x="${centerX}" y="${centerY - 8}" dominant-baseline="middle">
+              <tspan>${value}</tspan>${tile.unit ? html`<tspan class="gauge-unit" dx="2" dy="0">${tile.unit}</tspan>` : ''}
             </text>
           </svg>
         </div>
diff --git a/ts_web/elements/dees-table.ts b/ts_web/elements/dees-table.ts
index fcec9f7..06c56d9 100644
--- a/ts_web/elements/dees-table.ts
+++ b/ts_web/elements/dees-table.ts
@@ -1,6 +1,7 @@
 import * as colors from './00colors.js';
 import * as plugins from './00plugins.js';
 import { demoFunc } from './dees-table.demo.js';
+import { cssGeistFontFamily } from './00fonts.js';
 import {
   customElement,
   html,
@@ -171,7 +172,7 @@ export class DeesTable<T> extends DeesElement {
     css`
       .mainbox {
         color: ${cssManager.bdTheme('#333', '#fff')};
-        font-family: 'Geist Sans', sans-serif;
+        font-family: ${cssGeistFontFamily};
         font-weight: 400;
         font-size: 14px;
         padding: 16px;
@@ -190,7 +191,7 @@ export class DeesTable<T> extends DeesElement {
         display: flex;
         justify-content: flex-end;
         align-items: center;
-        font-family: 'Geist Sans', sans-serif;
+        font-family: ${cssGeistFontFamily};
       }
 
       .headingContainer {
@@ -289,7 +290,7 @@ export class DeesTable<T> extends DeesElement {
 
       th {
         text-transform: none;
-        font-family: 'Geist Sans', sans-serif;
+        font-family: ${cssGeistFontFamily};
         font-weight: 500;
       }
       th,
@@ -366,7 +367,7 @@ export class DeesTable<T> extends DeesElement {
       }
 
       .footer {
-        font-family: 'Geist Sans', sans-serif;
+        font-family: ${cssGeistFontFamily};
         font-size: 14px;
         color: ${cssManager.bdTheme('#111', '#ffffff90')};
         background: ${cssManager.bdTheme('#eeeeeb', '#00000050')};
diff --git a/ts_web/elements/dees-toast.ts b/ts_web/elements/dees-toast.ts
index a48fc19..0779e60 100644
--- a/ts_web/elements/dees-toast.ts
+++ b/ts_web/elements/dees-toast.ts
@@ -3,6 +3,7 @@ import { customElement, DeesElement, type TemplateResult, html, css, property, c
 import * as domtools from '@design.estate/dees-domtools';
 import { zIndexLayers } from './00zindex.js';
 import { demoFunc } from './dees-toast.demo.js';
+import { cssGeistFontFamily } from './00fonts.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -152,7 +153,7 @@ export class DeesToast extends DeesElement {
       :host {
         display: block;
         pointer-events: auto;
-        font-family: 'Geist Sans', sans-serif;
+        font-family: ${cssGeistFontFamily};
         opacity: 0;
         transform: translateY(-10px);
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/ts_web/elements/wysiwyg/blocks/text/code.block.ts b/ts_web/elements/wysiwyg/blocks/text/code.block.ts
index 4ef87bd..19880ad 100644
--- a/ts_web/elements/wysiwyg/blocks/text/code.block.ts
+++ b/ts_web/elements/wysiwyg/blocks/text/code.block.ts
@@ -3,6 +3,7 @@ import type { IBlock } from '../../wysiwyg.types.js';
 import { cssManager } from '@design.estate/dees-element';
 import { WysiwygSelection } from '../../wysiwyg.selection.js';
 import hlight from 'highlight.js';
+import { cssGeistFontFamily, cssMonoFontFamily } from '../../../00fonts.js';
 
 /**
  * CodeBlockHandler with improved architecture
@@ -446,7 +447,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
         font-weight: 500;
         text-transform: uppercase;
         letter-spacing: 0.05em;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        font-family: ${cssGeistFontFamily};
       }
       
       /* Copy Button - Minimal */
@@ -460,7 +461,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
         border-radius: 4px;
         color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
         font-size: 12px;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        font-family: ${cssGeistFontFamily};
         cursor: pointer;
         transition: all 0.15s ease;
         outline: none;
@@ -515,7 +516,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
       .line-number {
         padding: 0 12px 0 8px;
         color: ${cssManager.bdTheme('#9ca3af', '#4b5563')};
-        font-family: 'SF Mono', Monaco, Consolas, monospace;
+        font-family: ${cssMonoFontFamily};
         font-size: 13px;
         line-height: 20px;
         height: 20px;
@@ -538,7 +539,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
         display: block;
         padding: 12px 16px;
         margin: 0;
-        font-family: 'SF Mono', Monaco, Consolas, monospace;
+        font-family: ${cssMonoFontFamily};
         font-size: 13px;
         line-height: 20px;
         color: ${cssManager.bdTheme('#111827', '#f9fafb')};