feat!: use css custom properties for primary color

scss/core/_functions.scss

@@ -33,3 +33,116 @@
 
   @return $base-color;
 }
+
+//
+// This will convert a hex value as string and will return a
+// decimal as number
+// This function only works with a hex string number of two digits,
+// like "A8", "B5" etc.
+//
+@function hex-to-dec($hex) {
+  $hex-map-values: (
+    "0": 0,
+    "1": 1,
+    "2": 2,
+    "3": 3,
+    "4": 4,
+    "5": 5,
+    "6": 6,
+    "7": 7,
+    "8": 8,
+    "9": 9,
+    "A": 10,
+    "B": 11,
+    "C": 12,
+    "D": 13,
+    "E": 14,
+    "F": 15,
+  );
+
+  $first-digit: 16 * map-get($hex-map-values, str-slice($hex, 1, 1));
+  $second-digit: map-get($hex-map-values, str-slice($hex, 2, 2));
+
+  @return $first-digit + $second-digit;
+}
+
+//
+// This will take a color custom property argument and will
+// extract and return the default value.
+//
+@function extract-default-color-from-var($color) {
+  $start: str-index($color, '#') + 1;
+  $end: str-index($color, ')') - 1;
+  $default-color: to-upper-case(str-slice($color, $start, $end));
+
+  $r: hex-to-dec(str-slice($default-color, 1, 2));
+  $g: hex-to-dec(str-slice($default-color, 3, 4));
+  $b: hex-to-dec(str-slice($default-color, 5, 6));
+
+  @return rgb($r, $g, $b);
+}
+
+//
+// This will take a color custom property argument and will
+// extract and return the variable name.
+//
+@function extract-name-color-from-var($color) {
+  $start: str-index($color, '(') + 1;
+  $end: str-index($color, ',') - 1;
+  $name: str-slice($color, $start, $end);
+
+  @return $name;
+}
+
+//
+// This is a wrapper of darken function, that will accept.
+// a color type or a custom property, if the argument is
+// a color this will return the result of darken but if
+// the argument is a custom property this will return a
+// a custom property with the result of darken as default.
+//
+@function get-darken-color($color, $percentage) {
+  @if type-of($color) == "string" {
+    $name: extract-name-color-from-var($color) + "-darken-" + $percentage;
+    $color: extract-default-color-from-var($color);
+    @return var($name, darken($color, $percentage));
+  } @else {
+    @return darken($color, $percentage);
+  }
+}
+
+//
+// This is a wrapper of lighten function, that will accept.
+// a color type or a custom property, if the argument is
+// a color this will return the result of lighten but if
+// the argument is a custom property this will return a
+// a custom property with the result of lighten as default.
+//
+@function get-lighten-color($color, $percentage) {
+  @if type-of($color) == "string" {
+    $name: extract-name-color-from-var($color) + "-lighten-" + $percentage;
+    $color: extract-default-color-from-var($color);
+    @return var($name, lighten($color, $percentage));
+  } @else {
+    @return lighten($color, $percentage);
+  }
+}
+
+//
+// This is a wrapper of mix function, that will accept.
+// a color type or a custom property, if the argument is
+// a color this will return the result of mix but if
+// the argument is a custom property this will return a
+// a custom property with the result of mix as default.
+//
+@function get-mix-color($color1, $color2, $weight: 50%, $color-name: "primary") {
+  @if type-of($color2) == "string" {
+    $color2: extract-default-color-from-var($color2);
+    $name: "--custom-" + $color-name;
+    @return var($name, mix($color1, $color2, $weight));
+  } @else {
+    @return mix($color1, $color2, $weight);
+  }
+}
+
+

scss/core/_overrides.scss

@@ -0,0 +1,170 @@
+//
+// BOOTSTRAP MIXIN OVERRIDE
+// This preserves the original bootstrap mixin logic,
+// just changes darken function to get-darken-color function.
+// This mixin comes from bootstrap/scss/mixins/_list-group.scss
+//
+@mixin list-group-item-variant($state, $background, $color) {
+  .list-group-item-#{$state} {
+    color: $color;
+    background-color: $background;
+
+    &.list-group-item-action {
+      @include hover-focus() {
+        color: $color;
+        background-color: get-darken-color($background, 5%);
+      }
+
+      &.active {
+        color: $white;
+        background-color: $color;
+        border-color: $color;
+      }
+    }
+  }
+}
+
+//
+// BOOTSTRAP MIXIN OVERRIDE
+// This preserves the original bootstrap mixin logic,
+// just changes darken function to get-darken-color function.
+// This mixin comes from bootstrap/scss/mixins/_badge.scss
+//
+@mixin badge-variant($bg) {
+  color: color-yiq($bg);
+  background-color: $bg;
+
+  @at-root a#{&} {
+    @include hover-focus() {
+      color: color-yiq($bg);
+      background-color: get-darken-color($bg, 10%);
+    }
+
+    &:focus,
+    &.focus {
+      outline: 0;
+      box-shadow: 0 0 0 $badge-focus-width rgba($bg, .5);
+    }
+  }
+}
+
+//
+// BOOTSTRAP MIXIN OVERRIDE
+// This preserves the original bootstrap mixin logic,
+// just changes darken function to get-darken-color function.
+// This mixin comes from bootstrap/scss/mixins/_background-variant.scss
+//
+@mixin bg-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    background-color: $color !important;
+  }
+  a#{$parent},
+  button#{$parent} {
+    @include hover-focus() {
+      background-color: get-darken-color($color, 10%) !important;
+    }
+  }
+  @include deprecate("The `bg-variant` mixin", "v4.4.0", "v5", $ignore-warning);
+}
+
+//
+// BOOTSTRAP MIXIN OVERRIDE
+// This preserves the original bootstrap mixin logic,
+// just changes darken function to get-darken-color function.
+// This mixin comes from bootstrap/scss/mixins/_text-emphasis.scss
+//
+@mixin text-emphasis-variant($parent, $color, $ignore-warning: false) {
+  #{$parent} {
+    color: $color !important;
+  }
+  @if $emphasized-link-hover-darken-percentage != 0 {
+    a#{$parent} {
+      @include hover-focus() {
+        color: get-darken-color($color, $emphasized-link-hover-darken-percentage) !important;
+      }
+    }
+  }
+  @include deprecate("`text-emphasis-variant()`", "v4.4.0", "v5", $ignore-warning);
+}
+
+//
+// BOOTSTRAP MIXIN OVERRIDE
+// This preserves the original bootstrap mixin logic,
+// just changes darken function to get-darken-color function.
+// This mixin comes from bootstrap/scss/mixins/_table-row.scss
+//
+@mixin table-row-variant($state, $background, $border: null) {
+  // Exact selectors below required to override `.table-striped` and prevent
+  // inheritance to nested tables.
+  .table-#{$state} {
+    &,
+    > th,
+    > td {
+      background-color: $background;
+    }
+
+    @if $border != null {
+      th,
+      td,
+      thead th,
+      tbody + tbody {
+        border-color: $border;
+      }
+    }
+  }
+
+  // Hover states for `.table-hover`
+  // Note: this is not available for cells or rows within `thead` or `tfoot`.
+  .table-hover {
+    $hover-background: get-darken-color($background, 5%);
+
+    .table-#{$state} {
+      @include hover() {
+        background-color: $hover-background;
+
+        > td,
+        > th {
+          background-color: $hover-background;
+        }
+      }
+    }
+  }
+}
+
+//
+// BOOTSTRAP FUNCTION OVERRIDE
+// This checks the color argument in order to determinate
+// if the type is a string, when color is a custom property,
+// or a color type, then preserves the original logic.
+// This function comes from bootstrap/scss/_functions.scss
+//
+@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
+  @if type-of($color) == "string" {
+    $color: extract-default-color-from-var($color);
+  }
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) * .001;
+
+  @if ($yiq >= $yiq-contrasted-threshold) {
+    @return $dark;
+  } @else {
+    @return $light;
+  }
+}
+
+//
+// BOOTSTRAP FUNCTION OVERRIDE
+// This preserves the original bootstrap function logic,
+// just changes mix function to get-mix-color function.
+// This function comes from bootstrap/scss/_functions.scss
+//
+@function theme-color-level($color-name: "primary", $level: 0) {
+  $color: theme-color($color-name);
+  $color-base: if($level > 0, $black, $white);
+  $level: abs($level);
+
+  @return get-mix-color($color-base, $color, $level * $theme-color-interval, $color-name);
+}

scss/core/_variables.scss

@@ -54,7 +54,8 @@ $colors: map-merge(
   $colors
 );
 
-$primary: #0A3055 !default;
+$default-primary: #0A3055 !default;
+$primary: var(--custom-primary, $default-primary) !default;
 $secondary: $gray-700 !default;
 $brand: #9D0054 !default;
 $success: $green !default;
@@ -85,15 +86,15 @@ $theme-colors: map-merge(
   $theme-colors
 );
 
-$primary-100: mix(white, $primary, 94%) !default;
-$primary-200: mix(white, $primary, 75%) !default;
-$primary-300: mix(white, $primary, 50%) !default;
-$primary-400: mix(white, $primary, 25%) !default;
-$primary-500: $primary !default;
-$primary-600: mix(black, $primary, 10%) !default;
-$primary-700: mix(black, $primary, 20%) !default;
-$primary-800: mix(black, $primary, 25%) !default;
-$primary-900: mix(black, $primary, 30%) !default;
+$primary-100: var(--custom-primary-100, mix(white, $default-primary,  94%)) !default;
+$primary-200: var(--custom-primary-200, mix(white, $default-primary,  75%)) !default;
+$primary-300: var(--custom-primary-300, mix(white, $default-primary,  50%)) !default;
+$primary-400: var(--custom-primary-400, mix(white, $default-primary,  25%)) !default;
+$primary-500: var(--custom-primary-500, $default-primary) !default;
+$primary-600: var(--custom-primary-600, mix(white, $default-primary,  10%)) !default;
+$primary-700: var(--custom-primary-700, mix(white, $default-primary,  20%)) !default;
+$primary-800: var(--custom-primary-800, mix(white, $default-primary,  25%)) !default;
+$primary-900: var(--custom-primary-900, mix(white, $default-primary,  30%)) !default;
 
 $secondary-100: mix(white, $secondary, 94%) !default;
 $secondary-200: mix(white, $secondary, 75%) !default;
@@ -395,11 +396,11 @@ $inline-link-hover-color:                 darken($inline-link-color, 15%) !defau
 $inline-link-hover-decoration:            underline !default;
 $inline-link-hover-decoration-color:      rgba($inline-link-hover-color, 1) !default;
 
-$muted-link-color:                              $primary-500 !default;
+$muted-link-color:                              var(--custom-muted-link-color, $default-primary) !default;
 $muted-link-decoration:                         none !default;
-$muted-link-hover-color:                        darken($muted-link-color, 15%) !default;
+$muted-link-hover-color:                        var(--custom-muted-link-hover-color, darken($default-primary, 15%)) !default;
 $muted-link-hover-decoration:                   underline !default;
-$muted-inline-link-color:                       $primary-500 !default;
+$muted-inline-link-color:                       $default-primary !default;
 $muted-inline-link-decoration:                  underline !default;
 $muted-inline-link-decoration-color:            rgba($muted-inline-link-color, .3) !default;
 $muted-inline-link-hover-color:                 darken($muted-inline-link-color, 15%) !default;

scss/core/core.scss

@@ -3,6 +3,7 @@
 @import "~bootstrap/scss/mixins";
 @import "~bootstrap/scss/root";
 @import "~bootstrap/scss/reboot";
+@import "overrides";
 @import "typography";
 @import "grid";
 @import "~react-loading-skeleton/dist/skeleton";

scss/core/utilities-only.scss

@@ -1,6 +1,7 @@
 @import "functions";
 @import "variables";
 @import "~bootstrap/scss/mixins";
+@import "overrides";
 @import "grid";
 @import "~bootstrap/scss/transitions";
 @import "utilities";

src/Button/Button.scss

@@ -111,8 +111,8 @@
 
   &:not(:disabled):not(.disabled) {
     @include hover {
-      color: darken($color, 7.5%);
-      background-color: darken($background, 7.5%);
+      color: get-darken-color($color, 7.5%);
+      background-color: get-darken-color($background, 7.5%);
       border-color: transparent;
     }
   }
@@ -126,7 +126,7 @@
   &:not(:disabled):not(.disabled):active,
   &:not(:disabled):not(.disabled).active,
   .show > &.dropdown-toggle {
-    color: darken($color, 10%);
+    color: get-darken-color($color, 10%);
     background: #EEEEEE;
   }
 }

src/Form/_variables.scss

@@ -192,7 +192,7 @@ $custom-range-thumb-border-radius:           1rem !default;
 $custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
 $custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
 $custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
-$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
+$custom-range-thumb-active-bg:               get-lighten-color($component-active-bg, 35%) !default;
 $custom-range-thumb-disabled-bg:             theme-color("gray", "default") !default;
 
 $custom-file-height:                $input-height !default;