Add more sphinx-design components

Also tweak how the primary button is used.

docs/kitchen-sink/sphinx-design.md

@@ -1,5 +1,9 @@
 # sphinx-design stuff
 
+## Icons
+
+{octicon}`heart-fill;1em;sd-text-danger`
+
 ## Tabs
 
 ````{tab-set}
@@ -102,3 +106,31 @@ The entire card can be clicked to navigate to <https://example.com>.
 :date: Aug 15, 2021
 :read-time: 5 min read
 ```
+
+## Badges
+
+{bdg}`plain badge` 
+{bdg-primary}`primary` {bdg-primary-line}`primary-line` 
+{bdg-secondary}`secondary` {bdg-secondary-line}`secondary-line` 
+{bdg-success}`success` {bdg-success-line}`success-line` 
+{bdg-info}`info` {bdg-info-line}`info-line` 
+{bdg-warning}`warning` {bdg-warning-line}`warning-line` 
+{bdg-danger}`danger` {bdg-danger-line}`danger-line` 
+{bdg-light}`light` {bdg-light-line}`light-line` 
+{bdg-dark}`dark` {bdg-dark-line}`dark-line`
+
+## Buttons
+
+```{button-link} https://example.com
+Button text
+```
+
+```{button-link} https://example.com
+:color: primary
+Button text
+```
+
+```{button-link} https://example.com
+:color: secondary
+:expand:
+```

src/furo/assets/styles/extensions/_sphinx-design.sass

@@ -1,4 +1,9 @@
 body
+ // Colors
+ --sd-color-primary: var(--color-brand-primary)
+ --sd-color-primary-highlight: var(--color-brand-content)
+ --sd-color-primary-text: var(--color-background-primary)
+
  // Shadows
  --sd-color-shadow: rgba(0, 0, 0, 0.05)