github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-12 12:35:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): get accurate theme tokens

Browse Source
This commit is contained in:
psychedelicious
2025-06-27 15:17:56 +10:00
parent dc6b8e13bd
commit e5dc606f5e
1 changed files with 15 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
invokeai/frontend/web/src/features/controlLayers/konva/CanvasStagingAreaModule.ts
View File

@@ -11,13 +11,22 @@ import type { Atom } from 'nanostores';
import { atom, effect } from 'nanostores';
import type { Logger } from 'roarr';
// Theme-consistent spacing constants (in pixels)
const SPACING_2 = 8; // Equivalent to theme token 2
const SPACING_4 = 16; // Equivalent to theme token 4
const SPACING_8 = 32; // Equivalent to theme token 8
const BORDER_RADIUS_BASE = 6; // Equivalent to theme borderRadius "base"
// To get pixel sizes corresponding to our theme tokens, first find the theme token CSS var in browser dev tools.
// For example `var(--invoke-space-8)` is equivalent to using `8` as a space prop in a component.
//
// If it is already in pixels, you can use it directly. If it is in rems, you need to convert it to pixels.
//
// For example:
// const style = window.getComputedStyle(document.documentElement)
// parseFloat(style.fontSize) * parseFloat(style.getPropertyValue("--invoke-space-8"))
//
// This will give you the pixel value for the theme token in pixels.
const SPACING_2 = 6; // Equivalent to theme token 2
const SPACING_4 = 12; // Equivalent to theme token 4
const SPACING_8 = 24; // Equivalent to theme token 8
const BORDER_RADIUS_BASE = 4; // Equivalent to theme borderRadius "base"
const BORDER_WIDTH = 1; // Standard border width
const FONT_SIZE_SM = 14; // Equivalent to theme fontSize "sm"
const FONT_SIZE_SM = 12; // Equivalent to theme fontSize "sm"
const BADGE_MIN_WIDTH = 200;
const BADGE_HEIGHT = 36;