Updates color mixins; fixes a few problems with buttons

See topcoder-platform/community-app#773

Author: birdofpreyru

CHANGELOG.md

@@ -1,5 +1,17 @@
 # Topcoder React UI Kit Changelog
 
+### v0.2.0
+- **[Breaking change]:** The following color constants have been dropped:
+  `$tc-dark-blue-90`, `$tc-gold-70`, `$tc-gold-30`, `$tc-gold-10`; use instead:
+  `$tc-dark-blue`, `$tc-yellow-70`, `$tc-yellow-30`, `tc-yellow-10`.
+
+- Values of `$tc-gold`, `$tc-silver`, `$tc-bronze` color constants are updated
+  (metal colors for placements, etc.). Additional colors introduced:
+  `$tc-gold-110`, `$tc-gold-130`, `$tc-silver-110`, `$tc-silver-130`,
+  `$tc-bronze-110`, `$tc-bronze-130`; these are intended for text color
+  inside areas filled by metal colors: use `110` color variants for middle
+  font size and larger, use `130` for small text size.
+
 ### v0.1.0
 The first release.
 

package-lock.json

@@ -31,7 +31,7 @@
     "prepublishOnly": "npm run build",
     "test": "npm run lint && npm run jest"
   },
-  "version": "0.0.6",
+  "version": "0.2.0",
   "dependencies": {
     "babel-jest": "^22.1.0",
     "react": "^16.2.0",

package.json

@@ -17,6 +17,10 @@
 
 .link,
 .regular {
+  &:visited {
+    color: $tc-white;
+  }
+
   &:focus {
     box-shadow: 0 0 2px 1px #ffd4d1;
     border-color: $tc-red;
@@ -36,7 +40,3 @@
     border-color: transparent;
   }
 }
-
-.link:visited {
-  color: $tc-white;
-}

src/shared/components/buttons/themes/danger.scss

@@ -34,6 +34,14 @@
 * and real buttons (rendered as <button> elements). */
 .link,
 .regular {
+  /* To prevent different styling of the button-like link once it has been
+   * visited. */
+  &:visited {
+    @include tc-label-lg;
+
+    color: $tc-gray-80;
+  }
+
   &:focus {
     box-shadow: 0 0 2px 1px #cfe6ff;
     border-color: #59a7ff;
@@ -53,14 +61,6 @@
   }
 }
 
-/* To prevent different styling of the button-like link once it has been
-* visited. */
-.link:visited {
-  @include tc-label-lg;
-
-  color: $tc-gray-80;
-}
-
 /* And a few extra classes to support XS, SM and LG sizes. */
 
 .xs {

src/shared/components/buttons/themes/default.scss

@@ -7,7 +7,7 @@
 .button {
   background: transparent;
   border-color: transparent;
-  color: #0b71e6;
+  color: $tc-dark-blue-110;
 }
 
 .disabled {
@@ -16,26 +16,26 @@
 
 .link,
 .regular {
+  &:visited {
+    color: $tc-dark-blue-110;
+  }
+
   &:focus {
-    box-shadow: 0 0 2px 1px #cfe6ff;
-    border-color: #59a7ff;
+    box-shadow: 0 0 2px 1px $tc-dark-blue-30;
+    border-color: $tc-dark-blue-70;
     outline: none;
   }
 
   &:hover {
     background-image: none;
     border-color: transparent;
-    color: #59a7ff;
+    color: $tc-dark-blue-70;
   }
 
   &:active {
     background-image: none;
     box-shadow: none;
     border-color: transparent;
-    color: $tc-dark-blue-90;
+    color: $tc-dark-blue;
   }
 }
-
-.link:visited {
-  color: #0b71e6;
-}

src/shared/components/buttons/themes/ghost.scss

@@ -5,7 +5,7 @@
 @import "default";
 
 .button {
-  background: $tc-dark-blue-90;
+  background: $tc-dark-blue;
   border-color: transparent;
   color: $tc-white;
 }
@@ -17,6 +17,10 @@
 
 .link,
 .regular {
+  &:visited {
+    color: $tc-white;
+  }
+
   &:focus {
     box-shadow: 0 0 2px 1px #59a7ff;
     border-color: #0b71e6;
@@ -35,7 +39,3 @@
     border-color: transparent;
   }
 }
-
-.link:visited {
-  color: $tc-white;
-}

src/shared/components/buttons/themes/primary.scss

@@ -17,6 +17,10 @@
 
 .link,
 .regular {
+  &:visited {
+    color: $tc-white;
+  }
+
   &:focus {
     box-shadow: 0 0 2px 1px #59a7ff;
     border-color: $tc-gray-50;
@@ -36,7 +40,3 @@
     border-color: transparent;
   }
 }
-
-.link:visited {
-  color: $tc-white;
-}

src/shared/components/buttons/themes/secondary.scss

@@ -83,10 +83,22 @@ $tc-purple-70: #b47dd6;
 $tc-purple-30: #e2c7f2;
 $tc-purple-10: #f8f2fb;
 
-/* TC Metal colors - Badges. */
-$tc-gold: #fce217;
-$tc-silver: #94bef5;
-$tc-bronze: #bd731e;
+/* TC Metal colors - Badges.
+ *
+ * For metals the level 100 is the base metal color; 110 is for text inside
+ * the metal-colored areas; and 130 is for small text inside metal-colored
+ * areas, for better visibility. */
+$tc-gold-130: #865e07;
+$tc-gold-110: #c99014;
+$tc-gold-100: #ffd84d;
+
+$tc-silver-130: #554e48;
+$tc-silver-110: #716d67;
+$tc-silver-100: #d1d0cf;
+
+$tc-bronze-130: #733d17;
+$tc-bronze-110: #854e29;
+$tc-bronze-100: #d98d64;
 
 /* Pastel colors, used for levels. */
 $tc-pastel-green: #25c089;
@@ -96,6 +108,11 @@ $tc-pastel-crimson: #e6175c;
 
 /* Color aliases. */
 
+/* Base metal colors. */
+$tc-gold: $tc-gold-100;
+$tc-silver: $tc-silver-100;
+$tc-bronze: $tc-bronze-100;
+
 /* Brand colors. */
 $tc-dark-blue: $tc-dark-blue-100;
 $tc-light-blue: $tc-light-blue-100;
@@ -111,10 +128,3 @@ $tc-level-2: $tc-pastel-green;
 $tc-level-3: $tc-pastel-blue;
 $tc-level-4: $tc-pastel-yellow;
 $tc-level-5: $tc-pastel-crimson;
-
-/* TODO: The following constants are here just for back
- * compatibility, they will be removed later, don't use them! */
-$tc-dark-blue-90: $tc-dark-blue-100;
-$tc-gold-70: $tc-yellow-70;
-$tc-gold-30: $tc-yellow-30;
-$tc-gold-10: $tc-yellow-10;