Merge pull request #1 from topcoder-platform/qa-accessibility

Qa accessibility

Author: rashmi73

package.json

@@ -32,7 +32,7 @@
     "lint:scss": "./node_modules/.bin/stylelint **/*.scss --syntax scss",
     "test": "npm run lint && npm run jest"
   },
-  "version": "1.0.0",
+  "version": "1.0.7",
   "dependencies": {
     "prop-types": "^15.6.2",
     "react": "^16.4.1",

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

@@ -5,7 +5,7 @@
 @import "default";
 
 @mixin button {
-  background: $tc-red-70;
+  background: $tc-red-110;
   border-color: transparent;
   color: $tc-white;
 }
@@ -38,7 +38,7 @@
   }
 
   &:active {
-    background-color: $tc-red;
+    background-color: $tc-red-110;
     background-image: none;
     box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.38);
     border-color: transparent;

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

@@ -5,7 +5,7 @@
 @import "default";
 
 @mixin button {
-  background: $tc-dark-blue;
+  background: $tc-dark-blue-110;
   border-color: transparent;
   color: $tc-white;
 }

src/shared/components/tags/primary/data-science.scss

@@ -12,7 +12,7 @@
   &:focus,
   &:hover {
     color: $tc-white;
-    background-color: $tc-orange;
+    background-color: $tc-orange-110;
   }
 
   &:visited {

src/shared/components/tags/primary/design.scss

@@ -12,7 +12,7 @@
   &:focus,
   &:hover {
     color: $tc-white;
-    background-color: $tc-light-blue;
+    background-color: $tc-light-blue-110;
   }
 
   &:visited {

src/shared/components/tags/primary/development.scss

@@ -12,7 +12,7 @@
   &:focus,
   &:hover {
     color: $tc-white;
-    background-color: $tc-green;
+    background-color: $tc-green-110;
   }
 
   &:visited {

src/styles/_mixins/variables.scss

@@ -37,32 +37,33 @@ $tc-gray-neutral-light: #fafafb;
 $tc-white: #fff;
 
 /* Accents & Shades. */
-$tc-dark-blue-110: #006dea;
+$tc-dark-blue-120: #006ad7;
+$tc-dark-blue-110: #006ad7;
 $tc-dark-blue-105: #006feb;
 $tc-dark-blue-100: #0681ff;
 $tc-dark-blue-70: #55a5ff;
 $tc-dark-blue-30: #cee6ff;
 $tc-dark-blue-10: #f4f9ff;
 
 /* Light Blue - design color code. */
-$tc-light-blue-110: #169ed9;
-$tc-light-blue-100: #26ade9;
-$tc-light-blue-70: #67c5ef;
-$tc-light-blue-30: #bde6f8;
+$tc-light-blue-110: #0076a5;
+$tc-light-blue-100: #15acec;
+$tc-light-blue-70: #63c4f1;
+$tc-light-blue-30: #bce6f9;
 $tc-light-blue-10: #e9f6fc;
 
 /* Warm Orange - data science color code. */
-$tc-orange-110: #f26500;
-$tc-orange-100: #fb7d22;
-$tc-orange-70: #fda464;
-$tc-orange-30: #fee3d0;
+$tc-orange-110: #ba4c00;
+$tc-orange-100: #fd7d00;
+$tc-orange-70: #ffa45d;
+$tc-orange-30: #ffe3cf;
 $tc-orange-10: #fff0eb;
 
 /* Red - used for warnings/ */
 $tc-red-110: #ea1900;
-$tc-red-100: #f22f24;
-$tc-red-70: #ff5b52;
-$tc-red-30: #ffd4d1;
+$tc-red-100: #f52c14;
+$tc-red-70: #ff5a4c;
+$tc-red-30: #ffd4d0;
 $tc-red-10: #fff4f4;
 
 /* Yellow. */
@@ -74,25 +75,25 @@ $tc-yellow-10: #fffde5;
 
 /* Greens - development color code. */
 $tc-green-120: #328732;
-$tc-green-110: #55b000;
-$tc-green-100: #60c700;
-$tc-green-70: #96d957;
-$tc-green-30: #cfefb2;
-$tc-green-10: #effae5;
+$tc-green-110: #258205;
+$tc-green-100: #5cc900;
+$tc-green-70: #94db4e;
+$tc-green-30: #cef0af;
+$tc-green-10: #effae4;
 
 /* Purples. */
-$tc-purple-110: #9050a3;
-$tc-purple-100: #9050a3;
-$tc-purple-70: #b47dd6;
-$tc-purple-30: #e2c7f2;
+$tc-purple-110: #753488;
+$tc-purple-100: #914da5;
+$tc-purple-70: #b57ad8;
+$tc-purple-30: #e2c6f3;
 $tc-purple-10: #f8f2fb;
 
 /* 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-130: #9a6d00;
 $tc-gold-110: #c99014;
 $tc-gold-100: #ffd84d;
 
@@ -102,13 +103,13 @@ $tc-silver-100: #d1d0cf;
 
 $tc-bronze-130: #733d17;
 $tc-bronze-110: #854e29;
-$tc-bronze-100: #d98d64;
+$tc-bronze-100: #d98f64;
 
 /* Pastel colors, used for levels. */
-$tc-pastel-green: #25c089;
-$tc-pastel-blue: #666eff;
-$tc-pastel-yellow: #fcb816;
-$tc-pastel-crimson: #e6175c;
+$tc-pastel-green: #12c188;
+$tc-pastel-blue: #5656f4;
+$tc-pastel-yellow: #feb900;
+$tc-pastel-crimson: #e90c5a;
 
 /* Color aliases. */