fix(spinner): override wrong tokens mapping (#1500)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [x] 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

## PR Type

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:

## What is the current behavior?


![image](https://github.com/user-attachments/assets/f50088df-935f-4bad-a7a1-fba1c1d1d084)


<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: CDE-1513

## What is the new behavior?


![image](https://github.com/user-attachments/assets/4bd6d173-852e-4160-ad4e-90ebd0d0315e)


## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

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

## Other information

Spinner inverse tokens were correct but their mapping to the global ones
is wrong. This overrides the wrong mapping and these tokens are not used
in other places so we are safe with the fix.

Update: after discussion with @valentin-mladenov and design team we've
found out that two more tokens have incorrect mapping, so we are adding
them too in this PR.

Another improvement that the PR includes is providing a more meaningful
demo for the inverse spinner (with proper background) in the demo app
and the storybook

---------

Co-authored-by: GitHub <[email protected]>

.storybook/stories/spinner/spinner.stories.ts

@@ -35,7 +35,14 @@ export default {
 
 const SpinnerTemplate: StoryFn = args => ({
   template: `
-    <div style="text-align: center">
+    <style>
+      .spinner-inverse-container {
+        background: var(--cds-alias-object-container-background-inverse);
+        color: var(--cds-alias-typography-color-100);
+        padding: 20px;
+      }
+    </style>
+    <div style="text-align: center" [class.spinner-inverse-container]="clrInverse">
       <clr-spinner [clrInverse]="clrInverse" [clrSmall]="clrSmall" [clrMedium]="clrMedium" [clrInline]="clrInline">
         {{ text }}
       </clr-spinner>

projects/angular/src/progress/spinner/STYLES.md

@@ -2,20 +2,20 @@
 
 ## CSS Custom Properties
 
-| CSS Custom Property                 | Description                                  |
-| ----------------------------------- | -------------------------------------------- |
-| --clr-spinner-default-size          | Size (diameter) of large spinner             |
-| --clr-spinner-medium-size           | Size of medium spinner                       |
-| --clr-spinner-small-size            | Size of small spinner                        |
-| --clr-spinner-margin-right          | Spacing between spinner and text next to it  |
-| --clr-spinner-default-stroke-width  | Width (thickness) of stroke of large spinner |
-| --clr-spinner-medium-stroke-width   | Width of medium spinner                      |
-| --clr-spinner-small-stroke-width    | Width of small spinner                       |
-| --clr-spinner-fill-bg-color         | Spinner background color                     |
-| --clr-spinner-fill-inverse-bg-color | Spinner background color for dark background |
-| --clr-spinner-fill-color            | Color of rotating part of spinner            |
-| --clr-spinner-fill-inverse-color    | Spinner background color for dark background |
-| --clr-spinner-border-radius         | Spinner border radius                        |
+| CSS Custom Property                 | Description                                      |
+| ----------------------------------- | ------------------------------------------------ |
+| --clr-spinner-default-size          | Size (diameter) of large spinner                 |
+| --clr-spinner-medium-size           | Size of medium spinner                           |
+| --clr-spinner-small-size            | Size of small spinner                            |
+| --clr-spinner-margin-right          | Spacing between spinner and text next to it      |
+| --clr-spinner-default-stroke-width  | Width (thickness) of stroke of large spinner     |
+| --clr-spinner-medium-stroke-width   | Width of medium spinner                          |
+| --clr-spinner-small-stroke-width    | Width of small spinner                           |
+| --clr-spinner-fill-bg-color         | Spinner background color                         |
+| --clr-spinner-fill-inverse-bg-color | Spinner background color for inversed background |
+| --clr-spinner-fill-color            | Color of rotating part of spinner                |
+| --clr-spinner-fill-inverse-color    | Spinner color for inversed background            |
+| --clr-spinner-border-radius         | Spinner border radius                            |
 
 ## CSS Classes
 

projects/demo/src/app/spinners/spinner-types.html

@@ -16,7 +16,7 @@ <h5>Inline Spinners</h5>
   <span>Loading...</span>
 </div>
 
-<h5>Spinners on a dark background</h5>
-<div class="clr-example squeeze example-dark">
+<h5>Spinners on an inversed background</h5>
+<div class="clr-example squeeze example-inversed">
   <span class="spinner spinner-inverse">Loading...</span>
 </div>

projects/demo/src/app/spinners/spinner.demo.scss

@@ -8,7 +8,7 @@
 .clr-example {
   text-align: center;
 
-  &.example-dark {
-    background: hsl(0, 0%, 19%);
+  &.example-inversed {
+    background: var(--cds-alias-object-container-background-inverse);
   }
 }

projects/ui/src/temp-overrides.scss

@@ -22,6 +22,9 @@
   --cds-alias-object-interaction-vertical-navigation-background-selected: #{tokens.$cds-global-color-white};
   --cds-alias-object-interaction-vertical-navigation-background-selected-hover: #{tokens.$cds-global-color-construction-200};
   --cds-alias-object-interaction-vertical-navigation-background-selected-active: #{tokens.$cds-global-color-construction-300};
+  --cds-alias-object-container-background-inverse: #{tokens.$cds-global-color-construction-600};
+  --cds-alias-object-container-background-inverse-tint: #{tokens.$cds-global-color-construction-800};
+  --cds-alias-object-container-background-inverse-shade: #{tokens.$cds-global-color-construction-500};
 }
 
 [cds-theme~='dark'] {
@@ -41,4 +44,8 @@
   --cds-alias-object-interaction-vertical-navigation-background-selected: #{tokens.$cds-global-color-blue-900};
   --cds-alias-object-interaction-vertical-navigation-background-selected-hover: #{tokens.$cds-global-color-construction-800};
   --cds-alias-object-interaction-vertical-navigation-background-selected-active: #{tokens.$cds-global-color-construction-600};
+  --cds-alias-object-container-background-inverse: #{tokens.$cds-global-color-construction-200};
+  --cds-alias-object-container-background-inverse-tint: #{tokens.$cds-global-color-construction-100};
+  --cds-alias-object-container-background-inverse-shade: #{tokens.$cds-global-color-construction-300};
+  --cds-alias-object-container-background-dark: #{tokens.$cds-global-color-construction-700};
 }