Problem/Motivation

The text-primary class fails to color the text.

A screenshot of the CSS variable --bs-bg-opacity as not defined.

Based on the findings noted below, this likely affects many more class utilities.

Steps to reproduce

Add content with the 'text-primary" class <p class="text-primary>this should be blue</p>
The text is still dark, not blue (primary).

Proposed resolution

I noticed that this issue is resolved if I comment out the overrides provided in the sub-theme and compile.

# src/scss/base/_utilities.scss

@use "sass:map";

$utilities: (
  "background-color": (
    property: background-color,
    class: bg,
    local-vars: (
      "bg-opacity": 1,
    ),
    responsive: false,
    values: map.merge($utilities-bg-colors, ($colors)),
  ),
  "color": (
    property: color,
    class: text,
    responsive: false,
    values: map.merge($utilities-bg-colors, ($colors)),
  ),
);

Remaining tasks

Identify the particular culprit. Decide whether to remove the example utility overrides.

CommentFileSizeAuthor
bootstrap-bg-opacity-not-defined.png64.78 KBjcandan

Comments

jcandan created an issue. See original summary.

jcandan’s picture

jcandan commented

Found a pretty good write-up on the pros and cons of a couple different approaches, the first of which, according to the author, follows Bootstrap documentation.

Adding the following fixed the issue for me.

@import "bootstrap/scss/utilities";

The question remains, should this example utilities override remain in the sub-theme?

jcandan’s picture

jcandan commented

Sorry, a clarification. The above @import statement also needs the following changes:

$utilities: map-merge(
  (
    "background-color": (
      property: background-color,
      ...
      values: map.merge($utilities-bg-colors, ($colors)),
    )
  ),
  $utilities
);

You need to map-merge with the imported $utilities map.

doxigo’s picture

doxigo commented
Status: Active » Fixed

Thanks James, played around and pushed a fix

doxigo’s picture

doxigo commented

  • doxigo committed e3a0dd85 on 5.0.x authored by jcandan 
    Issue #3347440 by jcandan: Utilities example in sub-theme breaks bg-...
doxigo’s picture

doxigo commented

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.