Docs - colors

src/components/Badge/styles.scss

@@ -4,40 +4,42 @@
   align-self: flex-start;
   border-radius: 4px;
   border: none;
-  color: $white;
+  color: $black;
   display: inline;
   font-size: 13px;
   font-weight: 600;
   padding: 0 14px;
   padding: 4px 8px;
   text-transform: uppercase;
+  text-decoration: none;
 
   &.pink {
-    background-color: $pink-bg;
+    background-color: $badge-bg-pink;
   }
 
   &.blue {
-    background-color: $blue-bg;
+    background-color: $badge-bg-blue;
   }
 
   &.dark-blue {
-    background-color: $blue-dark;
+    background-color: $badge-bg-navy;
+    color: $white;
   }
 
   &.yellow {
-    background-color: $yellow-bg;
+    background-color: $badge-bg-yellow;
     border: none;
   }
 
   &.green {
-    background-color: $green-bg-dark;
+    background-color: $badge-bg-teal-dark;
   }
 
   &.light-green {
-    background-color: $green-bg;
+    background-color: $badge-bg-teal;
   }
 
   &.red {
-    background-color: $red-bg;
+    background-color: $badge-bg-red;
   }
 }

src/components/BottomCallout/styles.scss

@@ -2,7 +2,7 @@
 @import '../../styles/variables';
 
 .BottomCallout {
-  background-color: $blue-dark;
+  background-color: $navy-dark;
   padding: 24px 0;
   color: $white;
   display: flex;

src/components/Button/index.js

@@ -5,7 +5,6 @@ import './styles.scss';
 const btnTypes = {
   primary: 'is-primary', // uses bulma
   secondary: 'is-white secondary', // bulma + custom css
-  blue: 'blue',
 };
 
 const btnSizes = {

src/components/Button/styles.scss

@@ -12,11 +12,11 @@
   // This class is added like so:
   // <button type="secondary"
   &.secondary {
-    color: $magenta !important;
+    color: $pink-darker !important;
   }
 
   &.blue {
-    background: $blue-2;
+    background: $blue;
     box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.15);
     color: $white;
     border: none;

src/components/Code/styles.scss

@@ -40,7 +40,7 @@
   }
   &__copy {
     &-tooltip {
-      background: $tooltip-bg;
+      background: $grey-darkest;
       border-radius: 2px;
       color: $white !important;
       font-size: 12px;
@@ -66,7 +66,7 @@
         margin-left: -5px;
         border-width: 5px;
         border-style: solid;
-        border-color: $tooltip-bg transparent transparent transparent;
+        border-color: $grey-darkest transparent transparent transparent;
       }
     }
     &-btn {

src/components/Footer/styles.scss

@@ -2,7 +2,7 @@
 @import '../../styles/variables';
 
 .Footer {
-  border-top: 1px solid $grey-4;
+  border-top: 1px solid $grey-3;
   position: relative;
   background: $white;
   .footer-box {
@@ -41,19 +41,20 @@
   }
 
   .link-group-header {
-    color: $green-link;
+    color: $navy-dark;
     font-weight: 700;
   }
 
   .link {
     font-family: $font-sans-serif;
     font-weight: 400;
     font-size: 16px;
-    color: $blue-black;
+    color: $navy-black;
     letter-spacing: 0;
     line-height: 30px;
+    text-decoration: none;
     &:hover {
-      color: $magenta;
+      color: $pink-darker;
     }
   }
 

src/components/GridFeature/styles.scss

@@ -10,7 +10,7 @@
     }
 
     &.grey {
-      border-color: $grey-4;
+      border-color: $grey-3;
     }
 
     @media (max-width: $tablet) {

src/components/HeadingsTableOfContents/styles.scss

@@ -1,32 +1,35 @@
 @import '../../styles/colors';
 
 .toc-headings {
-  border-left: 2px solid $magenta-border;
+  border-left: 2px solid $pink-dark;
   list-style-type: none;
   margin-bottom: 24px;
   max-height: calc(100vh - 132px);
   // nav height 60px + padding 48px + 24px
   overflow: auto;
   position: sticky;
   top: 108px; // nav height 60px + padding 48px
+  a {
+    text-decoration: none;
+  }
   // all levels
   &__list {
     list-style-type: none;
     li {
       a {
         background: transparent;
-        color: $blue-black;
+        color: $navy-black;
         display: block;
         font-size: 12px;
         font-weight: bold;
         padding: 5px 0;
         line-height: 18px;
         &:hover {
-          background: $grey-bg-hover-light;
+          background: $grey-1;
         }
         &.active {
-          color: $magenta;
-          background: $pink-light-bg;
+          color: $pink-darker;
+          background: $pink-light;
         }
       }
     }

src/components/Icon/styles.scss

@@ -6,10 +6,10 @@
 // Icon grouping styles.
 .Icons {
   .core {
-    color: $blue-2;
-    text-transform: uppercase;
+    color: $blue-links;
+    font-size: 14px;
     font-weight: 700;
     padding: 4px 0;
-    font-size: 14px;
+    text-transform: uppercase;
   }
 }

src/components/MarketingSection/styles.scss

@@ -10,7 +10,7 @@
 
   &.consulting {
     padding: 0;
-    background-color: $grey-5;
+    background-color: $grey-2;
 
     @media (max-width: $tablet) {
       padding: 32px 0;

src/components/NavBar/MegaMenu/styles.scss

@@ -2,7 +2,7 @@
 @import '../../../styles/colors';
 
 .MegaMenu {
-  border-bottom: 3px solid $grey-border;
+  border-bottom: 3px solid $grey-4;
   box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.08);
   display: flex;
   height: auto;
@@ -77,20 +77,21 @@
 
   @include breakpoint(navmenu-up) {
     .menu-section-links {
-      color: $blue-black;
+      color: $navy-black;
       list-style: disc;
       padding: 0.5rem 0 0 1.5rem;
     }
   }
 
   .menu-section-link {
-    color: $blue-black;
+    color: $navy-black;
     display: flex;
     font-size: 1rem;
     padding: 0.25rem 0;
+    text-decoration: none;
     &:hover,
     &.active {
-      color: $magenta;
+      color: $pink-darker;
     }
   }
 
@@ -105,7 +106,7 @@
   // explore heading and text; desktop only
   .explore-text {
     min-width: 345px;
-    background: $grey;
+    background: $grey-2;
 
     .heading-text {
       font-size: 18px;
@@ -126,7 +127,7 @@
     .chevron-link {
       padding-top: 12px;
       a {
-        color: $magenta !important;
+        color: $pink-darker !important;
       }
       font-weight: 700;
 
@@ -156,7 +157,7 @@
       padding: 0px 0 24px 0;
       border: 0;
       flex-direction: column;
-      background: $grey;
+      background: $grey-2;
     }
 
     .menu-section {
@@ -207,7 +208,7 @@
       padding: 0 0 12px 0;
       // flex: 1;
       &.active {
-        color: $magenta;
+        color: $pink-darker;
       }
     }
   }

src/components/NavBar/styles.scss

@@ -16,7 +16,7 @@
   }
 
   .active-item {
-    color: $magenta;
+    color: $pink-darker;
     background-color: '$grey';
   }
 
@@ -85,6 +85,7 @@
   }
 
   .nav-link {
+    text-decoration: none;
     @include breakpoint(navmenu-up) {
       margin-right: 8px;
       display: flex;
@@ -115,7 +116,7 @@
     }
 
     &.open {
-      background: $grey;
+      background: $grey-2;
     }
   }
 

src/components/NoteBox/styles.scss

@@ -1,7 +1,7 @@
 @import '../../styles/colors';
 
 .note-box {
-  background-color: $blue-dark;
+  background-color: $navy-dark;
   padding: 17px 19px 1px 22px;
   border-radius: 5px;
   * {
@@ -11,11 +11,11 @@
     &:hover,
     &:active,
     &:focus {
-      color: $blue-bg !important;
+      color: $blue-light !important;
     }
   }
   code {
-    background: $blue-3 !important;
+    background: $navy-black !important;
   }
   &__title {
     display: flex;

src/components/ProductFeature/styles.scss

@@ -23,7 +23,7 @@
     .header {
       font-family: $font-sans-serif;
       font-size: 30px;
-      color: $blue-darker;
+      color: $navy-black;
       letter-spacing: 0;
       line-height: 37px;
       padding: 16px 0 24px;
@@ -32,7 +32,7 @@
     .details {
       font-family: $font-sans-serif;
       font-size: 18px;
-      color: $blue-darker;
+      color: $navy-black;
       letter-spacing: 0;
       line-height: 30px;
       max-width: 350px;

src/components/ProductHero/styles.scss

@@ -41,7 +41,7 @@
   .card-img-box {
     justify-content: center;
     display: flex;
-    background-color: $grey;
+    background-color: $grey-2;
     height: 280px;
     border-top-right-radius: 5px;
 
@@ -61,7 +61,7 @@
   .card-text {
     font-family: $font-sans-serif;
     font-size: 24px;
-    color: $blue-darker;
+    color: $navy-black;
     letter-spacing: 0;
     line-height: 40px;
     text-align: left;
@@ -89,7 +89,7 @@
     font-family: $font-sans-serif;
     font-weight: 700;
     font-size: 56px;
-    color: $white;
+    color: $navy-black;
     letter-spacing: 0;
     line-height: 70px;
 
@@ -103,7 +103,7 @@
     margin: 0 auto;
     font-family: $font-sans-serif;
     font-size: 30px;
-    color: $white;
+    color: $navy-black;
     letter-spacing: 0;
     text-align: center;
     line-height: 45px;