fix: update variable colors with hex colors (#28604)

lms/static/sass/views/_track_selection.scss

@@ -8,7 +8,7 @@
 }
 
 .verification-process h3 {
-    color: $gray-700;
+    color: #454545;
     font-size: 1.4rem;
     text-align: center;
     font-weight: 700;
@@ -21,7 +21,7 @@
 
 .track-selection-audit {
     background-color: white;
-    border: 1px solid $gray-500;
+    border: 1px solid #707070;
     position: relative;
     float: right;
 }
@@ -35,15 +35,15 @@
 }
 
 .certificate-container {
-    background-color: $info-100;
-    border: 1px solid $gray-500;
+    background-color: #EFF8FA;
+    border: 1px solid #707070;
     height: auto;
     position: relative;
 }
 
 .trophy-icon {
     padding: 10px;
-    color: $info-100;
+    color: #EFF8FA;
     position: absolute;
 }
 
@@ -52,7 +52,7 @@
 }
 
 .upgrade-button button {
-    background: $primary-500;
+    background: #00262B;
     width: 90%;
     height: 40px;
     font-size: 16px;
@@ -63,7 +63,7 @@
 }
 
 #track_selection_upgrade:hover {
-    background: $primary-300;
+    background: #2D494E;
     border-color: transparent;
     color: #fff;
 }
@@ -73,27 +73,27 @@
 }
 
 .audit-button button {
-    color: $primary-500;
+    color: #00262B;
     width: 90%;
     height: 40px;
     font-size: 16px;
     box-shadow: none;
     border-radius: 0px;
-    border-color: $light-300;
+    border-color: #F2F0EF;
     background: white;
     position: relative;
     margin-bottom: 1.5rem;
 }
 
 #track_selection_audit:hover {
-    background: $primary-500;
-    border-color: $primary-500;
+    background: #00262B;
+    border-color: #00262B;
     color: #fff;
     border-radius: 0px;
 }
 
 .certificate-container-bottom {
-    border: 1px solid $gray-500;
+    border: 1px solid #707070;
     display: flex;
     margin-top: -1px;
     padding: 18px;
@@ -114,11 +114,11 @@
 }
 
 a:not(.btn), a:visited:not(.btn) {
-    color: $gray-700;
+    color: #454545;
 }
 
 .choice-bullets li {
-    color: $gray-700;
+    color: #454545;
 }
 
 .choice-title {
@@ -129,7 +129,7 @@ a:not(.btn), a:visited:not(.btn) {
 .choice-title h4 {
     text-align: center;
     font-weight: 700;
-    color: $gray-700;
+    color: #454545;
     line-height: 28px;
     font-size: 22px;
 }
@@ -140,11 +140,11 @@ a:not(.btn), a:visited:not(.btn) {
     line-height: 20px;
     float: right;
     margin: 0.75rem;
-    color: $gray-700;
+    color: #454545;
 }
 
 .triangle-overlay {
-    border-color: $primary-700 transparent transparent $primary-700;
+    border-color: #002121 transparent transparent #002121;
     border-style: solid;
     border-width: 45px;
     height: 0;
@@ -165,12 +165,12 @@ a:not(.btn), a:visited:not(.btn) {
 .collapsible {
     display: none;
     text-decoration: underline;
-    color: $primary-500;
+    color: #00262B;
     cursor: pointer;
 }
 
 .popover-icon {
-    color: $primary-500;
+    color: #00262B;
     position: relative;
 }
 
@@ -178,7 +178,7 @@ a:not(.btn), a:visited:not(.btn) {
     visibility: hidden;
     width: 132px;
     background-color: #fff;
-    color: $gray-700;
+    color: #454545;
     border: 1px solid #B9BABE;
     border-radius: 6px;
     text-align: left;