From d98dd29b4c9fd080f4374111f361abf7d2842282 Mon Sep 17 00:00:00 2001
From: vadim <vadim@appsmith.com>
Date: Thu, 21 Dec 2023 12:48:42 +0100
Subject: [PATCH] chore: WDS shadows quick fix (#29788)

Fixes #29744

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

## Summary by CodeRabbit

- **Style**
- Updated the Dark Mode theme with enhanced shadow elevations for better
visual depth.
- Refined the Light Mode theme by adjusting transparency levels for a
cleaner appearance.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../theming/src/color/src/DarkModeTheme.ts           | 12 +++++++++---
 .../theming/src/color/src/LightModeTheme.ts          |  6 ++++++
 .../theming/src/token/src/defaultTokens.json         |  2 +-
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts
index 49625a0ec8..344ba94f4d 100644
--- a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts
+++ b/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts
@@ -624,7 +624,9 @@ export class DarkModeTheme implements ColorModeTheme {
   private get shadowElevation1() {
     const color = this.seedColor.clone();
 
-    color.oklch.l = 0.2;
+    color.oklch.l = 0.1;
+
+    color.alpha = 0.5;
 
     return color;
   }
@@ -632,7 +634,9 @@ export class DarkModeTheme implements ColorModeTheme {
   private get shadowElevation2() {
     const color = this.shadowElevation1.clone();
 
-    color.oklch.l -= 0.05;
+    color.oklch.l += 0.05;
+
+    color.alpha = 0.45;
 
     return color;
   }
@@ -640,7 +644,9 @@ export class DarkModeTheme implements ColorModeTheme {
   private get shadowElevation3() {
     const color = this.shadowElevation2.clone();
 
-    color.oklch.l -= 0.05;
+    color.oklch.l += 0.05;
+
+    color.alpha = 0.4;
 
     return color;
   }
diff --git a/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts
index f54391fe17..9c005f468a 100644
--- a/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts
+++ b/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts
@@ -664,6 +664,8 @@ export class LightModeTheme implements ColorModeTheme {
 
     color.oklch.l = 0.2;
 
+    color.alpha = 0.35;
+
     return color;
   }
 
@@ -672,6 +674,8 @@ export class LightModeTheme implements ColorModeTheme {
 
     color.oklch.l += 0.05;
 
+    color.alpha = 0.3;
+
     return color;
   }
 
@@ -680,6 +684,8 @@ export class LightModeTheme implements ColorModeTheme {
 
     color.oklch.l += 0.05;
 
+    color.alpha = 0.25;
+
     return color;
   }
 
diff --git a/app/client/packages/design-system/theming/src/token/src/defaultTokens.json b/app/client/packages/design-system/theming/src/token/src/defaultTokens.json
index 5d7ad426f8..5615fde876 100644
--- a/app/client/packages/design-system/theming/src/token/src/defaultTokens.json
+++ b/app/client/packages/design-system/theming/src/token/src/defaultTokens.json
@@ -57,7 +57,7 @@
     "1": "0px"
   },
   "boxShadow": {
-    "1": "0 4px 6px 0 var(--color-shadow-elevation-1)",
+    "1": "0 4px 8px 0 var(--color-shadow-elevation-1)",
     "2": "0 2px 4px 0 var(--color-shadow-elevation-2)",
     "3": "0 1px 2px 0 var(--color-shadow-elevation-3)"
   },