feat: WDS color bgNeutral, states and Subtle variant (#25332)

## Description

tl;dr States and other derivatives of `bgNeutral`, some fixes for
`bgNeutral` logic itself.

Fixes #24512  

## Type of change
- New feature (non-breaking change which adds functionality)

## 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/color/DarkModeTheme.ts

@@ -438,11 +438,7 @@ export class DarkModeTheme implements ColorModeTheme {
     const color = this.bgAccent.clone();
 
     // For darker accents it helps to increase neutral's lightness a little, so it's visible against bg
-    if (color.oklch.l < 0.3) {
-      color.oklch.l = color.oklch.l + 0.15;
-    }
-
-    if (color.oklch.l < 0.5) {
+    if (this.bgAccent.oklch.l < 0.5) {
       color.oklch.l = color.oklch.l + 0.05;
     }
 
@@ -451,7 +447,7 @@ export class DarkModeTheme implements ColorModeTheme {
     }
 
     if (this.seedIsCold && !this.seedIsAchromatic) {
-      color.oklch.c = 0.03;
+      color.oklch.c = 0.02;
     }
 
     if (!this.seedIsCold && !this.seedIsAchromatic) {
@@ -462,23 +458,91 @@ export class DarkModeTheme implements ColorModeTheme {
   }
 
   private get bgNeutralHover() {
-    return "#ebeff5";
+    const color = this.bgNeutral.clone();
+
+    // Simplified and adjusted version of bgAccentHover algorithm (bgNeutral has very low or no chroma)
+
+    if (this.bgNeutral.oklch.l >= 0.85) {
+      color.oklch.l = color.oklch.l - 0.07;
+    }
+
+    if (this.bgNeutral.oklch.l >= 0.77 && this.bgNeutral.oklch.l < 0.85) {
+      color.oklch.l = color.oklch.l + 0.04;
+    }
+
+    if (this.bgNeutral.oklch.l >= 0.45 && this.bgNeutral.oklch.l < 0.77) {
+      color.oklch.l = color.oklch.l + 0.03;
+    }
+
+    if (this.bgNeutral.oklch.l >= 0.3 && this.bgNeutral.oklch.l < 0.45) {
+      color.oklch.l = color.oklch.l + 0.04;
+    }
+
+    return color;
   }
 
   private get bgNeutralActive() {
-    return "#e3e9f0";
+    const color = this.bgNeutral.clone();
+
+    // Simplified and adjusted version of bgAccentHover algorithm (bgNeutral has very low or no chroma)
+    if (this.bgNeutral.oklch.l < 0.4) {
+      color.oklch.l = this.bgAccent.oklch.l - 0.01;
+    }
+
+    if (this.bgNeutral.oklch.l >= 0.4 && this.bgNeutral.oklch.l < 0.7) {
+      color.oklch.l = this.bgAccent.oklch.l - 0.04;
+    }
+
+    if (this.bgNeutral.oklch.l >= 0.7 && this.bgNeutral.oklch.l < 0.85) {
+      color.oklch.l = this.bgAccent.oklch.l - 0.05;
+    }
+
+    if (this.bgNeutral.oklch.l >= 0.85) {
+      color.oklch.l = this.bgAccent.oklch.l - 0.13;
+    }
+
+    return color;
   }
 
   private get bgNeutralSubtle() {
-    return "#ffffff";
+    const color = this.seedColor.clone();
+
+    // Adjusted version of bgAccentSubtle (less or no chroma)
+
+    if (this.seedLightness > 0.3) {
+      color.oklch.l = 0.3;
+    }
+
+    // If the color is too dark it won't be visible against bg.
+    if (this.seedLightness < 0.2) {
+      color.oklch.l = 0.2;
+    }
+
+    if (this.seedChroma > 0.025) {
+      color.oklch.c = 0.025;
+    }
+
+    if (this.seedIsAchromatic) {
+      color.oklch.c = 0;
+    }
+
+    return color;
   }
 
   private get bgNeutralSubtleHover() {
-    return "#f2f4f8";
+    const color = this.bgNeutralSubtle.clone();
+
+    color.oklch.l = color.oklch.l + 0.03;
+
+    return color;
   }
 
   private get bgNeutralSubtleActive() {
-    return "#ebeff5";
+    const color = this.bgNeutralSubtle.clone();
+
+    color.oklch.l = color.oklch.l - 0.02;
+
+    return color;
   }
 
   private get bgAssistive() {

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

@@ -458,11 +458,11 @@ export class LightModeTheme implements ColorModeTheme {
     const color = this.bgAccent.clone();
 
     // For bright accents it helps to make neutral a bit darker to differentiate with bgAccent
-    if (color.oklch.l >= 0.85 && !this.seedIsVeryLight) {
+    if (this.bgAccent.oklch.l >= 0.85) {
       color.oklch.l = color.oklch.l - 0.02;
     }
 
-    if (color.oklch.l > 0.25 && color.oklch.l < 0.85) {
+    if (this.bgAccent.oklch.l > 0.25 && this.bgAccent.oklch.l < 0.85) {
       color.oklch.l = color.oklch.l - 0.1;
     }
 
@@ -471,7 +471,7 @@ export class LightModeTheme implements ColorModeTheme {
     }
 
     if (this.seedIsCold && !this.seedIsAchromatic) {
-      color.oklch.c = 0.05;
+      color.oklch.c = 0.03;
     }
 
     if (!this.seedIsCold && !this.seedIsAchromatic) {
@@ -482,23 +482,91 @@ export class LightModeTheme implements ColorModeTheme {
   }
 
   private get bgNeutralHover() {
-    return "#ebeff5";
+    const color = this.bgNeutral.clone();
+
+    // Simplified and adjusted version of bgAccentHover algorithm (bgNeutral has very low or no chroma)
+
+    if (this.bgNeutral.oklch.l < 0.06) {
+      color.oklch.l = color.oklch.l + 0.24;
+    }
+
+    if (this.bgNeutral.oklch.l > 0.06 && this.bgNeutral.oklch.l < 0.14) {
+      color.oklch.l = color.oklch.l + 0.14;
+    }
+
+    if (this.bgNeutral.oklch.l >= 0.14 && this.bgNeutral.oklch.l < 0.21) {
+      color.oklch.l = color.oklch.l + 0.07;
+    }
+
+    if (this.bgNeutral.oklch.l >= 0.21 && this.bgNeutral.oklch.l < 0.7) {
+      color.oklch.l = color.oklch.l + 0.05;
+    }
+
+    if (this.bgNeutral.oklch.l >= 0.7 && this.bgNeutral.oklch.l < 0.955) {
+      color.oklch.l = color.oklch.l + 0.03;
+    }
+
+    if (this.bgNeutral.oklch.l >= 0.955) {
+      color.oklch.l = 0.94;
+    }
+
+    return color;
   }
 
   private get bgNeutralActive() {
-    return "#e3e9f0";
+    const color = this.bgNeutral.clone();
+
+    // Simplified and adjusted version of bgAccentActive algorithm (bgNeutral has very low or no chroma)
+
+    if (this.bgNeutral.oklch.l < 0.4) {
+      color.oklch.l = color.oklch.l - 0.03;
+    }
+
+    if (this.bgNeutral.oklch.l >= 0.4 && this.bgNeutral.oklch.l < 0.955) {
+      color.oklch.l = color.oklch.l - 0.01;
+    }
+
+    if (this.bgNeutral.oklch.l >= 0.955) {
+      color.oklch.l = 0.925;
+    }
+
+    return color;
   }
 
   private get bgNeutralSubtle() {
-    return "#ffffff";
+    const color = this.seedColor.clone();
+
+    // Adjusted version of bgAccentSubtle (less or no chroma)
+
+    if (this.seedLightness < 0.94) {
+      color.oklch.l = 0.94;
+    }
+
+    if (this.seedChroma > 0.01) {
+      color.oklch.c = 0.01;
+    }
+
+    if (this.seedIsAchromatic) {
+      color.oklch.c = 0;
+    }
+
+    return color;
   }
 
   private get bgNeutralSubtleHover() {
-    return "#f2f4f8";
+    const color = this.bgNeutralSubtle.clone();
+
+    color.oklch.l = color.oklch.l + 0.02;
+
+    return color;
   }
 
   private get bgNeutralSubtleActive() {
-    return "#ebeff5";
+    const color = this.bgNeutralSubtle.clone();
+
+    color.oklch.l = color.oklch.l - 0.01;
+
+    return color;
   }
 
   private get bgAssistive() {