Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-26 17:30:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Style: Font Consistency (#7220)

Browse Source 
## Summary

Reduce lower level font definitions in most places. Default to Inter.

See #6912 

## Review Focus

Comic Sans is still an option...

## Screenshots (if applicable)

<!-- Add screenshots or video recording to help explain your changes -->

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7220-Style-Font-Consistency-2c26d73d365081348f2dd8909dd9bb8f)
by [Unito](https://www.unito.io)

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alexander Brown
2025-12-08 18:48:11 -08:00
committed by GitHub
parent c9d5d5ab3e
commit 5139e0564e
209 changed files with 10 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/graph/NodeTooltip.vue
View File

@@ -138,7 +138,6 @@ useEventListener(window, 'click', hideTooltip)
border-radius: 5px;
box-shadow: 0 0 5px rgb(0 0 0 / 0.4);
color: var(--input-text);
font-family: sans-serif;
left: 0;
max-width: 30vw;
padding: 4px 8px;

1
src/components/node/NodePreview.vue
View File

@@ -200,7 +200,6 @@ const truncateDefaultValue = (value: any, charLimit: number = 32): string => {
}
._sb_node_preview {
font-family: 'Open Sans', sans-serif;
color: var(--descrip-text);
border: 1px solid var(--descrip-text);
min-width: 300px;

1
src/components/sidebar/tabs/modelLibrary/ModelPreview.vue
View File

@@ -49,7 +49,6 @@ const modelDef = props.modelDef
<style scoped>
.model_preview {
background-color: var(--comfy-menu-bg);
font-family: 'Open Sans', sans-serif;
color: var(--descrip-text);
border: 1px solid var(--descrip-text);
min-width: 300px;

1
src/extensions/core/groupNodeManage.css
View File

@@ -2,7 +2,6 @@
background: var(--bg-color);
color: var(--fg-color);
padding: 0;
font-family: Arial, Helvetica, sans-serif;
border-color: black;
margin: 20vh auto;
max-height: 60vh;

6
src/lib/litegraph/public/css/litegraph.css
View File

@@ -6,7 +6,6 @@
-moz-user-select: none;
-webkit-user-select: none;
outline: none;
font-family: Tahoma, sans-serif;
}
.lgraphcanvas * {
@@ -14,7 +13,6 @@
}
.litegraph.litecontextmenu {
font-family: Tahoma, sans-serif;
position: fixed;
top: 100px;
left: 100px;
@@ -48,7 +46,6 @@
}
.litegraph .litemenubar ul {
font-family: Tahoma, sans-serif;
margin: 0;
padding: 0;
}
@@ -165,7 +162,6 @@
}
.litegraph.litesearchbox {
font-family: Tahoma, sans-serif;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
padding-top: 4px;
@@ -198,7 +194,6 @@
}
.litegraph.lite-search-item {
font-family: Tahoma, sans-serif;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding-top: 2px;
@@ -302,7 +297,6 @@
.litegraph .dialog .dialog-header .dialog-title {
font: 1rem;
font-family: Inter, Arial, sans-serif;
margin: 4px;
padding: 4px 10px;
display: inline-block;

6
src/lib/litegraph/src/LiteGraphGlobal.ts
View File

@@ -59,16 +59,16 @@ export class LiteGraphGlobal {
NODE_DEFAULT_SHAPE = RenderShape.ROUND
NODE_BOX_OUTLINE_COLOR = '#FFF'
NODE_ERROR_COLOUR = '#E00'
NODE_FONT = 'Arial'
NODE_FONT = 'Inter'
NODE_DEFAULT_BYPASS_COLOR = '#FF00FF'
NODE_OPACITY = 0.9
DEFAULT_FONT = 'Arial'
DEFAULT_FONT = 'Inter'
DEFAULT_SHADOW_COLOR = 'rgba(0,0,0,0.5)'
DEFAULT_GROUP_FONT = 24
DEFAULT_GROUP_FONT_SIZE?: any
GROUP_FONT = 'Arial'
GROUP_FONT = 'Inter'
WIDGET_BGCOLOR = '#222'
WIDGET_OUTLINE_COLOR = '#666'

2
src/lib/litegraph/src/canvas/InputIndicators.ts
View File

@@ -23,7 +23,7 @@ export class InputIndicators implements Disposable {
colour1 = '#ff5f00'
colour2 = '#00ff7c'
colour3 = '#dea7ff'
fontString = 'bold 12px Arial'
fontString = 'bold 12px Inter, sans-serif'
// #endregion
// #region state

2
src/lib/litegraph/src/subgraph/SubgraphIONodeBase.ts
View File

@@ -353,7 +353,7 @@ export abstract class SubgraphIONodeBase<
editorAlpha?: number
): void {
ctx.fillStyle = '#AAA'
ctx.font = '12px Arial'
ctx.font = '12px Inter, sans-serif'
ctx.textBaseline = 'middle'
for (const slot of this.allSlots) {

5
src/platform/updates/components/ReleaseNotificationToast.vue
View File

@@ -216,7 +216,6 @@ onMounted(async () => {
.toast-title {
color: white;
font-size: 14px;
font-family: 'Satoshi', sans-serif;
font-weight: 500;
line-height: 18.2px;
}
@@ -224,7 +223,6 @@ onMounted(async () => {
.toast-version-badge {
color: #a0a1a2;
font-size: 12px;
font-family: 'Satoshi', sans-serif;
font-weight: 500;
line-height: 15.6px;
}
@@ -253,7 +251,6 @@ onMounted(async () => {
.learn-more-link {
color: #60a5fa;
font-size: 12px;
font-family: 'Inter', sans-serif;
font-weight: 500;
line-height: 15.6px;
text-decoration: none;
@@ -279,7 +276,6 @@ onMounted(async () => {
border: none;
color: #aeaeb2;
font-size: 12px;
font-family: 'Inter', sans-serif;
font-weight: 500;
cursor: pointer;
}
@@ -297,7 +293,6 @@ onMounted(async () => {
border: none;
color: black;
font-size: 12px;
font-family: 'Inter', sans-serif;
font-weight: 500;
cursor: pointer;
}

2
src/renderer/extensions/vueNodes/widgets/composables/useImagePreviewWidget.ts
View File

@@ -212,7 +212,7 @@ const renderPreview = (
ctx.roundRect(x, y, sz, sz, [4])
ctx.fill()
ctx.fillStyle = textFill
ctx.font = '12px Arial'
ctx.font = '12px Inter, sans-serif'
ctx.textAlign = 'center'
ctx.fillText(text, x + 15, y + 20)