fix: WDS bdNeutralHover color (#31922)

Fixes #31899

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced a new hover outline color for input fields to enhance user
interaction.

- **Style**
- Updated hover outline colors for both Dark and Light modes to improve
visibility and aesthetics.

- **Tests**
- Adjusted tests to reflect new color values for hover states in both
Dark and Light themes.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -109,6 +109,7 @@ export class DarkModeTheme implements ColorModeTheme {
       bdFocus: this.bdFocus.to("sRGB").toString(),
       bdNeutral: this.bdNeutral.to("sRGB").toString(),
       bdNeutralHover: this.bdNeutralHover.to("sRGB").toString(),
+      bdOnNeutralHover: this.bdOnNeutralHover.to("sRGB").toString(),
       bdPositive: this.bdPositive.to("sRGB").toString(),
       bdPositiveHover: this.bdPositiveHover.to("sRGB").toString(),
       bdNegative: this.bdNegative.to("sRGB").toString(),
@@ -957,6 +958,7 @@ export class DarkModeTheme implements ColorModeTheme {
 
   private get bdNeutral() {
     // Desatured version of the seed for harmonious combination with backgrounds and accents.
+    // Used in checkbox, radio button
     const color = this.bdAccent.clone();
 
     color.oklch.c = 0.012;
@@ -980,15 +982,15 @@ export class DarkModeTheme implements ColorModeTheme {
     const color = this.bdNeutral.clone();
 
     if (this.bdNeutral.oklch.l < 0.8) {
-      color.oklch.l += 0.05;
+      color.oklch.l += 0.15;
     }
 
     if (this.bdNeutral.oklch.l >= 0.8 && this.bdNeutral.oklch.l < 0.9) {
-      color.oklch.l += 0.01;
+      color.oklch.l += 0.1;
     }
 
     if (this.bdNeutral.oklch.l >= 0.9) {
-      color.oklch.l -= 0.35;
+      color.oklch.l -= 0.25;
     }
 
     return color;
@@ -1134,6 +1136,25 @@ export class DarkModeTheme implements ColorModeTheme {
     return color;
   }
 
+  private get bdOnNeutralHover() {
+    // Outline on the input field shown on hover
+    const color = this.bdNeutral.clone();
+
+    if (this.bdNeutral.oklch.l < 0.8) {
+      color.oklch.l += 0.05;
+    }
+
+    if (this.bdNeutral.oklch.l >= 0.8 && this.bdNeutral.oklch.l < 0.9) {
+      color.oklch.l += 0.01;
+    }
+
+    if (this.bdNeutral.oklch.l >= 0.9) {
+      color.oklch.l -= 0.35;
+    }
+
+    return color;
+  }
+
   private get bdOnPositive() {
     // Separator on bgPositive, low contrast to not pull attention from actual separated content elements
     const color = this.bgPositive.clone();

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

@@ -115,6 +115,7 @@ export class LightModeTheme implements ColorModeTheme {
 
       bdOnAccent: this.bdOnAccent.to("sRGB").toString(),
       bdOnNeutral: this.bdOnNeutral.to("sRGB").toString(),
+      bdOnNeutralHover: this.bdOnNeutralHover.to("sRGB").toString(),
       bdOnPositive: this.bdOnPositive.to("sRGB").toString(),
       bdOnNegative: this.bdOnNegative.to("sRGB").toString(),
       bdOnWarning: this.bdOnWarning.to("sRGB").toString(),
@@ -992,6 +993,7 @@ export class LightModeTheme implements ColorModeTheme {
 
   private get bdNeutral() {
     // Desatured version of the seed for harmonious combination with backgrounds and accents.
+    // Used in checkbox, radio button
     const color = this.bdAccent.clone();
 
     color.oklch.c = 0.001;
@@ -1011,19 +1013,19 @@ export class LightModeTheme implements ColorModeTheme {
     const color = this.bdNeutral.clone();
 
     if (this.bdNeutral.oklch.l < 0.06) {
-      color.oklch.l += 0.95;
+      color.oklch.l += 0.6;
     }
 
     if (this.bdNeutral.oklch.l >= 0.06 && this.bdNeutral.oklch.l < 0.25) {
-      color.oklch.l += 0.75;
+      color.oklch.l += 0.4;
     }
 
     if (this.bdNeutral.oklch.l >= 0.25 && this.bdNeutral.oklch.l < 0.5) {
-      color.oklch.l += 0.5;
+      color.oklch.l += 0.25;
     }
 
     if (this.bdNeutral.oklch.l >= 0.5) {
-      color.oklch.l += 0.3;
+      color.oklch.l += 0.1;
     }
 
     return color;
@@ -1183,6 +1185,29 @@ export class LightModeTheme implements ColorModeTheme {
     return color;
   }
 
+  private get bdOnNeutralHover() {
+    // Outline on the input field shown on hover
+    const color = this.bdNeutral.clone();
+
+    if (this.bdNeutral.oklch.l < 0.06) {
+      color.oklch.l += 0.95;
+    }
+
+    if (this.bdNeutral.oklch.l >= 0.06 && this.bdNeutral.oklch.l < 0.25) {
+      color.oklch.l += 0.75;
+    }
+
+    if (this.bdNeutral.oklch.l >= 0.25 && this.bdNeutral.oklch.l < 0.5) {
+      color.oklch.l += 0.5;
+    }
+
+    if (this.bdNeutral.oklch.l >= 0.5) {
+      color.oklch.l += 0.3;
+    }
+
+    return color;
+  }
+
   private get bdOnPositive() {
     // Separator on bgPositive, low contrast to not pull attention from actual separated content elements
     const color = this.bgPositive.clone();

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

@@ -69,6 +69,7 @@ export interface ColorModeTheme {
     // bd on bg*
     bdOnAccent: string;
     bdOnNeutral: string;
+    bdOnNeutralHover: string;
     bdOnPositive: string;
     bdOnNegative: string;
     bdOnWarning: string;

app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts

@@ -775,7 +775,7 @@ describe("bdNeutralHover", () => {
     const { bdNeutralHover } = new DarkModeTheme(
       "oklch(0.45 0.03 60)",
     ).getColors();
-    expect(bdNeutralHover).toEqual("rgb(51.374% 51.374% 51.374%)");
+    expect(bdNeutralHover).toEqual("rgb(63.258% 63.258% 63.258%)");
   });
 });
 

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

@@ -815,7 +815,7 @@ describe("bdNeutralHover", () => {
     const { bdNeutralHover } = new LightModeTheme(
       "oklch(0.45 0.03 60)",
     ).getColors();
-    expect(bdNeutralHover).toEqual("rgb(93.448% 93.448% 93.448%)");
+    expect(bdNeutralHover).toEqual("rgb(62.05% 62.05% 62.05%)");
   });
 });
 

app/client/packages/design-system/widgets/src/styles/src/text-input.module.css

@@ -37,7 +37,7 @@
 
   & [data-field-input][data-hovered] {
     background-color: var(--color-bg-neutral-subtle-hover);
-    box-shadow: inset 0 0 0 1px var(--color-bd-neutral-hover);
+    box-shadow: inset 0 0 0 1px var(--color-bd-on-neutral-hover);
   }
 
   /**