Spacing in the Socra UI system.
@socra/theme exposes theme.spacing(n).
| State | Theme path | Rule |
|---|---|---|
Default | theme.palette.text.primary | Clear, enabled, and ready. |
Hover | theme.palette.action.hover | Pointer feedback only. |
Selected | theme.palette.action.selected | Persistent chosen state. |
Loading | theme.palette.action.disabledBackground | Show honest work underway. |
Disabled | theme.palette.action.disabled | Unavailable until the cause is resolved. |
All gaps, insets, and rhythm.
Default component shape.
Responsive layout decisions.
These are theme references and component recipes by name. Toggle dark mode to verify the same names resolve to the active theme.
Spacing, shape, and breakpoint references that define layout rhythm, card shape, and responsive behavior.
All gaps, insets, and rhythm.
Default component shape.
Responsive layout decisions.
Use Spacing through the shared Socra UI stack so every product stays standardized.
Shared implementation exists in the current UI/theme libraries.
Every visible value comes from @socra/theme or a themed MUI primitive.
The page becomes complete only when the live state matrix and copy-paste recipe are real.
The system improves once and every product inherits the fix.
A component earns a place only when it helps the user decide, act, recover, or understand.
Local UI creates drift; library contracts create standardization.
A local primitive splits behavior and future migrations.
Values live in @socra/theme and are consumed by name.
If the hierarchy is weak, fix the hierarchy.
<Stack spacing={2}>
<LazyLiveExample kind="Spacing" />
</Stack>