Spacing
Mirror’s spacing system is tokenized, but not exposed as utility classes. For padding, margin, gap and height, its recommended to use the default tailwindcss spacing scale, as it is built arund the same base measurement as Mirror’s.
WARNING
If the config.dimension.spacing.base token is changed, the tailwind spacing scale will need to be adjusted accordingly.
For a detailed explanation of Mirror’s spacing system, please refer to the principles.
Border Radii
Mirror includes utility classes for surface and component radii.
Surface Radii
Surface radii utilitiy classes exist in three different sizes. Each size comes with an adjacent secondary radius, intended for nested elements.
Additionally the three different sizes can also be nested into each other.
Component Radii
Component radii are primarlily intended for interactive components. They are split into a default scale and a compact scale.
Default Scale
The default scale comes in six different sizes. It is intended for medium to larger sized components like Inputs, Buttons and Textareas.
Compact Scale
The compact scale comes in four different sizes. It is intended for smaller sized components like Badges and Checkboxes.