Cannot override bootstrap utilities using the utilities.scss in subtheme

Created on 13 May 2024, 8 months ago
Updated 30 May 2024, 8 months ago

Problem/Motivation

I was trying to add/modify bootstrap utilities in utilities.scss file created by the radix_starterkit but i found some issues.
According to bootstrap documentation https://getbootstrap.com/docs/5.3/utilities/api/#add-utilities, the $utilities variable should be in first place in the map.merge. Currently if we want to modify some existing utility ex: font-size, it will be overwritten by default one defined by bootstrap.

Steps to reproduce

Try to modify an exsiting utility in the ```utilities.scss``` copied from the radix starterkit but nothing happens.

Proposed resolution

Move the $utilities map to first place in the map.merge.

That will "break" again what was mentioned here https://www.drupal.org/project/radix/issues/3347440 πŸ› Utilities example in sub-theme breaks bg-opacity CSS var Fixed but there is another issue in the file.

The "color" property should define a local-vars to handle the text-opacity for real-time color changes. And the variable referenced there should be $utilities-text-colors instead of $utilities-bg-colors

πŸ› Bug report
Status

Fixed

Version

6.0

Component

Code

Created by

πŸ‡ΊπŸ‡ΎUruguay diegoacosta211

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

Production build 0.71.5 2024