From 2ce4e23750e4e0b3669cae145dd0a8b176e8c880 Mon Sep 17 00:00:00 2001
From: vadim <vadim@appsmith.com>
Date: Wed, 24 May 2023 09:31:07 +0200
Subject: [PATCH] fix: WDC color APCA checks (#23660)

## Description

tl;dr Fixed APCA contrast checks for both light and dark modes (detailed
info in the ticket). Refined how we pick shade or tint for `fgOnAccent`.

Fixes #23218

## 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
---
 .../src/utils/TokensAccessor/DarkModeTheme.ts | 36 +++++++-----------
 .../utils/TokensAccessor/LightModeTheme.ts    | 37 ++++++++-----------
 2 files changed, 30 insertions(+), 43 deletions(-)

diff --git a/app/client/packages/design-system/theming/src/utils/TokensAccessor/DarkModeTheme.ts b/app/client/packages/design-system/theming/src/utils/TokensAccessor/DarkModeTheme.ts
index 2cccebcdf6..5139826d34 100644
--- a/app/client/packages/design-system/theming/src/utils/TokensAccessor/DarkModeTheme.ts
+++ b/app/client/packages/design-system/theming/src/utils/TokensAccessor/DarkModeTheme.ts
@@ -140,7 +140,7 @@ export class DarkModeTheme implements ColorModeTheme {
   private get fgAccent() {
     const color = this.seedColor.clone();
 
-    if (this.seedColor.contrastAPCA(this.bg) <= 60) {
+    if (this.bg.contrastAPCA(this.seedColor) >= -60) {
       if (this.seedIsAchromatic) {
         color.oklch.l = 0.79;
         color.oklch.c = 0;
@@ -151,34 +151,26 @@ export class DarkModeTheme implements ColorModeTheme {
       color.oklch.c = 0.136;
       return color;
     }
-
     return color;
   }
 
   private get fgOnAccent() {
-    const color = this.seedColor.clone();
-
-    if (this.seedColor.contrastAPCA(this.bg) <= 40) {
-      if (this.seedIsAchromatic) {
-        color.oklch.l = 0.985;
-        color.oklch.c = 0;
-        return color;
-      }
-
-      color.oklch.l = 0.985;
-      color.oklch.c = 0.016;
-      return color;
-    }
+    const tint = this.seedColor.clone();
+    const shade = this.seedColor.clone();
 
     if (this.seedIsAchromatic) {
-      color.oklch.l = 0.15;
-      color.oklch.c = 0;
-      return color;
+      tint.oklch.c = 0;
+      shade.oklch.c = 0;
     }
 
-    color.oklch.l = 0.15;
-    color.oklch.c = 0.064;
-    return color;
+    tint.oklch.l = 0.94;
+    shade.oklch.l = 0.27;
+
+    if (-this.bgAccent.contrastAPCA(tint) < this.bgAccent.contrastAPCA(shade)) {
+      return shade;
+    }
+
+    return tint;
   }
 
   private get fgNegative() {
@@ -192,7 +184,7 @@ export class DarkModeTheme implements ColorModeTheme {
   private get bdAccent() {
     const color = this.seedColor.clone();
 
-    if (this.bg.contrastAPCA(this.seedColor) > -15) {
+    if (this.bg.contrastAPCA(this.seedColor) >= -25) {
       if (this.seedIsAchromatic) {
         color.oklch.l = 0.985;
         color.oklch.c = 0;
diff --git a/app/client/packages/design-system/theming/src/utils/TokensAccessor/LightModeTheme.ts b/app/client/packages/design-system/theming/src/utils/TokensAccessor/LightModeTheme.ts
index faafb8cc64..1bdaaa0a09 100644
--- a/app/client/packages/design-system/theming/src/utils/TokensAccessor/LightModeTheme.ts
+++ b/app/client/packages/design-system/theming/src/utils/TokensAccessor/LightModeTheme.ts
@@ -235,7 +235,7 @@ export class LightModeTheme implements ColorModeTheme {
   private get fgAccent() {
     const color = this.seedColor.clone();
 
-    if (this.seedColor.contrastAPCA(this.bg) >= -60) {
+    if (this.bg.contrastAPCA(this.seedColor) <= 60) {
       if (this.seedIsAchromatic) {
         color.oklch.l = 0.25;
         color.oklch.c = 0;
@@ -251,29 +251,24 @@ export class LightModeTheme implements ColorModeTheme {
   }
 
   private get fgOnAccent() {
-    const color = this.seedColor.clone();
-
-    if (this.seedColor.contrastAPCA(this.bg) <= -60) {
-      if (this.seedIsAchromatic) {
-        color.oklch.l = 0.985;
-        color.oklch.c = 0;
-        return color;
-      }
-
-      color.oklch.l = 0.985;
-      color.oklch.c = 0.016;
-      return color;
-    }
+    const tint = this.seedColor.clone();
+    const shade = this.seedColor.clone();
 
     if (this.seedIsAchromatic) {
-      color.oklch.l = 0.15;
-      color.oklch.c = 0;
-      return color;
+      tint.oklch.c = 0;
+      shade.oklch.c = 0;
     }
 
-    color.oklch.l = 0.15;
-    color.oklch.c = 0.064;
-    return color;
+    tint.oklch.l = 0.96;
+    shade.oklch.l = 0.23;
+
+    if (
+      -this.bgAccent.contrastAPCA(tint) >= this.bgAccent.contrastAPCA(shade)
+    ) {
+      return tint;
+    }
+
+    return shade;
   }
 
   private get fgNegative() {
@@ -290,7 +285,7 @@ export class LightModeTheme implements ColorModeTheme {
   private get bdAccent() {
     const color = this.seedColor.clone();
 
-    if (this.seedColor.contrastAPCA(this.bg) >= -25) {
+    if (this.bg.contrastAPCA(this.seedColor) <= 25) {
       if (this.seedIsAchromatic) {
         color.oklch.l = 0.15;
         color.oklch.c = 0;