Spacing
Mirror’s spacing system is built on a base value of 0.25rem and utilizes a tokenized spacing scale where each value is a multiple of the base value.
The height, padding and gap measurements of all Mirror components are derived from this scale.
Border Radii
Mirror’s border radii are split into the categories surface and component, with each serving a different purpose. All radii exist as a multiple of a single base radius defined in the config.dimension.radius.base token.
Surface Radii
Surface radii are intended for static elements such as drawers, modals, sidebars and media elements. Included are three different surface radii, each with a adjacent secondary radius, intended for nested elements.
Component Radii
Component radii are a lot more granular compared to Surface Radii and are split into two scales. They are primarlily intended for interactive components.
Default Scale
The default scale is incremented by a factor of 0.5. It is intended for medium to larger sized components like Inputs, Buttons and Textareas.
Compact Scale
The compact scale is incremented by a factor of 0.25 and starts with a smaller value compared to the default scale. It is intended for smaller sized components like Badges and Checkboxes.