buttons plugin, extra colors

_config.yml

@@ -11,18 +11,23 @@ debug: false
 dark-theme: false
 
 plugins:
-- jekyll-random
-- jekyll-tidy
-- jekyll-timeago
-- jekyll-redirect-from
+  - jekyll-random
+  - jekyll-tidy
+  - jekyll-timeago
+  - jekyll-redirect-from
+
+tabler-plugins:
+  - tabler-flags
+  - tabler-payments
+  - tabler-buttons
 
 exclude:
-- .jekyll-cache
+  - .jekyll-cache
 
 keep_files:
-- css/ui-kit.css
-- css/dark.css
-- css/rtl.css
+  - css/ui-kit.css
+  - css/dark.css
+  - css/rtl.css
 #- js/ui-kit.js
 
 markdown: kramdown
@@ -49,8 +54,7 @@ collections:
     output: true
 
 defaults:
-  -
-    scope:
+  - scope:
       type: "pages"
       path: "*.md"
     values:
@@ -62,14 +66,12 @@ defaults:
     values:
       layout: default
       menu-layout: horizontal
-  -
-    scope:
+  - scope:
       type: "docs"
     values:
       layout: docs
       menu-layout: horizontal
-  -
-    scope:
+  - scope:
       type: "components"
     values:
       layout: component

pages/_includes/layout/css.html

@@ -11,5 +11,6 @@
 <link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/tabler{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
 
 <!-- Tabler Plugins -->
-<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/tabler-flags{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
-<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/tabler-payments{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet" />
+{% for plugin in site.tabler-plugins %}
+<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/{{ plugin }}{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
+{% endfor %}

scss/_config.scss

@@ -3,3 +3,6 @@
 @import "variables";
 @import "utilities";
 @import "mixins";
+
+@import "bootstrap-config";
+@import "mixins-override";

scss/_variables.scss

@@ -364,6 +364,5 @@ $payment-sizes: (
 
 $enable-social-colors: true !default;
 $enable-ghost-buttons: true !default;
-$enable-color-hues: true !default;
 $enable-extra-colors: true !default;
 $enable-gradients: false !default;

scss/tabler-buttons.scss

+@import "config";
+@import "ui/buttons-extra";
+

scss/tabler.scss

@@ -6,11 +6,8 @@
  */
 
 @import "config";
-@import "bootstrap-config";
-@import "mixins-override";
 @import "bootstrap-components";
 
-
 @import "fonts/webfonts";
 
 @import "layout/core";

scss/ui/_buttons-extra.scss

+@if $enable-ghost-buttons {
+  @each $vendor, $color in $theme-colors {
+    .btn-ghost-#{$vendor} {
+      @include button-variant(transparent, transparent, $color, $color, $color, #fff, $color, $color);
+    }
+  }
+}
+
+@if $enable-social-colors {
+  @each $vendor, $color in $social-colors {
+    .btn-#{$vendor} {
+      @include button-variant($color, $color);
+    }
+
+    .btn-outline-#{$vendor} {
+      @include button-outline-variant($color, $color);
+    }
+  }
+}
+
+@if $enable-extra-colors {
+  @each $name, $color in $colors {
+    .btn-#{$name} {
+      @include button-variant($color, $color);
+    }
+
+    .btn-outline-#{$name} {
+      @include button-outline-variant($color, $color);
+    }
+  }
+}

scss/ui/_buttons.scss

 .btn-secondary {
   @include button-variant($white, $border-color, $dark);
+  background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba($dark, .04) 100%);
 }
 
 .btn-outlined-secondary {
@@ -14,10 +15,6 @@
       text-shadow: 1px 1px 0 rgba(0, 0, 0, .02);
     }
 
-    &:not(.btn-light):not(.btn-link) {
-      background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0), rgba($dark, .04) 90%);
-    }
-
     &:not(:focus):not(.focus) {
       box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .05), inset 0 2px 0 -1px rgba(255, 255, 255, .1);
     }
@@ -101,38 +98,6 @@
   }
 }
 
-@if $enable-ghost-buttons {
-  @each $vendor, $color in $theme-colors {
-    .btn-ghost-#{$vendor} {
-      @include button-variant(transparent, transparent, $color, $color, $color, #fff, $color, $color);
-    }
-  }
-}
-
-@if $enable-social-colors {
-  @each $vendor, $color in $social-colors {
-    .btn-#{$vendor} {
-      @include button-variant($color, $color);
-    }
-
-    .btn-outline-#{$vendor} {
-      @include button-outline-variant($color, $color);
-    }
-  }
-}
-
-@if $enable-extra-colors {
-  @each $name, $color in $colors {
-    .btn-#{$name} {
-      @include button-variant($color, $color);
-    }
-
-    .btn-outline-#{$name} {
-      @include button-outline-variant($color, $color);
-    }
-  }
-}
-
 .btn-options {
   display: flex;
   align-items: center;

scss/utils/_colors.scss

 // stylelint-disable declaration-no-important
 
-/**
-COLORS VARIATIONS
- */
-@if $enable-color-hues {
-  @each $color, $value in $colors {
-    .bg-#{$color}-lighter { background: mix($value, #fff, 30%); }
-    .bg-#{$color}-light { background: mix($value, #fff, 70%); }
-    .bg-#{$color}-dark { background: mix($value, #000, 80%); }
-    .bg-#{$color}-darker { background: mix($value, #000, 40%); }
-  }
-}
-
 /**
 SOCIAL COLORS
  */
-@if $enable-social-colors {
-  @each $color, $value in $social-colors {
-    .bg-#{$color} {
-      color: #fff !important;
-      background: $value !important;
-    }
+@each $color, $value in $social-colors {
+  .bg-#{$color} {
+    color: #fff !important;
+    background: $value !important;
+  }
 
-    .text-#{$color} {
-      color: $value !important;
-    }
+  .text-#{$color} {
+    color: $value !important;
   }
 }