Skip to content

Commit

Permalink
fix: WDS color bgAccentSubtle (dark mode) (#24043)
Browse files Browse the repository at this point in the history
## 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
  • Loading branch information
ichik authored Jun 7, 2023
1 parent adbb305 commit fc295b4
Showing 1 changed file with 14 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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() {
Expand Down

0 comments on commit fc295b4

Please sign in to comment.