refactor: add CSS Variables

Author: mrholek

scss/_dropdown.scss

@@ -163,14 +163,14 @@
   &:focus {
     color: var(--#{$variable-prefix}dropdown-link-hover-color, $dropdown-link-hover-color);
     text-decoration: if($link-hover-decoration == underline, none, null);
-    @include gradient-bg($dropdown-link-hover-bg); // TODO: vars
+    @include gradient-bg(var(--#{$variable-prefix}dropdown-link-hover-bg, $dropdown-link-hover-bg));
   }
 
   &.active,
   &:active {
     color: var(--#{$variable-prefix}dropdown-link-active-color, $dropdown-link-active-color);
     text-decoration: none;
-    @include gradient-bg($dropdown-link-active-bg);// TODO: vars
+    @include gradient-bg(var(--#{$variable-prefix}dropdown-link-active-bg, $dropdown-link-active-bg));
   }
 
   &.disabled,
@@ -220,12 +220,12 @@
   .dropdown-item {
     &:hover,
     &:focus {
-      @include gradient-bg($dropdown-dark-link-hover-bg); // TODO: vars
+      @include gradient-bg(var(--#{$variable-prefix}dropdown-dark-link-hover-bg, $dropdown-dark-link-hover-bg));
     }
 
     &.active,
     &:active {
-      @include gradient-bg($dropdown-dark-link-active-bg); // TODO: vars
+      @include gradient-bg(var(--#{$variable-prefix}dropdown-dark-link-active-bg, $dropdown-dark-link-active-bg));
     }
   }
 }

scss/_nav.scss

@@ -92,7 +92,7 @@
   .nav-link.active,
   .show > .nav-link {
     color: var(--#{$variable-prefix}nav-pills-link-active-color, $nav-pills-link-active-color);
-    @include gradient-bg($nav-pills-link-active-bg); // TODO: vars
+    @include gradient-bg(var(--#{$variable-prefix}nav-pills-link-active-bg, $nav-pills-link-active-bg));
   }
 }
 

scss/_pagination.scss

@@ -37,7 +37,7 @@
   &.active .page-link {
     z-index: 3;
     color: var(--#{$variable-prefix}pagination-active-color, $pagination-active-color);
-    @include gradient-bg($pagination-active-bg); // TODO: vars
+    @include gradient-bg(var(--#{$variable-prefix}pagination-active-bg, $pagination-active-bg));
     border-color: var(--#{$variable-prefix}pagination-active-border-color, $pagination-active-border-color);
   }
 

scss/forms/_form-control.scss

@@ -79,7 +79,7 @@
     margin: (-$input-padding-y) (-$input-padding-x);
     margin-inline-end: $input-padding-x;
     color: var(--#{$variable-prefix}form-file-button-color, $form-file-button-color);
-    @include gradient-bg($form-file-button-bg); // TODO: vars
+    @include gradient-bg(var(--#{$variable-prefix}form-file-button-bg, $form-file-button-bg));
     pointer-events: none;
     border-color: inherit;
     border-style: solid;
@@ -99,7 +99,7 @@
     margin: (-$input-padding-y) (-$input-padding-x);
     margin-inline-end: $input-padding-x;
     color: var(--#{$variable-prefix}form-file-button-color, $form-file-button-color);
-    @include gradient-bg($form-file-button-bg); // TODO: vars
+    @include gradient-bg(var(--#{$variable-prefix}form-file-button-bg, $form-file-button-bg));
     pointer-events: none;
     border-color: inherit;
     border-style: solid;

scss/forms/_form-range.scss

@@ -28,15 +28,15 @@
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
     margin-top: ($form-range-track-height - $form-range-thumb-height) / 2; // Webkit specific
-    @include gradient-bg($form-range-thumb-bg); // TODO: vars
+    @include gradient-bg(var(--#{$variable-prefix}form-range-thumb-bg, $form-range-thumb-bg));
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
     @include transition($form-range-thumb-transition);
     appearance: none;
 
     &:active {
-      @include gradient-bg($form-range-thumb-active-bg); // TODO: vars
+      @include gradient-bg(var(--#{$variable-prefix}form-range-thumb-active-bg, $form-range-thumb-active-bg));
     }
   }
 
@@ -54,15 +54,15 @@
   &::-moz-range-thumb {
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
-    @include gradient-bg($form-range-thumb-bg); // TODO: vars
+    @include gradient-bg(var(--#{$variable-prefix}form-range-thumb-bg, $form-range-thumb-bg));
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
     @include box-shadow($form-range-thumb-box-shadow);
     @include transition($form-range-thumb-transition);
     appearance: none;
 
     &:active {
-      @include gradient-bg($form-range-thumb-active-bg); // TODO: vars
+      @include gradient-bg(var(--#{$variable-prefix}form-range-thumb-active-bg, $form-range-thumb-active-bg));
     }
   }