From c6b0f81babb1fc0448f40899e64b31a6e59dde59 Mon Sep 17 00:00:00 2001 From: Vadim Vaitenko Date: Fri, 9 Aug 2024 13:39:24 +0200 Subject: [PATCH 1/3] Adjustments --- .../theming/src/color/src/DarkModeTheme.ts | 4 +-- .../theming/src/color/src/LightModeTheme.ts | 26 ++++++++----------- .../theming/src/token/src/defaultTokens.json | 2 +- .../src/styles/src/text-input.module.css | 2 +- 4 files changed, 15 insertions(+), 19 deletions(-) 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 282c9a72a9b7..74bd76c17ee5 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 @@ -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.25; 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 2b6469e72490..da377bcc716c 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 @@ -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.35; 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.125; 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; } diff --git a/app/client/packages/design-system/theming/src/token/src/defaultTokens.json b/app/client/packages/design-system/theming/src/token/src/defaultTokens.json index fea64e16e6d1..598a1f6efc6c 100644 --- a/app/client/packages/design-system/theming/src/token/src/defaultTokens.json +++ b/app/client/packages/design-system/theming/src/token/src/defaultTokens.json @@ -17,7 +17,7 @@ "2": "2px" }, "opacity": { - "disabled": 0.3 + "disabled": 0.65 }, "zIndex": { "1": 3, diff --git a/app/client/packages/design-system/widgets/src/styles/src/text-input.module.css b/app/client/packages/design-system/widgets/src/styles/src/text-input.module.css index 7dbaaae6d76d..f6d9008d3eef 100644 --- a/app/client/packages/design-system/widgets/src/styles/src/text-input.module.css +++ b/app/client/packages/design-system/widgets/src/styles/src/text-input.module.css @@ -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; } From 7957300892106058c86713862cb65264c3a2d025 Mon Sep 17 00:00:00 2001 From: Vadim Vaitenko Date: Fri, 9 Aug 2024 13:46:50 +0200 Subject: [PATCH 2/3] Unit tests --- .../src/color/tests/DarkModeTheme.test.ts | 8 ++++---- .../src/color/tests/LightModeTheme.test.ts | 20 +++++++++---------- 2 files changed, 14 insertions(+), 14 deletions(-) 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 db382f3f041e..652e36203562 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 @@ -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(60.245% 60.245% 60.245%)"); }); 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(58.362% 61.165% 58.781%)"); }); 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(60.369% 60.601% 57.331%)"); }); }); @@ -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%)"); }); }); 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 0fe088e6b60b..ce174875b477 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 @@ -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(35.556% 35.556% 35.556%)"); }); 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(34.702% 35.976% 34.89%)"); }); 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(35.611% 35.719% 34.233%)"); }); }); @@ -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%)"); }); }); From e1f99f2ea8956ff988c891470fc7fa4285ab32b0 Mon Sep 17 00:00:00 2001 From: Vadim Vaitenko Date: Fri, 9 Aug 2024 14:25:43 +0200 Subject: [PATCH 3/3] Fixed spotted visual errors --- .../design-system/theming/src/color/src/DarkModeTheme.ts | 4 ++-- .../design-system/theming/src/color/src/LightModeTheme.ts | 4 ++-- .../theming/src/color/tests/DarkModeTheme.test.ts | 6 +++--- .../theming/src/color/tests/LightModeTheme.test.ts | 6 +++--- 4 files changed, 10 insertions(+), 10 deletions(-) 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 74bd76c17ee5..9aab75702fd9 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 @@ -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.25; + 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; } 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 da377bcc716c..9cb0499528aa 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 @@ -730,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.35; + color.oklch.l += 0.125; return color; } @@ -738,7 +738,7 @@ export class LightModeTheme implements ColorModeTheme { private get fgNeutralSubtle() { const color = this.fgNeutral.clone(); - color.oklch.l += 0.125; + color.oklch.l += 0.35; return color; } 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 652e36203562..b20846aedcbd 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 @@ -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(60.245% 60.245% 60.245%)"); + 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(58.362% 61.165% 58.781%)"); + 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(60.369% 60.601% 57.331%)"); + expect(fgNeutral).toEqual("rgb(78.837% 79.085% 75.653%)"); }); }); 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 ce174875b477..252bca1d05c8 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 @@ -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(35.556% 35.556% 35.556%)"); + 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(34.702% 35.976% 34.89%)"); + 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(35.611% 35.719% 34.233%)"); + expect(fgNeutral).toEqual("rgb(12.734% 12.82% 11.553%)"); }); });