[WIP] v5: Update colors to add shades and tints

[mdo]

WIP, do not merge.

Exploring how to change up the mixins and adding multiple shades and tints to our colors for more flexibility. My hope is to at least restore some lighter variations to utilities like our .bg- options, but we'll likely keep the 100-900 variables as just variables and not classes.

TODO:

• Provide utilities for gray shades/tints

[joneff]

Regarding tint and shade, if it ultimately works like a subset of theme-color-level why don't you use theme-color-level? It does add a slight overhead, but not that much e.g.:

@function tint-color($color, $level: 1) {
  @return theme-color-level($color, $level);
}

@function shade-color($color, $level: 1) {
  @return theme-color-level($color, - $level);
}

[MartijnCuppens]

The naming of the classes might be a bit confusing. .red-800 doesn't really indicate what's going to be red. Would also like to have more control over what classes are generated and extend them if needed, probably something with maps or variables that control what is generated.

[mdo]

@MartijnCuppens Once you use the system, it becomes familiar and recognizable. We do this at GitHub with Primer and it works out pretty well. I don't anticipate having all these as classes though inside the framework—those classes are just for docs. Variables should be available for everyone, and ideally there's a better way to generate those (but Sass doesn't do generated variables as I understand it), but for now it's manual.

[MartijnCuppens]

@mdo, I think we can better use the Utility API for this, this will give people more control over what classes are generated. People will probably also ask for responsive variants, which they can enable by simply setting responsive: true.

[mdo]

Superseded by #29348.