fix(buttons): replace click with active tokens (#1638)

## PR Checklist

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

## PR Type

What kind of change does this PR introduce?

- [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?
Buttons are using status click tokens for active background color.

Issue Number: CDE-2473, CDE-2475

## What is the new behavior?
Adding active interaction status tokens.
Buttons are using status active tokens for active background color.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

projects/angular/src/button/_properties.buttons.scss

@@ -82,7 +82,7 @@
     --clr-btn-primary-hover-bg-color: #{tokens.$cds-alias-object-interaction-info-hover};
     --clr-btn-primary-hover-color: var(--clr-btn-primary-color);
     --clr-btn-primary-active-color: #{tokens.$cds-alias-typography-color-100};
-    --clr-btn-primary-active-bg-color: #{tokens.$cds-alias-object-interaction-info-click};
+    --clr-btn-primary-active-bg-color: var(--cds-alias-object-interaction-info-active);
 
     --clr-btn-primary-disabled-color: #{tokens.$cds-alias-typography-disabled-button};
     --clr-btn-primary-disabled-bg-color: #{tokens.$cds-alias-status-disabled};
@@ -112,7 +112,7 @@
     --clr-btn-success-hover-bg-color: #{tokens.$cds-alias-object-interaction-success-hover};
     --clr-btn-success-hover-color: var(--clr-btn-success-color);
     --clr-btn-success-active-color: #{tokens.$cds-alias-typography-color-100};
-    --clr-btn-success-active-bg-color: #{tokens.$cds-alias-object-interaction-success-click};
+    --clr-btn-success-active-bg-color: var(--cds-alias-object-interaction-success-active);
 
     --clr-btn-success-disabled-color: #{tokens.$cds-alias-typography-disabled-button};
     --clr-btn-success-disabled-bg-color: #{tokens.$cds-alias-status-disabled};
@@ -141,7 +141,7 @@
     --clr-btn-danger-border-color: var(--clr-btn-danger-bg-color);
     --clr-btn-danger-hover-bg-color: #{tokens.$cds-alias-object-interaction-danger-hover};
     --clr-btn-danger-hover-color: var(--clr-btn-danger-color);
-    --clr-btn-danger-active-bg-color: #{tokens.$cds-alias-object-interaction-danger-click};
+    --clr-btn-danger-active-bg-color: var(--cds-alias-object-interaction-danger-active);
     --clr-btn-danger-active-color: #{tokens.$cds-alias-typography-color-100};
 
     --clr-btn-danger-disabled-color: #{tokens.$cds-alias-typography-disabled-button};
@@ -171,7 +171,7 @@
     --clr-btn-warning-border-color: var(--clr-btn-warning-bg-color);
     --clr-btn-warning-hover-bg-color: #{tokens.$cds-alias-object-interaction-warning-hover};
     --clr-btn-warning-hover-color: var(--clr-btn-warning-color);
-    --clr-btn-warning-active-bg-color: #{tokens.$cds-alias-object-interaction-warning-click};
+    --clr-btn-warning-active-bg-color: var(--cds-alias-object-interaction-warning-active);
     --clr-btn-warning-active-color: var(--clr-btn-warning-color);
 
     --clr-btn-warning-disabled-color: #{tokens.$cds-alias-typography-disabled-button};
@@ -201,7 +201,7 @@
     --clr-btn-neutral-border-color: var(--clr-btn-neutral-bg-color);
     --clr-btn-neutral-hover-bg-color: #{tokens.$cds-alias-object-interaction-neutral-hover};
     --clr-btn-neutral-hover-color: var(--clr-btn-neutral-color);
-    --clr-btn-neutral-active-bg-color: #{tokens.$cds-alias-object-interaction-neutral-click};
+    --clr-btn-neutral-active-bg-color: var(--cds-alias-object-interaction-neutral-active);
     --clr-btn-neutral-active-color: var(--clr-btn-neutral-color);
 
     --clr-btn-neutral-disabled-color: #{tokens.$cds-alias-typography-disabled-button};
@@ -319,7 +319,7 @@
     --clr-btn-inverse-bg-color: var(--clr-btn-transparent-bg-color);
     --clr-btn-inverse-hover-bg-color: #{tokens.$cds-alias-object-interaction-inverse-hover};
     --clr-btn-inverse-hover-color: var(--clr-btn-inverse-color); // var(--clr-color-neutral-0);
-    --clr-btn-inverse-active-bg-color: #{tokens.$cds-alias-object-interaction-inverse-click};
+    --clr-btn-inverse-active-bg-color: var(--cds-alias-object-interaction-inverse-active);
     --clr-btn-inverse-active-color: #{tokens.$cds-global-color-white};
 
     --clr-btn-inverse-disabled-color: #{tokens.$cds-alias-typography-disabled};

projects/ui/src/temp-overrides.scss

@@ -17,6 +17,15 @@
     --cds-alias-object-interaction-background-selected-hover: #{tokens.$cds-global-color-construction-100};
     --cds-alias-object-interaction-background-selected-active: #{tokens.$cds-global-color-construction-200};
 
+    // status interaction tokens
+    --cds-alias-object-interaction-info-selected: #{tokens.$cds-global-color-blue-900};
+    --cds-alias-object-interaction-info-active: #{tokens.$cds-alias-object-interaction-info-click};
+    --cds-alias-object-interaction-success-active: #{tokens.$cds-alias-object-interaction-success-click};
+    --cds-alias-object-interaction-warning-active: #{tokens.$cds-alias-object-interaction-warning-click};
+    --cds-alias-object-interaction-danger-active: #{tokens.$cds-alias-object-interaction-danger-click};
+    --cds-alias-object-interaction-neutral-active: #{tokens.$cds-alias-object-interaction-neutral-click};
+    --cds-alias-object-interaction-inverse-active: #{tokens.$cds-alias-object-interaction-inverse-click};
+
     // Vertical-nav not selected
     --cds-alias-object-interaction-background-shade: #{tokens.$cds-global-color-construction-100};
     --cds-alias-object-interaction-background-shade-hover: #{tokens.$cds-global-color-construction-200};
@@ -46,6 +55,9 @@
     --cds-alias-object-interaction-background-selected-active: #{tokens.$cds-global-color-construction-600};
     --cds-alias-object-interaction-background-selected-hover: #{tokens.$cds-global-color-construction-700};
 
+    // status interaction tokens
+    --cds-alias-object-interaction-info-selected: #{tokens.$cds-global-color-blue-500};
+
     // Vertical-nav not selected
     --cds-alias-object-interaction-background-shade: #{tokens.$cds-global-color-construction-900};
     --cds-alias-object-interaction-background-shade-hover: #{tokens.$cds-global-color-construction-800};