chore: WDS adjust neutral subtle colors (#40595)
## Description Fixes #39932 | Before | After | |--------|--------| | <img width="674" alt="Screenshot 2025-05-07 at 10 38 06" src="https://github.com/user-attachments/assets/052adffd-7d90-47c2-95ea-cc15e4fa89b1" /> | <img width="676" alt="Screenshot 2025-05-07 at 10 36 39" src="https://github.com/user-attachments/assets/80056605-1bda-4c02-ad4f-8827f93bc2ca" /> | ## Automation /ok-to-test tags="@tag.Sanity" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!IMPORTANT] > 🟣 🟣 🟣 Your tests are running. > Tests running at: <https://github.com/appsmithorg/appsmith/actions/runs/14879153124> > Commit: f691f26b504269eaaa960626392789db7ff7f0f3 > Workflow: `PR Automation test suite` > Tags: `@tag.Sanity` > Spec: `` > <hr>Wed, 07 May 2025 08:48:38 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 - **Style** - Adjusted the brightness of subtle neutral background and foreground colors in light mode for improved visual appearance. - **Tests** - Updated expected color values in tests to match the new brightness adjustments. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
parent
b7a2f5c261
commit
c57cc56775
|
|
@ -413,7 +413,7 @@ export class LightModeTheme implements ColorModeTheme {
|
|||
}
|
||||
|
||||
if (!this.seedIsVeryLight) {
|
||||
color.oklch.l = 0.97;
|
||||
color.oklch.l = 0.975;
|
||||
}
|
||||
|
||||
if (this.seedChroma > 0.002) {
|
||||
|
|
@ -785,7 +785,7 @@ export class LightModeTheme implements ColorModeTheme {
|
|||
private get fgNeutralSubtle() {
|
||||
const color = this.fgNeutral.clone();
|
||||
|
||||
color.oklch.l += 0.12;
|
||||
color.oklch.l += 0.1;
|
||||
|
||||
return color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -358,7 +358,7 @@ describe("bgNeutralSubtle color", () => {
|
|||
"oklch(0.92 0.03 170)",
|
||||
).getColors();
|
||||
|
||||
expect(bgNeutralSubtle).toEqual("rgb(95.592% 96.251% 95.981%)");
|
||||
expect(bgNeutralSubtle).toEqual("rgb(96.247% 96.906% 96.636%)");
|
||||
});
|
||||
|
||||
it("should return correct color when seedChroma > 0.01", () => {
|
||||
|
|
@ -366,7 +366,7 @@ describe("bgNeutralSubtle color", () => {
|
|||
"oklch(0.92 0.1 170)",
|
||||
).getColors();
|
||||
|
||||
expect(bgNeutralSubtle).toEqual("rgb(95.592% 96.251% 95.981%)");
|
||||
expect(bgNeutralSubtle).toEqual("rgb(96.247% 96.906% 96.636%)");
|
||||
});
|
||||
|
||||
it("should return correct color when chroma < 0.04", () => {
|
||||
|
|
@ -374,7 +374,7 @@ describe("bgNeutralSubtle color", () => {
|
|||
"oklch(0.92 0.03 170)",
|
||||
).getColors();
|
||||
|
||||
expect(bgNeutralSubtle).toEqual("rgb(95.592% 96.251% 95.981%)");
|
||||
expect(bgNeutralSubtle).toEqual("rgb(96.247% 96.906% 96.636%)");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -384,7 +384,7 @@ describe("bgNeutralSubtleHover color", () => {
|
|||
"oklch(0.92 0.1 170)",
|
||||
).getColors();
|
||||
|
||||
expect(bgNeutralSubtleHover).toEqual("rgb(97.164% 97.825% 97.554%)");
|
||||
expect(bgNeutralSubtleHover).toEqual("rgb(97.82% 98.482% 98.21%)");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -394,7 +394,7 @@ describe("bgNeutralSubtleActive color", () => {
|
|||
"oklch(0.92 0.1 170)",
|
||||
).getColors();
|
||||
|
||||
expect(bgNeutralSubtleActive).toEqual("rgb(94.286% 94.944% 94.674%)");
|
||||
expect(bgNeutralSubtleActive).toEqual("rgb(94.939% 95.597% 95.327%)");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -692,7 +692,7 @@ describe("fgNeutralSubtle color", () => {
|
|||
"oklch(0.45 0.03 60)",
|
||||
).getColors();
|
||||
|
||||
expect(fgNeutralSubtle).toEqual("rgb(43.337% 43.337% 43.337%)");
|
||||
expect(fgNeutralSubtle).toEqual("rgb(41.086% 41.086% 41.086%)");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user