chore: WDS Color bgAccentHover and bgAccentActive (light mode) (#22790)

## Description

tl;dr Gradated hover and active manipulation (more for darker colors,
less for lighter), inverted rules for very light seeds

Fixes #22713

## Media
New on the left, current on the right

https://user-images.githubusercontent.com/80973/234889970-05792d7c-e5c7-49b0-80a2-6c9b31d2751d.mov

## Type of change

- Bug fix (non-breaking change which fixes an issue)
- New feature (non-breaking change which adds functionality)
- Chore (housekeeping or task changes that don't impact user perception)


## How Has This Been Tested?

- Manual

### Test Plan
Initial POC refinement, no testing necessary

## Checklist:
### Dev activity
- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [x] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test

app/client/packages/design-system/theming/src/utils/TokensAccessor/LightModeTheme.ts

@@ -97,11 +97,73 @@ export class LightModeTheme implements ColorModeTheme {
   }
 
   private get bgAccentHover() {
-    return lighten(this.bgAccent, 1.06);
+    let currentColor = this.bgAccent;
+
+    if (this.seedLightness < 0.18) {
+      currentColor = setLch(currentColor, {
+        l: this.seedLightness + 0.3,
+      });
+    }
+
+    if (this.seedLightness >= 0.18 && this.seedLightness < 0.4) {
+      currentColor = setLch(currentColor, {
+        l: this.seedLightness + 0.15,
+      });
+    }
+
+    if (this.seedLightness >= 0.4 && this.seedLightness < 0.7) {
+      currentColor = setLch(currentColor, {
+        l: this.seedLightness + 0.05,
+      });
+    }
+
+    if (this.seedLightness >= 0.7) {
+      currentColor = setLch(currentColor, {
+        l: this.seedLightness + 0.03,
+      });
+    }
+
+    if (this.seedIsVeryLight) {
+      currentColor = setLch(currentColor, {
+        l: 0.95,
+        c: this.seedChroma * 1.15,
+        h: this.seedHue,
+      });
+    }
+
+    return currentColor;
   }
 
   private get bgAccentActive() {
-    return lighten(this.bgAccent, 0.9);
+    let currentColor = this.bgAccent;
+
+    if (this.seedLightness < 0.4) {
+      currentColor = setLch(currentColor, {
+        l: this.seedLightness - 0.04,
+      });
+    }
+
+    if (this.seedLightness >= 0.4 && this.seedLightness < 0.7) {
+      currentColor = setLch(currentColor, {
+        l: this.seedLightness - 0.02,
+      });
+    }
+
+    if (this.seedLightness >= 0.7) {
+      currentColor = setLch(currentColor, {
+        l: this.seedLightness - 0.01,
+      });
+    }
+
+    if (this.seedIsVeryLight) {
+      currentColor = setLch(currentColor, {
+        l: 0.935,
+        c: this.seedChroma * 1.15,
+        h: this.seedHue,
+      });
+    }
+
+    return currentColor;
   }
 
   // used only for generating child colors, not used as a token