gorkem-bwl
de8eb53dd4
Buttons, inputs, selects, pickers, toggles and tabs all declared 34 while IconButton and the PageHeader action sat at 32, so anything mixing them in a row was 2px out of alignment. Everything now reads CONTROL_HEIGHT (32) from constants, so the number lives in one place instead of nine. Two content-box fixes were needed to make 32 safe, both measured in the browser rather than assumed: - MUI's button line-height is 1.75 - 22.75px at our 13px base - which with 6px padding needs 34.75px. It was already over its own box at 34 and would have clipped at 32. Now 1.2, which leaves headroom for the taller scripts we ship (ar, th, vi, ja, zh). - MUI pads the inner input 8.5px top and bottom, so an input's content needed 35.7px inside a 32px shell and was being cut off by overflow:hidden. Padding is zeroed in the theme for both the input and the Select's div, which centres instead. Verified in the DOM: button, select and input all render at exactly 32 with scrollHeight equal to height, so nothing is clipped. Claude-Session: https://claude.ai/code/session_01AbYLvwpEaZFXktHVcqrFRd
33 lines
693 B
TypeScript
33 lines
693 B
TypeScript
export const SPACING = {
|
|
XXS: 0.25,
|
|
XS: 0.5,
|
|
SM: 1,
|
|
MD: 1.5,
|
|
LG: 2,
|
|
XL: 2.5,
|
|
XXL: 3,
|
|
} as const;
|
|
|
|
export const LAYOUT = {
|
|
XXS: 2,
|
|
XS: 4,
|
|
SM: 6,
|
|
MD: 8,
|
|
LG: 10,
|
|
XL: 12,
|
|
XXL: 16,
|
|
} as const;
|
|
|
|
/**
|
|
* Shared height for anything that can sit in a row with something else -
|
|
* buttons, inputs, selects, pickers, toggles, tabs, icon buttons. One number so
|
|
* they share a baseline instead of drifting 2px apart.
|
|
*/
|
|
export const CONTROL_HEIGHT = 32;
|
|
|
|
export const HOVER = {
|
|
DARKEN: 0.06, // This is a coefficient for darkening function
|
|
ROW: 0.025, // Overlay alpha for hoverable rows and cards
|
|
CONTROL: 0.05, // Stronger overlay for controls nested inside a hoverable row
|
|
} as const;
|