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 cssGeistFontFamily = unsafeCSS(geistFontFamily);
export const cssMonoFontFamily = unsafeCSS(monoFontFamily); 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 * 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, state,
cssManager, cssManager,
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import { cssGeistFontFamily, cssMonoFontFamily } from './00fonts.js';
import hlight from 'highlight.js'; import hlight from 'highlight.js';
@ -48,7 +49,7 @@ export class DeesDataviewCodebox extends DeesElement {
display: block; display: block;
text-align: left; text-align: left;
font-size: 16px; font-size: 16px;
font-family: 'Geist Sans', sans-serif; font-family: ${cssGeistFontFamily};
} }
.mainbox { .mainbox {
position: relative; position: relative;
@ -142,7 +143,7 @@ export class DeesDataviewCodebox extends DeesElement {
.lineNumbers { .lineNumbers {
line-height: 1.4em; line-height: 1.4em;
font-weight: 200; font-weight: 200;
font-family: 'Intel One Mono', 'Geist Mono', 'monospace'; font-family: ${cssMonoFontFamily};
} }
.hljs-string { .hljs-string {

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

@ -10,6 +10,7 @@ import {
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import { demoFunc } from './dees-heading.demo.js'; import { demoFunc } from './dees-heading.demo.js';
import { cssCalSansFontFamily } from './00fonts.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
@ -39,7 +40,7 @@ export class DeesHeading extends DeesElement {
font-weight: 600; font-weight: 600;
color: ${cssManager.bdTheme('#000', '#fff')}; 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; } h2 { font-size: 28px; }
h3 { font-size: 24px; } h3 { font-size: 24px; }
h4 { font-size: 20px; } h4 { font-size: 20px; }

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

@ -8,6 +8,7 @@ import {
} from '@design.estate/dees-element'; } from '@design.estate/dees-element';
import { DeesInputBase } from './dees-input-base.js'; import { DeesInputBase } from './dees-input-base.js';
import { demoFunc } from './dees-input-checkbox.demo.js'; import { demoFunc } from './dees-input-checkbox.demo.js';
import { cssGeistFontFamily } from './00fonts.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
@ -44,7 +45,7 @@ export class DeesInputCheckbox extends DeesInputBase<DeesInputCheckbox> {
:host { :host {
position: relative; position: relative;
cursor: default; cursor: default;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-family: ${cssGeistFontFamily};
} }
.maincontainer { .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 * as domtools from '@design.estate/dees-domtools';
import { demoFunc } from './dees-input-dropdown.demo.js'; import { demoFunc } from './dees-input-dropdown.demo.js';
import { DeesInputBase } from './dees-input-base.js'; import { DeesInputBase } from './dees-input-base.js';
import { cssGeistFontFamily } from './00fonts.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
@ -67,7 +68,7 @@ export class DeesInputDropdown extends DeesInputBase<DeesInputDropdown> {
} }
:host { :host {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-family: ${cssGeistFontFamily};
position: relative; position: relative;
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')}; 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 * as colors from './00colors.js';
import { DeesInputBase } from './dees-input-base.js'; import { DeesInputBase } from './dees-input-base.js';
import { demoFunc } from './dees-input-text.demo.js'; import { demoFunc } from './dees-input-text.demo.js';
import { cssGeistFontFamily, cssMonoFontFamily } from './00fonts.js';
import { import {
customElement, customElement,
@ -65,7 +66,7 @@ export class DeesInputText extends DeesInputBase {
:host { :host {
position: relative; position: relative;
z-index: auto; z-index: auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; font-family: ${cssGeistFontFamily};
} }
.maincontainer { .maincontainer {
@ -193,7 +194,7 @@ export class DeesInputText extends DeesInputBase {
return html` return html`
<style> <style>
input { 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'}; letter-spacing: ${this.isPasswordBool ? '0.5px' : 'normal'};
padding-right: ${this.isPasswordBool ? '48px' : '12px'}; 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 colors from './00colors.js';
import * as plugins from './00plugins.js'; import * as plugins from './00plugins.js';
import { zIndexLayers, zIndexRegistry } from './00zindex.js'; import { zIndexLayers, zIndexRegistry } from './00zindex.js';
import { cssGeistFontFamily } from './00fonts.js';
import { demoFunc } from './dees-modal.demo.js'; import { demoFunc } from './dees-modal.demo.js';
import { import {
@ -117,7 +118,7 @@ export class DeesModal extends DeesElement {
cssManager.defaultStyles, cssManager.defaultStyles,
css` css`
:host { :host {
font-family: 'Geist Sans', sans-serif; font-family: ${cssGeistFontFamily};
color: ${cssManager.bdTheme('#333', '#fff')}; color: ${cssManager.bdTheme('#333', '#fff')};
will-change: transform; will-change: transform;
} }
@ -208,7 +209,7 @@ export class DeesModal extends DeesElement {
.modal .heading { .modal .heading {
height: 40px; height: 40px;
min-height: 40px; min-height: 40px;
font-family: 'Geist Sans', sans-serif; font-family: ${cssGeistFontFamily};
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; 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 { demoFunc } from './dees-statsgrid.demo.js';
import * as plugins from './00plugins.js'; import * as plugins from './00plugins.js';
import { cssGeistFontFamily } from './00fonts.js';
import { import {
customElement, customElement,
html, html,
@ -79,6 +80,7 @@ export class DeesStatsGrid extends DeesElement {
:host { :host {
display: block; display: block;
width: 100%; width: 100%;
font-family: ${cssGeistFontFamily};
} }
/* CSS Variables for consistent spacing and sizing */ /* CSS Variables for consistent spacing and sizing */
@ -194,7 +196,7 @@ export class DeesStatsGrid extends DeesElement {
font-size: var(--value-font-size); font-size: var(--value-font-size);
font-weight: 600; font-weight: 600;
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')}; color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
line-height: 1; line-height: 1.1;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
gap: 4px; gap: 4px;
@ -251,10 +253,10 @@ export class DeesStatsGrid extends DeesElement {
.gauge-text { .gauge-text {
fill: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')}; fill: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
font-family: ${cssGeistFontFamily};
font-size: var(--value-font-size); font-size: var(--value-font-size);
font-weight: 600; font-weight: 600;
text-anchor: middle; text-anchor: middle;
dominant-baseline: alphabetic;
letter-spacing: -0.025em; letter-spacing: -0.025em;
} }
@ -262,6 +264,7 @@ export class DeesStatsGrid extends DeesElement {
font-size: var(--unit-font-size); font-size: var(--unit-font-size);
fill: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')}; fill: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
font-weight: 400; font-weight: 400;
font-family: ${cssGeistFontFamily};
} }
/* Percentage Styles */ /* Percentage Styles */
@ -274,6 +277,7 @@ export class DeesStatsGrid extends DeesElement {
font-size: var(--value-font-size); font-size: var(--value-font-size);
font-weight: 600; font-weight: 600;
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')}; color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
line-height: 1.1;
letter-spacing: -0.025em; letter-spacing: -0.025em;
margin-bottom: 8px; margin-bottom: 8px;
} }
@ -311,6 +315,7 @@ export class DeesStatsGrid extends DeesElement {
font-size: var(--value-font-size); font-size: var(--value-font-size);
font-weight: 600; font-weight: 600;
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')}; color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
line-height: 1.1;
letter-spacing: -0.025em; letter-spacing: -0.025em;
} }
@ -358,6 +363,7 @@ export class DeesStatsGrid extends DeesElement {
font-size: var(--value-font-size); font-size: var(--value-font-size);
font-weight: 600; font-weight: 600;
color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')}; color: ${cssManager.bdTheme('hsl(215.3 25% 8.8%)', 'hsl(210 40% 98%)')};
line-height: 1.1;
letter-spacing: -0.025em; letter-spacing: -0.025em;
} }
@ -401,7 +407,7 @@ export class DeesStatsGrid extends DeesElement {
<dees-contextmenu <dees-contextmenu
.x=${this.contextMenuPosition.x} .x=${this.contextMenuPosition.x}
.y=${this.contextMenuPosition.y} .y=${this.contextMenuPosition.y}
.menuItems=${this.contextMenuActions} .menuItems=${this.contextMenuActions as any}
@clicked=${() => this.contextMenuVisible = false} @clicked=${() => this.contextMenuVisible = false}
></dees-contextmenu> ></dees-contextmenu>
` : ''} ` : ''}
@ -521,8 +527,8 @@ export class DeesStatsGrid extends DeesElement {
stroke-dashoffset="${strokeDashoffset}" stroke-dashoffset="${strokeDashoffset}"
/> />
<!-- Value text --> <!-- Value text -->
<text class="gauge-text" x="${centerX}" y="${centerY}"> <text class="gauge-text" x="${centerX}" y="${centerY - 8}" dominant-baseline="middle">
<tspan>${value}</tspan>${tile.unit ? html`<tspan class="gauge-unit" dx="4">${tile.unit}</tspan>` : ''} <tspan>${value}</tspan>${tile.unit ? html`<tspan class="gauge-unit" dx="2" dy="0">${tile.unit}</tspan>` : ''}
</text> </text>
</svg> </svg>
</div> </div>

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

@ -1,6 +1,7 @@
import * as colors from './00colors.js'; import * as colors from './00colors.js';
import * as plugins from './00plugins.js'; import * as plugins from './00plugins.js';
import { demoFunc } from './dees-table.demo.js'; import { demoFunc } from './dees-table.demo.js';
import { cssGeistFontFamily } from './00fonts.js';
import { import {
customElement, customElement,
html, html,
@ -171,7 +172,7 @@ export class DeesTable<T> extends DeesElement {
css` css`
.mainbox { .mainbox {
color: ${cssManager.bdTheme('#333', '#fff')}; color: ${cssManager.bdTheme('#333', '#fff')};
font-family: 'Geist Sans', sans-serif; font-family: ${cssGeistFontFamily};
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
padding: 16px; padding: 16px;
@ -190,7 +191,7 @@ export class DeesTable<T> extends DeesElement {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
font-family: 'Geist Sans', sans-serif; font-family: ${cssGeistFontFamily};
} }
.headingContainer { .headingContainer {
@ -289,7 +290,7 @@ export class DeesTable<T> extends DeesElement {
th { th {
text-transform: none; text-transform: none;
font-family: 'Geist Sans', sans-serif; font-family: ${cssGeistFontFamily};
font-weight: 500; font-weight: 500;
} }
th, th,
@ -366,7 +367,7 @@ export class DeesTable<T> extends DeesElement {
} }
.footer { .footer {
font-family: 'Geist Sans', sans-serif; font-family: ${cssGeistFontFamily};
font-size: 14px; font-size: 14px;
color: ${cssManager.bdTheme('#111', '#ffffff90')}; color: ${cssManager.bdTheme('#111', '#ffffff90')};
background: ${cssManager.bdTheme('#eeeeeb', '#00000050')}; 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 * as domtools from '@design.estate/dees-domtools';
import { zIndexLayers } from './00zindex.js'; import { zIndexLayers } from './00zindex.js';
import { demoFunc } from './dees-toast.demo.js'; import { demoFunc } from './dees-toast.demo.js';
import { cssGeistFontFamily } from './00fonts.js';
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {
@ -152,7 +153,7 @@ export class DeesToast extends DeesElement {
:host { :host {
display: block; display: block;
pointer-events: auto; pointer-events: auto;
font-family: 'Geist Sans', sans-serif; font-family: ${cssGeistFontFamily};
opacity: 0; opacity: 0;
transform: translateY(-10px); transform: translateY(-10px);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 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 { cssManager } from '@design.estate/dees-element';
import { WysiwygSelection } from '../../wysiwyg.selection.js'; import { WysiwygSelection } from '../../wysiwyg.selection.js';
import hlight from 'highlight.js'; import hlight from 'highlight.js';
import { cssGeistFontFamily, cssMonoFontFamily } from '../../../00fonts.js';
/** /**
* CodeBlockHandler with improved architecture * CodeBlockHandler with improved architecture
@ -446,7 +447,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
font-weight: 500; font-weight: 500;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-family: ${cssGeistFontFamily};
} }
/* Copy Button - Minimal */ /* Copy Button - Minimal */
@ -460,7 +461,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
border-radius: 4px; border-radius: 4px;
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')}; color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
font-size: 12px; font-size: 12px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-family: ${cssGeistFontFamily};
cursor: pointer; cursor: pointer;
transition: all 0.15s ease; transition: all 0.15s ease;
outline: none; outline: none;
@ -515,7 +516,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
.line-number { .line-number {
padding: 0 12px 0 8px; padding: 0 12px 0 8px;
color: ${cssManager.bdTheme('#9ca3af', '#4b5563')}; color: ${cssManager.bdTheme('#9ca3af', '#4b5563')};
font-family: 'SF Mono', Monaco, Consolas, monospace; font-family: ${cssMonoFontFamily};
font-size: 13px; font-size: 13px;
line-height: 20px; line-height: 20px;
height: 20px; height: 20px;
@ -538,7 +539,7 @@ export class CodeBlockHandler extends BaseBlockHandler {
display: block; display: block;
padding: 12px 16px; padding: 12px 16px;
margin: 0; margin: 0;
font-family: 'SF Mono', Monaco, Consolas, monospace; font-family: ${cssMonoFontFamily};
font-size: 13px; font-size: 13px;
line-height: 20px; line-height: 20px;
color: ${cssManager.bdTheme('#111827', '#f9fafb')}; color: ${cssManager.bdTheme('#111827', '#f9fafb')};