It's very handy to add another spacer size (e.g. `4`) which can easily be done by extending the map.
Example:
```
$spacers: (
  0: (
    x:   0,
    y:   0
  ),
  1: (
    x:   $spacer-x,
    y:   $spacer-y
  ),
  2: (
    x:   ($spacer-x * 1.5),
    y:   ($spacer-y * 1.5)
  ),
  3: (
    x:   ($spacer-x * 3),
    y:   ($spacer-y * 3)
  ),
  4: (
    x:   ($spacer-x * 5),
    y:   ($spacer-y * 5)
  )
);
```

Closes #18706
[skip sauce]

Ports #18872 to v4
[skip sauce]

Fixes #17584
Closes #17607 by merging it

Extract $carousel-indicators-width variable

[skip sauce]
[skip validator]

Extract $dropdown-padding-y variable

[skip sauce]
[skip validator]

Extract $list-group-item-heading-margin-bottom variable

[skip sauce]
[skip validator]

Extract $carousel-caption-width variable

Extract $dropdown-margin-top variable

Extract $carousel-indicator{-active}-size variables

Docs: add/unify advice on contextual colors and accessibility

Replace jQuery with vanilla JS

Add $gutter parameter to make-col mixin

[skip sauce]
[skip validator]

Replace "label" with "tag" in navigation

- Add/replace callout for color and AT with include

Extract $navbar-brand-padding-y variable

[skip sauce]
[skip validator]

Add $list-group-item-padding-{x,y} variables

Add $card-columns-sm-up-column-gap variable

[skip sauce]
[skip validator]

[skip sauce]
[skip validator]

Erratum from #19157
Closes #19245

Extract $code-padding-{x,y} variables

[skip sauce]
[skip validator]

Extract $code-font-size variable

Add $figure-caption-font-size variable

[skip sauce]
[skip validator]

[skip sauce]
[skip validator]

[skip sauce]
[skip validator]

Extract $dropdown-item-padding-x variable

[skip sauce]
[skip validator]

[skip sauce]
[skip validator]

[skip sauce]
[skip validator]

Extract $carousel-control-sm-up-width variable

[skip sauce]
[skip validator]