From fc295b4dc897bee844755d347892de73a6cef9ea Mon Sep 17 00:00:00 2001
From: vadim <vadim@appsmith.com>
Date: Wed, 7 Jun 2023 15:48:09 +0200
Subject: [PATCH] fix: WDS color `bgAccentSubtle` (dark mode) (#24043)

## Description

tl;dr Changed from naive `lighten` and `darken` to a proper
color-agnostic algos

Fixes #23870

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


https://github.com/appsmithorg/appsmith/assets/80973/640dfe12-2696-4b53-a06b-71ac19648e88



## Type of change

- Bug fix (non-breaking change which fixes an issue)
- 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
---
 .../theming/src/color/DarkModeTheme.ts           | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/client/packages/design-system/theming/src/color/DarkModeTheme.ts b/app/client/packages/design-system/theming/src/color/DarkModeTheme.ts
index cecd15f42164..c689a4ac434d 100644
--- a/app/client/packages/design-system/theming/src/color/DarkModeTheme.ts
+++ b/app/client/packages/design-system/theming/src/color/DarkModeTheme.ts
@@ -102,6 +102,10 @@ export class DarkModeTheme implements ColorModeTheme {
       color.oklch.l = 0.3;
     }
 
+    if (this.seedLightness < 0.2) {
+      color.oklch.l = 0.2;
+    }
+
     if (this.seedChroma > 0.112 && !this.seedIsAchromatic) {
       color.oklch.c = 0.112;
     }
@@ -110,11 +114,19 @@ export class DarkModeTheme implements ColorModeTheme {
   }
 
   private get bgAccentSubtleHover() {
-    return this.bgAccentSubtle.clone().lighten(0.06);
+    const color = this.bgAccentSubtle.clone();
+
+    color.oklch.l = color.oklch.l + 0.03;
+
+    return color;
   }
 
   private get bgAccentSubtleActive() {
-    return this.bgAccentSubtleHover.clone().darken(0.1);
+    const color = this.bgAccentSubtle.clone();
+
+    color.oklch.l = color.oklch.l - 0.02;
+
+    return color;
   }
 
   private get bgAssistive() {