mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 19:09:52 +00:00
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:
BIN
public/fonts/inter-latin-italic.woff2
Normal file
BIN
public/fonts/inter-latin-italic.woff2
Normal file
Binary file not shown.
BIN
public/fonts/inter-latin-normal.woff2
Normal file
BIN
public/fonts/inter-latin-normal.woff2
Normal file
Binary file not shown.
17
src/assets/css/fonts.css
Normal file
17
src/assets/css/fonts.css
Normal 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;
|
||||||
|
}
|
||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user