colors unify

src/scss/_utilities.scss

@@ -1,4 +1,5 @@
 $margin-spacers: map-merge($spacers, (auto: auto, null: $spacer));
+
 $border-values: (
   null: $border-width solid $border-color-transparent,
   wide: $border-width-wide solid $border-color-transparent,
@@ -108,4 +109,4 @@ $utilities: (
     responsive: true,
     values: 2 3 4
   )
-) !default;
+) !default;

src/scss/_variables.scss

@@ -66,10 +66,6 @@ $display-font-sizes: (
   6: 2.5rem
 ) !default;
 
-$small-font-size: percentage(divide($h5-font-size, $font-size-base)) !default;
-$code-font-size: $small-font-size !default;
-$code-line-height: 1.25rem !default;
-
 $lead-font-size: $font-size-base !default;
 $lead-font-weight: $font-weight-normal !default;
 
@@ -139,7 +135,32 @@ $info: $azure !default;
 $warning: $orange !default;
 $danger: $red !default;
 
-$code-color: $primary !default;
+$theme-colors: (
+  "primary": $primary,
+  "secondary": $secondary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "dark":  $dark,
+  "muted": $text-muted
+) !default;
+
+$extra-colors: (
+  "blue": $blue,
+  "azure": $azure,
+  "indigo": $indigo,
+  "purple": $purple,
+  "pink": $pink,
+  "red": $red,
+  "orange": $orange,
+  "yellow": $yellow,
+  "lime": $lime,
+  "green": $green,
+  "teal": $teal,
+  "cyan": $cyan,
+) !default;
 
 $social-colors: (
   "facebook": #3b5998,
@@ -159,22 +180,6 @@ $social-colors: (
   "tabler": #206bc4
 ) !default;
 
-$colors: (
-  "blue": $blue,
-  "azure": $azure,
-  "indigo": $indigo,
-  "purple": $purple,
-  "pink": $pink,
-  "red": $red,
-  "orange": $orange,
-  "yellow": $yellow,
-  "lime": $lime,
-  "green": $green,
-  "teal": $teal,
-  "cyan": $cyan,
-) !default;
-
-
 // Dark mode
 $dark-mode-darken: darken($dark, 2%) !default;
 $dark-mode-lighten: lighten($dark, 2%) !default;
@@ -190,6 +195,12 @@ $border-radius: 4px !default;
 $border-radius-lg: 8px !default;
 $border-radius-pill: 100rem !default;
 
+// Code
+$small-font-size: percentage(divide($h5-font-size, $font-size-base)) !default;
+$code-color: $primary !default;
+$code-font-size: $small-font-size !default;
+$code-line-height: 1.25rem !default;
+
 // Avatars
 $avatar-size: 2.5rem !default;
 $avatar-sizes: (

src/scss/ui/_buttons.scss

@@ -184,7 +184,7 @@
 $btn-colors: $theme-colors;
 
 @if $enable-extra-colors {
-  $btn-colors: map-merge($btn-colors, $colors);
+  $btn-colors: map-merge($btn-colors, $extra-colors);
 }
 
 @if $enable-social-colors {

src/scss/ui/_ribbons.scss

@@ -35,7 +35,7 @@
   }
 
   @if $enable-extra-colors {
-    @each $color, $value in $colors {
+    @each $color, $value in $extra-colors {
       &.bg-#{$color} {
         border-color: $value;
       }

src/scss/ui/_steps.scss

@@ -42,7 +42,7 @@
   @include step-color($primary);
 }
 
-@each $color, $value in $colors {
+@each $color, $value in $extra-colors {
   .steps-#{$color} {
     @include step-color($value);
   }

src/scss/utils/_colors.scss

@@ -1,22 +1,15 @@
 // stylelint-disable declaration-no-important
 
-/**
-SOCIAL COLORS
- */
-@each $color, $value in $social-colors {
-  .bg-#{"" + $color} {
-    color: #fff !important;
-    background: $value !important;
-  }
-
-  .text-#{"" + $color} {
+@each $color, $value in $theme-colors {
+  .bg-#{"" + $color}-lt {
     color: $value !important;
+    background: theme-color-lighter($value, true) !important;
   }
 }
 
-
+// Extra colors
 @if $enable-extra-colors {
-  @each $color, $value in map-merge($colors, ( muted: $text-muted )) {
+  @each $color, $value in $extra-colors {
     .bg-#{"" + $color} {
       background: $value;
     }
@@ -31,3 +24,22 @@ SOCIAL COLORS
     }
   }
 }
+
+// Social colors
+@if $enable-social-colors {
+  @each $color, $value in $social-colors {
+    .bg-#{"" + $color} {
+      color: #ffffff !important;
+      background: $value !important;
+    }
+
+    .text-#{"" + $color} {
+      color: $value !important;
+    }
+
+    .bg-#{"" + $color}-lt {
+      color: $value !important;
+      background: theme-color-lighter($value, true) !important;
+    }
+  }
+}