Color utils docs

[mdo]

• Splits background utils from color utils for our docs with a new page.
• Adds some Sass docs for variables, maps, and mixins

The scss-docs shortcode is amazing, but one limitation is it doesn't seem to work with indentation at the beginning of the single line comments to identify sections. This is what I ran into in #32747 with documenting the utilities map. Curious if @MartijnCuppens or @XhmikosR has some ideas for how to address that.

Also documents the existence of .bg-body, closing the docs part of #32810.

Still a little copyediting to refine here, so consider this one a little WIP still.

• Document CSS custom properties somewhere (under Sass? another h2 called CSS?)
• Other vars, mixins, etc to add?
• Revert the indentation changes and properly indent capture start/end statements

[mdo]

@XhmikosR Elaborating per Slack... the latest commit here should break the build because there's indentation before the comment lines.

[XhmikosR]

@mdo see if it works and we'll clean up the branch later. Also check the OP TODO.

I'll look into improving the shortcode later in #32781

[mdo]

Looking solid @XhmikosR, thanks!

One thing for your referenced PR, it'd be awesome to un-indent these lines if possible. Right now the snippet brings in those extra spaces. That might be too difficult, so not a huge deal if so.

[XhmikosR]

One thing for your referenced PR, it'd be awesome to un-indent these lines if possible. Right now the snippet brings in those extra spaces. That might be too difficult, so not a huge deal if so.

Yup, I know, it's in my TODO after this one lands :)

[ffoodd]

Shouldn't this be renamed as Color for consistency? Questionning only, no opinion.

[XhmikosR]

We actually seem to mix and match these... we have Interactions, shadows etc. We should probably streamline these at some point and add redirects.