From ca5e43dce9937804ad9096c2277c430ebaa60043 Mon Sep 17 00:00:00 2001
From: Kiko Beats <josefrancisco.verdu@gmail.com>
Date: Thu, 18 Jun 2020 19:59:44 +0200
Subject: [PATCH] feat: allow customization via CSS variables

closes #235
---
 packages/hover-react/src/index.js             | 27 ++++-----
 packages/hover-react/stories/index.js         | 10 +---
 .../hover-vanilla/docs/collectednotes.html    | 20 ++-----
 packages/hover-vanilla/docs/index.html        | 57 +++++++++++++------
 packages/hover-vanilla/docs/joshwcomeau.html  | 22 +++----
 .../react/src/components/Card/CardWrap.js     | 17 +++---
 6 files changed, 73 insertions(+), 80 deletions(-)

diff --git a/packages/hover-react/src/index.js b/packages/hover-react/src/index.js
index 6c6ef30f2..517b5185b 100644
--- a/packages/hover-react/src/index.js
+++ b/packages/hover-react/src/index.js
@@ -3,6 +3,8 @@ import styled from 'styled-components'
 import React from 'react'
 
 const PopOver = styled.div`
+  --microlink-hover-background-color: var(--microlink-background-color, white);
+
   position: absolute;
   overflow: hidden;
   visibility: hidden;
@@ -16,8 +18,16 @@ const PopOver = styled.div`
   padding: 0.5rem;
   border-radius: 4px;
 
+  .microlink_card {
+    border: 0;
+  }
+
+  border: 1px solid var(--microlink-border-color, #e1e8ed);
+  background-color: var(--microlink-hover-background-color);
+
   &:hover {
     box-shadow: rgba(0, 0, 0, 0.12) 0px 30px 60px;
+    border-color: var(--microlink-hover-border-color, #f5f8fa);
   }
 `
 
@@ -31,23 +41,6 @@ const Wrapper = styled.span`
     opacity: 1;
     margin-bottom: 15px;
   }
-
-  .microlink_card {
-    border: none;
-  }
-
-  .microlink_card:hover {
-    background-color: inherit;
-  }
-
-  .microlink_hover {
-    background-color: white;
-    border: 1px solid #e1e8ed;
-  }
-
-  .microlink_hover:hover {
-    border-color: #f5f8fa;
-  }
 `
 
 const withHover = ({ LinkComponent, ...props }) => (
diff --git a/packages/hover-react/stories/index.js b/packages/hover-react/stories/index.js
index 94a999c6a..624a04d2f 100644
--- a/packages/hover-react/stories/index.js
+++ b/packages/hover-react/stories/index.js
@@ -118,16 +118,10 @@ storiesOf('decorator', module)
     const MicrolinkHoverLink = withMicrolinkHover(Link)
 
     const CustomCenter = styled(Center)`
+    --microlink-border-color: #666;
+    --microlink-hover-border-color: #999;
       color: white;
       background: #1a1a1a;
-
-      .microlink_card {
-        border-color: #999;
-      }
-
-      .microlink_card:hover {
-        border-color: #666;
-      }
     `
 
     return (
diff --git a/packages/hover-vanilla/docs/collectednotes.html b/packages/hover-vanilla/docs/collectednotes.html
index 0aed9fdd4..3c6e6bca4 100644
--- a/packages/hover-vanilla/docs/collectednotes.html
+++ b/packages/hover-vanilla/docs/collectednotes.html
@@ -325,22 +325,12 @@ <h3 class="title is-size-4">Christian Gill</h3>
       </section>
    </body>
    <style>
-    .microlink_hover,
-    .microlink_card,
-    .microlink_hover:hover,
-    .microlink_card:hover {
-      background: #1A1A1A !important;
-      color: white;
+    :root {
+      --microlink-background-color: #1A1A1A;
+      --microlink-color: white;
+      --microlink-border-color: #666;
+      --microlink-hover-border-color: #999;
     }
-
-    .microlink_hover {
-      border-color: #666 !important;
-    }
-
-    .microlink_hover:hover {
-      border-color: #999 !important;
-    }
-
    </style>
    <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
    <script src="./dist/microlink.js"></script>
diff --git a/packages/hover-vanilla/docs/index.html b/packages/hover-vanilla/docs/index.html
index aa0481a23..bcad1ae14 100644
--- a/packages/hover-vanilla/docs/index.html
+++ b/packages/hover-vanilla/docs/index.html
@@ -57,6 +57,10 @@
   <meta property="og:type" content="website">
 
   <style>
+    :root {
+      --pink: #EA407B;
+    }
+
     * {
       -webkit-font-smoothing: antialiased;
       text-rendering: optimizeLegibility;
@@ -69,13 +73,21 @@
     }
 
     .pink {
-      color: #EA407B;
+      color: var(--pink) !important;
+    }
+
+    .b--pink {
+      border-color: var(--pink) !important;
     }
 
     .gray {
       color: #ADB5BD;
     }
 
+    .silver {
+      color: #495057;
+    }
+
     .sans-serif {
     font-family: 'Inter', sans-serif;
     }
@@ -87,40 +99,53 @@
 </head>
 <body class="pa3 w-100 sans-serif bg-white mw8 mauto">
   <header class="tc">
-    <h1 class="fw6 f2 f1-l">@microlink/hover-vanilla</h1>
-    <h3 class="fw4 f3 ph3">Turns any URL into instant hover preview ✨</h3>
-    <a rel="noopener noreferrer" target="_blank" href='https://hover-react.microlink.io' class="link blue f5 ph2">React version</a>
-    <span> | </span>
-    <a rel="noopener noreferrer" target="_blank" href='https://github.com/microlinkhq/sdk' class="link blue f5 ph2">See on GitHub</a>
+    <h1 class="fw6 f3 f2-l mb3">@microlink/hover-vanilla</h1>
+    <h3 class="fw4 f5 f4-l ph3 mt3">Turns any URL into instant hover preview ✨</h3>
   </header>
 
-  <section class="pt3 ph4 pt5-l ph6-l tc">
-    <div class="mauto mw6 pattern-dots-md gray-light">
-      <video style="transform:translate(30px, 30px);" class="mw6" width="100%" src="/assets/video/demo.mp4" controls="" autoplay="" muted="" loop=""></video>
+  <section class="pv4 ph4 ph6-l tc">
+    <div class="mauto mw6 pattern-dots-md pink">
+      <video style="transform:translate(30px, 30px);" width="100%" src="/assets/video/demo.mp4" controls="" autoplay="" muted="" loop=""></video>
     </div>
   </section>
 
-  <section class="pt3 ph4 pt5-l ph6-l">
-    <h3 class="mt3 f3 fw6">Installation</h3>
+  <section class="pt4 ph4 ph6-l tc">
+    <a rel="noopener noreferrer" target="_blank" href='https://hover-react.microlink.io' class="link blue f5 ph2">React version</a>
+    <span> | </span>
+    <a rel="noopener noreferrer" target="_blank" href='https://github.com/microlinkhq/sdk' class="link blue f5 ph2">See on GitHub</a>
+  </section>
 
+  <section class="pt3 ph4 pt4-l ph6-l">
+    <h3 class="mt3 f3 fw6">Installation</h3>
 
     <div class="pl3">
-      <pre class="pv3 pink lh-copy mw7 ba">
+      <pre class="dark-gray lh-copy f6 code pv3 b--pink lh-copy mw7 ba">
+  <span class="gray">&#x3C;!-- customize style --&#x3E;</span>
+  &#x3C;style&#x3E;
+    :root {
+      --microlink-background-color: #1A1A1A;
+      --microlink-color: white;
+      --microlink-border-color: #666;
+      --microlink-hover-border-color: #999;
+    }
+  &#x3C;/style&#x3E;
+
+  <span class="gray">&#x3C;!-- load @microlink/hover-vanilla --&#x3E;</span>
   &lt;script src=&quot;https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js,npm/@microlink/hover-vanilla@latest/dist/microlink.min.js&quot;&gt;&lt;/script&gt;
 
+  <span class="gray">&#x3C;!-- intialize `microlinkHover` --&#x3E;</span>
   &#x3C;script&#x3E;
     document.addEventListener(&#x27;DOMContentLoaded&#x27;, function (event) {
       microlinkHover(&#x27;.content a&#x27;, {
-        // https://microlink.io/docs/sdk/parameters/media/
+        <span class="gray">// See https://microlink.io/docs/sdk/parameters/media/</span>
         media: [&#x27;iframe&#x27;, &#x27;video&#x27;, &#x27;audio&#x27;, &#x27;image&#x27;, &#x27;logo&#x27;]
       })
     })
-  &#x3C;/script&#x3E;
-      </pre>
+  &#x3C;/script&#x3E;</pre>
     </div>
   <figcaption class="f7 gray pt2 tc">Just add the above to your main markup before the closing &lt;/body&gt; tag.</figcaption>
   </section>
-  <section class="pt3 ph4 pt5-l ph6-l">
+  <section class="pt3 ph4 pt4-l ph6-l">
     <h3 class="mt3 f3 fw6">Showcase</h3>
     <p class="pl3 lh-copy mw7">
       <a class="f3 link light-blue b no-underline dib ph2 pv1" href="https://kikobeats.com/human-apis/">kikobeats.com</a>
diff --git a/packages/hover-vanilla/docs/joshwcomeau.html b/packages/hover-vanilla/docs/joshwcomeau.html
index b4e1c76a7..f6ee0e98c 100644
--- a/packages/hover-vanilla/docs/joshwcomeau.html
+++ b/packages/hover-vanilla/docs/joshwcomeau.html
@@ -415,21 +415,13 @@
 
         }</script><script id="gatsby-script-loader">/*<![CDATA[*/window.pagePath="/gatsby/a-static-future/";/*]]>*/</script><script id="gatsby-chunk-mapping">/*<![CDATA[*/window.___chunkMapping={"app":["/app-bddf6d2174c695bf0f6e.js"],"component---src-components-template-tutorial-template-tutorial-js":["/component---src-components-template-tutorial-template-tutorial-js-1532e3a0c9dc5ed5a60c.js"],"component---src-components-template-article-template-article-js":["/component---src-components-template-article-template-article-js-4f66df55445cd475edf1.js"],"component---src-components-template-newsletter-template-newsletter-js":["/component---src-components-template-newsletter-template-newsletter-js-610bed13388a5c6f3453.js"],"component---src-components-template-newsletter-template-newsletter-raw-js":["/component---src-components-template-newsletter-template-newsletter-raw-js-afbebb7bcb91e9c99d10.js"],"component---src-components-template-snippet-template-snippet-js":["/component---src-components-template-snippet-template-snippet-js-cc6058c1b4c6914e3405.js"],"component---src-pages-404-js":["/component---src-pages-404-js-09829ef19676e8529e19.js"],"component---src-components-template-latest-template-latest-js":["/component---src-components-template-latest-template-latest-js-6c821b03ef7f8de7e6cf.js"],"component---src-components-template-content-grouped-template-content-grouped-js":["/component---src-components-template-content-grouped-template-content-grouped-js-7d8d18f67424f3765ff7.js"],"component---src-components-template-category-list-template-category-list-js":["/component---src-components-template-category-list-template-category-list-js-d93abe34aff914ecf286.js"],"component---src-pages-admin-js":["/component---src-pages-admin-js-65c7e15c6969b85646bd.js"],"component---src-pages-confirmed-js":["/component---src-pages-confirmed-js-1b721c45b2b5daf8da02.js"],"component---src-pages-index-js":["/component---src-pages-index-js-5342d8b93a94ce7417d0.js"],"component---src-pages-opted-out-js":["/component---src-pages-opted-out-js-46c42769db5002a42929.js"],"component---src-pages-react-europe-talk-2020-js":["/component---src-pages-react-europe-talk-2020-js-1c3c8a7a52b8f07e8bc7.js"],"component---src-pages-snippets-js":["/component---src-pages-snippets-js-7a832b176002308b522e.js"],"component---src-pages-subscribe-js":["/component---src-pages-subscribe-js-3b24bbf183e0f374bea1.js"],"component---src-pages-uses-js":["/component---src-pages-uses-js-cce93f558dcd52d89111.js"]};/*]]>*/</script><script src="/component---src-components-template-article-template-article-js-4f66df55445cd475edf1.js" async=""></script><script src="/32d30cd0b1e1944f31e8b2047e3dec7df4b8121e-2467bb6b59efe92557ab.js" async=""></script><script src="/90d6c6b69f5d928ea670fe336787fe862b806062-6490d29d325f151dae86.js" async=""></script><script src="/app-bddf6d2174c695bf0f6e.js" async=""></script><script src="/4544e8b5-1a44f4f4841982c0898e.js" async=""></script><script src="/styles-fb2a6d404e3a75ee756a.js" async=""></script><script src="/framework-e29ec6706c45aab429d7.js" async=""></script><script src="/webpack-runtime-2f665d42e0fbc7d2c4a1.js" async=""></script></body>
 
-
-<style>
-  .microlink_hover,
-  .microlink_card,
-  .microlink_hover:hover,
-  .microlink_card:hover {
-    background: #0E151C !important;
-    color: white;
-  }
-  .microlink_hover {
-    border-color: #364049 !important;
-  }
-  .microlink_hover:hover {
-    border-color: #999 !important;
-  }
+  <style>
+    :root {
+      --microlink-background-color: #0E151C;
+      --microlink-color: white;
+      --microlink-border-color: #364049;
+      --microlink-hover-border-color: #999;
+    }
   </style>
   <script src="https://cdn.jsdelivr.net/combine/npm/react@16/umd/react.production.min.js,npm/react-dom@16/umd/react-dom.production.min.js,npm/react-is@16/umd/react-is.production.min.js,npm/styled-components@5/dist/styled-components.min.js,npm/@microlink/mql@latest/dist/mql.min.js"></script>
   <script src="./dist/microlink.js"></script>
diff --git a/packages/react/src/components/Card/CardWrap.js b/packages/react/src/components/Card/CardWrap.js
index 0822bc137..72b13fcad 100644
--- a/packages/react/src/components/Card/CardWrap.js
+++ b/packages/react/src/components/Card/CardWrap.js
@@ -34,8 +34,8 @@ const hoverStyle = css`
   transition-property: background, border-color;
   will-change: background, border-color;
   &:hover {
-    background: #f5f8fa;
-    border-color: rgba(136, 153, 166, 0.5);
+    background-color: var(--microlink-hover-background-color, #f5f8fa);
+    border-color: var(--microlink-hover-border-color, #8899A680);
   }
 `
 
@@ -45,19 +45,18 @@ const rtlStyle = ({ cardSize }) => css`
 
 const baseStyle = css(
   () => `
-  max-width: 500px;
-  background-color: #fff;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #e1e8ed;
+  max-width: var(--microlink-max-width, 500px);
+  background-color: var(--microlink-background-color, #fff);
+  border-width: var(--microlink-border-width, 1px);
+  border-style: var(--microlink-border-style, solid);
+  border-color: var(--microlink-border-color, #e1e8ed);
+  color: var(--microlink-color, #181919);
   overflow: hidden;
-  color: #181919;
   font-family: ${font.sans};
   display: flex;
   text-decoration: none;
   opacity: 1;
   position: relative;
-
   transition-duration: ${speed.medium};
   transition-timing-function: ${animation.medium};