v6: Use token Sass map to customize CSS variables instead of Sass variables

[mdo]

This a cool idea IMO, but needs a little fleshing out. An annoying (to me) pattern we have in v6 (and v5 in a different way) is that we have Sass variables at the top of component files that are immediately mapped to CSS variables on the component classes, where we then only use the CSS variables. To customize with Sass, we'd do this:

@use 'bootstrap' as * with {
  $border-radius: .75rem,
  $primary: #f00,
  $dropdown-item-color: red,
};

Neat, but what if we cut out the middle man in our development—meaning no more Sass vars for the components—and instead use a token map that gets emitted onto the component class of our choosing? Something like this:

$tokens: () !default;

$dropdown-tokens: map.merge(
  (
    --dropdown-color: var(--fg-body),
    --dropdown-bg: var(--bg-body),
  ),
  $tokens
);

.dropdown-menu {
  @each $prop, $value in $dropdown-tokens {
    #{$prop}: #{$value};
  }
  // styles
}

Which would allow us to do this instead:

@use `bootstrap/dropdown` as * with {
  $tokens: (
    --dropdown-item-color: #f000,
    --dropdown-item-bg: #0f0,
  )
}

Of course we'd still have some Sass variables—it's how we generate our colors and more. But for the realtime customization that we all want out of a library like this, I think it could be fun. This keeps all the really powerful parts of Sass—functions, mixins, loops, maps, etc—and gives a singular avenue for customization regardless of compilation method.

• Using Sass? Modify CSS variables (in a Sass map) using @use
• Using CSS only? Modify CSS variables anyway you wish with vanilla CSS

And for folks who want more power—like customizing the utility API, toggling global options, etc—Sass is still there to do what you want at any point.

Potentially fun idea, needs feedback.

[pricop]

I had a look over this proposed change, this looks amazing.

It feels much cleaner to have (almost) everything related to customizing a component in a map, it adds this feeling of component-scope configuration to it, I love this change.

I'd love to see this being pushed forward. +1 from me.

[mdo]

Test failure due to Coveralls outage: https://status.coveralls.io.