Develop

.circleci/config.yml

@@ -48,4 +48,4 @@ workflows:
             tags:
               only: /v[0-9]+(\.[0-9]+)*/
           requires:
-            - test
+            - test

__tests__/__snapshots__/index.js.snap

@@ -15,6 +15,8 @@ Object {
   "GhostButton": [Function],
   "Modal": [Function],
   "PrimaryButton": [Function],
+  "QATrackEventTag": [Function],
+  "QATrackTag": [Function],
   "SecondaryButton": [Function],
   "Tag": [Function],
 }

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": "2.0.0",
   "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/event/qa.scss

@@ -0,0 +1,21 @@
+/**
+ * Event tag, colored with colors of qa track (purple).
+ */
+
+@import "../default";
+
+.button {
+  color: $tc-purple-120;
+  background-color: $tc-purple-20;
+
+  &:active,
+  &:focus,
+  &:hover {
+    color: $tc-purple;
+    background-color: $tc-purple-30;
+  }
+
+  &:visited {
+    color: $tc-purple;
+  }
+}

src/shared/components/tags/index.jsx

@@ -6,10 +6,12 @@ import defaultTag from './default.scss';
 import dataScienceTrackTag from './primary/data-science.scss';
 import designTrackTag from './primary/design.scss';
 import developmentTrackTag from './primary/development.scss';
+import qaTrackTag from './primary/qa.scss';
 
 import dataScienceTrackEventTag from './event/data-science.scss';
 import designTrackEventTag from './event/design.scss';
 import developmentTrackEventTag from './event/development.scss';
+import qaTrackEventTag from './event/qa.scss';
 
 export const Tag = themr('Tag', defaultTag)(GenericButton);
 
@@ -21,3 +23,6 @@ export const DesignTrackEventTag = themr('DesignTrackEventTag', designTrackEvent
 
 export const DevelopmentTrackTag = themr('DevelopmentTrackTag', developmentTrackTag)(GenericButton);
 export const DevelopmentTrackEventTag = themr('DevelopmentTrackEventTag', developmentTrackEventTag)(GenericButton);
+
+export const QATrackTag = themr('QATrackTag', qaTrackTag)(GenericButton);
+export const QATrackEventTag = themr('QATrackEventTag', qaTrackEventTag)(GenericButton);

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/shared/components/tags/primary/qa.scss

@@ -0,0 +1,21 @@
+/**
+ * Primary tag, colored with colors of qa track (purple).
+ */
+
+@import "../default";
+
+.button {
+  background-color: $tc-purple-120;
+  color: $tc-white;
+
+  &:active,
+  &:focus,
+  &:hover {
+    color: $tc-white;
+    background-color: $tc-purple;
+  }
+
+  &:visited {
+    color: $tc-white;
+  }
+}

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,28 @@ $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-120: #8231a9;
+$tc-purple-110: #753488;
+$tc-purple-100: #914da5;
+$tc-purple-70: #b57ad8;
+$tc-purple-30: #e2c6f3;
+$tc-purple-20: #e6cff1;
 $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 +104,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. */