Add light badges from #35408

site/assets/scss/_snippets.scss

@@ -1,3 +1,13 @@
+// Light badges
+@each $color, $value in $theme-colors {
+  $badge-light-bg: shift-color($value, -80%);
+  .badge-light-#{$color} {
+    background-color: $badge-light-bg;
+  }
+}
+
+
+// Light buttons
 @each $color, $value in $theme-colors {
   $btn-light-bg: shift-color($value, -80%);
   $btn-light-border: shift-color($value, -80%);

site/content/docs/5.1/extend/snippets.md

@@ -7,6 +7,24 @@ group: extend
 
 ## Components
 
+### Light badges
+
+{{< example >}}
+{{< badge.inline >}}
+{{- range (index $.Site.Data "theme-colors") }}
+<span class="badge badge-light-{{ .name }} text-dark">{{ .name | title }}</span>{{- end -}}
+{{< /badge.inline >}}
+{{< /example >}}
+
+```scss
+@each $color, $value in $theme-colors {
+  $badge-light-bg: shift-color($value, -80%);
+  .badge-light-#{$color} {
+    background-color: $badge-light-bg;
+  }
+}
+```
+
 ### Light buttons
 
 {{< example >}}