From 312a18ceb1d6fc15d423cb93f4812b5444695781 Mon Sep 17 00:00:00 2001 From: vadim Date: Tue, 12 Dec 2023 16:09:26 +0100 Subject: [PATCH 1/5] Base numbers --- .../design-system/theming/src/color/src/DarkModeTheme.ts | 6 +++--- .../design-system/theming/src/color/src/LightModeTheme.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 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 ea70dd722a1..fa94ab86b6b 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 @@ -592,7 +592,7 @@ export class DarkModeTheme implements ColorModeTheme { private get bgElevation1() { const color = this.bg.clone(); - color.oklch.l += 0.05; + color.oklch.l += 0.07; return color; } @@ -600,7 +600,7 @@ export class DarkModeTheme implements ColorModeTheme { private get bgElevation2() { const color = this.bgElevation1.clone(); - color.oklch.l += 0.05; + color.oklch.l += 0.04; return color; } @@ -608,7 +608,7 @@ export class DarkModeTheme implements ColorModeTheme { private get bgElevation3() { const color = this.bgElevation2.clone(); - color.oklch.l += 0.05; + color.oklch.l += 0.02; 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 4b62738bbab..52e16151eb2 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 @@ -133,7 +133,7 @@ export class LightModeTheme implements ColorModeTheme { } if (!this.seedIsVeryLight) { - color.oklch.l = 0.985; + color.oklch.l = 0.96; } // Cold colors can have a bit more chroma while staying perceptually neutral @@ -619,7 +619,7 @@ export class LightModeTheme implements ColorModeTheme { private get bgElevation1() { const color = this.bg.clone(); - color.oklch.l += 0.01; + color.oklch.l += 0.015; return color; } @@ -627,7 +627,7 @@ export class LightModeTheme implements ColorModeTheme { private get bgElevation2() { const color = this.bgElevation1.clone(); - color.oklch.l += 0.01; + color.oklch.l += 0.012; return color; } From c81f3fe489484853f3b9c153f213665e731d4bcd Mon Sep 17 00:00:00 2001 From: vadim Date: Thu, 14 Dec 2023 09:59:05 +0100 Subject: [PATCH 2/5] Typo --- .../packages/design-system/widgets/src/testing/Elevation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/packages/design-system/widgets/src/testing/Elevation.tsx b/app/client/packages/design-system/widgets/src/testing/Elevation.tsx index e1a72994f8a..767feeaddee 100644 --- a/app/client/packages/design-system/widgets/src/testing/Elevation.tsx +++ b/app/client/packages/design-system/widgets/src/testing/Elevation.tsx @@ -24,7 +24,7 @@ export const Elevation = () => { padding="spacing-6" style={{ background: "var(--color-bg-elevation-3)", - boxShadow: "var(--box-shadow-1)", + boxShadow: "var(--box-shadow-3)", }} /> From cebdcdc3b9aa7133ea120955f69cb44d072e27f1 Mon Sep 17 00:00:00 2001 From: vadim Date: Thu, 14 Dec 2023 11:16:59 +0100 Subject: [PATCH 3/5] Adjust shadows (tmp for preview) --- .../design-system/theming/src/token/src/defaultTokens.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 a5091ef14ba..316662bcee2 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 @@ -57,9 +57,9 @@ "1": "0px" }, "boxShadow": { - "1": "0 2px 2px 0 rgba(0, 0, 0, 0.2)", - "2": "0 2px 2px 0 rgba(0, 0, 0, 0.2)", - "3": "0 2px 2px 0 rgba(0, 0, 0, 0.2)" + "1": "0 8px 8px 0 rgba(0, 0, 0, 0.05)", + "2": "0 4px 4px 0 rgba(0, 0, 0, 0.1)", + "3": "0 2px 2px 0 rgba(0, 0, 0, 0.15)" }, "borderWidth": { "1": "1px", From c825bbf6725dad4e459f1c51daba8306fc706d85 Mon Sep 17 00:00:00 2001 From: vadim Date: Thu, 14 Dec 2023 11:21:43 +0100 Subject: [PATCH 4/5] Adjustments for very light seeds --- .../theming/src/color/src/LightModeTheme.ts | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) 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 52e16151eb2..5dd645f49c8 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 @@ -619,7 +619,13 @@ export class LightModeTheme implements ColorModeTheme { private get bgElevation1() { const color = this.bg.clone(); - color.oklch.l += 0.015; + if (this.seedIsVeryLight) { + color.oklch.l += 0.015; + } + + if (!this.seedIsVeryLight) { + color.oklch.l += 0.02; + } return color; } @@ -627,8 +633,13 @@ export class LightModeTheme implements ColorModeTheme { private get bgElevation2() { const color = this.bgElevation1.clone(); - color.oklch.l += 0.012; + if (this.seedIsVeryLight) { + color.oklch.l += 0.012; + } + if (!this.seedIsVeryLight) { + color.oklch.l += 0.015; + } return color; } From 6378ab860de3bc3cfa4602b9865f7508785ff91d Mon Sep 17 00:00:00 2001 From: vadim Date: Thu, 14 Dec 2023 11:50:48 +0100 Subject: [PATCH 5/5] Fix tests --- .../theming/src/color/tests/LightModeTheme.test.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 81278ef3213..f7ce48a170e 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 @@ -8,7 +8,7 @@ describe("bg color", () => { it("should return correct color when lightness < 0.93", () => { const { bg } = new LightModeTheme("oklch(0.92 0.09 231)").getColors(); - expect(bg).toBe("rgb(95.828% 98.573% 100%)"); + expect(bg).toBe("rgb(92.567% 95.296% 96.777%)"); }); it("should return correct color when hue > 120 && hue < 300", () => { @@ -18,12 +18,12 @@ describe("bg color", () => { it("should return correct color when hue < 120 or hue > 300", () => { const { bg } = new LightModeTheme("oklch(0.92 0.07 110)").getColors(); - expect(bg).toBe("rgb(98.101% 98.258% 96.176%)"); + expect(bg).toBe("rgb(94.827% 94.982% 92.913%)"); }); it("should return correct color when chroma < 0.04", () => { const { bg } = new LightModeTheme("oklch(0.92 0.02 110)").getColors(); - expect(bg).toBe("rgb(98.026% 98.026% 98.026%)"); + expect(bg).toBe("rgb(94.752% 94.752% 94.752%)"); }); }); @@ -794,12 +794,12 @@ describe("bdFocus color", () => { 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(100% 70.125% 64.059%)"); + 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(100% 67.07% 84.709%)"); + expect(bdFocus).toEqual("rgb(68.494% 27.322% 49.304%)"); }); });