Remove duplicate $alert-*-scale Sass vars

[julien-deramond]

Description

This PR removes duplicate $alert-bg-scale, $alert-border-scale and $alert-color-scale definitions in _variables.scss.

Motivation & Context

Even if it will be removed in v6, let's avoid duplication right now.

Type of changes

• Refactoring (non-breaking change)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• (N/A) My change introduces changes to the documentation
• (N/A) I have updated the documentation accordingly
• (N/A) I have added tests to cover my changes
• All new and existing tests passed

Live previews

• https://deploy-preview-38674--twbs-bootstrap.netlify.app/docs/5.3/components/alerts/

Related issues

Closes #38672

[louismaximepiton]

Looks great, good catch!

[kreintjes]

Is it possible these variables already stopped working in Bootstrap 5.3.0?
We used these variables to make the background and border for alert a bit lighter so they are a bit more subtle and the text is better readable (higher contrast). But since Bootstrap 5.3.0 this no longer works. Any value we set seems to be ignored.

Is there a recommended alternative for this?

[julien-deramond]

Hi @kreintjes

Please note for your next questions that the GitHub Discussions > Q&A is more appropriate. Having questions in already merged PRs or closed issues is difficult to track for us :)

Back to your question, $alert-bg-scale, $alert-border-scale, and $alert-color-scale have been deprecated in v5.3.0 with the apparition of the dark mode (they don't do anything from v5.3.0) and will be removed entirely in v6.

Before we did the following:

@each $state, $value in $theme-colors {
  $alert-background: shift-color($value, $alert-bg-scale);
  $alert-border: shift-color($value, $alert-border-scale);
  $alert-color: shift-color($value, $alert-color-scale);
  /* etc. */
}

The dark mode doesn't permit keeping this solution so it's now defined as

bootstrap/scss/_alert.scss

Lines 60 to 67 in 60098ac

	@each $state in map-keys($theme-colors) {
	.alert-#{$state} {
	--#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
	--#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
	--#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
	--#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
	}
	}

If you'd like to keep the previous system, you'll need to override the rules in your project.