Add Extend > Snippets docs pageextend-snippets

2 files changed, 8 insertions, 0 deletions

diff --git a/site/assets/scss/_snippets.scss b/site/assets/scss/_snippets.scss
new file mode 100644
index 000000000..2e0945a36
--- /dev/null
+++ b/site/assets/scss/_snippets.scss
@@ -0,0 +1,7 @@
+@each $color, $value in $theme-colors {
+  $btn-light-bg: shift-color($value, -80%);
+  $btn-light-border: shift-color($value, -80%);
+  .btn-light-#{$color} {
+    @include button-variant($btn-light-bg, $btn-light-border, shift-color($value, 50%));
+  }
+}
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index 8b7bc99a1..6fad4a1fe 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -53,6 +53,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default
 @import "colors";
 @import "clipboard-js";
 @import "placeholder-img";
+@import "snippets";
 
 // Load docs dependencies
 @import "syntax";