Skip to content
GitLab

Updated utility API (css-vars utils and new bg/color utils), plus new root CSS variables

Merged Mark Otto requested to merge v510-dev into main

Consider this a bit of an integration branch for now while work on v5.0.2 continues. I'm using this to consolidate efforts across a handful of PRs.

Changes

  • cda10d6: Updates .text-{color} and .bg-{color} utilities to use CSS variables.

    Both .text-{color} and .bg-{color} utilities are now powered by CSS variables. For example, we use the new --bs-primary-rgb: 13, 110, 253 and --bs-text-opacity (with no default value, but a fallback of 1) in .text-primary where the new computed style is color: rgba(13, 110, 253, 1).

    We generate these new RGB variables with some new functions that convert hex values to RGB and that generate new Sass maps based on our $theme-colors map. These new maps are now used to generate our utilities for text color and background-color and include new options for .{text|bg}-black, .{text|bg}-white, and .{text|bg}-body.

    The utility API has been updated to include a new css-var boolean option. When set to true, it generates only local CSS variables using the API's class and individual values. This is how we've added our new .text-opacity-* and .bg-opacity-* utilities. Add these new classes alonside .text-{color} and .bg-{color} utilities to set their alpha transparency on the fly.

    This also deprecates .text-black-50 and .text-white-50 since we can create those on the fly now.

    Fixes #33320 (closed). Fixes #33985 (closed).

  • c754e3e: Adds additional :root CSS variables for all our shades of gray and some $body- Sass variables.

    Previously our :root CSS variables only included our $colors and $theme-colors. Now they also include $grays. We've also added new CSS variables for common <body> styles with default values set by their Sass variable counterparts (e.g., --#{$variable-prefix}body-color: #{$body-color};).