fix(select): add select option background-color (port of #1088)

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

The background of the select options dropdown is white when in dark mode
(on Windows), making the text difficult to read.

Issue Number: CDE-1492

This fix adds the background-color of the options to match the textarea
in the clr theme, and uses the cds-alias-object-interaction-background
token in the cds theme.

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

![image
(2)](/~https://github.com/vmware-clarity/ng-clarity/assets/34519388/25dc547e-5d03-4981-b49b-219c8d26c727)

projects/angular/src/forms/select/STYLES.md

@@ -2,15 +2,16 @@
 
 ## CSS Custom Properties
 
-| CSS Custom Property                          | Description                                       |
-| -------------------------------------------- | ------------------------------------------------- |
-| --clr-forms-select-option-color              | Text color used in the options of a single select |
-| --clr-forms-select-multiple-background-color | Background color used in a multiple select        |
-| --clr-forms-select-multiple-border-color     | Border color used by multiple select options      |
-| --clr-forms-select-multiple-option-color     | Text color used by the multiple select options    |
-| --clr-forms-select-hover-background          | Background color used when select is hovered.     |
-| --clr-forms-select-hover-border-color        | Border color used when select is hovered.         |
-| --clr-forms-select-disabled-border-color     | Border color used when select is disabled.        |
+| CSS Custom Property                          | Description                                             |
+| -------------------------------------------- | ------------------------------------------------------- |
+| --clr-forms-select-option-color              | Text color used in the options of a single select       |
+| --clr-forms-select-option-background-color   | Background color used in the options of a single select |
+| --clr-forms-select-multiple-background-color | Background color used in a multiple select              |
+| --clr-forms-select-multiple-border-color     | Border color used by multiple select options            |
+| --clr-forms-select-multiple-option-color     | Text color used by the multiple select options          |
+| --clr-forms-select-hover-background          | Background color used when select is hovered.           |
+| --clr-forms-select-hover-border-color        | Border color used when select is hovered.               |
+| --clr-forms-select-disabled-border-color     | Border color used when select is disabled.              |
 
 ## CSS Classes
 

projects/angular/src/forms/styles/_properties.forms.scss

@@ -103,6 +103,7 @@
     --clr-forms-select-caret-color: #{tokens.$cds-alias-object-interaction-color};
     --clr-forms-select-caret-size: #{mixins.baselinePx(10)};
     --clr-forms-select-option-color: #{tokens.$cds-alias-typography-color-400};
+    --clr-forms-select-option-background-color: #{tokens.$cds-alias-object-interaction-background};
     --clr-forms-select-multiple-background-color: #{tokens.$cds-alias-object-container-background};
     --clr-forms-select-multiple-border-color: #{tokens.$cds-alias-object-border-color};
     --clr-forms-select-multiple-option-color: #{tokens.$cds-alias-typography-color-400};

projects/angular/src/forms/styles/_select.clarity.scss

@@ -53,6 +53,7 @@
 
       option {
         color: forms-variables.$clr-forms-select-option-color;
+        background-color: forms-variables.$clr-forms-select-option-background-color;
       }
     }
 

projects/angular/src/forms/styles/_variables.forms.scss

@@ -56,6 +56,7 @@ $clr-forms-select-hover-border-color: var(--clr-forms-select-hover-border-color)
 $clr-forms-select-hover-background: var(--clr-forms-select-hover-background) !default;
 $clr-forms-select-disabled-border-color: var(--clr-forms-select-disabled-border-color) !default;
 $clr-forms-select-option-color: var(--clr-forms-select-option-color) !default;
+$clr-forms-select-option-background-color: var(--clr-forms-select-option-background-color) !default;
 $clr-forms-select-multiple-background-color: var(--clr-forms-select-multiple-background-color) !default;
 $clr-forms-select-multiple-border-color: var(--clr-forms-select-multiple-border-color) !default;
 $clr-forms-select-multiple-option-color: var(--clr-forms-select-multiple-option-color) !default;