release 5.0.0

README.txt

@@ -1,5 +1,5 @@
 MDB5
-Version: FREE 4.4.0
+Version: FREE 5.0.0
 
 Documentation:
 https://mdbootstrap.com/docs/standard/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdb-ui-kit",
-  "version": "4.4.0",
+  "version": "5.0.0",
   "main": "js/mdb.min.js",
   "homepage": "https://mdbootstrap.com/docs/standard/",
   "repository": "https://github.com/mdbootstrap/mdb-ui-kit.git",

src/js/free/ripple.js

@@ -134,7 +134,7 @@ class Ripple {
     }
 
     if (!this._element.style.minWidth) {
-      Manipulator.style(this._element, { 'min-width': `${this._element.offsetWidth}px` });
+      Manipulator.style(this._element, { 'min-width': `${getComputedStyle(this._element).width}` });
       this._isMinWidthSet = true;
     }
 

src/scss/free/_accordion.scss

@@ -13,3 +13,26 @@
     box-shadow: none;
   }
 }
+
+.accordion-flush {
+  .accordion-button:not(.collapsed) {
+    box-shadow: $accordion-flush-button-box-shadow;
+  }
+  .accordion-item {
+    border-bottom: $accordion-flush-item-border-bottom;
+  }
+}
+
+.accordion-borderless {
+  .accordion-item {
+    border: 0;
+    .accordion-button {
+      border-radius: $accordion-borderless-button-border-radius;
+      &:not(.collapsed) {
+        background-color: $accordion-borderless-button-bgc;
+        color: $accordion-borderless-button-color;
+        box-shadow: none;
+      }
+    }
+  }
+}

src/scss/free/_alert.scss

@@ -17,3 +17,22 @@
 .parent-alert-relative {
   position: relative;
 }
+
+@each $color, $value in $alerts {
+  .alert-#{$color} {
+    background-color: map-get($value, background-color);
+    color: map-get($value, text-color);
+
+    i {
+      color: map-get($value, icon-color);
+    }
+
+    .alert-link {
+      color: map-get($value, text-color);
+
+      &:hover {
+        color: shift-color(map-get($value, text-color), 20%);
+      }
+    }
+  }
+}

src/scss/free/_badge.scss

@@ -25,13 +25,13 @@
   padding: $badge-notification-padding-y $badge-notification-padding-x;
 }
 
-@each $name, $color in $badges {
+@each $color, $value in $badges {
-  .badge-#{$name} {
+  .badge-#{$color} {
-    background-color: map-get($color, background-color);
+    background-color: map-get($value, background-color);
-    color: map-get($color, text-color);
+    color: map-get($value, text-color);
 
     i {
-      color: map-get($color, icon-color);
+      color: map-get($value, icon-color);
     }
   }
 }

src/scss/free/_buttons.scss

@@ -128,9 +128,105 @@
 // Alternate buttons
 //
 
-@each $color, $value in $theme-colors {
+@each $color, $value in $buttons {
   .btn-#{$color} {
-    @include button-variant-mdb($value);
+    background-color: map-get($value, background-color);
+    color: map-get($value, text-color);
+    box-shadow: $btn-contextual-box-shadow map-get($value, shadow-color);
+
+    &:hover,
+    &:focus,
+    &.focus {
+      background-color: darken(map-get($value, background-color), 5%);
+      color: map-get($value, text-color);
+      box-shadow: $btn-contextual-box-shadow-state-first-part
+          rgba(map-get($value, shadow-color), 0.3),
+        $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
+    }
+
+    &:active,
+    &.active {
+      box-shadow: $btn-contextual-box-shadow-state-first-part
+          rgba(map-get($value, shadow-color), 0.3),
+        $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
+
+      &:focus {
+        box-shadow: $btn-contextual-box-shadow-state-first-part
+            rgba(map-get($value, shadow-color), 0.3),
+          $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
+      }
+    }
+
+    .btn-check:checked + &,
+    .btn-check:active + &,
+    &:active,
+    &.active,
+    .show > &.dropdown-toggle {
+      background-color: darken(map-get($value, background-color), 10%);
+      color: map-get($value, text-color);
+
+      &:focus {
+        box-shadow: $btn-contextual-box-shadow-state-first-part
+            rgba(map-get($value, shadow-color), 0.3),
+          $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
+      }
+    }
+
+    &:disabled,
+    &.disabled {
+      background-color: map-get($value, background-color);
+      color: map-get($value, text-color);
+      box-shadow: $btn-contextual-box-shadow map-get($value, shadow-color);
+    }
+
+    .btn-check:focus + &,
+    &:focus {
+      box-shadow: $btn-contextual-box-shadow-state-first-part
+          rgba(map-get($value, shadow-color), 0.3),
+        $btn-contextual-box-shadow-state-second-part rgba(map-get($value, shadow-color), 0.2);
+    }
+  }
+}
+
+.btn-secondary {
+  box-shadow: none;
+
+  &:hover,
+  &:focus,
+  &.focus {
+    background-color: $btn-secondary-hover-focus-bgc;
+    box-shadow: none;
+  }
+
+  &:active,
+  &.active {
+    box-shadow: none;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  .btn-check:checked + &,
+  .btn-check:active + &,
+  &:active,
+  &.active,
+  .show > &.dropdown-toggle {
+    background-color: $btn-secondary-active-bgc;
+
+    &:focus {
+      box-shadow: none;
+    }
+  }
+
+  &:disabled,
+  &.disabled {
+    box-shadow: none;
+  }
+
+  .btn-check:focus + &,
+  &:focus {
+    box-shadow: none;
   }
 }
 
@@ -138,14 +234,43 @@
 // Alternate buttons outline
 //
 
-@each $color, $value in $theme-colors {
+@each $color, $value in $buttons-outline {
   .btn-outline-#{$color} {
-    @include button-outline-variant-mdb($value);
+    color: map-get($value, text-color);
+    border-color: map-get($value, border-color);
+
+    &:hover {
+      color: map-get($value, text-color);
+      background-color: rgba(map-get($value, background-color), 0.02);
+    }
+
+    &:focus,
+    &.focus {
+      color: map-get($value, text-color);
+      background-color: transparent;
+    }
+
+    &:active,
+    &.active,
+    &.dropdown-toggle.show {
+      color: map-get($value, text-color);
+      background-color: transparent;
+
+      &:focus {
+        box-shadow: none;
+      }
+    }
+
+    &:disabled,
+    &.disabled {
+      color: map-get($value, text-color);
+    }
 
     .btn-check:checked + &,
     .btn-check:active + & {
-      color: set-notification-text-color($value);
+      color: map-get($value, text-color);
-      background-color: $value;
+      border-color: map-get($value, border-color);
+      background-color: rgba(map-get($value, background-color), 0.02);
     }
   }
 }
@@ -183,11 +308,13 @@
 .btn-link {
   box-shadow: none;
   text-decoration: none;
+  color: $link-color;
 
   &:hover {
     box-shadow: none;
     text-decoration: none;
     background-color: $btn-link-bgc;
+    color: $link-hover-color;
   }
 
   &:focus,
@@ -195,16 +322,19 @@
     box-shadow: none;
     text-decoration: none;
     background-color: $btn-link-bgc;
+    color: $link-hover-color;
   }
 
   &:active,
   &.active {
     box-shadow: none;
     background-color: $btn-link-bgc;
+    color: $link-hover-color;
 
     &:focus {
       box-shadow: none;
       background-color: $btn-link-bgc;
+      color: $link-hover-color;
     }
   }
 
@@ -212,6 +342,7 @@
   &.disabled,
   fieldset:disabled & {
     box-shadow: none;
+    color: $link-color;
   }
 }
 
@@ -334,27 +465,68 @@
     opacity: 0;
     transition: transform 0.4s, opacity 0.4s;
     z-index: -1;
+
     li {
       z-index: 0;
       display: flex;
       margin-right: auto;
       margin-bottom: $fixed-action-btn-li-margin-bottom;
       margin-left: auto;
+
       &:first-of-type {
         margin-top: $fixed-action-btn-li-margin-bottom * 0.5;
       }
     }
+
     a {
       &.btn {
         opacity: 0;
         transition: opacity 0.4s ease-in;
+
         &.shown {
           opacity: 1;
         }
       }
     }
   }
+
   &.active ul {
     opacity: 1;
   }
 }
+
+.btn-tertiary {
+  box-shadow: none;
+  text-decoration: none;
+  color: $link-color;
+  padding-left: 0px;
+  padding-right: 0px;
+
+  &:hover,
+  &:focus,
+  &.focus {
+    box-shadow: none;
+    text-decoration: none;
+    background-color: transparent;
+    color: $link-hover-color;
+  }
+
+  &:active,
+  &.active {
+    box-shadow: none;
+    background-color: transparent;
+    color: $link-hover-color;
+
+    &:focus {
+      box-shadow: none;
+      background-color: transparent;
+    }
+  }
+
+  &:disabled,
+  &.disabled,
+  fieldset:disabled & {
+    box-shadow: none;
+    color: $link-color;
+  }
+}

src/scss/free/_list-group.scss

@@ -11,33 +11,52 @@
 
 .list-group-light {
   .list-group-item {
-    padding: 1rem 0;
+    padding: $list-group-light-item-py 0;
-    border: 2px solid hsl(0, 0%, 96%);
+    border: $list-group-light-item-border;
   }
   > .list-group-item {
-    border-width: 0 0 2px;
+    border-width: 0 0 $list-group-light-item-border-width;
     &:last-of-type {
       border: none;
     }
   }
   .active {
     border: none;
-    border-radius: 0.5rem;
+    border-radius: $list-group-light-active-border-radius;
-    background-color: hsl(217, 88.2%, 90%);
+    background-color: $list-group-light-active-bgc;
-    color: hsl(217, 88.8%, 35.1%);
+    color: $list-group-light-active-color;
   }
   .list-group-item-action {
     &:hover {
-      border-radius: 0.5rem;
+      border-radius: $list-group-light-active-border-radius;
     }
     &:focus {
-      border-radius: 0.5rem;
+      border-radius: $list-group-light-active-border-radius;
     }
   }
 }
 
 .list-group-small {
   .list-group-item {
-    padding: 0.5rem 0;
+    padding: $list-group-small-item-py 0;
+  }
+}
+
+.list-group-item {
+  &.active {
+    background-color: $list-group-item-active-bgc;
+    color: $list-group-item-active-color;
+    border-color: $list-group-item-active-border-color;
+  }
+}
+
+@each $color, $value in $alerts {
+  .list-group-item-#{$color} {
+    background-color: map-get($value, background-color);
+    color: map-get($value, text-color);
+
+    i {
+      color: map-get($value, icon-color);
+    }
   }
 }

src/scss/free/_nav.scss

@@ -21,7 +21,7 @@
       $nav-tabs-link-padding-x;
 
     &:hover {
-      background-color: $nav-tabs-link-hover-background-color;
+      background-color: $nav-tabs-link-hover-bgc;
       border-color: transparent;
     }
 
@@ -51,7 +51,7 @@
     padding: $nav-pills-link-padding-top $nav-pills-link-padding-x $nav-pills-link-padding-bottom
       $nav-pills-link-padding-x;
     line-height: $nav-pills-link-line-height;
-    background-color: $nav-pills-link-background-color;
+    background-color: $nav-pills-link-hover-bgc;
     font-weight: $nav-pills-link-font-weight;
     color: $nav-pills-link-color;
     margin: $nav-pills-margin;
@@ -59,9 +59,8 @@
 
   .nav-link.active,
   .show > .nav-link {
+    background-color: $nav-pills-link-active-bgc;
     color: $nav-pills-link-active-color;
-    background-color: $nav-pills-link-active-bg;
-    box-shadow: $btn-box-shadow;
   }
 }
 

src/scss/free/_pagination.scss

@@ -21,10 +21,12 @@
 
 .page-item {
   &.active .page-link {
-    background-color: $pagination-active-bg;
+    background-color: $page-item-active-link-bgc;
+    color: $page-item-active-link-color;
     border: 0;
-    box-shadow: $pagination-active-box-shadow;
+    box-shadow: $page-item-active-link-box-shadow;
     transition: $pagination-active-transition;
+    font-weight: $page-item-active-link-font-weight;
   }
 
   &:first-child {

src/scss/free/_popover.scss

@@ -1,8 +1,8 @@
 // Popover
 
 .popover {
-  border: 0;
+  border: 1px solid #f5f5f5;
-  box-shadow: $popover-box-shadow;
+  box-shadow: $box-shadow-2;
 
   .popover-arrow {
     display: none;

src/scss/free/_range.scss

@@ -25,7 +25,7 @@
       top: 0;
       border-radius: 50% 50% 50% 0;
       transform: rotate(-45deg);
-      background: #1266f1;
+      background: $primary;
       z-index: -1;
     }
 

src/scss/free/_ripple.scss

@@ -35,7 +35,7 @@
   @include ripple-variant(white);
 }
 
-@each $color, $value in $theme-colors {
+@each $color, $value in $ripple {
   .ripple-surface-#{$color} {
     .ripple-wave {
       @include ripple-variant($value);

src/scss/free/_shadows.scss

@@ -1,18 +1 @@
 // Shadows
-// @each $shadow, $value in $shadows {
-//   .shadow-#{$shadow} {
-//     box-shadow: $value !important;
-//   }
-// }
-
-// @each $shadow, $value in $shadows-soft {
-//   .shadow-#{$shadow}-soft {
-//     box-shadow: $value !important;
-//   }
-// }
-
-// @each $shadow, $value in $shadows-strong {
-//   .shadow-#{$shadow}-strong {
-//     box-shadow: $value !important;
-//   }
-// }

src/scss/free/_toasts.scss

@@ -33,10 +33,10 @@
   z-index: $zindex-toast;
 }
 
-@each $name, $color in $toasts {
+@each $color, $value in $toasts {
-  .toast-#{$name} {
+  .toast-#{$color} {
-    background-color: map-get($color, background-color);
+    background-color: map-get($value, background-color);
-    color: map-get($color, text-color);
+    color: map-get($value, text-color);
-    border-color: map-get($color, border-color);
+    border-color: map-get($value, border-color);
   }
 }

src/scss/free/_type.scss

@@ -11,10 +11,10 @@
   }
 }
 
-@each $name, $color in $note {
+@each $color, $value in $note {
-  .note-#{$name} {
+  .note-#{$color} {
-    background-color: map-get($color, bgc);
+    background-color: map-get($value, background-color);
-    border-color: map-get($color, border-color);
+    border-color: map-get($value, border-color);
   }
 }
 

src/scss/free/_utilities.scss

@@ -239,14 +239,3 @@ $utilities: map-merge(
     transition: color 0.15s;
   }
 }
-
-.navbar-light .navbar-nav .nav-link.link-grayish,
-.navbar-dark .navbar-nav .nav-link.link-grayish,
-.link-grayish {
-  color: #9fa6b2;
-
-  &:hover,
-  &:focus {
-    color: #798497;
-  }
-}

src/scss/free/_variables.scss

@@ -281,63 +281,174 @@ $blue-gray-900: #263238 !default;
 // Material Design Color System - end
 
 // Theme colors
-$primary: #1266f1 !default;
+$primary: #3b71ca !default;
-$secondary: #b23cfd !default;
+$secondary: #9fa6b2 !default;
-$success: #00b74a !default;
+$success: #14a44d !default;
-$info: #39c0ed !default;
+$danger: #dc4c64 !default;
-$warning: #ffa900 !default;
+$warning: #e4a11b !default;
-$danger: #f93154 !default;
+$info: #54b4d3 !default;
-$light: #f9f9f9 !default;
+$light: #fbfbfb !default;
-$dark: $gray-900 !default;
+$dark: #332d2d !default;
-$grayish: #9fa6b2 !default;
 
 // scss-docs-start theme-colors-map
 $theme-colors: (
   'primary': $primary,
   'secondary': $secondary,
   'success': $success,
-  'info': $info,
-  'warning': $warning,
   'danger': $danger,
+  'warning': $warning,
+  'info': $info,
   'light': $light,
   'dark': $dark,
-  'white': $white,
-  'black': $black,
-  'grayish': $grayish,
 ) !default;
 // scss-docs-end theme-colors-map
 
+// scss-docs-start ripple-colors-map
+$ripple: (
+  'primary': $primary,
+  'secondary': #e3ebf7,
+  'success': $success,
+  'danger': $danger,
+  'warning': $warning,
+  'info': $info,
+  'light': $light,
+  'dark': $dark,
+) !default;
+// scss-docs-end ripple-colors-map
+
+// scss-docs-start buttons-colors-map
+$buttons: () !default;
+$buttons: map-merge(
+  (
+    'primary': (
+      'background-color': $primary,
+      'text-color': $white,
+      'shadow-color': $primary,
+    ),
+    'secondary': (
+      'background-color': #e3ebf7,
+      'text-color': #285192,
+      'shadow-color': #e3ebf7,
+    ),
+    'success': (
+      'background-color': $success,
+      'text-color': $white,
+      'shadow-color': $success,
+    ),
+    'danger': (
+      'background-color': $danger,
+      'text-color': $white,
+      'shadow-color': $danger,
+    ),
+    'warning': (
+      'background-color': $warning,
+      'text-color': $white,
+      'shadow-color': $warning,
+    ),
+    'info': (
+      'background-color': $info,
+      'text-color': $white,
+      'shadow-color': $info,
+    ),
+    'light': (
+      'background-color': $light,
+      'text-color': #4f4f4f,
+      'shadow-color': $light,
+    ),
+    'dark': (
+      'background-color': $dark,
+      'text-color': $white,
+      'shadow-color': $dark,
+    ),
+  ),
+  $buttons
+);
+// scss-docs-end buttons-colors-map
+
+// scss-docs-start buttons-outline-colors-map
+$buttons-outline: () !default;
+$buttons-outline: map-merge(
+  (
+    'primary': (
+      'text-color': $primary,
+      'border-color': $primary,
+      'background-color': $primary,
+    ),
+    'secondary': (
+      'text-color': #285192,
+      'border-color': #e3ebf7,
+      'background-color': #e3ebf7,
+    ),
+    'success': (
+      'text-color': $success,
+      'border-color': $success,
+      'background-color': $success,
+    ),
+    'danger': (
+      'text-color': $danger,
+      'border-color': $danger,
+      'background-color': $danger,
+    ),
+    'warning': (
+      'text-color': $warning,
+      'border-color': $warning,
+      'background-color': $warning,
+    ),
+    'info': (
+      'text-color': $info,
+      'border-color': $info,
+      'background-color': $info,
+    ),
+    'light': (
+      'text-color': $light,
+      'border-color': $light,
+      'background-color': $light,
+    ),
+    'dark': (
+      'text-color': $dark,
+      'border-color': $dark,
+      'background-color': $dark,
+    ),
+  ),
+  $buttons-outline
+);
+// scss-docs-end buttons-outline-colors-map
+
 // scss-docs-start note-colors-map
 $note: () !default;
 $note: map-merge(
   (
     'primary': (
-      'bgc': lighten($primary, 43%),
+      'background-color': rgb(223, 231, 246),
-      'border-color': $primary,
+      'border-color': rgb(55, 111, 200),
     ),
     'secondary': (
-      'bgc': lighten($secondary, 33%),
+      'background-color': rgb(235, 237, 239),
-      'border-color': $secondary,
+      'border-color': rgb(86, 94, 108),
     ),
     'success': (
-      'bgc': lighten($success, 53%),
+      'background-color': rgb(214, 240, 224),
-      'border-color': $success,
+      'border-color': rgb(19, 150, 71),
     ),
     'danger': (
-      'bgc': lighten($danger, 36%),
+      'background-color': rgb(249, 225, 229),
-      'border-color': $danger,
+      'border-color': rgb(214, 46, 74),
     ),
     'warning': (
-      'bgc': lighten($warning, 42%),
+      'background-color': rgb(251, 240, 218),
-      'border-color': $warning,
+      'border-color': rgb(161, 113, 18),
     ),
     'info': (
-      'bgc': lighten($info, 36%),
+      'background-color': rgb(222, 241, 247),
-      'border-color': $info,
+      'border-color': rgb(38, 134, 166),
     ),
     'light': (
-      'bgc': $light,
+      'background-color': rgb(245, 245, 245),
-      'border-color': $dark,
+      'border-color': rgb(140, 140, 140),
+    ),
+    'dark': (
+      'background-color': rgb(51, 46, 46),
+      'border-color': rgb(232, 232, 232),
     ),
   ),
   $note
@@ -349,109 +460,166 @@ $badges: () !default;
 $badges: map-merge(
   (
     'primary': (
-      'background-color': hsl(217, 88.8%, 90%),
+      'background-color': rgb(223, 231, 246),
-      'text-color': hsl(217, 88.8%, 35%),
+      'text-color': rgb(44, 88, 160),
-      'icon-color': hsl(217, 88.8%, 65%),
+      'icon-color': rgb(55, 111, 200),
-      'border-color': hsl(217, 88.8%, 85%),
+      'border-color': rgb(199, 214, 240),
     ),
     'secondary': (
-      'background-color': hsl(277, 98%, 90%),
+      'background-color': rgb(235, 237, 239),
-      'text-color': hsl(277, 98%, 35%),
+      'text-color': rgb(64, 70, 79),
-      'icon-color': hsl(277, 98%, 55%),
+      'icon-color': rgb(86, 94, 108),
-      'border-color': hsl(277, 98%, 85%),
+      'border-color': rgb(218, 222, 225),
     ),
     'success': (
-      'background-color': hsl(144, 70%, 87%),
+      'background-color': rgb(214, 240, 224),
-      'text-color': hsl(144, 70%, 15%),
+      'text-color': rgb(13, 104, 50),
-      'icon-color': hsl(144, 70%, 35%),
+      'icon-color': rgb(19, 150, 71),
-      'border-color': hsl(144, 70%, 77%),
+      'border-color': rgb(192, 231, 208),
     ),
     'danger': (
-      'background-color': hsl(350, 90.3%, 92%),
+      'background-color': rgb(249, 225, 229),
-      'text-color': hsl(350, 90.3%, 25%),
+      'text-color': rgb(175, 35, 58),
-      'icon-color': hsl(350, 90.3%, 55%),
+      'icon-color': rgb(214, 46, 74),
-      'border-color': hsl(350, 90.3%, 87%),
+      'border-color': rgb(244, 200, 207),
     ),
     'warning': (
-      'background-color': hsl(40, 100%, 88%),
+      'background-color': rgb(251, 240, 218),
-      'text-color': hsl(40, 80%, 15%),
+      'text-color': rgb(115, 81, 13),
-      'icon-color': hsl(40, 100%, 40%),
+      'icon-color': rgb(161, 113, 18),
-      'border-color': hsl(40, 100%, 80%),
+      'border-color': rgb(249, 228, 190),
     ),
     'info': (
-      'background-color': hsl(195, 83.3%, 90%),
+      'background-color': rgb(222, 241, 247),
-      'text-color': hsl(195, 83.3%, 18%),
+      'text-color': rgb(28, 101, 125),
-      'icon-color': hsl(195, 83.3%, 45%),
+      'icon-color': rgb(38, 134, 166),
-      'border-color': hsl(195, 83.3%, 85%),
+      'border-color': rgb(198, 230, 241),
     ),
     'light': (
-      'background-color': hsl(0, 0%, 96%),
+      'background-color': rgb(245, 245, 245),
-      'text-color': hsl(0, 0%, 25%),
+      'text-color': rgb(79, 79, 79),
-      'icon-color': hsl(0, 0%, 55%),
+      'icon-color': rgb(140, 140, 140),
-      'border-color': hsl(0, 0%, 88%),
+      'border-color': rgb(230, 230, 230),
     ),
     'dark': (
-      'background-color': hsl(0, 0%, 16%),
+      'background-color': rgb(51, 46, 46),
-      'text-color': hsl(0, 0%, 96%),
+      'text-color': rgb(245, 245, 245),
-      'icon-color': hsl(0, 0%, 85%),
+      'icon-color': rgb(232, 232, 232),
-      'border-color': hsl(0, 0%, 20%),
+      'border-color': rgb(68, 60, 60),
     ),
   ),
   $badges
 );
 // scss-docs-end badges-colors-map
 
+// scss-docs-start alerts-colors-map
+$alerts: () !default;
+$alerts: map-merge(
+  (
+    'primary': (
+      'background-color': rgb(223, 231, 246),
+      'text-color': rgb(44, 88, 160),
+      'icon-color': rgb(55, 111, 200),
+      'border-color': rgb(199, 214, 240),
+    ),
+    'secondary': (
+      'background-color': rgb(235, 237, 239),
+      'text-color': rgb(64, 70, 79),
+      'icon-color': rgb(86, 94, 108),
+      'border-color': rgb(218, 222, 225),
+    ),
+    'success': (
+      'background-color': rgb(214, 240, 224),
+      'text-color': rgb(13, 104, 50),
+      'icon-color': rgb(19, 150, 71),
+      'border-color': rgb(192, 231, 208),
+    ),
+    'danger': (
+      'background-color': rgb(249, 225, 229),
+      'text-color': rgb(175, 35, 58),
+      'icon-color': rgb(214, 46, 74),
+      'border-color': rgb(244, 200, 207),
+    ),
+    'warning': (
+      'background-color': rgb(251, 240, 218),
+      'text-color': rgb(115, 81, 13),
+      'icon-color': rgb(161, 113, 18),
+      'border-color': rgb(249, 228, 190),
+    ),
+    'info': (
+      'background-color': rgb(222, 241, 247),
+      'text-color': rgb(28, 101, 125),
+      'icon-color': rgb(38, 134, 166),
+      'border-color': rgb(198, 230, 241),
+    ),
+    'light': (
+      'background-color': rgb(245, 245, 245),
+      'text-color': rgb(79, 79, 79),
+      'icon-color': rgb(140, 140, 140),
+      'border-color': rgb(230, 230, 230),
+    ),
+    'dark': (
+      'background-color': rgb(51, 46, 46),
+      'text-color': rgb(245, 245, 245),
+      'icon-color': rgb(232, 232, 232),
+      'border-color': rgb(68, 60, 60),
+    ),
+  ),
+  $alerts
+);
+// scss-docs-end alerts-colors-map
+
 // scss-docs-start toasts-colors-map
 $toasts: () !default;
 $toasts: map-merge(
   (
     'primary': (
-      'background-color': hsl(217, 88.8%, 90%),
+      'background-color': rgb(223, 231, 246),
-      'text-color': hsl(217, 88.8%, 35%),
+      'text-color': rgb(44, 88, 160),
-      'icon-color': hsl(217, 88.8%, 65%),
+      'icon-color': rgb(55, 111, 200),
-      'border-color': hsl(217, 88.8%, 87%),
+      'border-color': rgb(199, 214, 240),
     ),
     'secondary': (
-      'background-color': hsl(277, 98%, 90%),
+      'background-color': rgb(235, 237, 239),
-      'text-color': hsl(277, 98%, 35%),
+      'text-color': rgb(64, 70, 79),
-      'icon-color': hsl(277, 98%, 55%),
+      'icon-color': rgb(86, 94, 108),
-      'border-color': hsl(277, 98%, 87%),
+      'border-color': rgb(218, 222, 225),
     ),
     'success': (
-      'background-color': hsl(144, 70%, 87%),
+      'background-color': rgb(214, 240, 224),
-      'text-color': hsl(144, 70%, 15%),
+      'text-color': rgb(13, 104, 50),
-      'icon-color': hsl(144, 70%, 35%),
+      'icon-color': rgb(19, 150, 71),
-      'border-color': hsl(144, 70%, 81%),
+      'border-color': rgb(192, 231, 208),
     ),
     'danger': (
-      'background-color': hsl(350, 90.3%, 92%),
+      'background-color': rgb(249, 225, 229),
-      'text-color': hsl(350, 90.3%, 25%),
+      'text-color': rgb(175, 35, 58),
-      'icon-color': hsl(350, 90.3%, 55%),
+      'icon-color': rgb(214, 46, 74),
-      'border-color': hsl(350, 90.3%, 89%),
+      'border-color': rgb(244, 200, 207),
     ),
     'warning': (
-      'background-color': hsl(40, 100%, 88%),
+      'background-color': rgb(251, 240, 218),
-      'text-color': hsl(40, 80%, 15%),
+      'text-color': rgb(115, 81, 13),
-      'icon-color': hsl(40, 100%, 40%),
+      'icon-color': rgb(161, 113, 18),
-      'border-color': hsl(40, 100%, 82%),
+      'border-color': rgb(249, 228, 190),
     ),
     'info': (
-      'background-color': hsl(195, 83.3%, 90%),
+      'background-color': rgb(222, 241, 247),
-      'text-color': hsl(195, 83.3%, 18%),
+      'text-color': rgb(28, 101, 125),
-      'icon-color': hsl(195, 83.3%, 45%),
+      'icon-color': rgb(38, 134, 166),
-      'border-color': hsl(195, 83.3%, 85%),
+      'border-color': rgb(198, 230, 241),
     ),
     'light': (
-      'background-color': hsl(0, 0%, 96%),
+      'background-color': rgb(245, 245, 245),
-      'text-color': hsl(0, 0%, 25%),
+      'text-color': rgb(79, 79, 79),
-      'icon-color': hsl(0, 0%, 55%),
+      'icon-color': rgb(140, 140, 140),
-      'border-color': hsl(0, 0%, 90%),
+      'border-color': rgb(230, 230, 230),
     ),
     'dark': (
-      'background-color': hsl(0, 0%, 16%),
+      'background-color': rgb(51, 46, 46),
-      'text-color': hsl(0, 0%, 96%),
+      'text-color': rgb(245, 245, 245),
-      'icon-color': hsl(0, 0%, 85%),
+      'icon-color': rgb(232, 232, 232),
-      'border-color': hsl(0, 0%, 13%),
+      'border-color': rgb(68, 60, 60),
     ),
   ),
   $toasts
@@ -559,8 +727,8 @@ $btn-font-size: 0.75rem !default;
 $btn-padding-left: 1.5rem !default;
 $btn-padding-right: 1.5rem !default;
 $btn-font-weight: 500 !default;
-$btn-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 2px 10px 0 rgba(0, 0, 0, 0.1) !default;
+$btn-box-shadow: 0 4px 9px -4px rgba(0, 0, 0, 0.35) !default;
-$btn-hover-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.2), 0 4px 20px 0 rgba(0, 0, 0, 0.1) !default;
+$btn-hover-box-shadow: 0 8px 9px -4px rgba(0, 0, 0, 0.15), 0 4px 18px 0 rgba(0, 0, 0, 0.1) !default;
 $btn-focus-box-shadow: $btn-hover-box-shadow !default;
 $btn-active-box-shadow: $btn-hover-box-shadow !default;
 $btn-border-width: 0.125rem !default;
@@ -594,6 +762,10 @@ $btn-padding-bottom-sm: 0.3125rem !default;
 $btn-padding-right-sm: 1rem !default;
 $btn-padding-left-sm: 1rem !default;
 
+$link-color: $primary !default;
+$link-decoration: underline !default;
+$link-shade-percentage: 20% !default;
+$link-hover-color: shift-color($link-color, $link-shade-percentage) !default;
 $btn-link-bgc: #f5f5f5 !default;
 $btn-rounded-border-radius: 10rem !default;
 
@@ -632,6 +804,12 @@ $fixed-action-btn-bottom: 2.1875rem !default;
 $fixed-action-btn-padding-top: 0.9375rem !default;
 $fixed-action-btn-li-margin-bottom: 1.5rem !default;
 
+$btn-contextual-box-shadow: 0 4px 9px -4px !default;
+$btn-contextual-box-shadow-state-first-part: 0 8px 9px -4px !default;
+$btn-contextual-box-shadow-state-second-part: 0 4px 18px 0 !default;
+$btn-secondary-hover-focus-bgc: shade-color(#e3ebf7, 3%) !default;
+$btn-secondary-active-bgc: shade-color(#e3ebf7, 6%) !default;
+
 // Button group
 //
 // Material styling for group of buttons
@@ -902,7 +1080,6 @@ $zindex-tooltip: 1090 !default;
 $nav-tabs-link-border-width: 0 0 2px 0 !default;
 $nav-tabs-link-font-weight: 500 !default;
 $nav-tabs-link-font-size: 12px !default;
-$nav-tabs-link-color: rgba(0, 0, 0, 0.6) !default;
 $nav-tabs-link-padding-top: 17px !default;
 $nav-tabs-link-padding-bottom: 16px !default;
 $nav-tabs-link-padding-x: 29px !default;
@@ -917,7 +1094,14 @@ $nav-pills-link-padding-x: $nav-tabs-link-padding-x !default;
 $nav-pills-link-line-height: 1 !default;
 $nav-pills-link-background-color: $nav-tabs-link-hover-background-color !default;
 $nav-pills-link-font-weight: $nav-tabs-link-font-weight !default;
+
+$nav-tabs-link-color: rgba(0, 0, 0, 0.55) !default;
+$nav-tabs-link-hover-bgc: #f7f7f7 !default;
+
 $nav-pills-link-color: $nav-tabs-link-color !default;
+$nav-pills-link-hover-bgc: $nav-tabs-link-hover-bgc !default;
+$nav-pills-link-active-bgc: #e3ebf7 !default;
+$nav-pills-link-active-color: #285192 !default;
 
 // Navbar
 
@@ -965,6 +1149,11 @@ $pagination-circle-lg-padding-right: 1.399415rem !default;
 $pagination-circle-sm-padding-left: 0.696rem !default;
 $pagination-circle-sm-padding-right: 0.688rem !default;
 
+$page-item-active-link-bgc: #e3ebf7 !default;
+$page-item-active-link-color: #285192 !default;
+$page-item-active-link-box-shadow: 0 4px 9px -4px #e3ebf7 !default;
+$page-item-active-link-font-weight: 500 !default;
+
 // Cards
 
 $card-spacer-y: 1.5rem !default;
@@ -987,6 +1176,11 @@ $accordion-button-active-bg: $white !default;
 $accordion-button-active-color: $primary !default;
 $accordion-button-focus-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.125) !default;
 $accordion-border-radius: $border-radius-xl;
+$accordion-flush-button-box-shadow: inset 0 -2px 0 #f5f5f5 !default;
+$accordion-flush-item-border-bottom: 2px solid #f5f5f5 !default;
+$accordion-borderless-button-border-radius: 0.5rem !default;
+$accordion-borderless-button-bgc: rgb(223, 231, 246) !default;
+$accordion-borderless-button-color: rgb(44, 88, 160) !default;
 
 // Tooltips
 
@@ -1054,6 +1248,19 @@ $list-group-border-radius: $border-radius-xl !default;
 $list-group-item-padding-x: 1.5rem !default;
 $list-group-color: $body-color !default;
 
+$list-group-light-item-py: 1rem !default;
+$list-group-light-item-border: 2px solid hsl(0, 0%, 96%) !default;
+$list-group-light-item-border-width: 2px !default;
+$list-group-light-active-border-radius: 0.5rem !default;
+$list-group-light-active-bgc: hsl(217, 88.2%, 90%) !default;
+$list-group-light-active-color: hsl(217, 88.8%, 35.1%) !default;
+
+$list-group-small-item-py: 0.5 !default;
+
+$list-group-item-active-bgc: rgb(223, 231, 246) !default;
+$list-group-item-active-color: rgb(44, 88, 160) !default;
+$list-group-item-active-border-color: $list-group-item-active-bgc !default;
+
 // Carousel
 
 $carousel-control-prev-icon-bg: none;
@@ -1112,8 +1319,22 @@ $table-cell-padding-y-sm: 0.5rem !default;
 $table-cell-padding-x-sm: $table-cell-padding-x !default;
 $table-striped-bg: rgba(0, 0, 0, 0.02) !default;
 $table-hover-bg: rgba(0, 0, 0, 0.025) !default;
+$table-bg-scale: -80% !default;
+
+// scss-docs-start table-loop
+$table-variants: (
+  'primary': shift-color($primary, $table-bg-scale),
+  'secondary': shift-color($secondary, $table-bg-scale),
+  'success': shift-color($success, $table-bg-scale),
+  'info': shift-color($info, $table-bg-scale),
+  'warning': shift-color($warning, $table-bg-scale),
+  'danger': shift-color($danger, $table-bg-scale),
+  'light': $light,
+  'dark': $dark,
+) !default;
+// scss-docs-end table-loop
 
 // Select
-$form-select-transition: all 0.2s linear;
+$form-select-transition: all 0.2s linear !default;
-$form-select-focus-border-color: #1266f1;
+$form-select-focus-border-color: $primary !default;
-$form-select-focus-border-box-shadow: inset 0px 0px 0px 1px #1266f1;
+$form-select-focus-border-box-shadow: inset 0px 0px 0px 1px $primary !default;

src/scss/free/forms/_form-control.scss

@@ -11,8 +11,8 @@
   &:focus {
     box-shadow: none;
     transition: all 0.1s linear;
-    border-color: #1266f1;
+    border-color: $primary;
-    box-shadow: inset 0px 0px 0px 1px #1266f1;
+    box-shadow: inset 0px 0px 0px 1px $primary;
   }
   &.form-control-sm {
     font-size: 0.775rem;