Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: Adjust WDS text colors (#40034)

Browse Source 
## Description

Fixes #39956 

Increased lightness (in light mode) and chroma for `fg`, `fgNeutral`,
`fgNeutralSubtle`, `fgAccent` colors (and dependant child styles).

| Before | After |
|--------|--------|
| <img width="709" alt="Screenshot 2025-04-02 at 11 14 01"
src="https://github.com/user-attachments/assets/060bf65a-26c1-493a-a324-a0ca16172de6"
/> | <img width="734" alt="Screenshot 2025-04-02 at 11 33 05"
src="https://github.com/user-attachments/assets/9d3e28e0-c1b8-48c7-81a5-3f5e52dcfaa6"
/> |

<details><summary>Examples with other seeds, changes to dark mode
etc.</summary>
<p>

<img width="981" alt="Screenshot 2025-04-02 at 11 37 42"
src="https://github.com/user-attachments/assets/7bf55666-b3df-4a48-a5ec-42437aa95f0d"
/>
<img width="1001" alt="Screenshot 2025-04-02 at 11 38 02"
src="https://github.com/user-attachments/assets/776556b7-e027-4253-95e1-8a01e990bff3"
/>
<img width="1005" alt="Screenshot 2025-04-02 at 11 38 08"
src="https://github.com/user-attachments/assets/3747a5a9-08bc-4057-a171-3bb1aff33f46"
/>
<img width="1015" alt="Screenshot 2025-04-02 at 11 38 13"
src="https://github.com/user-attachments/assets/e561495f-a451-4f72-93e6-c6f2026258e9"
/>


</p>
</details> 

## 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/14218884554>
> Commit: 4c300307ed74646e0839f26630bf66c5a4abac74
> Workflow: `PR Automation test suite`
> Tags: `@tag.Sanity`
> Spec: ``
> <hr>Wed, 02 Apr 2025 11:50:42 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**
- - **Light Mode Enhancements:** The light mode theme has been refreshed
with optimized foreground and accent colors, enhancing readability and
overall visual clarity.
- **Dark Mode Enhancements:** Updated the dark mode palette now delivers
a more balanced interface with refined contrasts and accent details for
improved visual appeal.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
vadim 2025-04-02 14:34:17 +02:00 committed by GitHub
parent ca5f66d7dd
commit b52f03aab2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -415,8 +415,8 @@ export class DarkModeTheme implements ColorModeTheme {
color.oklch.l = 0.22;
}
if (this.seedChroma > 0.005) {
color.oklch.c = 0.005;
if (this.seedChroma > 0.025) {
color.oklch.c = 0.025;
}
if (this.seedIsAchromatic) {
@ -725,7 +725,7 @@ export class DarkModeTheme implements ColorModeTheme {
// This ensures harmonious combination with main accents and neutrals.
const color = this.seedColor.clone();
color.oklch.l = 0.935;
color.oklch.l = 0.91;
// If seed color didn't have substantial amount of chroma make sure fg is achromatic.
if (this.seedIsAchromatic) {
@ -733,7 +733,7 @@ export class DarkModeTheme implements ColorModeTheme {
}
if (!this.seedIsAchromatic) {
color.oklch.c = 0.012;
color.oklch.c = 0.065;
}
return color;
@ -745,14 +745,14 @@ export class DarkModeTheme implements ColorModeTheme {
// For light content on dark background APCA contrast is negative. −60 is “The minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read.” Failure to reach this contrast level is most likely due to low lightness. Lightness and chroma are set to ones that reach the threshold universally regardless of hue.
if (this.bg.contrastAPCA(this.seedColor) >= -60) {
color.oklch.l = 0.82;
color.oklch.l = 0.86;
if (this.seedIsAchromatic) {
color.oklch.c = 0;
}
if (!this.seedIsAchromatic) {
color.oklch.c = 0.136;
color.oklch.c = 0.225;
}
}
@ -763,7 +763,7 @@ export class DarkModeTheme implements ColorModeTheme {
// Neutral foreground. Slightly less prominent than main fg
const color = this.fg.clone();
color.oklch.l -= 0.1;
color.oklch.c = 0;
return color;
}

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

@ -725,11 +725,11 @@ export class LightModeTheme implements ColorModeTheme {
private get fg() {
// Main application foreground color.
// Applies to static text and similar. In light mode it is extremely dark (and therefore desatured) shade of user-set seed color.
// Applies to static text and similar. In light mode it is dark shade of user-set seed color.
// This ensures harmonious combination with main accents and neutrals.
const color = this.seedColor.clone();
color.oklch.l = 0.12;
color.oklch.l = 0.37;
// If seed color didn't have substantial amount of chroma make sure fg is achromatic.
if (this.seedIsAchromatic) {
@ -737,7 +737,7 @@ export class LightModeTheme implements ColorModeTheme {
}
if (!this.seedIsAchromatic) {
color.oklch.c = 0.006;
color.oklch.c = 0.039;
}
return color;
@ -749,14 +749,14 @@ export class LightModeTheme implements ColorModeTheme {
// For dark content on light background APCA contrast is positive. 60 is “The minimum level recommended for content text that is not body, column, or block text. In other words, text you want people to read.” 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) <= 60) {
color.oklch.l = 0.35;
color.oklch.l = 0.5;
if (this.seedIsAchromatic) {
color.oklch.c = 0;
}
if (!this.seedIsAchromatic) {
color.oklch.c = 0.164;
color.oklch.c = 0.185;
}
}
@ -767,7 +767,7 @@ export class LightModeTheme implements ColorModeTheme {
// Neutral foreground. Slightly less prominent than main fg
const color = this.fg.clone();
color.oklch.l += 0.125;
color.oklch.c -= 0.09;
return color;
}
@ -775,7 +775,7 @@ export class LightModeTheme implements ColorModeTheme {
private get fgNeutralSubtle() {
const color = this.fgNeutral.clone();
color.oklch.l += 0.35;
color.oklch.l += 0.22;
return color;
}

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

@ -610,13 +610,13 @@ describe("fg color", () => {
it("should return correct color when chroma < 0.04", () => {
const { fg } = new DarkModeTheme("oklch(0.45 0.03 60)").getColors();
expect(fg).toEqual("rgb(91.499% 91.499% 91.499%)");
expect(fg).toEqual("rgb(88.268% 88.268% 88.268%)");
});
it("should return correct color when chroma > 0.04", () => {
const { fg } = new DarkModeTheme("oklch(0.45 0.1 60)").getColors();
expect(fg).toEqual("rgb(94.05% 90.903% 88.505%)");
expect(fg).toEqual("rgb(100% 84.682% 71.568%)");
});
});
@ -624,13 +624,13 @@ describe("fgAccent color", () => {
it("should return correct color when chroma < 0.04", () => {
const { fgAccent } = new DarkModeTheme("oklch(0.45 0.03 60)").getColors();
expect(fgAccent).toEqual("rgb(76.823% 76.823% 76.823%)");
expect(fgAccent).toEqual("rgb(81.873% 81.873% 81.873%)");
});
it("should return correct color when chroma > 0.04", () => {
const { fgAccent } = new DarkModeTheme("oklch(0.45 0.1 60)").getColors();
expect(fgAccent).toEqual("rgb(100% 68.135% 38.832%)");
expect(fgAccent).toEqual("rgb(100% 74.36% 48.84%)");
});
});
@ -638,19 +638,19 @@ describe("fgNeutral color", () => {
it("should return correct color when chroma < 0.04", () => {
const { fgNeutral } = new DarkModeTheme("oklch(0.45 0.03 60)").getColors();
expect(fgNeutral).toEqual("rgb(78.709% 78.709% 78.709%)");
expect(fgNeutral).toEqual("rgb(88.268% 88.268% 88.268%)");
});
it("should return correct color when chroma > 0.04 and hue is between 120 and 300", () => {
const { fgNeutral } = new DarkModeTheme("oklch(0.45 0.1 150)").getColors();
expect(fgNeutral).toEqual("rgb(76.736% 79.678% 77.172%)");
expect(fgNeutral).toEqual("rgb(88.268% 88.268% 88.268%)");
});
it("should return correct color when chroma > 0.04 and hue is not between 120 and 300", () => {
const { fgNeutral } = new DarkModeTheme("oklch(0.45 0.1 110)").getColors();
expect(fgNeutral).toEqual("rgb(78.837% 79.085% 75.653%)");
expect(fgNeutral).toEqual("rgb(88.268% 88.268% 88.268%)");
});
});
@ -660,7 +660,7 @@ describe("fgNeutralSubtle color", () => {
"oklch(0.45 0.03 60)",
).getColors();
expect(fgNeutralSubtle).toEqual("rgb(42.772% 42.772% 42.772%)");
expect(fgNeutralSubtle).toEqual("rgb(51.374% 51.374% 51.374%)");
});
});
@ -792,7 +792,7 @@ describe("bd color", () => {
it("should return correct color", () => {
const { bd } = new DarkModeTheme("oklch(0.45 0.5 60)").getColors();
expect(bd).toEqual("rgb(30.094% 27.562% 25.617%)");
expect(bd).toEqual("rgb(38.135% 24.611% 12.977%)");
});
});

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

@ -642,13 +642,13 @@ describe("fg color", () => {
it("should return correct color when chroma < 0.04", () => {
const { fg } = new LightModeTheme("oklch(0.45 0.03 60)").getColors();
expect(fg).toEqual("rgb(2.2326% 2.2326% 2.2326%)");
expect(fg).toEqual("rgb(24.944% 24.944% 24.944%)");
});
it("should return correct color when chroma > 0.04", () => {
const { fg } = new LightModeTheme("oklch(0.45 0.1 60)").getColors();
expect(fg).toEqual("rgb(2.8027% 2.0973% 1.6301%)");
expect(fg).toEqual("rgb(31.079% 23.115% 16.707%)");
});
});
@ -670,19 +670,19 @@ describe("fgNeutral color", () => {
it("should return correct color when chroma < 0.04", () => {
const { fgNeutral } = new LightModeTheme("oklch(0.45 0.03 60)").getColors();
expect(fgNeutral).toEqual("rgb(12.685% 12.685% 12.685%)");
expect(fgNeutral).toEqual("rgb(0% 26.839% 41.548%)");
});
it("should return correct color when chroma > 0.04 and hue is between 120 and 300", () => {
const { fgNeutral } = new LightModeTheme("oklch(0.45 0.1 150)").getColors();
expect(fgNeutral).toEqual("rgb(11.952% 13.038% 12.117%)");
expect(fgNeutral).toEqual("rgb(31.034% 21.083% 30.044%)");
});
it("should return correct color when chroma > 0.04 and hue is not between 120 and 300", () => {
const { fgNeutral } = new LightModeTheme("oklch(0.45 0.1 110)").getColors();
expect(fgNeutral).toEqual("rgb(12.734% 12.82% 11.553%)");
expect(fgNeutral).toEqual("rgb(24.783% 23.161% 34.901%)");
});
});
@ -692,7 +692,7 @@ describe("fgNeutralSubtle color", () => {
"oklch(0.45 0.03 60)",
).getColors();
expect(fgNeutralSubtle).toEqual("rgb(49.631% 49.631% 49.631%)");
expect(fgNeutralSubtle).toEqual("rgb(27.658% 51.819% 68%)");
});
});
@ -834,7 +834,7 @@ describe("bd color", () => {
it("should return correct color", () => {
const { bd } = new LightModeTheme("oklch(0.45 0.5 60)").getColors();
expect(bd).toEqual("rgb(75.553% 74.037% 72.885%)");
expect(bd).toEqual("rgb(82.064% 72.324% 64.769%)");
});
});