From 1c4eea5b20d210f93ebd5617e2c496e070f610f5 Mon Sep 17 00:00:00 2001
From: Juan Cazala <juan@decentraland.org>
Date: Mon, 9 Jul 2018 16:22:35 -0300
Subject: [PATCH] feat: improve themes

---
 README.md                              |  5 ++---
 src/components/Button/Button.css       | 12 ++++++------
 src/components/Radio/Radio.css         |  2 +-
 src/themes/alternative/dark-theme.css  |  5 ++---
 src/themes/alternative/light-theme.css |  5 ++---
 src/themes/base-theme.css              |  7 +++++++
 6 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 63ebc60b..f67a8ba3 100644
--- a/README.md
+++ b/README.md
@@ -63,12 +63,11 @@ Or you can create your own theme like this:
 :root {
   /* colors */
   --primary: #ff0044;
+  --primary-light: #ff9a74;
+  --primary-dark: #d10038;
   --secondary: #f2f2f5;
   --accent: #00d9ff;
 
-  /* gradients */
-  --primary-gradient: #ff9a74;
-
   /* text */
   --text: #0a0f1f;
   --secondary-text: #7d8499;
diff --git a/src/components/Button/Button.css b/src/components/Button/Button.css
index fa5ad9ee..f3a2c316 100644
--- a/src/components/Button/Button.css
+++ b/src/components/Button/Button.css
@@ -79,15 +79,15 @@
   color: var(--text-on-primary);
   background-image: linear-gradient(
     to top,
-    var(--primary-gradient),
+    var(--primary-light),
     var(--primary)
   );
   background-color: linear-gradient(
     to top,
-    var(--primary-gradient),
+    var(--primary-light),
     var(--primary)
   );
-  background: linear-gradient(to top, var(--primary-gradient), var(--primary));
+  background: linear-gradient(to top, var(--primary-light), var(--primary));
 }
 
 .ui.button.primary:hover a,
@@ -99,15 +99,15 @@
   color: var(--text-on-primary);
   background-image: linear-gradient(
     to top,
-    var(--primary-gradient),
+    var(--primary-light),
     var(--primary)
   );
   background-color: linear-gradient(
     to top,
-    var(--primary-gradient),
+    var(--primary-light),
     var(--primary)
   );
-  background: linear-gradient(to top, var(--primary-gradient), var(--primary));
+  background: linear-gradient(to top, var(--primary-light), var(--primary));
 }
 
 .ui.button.primary:focus a {
diff --git a/src/components/Radio/Radio.css b/src/components/Radio/Radio.css
index 5638b9cf..12627ef4 100644
--- a/src/components/Radio/Radio.css
+++ b/src/components/Radio/Radio.css
@@ -60,7 +60,7 @@
   background-color: var(--primary);
   background-image: linear-gradient(
     to top,
-    var(--primary-gradient),
+    var(--primary-light),
     var(--primary)
   );
   box-shadow: var(--primary) 0px 0px 10px 0px;
diff --git a/src/themes/alternative/dark-theme.css b/src/themes/alternative/dark-theme.css
index 27cf2f43..bc30ad13 100644
--- a/src/themes/alternative/dark-theme.css
+++ b/src/themes/alternative/dark-theme.css
@@ -1,13 +1,12 @@
 :root {
   /* colors */
   --primary: #ff0044;
+  --primary-light: #ff9a74;
+  --primary-dark: #d10038;
   --secondary: #181f33;
   --accent: #00d9ff;
   --background: #0a0f1f;
 
-  /* gradients */
-  --primary-gradient: #ff9a74;
-
   /* text */
   --text: #ffffff;
   --secondary-text: #7d8499;
diff --git a/src/themes/alternative/light-theme.css b/src/themes/alternative/light-theme.css
index 65e165f8..d31678f5 100644
--- a/src/themes/alternative/light-theme.css
+++ b/src/themes/alternative/light-theme.css
@@ -1,13 +1,12 @@
 :root {
   /* colors */
   --primary: #ff0044;
+  --primary-light: #ff9a74;
+  --primary-dark: #d10038;
   --secondary: #f2f2f5;
   --accent: #00d9ff;
   --background: #ffffff;
 
-  /* gradients */
-  --primary-gradient: #ff9a74;
-
   /* text */
   --text: #0a0f1f;
   --secondary-text: #7d8499;
diff --git a/src/themes/base-theme.css b/src/themes/base-theme.css
index 26608986..f2e28fad 100644
--- a/src/themes/base-theme.css
+++ b/src/themes/base-theme.css
@@ -40,3 +40,10 @@ h6 {
 p {
   color: var(--text);
 }
+
+a {
+  color: var(--primary);
+}
+a:hover {
+  color: var(--primary-dark);
+}