chore: WDS elevation colors refinement (#29618)

Closes #29421

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

- **Style**
- Enhanced the visual contrast in Dark Mode by adjusting background
elevation colors for improved readability.
- Refined Light Mode background colors for better visual hierarchy based
on lightness conditions.
- Updated shadow effects on UI components to provide a more pronounced
depth and focus.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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

@@ -592,23 +592,23 @@ export class DarkModeTheme implements ColorModeTheme {
   private get bgElevation1() {
     const color = this.bg.clone();
 
-    color.oklch.l += 0.05;
+    color.oklch.l += 0.07;
 
     return color;
   }
 
   private get bgElevation2() {
     const color = this.bgElevation1.clone();
 
-    color.oklch.l += 0.05;
+    color.oklch.l += 0.04;
 
     return color;
   }
 
   private get bgElevation3() {
     const color = this.bgElevation2.clone();
 
-    color.oklch.l += 0.05;
+    color.oklch.l += 0.02;
 
     return color;
   }

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

@@ -133,7 +133,7 @@ export class LightModeTheme implements ColorModeTheme {
     }
 
     if (!this.seedIsVeryLight) {
-      color.oklch.l = 0.985;
+      color.oklch.l = 0.96;
     }
 
     // Cold colors can have a bit more chroma while staying perceptually neutral
@@ -619,16 +619,27 @@ export class LightModeTheme implements ColorModeTheme {
   private get bgElevation1() {
     const color = this.bg.clone();
 
-    color.oklch.l += 0.01;
+    if (this.seedIsVeryLight) {
+      color.oklch.l += 0.015;
+    }
+
+    if (!this.seedIsVeryLight) {
+      color.oklch.l += 0.02;
+    }
 
     return color;
   }
 
   private get bgElevation2() {
     const color = this.bgElevation1.clone();
 
-    color.oklch.l += 0.01;
+    if (this.seedIsVeryLight) {
+      color.oklch.l += 0.012;
+    }
 
+    if (!this.seedIsVeryLight) {
+      color.oklch.l += 0.015;
+    }
     return color;
   }
 

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

@@ -8,7 +8,7 @@ describe("bg color", () => {
 
   it("should return correct color when lightness < 0.93", () => {
     const { bg } = new LightModeTheme("oklch(0.92 0.09 231)").getColors();
-    expect(bg).toBe("rgb(95.828% 98.573% 100%)");
+    expect(bg).toBe("rgb(92.567% 95.296% 96.777%)");
   });
 
   it("should return correct color when hue > 120 && hue < 300", () => {
@@ -18,12 +18,12 @@ describe("bg color", () => {
 
   it("should return correct color when hue < 120 or hue > 300", () => {
     const { bg } = new LightModeTheme("oklch(0.92 0.07 110)").getColors();
-    expect(bg).toBe("rgb(98.101% 98.258% 96.176%)");
+    expect(bg).toBe("rgb(94.827% 94.982% 92.913%)");
   });
 
   it("should return correct color when chroma < 0.04", () => {
     const { bg } = new LightModeTheme("oklch(0.92 0.02 110)").getColors();
-    expect(bg).toBe("rgb(98.026% 98.026% 98.026%)");
+    expect(bg).toBe("rgb(94.752% 94.752% 94.752%)");
   });
 });
 
@@ -794,12 +794,12 @@ describe("bdFocus color", () => {
 
   it("should return correct color when hue is between 0 and 55", () => {
     const { bdFocus } = new LightModeTheme("oklch(0.85 0.1 30)").getColors();
-    expect(bdFocus).toEqual("rgb(100% 70.125% 64.059%)");
+    expect(bdFocus).toEqual("rgb(72.468% 27.962% 22.197%)");
   });
 
   it("should return correct color when hue >  340", () => {
     const { bdFocus } = new LightModeTheme("oklch(0.85 0.1 350)").getColors();
-    expect(bdFocus).toEqual("rgb(100% 67.07% 84.709%)");
+    expect(bdFocus).toEqual("rgb(68.494% 27.322% 49.304%)");
   });
 });
 

app/client/packages/design-system/theming/src/token/src/defaultTokens.json

@@ -57,9 +57,9 @@
     "1": "0px"
   },
   "boxShadow": {
-    "1": "0 2px 2px 0 rgba(0, 0, 0, 0.2)",
-    "2": "0 2px 2px 0 rgba(0, 0, 0, 0.2)",
-    "3": "0 2px 2px 0 rgba(0, 0, 0, 0.2)"
+    "1": "0 8px 8px 0 rgba(0, 0, 0, 0.05)",
+    "2": "0 4px 4px 0 rgba(0, 0, 0, 0.1)",
+    "3": "0 2px 2px 0 rgba(0, 0, 0, 0.15)"
   },
   "borderWidth": {
     "1": "1px",

app/client/packages/design-system/widgets/src/testing/Elevation.tsx

@@ -24,7 +24,7 @@ export const Elevation = () => {
           padding="spacing-6"
           style={{
             background: "var(--color-bg-elevation-3)",
-            boxShadow: "var(--box-shadow-1)",
+            boxShadow: "var(--box-shadow-3)",
           }}
         />
       </Flex>