Utilities like .text-light should use the root variables defined (in this case, --bs-light)

Created by: Clipi-12

Currently, utilities from /scss/_utilities.scss are passed to /scss/mixins/_utilities.scss, where the specified values are assigned to the properties of some elements. For example, the utility by the name "color" will assign the values of its map "values" to the property "color" of the elements that has the class ".text-**", which result in the following CSS:

.text-primary {
  color: #0d6efd !important;
}

.text-secondary {
  color: #6c757d !important;
}

.text-success {
  color: #198754 !important;
}

...

Those colors are generated when compiling (in /scss/mixins/_utilities.scss mixing, as I mentioned before), so they can be changed before the compiling process occurs. However, once the CSS is fully compiled, those utilities will have "hard-coded" values, so if you wanted to change the :root variables at runtime, you would not be able to see any changes.

The desired result would use variables through the "var" CSS function in the case that those variables were defined, so the final CSS would look something like:

.text-primary {
  color: var(--bs-primary) !important;
}

.text-secondary {
  color: var(--bs-secondary) !important;
}

.text-success {
  color: var(--bs-success) !important;
}

...