Issue 2632 color variables

src/components/Feed/NewPostMobile.scss

@@ -22,7 +22,7 @@
   display: flex;
   justify-content: flex-end;
   > svg {
-      fill: #FAFAFB;
+      fill: $tc-gray-neutral-light;
   }
 }
 

src/components/Home/Home.scss

@@ -110,7 +110,7 @@
 
       p {
         @include roboto;
-        font-size: $tc-body-large;
+        font-size: $tc-body-lg;
         color: $tc-gray-70;
         letter-spacing: 0;
         line-height: $base-unit * 6;

src/components/LinksMenu/LinksMenu.scss

@@ -58,7 +58,7 @@
         margin-left: auto;
         button {
           padding: 0;
-          background: rgba(0, 0, 0, 0);
+          background: transparent;
         }
       }
       a {

src/components/Modal/Modal.scss

@@ -15,7 +15,6 @@
       height: 15px;
       top: $base-unit*3;
       right: $base-unit*3;
-      background-size: $tc-heading-extra-small;
     }
 
     .modal-title {

src/components/PanelProject/PanelProject.scss

@@ -7,7 +7,7 @@
 
     .project-heading {
       @include roboto-medium;
-      font-size: $tc-heading;
+      font-size: $tc-heading-sm;
       color: $tc-black;
       line-height: $base-unit*6;
       .text-muted {

src/components/Select/Select.scss

@@ -54,15 +54,15 @@
   }
 
   .Select-item-icon {
-    color:rgb(153, 153, 153);
-    border-right-color: rgb(220, 220, 224);
+    color:$tc-gray-40;
+    border-right-color: $tc-gray-10;
     padding: 0 5px 1px;
 
     &:active,
     &:focus,
     &:hover {
         background-color: transparent;
-        color: rgb(208, 2, 27);
+        color: $tc-red-110;
     }
   }
 

src/components/TeamManagement/TeamManagement.scss

@@ -1,12 +1,6 @@
 @import "~tc-ui/src/styles/tc-includes";
-// @import "../../styles/variables";
-// TODO where do we add these
 
 :global {
-  $tc-heading-extra-small: 14px;
-  $tc-body-small: 14px;
-  $tc-body-extra-small: 12px;
-
   @mixin icon($url) {
     background: url("../../assets/images/#{$url}") no-repeat;
   }
@@ -191,7 +185,6 @@
         position: absolute;
         top: $base-unit*3;
         right: $base-unit*3;
-        background-size: $tc-heading-extra-small;
         overflow: hidden;
       }
 
@@ -331,7 +324,7 @@
           margin: $base-unit*2 auto;
           @include roboto;
           color: $tc-gray-70;
-          font-size: $tc-body-small;
+          font-size: 14px;
           font-style: italic;
           border: 1px solid $tc-red-30;
           background: $tc-red-10;
@@ -376,7 +369,7 @@
           padding: 5px 0;
           text-align: center;
           @include roboto-medium;
-          font-size: $tc-body-extra-small;
+          font-size: $tc-label-sm;
           line-height: 18px;
           box-shadow: none;
           background-color: $tc-white;

src/components/TopBar/ProjectsToolBar.scss

@@ -2,11 +2,6 @@
 @import '~tc-ui/src/styles/tc-includes';
 
 :global {
-  // TODO: move to includes
-  $tc-rgba-10: rgba($tc-gray-80, 0.38);
-  $tc-rgba-20: rgba($tc-black, 0.17);
-  $tc-body-large: 20px;
-
   .ProjectsToolBar {
     margin: 0 auto;
     width: 100%;
@@ -242,7 +237,7 @@
 
         &.active {
           background: $tc-gray-80;
-          box-shadow: inset 0px 1px 3px 0px $tc-rgba-10;
+          box-shadow: inset 0px 1px 3px 0px $tc-gray-80;
 
           svg.icon-search-filter g {
             fill: $tc-white;
@@ -297,7 +292,7 @@
       }
 
       h2 {
-        font-size: $tc-body-large;
+        font-size: $tc-body-lg;
         color: $tc-black;
         white-space: nowrap;
 

src/projects/components/projectsCard/ProjectCardHeader.scss

@@ -23,7 +23,7 @@
 
           .project-name {
              @include roboto-medium;
-            font-size: $tc-heading-sm;
+            font-size: $tc-heading-xs;
             line-height: $base-unit * 4;
             color: $tc-black;
             word-break: break-all;

src/projects/create/components/ProjectSubmitted.scss

@@ -9,7 +9,7 @@
       width: 90%;
 
       .title {
-        color: #1E1E1F;
+        color: $tc-gray-100;
         font-size: 32px;
         font-weight: 300;
         line-height: 35px;
@@ -21,7 +21,7 @@
       }
 
       .sub-title {
-        color: #85807C;
+        color: $tc-gray-50;
         font-size: 12px;
         font-weight: 400;
         line-height: 20px;
@@ -30,7 +30,7 @@
       }
 
       .content {
-        color: #151516;
+        color: $tc-gray-100;
         font-size: 15px;
         font-weight: 400;
         margin-top: 50px;
@@ -43,7 +43,7 @@
       }
 
       .project-link-container {
-        background-color: #F1F0F0;
+        background-color: $tc-gray-neutral-light;
         border-radius: 6px;
         height: 60px;
         width: 100%;

src/projects/detail/ProjectDetail.scss

@@ -1,9 +1,6 @@
 @import '~tc-ui/src/styles/tc-includes';
 
 :global {
-  // FIXME: bad names for variables;
-  $gray-color: $tc-gray-50;
-  $title-color: $tc-gray-80;
   // FIXME: repeated mixin use! Use global
   @mixin flexBox {
     display: flex;
@@ -46,7 +43,7 @@
       @include flexWidth(2);
       border-radius: 4px;
       .title {
-        color: $title-color;
+        color: $tc-gray-80;
         @include roboto;
       }
       .right-area-item {
@@ -61,7 +58,7 @@
         .big-titles {
           @include roboto-light;
           font-size: 28px;
-          color: $gray-color;
+          color: $tc-gray-50;
           line-height: 30px;
           margin-bottom: 20px;
         }

src/projects/detail/components/EditProjectForm/EditProjectForm.scss

@@ -2,8 +2,6 @@
 
 :global {
   //TODO  Additional variables - need to find a home for these
-  $gray-color: $tc-gray-50;
-  $title-color: $tc-gray-80;
   $sideBarWidth: 280px;
   $sideBarMaxWidth: 360px;
 
@@ -188,14 +186,14 @@
 
         .optional {
           background: $tc-gray-10;
-          color: $gray-color;
+          color: $tc-gray-50;
         }
       }
 
       .gray-text {
         @include roboto;
         font-size: 15px;
-        color: $gray-color;
+        color: $tc-gray-50;
         line-height: 25px;
 
         strong {

src/projects/detail/components/FeatureSelector/FeaturePicker.scss

@@ -35,7 +35,7 @@
     }
 
     > h2 {
-      font-size: $tc-heading-md;
+      font-size: $tc-heading-sm;
       background-color: $tc-gray-neutral-light;
       color: $tc-black;
       padding: 3 * $base_unit;

src/projects/detail/components/ProjectSpecSidebar.scss

@@ -1,17 +1,8 @@
 @import '~tc-ui/src/styles/tc-includes';
 
 :global {
-  //TODO  Additional variables - need to find a home for these
-  // FIXME: remove non-standard variables! Deep nesting, non-standard line-height;
+  // FIXME: Deep nesting, non-standard line-height;
   // FIXME: non-standard units (use $base-unit and $corner-radius)
-  $gray-color: $tc-gray-50;
-  $title-color: $tc-gray-80;
-  $hr-color-base: $tc-black;
-  $hr-color-darker: lighten($hr-color-base, 13.5%);
-  $hr-color-dark: lighten($hr-color-base, 20%);
-  $hr-color: lighten($hr-color-base, 33.5%);
-  $hr-color-light: lighten($hr-color-base, 46.7%);
-  $hr-color-lighter: lighten($hr-color-base, 93.5%);
 
   .projectSpecSidebar {
     padding: 20px 0;
@@ -79,7 +70,7 @@
         display: block;
         height: 1px;
         border: 0;
-        border-top: 1px solid $hr-color-lighter;
+        border-top: 1px solid $tc-gray-30;
         margin: 1em 0;
         padding: 0;
 
@@ -92,7 +83,7 @@
         @include roboto;
         font-size: 13px;
         line-height: 25px;
-        color: $gray-color;
+        color: $tc-gray-50;
       }
     }
 

src/projects/detail/components/ReviewProjectButton/ReviewProjectButton.scss

@@ -1,7 +1,7 @@
 @import '~tc-ui/src/styles/tc-includes';
 
 .container {
-  background-color: #fff;
+  background-color: $tc-white;
   width: 100%;
 
   /* use global style here as this style was extracted from the old component */