Add support for sphinx-design

docs/conf.py

@@ -35,6 +35,7 @@
     # External stuff
     "myst_parser",
     "sphinx_copybutton",
+    "sphinx_design",
     "sphinx_inline_tabs",
 ]
 templates_path = ["_templates"]

docs/kitchen-sink/index.md

@@ -13,4 +13,5 @@ lists_tables
 really-long
 structure
 autodoc
+sphinx-design
 ```

docs/kitchen-sink/sphinx-design.md

@@ -0,0 +1,104 @@
+# sphinx-design stuff
+
+## Tabs
+
+````{tab-set}
+```{tab-item} Label1
+Markdown 1
+```
+
+```{tab-item} Label2
+Markdown 2
+```
+````
+
+## Dropdowns
+
+```{dropdown}
+Dropdown content
+```
+
+```{dropdown} Dropdown title
+Dropdown content
+```
+
+```{dropdown} Open dropdown
+:open:
+
+Dropdown content
+```
+
+## Shadows
+
+```{dropdown} Default Shadow
+Dropdown content
+```
+
+```{dropdown} "sm" Shadow
+:class-container: sd-shadow-sm
+
+Dropdown content
+```
+
+```{dropdown} "md" Shadow
+:class-container: sd-shadow-md
+
+Dropdown content
+```
+
+```{dropdown} "lg" Shadow
+:class-container: sd-shadow-lg
+
+Dropdown content
+```
+
+## Cards
+
+```{card} Card Title
+Header
+^^^
+Card content
++++
+Footer
+```
+
+```{card} Clickable Card (external)
+:link: https://example.com
+
+The entire card can be clicked to navigate to <https://example.com>.
+```
+
+## Carousels
+
+````{card-carousel} 2
+
+```{card} card 1
+```
+
+```{card} card 2
+```
+
+```{card} card 3
+```
+
+```{card} card 4
+```
+
+```{card} card 5
+```
+
+```{card} card 6
+```
+
+````
+
+## Article Info
+
+```{article-info}
+:avatar: https://avatars.githubusercontent.com/u/3275593?s=80&v=4
+:avatar-link: https://pradyunsg.me
+:avatar-outline: muted
+:author: Pradyun Gedam
+:date: Aug 15, 2021
+:read-time: 5 min read
+```

docs/reference/tabs.md

@@ -1,10 +1,12 @@
 # Tabs
 
-Tabs are good way to organize content, where the reader has choice they can make (usually based on their environment). Furo works well with [sphinx-inline-tabs], which provides beautiful and functional tabs, grouping code blocks and synchronisation.
+Tabs are good way to organize content, where the reader has choice they can make (usually based on their environment).
 
-```{hint}
-This example is gonna be *very* meta.
-```
+While Sphinx does not provide tabs out-of-the-box, it is achievable by using extensions with Sphinx. Furo works well with the following extensions.
+
+## [sphinx-inline-tabs]
+
+This is a small package that provides one thing: good-looking tabs that work.
 
 ````{furo-demo}
 
@@ -28,4 +30,35 @@ Second.
 
 ````
 
+## [sphinx-design]
+
+A wide ranging extension, providing many reusable components for site content, including tabs.
+
+`````{furo-demo}
+
+````{tab-set}
+```{tab-item} Label1
+Markdown 1
+```
+
+```{tab-item} Label2
+Markdown 2
+```
+````
+
++++
+
+.. tab-set::
+
+    .. tab-item:: Label1
+
+        reStructuredText 1
+
+    .. tab-item:: Label2
+
+        reStructuredText 2
+
+`````
+
 [sphinx-inline-tabs]: https://github.com/pradyunsg/sphinx-inline-tabs#readme
+[sphinx-design]: https://sphinx-design.readthedocs.io/en/furo-theme/

pyproject.toml

@@ -40,6 +40,7 @@ test = [
 doc = [
   "myst-parser",
   "sphinx-copybutton",
+  "sphinx-design",
   "sphinx-inline-tabs",
 ]
 

src/furo/assets/styles/extensions/_index.sass

@@ -1,4 +1,5 @@
 @import "readthedocs"
 @import "copybutton"
+@import "sphinx-design"
 @import "sphinx-inline-tabs"
 @import "sphinx-panels"

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

@@ -0,0 +1,46 @@
+body
+  // Shadows
+  --sd-color-shadow: rgba(0, 0, 0, 0.05)
+
+  // Cards
+  --sd-color-card-border: var(--color-card-border)
+  --sd-color-card-border-hover: var(--color-brand-content)
+  --sd-color-card-background: var(--color-card-background)
+  --sd-color-card-text: var(--color-foreground-primary)
+  --sd-color-card-header: var(--color-card-marginals-background)
+  --sd-color-card-footer: var(--color-card-marginals-background)
+
+  // Tabs
+  --sd-color-tabs-label-active: var(--color-brand-content)
+  --sd-color-tabs-label-hover: var(--color-foreground-muted)
+  --sd-color-tabs-label-inactive: var(--color-foreground-muted)
+  --sd-color-tabs-underline-active: var(--color-brand-content)
+  --sd-color-tabs-underline-hover: var(--color-foreground-border)
+  --sd-color-tabs-underline-inactive: var(--color-background-border)
+  --sd-color-tabs-overline: var(--color-background-border)
+  --sd-color-tabs-underline: var(--color-background-border)
+
+// Tabs
+.sd-tab-content
+  box-shadow: 0 -2px var(--sd-color-tabs-overline), 0 1px var(--sd-color-tabs-underline)
+
+// Shadows
+.sd-card  // Have a shadow by default
+  box-shadow: 0 0.1rem 0.25rem var(--sd-color-shadow), 0 0 0.0625rem rgba(0, 0, 0, 0.1)
+
+.sd-shadow-sm
+  box-shadow: 0 0.1rem 0.25rem var(--sd-color-shadow), 0 0 0.0625rem rgba(0, 0, 0, 0.1) !important
+
+.sd-shadow-md
+  box-shadow: 0 0.3rem 0.75rem var(--sd-color-shadow), 0 0 0.0625rem rgba(0, 0, 0, 0.1) !important
+
+.sd-shadow-lg
+  box-shadow: 0 0.6rem 1.5rem var(--sd-color-shadow), 0 0 0.0625rem rgba(0, 0, 0, 0.1) !important
+
+// Cards
+.sd-card-hover:hover  // Don't change scale on hover
+  transform: none
+
+.sd-cards-carousel  // Have a bit of gap in the carousel by default
+  gap: 0.25rem
+  padding: 0.25rem

src/furo/assets/styles/variables/_colors.scss

@@ -59,6 +59,11 @@
   // - special literal values (eg: transparent, none)
   //////////////////////////////////////////////////////////////////////////////
 
+  // Cards
+  --color-card-border: var(--color-background-secondary);
+  --color-card-background: transparent;
+  --color-card-marginals-background: var(--color-background-secondary);
+
   // Header
   --color-header-background: var(--color-background-primary);
   --color-header-border: var(--color-background-border);
@@ -147,4 +152,9 @@
 
   // Admonitions
   --color-admonition-background: #18181a;
+
+  // Cards
+  --color-card-border: var(--color-background-secondary);
+  --color-card-background: #18181a;
+  --color-card-marginals-background: var(--color-background-hover);
 }