From 0bc1213795da89e5accab7ec3968f0365546bc5c Mon Sep 17 00:00:00 2001 From: vadim Date: Thu, 13 Jul 2023 10:39:42 +0200 Subject: [PATCH] feat: WDS color `bgNeutral`, states and `Subtle` variant (#25332) ## Description tl;dr States and other derivatives of `bgNeutral`, some fixes for `bgNeutral` logic itself. Fixes #24512 ## 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 | 86 ++++++++++++++++--- .../theming/src/color/LightModeTheme.ts | 84 ++++++++++++++++-- 2 files changed, 151 insertions(+), 19 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 33636aacdd..accada3ff9 100644 --- a/app/client/packages/design-system/theming/src/color/DarkModeTheme.ts +++ b/app/client/packages/design-system/theming/src/color/DarkModeTheme.ts @@ -438,11 +438,7 @@ export class DarkModeTheme implements ColorModeTheme { const color = this.bgAccent.clone(); // For darker accents it helps to increase neutral's lightness a little, so it's visible against bg - if (color.oklch.l < 0.3) { - color.oklch.l = color.oklch.l + 0.15; - } - - if (color.oklch.l < 0.5) { + if (this.bgAccent.oklch.l < 0.5) { color.oklch.l = color.oklch.l + 0.05; } @@ -451,7 +447,7 @@ export class DarkModeTheme implements ColorModeTheme { } if (this.seedIsCold && !this.seedIsAchromatic) { - color.oklch.c = 0.03; + color.oklch.c = 0.02; } if (!this.seedIsCold && !this.seedIsAchromatic) { @@ -462,23 +458,91 @@ export class DarkModeTheme implements ColorModeTheme { } private get bgNeutralHover() { - return "#ebeff5"; + const color = this.bgNeutral.clone(); + + // Simplified and adjusted version of bgAccentHover algorithm (bgNeutral has very low or no chroma) + + if (this.bgNeutral.oklch.l >= 0.85) { + color.oklch.l = color.oklch.l - 0.07; + } + + if (this.bgNeutral.oklch.l >= 0.77 && this.bgNeutral.oklch.l < 0.85) { + color.oklch.l = color.oklch.l + 0.04; + } + + if (this.bgNeutral.oklch.l >= 0.45 && this.bgNeutral.oklch.l < 0.77) { + color.oklch.l = color.oklch.l + 0.03; + } + + if (this.bgNeutral.oklch.l >= 0.3 && this.bgNeutral.oklch.l < 0.45) { + color.oklch.l = color.oklch.l + 0.04; + } + + return color; } private get bgNeutralActive() { - return "#e3e9f0"; + const color = this.bgNeutral.clone(); + + // Simplified and adjusted version of bgAccentHover algorithm (bgNeutral has very low or no chroma) + if (this.bgNeutral.oklch.l < 0.4) { + color.oklch.l = this.bgAccent.oklch.l - 0.01; + } + + if (this.bgNeutral.oklch.l >= 0.4 && this.bgNeutral.oklch.l < 0.7) { + color.oklch.l = this.bgAccent.oklch.l - 0.04; + } + + if (this.bgNeutral.oklch.l >= 0.7 && this.bgNeutral.oklch.l < 0.85) { + color.oklch.l = this.bgAccent.oklch.l - 0.05; + } + + if (this.bgNeutral.oklch.l >= 0.85) { + color.oklch.l = this.bgAccent.oklch.l - 0.13; + } + + return color; } private get bgNeutralSubtle() { - return "#ffffff"; + const color = this.seedColor.clone(); + + // Adjusted version of bgAccentSubtle (less or no chroma) + + if (this.seedLightness > 0.3) { + color.oklch.l = 0.3; + } + + // If the color is too dark it won't be visible against bg. + if (this.seedLightness < 0.2) { + color.oklch.l = 0.2; + } + + if (this.seedChroma > 0.025) { + color.oklch.c = 0.025; + } + + if (this.seedIsAchromatic) { + color.oklch.c = 0; + } + + return color; } private get bgNeutralSubtleHover() { - return "#f2f4f8"; + const color = this.bgNeutralSubtle.clone(); + + color.oklch.l = color.oklch.l + 0.03; + + return color; } private get bgNeutralSubtleActive() { - return "#ebeff5"; + const color = this.bgNeutralSubtle.clone(); + + color.oklch.l = color.oklch.l - 0.02; + + return color; } private get bgAssistive() { 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 01fa00f081..f136f838b6 100644 --- a/app/client/packages/design-system/theming/src/color/LightModeTheme.ts +++ b/app/client/packages/design-system/theming/src/color/LightModeTheme.ts @@ -458,11 +458,11 @@ export class LightModeTheme implements ColorModeTheme { const color = this.bgAccent.clone(); // For bright accents it helps to make neutral a bit darker to differentiate with bgAccent - if (color.oklch.l >= 0.85 && !this.seedIsVeryLight) { + if (this.bgAccent.oklch.l >= 0.85) { color.oklch.l = color.oklch.l - 0.02; } - if (color.oklch.l > 0.25 && color.oklch.l < 0.85) { + if (this.bgAccent.oklch.l > 0.25 && this.bgAccent.oklch.l < 0.85) { color.oklch.l = color.oklch.l - 0.1; } @@ -471,7 +471,7 @@ export class LightModeTheme implements ColorModeTheme { } if (this.seedIsCold && !this.seedIsAchromatic) { - color.oklch.c = 0.05; + color.oklch.c = 0.03; } if (!this.seedIsCold && !this.seedIsAchromatic) { @@ -482,23 +482,91 @@ export class LightModeTheme implements ColorModeTheme { } private get bgNeutralHover() { - return "#ebeff5"; + const color = this.bgNeutral.clone(); + + // Simplified and adjusted version of bgAccentHover algorithm (bgNeutral has very low or no chroma) + + if (this.bgNeutral.oklch.l < 0.06) { + color.oklch.l = color.oklch.l + 0.24; + } + + if (this.bgNeutral.oklch.l > 0.06 && this.bgNeutral.oklch.l < 0.14) { + color.oklch.l = color.oklch.l + 0.14; + } + + if (this.bgNeutral.oklch.l >= 0.14 && this.bgNeutral.oklch.l < 0.21) { + color.oklch.l = color.oklch.l + 0.07; + } + + if (this.bgNeutral.oklch.l >= 0.21 && this.bgNeutral.oklch.l < 0.7) { + color.oklch.l = color.oklch.l + 0.05; + } + + if (this.bgNeutral.oklch.l >= 0.7 && this.bgNeutral.oklch.l < 0.955) { + color.oklch.l = color.oklch.l + 0.03; + } + + if (this.bgNeutral.oklch.l >= 0.955) { + color.oklch.l = 0.94; + } + + return color; } private get bgNeutralActive() { - return "#e3e9f0"; + const color = this.bgNeutral.clone(); + + // Simplified and adjusted version of bgAccentActive algorithm (bgNeutral has very low or no chroma) + + if (this.bgNeutral.oklch.l < 0.4) { + color.oklch.l = color.oklch.l - 0.03; + } + + if (this.bgNeutral.oklch.l >= 0.4 && this.bgNeutral.oklch.l < 0.955) { + color.oklch.l = color.oklch.l - 0.01; + } + + if (this.bgNeutral.oklch.l >= 0.955) { + color.oklch.l = 0.925; + } + + return color; } private get bgNeutralSubtle() { - return "#ffffff"; + const color = this.seedColor.clone(); + + // Adjusted version of bgAccentSubtle (less or no chroma) + + if (this.seedLightness < 0.94) { + color.oklch.l = 0.94; + } + + if (this.seedChroma > 0.01) { + color.oklch.c = 0.01; + } + + if (this.seedIsAchromatic) { + color.oklch.c = 0; + } + + return color; } private get bgNeutralSubtleHover() { - return "#f2f4f8"; + const color = this.bgNeutralSubtle.clone(); + + color.oklch.l = color.oklch.l + 0.02; + + return color; } private get bgNeutralSubtleActive() { - return "#ebeff5"; + const color = this.bgNeutralSubtle.clone(); + + color.oklch.l = color.oklch.l - 0.01; + + return color; } private get bgAssistive() {