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
This commit is contained in:
filtered
2025-09-17 03:31:36 +10:00
committed by GitHub
parent 45a46be513
commit 4ff18fd7f0
4 changed files with 24 additions and 3 deletions

Binary file not shown.

Binary file not shown.

17
src/assets/css/fonts.css Normal file
View File

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

View File

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