Updated to gulp 4.x and removed use of chroma-sass for colours, it is not updated anymore.

sass/components/box/_box.scss

@@ -20,7 +20,7 @@
 .box,
 %box {
   @include margin-bottom(1);
-  border: 5px solid color(border);
+  border: 5px solid $border;
   padding: 1em;
 
   // Sass compiles this to the selector: .box__title, %box__title {}
@@ -44,7 +44,7 @@
   &:hover,
   &.is-focus,
   &--is-focus {
-    border-color: color(text);
+    border-color: $text;
   }
 
   // Sass compiles this to the selector: .box--highlight, %box--highlight {}
@@ -52,6 +52,6 @@
   // the "highlight" is a _modifier_, creating a new variation of the standard
   // "box" component.
   &--highlight {
-    border-color: color(link);
+    border-color: $link;
   }
 }

sass/components/button/_button.scss

@@ -44,7 +44,7 @@ button,
   text-decoration: none;
   // Improve usability and consistency of cursor style between image-type `input` and others.
   cursor: pointer;
-  color: color(button);
+  color: $button;
   text-align: center;
   background-image: linear-gradient(#f6f6f6, #e2e2e2);
   border: 1px solid #e4e4e4;
@@ -72,14 +72,14 @@ button,
   &:active {
     // Override any link underlines and color changes.
     text-decoration: none;
-    color: color(button);
+    color: $button;
   }
 
   &:active {
     border-color: #555;
-    text-shadow: color(button) 0 -1px 0;
-    background: color(grey-dark);
-    color: color(text-bg);
+    text-shadow: $button 0 -1px 0;
+    background: $grey-dark;
+    color: $text-bg;
   }
 }
 
@@ -96,9 +96,9 @@ button,
 %button--disabled[disabled] {
   // Re-set default cursor for disabled elements.
   cursor: default;
-  color: color(button-disabled);
-  background-color: color(grey-extra-light);
-  border-color: color(grey-extra-light);
+  color: $button-disabled;
+  background-color: $grey-extra-light;
+  border-color: $grey-extra-light;
   background-image: none;
   text-shadow: none;
 
@@ -106,6 +106,6 @@ button,
   &:focus,
   &:active {
     // Override any link underlines and color changes.
-    color: color(button-disabled);
+    color: $button-disabled;
   }
 }

sass/components/divider/_divider.scss

@@ -6,7 +6,7 @@
 %divider {
   @include margin(1 0);
   border: 0;
-  border-top: 1px solid color(border);
+  border-top: 1px solid $border;
 
   // If used as a container, add a top margin to the first child.
   > :first-child {

sass/components/header/_header.scss

@@ -34,7 +34,7 @@
   &__site-link {
     &:link,
     &:visited {
-      color: color(text);
+      color: $text;
       text-decoration: none;
     }
 

sass/components/highlight-mark/_highlight-mark.scss

@@ -6,7 +6,7 @@
 
 .highlight-mark,
 %highlight-mark {
-  color: color(mark-highlight);
+  color: $mark-highlight;
   // Remove background highlighting from <mark> in normalize.
   background-color: transparent;
 }

sass/components/inverted-box/_inverted-box.scss

@@ -3,13 +3,13 @@
 .inverted-box,
 %inverted-box {
   @include padding(.5);
-  background: color(brand);
-  color: color(text-bg);
+  background: $brand;
+  color: $text-bg;
   border-radius: 5px;
 
   :link,
   :visited {
-    color: color(text-bg);
+    color: $text-bg;
   }
 
   p,

sass/components/watermark/_watermark.scss

@@ -10,7 +10,7 @@
   overflow: visible;
   // Remove background highlighting from <mark> in normalize.
   background-color: transparent;
-  color: color(watermark);
+  color: $watermark;
   font-size: 75px;
   line-height: 1;
   text-align: center;

sass/components/wireframe/_wireframe.scss

@@ -12,7 +12,7 @@ $with-wireframes: false !default;
 
   .wireframe,
   %wireframe {
-    outline: 1px solid color(border);
+    outline: 1px solid $border;
   }
 
   //