Spacings Custom Properties
Spacing properties. These are used as the basis of widths, heights, margins, paddings, etc. There are eight steps in the scale, 1 being the smallest, and 8 being the largest. They should provide an adequate number of possible values for spacings such that you can quickly audit them to figure out what you need. Spacings are based on rems, so that they are consistent across the entire document.
Spacing
Basic spaces used for margins and paddings.
--sp-1
Very slightly darker than pure white
- Type:
-
"<length>" - Value:
-
0.25rem
--sp-2
Very slightly darker than pure white
- Type:
-
"<length>" - Value:
-
0.5rem
--sp-3
Very slightly darker than pure white
- Type:
-
"<length>" - Value:
-
1rem
--sp-4
Very slightly darker than pure white
- Type:
-
"<length>" - Value:
-
2rem
--sp-5
Very slightly darker than pure white
- Type:
-
"<length>" - Value:
-
4rem
--sp-6
Very slightly darker than pure white
- Type:
-
"<length>" - Value:
-
8rem
--sp-7
Very slightly darker than pure white
- Type:
-
"<length>" - Value:
-
12rem
--sp-8
Very slightly darker than pure white
- Type:
-
"<length>" - Value:
-
16rem
Widths Heights
Spacing for widths and heights. Generally, widths and heights need more pronounced options than margins and paddings. Thus, the fourth step of the width scale is much larger than the fourth step of the spacing scale. The values here are double their respective spacing values.
--wh-1
Very slightly darker than pure white
- Type:
-
"<length>" - Value:
-
0.5rem
--wh-2
Very slightly darker than pure white
- Type:
-
"<length>" - Value:
-
1rem
--wh-3
Very slightly darker than pure white
- Type:
-
"<length>" - Value:
-
2rem
--wh-4
Very slightly darker than pure white
- Type:
-
"<length>" - Value:
-
4rem
--wh-5
Very slightly darker than pure white
- Type:
-
"<length>" - Value:
-
8rem
--wh-6
Very slightly darker than pure white
- Type:
-
"<length>" - Value:
-
16rem
--wh-7
Very slightly darker than pure white
- Type:
-
"<length>" - Value:
-
24rem
--wh-8
Very slightly darker than pure white
- Type:
-
"<length>" - Value:
-
32rem
Border Widths
Border widths. This is a five-step scale, with 1 being the smallest and 5 being the largest. These should provide adequate options for borders. These don’t use the Spacing scales mostly for aesthetic reasons.
--bw-1
Smallest border width
- Type:
-
"<length>" - Value:
-
0.125rem
--bw-2
Second smallest border width
- Type:
-
"<length>" - Value:
-
0.25rem
--bw-3
Middle border width
- Type:
-
"<length>" - Value:
-
0.5rem
--bw-4
Second largest border width
- Type:
-
"<length>" - Value:
-
1rem
--bw-5
Largest border width
- Type:
-
"<length>" - Value:
-
2rem