spectre-org
Review padding and margins across framework
Background
On close inspection, horizontal padding is kinda off on various elements of the framework.
On some elements it's quite thin horizontally, on some structural elements there is not enough padding to provide significant contrast.
Hero
https://spectre-org.github.io/spectre-docs/docs/layout/hero.html
Left-padding is too thin, and last-child should not pad the bottom
Lists
https://picturepan2.github.io/spectre/elements/typography.html#typography-lists
The spacing between related bullets is quite large, and the gap between bullet and text is too big. Also, see #24.
Labels
https://picturepan2.github.io/spectre/elements/labels.html
The x padding is a bit thin, especially on the rounded labels.
Buttons
https://picturepan2.github.io/spectre/elements/buttons.html
The x padding is a little thin.
Forms
https://picturepan2.github.io/spectre/elements/forms.html
Inconsistent padding in form fields.
Tables
https://picturepan2.github.io/spectre/elements/tables.html
Padding is too thin in x, and too fat in y.
Toasts
https://picturepan2.github.io/spectre/components/toasts.html
Padding feels like it should be equal in x and y.
Accordions:
https://picturepan2.github.io/spectre/components/accordions.html#accordions
The inner text does not line up with the header.
Also, not consistent with navs:
Modals
https://picturepan2.github.io/spectre/components/modals.html#example-modal-1
Top padding looks a little squashed.
Compared to popover padding which feels more comfortable:
Panels
https://picturepan2.github.io/spectre/components/panels.html
Content x padding is a little thin.
Proposal
It would be good to:
- make padding feel more consistent between x and y (especially on corners)
- give structural elements more indentation
- review size variants
It seems that padding is controlled by a variable, so it could be quite an easy win, perhaps just better defaults:
- https://github.com/picturepan2/spectre/blob/master/src/_buttons.scss#L99C1-L109C4
