Fix for #1768 - Use of secondary color in certain form element (#1796)

* Fix - Use of secondary color in certain form element

* Replaced Variable definition across all instances

src/scss/_variables.scss

@@ -515,7 +515,7 @@ $alert-border-color: var(--#{$prefix}border-color-translucent) !default;
 $alert-shadow: rgba($dark, 0.04) 0 2px 4px 0 !default;
 
 // Breadcrumb
-$breadcrumb-divider-color: var(--#{$prefix}secondary) !default;
+$breadcrumb-divider-color: var(--#{$prefix}gray-500) !default;
 $breadcrumb-link-color: var(--#{$prefix}link-color) !default;
 $breadcrumb-active-color: inherit !default;
 $breadcrumb-active-font-weight: var(--#{$prefix}font-weight-bold) !default;
@@ -534,7 +534,7 @@ $badge-font-weight: var(--#{$prefix}font-weight-medium) !default;
 $badge-padding-y: 0.25em !default;
 $badge-padding-x: 0.5em !default;
 $badge-empty-size: 0.5rem !default;
-$badge-color: var(--#{$prefix}secondary) !default;
+$badge-color: var(--#{$prefix}gray-500) !default;
 $badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
 
 // Buttons
@@ -656,7 +656,7 @@ $loader-size: 2.5rem !default;
 
 // Lists
 $list-group-header-bg: var(--#{$prefix}bg-surface-tertiary) !default;
-$list-group-header-color: var(--#{$prefix}secondary) !default;
+$list-group-header-color: var(--#{$prefix}gray-500) !default;
 
 $list-group-border-color: var(--#{$prefix}border-color) !default;
 $list-group-item-padding-y: $card-cap-padding-y !default;
@@ -695,7 +695,7 @@ $modal-sm: 380px !default;
 // Nav
 $nav-link-padding-y: 0.5rem !default;
 $nav-link-padding-x: 0.75rem !default;
-$nav-link-color: var(--#{$prefix}secondary) !default;
+$nav-link-color: var(--#{$prefix}gray-500) !default;
 $nav-link-disabled-color: var(--#{$prefix}disabled-color) !default;
 $nav-link-icon-size: $icon-size !default;
 $nav-link-icon-color: var(--#{$prefix}icon-color) !default;
@@ -773,13 +773,13 @@ $popover-body-color: inherit !default;
 $footer-padding-y: 2rem !default;
 $footer-bg: $white !default;
 $footer-border-color: var(--#{$prefix}border-color) !default;
-$footer-color: var(--#{$prefix}secondary) !default;
+$footer-color: var(--#{$prefix}gray-500) !default;
 
 // Pagination
 $pagination-border-width: 0 !default;
 $pagination-padding-y: 0.25rem !default;
 $pagination-padding-x: 0.25rem !default;
-$pagination-color: var(--#{$prefix}secondary) !default;
+$pagination-color: var(--#{$prefix}gray-500) !default;
 $pagination-bg: transparent !default;
 $pagination-disabled-bg: transparent !default;
 $pagination-disabled-color: var(--#{$prefix}disabled-color) !default;
@@ -815,7 +815,7 @@ $table-border-color: var(--#{$prefix}border-color-translucent) !default;
 $table-th-border-color: var(--#{$prefix}border-color-translucent) !default;
 $table-th-padding-x: $table-cell-padding-x !default;
 $table-th-padding-y: 0.5rem !default;
-$table-th-color: var(--#{$prefix}secondary) !default;
+$table-th-color: var(--#{$prefix}gray-500) !default;
 $table-th-bg: var(--#{$prefix}bg-surface-tertiary) !default;
 $table-striped-order: even !default;
 $table-striped-bg: var(--#{$prefix}bg-surface-tertiary) !default;
@@ -827,7 +827,7 @@ $table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org
 
 // Toasts
 $toast-border-color: var(--#{$prefix}border-color) !default;
-$toast-header-color: var(--#{$prefix}secondary) !default;
+$toast-header-color: var(--#{$prefix}gray-500) !default;
 
 // Tracking
 $tracking-height: 1.5rem !default;
@@ -856,7 +856,7 @@ $input-border-color-translucent: var(--#{$prefix}border-color-translucent) !defa
 $input-placeholder-color: $text-secondary-light !default;
 
 $input-group-addon-bg: var(--#{$prefix}bg-surface-secondary) !default;
-$input-group-addon-color: var(--#{$prefix}secondary) !default;
+$input-group-addon-color: var(--#{$prefix}gray-500) !default;
 
 $input-border-radius: var(--#{$prefix}border-radius) !default;
 
@@ -913,6 +913,8 @@ $form-feedback-icon-invalid: str-replace(
 $form-label-font-size: $h4-font-size !default;
 $form-label-font-weight: var(--#{$prefix}font-weight-medium) !default;
 
+$form-secondary-color: var(--#{$prefix}gray-500) !default;
+
 // Legend
 $legend-bg: var(--#{$prefix}border-color) !default;
 $legend-size: 0.75em !default;

src/scss/ui/_forms.scss

@@ -24,7 +24,7 @@ Form label
 .form-label-description {
   float: right;
   font-weight: var(--#{$prefix}font-weight-normal);
-  color: var(--#{$prefix}secondary);
+  color: $form-secondary-color;
 }
 
 /**
@@ -32,7 +32,7 @@ Form hint
  */
 .form-hint {
   display: block;
-  color: var(--#{$prefix}secondary);
+  color: $form-secondary-color;
 
   &:last-child {
     margin-bottom: 0;
@@ -50,6 +50,7 @@ Form hint
   .form-control + &,
   .form-select + & {
     margin-top: .5rem;
+    color: $form-secondary-color;
   }
 }
 
@@ -74,7 +75,7 @@ Form control
 
   &:disabled,
   &.disabled {
-    color: var(--#{$prefix}secondary);
+    color: $form-secondary-color;
     user-select: none;
   }
 
@@ -140,7 +141,7 @@ Form help
   width: 1.125rem;
   height: 1.125rem;
   font-size: .75rem;
-  color: var(--#{$prefix}secondary);
+  color: $form-secondary-color;
   text-align: center;
   text-decoration: none;
   cursor: pointer;