From dbecbf079d8a11e06562d208ec76ccda99314402 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Wed, 14 Apr 2021 00:34:56 -0700
Subject: [PATCH] Add Extend > Snippets docs page

---
 site/assets/scss/_snippets.scss          |  7 +++++
 site/assets/scss/docs.scss               |  1 +
 site/content/docs/5.1/extend/snippets.md | 33 ++++++++++++++++++++++++
 site/data/sidebar.yml                    |  1 +
 4 files changed, 42 insertions(+)
 create mode 100644 site/assets/scss/_snippets.scss
 create mode 100644 site/content/docs/5.1/extend/snippets.md

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";
diff --git a/site/content/docs/5.1/extend/snippets.md b/site/content/docs/5.1/extend/snippets.md
new file mode 100644
index 000000000..a006194e7
--- /dev/null
+++ b/site/content/docs/5.1/extend/snippets.md
@@ -0,0 +1,33 @@
+---
+layout: docs
+title: Snippets
+description: Extend Bootstrap with some common snippets of source code not included in the main project.
+group: extend
+---
+
+## Components
+
+### Light buttons
+
+{{< example >}}
+{{< buttons.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<button type="button" class="btn btn-light-{{ .name }}">{{ .name | title }}</button>
+{{- end -}}
+{{< /buttons.inline >}}
+{{< /example >}}
+
+```scss
+@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%));
+  }
+}
+```
+
+## Utilities
+
+- Opacity
+- Expanded widths/heights
diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml
index df95692af..5085c8795 100644
--- a/site/data/sidebar.yml
+++ b/site/data/sidebar.yml
@@ -118,6 +118,7 @@
 - title: Extend
   pages:
     - title: Approach
+    - title: Snippets
     - title: Icons
 
 - title: About