chore: WDS outline buttons color adjustment (#34615)

## Description
Fixes #34336 

~It was rare before, but with some lighter seeds borders could be
perceivably more prominent than fg. I made sure this can't be the case.~

Borders are now lighter and less saturated than accents to emphasize the
text label.

| Before | After |
|--------|--------|
|
![before-light](https://github.com/appsmithorg/appsmith/assets/80973/627b3dae-287a-464d-89bb-0b3f0fbada79)
|
![after-light](https://github.com/appsmithorg/appsmith/assets/80973/b4ffda8d-bc4b-4e84-a863-f22de3dce9b1)
|
|
![before-dark](https://github.com/appsmithorg/appsmith/assets/80973/f5897183-0f39-4b34-a6f6-3ef4f8c05fdb)
|
![after-dark](https://github.com/appsmithorg/appsmith/assets/80973/6f07ffff-081b-4c0b-91a4-74edcf8d0995)
|

## Automation

/ok-to-test tags="@tag.Anvil"

### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/9889245682>
> Commit: b1769eb1ce459d8ae27267de246b63bca1d2137a
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=9889245682&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Anvil`
> Spec:
> <hr>Thu, 11 Jul 2024 10:09:49 UTC
<!-- end of auto-generated comment: Cypress test results  -->



## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Enhanced snapshot testing with a new `comparisonMethod` parameter for
improved image comparison in `AnvilSnapshot`.

- **Improvements**
- Adjusted color calculations in Light Mode and Dark Mode themes for
better contrast and visual consistency.

- **Tests**
- Updated color tests to align with new RGB values reflecting changes in
lightness, chroma, and hue for both Light Mode and Dark Mode themes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Valera Melnikov <valera@appsmith.com>

app/client/cypress/support/Pages/Anvil/AnvilSnapshot.ts

@@ -24,7 +24,9 @@ export class AnvilSnapshot {
 
     this.agHelper
       .GetElement(this.locators.canvas)
-      .matchImageSnapshot(`anvil${widgetName}CanvasDark`);
+      .matchImageSnapshot(`anvil${widgetName}CanvasDark`, {
+        comparisonMethod: "ssim",
+      });
 
     this.setTheme("light");
   };

app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts

@@ -918,17 +918,22 @@ export class DarkModeTheme implements ColorModeTheme {
   private get bdAccent() {
     const color = this.seedColor.clone();
 
-    // For light content on dark background APCA contrast is negative. −15 is “The absolute minimum for any non-text that needs to be discernible and differentiable, but does not apply to semantic non-text such as icons”. In practice, thin borders are perceptually too subtle when using this as a threshold. −25 is used as the required minimum instead. Failure to reach this contrast level is most likely due to high lightness. Lightness and chroma are set to ones that reach the threshold universally regardless of hue.
-    if (this.bg.contrastAPCA(this.seedColor) >= -25) {
-      if (this.seedIsAchromatic) {
-        color.oklch.l = 0.87;
-        color.oklch.c = 0;
-      }
+    if (this.seedIsCold) {
+      color.oklch.l = 0.42;
+      color.oklch.c = 0.07;
+    }
 
-      if (!this.seedIsAchromatic) {
-        color.oklch.l = 0.84;
-        color.oklch.c = 0.13;
-      }
+    if (!this.seedIsCold) {
+      color.oklch.l = 0.38;
+      color.oklch.c = 0.05;
+    }
+
+    if (this.seedIsAchromatic) {
+      color.oklch.c = 0;
+    }
+    // For light content on dark background APCA contrast is negative. −15 is “The absolute minimum for any non-text that needs to be discernible and differentiable, but does not apply to semantic non-text such as icons”.
+    if (this.bg.contrastAPCA(this.seedColor) >= -15) {
+      color.oklch.l += 0.05;
     }
 
     return color;
@@ -938,6 +943,8 @@ export class DarkModeTheme implements ColorModeTheme {
     // Keyboard focus outline
     const color = this.bdAccent.clone();
 
+    color.oklch.l = 0.8;
+
     // Achromatic seeds still produce colorful focus; this is good for accessibility even though it affects visual style
     if (this.seedChroma < 0.12) {
       color.oklch.c = 0.12;
@@ -951,18 +958,15 @@ export class DarkModeTheme implements ColorModeTheme {
     // Used in checkbox, radio button
     const color = this.bdAccent.clone();
 
+    color.oklch.l = 0.4;
     color.oklch.c = 0.012;
 
     if (this.seedIsAchromatic) {
       color.oklch.c = 0;
     }
 
-    if (this.bg.contrastAPCA(color) > -25) {
-      color.oklch.l += 0.15;
-    }
-
-    if (this.bg.contrastAPCA(color) <= -25) {
-      color.oklch.l += 0.09;
+    if (this.bg.contrastAPCA(color) >= -15) {
+      color.oklch.l += 0.05;
     }
 
     return color;
@@ -989,8 +993,12 @@ export class DarkModeTheme implements ColorModeTheme {
   private get bdPositive() {
     const color = this.bgPositive.clone();
 
-    color.oklch.l += 0.05;
-    color.oklch.c += 0.05;
+    color.oklch.l = 0.41;
+    color.oklch.c = 0.05;
+
+    if (this.bg.contrastAPCA(color) >= -15) {
+      color.oklch.l += 0.05;
+    }
 
     return color;
   }
@@ -1009,13 +1017,16 @@ export class DarkModeTheme implements ColorModeTheme {
     // Negative (red) border. Produced out of bgNegative. Additional compensations are applied if seed is within red range.
     const color = this.bgNegative.clone();
 
+    color.oklch.l = 0.46;
+    color.oklch.c = 0.1;
+
     if (
       this.bdAccent.oklch.l > 0.5 &&
       this.bdAccent.oklch.c > 0.15 &&
       this.bdAccent.oklch.h < 27 &&
       this.bdAccent.oklch.h >= 5
     ) {
-      color.oklch.l += 0.18;
+      color.oklch.l += 0.03;
     }
 
     if (
@@ -1024,10 +1035,13 @@ export class DarkModeTheme implements ColorModeTheme {
       this.bdAccent.oklch.h >= 27 &&
       this.bdAccent.oklch.h < 50
     ) {
-      color.oklch.l += 0.05;
       color.oklch.h -= 5;
     }
 
+    if (this.bg.contrastAPCA(color) >= -15) {
+      color.oklch.l += 0.05;
+    }
+
     return color;
   }
 
@@ -1047,13 +1061,16 @@ export class DarkModeTheme implements ColorModeTheme {
   private get bdWarning() {
     const color = this.bgWarning.clone();
 
+    color.oklch.l = 0.48;
+    color.oklch.c = 0.12;
+
     if (
       this.bdAccent.oklch.l > 0.5 &&
       this.bdAccent.oklch.c > 0.15 &&
       this.bdAccent.oklch.h < 85 &&
       this.bdAccent.oklch.h >= 60
     ) {
-      color.oklch.l += 0.18;
+      color.oklch.l += 0.03;
     }
 
     if (
@@ -1062,10 +1079,13 @@ export class DarkModeTheme implements ColorModeTheme {
       this.bdAccent.oklch.h >= 85 &&
       this.bdAccent.oklch.h < 110
     ) {
-      color.oklch.l += 0.05;
       color.oklch.h -= 5;
     }
 
+    if (this.bg.contrastAPCA(color) >= -15) {
+      color.oklch.l += 0.05;
+    }
+
     return color;
   }
 

app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts

@@ -933,18 +933,18 @@ export class LightModeTheme implements ColorModeTheme {
   }
 
   private get bdAccent() {
-    // Accent border color
+    // Accent border color. Lighter and less saturated than accent to put focus on the text label and create nice-looking harmony.
     const color = this.seedColor.clone();
 
     // For dark content on light background APCA contrast is positive. 15 is “The absolute minimum for any non-text that needs to be discernible and differentiable, but does not apply to semantic non-text such as icons”. In practice, thin borders are perceptually too subtle when using this as a threshould. 25 is used as the required minimum instead. Failure to reach this contrast level is most likely due to high lightness. Lightness and chroma are set to ones that reach the threshold universally regardless of hue.
     if (this.bg.contrastAPCA(this.seedColor) <= 25) {
       if (this.seedIsAchromatic) {
-        color.oklch.l = 0.25;
+        color.oklch.l = 0.55;
         color.oklch.c = 0;
       }
 
       if (!this.seedIsAchromatic) {
-        color.oklch.l = 0.45;
+        color.oklch.l = 0.55;
         color.oklch.c = 0.15;
       }
     }
@@ -954,7 +954,9 @@ export class LightModeTheme implements ColorModeTheme {
 
   private get bdFocus() {
     // Keyboard focus outline
-    const color = this.bdAccent.clone();
+    const color = this.bgAccent.clone();
+
+    color.oklch.l = 0.55;
 
     // Achromatic seeds still produce colorful focus; this is good for accessibility even though it affects visual style
     if (this.seedChroma < 0.15) {
@@ -969,14 +971,14 @@ export class LightModeTheme implements ColorModeTheme {
     // Used in checkbox, radio button
     const color = this.bdAccent.clone();
 
-    color.oklch.c = 0.001;
+    color.oklch.c = 0.01;
 
     if (this.seedIsAchromatic) {
       color.oklch.c = 0;
     }
 
-    if (this.bg.contrastAPCA(color) < 25) {
-      color.oklch.l -= 0.2;
+    if (this.bg.contrastAPCA(color) <= 15) {
+      color.oklch.l -= 0.05;
     }
 
     return color;
@@ -1008,13 +1010,14 @@ export class LightModeTheme implements ColorModeTheme {
     // Positive (green) border. Additional compensations are applied if seed is withing green range.
     const color = this.bgPositive.clone();
 
+    color.oklch.l = 0.8;
+
     if (
       this.bdAccent.oklch.l > 0.5 &&
       this.bdAccent.oklch.c > 0.11 &&
       this.bdAccent.oklch.h < 145 &&
       this.bdAccent.oklch.h >= 116
     ) {
-      color.oklch.l += 0.1;
       color.oklch.h += 5;
     }
 
@@ -1024,7 +1027,6 @@ export class LightModeTheme implements ColorModeTheme {
       this.bdAccent.oklch.h >= 145 &&
       this.bdAccent.oklch.h < 166
     ) {
-      color.oklch.l += 0.05;
       color.oklch.h -= 5;
     }
 
@@ -1044,13 +1046,14 @@ export class LightModeTheme implements ColorModeTheme {
     // Negative (red) border. Produced out of bgNegative. Additional compensations are applied if seed is within red range.
     const color = this.bgNegative.clone();
 
+    color.oklch.l = 0.78;
+
     if (
       this.bdAccent.oklch.l > 0.5 &&
       this.bdAccent.oklch.c > 0.15 &&
       this.bdAccent.oklch.h < 27 &&
       this.bdAccent.oklch.h >= 5
     ) {
-      color.oklch.l += 0.1;
       color.oklch.h += 5;
     }
 
@@ -1060,7 +1063,6 @@ export class LightModeTheme implements ColorModeTheme {
       this.bdAccent.oklch.h >= 27 &&
       this.bdAccent.oklch.h < 50
     ) {
-      color.oklch.l += 0.05;
       color.oklch.h -= 5;
     }
 
@@ -1080,13 +1082,14 @@ export class LightModeTheme implements ColorModeTheme {
     // Warning (yellow) border. Produced out of bgNegative. Additional compensations are applied if seed is within yellow range.
     const color = this.bgWarning.clone();
 
+    color.oklch.l = 0.82;
+
     if (
       this.bdAccent.oklch.l > 0.5 &&
       this.bdAccent.oklch.c > 0.09 &&
       this.bdAccent.oklch.h < 85 &&
       this.bdAccent.oklch.h >= 60
     ) {
-      color.oklch.l += 0.1;
       color.oklch.h += 10;
     }
 
@@ -1096,7 +1099,6 @@ export class LightModeTheme implements ColorModeTheme {
       this.bdAccent.oklch.h >= 85 &&
       this.bdAccent.oklch.h < 110
     ) {
-      color.oklch.l += 0.05;
       color.oklch.h -= 10;
     }
 

app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts

@@ -727,46 +727,46 @@ describe("bd color", () => {
 describe("bdAccent color", () => {
   it("should return correct color when chroma < 0.04", () => {
     const { bdAccent } = new DarkModeTheme("oklch(0.45 0.03 60)").getColors();
-    expect(bdAccent).toEqual("rgb(83.144% 83.144% 83.144%)");
+    expect(bdAccent).toEqual("rgb(25.976% 25.976% 25.976%)");
   });
 
   it("should return correct color when chroma > 0.04", () => {
     const { bdAccent } = new DarkModeTheme("oklch(0.45 0.1 60)").getColors();
-    expect(bdAccent).toEqual("rgb(100% 71.253% 43.937%)");
+    expect(bdAccent).toEqual("rgb(33.765% 23.5% 15.034%)");
   });
 });
 
 describe("bdFocus color", () => {
   it("should return correct color when lightness < 0.4", () => {
     const { bdFocus } = new DarkModeTheme("oklch(0.3 0.4 60)").getColors();
-    expect(bdFocus).toEqual("rgb(100% 71.253% 43.937%)");
+    expect(bdFocus).toEqual("rgb(84.145% 71.694% 61.962%)");
   });
 
   it("should return correct color when lightness > 0.65", () => {
     const { bdFocus } = new DarkModeTheme("oklch(0.85 0.03 60)").getColors();
-    expect(bdFocus).toEqual("rgb(100% 73.208% 48.082%)");
+    expect(bdFocus).toEqual("rgb(96.595% 66.918% 41.877%)");
   });
 
   it("should return correct color when chroma < 0.12", () => {
     const { bdFocus } = new DarkModeTheme("oklch(0.85 0.1 60)").getColors();
-    expect(bdFocus).toEqual("rgb(100% 73.208% 48.082%)");
+    expect(bdFocus).toEqual("rgb(96.595% 66.918% 41.877%)");
   });
 
   it("should return correct color when hue is between 0 and 55", () => {
     const { bdFocus } = new DarkModeTheme("oklch(0.85 0.1 30)").getColors();
-    expect(bdFocus).toEqual("rgb(100% 70.589% 64.779%)");
+    expect(bdFocus).toEqual("rgb(100% 62.553% 56.236%)");
   });
 
   it("should return correct color when hue > 340", () => {
     const { bdFocus } = new DarkModeTheme("oklch(0.85 0.1 350)").getColors();
-    expect(bdFocus).toEqual("rgb(100% 67.801% 85.002%)");
+    expect(bdFocus).toEqual("rgb(97.244% 61.583% 78.647%)");
   });
 });
 
 describe("bdNeutral color", () => {
   it("should return correct color when chroma < 0.04", () => {
     const { bdNeutral } = new DarkModeTheme("oklch(0.45 0.03 60)").getColors();
-    expect(bdNeutral).toEqual("rgb(94.752% 94.752% 94.752%)");
+    expect(bdNeutral).toEqual("rgb(33.384% 33.384% 33.384%)");
   });
 });
 
@@ -775,14 +775,14 @@ describe("bdNeutralHover", () => {
     const { bdNeutralHover } = new DarkModeTheme(
       "oklch(0.45 0.03 60)",
     ).getColors();
-    expect(bdNeutralHover).toEqual("rgb(63.258% 63.258% 63.258%)");
+    expect(bdNeutralHover).toEqual("rgb(50.211% 50.211% 50.211%)");
   });
 });
 
 describe("bdPositive", () => {
   it("should return correct color", () => {
     const { bdPositive } = new DarkModeTheme("oklch(0.45 0.03 60)").getColors();
-    expect(bdPositive).toEqual("rgb(0% 71.137% 15.743%)");
+    expect(bdPositive).toEqual("rgb(27.641% 37.516% 27.759%)");
   });
 });
 
@@ -791,14 +791,14 @@ describe("bdPositiveHover", () => {
     const { bdPositiveHover } = new DarkModeTheme(
       "oklch(0.45 0.03 60)",
     ).getColors();
-    expect(bdPositiveHover).toEqual("rgb(25.51% 86.719% 33.38%)");
+    expect(bdPositiveHover).toEqual("rgb(40.836% 51.186% 40.879%)");
   });
 });
 
 describe("bdNegative", () => {
   it("should return correct color", () => {
     const { bdNegative } = new DarkModeTheme("oklch(0.45 0.03 60)").getColors();
-    expect(bdNegative).toEqual("rgb(83.108% 4.6651% 10.252%)");
+    expect(bdNegative).toEqual("rgb(52.977% 24.763% 22.178%)");
   });
 });
 
@@ -807,14 +807,14 @@ describe("bdNegativeHover", () => {
     const { bdNegativeHover } = new DarkModeTheme(
       "oklch(0.45 0.03 60)",
     ).getColors();
-    expect(bdNegativeHover).toEqual("rgb(97.525% 25.712% 23.78%)");
+    expect(bdNegativeHover).toEqual("rgb(65.578% 36.03% 32.933%)");
   });
 });
 
 describe("bdWarning", () => {
   it("should return correct color", () => {
     const { bdWarning } = new DarkModeTheme("oklch(0.45 0.03 60)").getColors();
-    expect(bdWarning).toEqual("rgb(85.145% 64.66% 8.0286%)");
+    expect(bdWarning).toEqual("rgb(47.158% 34.346% 0%)");
   });
 });
 
@@ -823,7 +823,7 @@ describe("bdWarningHover", () => {
     const { bdWarningHover } = new DarkModeTheme(
       "oklch(0.45 0.03 60)",
     ).getColors();
-    expect(bdWarningHover).toEqual("rgb(100% 77.286% 0%)");
+    expect(bdWarningHover).toEqual("rgb(61.76% 46.241% 0%)");
   });
 });
 

app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts

@@ -779,27 +779,27 @@ describe("bdAccent color", () => {
 describe("bdFocus color", () => {
   it("should return correct color when lightness < 0.6", () => {
     const { bdFocus } = new LightModeTheme("oklch(0.45 0.4 60)").getColors();
-    expect(bdFocus).toEqual("rgb(56.074% 13.73% 0%)");
+    expect(bdFocus).toEqual("rgb(64.509% 31.604% 0%)");
   });
 
   it("should return correct color when lightness > 0.8", () => {
     const { bdFocus } = new LightModeTheme("oklch(0.85 0.03 60)").getColors();
-    expect(bdFocus).toEqual("rgb(26.226% 2.7922% 0%)");
+    expect(bdFocus).toEqual("rgb(64.667% 36.271% 0%)");
   });
 
   it("should return correct color when chroma < 0.15", () => {
     const { bdFocus } = new LightModeTheme("oklch(0.85 0.1 60)").getColors();
-    expect(bdFocus).toEqual("rgb(49.321% 26.506% 0%)");
+    expect(bdFocus).toEqual("rgb(64.667% 36.271% 0%)");
   });
 
   it("should return correct color when hue is between 0 and 55", () => {
     const { bdFocus } = new LightModeTheme("oklch(0.85 0.1 30)").getColors();
-    expect(bdFocus).toEqual("rgb(59.176% 15.217% 10.565%)");
+    expect(bdFocus).toEqual("rgb(72.468% 27.962% 22.197%)");
   });
 
   it("should return correct color when hue >  340", () => {
     const { bdFocus } = new LightModeTheme("oklch(0.85 0.1 350)").getColors();
-    expect(bdFocus).toEqual("rgb(55.484% 14.961% 37.943%)");
+    expect(bdFocus).toEqual("rgb(68.494% 27.322% 49.304%)");
   });
 });
 
@@ -824,7 +824,7 @@ describe("bdPositive", () => {
     const { bdPositive } = new LightModeTheme(
       "oklch(0.45 0.03 60)",
     ).getColors();
-    expect(bdPositive).toEqual("rgb(6.7435% 63.436% 18.481%)");
+    expect(bdPositive).toEqual("rgb(37.9% 86.464% 41.821%)");
   });
 });
 
@@ -833,7 +833,7 @@ describe("bdPositiveHover", () => {
     const { bdPositiveHover } = new LightModeTheme(
       "oklch(0.45 0.03 60)",
     ).getColors();
-    expect(bdPositiveHover).toEqual("rgb(26.362% 76.094% 31.718%)");
+    expect(bdPositiveHover).toEqual("rgb(51.497% 99.713% 54.439%)");
   });
 });
 
@@ -842,7 +842,7 @@ describe("bdNegative", () => {
     const { bdNegative } = new LightModeTheme(
       "oklch(0.45 0.03 60)",
     ).getColors();
-    expect(bdNegative).toEqual("rgb(83.108% 4.6651% 10.252%)");
+    expect(bdNegative).toEqual("rgb(100% 54.045% 48.162%)");
   });
 });
 
@@ -851,14 +851,14 @@ describe("bdNegativeHover", () => {
     const { bdNegativeHover } = new LightModeTheme(
       "oklch(0.45 0.03 60)",
     ).getColors();
-    expect(bdNegativeHover).toEqual("rgb(94.628% 22.524% 21.261%)");
+    expect(bdNegativeHover).toEqual("rgb(100% 70.673% 65.818%)");
   });
 });
 
 describe("bdWarning", () => {
   it("should return correct color", () => {
     const { bdWarning } = new LightModeTheme("oklch(0.45 0.03 60)").getColors();
-    expect(bdWarning).toEqual("rgb(85.145% 64.66% 8.0286%)");
+    expect(bdWarning).toEqual("rgb(94.272% 73.467% 23.044%)");
   });
 });
 
@@ -867,7 +867,7 @@ describe("bdWarningHover", () => {
     const { bdWarningHover } = new LightModeTheme(
       "oklch(0.45 0.03 60)",
     ).getColors();
-    expect(bdWarningHover).toEqual("rgb(98.232% 77.293% 27.893%)");
+    expect(bdWarningHover).toEqual("rgb(100% 87.513% 57.392%)");
   });
 });