Update Pattern Library pages to use new color scheme

TNL-5135

cms/static/sass/programs/_components.scss

@@ -42,7 +42,7 @@
     &:focus,
     &.is-focused {
       background: shade($success, 33%);
-      color: $btn-default-focus-color;
+      color: palette(primary, accent);
     }
 
     // STATE: is pressed or active
@@ -94,6 +94,6 @@
 
 .form-group {
   &.bg-white {
-    background-color: palette(grayscale, white);
+    background-color: $white;
   }
 }

cms/static/sass/programs/_modals.scss

@@ -8,7 +8,7 @@
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: palette(grayscale-cool, x-dark);
+  background-color: palette(grayscale, dark);
   opacity: 0.5;
   z-index: 1000;
 }
@@ -25,15 +25,15 @@
 .modal-content {
   margin: 5px;
   padding: 20px;
-  background-color: palette(grayscale-cool, x-dark);
+  background-color: palette(grayscale, dark);
   border-top: 5px solid palette(warning, base);
 
   .copy {
-    color: palette(grayscale, white);
+    color: $white;
   }
 
   .emphasized {
-    color: palette(grayscale, white-t);
+    color: $white;
     font-weight: font-weight(bold);
   }
 }
@@ -42,7 +42,7 @@
   padding: 10px 20px;
 
   .btn {
-    color: palette(grayscale, white-t);
+    color: palette(grayscale, back);
   }
 
   .btn-brand {
@@ -52,8 +52,8 @@
     &:hover,
     &:focus,
     &:active {
-      background: palette(warning, dark);
-      border-color: palette(warning, dark);;
+      background: palette(warning, back);
+      border-color: palette(warning, accent);
     }
   }
 
@@ -63,7 +63,7 @@
     &:hover,
     &:focus,
     &:active {
-      border-color: palette(grayscale-cool, light)
+      border-color: palette(grayscale, back)
     }
   }
 }