Merge pull request #12 from decentraland/feat/improve-themes

feat: improve themes
decentraland · Jul 9, 2018 · f95907a · f95907a
2 parents 0c8c7a5 + 1c4eea5
commit f95907a
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 16 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -40,3 +40,10 @@ h6 {
 p {
   color: var(--text);
 }
+
+a {
+  color: var(--primary);
+}
+a:hover {
+  color: var(--primary-dark);
+}