chore: WDS text inputs visual refinements (#35581)
## Description Fixes #34844 Fixes several issues that were spotted related to that: - We were not applying `--fg-neutral-subtle` to our placeholder because ADS has `!important` for their placeholder styling, so I added it to ours for now - After applying it, it became obvious that `--fg-neutral-subtle` and the “parent” `--fg-neutral` needed adjustments too - Disabled opacity needed an increase (became obvious) after making our `--bg-neutral-subtle` lighter to deal with the primary issue of the ticket) - `--bg-neutral-subtle` were derived from the seed, despite the intent to be derived from `--bg-accent-subtle`, fixed that too | Before | After | |--------|--------| | <img width="1114" alt="before-light" src="https://github.com/user-attachments/assets/a2c8b8ca-db5c-443d-84bf-8b7f7dd2333d"> | <img width="1102" alt="after-light" src="https://github.com/user-attachments/assets/dd924865-ea19-4d74-b4ed-3037e0b418ef"> | Additional preview of how dark mode looks after these changes: <img width="1119" alt="after-dark" src="https://github.com/user-attachments/assets/2d06df1e-211d-4b1d-a293-99710b34f7bd"> ## Automation /ok-to-test tags="@tag.Anvil" ### 🔍 Cypress test results <!-- This is an auto-generated comment: Cypress test results --> > [!CAUTION] > 🔴 🔴 🔴 Some tests have failed. > Workflow run: <https://github.com/appsmithorg/appsmith/actions/runs/10319662006> > Commit: e1f99f2ea8956ff988c891470fc7fa4285ab32b0 > <a href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10319662006&attempt=1&selectiontype=test&testsstatus=failed&specsstatus=fail" target="_blank">Cypress dashboard</a>. > Tags: @tag.Anvil > Spec: > The following are new failures, please fix them before merging the PR: <ol> > <li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilButtonWidgetSnapshot_spec.ts > <li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxGroupWidgetSnapshot_spec.ts > <li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCheckboxWidgetSnapshot_spec.ts > <li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilCurrencyInputWidgetSnapshot_spec.ts > <li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilHeadingWidgetSnapshot_spec.ts > <li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilIconButtonWidgetSnapshot_spec.ts > <li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInlineButtonWidgetSnapshot_spec.ts > <li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilInputWidgetSnapshot_spec.ts > <li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilParagraphWidgetSnapshot_spec.ts > <li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilPhoneInputWidgetSnapshot_spec.ts > <li>cypress/e2e/Regression/ClientSide/Anvil/Widgets/AnvilRadioGroupWidgetSnapshot_spec.ts</ol> > <a href="https://internal.appsmith.com/app/cypress-dashboard/identified-flaky-tests-65890b3c81d7400d08fa9ee3?branch=master" target="_blank">List of identified flaky tests</a>. > <hr>Fri, 09 Aug 2024 13:25:27 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 color themes for both dark and light modes, improving aesthetic coherence and visual accessibility. - **Bug Fixes** - Adjusted opacity of disabled components to improve clarity and user experience. - **Style** - Updated placeholder text styling in input fields to ensure consistent visibility across different contexts. - **Tests** - Modified expected output values in color theme tests for improved accuracy and alignment with new color definitions. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
This commit is contained in:
vadim
GitHub
parent
92b8f81235
commit
7c0173af58
|
|
@ -393,7 +393,7 @@ export class DarkModeTheme implements ColorModeTheme {
|
|||
}
|
||||
|
||||
private get bgNeutralSubtle() {
|
||||
const color = this.seedColor.clone();
|
||||
const color = this.bgAccentSubtle.clone();
|
||||
|
||||
// Adjusted version of bgAccentSubtle (less or no chroma)
|
||||
if (this.seedLightness > 0.29) {
|
||||
|
|
@ -726,7 +726,7 @@ export class DarkModeTheme implements ColorModeTheme {
|
|||
// Neutral foreground. Slightly less prominent than main fg
|
||||
const color = this.fg.clone();
|
||||
|
||||
color.oklch.l -= 0.02;
|
||||
color.oklch.l -= 0.1;
|
||||
|
||||
return color;
|
||||
}
|
||||
|
|
@ -734,7 +734,7 @@ export class DarkModeTheme implements ColorModeTheme {
|
|||
private get fgNeutralSubtle() {
|
||||
const color = this.fgNeutral.clone();
|
||||
|
||||
color.oklch.l -= 0.15;
|
||||
color.oklch.l -= 0.3;
|
||||
|
||||
return color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -391,23 +391,19 @@ export class LightModeTheme implements ColorModeTheme {
|
|||
}
|
||||
|
||||
private get bgNeutralSubtle() {
|
||||
const color = this.seedColor.clone();
|
||||
const color = this.bgAccentSubtle.clone();
|
||||
|
||||
// Adjusted version of bgAccentSubtle (less or no chroma)
|
||||
// Adjusted version of bgAccentSubtle (less or no chroma), slightly higher lightness since neutrals are perceived heavier than saturated colors
|
||||
if (this.seedIsVeryLight) {
|
||||
color.oklch.l = 0.985;
|
||||
color.oklch.l = 0.955;
|
||||
}
|
||||
|
||||
if (!this.seedIsVeryLight) {
|
||||
color.oklch.l = 0.935;
|
||||
color.oklch.l = 0.97;
|
||||
}
|
||||
|
||||
if (this.seedChroma > 0.001) {
|
||||
color.oklch.c = 0.001;
|
||||
}
|
||||
|
||||
if (this.seedIsAchromatic) {
|
||||
color.oklch.c = 0;
|
||||
if (this.seedChroma > 0.002) {
|
||||
color.oklch.c = 0.002;
|
||||
}
|
||||
|
||||
return color;
|
||||
|
|
@ -416,7 +412,7 @@ export class LightModeTheme implements ColorModeTheme {
|
|||
private get bgNeutralSubtleHover() {
|
||||
const color = this.bgNeutralSubtle.clone();
|
||||
|
||||
color.oklch.l += 0.02;
|
||||
color.oklch.l += 0.012;
|
||||
|
||||
return color;
|
||||
}
|
||||
|
|
@ -734,7 +730,7 @@ export class LightModeTheme implements ColorModeTheme {
|
|||
// Neutral foreground. Slightly less prominent than main fg
|
||||
const color = this.fg.clone();
|
||||
|
||||
color.oklch.l += 0.1;
|
||||
color.oklch.l += 0.125;
|
||||
|
||||
return color;
|
||||
}
|
||||
|
|
@ -742,7 +738,7 @@ export class LightModeTheme implements ColorModeTheme {
|
|||
private get fgNeutralSubtle() {
|
||||
const color = this.fgNeutral.clone();
|
||||
|
||||
color.oklch.l += 0.1;
|
||||
color.oklch.l += 0.35;
|
||||
|
||||
return color;
|
||||
}
|
||||
|
|
@ -1164,7 +1160,7 @@ export class LightModeTheme implements ColorModeTheme {
|
|||
// Low contrast indicator of interactivity in TextInput and similar
|
||||
const color = this.bgNeutralSubtle.clone();
|
||||
|
||||
color.oklch.l -= 0.06;
|
||||
color.oklch.l -= 0.03;
|
||||
|
||||
return color;
|
||||
}
|
||||
|
|
@ -1172,7 +1168,7 @@ export class LightModeTheme implements ColorModeTheme {
|
|||
private get bdOnNeutralSubtleHover() {
|
||||
const color = this.bdOnNeutralSubtle.clone();
|
||||
|
||||
color.oklch.l += 0.03;
|
||||
color.oklch.l -= 0.015;
|
||||
|
||||
return color;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -567,19 +567,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(88.912% 88.912% 88.912%)");
|
||||
expect(fgNeutral).toEqual("rgb(78.709% 78.709% 78.709%)");
|
||||
});
|
||||
|
||||
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(86.896% 89.904% 87.34%)");
|
||||
expect(fgNeutral).toEqual("rgb(76.736% 79.678% 77.172%)");
|
||||
});
|
||||
|
||||
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(89.043% 89.298% 85.788%)");
|
||||
expect(fgNeutral).toEqual("rgb(78.837% 79.085% 75.653%)");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -589,7 +589,7 @@ describe("fgNeutralSubtle color", () => {
|
|||
"oklch(0.45 0.03 60)",
|
||||
).getColors();
|
||||
|
||||
expect(fgNeutralSubtle).toEqual("rgb(69.98% 69.98% 69.98%)");
|
||||
expect(fgNeutralSubtle).toEqual("rgb(42.772% 42.772% 42.772%)");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -307,28 +307,28 @@ describe("bgNeutralSubtle color", () => {
|
|||
const { bgNeutralSubtle } = new LightModeTheme(
|
||||
"oklch(0.95 0.03 170)",
|
||||
).getColors();
|
||||
expect(bgNeutralSubtle).toEqual("rgb(98.026% 98.026% 98.026%)");
|
||||
expect(bgNeutralSubtle).toEqual("rgb(93.635% 94.291% 94.022%)");
|
||||
});
|
||||
|
||||
it("should return correct color when lightness < or equal to 0.93", () => {
|
||||
const { bgNeutralSubtle } = new LightModeTheme(
|
||||
"oklch(0.92 0.03 170)",
|
||||
).getColors();
|
||||
expect(bgNeutralSubtle).toEqual("rgb(91.499% 91.499% 91.499%)");
|
||||
expect(bgNeutralSubtle).toEqual("rgb(95.592% 96.251% 95.981%)");
|
||||
});
|
||||
|
||||
it("should return correct color when seedChroma > 0.01", () => {
|
||||
const { bgNeutralSubtle } = new LightModeTheme(
|
||||
"oklch(0.92 0.1 170)",
|
||||
).getColors();
|
||||
expect(bgNeutralSubtle).toEqual("rgb(91.268% 91.594% 91.461%)");
|
||||
expect(bgNeutralSubtle).toEqual("rgb(95.592% 96.251% 95.981%)");
|
||||
});
|
||||
|
||||
it("should return correct color when chroma < 0.04", () => {
|
||||
const { bgNeutralSubtle } = new LightModeTheme(
|
||||
"oklch(0.92 0.03 170)",
|
||||
).getColors();
|
||||
expect(bgNeutralSubtle).toEqual("rgb(91.499% 91.499% 91.499%)");
|
||||
expect(bgNeutralSubtle).toEqual("rgb(95.592% 96.251% 95.981%)");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -338,7 +338,7 @@ describe("bgNeutralSubtleHover color", () => {
|
|||
"oklch(0.92 0.1 170)",
|
||||
).getColors();
|
||||
|
||||
expect(bgNeutralSubtleHover).toEqual("rgb(93.867% 94.195% 94.061%)");
|
||||
expect(bgNeutralSubtleHover).toEqual("rgb(97.164% 97.825% 97.554%)");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -348,7 +348,7 @@ describe("bgNeutralSubtleActive color", () => {
|
|||
"oklch(0.92 0.1 170)",
|
||||
).getColors();
|
||||
|
||||
expect(bgNeutralSubtleActive).toEqual("rgb(89.974% 90.299% 90.166%)");
|
||||
expect(bgNeutralSubtleActive).toEqual("rgb(94.286% 94.944% 94.674%)");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -597,19 +597,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(10.396% 10.396% 10.396%)");
|
||||
expect(fgNeutral).toEqual("rgb(12.685% 12.685% 12.685%)");
|
||||
});
|
||||
|
||||
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(9.6799% 10.739% 9.8424%)");
|
||||
expect(fgNeutral).toEqual("rgb(11.952% 13.038% 12.117%)");
|
||||
});
|
||||
|
||||
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(10.444% 10.527% 9.2918%)");
|
||||
expect(fgNeutral).toEqual("rgb(12.734% 12.82% 11.553%)");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
@ -619,7 +619,7 @@ describe("fgNeutralSubtle color", () => {
|
|||
"oklch(0.45 0.03 60)",
|
||||
).getColors();
|
||||
|
||||
expect(fgNeutralSubtle).toEqual("rgb(19.892% 19.892% 19.892%)");
|
||||
expect(fgNeutralSubtle).toEqual("rgb(49.631% 49.631% 49.631%)");
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
"2": "2px"
|
||||
},
|
||||
"opacity": {
|
||||
"disabled": 0.3
|
||||
"disabled": 0.65
|
||||
},
|
||||
"zIndex": {
|
||||
"1": 3,
|
||||
|
|
|
|||
|
|
@ -126,7 +126,7 @@
|
|||
*-----------------------------------------------------------------------------
|
||||
*/
|
||||
& [data-field-input] :is(input, textarea)::placeholder {
|
||||
color: var(--color-fg-neutral-subtle);
|
||||
color: var(--color-fg-neutral-subtle) !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user