feat(tokens): add/update color tokens (#310)

## 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?

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

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

## What is the current behavior?

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

Issue Number: CDE-2038, CDE-1923

## What is the new behavior?

Updates values of interactions tokens to meet requirements and add two
new tokens for selected hover/active state.

## 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

projects/core/build/tokens.ts

@@ -551,9 +551,13 @@ const aliases = {
       borderColor: token(color.construction[500]),
       background: {
         value: token(color.white),
-        hover: token(color.blue[50]),
-        active: token(color.blue[75]),
-        selected: token(color.blue[50]),
+        hover: token(color.construction[50]),
+        active: token(color.construction[100]),
+        selected: {
+          value: token(color.blue[75]),
+          hover: token(color.construction[100]),
+          active: token(color.construction[200]),
+        },
         disabled: token(color.white),
         highlight: token(color.blue[700]),
       },
@@ -613,6 +617,11 @@ const aliases = {
           shade: token(color.construction[300]),
         },
       },
+      backdrop: {
+        background: {
+          value: token('hsla(0, 0%, 100%, 0.6)'),
+        },
+      },
       borderColor: token(color.construction[200]),
     },
   },

projects/core/src/index.performance.ts

@@ -9,7 +9,7 @@ import { testBundleSize } from 'web-test-runner-performance/browser.js';
 describe('performance', () => {
   it(`should meet maximum individual css bundle size limits`, async () => {
     expect((await testBundleSize('@cds/core/global.min.css')).kb).toBeLessThan(9.0);
-    expect((await testBundleSize('@cds/core/styles/theme.dark.min.css')).kb).toBeLessThan(0.846);
+    expect((await testBundleSize('@cds/core/styles/theme.dark.min.css')).kb).toBeLessThan(0.883);
     expect((await testBundleSize('@cds/core/list/list.min.css')).kb).toBeLessThan(0.5);
 
     // contained in @cds/core/global.min.css

projects/core/src/styles/theme.dark.scss

@@ -37,6 +37,7 @@
   --cds-alias-typography-link-color-visited-hover: #{$cds-global-color-lavender-200};
 
   --cds-alias-object-app-background: #{$cds-global-color-construction-1000};
+  --cds-alias-object-container-backdrop-background: #{$cds-alias-object-opacity-300};
   --cds-alias-object-container-background: #{$cds-global-color-construction-900};
   --cds-alias-object-container-background-tint: #{$cds-global-color-construction-1000};
   --cds-alias-object-container-background-shade: #{$cds-global-color-construction-800};
@@ -57,9 +58,11 @@
   --cds-alias-object-interaction-color-selected: #{$cds-global-color-construction-200};
   --cds-alias-object-interaction-color-disabled: #{$cds-global-color-construction-600};
   --cds-alias-object-interaction-background: #{$cds-global-color-construction-1000};
-  --cds-alias-object-interaction-background-hover: #{$cds-global-color-construction-600};
-  --cds-alias-object-interaction-background-active: #{$cds-global-color-construction-800};
-  --cds-alias-object-interaction-background-selected: #{$cds-global-color-construction-700};
+  --cds-alias-object-interaction-background-hover: #{$cds-global-color-construction-800};
+  --cds-alias-object-interaction-background-active: #{$cds-global-color-construction-600};
+  --cds-alias-object-interaction-background-selected: #{$cds-global-color-blue-900};
+  --cds-alias-object-interaction-background-selected-active: #{$cds-global-color-blue-600};
+  --cds-alias-object-interaction-background-selected-hover: #{$cds-global-color-blue-700};
   --cds-alias-object-interaction-background-disabled: #{$cds-global-color-construction-700};
   --cds-alias-object-interaction-background-highlight: #{$cds-global-color-blue-400};
   --cds-alias-object-interaction-border-color: #{$cds-global-color-construction-300};