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

update fonts

Browse Source
This commit is contained in:
Juergen Kunz
2025-06-27 17:32:01 +00:00
parent 669f12e822
commit 3d7f5253e8
11 changed files with 54 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ts_web/elements/00fonts.ts
View File

@ -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
*/

5
ts_web/elements/dees-dataview-codebox.ts
View File

@ -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 {

3
ts_web/elements/dees-heading.ts
View File

@ -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; }

3
ts_web/elements/dees-input-checkbox.ts
View File

@ -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 {

3
ts_web/elements/dees-input-dropdown.ts
View File

@ -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%)')};
}

5
ts_web/elements/dees-input-text.ts
View File

@ -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'};
}

5
ts_web/elements/dees-modal.ts
View File

@ -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;

16
ts_web/elements/dees-statsgrid.ts
View File

@ -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>

9
ts_web/elements/dees-table.ts
View File

@ -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')};

3
ts_web/elements/dees-toast.ts
View File

@ -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);

9
ts_web/elements/wysiwyg/blocks/text/code.block.ts
View File

@ -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')};