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:
parent
adbb305643
commit
fc295b4dc8
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user