feature: add $form-select-focus-bg variable for focused select inputs

[claytonlin1110]

Description

Adds the SASS variable $form-select-focus-bg to control the background color of focused select inputs.

Closes #42006

Motivation

As $input-focus-bg can tint the background of focused inputs, it makes sense to have equivalent control for focused select inputs. This allows users to customize or tint the focus state of form selects independently or in line with inputs.

Changes

• scss/_variables.scss: Added $form-select-focus-bg (defaults to $input-focus-bg) alongside other form-select focus variables
• scss/forms/_form-select.scss: Set background-color: $form-select-focus-bg on :focus state

Usage

// Customize focused select background
$form-select-focus-bg: tint-color($primary, 95%);
@import "bootstrap/scss/bootstrap";

[claytonlin1110]

Can someone review this?
cc @julien-deramond

[julien-deramond]

Right now, we’re focusing on v6-dev branch with mdo and have temporarily paused reviews/merges into main (v5) until we establish a proper process, or simply have time to review changes for v5.
Depending on what lands in v6, we may cherry-pick this directly into v6 without including it in v5. That will depend on whether there will be another v5 minor release, which is still undecided.
Additionally, we haven’t yet determined whether #42006 is a feature that should be added to Bootstrap.

[claytonlin1110]

@julien-deramond When could it be ready? can i change destination branch from 'main ' to 'v6-dev'?

[julien-deramond]

There is no need to change the target branch. We will review the PR as is and cherry-pick the commit to v6-dev if necessary, or handle any required internal adjustments during the review process.

[claytonlin1110]

Can you just get this Pr reviewred and merge to v6-dev?

@julien-deramond @mdo

[pricop]

This is a terribly bad idea, and makes zero sense from a UI/UX perspective. 😑

Why would you want to tint the background (and in the primary color too?!), therefore to reduce the visibility of the content typed in, when the input is focused?

Boostrap already a focus state in the form of an outline for inputs.

Generally, when using tinted (dark) backgrounds, it's when the input is in a rest state, and on focus, it becomes white (light), increasing legibility, not the way around, as this commit intends.

Also, in Bootstrap, the background of inputs are grayed out when in a disabled state.

So if anyone decides to go with a gray/zinc/dark/black theme, tinting on focus will make the inputs look like they're disabled.

I'd love to see an example where this makes sense.

[mdo]

This is no longer needed in v6-dev for two reasons: 1) we're not using Sass variables for component tokens, and 2) we're still not making background changes on :focus-visible. Focus styles are, whenever possible, going to be only outline based.