From 84eea29572e584eae9ae8b1aa3f2eba2f39ef9dd Mon Sep 17 00:00:00 2001 From: vadim Date: Wed, 5 Jul 2023 10:58:16 +0200 Subject: [PATCH] feat: WDS `bgPositive` states and `Subtle` variant (#25062) ## Description tl;dr States and other derivatives of `bgPositive`. Fixes #24510 ## Type of change - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? - Manual ### Test Plan Initial POC refinement, no testing necessary ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [ ] New and existing unit tests pass locally with my changes - [ ] PR is being merged under a feature flag ### QA activity: - [ ] Test plan has been approved by relevant developers - [ ] Test plan has been peer reviewed by QA - [ ] Cypress test cases have been added and approved by either SDET or manual QA - [ ] Organized project review call with relevant stakeholders after Round 1/2 of QA - [ ] Added Test Plan Approved label after reveiwing all Cypress test --- .../theming/src/color/DarkModeTheme.ts | 75 ++++++++++++------- .../theming/src/color/LightModeTheme.ts | 41 +++++++--- 2 files changed, 81 insertions(+), 35 deletions(-) diff --git a/app/client/packages/design-system/theming/src/color/DarkModeTheme.ts b/app/client/packages/design-system/theming/src/color/DarkModeTheme.ts index f48a67f987..31509ee10b 100644 --- a/app/client/packages/design-system/theming/src/color/DarkModeTheme.ts +++ b/app/client/packages/design-system/theming/src/color/DarkModeTheme.ts @@ -52,10 +52,10 @@ export class DarkModeTheme implements ColorModeTheme { bgAccentSubtleActive: this.bgAccentSubtleActive.toString(), bgAssistive: this.bgAssistive.toString(), bgPositive: this.bgPositive.to("sRGB").toString(), - bgPositiveHover: this.bgPositiveHover.toString(), - bgPositiveActive: this.bgPositiveActive.toString(), - bgPositiveSubtleHover: this.bgPositiveSubtleHover.toString(), - bgPositiveSubtleActive: this.bgPositiveSubtleActive.toString(), + bgPositiveHover: this.bgPositiveHover.to("sRGB").toString(), + bgPositiveActive: this.bgPositiveActive.to("sRGB").toString(), + bgPositiveSubtleHover: this.bgPositiveSubtleHover.to("sRGB").toString(), + bgPositiveSubtleActive: this.bgPositiveSubtleActive.to("sRGB").toString(), bgNegative: this.bgNegative.to("sRGB").toString(), bgNegativeHover: this.bgNegativeHover.toString(), bgNegativeActive: this.bgNegativeActive.toString(), @@ -253,24 +253,64 @@ export class DarkModeTheme implements ColorModeTheme { return color; } + // Positive background, green. + private get bgPositive() { + const color = new Color("oklch", [0.62, 0.17, 145]); + + // If the seed color is also green, adjust positive by hue to make it distinct from accent. + if (this.seedIsGreen && this.seedColor.oklch.c > 0.09) { + if (this.seedColor.oklch.h < 145) { + color.oklch.h = 155; + } + if (this.seedColor.oklch.h >= 145) { + color.oklch.h = 135; + } + } + + return color; + } + private get bgPositiveHover() { - return "#3ec16c"; + const color = this.bgPositive.clone(); + + // Lightness of bgPositive is known, no additional checks like in bgAccentHover + color.oklch.l = color.oklch.l + 0.03; + + return color; } private get bgPositiveActive() { - return "#35a15c"; + const color = this.bgPositive.clone(); + + // Lightness of bgPositive is known, no additional checks like in bgAccentActive + color.oklch.l = color.oklch.l - 0.04; + + return color; } private get bgPositiveSubtle() { - return "#f0fff5"; + const color = this.bgPositive.clone(); + + color.oklch.l = 0.3; + color.oklch.c = 0.08; + + return color; } private get bgPositiveSubtleHover() { - return "#e0ffeb"; + const color = this.bgPositiveSubtle.clone(); + + color.oklch.l = color.oklch.l + 0.03; + + return color; } private get bgPositiveSubtleActive() { - return "#d1ffe1"; + const color = this.bgPositiveSubtle.clone(); + + color.oklch.l = color.oklch.l - 0.02; + + return color; } // Warning background, yellow @@ -375,23 +415,6 @@ export class DarkModeTheme implements ColorModeTheme { return this.fg.clone(); } - // Positive background, green. - private get bgPositive() { - const color = new Color("oklch", [0.62, 0.17, 145]); - - // If the seed color is also green, adjust positive by hue to make it distinct from accent. - if (this.seedIsGreen && this.seedColor.oklch.c > 0.09) { - if (this.seedColor.oklch.h < 145) { - color.oklch.h = 155; - } - if (this.seedColor.oklch.h >= 145) { - color.oklch.h = 135; - } - } - - return color; - } - /* * Foreground colors */ diff --git a/app/client/packages/design-system/theming/src/color/LightModeTheme.ts b/app/client/packages/design-system/theming/src/color/LightModeTheme.ts index 03e28a5670..bb6cb601ec 100644 --- a/app/client/packages/design-system/theming/src/color/LightModeTheme.ts +++ b/app/client/packages/design-system/theming/src/color/LightModeTheme.ts @@ -52,10 +52,10 @@ export class LightModeTheme implements ColorModeTheme { bgAccentSubtleActive: this.bgAccentSubtleActive.toString(), bgAssistive: this.bgAssistive.toString(), bgPositive: this.bgPositive.to("sRGB").toString(), - bgPositiveHover: this.bgPositiveHover.toString(), - bgPositiveActive: this.bgPositiveActive.toString(), - bgPositiveSubtleHover: this.bgPositiveSubtleHover.toString(), - bgPositiveSubtleActive: this.bgPositiveSubtleActive.toString(), + bgPositiveHover: this.bgPositiveHover.to("sRGB").toString(), + bgPositiveActive: this.bgPositiveActive.to("sRGB").toString(), + bgPositiveSubtleHover: this.bgPositiveSubtleHover.to("sRGB").toString(), + bgPositiveSubtleActive: this.bgPositiveSubtleActive.to("sRGB").toString(), bgNegative: this.bgNegative.to("sRGB").toString(), bgNegativeHover: this.bgNegativeHover.toString(), bgNegativeActive: this.bgNegativeActive.toString(), @@ -291,23 +291,46 @@ export class LightModeTheme implements ColorModeTheme { } private get bgPositiveHover() { - return "#3ec16c"; + const color = this.bgPositive.clone(); + + // Lightness of bgPositive is known, no additional checks like in bgAccentHover + color.oklch.l = color.oklch.l + 0.05; + + return color; } private get bgPositiveActive() { - return "#35a15c"; + const color = this.bgPositive.clone(); + + // Lightness of bgPositive is known, no additional checks like in bgAccentActive + color.oklch.l = color.oklch.l - 0.02; + + return color; } private get bgPositiveSubtle() { - return "#f0fff5"; + const color = this.bgPositive.clone(); + + color.oklch.l = 0.94; + color.oklch.c = 0.09; + + return color; } private get bgPositiveSubtleHover() { - return "#e0ffeb"; + const color = this.bgPositiveSubtle.clone(); + + color.oklch.l = color.oklch.l + 0.02; + + return color; } private get bgPositiveSubtleActive() { - return "#d1ffe1"; + const color = this.bgPositiveSubtle.clone(); + + color.oklch.l = color.oklch.l - 0.01; + + return color; } // Warning background, yellow