From b7bf5ae646230c0e3d61b150c302d2658e35be8a Mon Sep 17 00:00:00 2001
From: Genadi <genadi@annoto.net>
Date: Thu, 1 Aug 2019 15:03:29 +0300
Subject: [PATCH] fix cancel link color for when the header has dark background
 (#477)

---
 .../shepherd-header/styles.js                 | 20 ++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/js/components/shepherd-content/shepherd-header/styles.js b/src/js/components/shepherd-content/shepherd-header/styles.js
index 55468c85e..1fc3750fb 100644
--- a/src/js/components/shepherd-content/shepherd-header/styles.js
+++ b/src/js/components/shepherd-content/shepherd-header/styles.js
@@ -1,11 +1,19 @@
-import { lighten } from 'polished';
+import { lighten, darken, getLuminance } from 'polished';
+
+function getLitgherOrDarker(color) {
+  const l = getLuminance(color);
+  if (l > 0.6) {
+    return darken(l / 2, color);
+  }
+  return lighten((1 - l) / 2, color);
+}
 
 export default function headerStyles(classPrefix, variables) {
   return {
     'cancel-link': {
       background: 'transparent',
       border: 'none',
-      color: lighten(0.7, variables.shepherdThemeTextHeader),
+      color: getLitgherOrDarker(variables.shepherdThemeTextColor),
       fontSize: '2em',
       fontWeight: 'normal',
       margin: 0,
@@ -15,8 +23,14 @@ export default function headerStyles(classPrefix, variables) {
       transition: 'color 0.5s ease',
       verticalAlign: 'middle',
       '&:hover': {
-        color: variables.shepherdThemeTextHeader,
+        color: variables.shepherdThemeTextColor,
         cursor: 'pointer'
+      },
+      [`.${classPrefix}shepherd-has-title .${classPrefix}shepherd-content &`]: {
+        color: getLitgherOrDarker(variables.shepherdThemeTextHeader),
+        '&:hover': {
+          color: variables.shepherdThemeTextHeader
+        }
       }
     },