From ab74c5801ce054a55ab595f451051e9220db94aa Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 18 Jul 2016 21:26:37 +0200
Subject: [PATCH] Migrate Tooltip styles to PostCSS

---
 components/tooltip/_config.scss |  8 --------
 components/tooltip/config.css   | 10 ++++++++++
 components/tooltip/index.js     |  2 +-
 components/tooltip/theme.css    | 34 +++++++++++++++++++++++++++++++++
 components/tooltip/theme.scss   | 34 ---------------------------------
 5 files changed, 45 insertions(+), 43 deletions(-)
 delete mode 100644 components/tooltip/_config.scss
 create mode 100644 components/tooltip/config.css
 create mode 100644 components/tooltip/theme.css
 delete mode 100644 components/tooltip/theme.scss

diff --git a/components/tooltip/_config.scss b/components/tooltip/_config.scss
deleted file mode 100644
index 042410519..000000000
--- a/components/tooltip/_config.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-$tooltip-background: rgba(97,97,97,.9) !default;
-$tooltip-margin: 0.5 * $unit !default;
-$tooltip-border-radius: .2 * $unit !default;
-$tooltip-color: #fff !default;
-$tooltip-font-size: $unit !default;
-$tooltip-max-width: 17 * $unit !default;
-$tooltip-padding: .8 * $unit !default;
-$tooltip-animation-duration: 200ms !default;
diff --git a/components/tooltip/config.css b/components/tooltip/config.css
new file mode 100644
index 000000000..31acfbf6d
--- /dev/null
+++ b/components/tooltip/config.css
@@ -0,0 +1,10 @@
+:root {
+  --tooltip-background: color(rgb(97, 97, 97) a(90%));
+  --tooltip-margin: calc(0.5 * var(--unit));
+  --tooltip-border-radius: calc(0.2 * var(--unit));
+  --tooltip-color: var(--color-white);
+  --tooltip-font-size: var(--unit);
+  --tooltip-max-width: calc(17 * var(--unit));
+  --tooltip-padding: calc(0.8 * var(--unit));
+  --tooltip-animation-duration: 200ms;
+}
diff --git a/components/tooltip/index.js b/components/tooltip/index.js
index 3fcd819f2..2918e5e7c 100644
--- a/components/tooltip/index.js
+++ b/components/tooltip/index.js
@@ -1,4 +1,4 @@
 import { tooltipFactory } from './Tooltip.js';
-import theme from './theme.scss';
+import theme from './theme.css';
 
 export default tooltipFactory(theme);
diff --git a/components/tooltip/theme.css b/components/tooltip/theme.css
new file mode 100644
index 000000000..6e27226e7
--- /dev/null
+++ b/components/tooltip/theme.css
@@ -0,0 +1,34 @@
+@import '../colors.css';
+@import '../variables.css';
+@import './config.css';
+
+.tooltipWrapper {
+  position: relative;
+}
+
+.tooltip {
+  background: var(--tooltip-background);
+  border-radius: var(--tooltip-border-radius);
+  color: var(--tooltip-color);
+  display: block;
+  font-family: Roboto, sans-serif;
+  font-size: var(--tooltip-font-size);
+  font-weight: var(--font-weight-bold);
+  left: 50%;
+  line-height: var(--font-size-small);
+  margin: var(--tooltip-margin 0);
+  max-width: var(--tooltip-max-width);
+  padding: var(--tooltip-padding);
+  position: absolute;
+  text-align: center;
+  text-transform: none;
+  top: 100%;
+  transform: scale(0) translateX(-50%);
+  transform-origin: top left;
+  transition: var(--animation-curve-default) var(--tooltip-animation-duration) transform;
+  z-index: var(--z-index-higher);
+
+  &.tooltipActive {
+    transform: scale(1) translateX(-50%);
+  }
+}
diff --git a/components/tooltip/theme.scss b/components/tooltip/theme.scss
deleted file mode 100644
index e87d013f2..000000000
--- a/components/tooltip/theme.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-@import "../colors";
-@import "../globals";
-@import "../mixins";
-@import "./config";
-
-.tooltipWrapper {
-  position: relative;
-}
-
-.tooltip {
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  z-index: $z-index-higher;
-  display: block;
-  max-width: $tooltip-max-width;
-  padding: $tooltip-padding;
-  margin: $tooltip-margin 0;
-  font-family: Roboto, sans-serif;
-  font-size: $tooltip-font-size;
-  font-weight: $font-weight-bold;
-  line-height: $font-size-small;
-  color: $tooltip-color;
-  text-align: center;
-  text-transform: none;
-  background: $tooltip-background;
-  border-radius: $tooltip-border-radius;
-  transition: $animation-curve-default $tooltip-animation-duration transform;
-  transform: scale(0) translateX(-50%);
-  transform-origin: top left;
-  &.tooltipActive {
-    transform: scale(1) translateX(-50%);
-  }
-}