Add Inter font used by Figma designs (#5535)

* Add ABC ROM fonts from Comfy.org

* Import ABC ROM fonts CSS in main.ts

* Move font import to style.css

* Add ABC ROM fonts as CSS variables in @theme

* Add Inter font .woff2 files

* Replace ABC ROM with Inter font declarations

* Update CSS variables to use Inter font

* Remove unused ABC ROM font files

* Autoformat style.css

* Remove redundant font declarations

.github/workflows/i18n.yaml

@@ -11,7 +11,7 @@ on:
 jobs:
   update-locales:
     # Branch detection: Only run for manual dispatch or version-bump-* branches from main repo
-    if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.head.repo.full_name == github.repository && (startsWith(github.head_ref, 'version-bump-') || startsWith(github.head_ref, 'sno-fix-playwright-babel-test')))
+    if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.head.repo.full_name == github.repository && startsWith(github.head_ref, 'version-bump-'))
     runs-on: ubuntu-latest
     steps:
     - uses: Comfy-Org/ComfyUI_frontend_setup_action@v3

browser_tests/globalSetupWithI18n.ts

@@ -1,7 +0,0 @@
-import type { FullConfig } from '@playwright/test'
-
-import { preprocessLitegraph } from './i18nSetup'
-
-export default async function globalSetup(config: FullConfig) {
-  await preprocessLitegraph()
-}

browser_tests/globalTeardownWithI18n.ts

@@ -1,7 +0,0 @@
-import type { FullConfig } from '@playwright/test'
-
-import { restoreLitegraph } from './i18nSetup'
-
-export default async function globalTeardown(config: FullConfig) {
-  await restoreLitegraph()
-}

browser_tests/i18nSetup.ts

@@ -1,81 +0,0 @@
-/**
- * Setup for i18n collection tests
- * Handles preprocessing of litegraph files that contain TypeScript 'declare' keywords
- */
-import { promises as fs } from 'fs'
-import { glob } from 'glob'
-import * as path from 'path'
-import { fileURLToPath } from 'url'
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-const rootDir = path.resolve(__dirname, '..')
-const litegraphSrcDir = path.join(rootDir, 'src/lib/litegraph/src')
-
-const backupMap = new Map<string, string>()
-
-export async function preprocessLitegraph() {
-  console.log('Preprocessing litegraph files for i18n collection...')
-
-  // Search for all .ts files in litegraph src directory
-  const pattern = path.join(litegraphSrcDir, '**/*.ts')
-  const files = await glob(pattern, {
-    ignore: ['**/*.test.ts', '**/*.spec.ts', '**/node_modules/**']
-  })
-
-  let processedCount = 0
-
-  // Process files in parallel - read once and process if needed
-  await Promise.all(
-    files.map(async (filePath) => {
-      try {
-        const originalContent = await fs.readFile(filePath, 'utf-8')
-
-        // Check for class property declarations with 'declare' keyword
-        if (!/^\s*declare\s+/m.test(originalContent)) {
-          return // Skip files without declare keywords
-        }
-
-        // Store original content in memory
-        backupMap.set(filePath, originalContent)
-
-        // Remove 'declare' keyword from class properties
-        const modifiedContent = originalContent.replace(
-          /^(\s*)declare\s+/gm,
-          '$1// @ts-ignore - removed declare for Playwright\n$1'
-        )
-
-        // Write modified content
-        await fs.writeFile(filePath, modifiedContent)
-        console.log(`  ✓ Processed ${path.relative(litegraphSrcDir, filePath)}`)
-        processedCount++
-      } catch (error: unknown) {
-        console.warn(
-          `  ⚠ Could not preprocess file for litegraph ${filePath}: ${String((error as Error)?.message || error)}`
-        )
-      }
-    })
-  )
-
-  if (processedCount === 0) {
-    console.log('  ℹ No files with declare keywords found')
-  } else {
-    console.log(`  Processed ${processedCount} files with declare keywords`)
-  }
-}
-
-export async function restoreLitegraph() {
-  if (backupMap.size === 0) {
-    return
-  }
-
-  console.log('Restoring original litegraph files...')
-
-  await Promise.all(
-    Array.from(backupMap.entries()).map(async ([filePath, originalContent]) => {
-      await fs.writeFile(filePath, originalContent)
-      console.log(`  ✓ Restored ${path.relative(litegraphSrcDir, filePath)}`)
-    })
-  )
-
-  backupMap.clear()
-}

knip.config.ts

@@ -18,9 +18,7 @@ const config: KnipConfig = {
     '@primeuix/utils',
     '@primevue/icons',
     // Dev
-    '@trivago/prettier-plugin-sort-imports',
-    'tailwindcss',
-    'tailwindcss-primeui'
+    '@trivago/prettier-plugin-sort-imports'
   ],
   ignore: [
     // Auto generated manager types

package.json

@@ -14,9 +14,9 @@
     "build:types": "nx build --config vite.types.config.mts && node scripts/prepare-types.js",
     "zipdist": "node scripts/zipdist.js",
     "typecheck": "vue-tsc --noEmit",
-    "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --cache",
+    "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --cache --list-different",
     "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}' --cache",
-    "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}'",
+    "format:no-cache": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --list-different",
     "format:check:no-cache": "prettier --check './**/*.{js,ts,tsx,vue,mts}'",
     "test:browser": "npx nx e2e",
     "test:unit": "nx run test tests-ui/tests",

playwright.i18n.config.ts

@@ -8,11 +8,5 @@ export default defineConfig({
   },
   reporter: 'list',
   timeout: 60000,
-  testMatch: /collect-i18n-.*\.ts/,
-  // Run tests sequentially to avoid conflicts
-  workers: 1,
-  fullyParallel: false,
-  // Use combined setup that includes litegraph preprocessing
-  globalSetup: './browser_tests/globalSetupWithI18n.ts',
-  globalTeardown: './browser_tests/globalTeardownWithI18n.ts'
+  testMatch: /collect-i18n-.*\.ts/
 })

scripts/collect-i18n-node-defs.ts

@@ -11,7 +11,7 @@ const nodeDefsPath = './src/locales/en/nodeDefs.json'
 
 test('collect-i18n-node-defs', async ({ comfyPage }) => {
   // Mock view route
-  await comfyPage.page.route('**/view**', async (route) => {
+  comfyPage.page.route('**/view**', async (route) => {
     await route.fulfill({
       body: JSON.stringify({})
     })

src/assets/css/fonts.css

@@ -0,0 +1,17 @@
+/* Inter Font Family */
+
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-latin-normal.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter';
+  src: url('/fonts/inter-latin-italic.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}

src/assets/css/style.css

@@ -1,5 +1,6 @@
 @layer theme, base, primevue, components, utilities;
 
+@import './fonts.css';
 @import 'tailwindcss/theme' layer(theme);
 @import 'tailwindcss/utilities' layer(utilities);
 @import 'tw-animate-css';
@@ -52,6 +53,9 @@
   --text-xxs: 0.625rem;
   --text-xxs--line-height: calc(1 / 0.625);
 
+  /* Font Families */
+  --font-inter: 'Inter', sans-serif;
+
   /* Palette Colors */
   --color-charcoal-100: #171718;
   --color-charcoal-200: #202121;
@@ -102,8 +106,8 @@
   --color-bypass: #6A246A;
   --color-error: #962a2a;
 
-  --color-blue-selection: rgb( from var(--color-blue-100) r g b / 0.3); 
-  --color-node-hover-100: rgb( from var(--color-charcoal-800) r g b/ 0.15);
+  --color-blue-selection: rgb(from var(--color-blue-100) r g b / 0.3);
+  --color-node-hover-100: rgb(from var(--color-charcoal-800) r g b/ 0.15);
   --color-node-hover-200: rgb(from var(--color-charcoal-800) r g b/ 0.1);
   --color-modal-tag: rgb(from var(--color-gray-400) r g b/ 0.4);
 
@@ -132,7 +136,7 @@
 
 @utility scrollbar-hide {
   scrollbar-width: none;
-  &::-webkit-scrollbar { 
+  &::-webkit-scrollbar {
     width: 1px;
   }
   &::-webkit-scrollbar-thumb {