v6: Cleanup utilities

[mdo]

Unrelated:

• Fix color mixing—pushed oklch color space on accident recently in v6: Drop component variants for global .theme-* classes #41789 without checking it out.

API:

• Updates the API to allow multiple property keys

Display:

• Removed print display utilities, and all print logic in the utility API.

Flex & Grid:

• Moved .grid-cols-* classes to the utility API.
• Added utilities for grid-auto-flow
• Added grid and gap docs pages for utilities

Type/Font:

• Added .font-body utility. This joins the existing .font-monospace.
• Dropped .display-* typography classes.
• Added new .text-* utilities that set font-size and line-height in sizes xs—6xl. This also updates the font-size .fs-{size} utilities.
• Added font-size, font-family, font-weight, and line-height pages (splitting out from the old, long-winded text page)

Todos:

• Fix font-size vs new-font-size Sass maps
• Double check font/type/text docs
• Resolve the clamp() experiment to potentially replace RFS

Follow-ups:

• Switch from an infix to a prefix for responsive and state/pseudo utilities (e.g., hover:opacity-50 and md:d-block)
• Move from state to pseudo-classes and pseudo-elements
• Restore print in the API maybe? But leave disabled for display
• Split utilities to a whole new top-level nav link?

[theodorejb]

Why remove the print display utilities? It's common for business apps to have certain pages which need to support printing to PDF, and the print display utilities have been very handy to hide or display content as needed when printing.

[mdo]

Why remove the print display utilities? It's common for business apps to have certain pages which need to support printing to PDF, and the print display utilities have been very handy to hide or display content as needed when printing.

Not opposed to bringing back, but it's definitely a less common use case overall. I think at the very least we'd disable having print enabled on display utilities by default.

[theodorejb]

While less common, it has still been a useful feature to always have available. E.g. I made a library for Bootstrap projects which uses d-print-none to hide certain elements when printing, and if this class isn't always enabled then the library would have to implement it separately in order to rely on it.

[mdo]

While less common, it has still been a useful feature to always have available. E.g. I made a library for Bootstrap projects which uses d-print-none to hide certain elements when printing, and if this class isn't always enabled then the library would have to implement it separately in order to rely on it.

The utility API has always been extensible, so enabling isn't a huge issue unless you're pulling in from CSS only vs source Sass. As long as you're able to modify the map—which is documented—we could keep the ability and just disable it to start.