Qa accessibility

.circleci/config.yml

@@ -30,7 +30,7 @@ jobs:
       - attach_workspace:
           at: .
       - run: echo "//registry.npmjs.org/:_authToken=$NPM_TOKEN" >> ~/.npmrc
-      - run: npm publish
+      - run: npm publish --tag=qa-accessibility
 
 workflows:
   version: 2

package.json

@@ -32,7 +32,7 @@
     "lint:scss": "./node_modules/.bin/stylelint **/*.scss --syntax scss",
     "test": "npm run lint && npm run jest"
   },
-  "version": "0.5.10",
+  "version": "1.0.12",
   "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/event/data-science.scss

@@ -5,14 +5,14 @@
 @import "../default";
 
 .button {
-  color: $tc-orange;
+  color: $tc-orange-110;
   background-color: $tc-orange-10;
 
   &:active,
   &:focus,
   &:hover {
     color: $tc-orange;
-    background-color: $tc-orange-10;
+    background-color: $tc-orange-30;
   }
 
   &:visited {

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

@@ -5,14 +5,14 @@
 @import "../default";
 
 .button {
-  color: $tc-light-blue;
+  color: $tc-dark-blue-110;
   background-color: $tc-light-blue-10;
 
   &:active,
   &:focus,
   &:hover {
     color: $tc-light-blue;
-    background-color: $tc-light-blue-10;
+    background-color: $tc-light-blue-30;
   }
 
   &:visited {

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

@@ -5,14 +5,14 @@
 @import "../default";
 
 .button {
-  color: $tc-green;
+  color: $tc-green-110;
   background-color: $tc-green-10;
 
   &:active,
   &:focus,
   &:hover {
     color: $tc-green;
-    background-color: $tc-green-10;
+    background-color: $tc-green-30;
   }
 
   &:visited {

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

@@ -5,7 +5,7 @@
 @import "../default";
 
 .button {
-  background-color: $tc-orange;
+  background-color: $tc-orange-110;
   color: $tc-white;
 
   &:active,

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

@@ -5,7 +5,7 @@
 @import "../default";
 
 .button {
-  background-color: $tc-light-blue;
+  background-color: $tc-light-blue-110;
   color: $tc-white;
 
   &:active,

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

@@ -5,7 +5,7 @@
 @import "../default";
 
 .button {
-  background-color: $tc-green;
+  background-color: $tc-green-110;
   color: $tc-white;
 
   &:active,

src/styles/_mixins/variables.scss

@@ -24,6 +24,7 @@ $tc-black: #151516;
 $tc-gray-90: #2a2a2b;
 $tc-gray-80: #404041;
 $tc-gray-70: #555;
+$tc-gray-75: #006dea;
 $tc-gray-60: #6b6b6b;
 $tc-gray-50: #808080;
 $tc-gray-40: #959596;
@@ -36,31 +37,32 @@ $tc-gray-neutral-light: #fafafb;
 $tc-white: #fff;
 
 /* Accents & Shades. */
-$tc-dark-blue-110: #006dea;
+$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. */
@@ -71,25 +73,26 @@ $tc-yellow-30: #fff8ca;
 $tc-yellow-10: #fffde5;
 
 /* Greens - development color code. */
-$tc-green-110: #55b000;
-$tc-green-100: #60c700;
-$tc-green-70: #96d957;
-$tc-green-30: #cfefb2;
-$tc-green-10: #effae5;
+$tc-green-120: #258205;
+$tc-green-110: #328732;
+$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;
 
@@ -99,13 +102,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. */