diff --git a/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetCanvas.snap.png b/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetCanvas.snap.png index 0d2e6f5d4d56..ef5d81690ca4 100644 Binary files a/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetCanvas.snap.png and b/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetCanvas.snap.png differ diff --git a/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetCanvasDark.snap.png b/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetCanvasDark.snap.png index 4fd3fa528260..5eeca50fc2fe 100644 Binary files a/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetCanvasDark.snap.png and b/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetCanvasDark.snap.png differ diff --git a/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetDeployipad-2.snap.png b/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetDeployipad-2.snap.png index 2d613015b579..40f7ea83e990 100644 Binary files a/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetDeployipad-2.snap.png and b/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetDeployipad-2.snap.png differ diff --git a/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetDeployiphone-6.snap.png b/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetDeployiphone-6.snap.png index 3d1b99dc7796..ba31f0587df7 100644 Binary files a/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetDeployiphone-6.snap.png and b/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetDeployiphone-6.snap.png differ diff --git a/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetDeploymacbook-13.snap.png b/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetDeploymacbook-13.snap.png index b030586f096d..e8cb208a1373 100644 Binary files a/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetDeploymacbook-13.snap.png and b/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetDeploymacbook-13.snap.png differ diff --git a/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetPreview.snap.png b/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetPreview.snap.png index 48fa4f909bf9..d42810feaef1 100644 Binary files a/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetPreview.snap.png and b/app/client/cypress/snapshots/AnvilButtonWidgetSnapshot_spec.ts/anvilButtonWidgetPreview.snap.png differ diff --git a/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetCanvas.snap.png b/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetCanvas.snap.png index 91776e85072b..88a423ef13fd 100644 Binary files a/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetCanvas.snap.png and b/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetCanvas.snap.png differ diff --git a/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetCanvasDark.snap.png b/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetCanvasDark.snap.png index a3a9a6c7ec48..b3f18cd3767e 100644 Binary files a/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetCanvasDark.snap.png and b/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetCanvasDark.snap.png differ diff --git a/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployipad-2.snap.png b/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployipad-2.snap.png index 317a301a3e33..cedf5f26409e 100644 Binary files a/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployipad-2.snap.png and b/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployipad-2.snap.png differ diff --git a/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployiphone-6.snap.png b/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployiphone-6.snap.png index 525b8a1eb4b2..69c87e22c6ab 100644 Binary files a/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployiphone-6.snap.png and b/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeployiphone-6.snap.png differ diff --git a/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeploymacbook-13.snap.png b/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeploymacbook-13.snap.png index 432ba7e046f1..6917fed9138e 100644 Binary files a/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeploymacbook-13.snap.png and b/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetDeploymacbook-13.snap.png differ diff --git a/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetPreview.snap.png b/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetPreview.snap.png index dfc4b53914ac..5e73e20572cf 100644 Binary files a/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetPreview.snap.png and b/app/client/cypress/snapshots/AnvilIconButtonWidgetSnapshot_spec.ts/anvilIconButtonWidgetPreview.snap.png differ diff --git a/app/client/cypress/support/Pages/Anvil/AnvilSnapshot.ts b/app/client/cypress/support/Pages/Anvil/AnvilSnapshot.ts index 3145aeb51ea2..6675792a9c81 100644 --- a/app/client/cypress/support/Pages/Anvil/AnvilSnapshot.ts +++ b/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"); }; diff --git a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts index b41a90beb4fc..29062e0e7db3 100644 --- a/app/client/packages/design-system/theming/src/color/src/DarkModeTheme.ts +++ b/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; } diff --git a/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts b/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts index fef725a58bb0..4e0979dcb508 100644 --- a/app/client/packages/design-system/theming/src/color/src/LightModeTheme.ts +++ b/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; } diff --git a/app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts b/app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts index cb5734dee532..fd4a3b180e58 100644 --- a/app/client/packages/design-system/theming/src/color/tests/DarkModeTheme.test.ts +++ b/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%)"); }); }); diff --git a/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts b/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts index abb4944e8fd8..380da921d5ec 100644 --- a/app/client/packages/design-system/theming/src/color/tests/LightModeTheme.test.ts +++ b/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%)"); }); });