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
This commit is contained in:
vadim 2023-06-07 15:48:09 +02:00 committed by GitHub
parent adbb305643
commit fc295b4dc8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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() {