Replace some left over constant colors with variables

client/web/workflow/src/components/ExpressionTable.vue

@@ -167,11 +167,7 @@ export default {
 
 <style lang="scss" scoped>
 .header {
-  background-color: #d8dfe3;
-
-  &:hover {
-    background-color: #c9d3d8;
-  }
+  background-color: var(--light);
 
   label {
     margin: 0;
@@ -183,7 +179,7 @@ export default {
 }
 
 .expr-item:hover {
-  background-color: #F3F3F5;
+  background-color: var(--light);
 
   .grab > * {
     color: var(--secondary) !important;

client/web/workflow/src/views/Workflow/List.vue

@@ -127,6 +127,7 @@
       <template #enabled="{ item: w }">
         <font-awesome-icon
           :icon="['fas', w.enabled ? 'check' : 'times']"
+          :class="w.enabled ? 'text-primary' : 'text-extra-light'"
         />
       </template>
 

lib/vue/src/components/input/CInputDateTime/index.vue

@@ -121,7 +121,7 @@ export default {
 
   label {
     font-family: var(--font-regular);
-    color: #495057 !important;
+    color: var(--black) !important;
   }
 
   .b-form-datepicker, .b-form-timepicker {

lib/vue/src/components/permissions/form/Access.vue

@@ -66,7 +66,7 @@ export default {
 <style lang="scss">
 .access {
   .btn {
-    background-color: #F3F5F7;
+    background-color: var(--light);
     border: none;
   }
 

server/assets/src/scss/main/18201141_custom_webapp.scss

@@ -187,8 +187,8 @@ fieldset.required {
 
   // Code
   pre {
-    background-color: #23241f;
-    color: #f8f8f2;
+    background-color: var(--black);
+    color: var(--white);
     overflow: visible;
     white-space: pre-wrap;
     margin-bottom: 5px;