[libadwaita/wip/exalm/screenshots] doc: Add style class screenshots

[Alexander Mikhaylenko <alexm src gnome org>]

commit f34f95eae61aa586ae44cd2b1630cef985663674
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Fri Dec 17 02:14:38 2021 +0500

    doc: Add style class screenshots

 doc/images/app-icons-dark.png                     | Bin 0 -> 9137 bytes
 doc/images/app-icons.png                          | Bin 0 -> 9137 bytes
 doc/images/boxed-lists-dark.png                   | Bin 0 -> 3043 bytes
 doc/images/boxed-lists.png                        | Bin 0 -> 3825 bytes
 doc/images/buttons-circular-dark.png              | Bin 0 -> 1125 bytes
 doc/images/buttons-circular.png                   | Bin 0 -> 1112 bytes
 doc/images/buttons-destructive-action-dark.png    | Bin 0 -> 2198 bytes
 doc/images/buttons-destructive-action.png         | Bin 0 -> 2183 bytes
 doc/images/buttons-flat-dark.png                  | Bin 0 -> 1356 bytes
 doc/images/buttons-flat.png                       | Bin 0 -> 1358 bytes
 doc/images/buttons-opaque-dark.png                | Bin 0 -> 3012 bytes
 doc/images/buttons-opaque.png                     | Bin 0 -> 3073 bytes
 doc/images/buttons-pill-dark.png                  | Bin 0 -> 1260 bytes
 doc/images/buttons-pill.png                       | Bin 0 -> 1238 bytes
 doc/images/buttons-raised-dark.png                | Bin 0 -> 1621 bytes
 doc/images/buttons-raised.png                     | Bin 0 -> 1644 bytes
 doc/images/buttons-suggested-action-dark.png      | Bin 0 -> 2429 bytes
 doc/images/buttons-suggested-action.png           | Bin 0 -> 2429 bytes
 doc/images/cards-dark.png                         | Bin 0 -> 2203 bytes
 doc/images/cards.png                              | Bin 0 -> 2445 bytes
 doc/images/deprecated-app-notification-dark.png   | Bin 0 -> 2633 bytes
 doc/images/deprecated-app-notification.png        | Bin 0 -> 2633 bytes
 doc/images/deprecated-sidebar-dark.png            | Bin 0 -> 1429 bytes
 doc/images/deprecated-sidebar.png                 | Bin 0 -> 1259 bytes
 doc/images/devel-window-dark.png                  | Bin 0 -> 8278 bytes
 doc/images/devel-window.png                       | Bin 0 -> 8076 bytes
 doc/images/dim-label-dark.png                     | Bin 0 -> 2911 bytes
 doc/images/dim-label.png                          | Bin 0 -> 2818 bytes
 doc/images/flat-header-bar-dark.png               | Bin 0 -> 5532 bytes
 doc/images/flat-header-bar.png                    | Bin 0 -> 5465 bytes
 doc/images/linked-controls-dark.png               | Bin 0 -> 3483 bytes
 doc/images/linked-controls.png                    | Bin 0 -> 3555 bytes
 doc/images/navigation-sidebar-dark.png            | Bin 0 -> 1618 bytes
 doc/images/navigation-sidebar.png                 | Bin 0 -> 1430 bytes
 doc/images/osd-buttons-dark.png                   | Bin 0 -> 655 bytes
 doc/images/osd-buttons.png                        | Bin 0 -> 655 bytes
 doc/images/osd-dark.png                           | Bin 0 -> 1196 bytes
 doc/images/osd-progress-bar-dark.png              | Bin 0 -> 5578 bytes
 doc/images/osd-progress-bar.png                   | Bin 0 -> 5512 bytes
 doc/images/osd-toolbar-dark.png                   | Bin 0 -> 2331 bytes
 doc/images/osd-toolbar.png                        | Bin 0 -> 2325 bytes
 doc/images/osd.png                                | Bin 0 -> 1196 bytes
 doc/images/popover-menu-list-dark.png             | Bin 0 -> 4178 bytes
 doc/images/popover-menu-list.png                  | Bin 0 -> 4257 bytes
 doc/images/selection-mode-checks-dark.png         | Bin 0 -> 1159 bytes
 doc/images/selection-mode-checks.png              | Bin 0 -> 1136 bytes
 doc/images/status-page-compact-dark.png           | Bin 0 -> 5594 bytes
 doc/images/status-page-compact.png                | Bin 0 -> 5386 bytes
 doc/images/style-background-dark.png              | Bin 0 -> 1682 bytes
 doc/images/style-background.png                   | Bin 0 -> 1659 bytes
 doc/images/style-colors-dark.png                  | Bin 0 -> 5371 bytes
 doc/images/style-colors.png                       | Bin 0 -> 5474 bytes
 doc/images/style-frame-dark.png                   | Bin 0 -> 720 bytes
 doc/images/style-frame.png                        | Bin 0 -> 678 bytes
 doc/images/style-view-dark.png                    | Bin 0 -> 984 bytes
 doc/images/style-view.png                         | Bin 0 -> 962 bytes
 doc/images/toolbar-dark.png                       | Bin 0 -> 1765 bytes
 doc/images/toolbar-flat-dark.png                  | Bin 0 -> 1148 bytes
 doc/images/toolbar-flat.png                       | Bin 0 -> 1101 bytes
 doc/images/toolbar-raised-dark.png                | Bin 0 -> 1582 bytes
 doc/images/toolbar-raised.png                     | Bin 0 -> 1567 bytes
 doc/images/toolbar-spacer-dark.png                | Bin 0 -> 1419 bytes
 doc/images/toolbar-spacer.png                     | Bin 0 -> 1344 bytes
 doc/images/toolbar.png                            | Bin 0 -> 1710 bytes
 doc/images/typography-body-dark.png               | Bin 0 -> 5174 bytes
 doc/images/typography-body.png                    | Bin 0 -> 5269 bytes
 doc/images/typography-captions-dark.png           | Bin 0 -> 3348 bytes
 doc/images/typography-captions.png                | Bin 0 -> 3320 bytes
 doc/images/typography-heading-dark.png            | Bin 0 -> 990 bytes
 doc/images/typography-heading.png                 | Bin 0 -> 939 bytes
 doc/images/typography-large-title-dark.png        | Bin 0 -> 1693 bytes
 doc/images/typography-large-title.png             | Bin 0 -> 1676 bytes
 doc/images/typography-monospace-dark.png          | Bin 0 -> 1178 bytes
 doc/images/typography-monospace.png               | Bin 0 -> 1149 bytes
 doc/images/typography-numeric-dark.png            | Bin 0 -> 3847 bytes
 doc/images/typography-numeric.png                 | Bin 0 -> 3888 bytes
 doc/images/typography-titles-dark.png             | Bin 0 -> 3125 bytes
 doc/images/typography-titles.png                  | Bin 0 -> 3063 bytes
 doc/libadwaita.toml.in                            |  79 +++++++++
 doc/style-classes.md                              | 202 ++++++++++++++++++++++
 doc/tools/data/app-icons.ui                       |  32 ++++
 doc/tools/data/boxed-lists.ui                     |  31 ++++
 doc/tools/data/buttons-circular.ui                |  48 +++++
 doc/tools/data/buttons-destructive-action.ui      |  43 +++++
 doc/tools/data/buttons-flat.ui                    |  43 +++++
 doc/tools/data/buttons-opaque.ui                  |  34 ++++
 doc/tools/data/buttons-pill.ui                    |  11 ++
 doc/tools/data/buttons-raised.ui                  |  43 +++++
 doc/tools/data/buttons-suggested-action.ui        |  43 +++++
 doc/tools/data/cards.ui                           |  32 ++++
 doc/tools/data/deprecated-app-notification.ui     |  31 ++++
 doc/tools/data/deprecated-sidebar.ui              |  33 ++++
 doc/tools/data/devel-window.ui                    |  16 ++
 doc/tools/data/dim-label.ui                       |  20 +++
 doc/tools/data/flat-header-bar.ui                 |  20 +++
 doc/tools/data/linked-controls.ui                 | 133 ++++++++++++++
 doc/tools/data/navigation-sidebar.ui              |  29 ++++
 doc/tools/data/osd-buttons.ui                     |  24 +++
 doc/tools/data/osd-progress-bar.ui                |  25 +++
 doc/tools/data/osd-toolbar.ui                     |  44 +++++
 doc/tools/data/osd.ui                             |  13 ++
 doc/tools/data/popover-menu-list.ui               |  37 ++++
 doc/tools/data/selection-mode-checks.ui           |  23 +++
 doc/tools/data/status-page-compact.ui             |  14 ++
 doc/tools/data/style-background.ui                |  13 ++
 doc/tools/data/style-colors.ui                    | 108 ++++++++++++
 doc/tools/data/style-frame.ui                     |  13 ++
 doc/tools/data/style-view.ui                      |  13 ++
 doc/tools/data/toolbar-flat.ui                    |  58 +++++++
 doc/tools/data/toolbar-raised.ui                  |  54 ++++++
 doc/tools/data/toolbar-spacer.ui                  |  67 +++++++
 doc/tools/data/toolbar.ui                         |  60 +++++++
 doc/tools/data/typography-body.ui                 |  21 +++
 doc/tools/data/typography-captions.ui             |  36 ++++
 doc/tools/data/typography-heading.ui              |  18 ++
 doc/tools/data/typography-large-title.ui          |  18 ++
 doc/tools/data/typography-monospace.ui            |  18 ++
 doc/tools/data/typography-numeric.ui              |  29 ++++
 doc/tools/data/typography-titles.ui               |  52 ++++++
 doc/tools/icons/scalable/apps/org.gnome.Boxes.svg |   1 +
 doc/tools/screenshot.gresources.xml               |  42 +++++
 doc/tools/style.css                               |  20 +++
 122 files changed, 1744 insertions(+)
---
diff --git a/doc/images/app-icons-dark.png b/doc/images/app-icons-dark.png
new file mode 100644
index 00000000..ea953d62
Binary files /dev/null and b/doc/images/app-icons-dark.png differ
diff --git a/doc/images/app-icons.png b/doc/images/app-icons.png
new file mode 100644
index 00000000..ea953d62
Binary files /dev/null and b/doc/images/app-icons.png differ
diff --git a/doc/images/boxed-lists-dark.png b/doc/images/boxed-lists-dark.png
new file mode 100644
index 00000000..f4e78e44
Binary files /dev/null and b/doc/images/boxed-lists-dark.png differ
diff --git a/doc/images/boxed-lists.png b/doc/images/boxed-lists.png
new file mode 100644
index 00000000..133f73bd
Binary files /dev/null and b/doc/images/boxed-lists.png differ
diff --git a/doc/images/buttons-circular-dark.png b/doc/images/buttons-circular-dark.png
new file mode 100644
index 00000000..905725fc
Binary files /dev/null and b/doc/images/buttons-circular-dark.png differ
diff --git a/doc/images/buttons-circular.png b/doc/images/buttons-circular.png
new file mode 100644
index 00000000..f47545d8
Binary files /dev/null and b/doc/images/buttons-circular.png differ
diff --git a/doc/images/buttons-destructive-action-dark.png b/doc/images/buttons-destructive-action-dark.png
new file mode 100644
index 00000000..4204df00
Binary files /dev/null and b/doc/images/buttons-destructive-action-dark.png differ
diff --git a/doc/images/buttons-destructive-action.png b/doc/images/buttons-destructive-action.png
new file mode 100644
index 00000000..ea5889a7
Binary files /dev/null and b/doc/images/buttons-destructive-action.png differ
diff --git a/doc/images/buttons-flat-dark.png b/doc/images/buttons-flat-dark.png
new file mode 100644
index 00000000..60d9dc01
Binary files /dev/null and b/doc/images/buttons-flat-dark.png differ
diff --git a/doc/images/buttons-flat.png b/doc/images/buttons-flat.png
new file mode 100644
index 00000000..1eab01f1
Binary files /dev/null and b/doc/images/buttons-flat.png differ
diff --git a/doc/images/buttons-opaque-dark.png b/doc/images/buttons-opaque-dark.png
new file mode 100644
index 00000000..66d11a49
Binary files /dev/null and b/doc/images/buttons-opaque-dark.png differ
diff --git a/doc/images/buttons-opaque.png b/doc/images/buttons-opaque.png
new file mode 100644
index 00000000..112f9ff6
Binary files /dev/null and b/doc/images/buttons-opaque.png differ
diff --git a/doc/images/buttons-pill-dark.png b/doc/images/buttons-pill-dark.png
new file mode 100644
index 00000000..2b345591
Binary files /dev/null and b/doc/images/buttons-pill-dark.png differ
diff --git a/doc/images/buttons-pill.png b/doc/images/buttons-pill.png
new file mode 100644
index 00000000..a195f27c
Binary files /dev/null and b/doc/images/buttons-pill.png differ
diff --git a/doc/images/buttons-raised-dark.png b/doc/images/buttons-raised-dark.png
new file mode 100644
index 00000000..6ce71142
Binary files /dev/null and b/doc/images/buttons-raised-dark.png differ
diff --git a/doc/images/buttons-raised.png b/doc/images/buttons-raised.png
new file mode 100644
index 00000000..dc02061a
Binary files /dev/null and b/doc/images/buttons-raised.png differ
diff --git a/doc/images/buttons-suggested-action-dark.png b/doc/images/buttons-suggested-action-dark.png
new file mode 100644
index 00000000..f6807086
Binary files /dev/null and b/doc/images/buttons-suggested-action-dark.png differ
diff --git a/doc/images/buttons-suggested-action.png b/doc/images/buttons-suggested-action.png
new file mode 100644
index 00000000..f6807086
Binary files /dev/null and b/doc/images/buttons-suggested-action.png differ
diff --git a/doc/images/cards-dark.png b/doc/images/cards-dark.png
new file mode 100644
index 00000000..6f880a68
Binary files /dev/null and b/doc/images/cards-dark.png differ
diff --git a/doc/images/cards.png b/doc/images/cards.png
new file mode 100644
index 00000000..02068332
Binary files /dev/null and b/doc/images/cards.png differ
diff --git a/doc/images/deprecated-app-notification-dark.png b/doc/images/deprecated-app-notification-dark.png
new file mode 100644
index 00000000..290787ba
Binary files /dev/null and b/doc/images/deprecated-app-notification-dark.png differ
diff --git a/doc/images/deprecated-app-notification.png b/doc/images/deprecated-app-notification.png
new file mode 100644
index 00000000..290787ba
Binary files /dev/null and b/doc/images/deprecated-app-notification.png differ
diff --git a/doc/images/deprecated-sidebar-dark.png b/doc/images/deprecated-sidebar-dark.png
new file mode 100644
index 00000000..e7e593c3
Binary files /dev/null and b/doc/images/deprecated-sidebar-dark.png differ
diff --git a/doc/images/deprecated-sidebar.png b/doc/images/deprecated-sidebar.png
new file mode 100644
index 00000000..bea9fd31
Binary files /dev/null and b/doc/images/deprecated-sidebar.png differ
diff --git a/doc/images/devel-window-dark.png b/doc/images/devel-window-dark.png
new file mode 100644
index 00000000..ac85e121
Binary files /dev/null and b/doc/images/devel-window-dark.png differ
diff --git a/doc/images/devel-window.png b/doc/images/devel-window.png
new file mode 100644
index 00000000..f081f8b6
Binary files /dev/null and b/doc/images/devel-window.png differ
diff --git a/doc/images/dim-label-dark.png b/doc/images/dim-label-dark.png
new file mode 100644
index 00000000..9caf415c
Binary files /dev/null and b/doc/images/dim-label-dark.png differ
diff --git a/doc/images/dim-label.png b/doc/images/dim-label.png
new file mode 100644
index 00000000..7bf91079
Binary files /dev/null and b/doc/images/dim-label.png differ
diff --git a/doc/images/flat-header-bar-dark.png b/doc/images/flat-header-bar-dark.png
new file mode 100644
index 00000000..e8008e82
Binary files /dev/null and b/doc/images/flat-header-bar-dark.png differ
diff --git a/doc/images/flat-header-bar.png b/doc/images/flat-header-bar.png
new file mode 100644
index 00000000..d0dcf095
Binary files /dev/null and b/doc/images/flat-header-bar.png differ
diff --git a/doc/images/linked-controls-dark.png b/doc/images/linked-controls-dark.png
new file mode 100644
index 00000000..1b9e1b02
Binary files /dev/null and b/doc/images/linked-controls-dark.png differ
diff --git a/doc/images/linked-controls.png b/doc/images/linked-controls.png
new file mode 100644
index 00000000..b29ed1ec
Binary files /dev/null and b/doc/images/linked-controls.png differ
diff --git a/doc/images/navigation-sidebar-dark.png b/doc/images/navigation-sidebar-dark.png
new file mode 100644
index 00000000..bdc6a3f7
Binary files /dev/null and b/doc/images/navigation-sidebar-dark.png differ
diff --git a/doc/images/navigation-sidebar.png b/doc/images/navigation-sidebar.png
new file mode 100644
index 00000000..fe8952a8
Binary files /dev/null and b/doc/images/navigation-sidebar.png differ
diff --git a/doc/images/osd-buttons-dark.png b/doc/images/osd-buttons-dark.png
new file mode 100644
index 00000000..ce5fa509
Binary files /dev/null and b/doc/images/osd-buttons-dark.png differ
diff --git a/doc/images/osd-buttons.png b/doc/images/osd-buttons.png
new file mode 100644
index 00000000..ce5fa509
Binary files /dev/null and b/doc/images/osd-buttons.png differ
diff --git a/doc/images/osd-dark.png b/doc/images/osd-dark.png
new file mode 100644
index 00000000..ec39b9c4
Binary files /dev/null and b/doc/images/osd-dark.png differ
diff --git a/doc/images/osd-progress-bar-dark.png b/doc/images/osd-progress-bar-dark.png
new file mode 100644
index 00000000..466bf5d8
Binary files /dev/null and b/doc/images/osd-progress-bar-dark.png differ
diff --git a/doc/images/osd-progress-bar.png b/doc/images/osd-progress-bar.png
new file mode 100644
index 00000000..13773617
Binary files /dev/null and b/doc/images/osd-progress-bar.png differ
diff --git a/doc/images/osd-toolbar-dark.png b/doc/images/osd-toolbar-dark.png
new file mode 100644
index 00000000..9d0e5b38
Binary files /dev/null and b/doc/images/osd-toolbar-dark.png differ
diff --git a/doc/images/osd-toolbar.png b/doc/images/osd-toolbar.png
new file mode 100644
index 00000000..7315905e
Binary files /dev/null and b/doc/images/osd-toolbar.png differ
diff --git a/doc/images/osd.png b/doc/images/osd.png
new file mode 100644
index 00000000..ec39b9c4
Binary files /dev/null and b/doc/images/osd.png differ
diff --git a/doc/images/popover-menu-list-dark.png b/doc/images/popover-menu-list-dark.png
new file mode 100644
index 00000000..15df2018
Binary files /dev/null and b/doc/images/popover-menu-list-dark.png differ
diff --git a/doc/images/popover-menu-list.png b/doc/images/popover-menu-list.png
new file mode 100644
index 00000000..d4dff686
Binary files /dev/null and b/doc/images/popover-menu-list.png differ
diff --git a/doc/images/selection-mode-checks-dark.png b/doc/images/selection-mode-checks-dark.png
new file mode 100644
index 00000000..d2629234
Binary files /dev/null and b/doc/images/selection-mode-checks-dark.png differ
diff --git a/doc/images/selection-mode-checks.png b/doc/images/selection-mode-checks.png
new file mode 100644
index 00000000..c0d91a8d
Binary files /dev/null and b/doc/images/selection-mode-checks.png differ
diff --git a/doc/images/status-page-compact-dark.png b/doc/images/status-page-compact-dark.png
new file mode 100644
index 00000000..7a1c9f41
Binary files /dev/null and b/doc/images/status-page-compact-dark.png differ
diff --git a/doc/images/status-page-compact.png b/doc/images/status-page-compact.png
new file mode 100644
index 00000000..f99bd359
Binary files /dev/null and b/doc/images/status-page-compact.png differ
diff --git a/doc/images/style-background-dark.png b/doc/images/style-background-dark.png
new file mode 100644
index 00000000..007975e5
Binary files /dev/null and b/doc/images/style-background-dark.png differ
diff --git a/doc/images/style-background.png b/doc/images/style-background.png
new file mode 100644
index 00000000..c8726f1f
Binary files /dev/null and b/doc/images/style-background.png differ
diff --git a/doc/images/style-colors-dark.png b/doc/images/style-colors-dark.png
new file mode 100644
index 00000000..4e1b82ee
Binary files /dev/null and b/doc/images/style-colors-dark.png differ
diff --git a/doc/images/style-colors.png b/doc/images/style-colors.png
new file mode 100644
index 00000000..1aba593d
Binary files /dev/null and b/doc/images/style-colors.png differ
diff --git a/doc/images/style-frame-dark.png b/doc/images/style-frame-dark.png
new file mode 100644
index 00000000..daa9cc4b
Binary files /dev/null and b/doc/images/style-frame-dark.png differ
diff --git a/doc/images/style-frame.png b/doc/images/style-frame.png
new file mode 100644
index 00000000..b408fe5e
Binary files /dev/null and b/doc/images/style-frame.png differ
diff --git a/doc/images/style-view-dark.png b/doc/images/style-view-dark.png
new file mode 100644
index 00000000..cd9d93f6
Binary files /dev/null and b/doc/images/style-view-dark.png differ
diff --git a/doc/images/style-view.png b/doc/images/style-view.png
new file mode 100644
index 00000000..33ec8f1a
Binary files /dev/null and b/doc/images/style-view.png differ
diff --git a/doc/images/toolbar-dark.png b/doc/images/toolbar-dark.png
new file mode 100644
index 00000000..5e85ec7c
Binary files /dev/null and b/doc/images/toolbar-dark.png differ
diff --git a/doc/images/toolbar-flat-dark.png b/doc/images/toolbar-flat-dark.png
new file mode 100644
index 00000000..dccd3405
Binary files /dev/null and b/doc/images/toolbar-flat-dark.png differ
diff --git a/doc/images/toolbar-flat.png b/doc/images/toolbar-flat.png
new file mode 100644
index 00000000..6ca154e5
Binary files /dev/null and b/doc/images/toolbar-flat.png differ
diff --git a/doc/images/toolbar-raised-dark.png b/doc/images/toolbar-raised-dark.png
new file mode 100644
index 00000000..c3223cc7
Binary files /dev/null and b/doc/images/toolbar-raised-dark.png differ
diff --git a/doc/images/toolbar-raised.png b/doc/images/toolbar-raised.png
new file mode 100644
index 00000000..ce1ee350
Binary files /dev/null and b/doc/images/toolbar-raised.png differ
diff --git a/doc/images/toolbar-spacer-dark.png b/doc/images/toolbar-spacer-dark.png
new file mode 100644
index 00000000..35f6b14d
Binary files /dev/null and b/doc/images/toolbar-spacer-dark.png differ
diff --git a/doc/images/toolbar-spacer.png b/doc/images/toolbar-spacer.png
new file mode 100644
index 00000000..f44352fc
Binary files /dev/null and b/doc/images/toolbar-spacer.png differ
diff --git a/doc/images/toolbar.png b/doc/images/toolbar.png
new file mode 100644
index 00000000..e4d52373
Binary files /dev/null and b/doc/images/toolbar.png differ
diff --git a/doc/images/typography-body-dark.png b/doc/images/typography-body-dark.png
new file mode 100644
index 00000000..7596ce9e
Binary files /dev/null and b/doc/images/typography-body-dark.png differ
diff --git a/doc/images/typography-body.png b/doc/images/typography-body.png
new file mode 100644
index 00000000..ef27ae95
Binary files /dev/null and b/doc/images/typography-body.png differ
diff --git a/doc/images/typography-captions-dark.png b/doc/images/typography-captions-dark.png
new file mode 100644
index 00000000..16d1cc23
Binary files /dev/null and b/doc/images/typography-captions-dark.png differ
diff --git a/doc/images/typography-captions.png b/doc/images/typography-captions.png
new file mode 100644
index 00000000..430efc17
Binary files /dev/null and b/doc/images/typography-captions.png differ
diff --git a/doc/images/typography-heading-dark.png b/doc/images/typography-heading-dark.png
new file mode 100644
index 00000000..f9dc9caa
Binary files /dev/null and b/doc/images/typography-heading-dark.png differ
diff --git a/doc/images/typography-heading.png b/doc/images/typography-heading.png
new file mode 100644
index 00000000..6568cadd
Binary files /dev/null and b/doc/images/typography-heading.png differ
diff --git a/doc/images/typography-large-title-dark.png b/doc/images/typography-large-title-dark.png
new file mode 100644
index 00000000..a86aef60
Binary files /dev/null and b/doc/images/typography-large-title-dark.png differ
diff --git a/doc/images/typography-large-title.png b/doc/images/typography-large-title.png
new file mode 100644
index 00000000..d2bebd80
Binary files /dev/null and b/doc/images/typography-large-title.png differ
diff --git a/doc/images/typography-monospace-dark.png b/doc/images/typography-monospace-dark.png
new file mode 100644
index 00000000..1b4eaa5a
Binary files /dev/null and b/doc/images/typography-monospace-dark.png differ
diff --git a/doc/images/typography-monospace.png b/doc/images/typography-monospace.png
new file mode 100644
index 00000000..50ff8a60
Binary files /dev/null and b/doc/images/typography-monospace.png differ
diff --git a/doc/images/typography-numeric-dark.png b/doc/images/typography-numeric-dark.png
new file mode 100644
index 00000000..6ec28f5e
Binary files /dev/null and b/doc/images/typography-numeric-dark.png differ
diff --git a/doc/images/typography-numeric.png b/doc/images/typography-numeric.png
new file mode 100644
index 00000000..f2a98438
Binary files /dev/null and b/doc/images/typography-numeric.png differ
diff --git a/doc/images/typography-titles-dark.png b/doc/images/typography-titles-dark.png
new file mode 100644
index 00000000..cfd3958e
Binary files /dev/null and b/doc/images/typography-titles-dark.png differ
diff --git a/doc/images/typography-titles.png b/doc/images/typography-titles.png
new file mode 100644
index 00000000..a1c7a44e
Binary files /dev/null and b/doc/images/typography-titles.png differ
diff --git a/doc/libadwaita.toml.in b/doc/libadwaita.toml.in
index 1d40e69f..b3e71edf 100644
--- a/doc/libadwaita.toml.in
+++ b/doc/libadwaita.toml.in
@@ -46,10 +46,89 @@ content_files = [
   "visual-index.md",
 ]
 content_images = [
+  "images/app-icons.png",
+  "images/app-icons-dark.png",
   "images/avatar.png",
+  "images/boxed-lists.png",
+  "images/boxed-lists-dark.png",
+  "images/buttons-circular-dark.png",
+  "images/buttons-circular.png",
+  "images/buttons-circular-dark.png",
+  "images/buttons-destructive-action.png",
+  "images/buttons-destructive-action-dark.png",
+  "images/buttons-flat.png",
+  "images/buttons-flat-dark.png",
+  "images/buttons-opaque.png",
+  "images/buttons-opaque-dark.png",
+  "images/buttons-pill.png",
+  "images/buttons-pill-dark.png",
+  "images/buttons-raised.png",
+  "images/buttons-raised-dark.png",
+  "images/buttons-suggested-action.png",
+  "images/buttons-suggested-action-dark.png",
+  "images/cards.png",
+  "images/cards-dark.png",
+  "images/deprecated-app-notification.png",
+  "images/deprecated-app-notification-dark.png",
+  "images/deprecated-sidebar.png",
+  "images/deprecated-sidebar-dark.png",
+  "images/devel-window.png",
+  "images/devel-window-dark.png",
+  "images/dim-label.png",
+  "images/dim-label-dark.png",
+  "images/flat-header-bar.png",
+  "images/flat-header-bar-dark.png",
   "images/header-bar.png",
+  "images/linked-controls.png",
+  "images/linked-controls-dark.png",
   "images/list.png",
+  "images/navigation-sidebar.png",
+  "images/navigation-sidebar-dark.png",
+  "images/osd.png",
+  "images/osd-dark.png",
+  "images/osd-buttons.png",
+  "images/osd-buttons-dark.png",
+  "images/osd-progress-bar.png",
+  "images/osd-progress-bar-dark.png",
+  "images/osd-toolbar.png",
+  "images/osd-toolbar-dark.png",
+  "images/popover-menu-list.png",
+  "images/popover-menu-list-dark.png",
   "images/preferences-window.png",
+  "images/selection-mode-checks.png",
+  "images/selection-mode-checks-dark.png",
+  "images/status-page-compact.png",
+  "images/status-page-compact-dark.png",
+  "images/style-background.png",
+  "images/style-background-dark.png",
+  "images/style-colors.png",
+  "images/style-colors-dark.png",
+  "images/style-frame.png",
+  "images/style-frame-dark.png",
+  "images/style-view.png",
+  "images/style-view-dark.png",
+  "images/toolbar.png",
+  "images/toolbar-dark.png",
+  "images/toolbar-flat.png",
+  "images/toolbar-flat-dark.png",
+  "images/toolbar-raised.png",
+  "images/toolbar-raised-dark.png",
+  "images/toolbar-spacer.png",
+  "images/toolbar-spacer-dark.png",
+  "images/typography-body.png",
+  "images/typography-body-dark.png",
+  "images/typography-captions.png",
+  "images/typography-captions-dark.png",
+  "images/typography-heading.png",
+  "images/typography-heading-dark.png",
+  "images/typography-large-title.png",
+  "images/typography-large-title-dark.png",
+  "images/typography-monospace.png",
+  "images/typography-monospace-dark.png",
+  "images/typography-numeric.png",
+  "images/typography-numeric-dark.png",
+  "images/typography-titles.png",
+  "images/typography-titles-dark.png",
   "images/view-switcher.png",
   "images/view-switcher-bar.png",
   "libadwaita.svg",
diff --git a/doc/style-classes.md b/doc/style-classes.md
index e00c3795..8ac2237a 100644
--- a/doc/style-classes.md
+++ b/doc/style-classes.md
@@ -13,6 +13,11 @@ appearance.
 
 ### Suggested Action
 
+<picture>
+  <source srcset="buttons-suggested-action-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="buttons-suggested-action.png" alt="buttons-suggested-action">
+</picture>
+
 The `.suggested-action` style class makes the button use accent colors. It can
 be used to denote important buttons, for example, the affirmative button in an
 action dialog.
@@ -23,6 +28,11 @@ Can also be used with [class@Gtk.MenuButton] or [class@Adw.SplitButton].
 
 ### Destructive Action
 
+<picture>
+  <source srcset="buttons-destructive-action-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="buttons-destructive-action.png" alt="buttons-destructive-action">
+</picture>
+
 The `.destructive-action` style class makes the button use destructive colors.
 It can be used to draw attention to the potentially damaging consequences of
 using a button. This style acts as a warning to the user.
@@ -33,6 +43,11 @@ Can also be used with [class@Gtk.MenuButton] or [class@Adw.SplitButton].
 
 ### Flat
 
+<picture>
+  <source srcset="buttons-flat-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="buttons-flat.png" alt="buttons-flat">
+</picture>
+
 The `.flat` style class makes the button use flat appearance, looking like a
 label or an icon until hovered.
 
@@ -47,6 +62,11 @@ Can be set via [property@Gtk.Button:has-frame] and
 
 ### Raised
 
+<picture>
+  <source srcset="buttons-raised-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="buttons-raised.png" alt="buttons-raised">
+</picture>
+
 The `.raised` style class makes the button use the regular appearance instead of
 the flat one.
 
@@ -58,6 +78,11 @@ Can also be used with [class@Gtk.MenuButton] or [class@Adw.SplitButton].
 
 ### Opaque
 
+<picture>
+  <source srcset="buttons-opaque-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="buttons-opaque.png" alt="buttons-opaque">
+</picture>
+
 The `.opaque` style class gives the button an opaque background. It's intended
 to be used together with custom styles that override `background-color` and
 `color`, to create buttons with an appearance similar to
@@ -86,6 +111,11 @@ Can also be used with [class@Gtk.MenuButton] or [class@Adw.SplitButton].
 
 ### Circular
 
+<picture>
+  <source srcset="buttons-circular-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="buttons-circular.png" alt="buttons-circular">
+</picture>
+
 The `.circular` style class makes the button round. It can be used with buttons
 containing icons or short labels (1-2 characters).
 
@@ -97,6 +127,11 @@ Can also be used with [class@Gtk.MenuButton].
 
 ### Pill
 
+<picture>
+  <source srcset="buttons-pill-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="buttons-pill.png" alt="buttons-pill">
+</picture>
+
 The `.pill` style class makes the button appear as a pill. It's often used for
 important standalone buttons, for example, inside a [class@Adw.StatusPage].
 
@@ -106,9 +141,16 @@ It can be used in combination with [`.suggested-action`](#suggested-action),
 
 ## Linked Controls
 
+<picture>
+  <source srcset="linked-controls-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="linked-controls.png" alt="linked-controls">
+</picture>
+
 The `.linked` style class can be applied to a [class Gtk Box] to make its
 children appear as a single group. The box must have no spacing.
 
+Linked boxes can be both horizontal and vertical.
+
 The following widgets can be linked:
 
 * [class@Gtk.AppChooserButton]
@@ -136,6 +178,11 @@ buttons inside it won't get the flat appearance.
 
 ## Toolbars
 
+<picture>
+  <source srcset="toolbar-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="toolbar.png" alt="toolbar">
+</picture>
+
 The `.toolbar` style class can be applied to a horizontal [class Gtk Box]. The
 same appearance is also used by [class@Gtk.HeaderBar], [class@Gtk.ActionBar] and
 [class@Gtk.SearchBar] automatically.
@@ -145,6 +192,11 @@ according to the following rules:
 
 The following buttons get flat appearance:
 
+<picture>
+  <source srcset="toolbar-flat-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="toolbar-flat.png" alt="toolbar-flat">
+</picture>
+
 * Icon-only buttons;
 * Buttons with an icon and a label (using [class@Adw.ButtonContent]);
 * Menu buttons containing an arrow;
@@ -153,6 +205,11 @@ The following buttons get flat appearance:
 
 The following buttons keep default appearance:
 
+<picture>
+  <source srcset="toolbar-raised-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="toolbar-raised.png" alt="toolbar-raised">
+</picture>
+
 * Text-only buttons;
 * Buttons with other content;
 * Buttons within widgets with the [`.linked`](#linked-controls) style
@@ -171,12 +228,22 @@ instead.
 
 ## Spacers
 
+<picture>
+  <source srcset="toolbar-spacer-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="toolbar-spacer.png" alt="toolbar-spacer">
+</picture>
+
 The `.spacer` style class can be applied to a [class@Gtk.Separator] to make it
 appear invisible and act as whitespace. This can be useful with [toolbars and
 similar widgets](#toolbars) to separate groups of widgets from each other.
 
 ## Dim Labels
 
+<picture>
+  <source srcset="dim-label-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="dim-label.png" alt="dim-label">
+</picture>
+
 The `.dim-label` style class makes the widget it's applied to partially
 transparent.
 
@@ -188,27 +255,62 @@ such, it's highly recommended to be used instead of changing opacity manually.
 These style classes can be applied to any widgets, but are mostly used for
 [class@Gtk.Label] or other widgets that contain them.
 
+<picture>
+  <source srcset="typography-large-title-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="typography-large-title.png" alt="typography-large-title">
+</picture>
+
 The `.large-title` style class makes text large and thin. It's the largest
 style, infrequently used for display headings in greeters or assistants. It
 should only be used in conjunction with large amounts of whitespace.
 
+<picture>
+  <source srcset="typography-titles-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="typography-titles.png" alt="typography-titles">
+</picture>
+
 The `.title-1`, `.title-2`, `.title-3`, `.title-4` classes provide four levels
 of title styles, indicating hierarchy. The specific use heavily depends on
 context. Generally, the larger styles are intended to be used in bigger views
 with plenty of whitespace around them.
 
+<picture>
+  <source srcset="typography-heading-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="typography-heading.png" alt="typography-heading">
+</picture>
+
 The `.heading` style class is the standard style for UI headings using the
 default text size, such as window titles or boxed list labels.
 
+<picture>
+  <source srcset="typography-body-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="typography-body.png" alt="typography-body">
+</picture>
+
 The `.body` style class is the default text style.
 
+<picture>
+  <source srcset="typography-captions-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="typography-captions.png" alt="typography-captions">
+</picture>
+
 The `.caption-heading` and `.caption` style classes make text smaller. They
 are intended to be used to differentiate sub-text which accompanies text in
 the regular body style.
 
+<picture>
+  <source srcset="typography-monospace-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="typography-monospace.png" alt="typography-monospace">
+</picture>
+
 The `.monospace` style class makes the widget use a monospace font. This can be
 useful when displaying code, logs or shell commands.
 
+<picture>
+  <source srcset="typography-numeric-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="typography-numeric.png" alt="typography-numeric">
+</picture>
+
 The `.numeric` style class makes the widget use tabular figures. This is
 equivalent to using [struct@Pango.AttrFontFeatures] with `"tnum=1"` features.
 This style is useful in situations where multiple labels are vertically aligned,
@@ -217,6 +319,11 @@ quickly change.
 
 ## Colors
 
+<picture>
+  <source srcset="style-colors-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="style-colors.png" alt="style-colors">
+</picture>
+
 The following style classes change widget colors:
 
 Class             | Color
@@ -234,10 +341,20 @@ state.
 
 ## Boxed Lists & Cards
 
+<picture>
+  <source srcset="boxed-lists-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="boxed-lists.png" alt="boxed-lists">
+</picture>
+
 The `.boxed-list` style class can be applied to a [class@Gtk.ListBox] to make it
 a boxed list. The list box should have [property@Gtk.ListBox:selection-mode] set
 to `GTK_SELECTION_NONE`.
 
+<picture>
+  <source srcset="cards-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="cards.png" alt="cards">
+</picture>
+
 The `.card` style class can be applied to any other widget to give it a similar
 appearance.
 
@@ -250,6 +367,11 @@ states automatically, without needing the `.activatable` class.
 
 ## Sidebars
 
+<picture>
+  <source srcset="navigation-sidebar-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="navigation-sidebar.png" alt="navigation-sidebar">
+</picture>
+
 The `.navigation-sidebar` style class can be applied to a [class@Gtk.ListBox]
 or [class@Gtk.ListView] to make it look like a sidebar: it makes the
 items rounded and padded and removes the default list background.
@@ -260,6 +382,11 @@ be problematic. In that case, it can be used together with the
 
 ## App Icons
 
+<picture>
+  <source srcset="app-icons-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="app-icons.png" alt="app-icons">
+</picture>
+
 GNOME application icons require a shadow to be legible on a light background.
 The `.icon-dropshadow` and `.lowres-icon` style classes provide it when used
 with [class@Gtk.Image] or any other widget that contains an image.
@@ -269,12 +396,22 @@ should be used otherwise.
 
 ## Selection Mode Check Buttons
 
+<picture>
+  <source srcset="selection-mode-checks-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="selection-mode-checks.png" alt="selection-mode-checks">
+</picture>
+
 The `.selection-mode` style class can be added to a [class@Gtk.CheckButton] to
 give it a larger and round appearance. These check buttons are intended to be
 used for selecting items from a list or a grid.
 
 ## OSD
 
+<picture>
+  <source srcset="osd-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="osd.png" alt="osd">
+</picture>
+
 The `.osd` style class has a number of loosely related purposes depending on
 what widget it's applied to.
 
@@ -285,6 +422,11 @@ However, it has different effects in a few specific cases.
 
 ### Overlay Buttons
 
+<picture>
+  <source srcset="osd-buttons-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="osd-buttons.png" alt="osd-buttons">
+</picture>
+
 When used with [class@Gtk.Button], `.osd` can be used to create large standalone
 buttons that overlap content, for example, the previous/next page arrows in an
 image viewer. They appear dark and slightly larger than regular buttons.
@@ -293,12 +435,22 @@ It can be used in combination with [`.circular`](#circular) or [`.pill`](#pill).
 
 ### Floating Toolbars
 
+<picture>
+  <source srcset="osd-toolbar-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="osd-toolbar.png" alt="osd-toolbar">
+</picture>
+
 When used along with the [`.toolbar`](#toolbars) style class, `.osd` gives the
 box additional padding and round corners. This can be used to create floating
 toolbars, such as video player controls.
 
 ### Progress Bars
 
+<picture>
+  <source srcset="osd-progress-bar-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="osd-progress-bar.png" alt="osd-progress-bar">
+</picture>
+
 When used with [class@Gtk.ProgressBar], `.osd` makes the progress bar thinner
 and removes its visible trough.
 
@@ -307,6 +459,11 @@ attached to the top of the window.
 
 ## Background
 
+<picture>
+  <source srcset="style-background-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="style-background.png" alt="style-background">
+</picture>
+
 The `.background` style class can be used with any widget to give it the default
 [window](named-colors.html#window-colors) background and foreground colors.
 
@@ -324,6 +481,11 @@ It's equivalent to using the following CSS:
 
 ## View
 
+<picture>
+  <source srcset="style-view-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="style-view.png" alt="style-view">
+</picture>
+
 The `.view` style class can be used with any widget to give it the default
 [view](named-colors.html#window-colors) background and foreground colors.
 
@@ -338,6 +500,11 @@ It's equivalent to using the following CSS:
 
 ## Frame
 
+<picture>
+  <source srcset="style-frame-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="style-frame.png" alt="style-frame">
+</picture>
+
 The `.frame` style class can be used with any widget to give it the default
 border.
 
@@ -351,22 +518,42 @@ It's equivalent to using the following CSS:
 
 ## Flat Header Bar
 
+<picture>
+  <source srcset="flat-header-bar-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="flat-header-bar.png" alt="flat-header-bar">
+</picture>
+
 The `.flat` style class can be used with a [class@Gtk.HeaderBar] to give it a
 flat appearance.
 
 ## Compact Status Page
 
+<picture>
+  <source srcset="status-page-compact-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="status-page-compact.png" alt="status-page-compact">
+</picture>
+
 The `.compact` style class can be used with a [class@Adw.StatusPage] to make it
 take less space. This is usually used with sidebars or popovers.
 
 ## Menu Popovers
 
+<picture>
+  <source srcset="popover-menu-list-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="popover-menu-list.png" alt="popover-menu-list">
+</picture>
+
 The `.menu` style class can be used with a [class@Gtk.Popover] to give it a
 menu-like appearance if it has a [class@Gtk.ListBox] or a [class@Gtk.ListView]
 inside it.
 
 ## Development Window
 
+<picture>
+  <source srcset="devel-window-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="devel-window.png" alt="devel-window">
+</picture>
+
 The `.devel` style class can be used with [class@Gtk.Window]. This will give
 any [class@Gtk.HeaderBar] inside that window a striped appearance.
 
@@ -386,12 +573,22 @@ They shouldn't be used in new code.
 
 ## `.content`
 
+<picture>
+  <source srcset="boxed-lists-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="boxed-lists.png" alt="boxed-lists">
+</picture>
+
 The `.content` style class can be applied to a [class@Gtk.ListBox] to give it a
 boxed list appearance. The [`.boxed-list`](#boxed-lists-cards) style class is
 completely equivalent to it and should be used instead.
 
 ## `.sidebar`
 
+<picture>
+  <source srcset="deprecated-sidebar-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="deprecated-sidebar.png" alt="deprecated-sidebar">
+</picture>
+
 The `.sidebar` style class adds a border at the end of the widget (`border-right`
 for left-to-right text direction, `border-left` for right-to-left) and removes
 background from any [class@Gtk.ListBox] or [class@Gtk.ListView] inside it.
@@ -401,6 +598,11 @@ on the list widget, combined with a [class@Gtk.Separator] to achieve the border.
 
 ## `.app-notification`
 
+<picture>
+  <source srcset="deprecated-app-notification-dark.png" media="(prefers-color-scheme: dark)">
+  <img src="deprecated-app-notification.png" alt="deprecated-app-notification">
+</picture>
+
 The `.app-notification` style class is used with widgets like [class Gtk Box].
 It adds [`.osd`](#osd) appearance to the widget and makes its bottom corners
 round. When used together with a [class@Gtk.Overlay] and a [class@Gtk.Revealer],
diff --git a/doc/tools/data/app-icons.ui b/doc/tools/data/app-icons.ui
new file mode 100644
index 00000000..879c558e
--- /dev/null
+++ b/doc/tools/data/app-icons.ui
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkBox" id="widget">
+    <property name="spacing">12</property>
+    <property name="margin-top">6</property>
+    <property name="margin-bottom">6</property>
+    <property name="margin-start">6</property>
+    <property name="margin-end">6</property>
+    <child>
+      <object class="GtkImage">
+        <property name="icon-name">org.gnome.Boxes</property>
+        <property name="pixel-size">128</property>
+        <property name="valign">end</property>
+        <style>
+          <class name="icon-dropshadow"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkImage">
+        <property name="icon-name">org.gnome.Boxes</property>
+        <property name="pixel-size">32</property>
+        <property name="valign">end</property>
+        <style>
+          <class name="lowres-icon"/>
+        </style>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/boxed-lists.ui b/doc/tools/data/boxed-lists.ui
new file mode 100644
index 00000000..72c2050c
--- /dev/null
+++ b/doc/tools/data/boxed-lists.ui
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkListBox" id="widget">
+    <property name="margin-top">6</property>
+    <property name="margin-bottom">6</property>
+    <property name="margin-start">6</property>
+    <property name="margin-end">6</property>
+    <property name="selection-mode">none</property>
+    <property name="width-request">300</property>
+    <style>
+      <class name="boxed-list"/>
+    </style>
+    <child>
+      <object class="AdwActionRow">
+        <property name="title">Item 1</property>
+      </object>
+    </child>
+    <child>
+      <object class="AdwActionRow">
+        <property name="title">Item 2</property>
+      </object>
+    </child>
+    <child>
+      <object class="AdwActionRow">
+        <property name="title">Item 3</property>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/buttons-circular.ui b/doc/tools/data/buttons-circular.ui
new file mode 100644
index 00000000..74f9426c
--- /dev/null
+++ b/doc/tools/data/buttons-circular.ui
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkBox" id="widget">
+    <property name="spacing">6</property>
+    <child>
+      <object class="GtkButton">
+        <property name="icon-name">list-add-symbolic</property>
+        <style>
+          <class name="circular"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="icon-name">list-remove-symbolic</property>
+        <style>
+          <class name="circular"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="label">1</property>
+        <style>
+          <class name="circular"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="label">2</property>
+        <style>
+          <class name="circular"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="label">3</property>
+        <style>
+          <class name="circular"/>
+        </style>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/buttons-destructive-action.ui b/doc/tools/data/buttons-destructive-action.ui
new file mode 100644
index 00000000..e89856c1
--- /dev/null
+++ b/doc/tools/data/buttons-destructive-action.ui
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <menu id="demo_menu"/>
+  <object class="GtkBox" id="widget">
+    <property name="spacing">6</property>
+    <child>
+      <object class="GtkButton">
+        <property name="label">Delete</property>
+        <style>
+          <class name="destructive-action"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="icon-name">user-trash-symbolic</property>
+        <style>
+          <class name="destructive-action"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkMenuButton">
+        <property name="label">Open</property>
+        <property name="menu-model">demo_menu</property>
+        <style>
+          <class name="destructive-action"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="AdwSplitButton">
+        <property name="label">Open</property>
+        <property name="menu-model">demo_menu</property>
+        <style>
+          <class name="destructive-action"/>
+        </style>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/buttons-flat.ui b/doc/tools/data/buttons-flat.ui
new file mode 100644
index 00000000..aba23863
--- /dev/null
+++ b/doc/tools/data/buttons-flat.ui
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <menu id="demo_menu"/>
+  <object class="GtkBox" id="widget">
+    <property name="spacing">6</property>
+    <child>
+      <object class="GtkButton">
+        <property name="label">Button</property>
+        <style>
+          <class name="flat"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="icon-name">view-more-symbolic</property>
+        <style>
+          <class name="flat"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkMenuButton">
+        <property name="label">Open</property>
+        <property name="menu-model">demo_menu</property>
+        <style>
+          <class name="flat"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="AdwSplitButton">
+        <property name="label">Open</property>
+        <property name="menu-model">demo_menu</property>
+        <style>
+          <class name="flat"/>
+        </style>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/buttons-opaque.ui b/doc/tools/data/buttons-opaque.ui
new file mode 100644
index 00000000..e0595968
--- /dev/null
+++ b/doc/tools/data/buttons-opaque.ui
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkBox" id="widget">
+    <property name="spacing">6</property>
+    <child>
+      <object class="GtkButton">
+        <property name="label">Button</property>
+        <style>
+          <class name="opaque"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="label">Button</property>
+        <property name="name">opaque-button-1</property>
+        <style>
+          <class name="opaque"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="label">Button</property>
+        <property name="name">opaque-button-2</property>
+        <style>
+          <class name="opaque"/>
+        </style>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/buttons-pill.ui b/doc/tools/data/buttons-pill.ui
new file mode 100644
index 00000000..6c03be9c
--- /dev/null
+++ b/doc/tools/data/buttons-pill.ui
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkButton" id="widget">
+    <property name="label">Pill Button</property>
+    <style>
+      <class name="pill"/>
+    </style>
+  </object>
+</interface>
diff --git a/doc/tools/data/buttons-raised.ui b/doc/tools/data/buttons-raised.ui
new file mode 100644
index 00000000..516cf1af
--- /dev/null
+++ b/doc/tools/data/buttons-raised.ui
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <menu id="demo_menu"/>
+  <object class="GtkBox" id="widget">
+    <property name="spacing">6</property>
+    <child>
+      <object class="GtkButton">
+        <property name="label">Button</property>
+        <style>
+          <class name="raised"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="icon-name">view-more-symbolic</property>
+        <style>
+          <class name="raised"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkMenuButton">
+        <property name="label">Open</property>
+        <property name="menu-model">demo_menu</property>
+        <style>
+          <class name="raised"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="AdwSplitButton">
+        <property name="label">Open</property>
+        <property name="menu-model">demo_menu</property>
+        <style>
+          <class name="raised"/>
+        </style>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/buttons-suggested-action.ui b/doc/tools/data/buttons-suggested-action.ui
new file mode 100644
index 00000000..2c102f48
--- /dev/null
+++ b/doc/tools/data/buttons-suggested-action.ui
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <menu id="demo_menu"/>
+  <object class="GtkBox" id="widget">
+    <property name="spacing">6</property>
+    <child>
+      <object class="GtkButton">
+        <property name="label">Select</property>
+        <style>
+          <class name="suggested-action"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="icon-name">media-playback-start-symbolic</property>
+        <style>
+          <class name="suggested-action"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkMenuButton">
+        <property name="label">Open</property>
+        <property name="menu-model">demo_menu</property>
+        <style>
+          <class name="suggested-action"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="AdwSplitButton">
+        <property name="label">Open</property>
+        <property name="menu-model">demo_menu</property>
+        <style>
+          <class name="suggested-action"/>
+        </style>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/cards.ui b/doc/tools/data/cards.ui
new file mode 100644
index 00000000..3e65969f
--- /dev/null
+++ b/doc/tools/data/cards.ui
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkBox" id="widget">
+    <property name="spacing">12</property>
+    <property name="margin-top">6</property>
+    <property name="margin-bottom">6</property>
+    <property name="margin-start">6</property>
+    <property name="margin-end">6</property>
+    <child>
+      <object class="GtkLabel">
+        <property name="height-request">100</property>
+        <property name="width-request">144</property>
+        <property name="label">Card</property>
+        <style>
+          <class name="card"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkLabel">
+        <property name="height-request">100</property>
+        <property name="width-request">144</property>
+        <property name="label">Card</property>
+        <style>
+          <class name="card"/>
+        </style>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/deprecated-app-notification.ui b/doc/tools/data/deprecated-app-notification.ui
new file mode 100644
index 00000000..39bb8435
--- /dev/null
+++ b/doc/tools/data/deprecated-app-notification.ui
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkBox" id="widget">
+    <property name="spacing">12</property>
+    <property name="margin-start">12</property>
+    <property name="width-request">300</property>
+    <style>
+      <class name="app-notification"/>
+    </style>
+    <child>
+      <object class="GtkLabel">
+        <property name="label" translatable="yes">In-App Notification</property>
+        <property name="ellipsize">end</property>
+        <property name="xalign">0</property>
+        <property name="hexpand">True</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="icon-name">window-close-symbolic</property>
+        <property name="action-target">false</property>
+        <style>
+          <class name="flat"/>
+          <class name="circular"/>
+        </style>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/deprecated-sidebar.ui b/doc/tools/data/deprecated-sidebar.ui
new file mode 100644
index 00000000..83de07dd
--- /dev/null
+++ b/doc/tools/data/deprecated-sidebar.ui
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="AdwBin" id="widget">
+    <property name="width-request">200</property>
+    <property name="child">
+      <object class="GtkListBox">
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Item 1</property>
+            <property name="xalign">0</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Item 2</property>
+            <property name="xalign">0</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Item 3</property>
+            <property name="xalign">0</property>
+          </object>
+        </child>
+      </object>
+    </property>
+    <style>
+      <class name="sidebar"/>
+    </style>
+  </object>
+</interface>
diff --git a/doc/tools/data/devel-window.ui b/doc/tools/data/devel-window.ui
new file mode 100644
index 00000000..de22b353
--- /dev/null
+++ b/doc/tools/data/devel-window.ui
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkWindow" id="widget">
+    <property name="title">Window</property>
+    <property name="default-width">400</property>
+    <property name="default-height">100</property>
+    <property name="titlebar">
+      <object class="GtkHeaderBar"/>
+    </property>
+    <style>
+      <class name="devel"/>
+    </style>
+  </object>
+</interface>
diff --git a/doc/tools/data/dim-label.ui b/doc/tools/data/dim-label.ui
new file mode 100644
index 00000000..bb481b9a
--- /dev/null
+++ b/doc/tools/data/dim-label.ui
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="AdwBin" id="widget">
+    <style>
+      <class name="text-sample"/>
+    </style>
+    <property name="child">
+      <object class="GtkLabel">
+        <property name="label">This is a dimmed paragraph, mostly used for secondary labels or 
descriptions.</property>
+        <property name="wrap">True</property>
+        <property name="max-width-chars">35</property>
+        <style>
+          <class name="dim-label"/>
+        </style>
+      </object>
+    </property>
+  </object>
+</interface>
diff --git a/doc/tools/data/flat-header-bar.ui b/doc/tools/data/flat-header-bar.ui
new file mode 100644
index 00000000..e8a6f57f
--- /dev/null
+++ b/doc/tools/data/flat-header-bar.ui
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkWindow" id="widget">
+    <property name="title">Window</property>
+    <property name="default-width">400</property>
+    <property name="default-height">100</property>
+    <property name="titlebar">
+      <object class="GtkHeaderBar">
+        <property name="title-widget">
+          <object class="AdwWindowTitle"/>
+        </property>
+        <style>
+          <class name="flat"/>
+        </style>
+      </object>
+    </property>
+  </object>
+</interface>
diff --git a/doc/tools/data/linked-controls.ui b/doc/tools/data/linked-controls.ui
new file mode 100644
index 00000000..c9e29c00
--- /dev/null
+++ b/doc/tools/data/linked-controls.ui
@@ -0,0 +1,133 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkGrid" id="widget">
+    <property name="column-spacing">6</property>
+    <property name="row-spacing">6</property>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="linked"/>
+        </style>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">edit-cut-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">edit-copy-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">edit-paste-symbolic</property>
+          </object>
+        </child>
+        <layout>
+          <property name="column">0</property>
+          <property name="row">0</property>
+        </layout>
+      </object>
+    </child>
+    <child>
+      <object class="GtkBox">
+        <property name="hexpand">True</property>
+        <property name="homogeneous">True</property>
+        <style>
+          <class name="linked"/>
+        </style>
+        <child>
+          <object class="GtkButton">
+            <property name="label">Button</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="label">Button</property>
+          </object>
+        </child>
+        <layout>
+          <property name="column">1</property>
+          <property name="row">0</property>
+        </layout>
+      </object>
+    </child>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="linked"/>
+        </style>
+        <child>
+          <object class="GtkEntry">
+            <property name="placeholder-text">Entry</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkEntry">
+            <property name="placeholder-text">Entry</property>
+          </object>
+        </child>
+        <layout>
+          <property name="column">0</property>
+          <property name="row">1</property>
+          <property name="column-span">2</property>
+        </layout>
+      </object>
+    </child>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="linked"/>
+        </style>
+        <child>
+          <object class="GtkEntry">
+            <property name="placeholder-text">Entry</property>
+            <property name="hexpand">True</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">view-more-symbolic</property>
+          </object>
+        </child>
+        <layout>
+          <property name="column">0</property>
+          <property name="row">2</property>
+          <property name="column-span">2</property>
+        </layout>
+      </object>
+    </child>
+    <child>
+      <object class="GtkBox">
+        <property name="orientation">vertical</property>
+        <property name="vexpand">True</property>
+        <property name="homogeneous">True</property>
+        <style>
+          <class name="linked"/>
+        </style>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">edit-cut-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">edit-copy-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">edit-paste-symbolic</property>
+          </object>
+        </child>
+        <layout>
+          <property name="column">2</property>
+          <property name="row">0</property>
+          <property name="row-span">3</property>
+        </layout>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/navigation-sidebar.ui b/doc/tools/data/navigation-sidebar.ui
new file mode 100644
index 00000000..26b90303
--- /dev/null
+++ b/doc/tools/data/navigation-sidebar.ui
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkListBox" id="widget">
+    <property name="width-request">200</property>
+    <style>
+      <class name="navigation-sidebar"/>
+    </style>
+    <child>
+      <object class="GtkLabel">
+        <property name="label">Item 1</property>
+        <property name="xalign">0</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkLabel">
+        <property name="label">Item 2</property>
+        <property name="xalign">0</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkLabel">
+        <property name="label">Item 3</property>
+        <property name="xalign">0</property>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/osd-buttons.ui b/doc/tools/data/osd-buttons.ui
new file mode 100644
index 00000000..3338550b
--- /dev/null
+++ b/doc/tools/data/osd-buttons.ui
@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkBox" id="widget">
+    <property name="spacing">6</property>
+    <child>
+      <object class="GtkButton">
+        <property name="icon-name">go-previous-symbolic</property>
+        <style>
+          <class name="osd"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="icon-name">go-next-symbolic</property>
+        <style>
+          <class name="osd"/>
+        </style>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/osd-progress-bar.ui b/doc/tools/data/osd-progress-bar.ui
new file mode 100644
index 00000000..4547dba2
--- /dev/null
+++ b/doc/tools/data/osd-progress-bar.ui
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkWindow" id="widget">
+    <property name="default-width">400</property>
+    <property name="default-height">100</property>
+    <property name="titlebar">
+      <object class="GtkHeaderBar">
+        <property name="title-widget">
+          <object class="AdwWindowTitle"/>
+        </property>
+      </object>
+    </property>
+    <property name="child">
+      <object class="GtkProgressBar">
+        <property name="fraction">0.5</property>
+        <property name="valign">start</property>
+        <style>
+          <class name="osd"/>
+        </style>
+      </object>
+    </property>
+  </object>
+</interface>
diff --git a/doc/tools/data/osd-toolbar.ui b/doc/tools/data/osd-toolbar.ui
new file mode 100644
index 00000000..b1758d93
--- /dev/null
+++ b/doc/tools/data/osd-toolbar.ui
@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkBox" id="widget">
+    <style>
+      <class name="osd"/>
+      <class name="toolbar"/>
+    </style>
+    <child>
+      <object class="GtkButton">
+        <property name="icon-name">media-skip-backward-symbolic</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="icon-name">media-playback-pause-symbolic</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="icon-name">media-skip-forward-symbolic</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkScale">
+        <property name="hexpand">True</property>
+        <property name="width-request">200</property>
+        <property name="adjustment">
+          <object class="GtkAdjustment">
+            <property name="lower">0</property>
+            <property name="upper">100</property>
+            <property name="value">50</property>
+          </object>
+        </property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="icon-name">audio-volume-medium-symbolic</property>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/osd.ui b/doc/tools/data/osd.ui
new file mode 100644
index 00000000..de906cc7
--- /dev/null
+++ b/doc/tools/data/osd.ui
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkLabel" id="widget">
+    <property name="label">OSD</property>
+    <property name="width-request">200</property>
+    <property name="height-request">50</property>
+    <style>
+      <class name="osd"/>
+    </style>
+  </object>
+</interface>
diff --git a/doc/tools/data/popover-menu-list.ui b/doc/tools/data/popover-menu-list.ui
new file mode 100644
index 00000000..1da2f6d3
--- /dev/null
+++ b/doc/tools/data/popover-menu-list.ui
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkPopover" id="widget">
+    <style>
+      <class name="menu"/>
+    </style>
+    <property name="child">
+      <object class="GtkListBox">
+        <property name="width-request">100</property>
+        <child>
+          <object class="GtkListBoxRow" id="hover">
+            <child>
+              <object class="GtkLabel">
+                <property name="label">Item 1</property>
+                <property name="xalign">0</property>
+              </object>
+            </child>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Item 2</property>
+            <property name="xalign">0</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Item 3</property>
+            <property name="xalign">0</property>
+          </object>
+        </child>
+      </object>
+    </property>
+  </object>
+</interface>
diff --git a/doc/tools/data/selection-mode-checks.ui b/doc/tools/data/selection-mode-checks.ui
new file mode 100644
index 00000000..de058d3a
--- /dev/null
+++ b/doc/tools/data/selection-mode-checks.ui
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkBox" id="widget">
+    <property name="spacing">6</property>
+    <child>
+      <object class="GtkCheckButton">
+        <property name="active">True</property>
+        <style>
+          <class name="selection-mode"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkCheckButton">
+        <style>
+          <class name="selection-mode"/>
+        </style>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/status-page-compact.ui b/doc/tools/data/status-page-compact.ui
new file mode 100644
index 00000000..c016a133
--- /dev/null
+++ b/doc/tools/data/status-page-compact.ui
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="AdwStatusPage" id="widget">
+    <property name="icon-name">edit-find-symbolic</property>
+    <property name="title">No Results Found</property>
+    <property name="description">Try a different search</property>
+    <property name="width-request">250</property>
+    <style>
+      <class name="compact"/>
+    </style>
+  </object>
+</interface>
diff --git a/doc/tools/data/style-background.ui b/doc/tools/data/style-background.ui
new file mode 100644
index 00000000..e3d5390e
--- /dev/null
+++ b/doc/tools/data/style-background.ui
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkLabel" id="widget">
+    <property name="label">Background</property>
+    <property name="width-request">200</property>
+    <property name="height-request">50</property>
+    <style>
+      <class name="background"/>
+    </style>
+  </object>
+</interface>
diff --git a/doc/tools/data/style-colors.ui b/doc/tools/data/style-colors.ui
new file mode 100644
index 00000000..58dabf0b
--- /dev/null
+++ b/doc/tools/data/style-colors.ui
@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkGrid" id="widget">
+    <property name="row-spacing">12</property>
+    <property name="column-spacing">12</property>
+    <style>
+      <class name="text-sample"/>
+    </style>
+    <child>
+      <object class="GtkBox">
+        <property name="spacing">6</property>
+        <style>
+          <class name="accent"/>
+        </style>
+        <child>
+          <object class="GtkImage">
+            <property name="icon-name">dialog-question-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Accent</property>
+            <property name="margin-top">3</property>
+            <property name="margin-bottom">3</property>
+          </object>
+        </child>
+        <layout>
+          <property name="column">0</property>
+          <property name="row">0</property>
+        </layout>
+      </object>
+    </child>
+    <child>
+      <object class="GtkBox">
+        <property name="spacing">6</property>
+        <style>
+          <class name="success"/>
+        </style>
+        <child>
+          <object class="GtkImage">
+            <property name="icon-name">emblem-ok-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Success</property>
+            <property name="margin-top">3</property>
+            <property name="margin-bottom">3</property>
+          </object>
+        </child>
+        <layout>
+          <property name="column">1</property>
+          <property name="row">0</property>
+        </layout>
+      </object>
+    </child>
+    <child>
+      <object class="GtkBox">
+        <property name="spacing">6</property>
+        <style>
+          <class name="warning"/>
+        </style>
+        <child>
+          <object class="GtkImage">
+            <property name="icon-name">dialog-warning-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Warning</property>
+            <property name="margin-top">3</property>
+            <property name="margin-bottom">3</property>
+          </object>
+        </child>
+        <layout>
+          <property name="column">0</property>
+          <property name="row">1</property>
+        </layout>
+      </object>
+    </child>
+    <child>
+      <object class="GtkBox">
+        <property name="spacing">6</property>
+        <style>
+          <class name="error"/>
+        </style>
+        <child>
+          <object class="GtkImage">
+            <property name="icon-name">dialog-error-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Error</property>
+            <property name="margin-top">3</property>
+            <property name="margin-bottom">3</property>
+          </object>
+        </child>
+        <layout>
+          <property name="column">1</property>
+          <property name="row">1</property>
+        </layout>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/style-frame.ui b/doc/tools/data/style-frame.ui
new file mode 100644
index 00000000..fdc5d4fb
--- /dev/null
+++ b/doc/tools/data/style-frame.ui
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkLabel" id="widget">
+    <property name="label">Frame</property>
+    <property name="width-request">200</property>
+    <property name="height-request">50</property>
+    <style>
+      <class name="frame"/>
+    </style>
+  </object>
+</interface>
diff --git a/doc/tools/data/style-view.ui b/doc/tools/data/style-view.ui
new file mode 100644
index 00000000..a8043bd1
--- /dev/null
+++ b/doc/tools/data/style-view.ui
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="GtkLabel" id="widget">
+    <property name="label">View</property>
+    <property name="width-request">200</property>
+    <property name="height-request">50</property>
+    <style>
+      <class name="view"/>
+    </style>
+  </object>
+</interface>
diff --git a/doc/tools/data/toolbar-flat.ui b/doc/tools/data/toolbar-flat.ui
new file mode 100644
index 00000000..2c607a6a
--- /dev/null
+++ b/doc/tools/data/toolbar-flat.ui
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <menu id="demo_menu"/>
+  <object class="AdwBin" id="widget">
+    <style>
+      <class name="toolbar-sample"/>
+    </style>
+    <property name="child">
+      <object class="GtkBox">
+        <style>
+          <class name="toolbar"/>
+        </style>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">list-add-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkMenuButton">
+            <property name="icon-name">list-add-symbolic</property>
+            <property name="menu-model">demo_menu</property>
+            <property name="always-show-arrow">True</property>
+          </object>
+        </child>
+        <child>
+          <object class="AdwSplitButton">
+            <property name="icon-name">list-add-symbolic</property>
+            <property name="menu-model">demo_menu</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="child">
+              <object class="AdwButtonContent">
+                <property name="icon-name">list-add-symbolic</property>
+                <property name="label">Add</property>
+              </object>
+            </property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkMenuButton">
+            <property name="label">Add</property>
+            <property name="menu-model">demo_menu</property>
+          </object>
+        </child>
+        <child>
+          <object class="AdwSplitButton">
+            <property name="label">Add</property>
+            <property name="menu-model">demo_menu</property>
+          </object>
+        </child>
+      </object>
+    </property>
+  </object>
+</interface>
diff --git a/doc/tools/data/toolbar-raised.ui b/doc/tools/data/toolbar-raised.ui
new file mode 100644
index 00000000..336eb25e
--- /dev/null
+++ b/doc/tools/data/toolbar-raised.ui
@@ -0,0 +1,54 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <menu id="demo_menu"/>
+  <object class="GtkBox" id="widget">
+    <style>
+      <class name="toolbar"/>
+    </style>
+    <child>
+      <object class="GtkButton">
+        <property name="label">Add</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkColorButton">
+        <property name="rgba">#9141ac</property>
+      </object>
+    </child>
+    <child>
+      <object class="GtkBox">
+        <style>
+          <class name="linked"/>
+        </style>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">go-up-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">go-down-symbolic</property>
+          </object>
+        </child>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="icon-name">list-add-symbolic</property>
+        <style>
+          <class name="suggested-action"/>
+        </style>
+      </object>
+    </child>
+    <child>
+      <object class="GtkButton">
+        <property name="icon-name">list-add-symbolic</property>
+        <style>
+          <class name="destructive-action"/>
+        </style>
+      </object>
+    </child>
+  </object>
+</interface>
diff --git a/doc/tools/data/toolbar-spacer.ui b/doc/tools/data/toolbar-spacer.ui
new file mode 100644
index 00000000..01b5285a
--- /dev/null
+++ b/doc/tools/data/toolbar-spacer.ui
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <menu id="demo_menu"/>
+  <object class="AdwBin" id="widget">
+    <style>
+      <class name="toolbar-sample"/>
+    </style>
+    <property name="child">
+      <object class="GtkBox">
+        <style>
+          <class name="toolbar"/>
+        </style>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">go-previous-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">go-next-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkSeparator">
+            <style>
+              <class name="spacer"/>
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">edit-undo-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">edit-redo-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkSeparator">
+            <style>
+              <class name="spacer"/>
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">media-skip-backward-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">media-playback-pause-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">media-skip-forward-symbolic</property>
+          </object>
+        </child>
+      </object>
+    </property>
+  </object>
+</interface>
diff --git a/doc/tools/data/toolbar.ui b/doc/tools/data/toolbar.ui
new file mode 100644
index 00000000..76e64965
--- /dev/null
+++ b/doc/tools/data/toolbar.ui
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <menu id="demo_menu"/>
+  <object class="AdwBin" id="widget">
+    <style>
+      <class name="toolbar-sample"/>
+    </style>
+    <property name="child">
+      <object class="GtkBox">
+        <property name="width-request">400</property>
+        <style>
+          <class name="toolbar"/>
+        </style>
+        <child>
+          <object class="GtkMenuButton">
+            <property name="label" translatable="yes">Open</property>
+            <property name="menu-model">demo_menu</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">tab-new-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkSeparator">
+            <property name="hexpand">True</property>
+            <style>
+              <class name="spacer"/>
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">edit-undo-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">edit-redo-symbolic</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkSeparator">
+            <style>
+              <class name="spacer"/>
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkButton">
+            <property name="icon-name">view-more-symbolic</property>
+          </object>
+        </child>
+      </object>
+    </property>
+  </object>
+</interface>
diff --git a/doc/tools/data/typography-body.ui b/doc/tools/data/typography-body.ui
new file mode 100644
index 00000000..5c3298f4
--- /dev/null
+++ b/doc/tools/data/typography-body.ui
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="AdwBin" id="widget">
+    <style>
+      <class name="text-sample"/>
+    </style>
+    <property name="child">
+      <object class="GtkLabel">
+        <property name="label" translatable="yes">This is a paragraph of a body copy. You would use this 
style for most text in interfaces. It can also include &lt;b&gt;styling&lt;/b&gt; or &lt;a 
href="https://os.gnome.org/";>links&lt;/a&gt;.</property>
+        <property name="use-markup">True</property>
+        <property name="wrap">True</property>
+        <property name="max-width-chars">35</property>
+        <style>
+          <class name="body"/>
+        </style>
+      </object>
+    </property>
+  </object>
+</interface>
diff --git a/doc/tools/data/typography-captions.ui b/doc/tools/data/typography-captions.ui
new file mode 100644
index 00000000..505324d9
--- /dev/null
+++ b/doc/tools/data/typography-captions.ui
@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="AdwBin" id="widget">
+    <style>
+      <class name="text-sample"/>
+    </style>
+    <property name="child">
+      <object class="GtkBox">
+        <property name="orientation">vertical</property>
+        <property name="spacing">6</property>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Caption Heading</property>
+            <property name="xalign">0</property>
+            <style>
+              <class name="caption-heading"/>
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Caption body text, to be used for body copy on image captions and the 
like.</property>
+            <property name="xalign">0</property>
+            <property name="wrap">True</property>
+            <property name="max-width-chars">35</property>
+            <style>
+              <class name="caption"/>
+            </style>
+          </object>
+        </child>
+      </object>
+    </property>
+  </object>
+</interface>
diff --git a/doc/tools/data/typography-heading.ui b/doc/tools/data/typography-heading.ui
new file mode 100644
index 00000000..c72c4f43
--- /dev/null
+++ b/doc/tools/data/typography-heading.ui
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="AdwBin" id="widget">
+    <style>
+      <class name="text-sample"/>
+    </style>
+    <property name="child">
+      <object class="GtkLabel">
+        <property name="label">Heading</property>
+        <style>
+          <class name="heading"/>
+        </style>
+      </object>
+    </property>
+  </object>
+</interface>
diff --git a/doc/tools/data/typography-large-title.ui b/doc/tools/data/typography-large-title.ui
new file mode 100644
index 00000000..d38519c5
--- /dev/null
+++ b/doc/tools/data/typography-large-title.ui
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="AdwBin" id="widget">
+    <style>
+      <class name="text-sample"/>
+    </style>
+    <property name="child">
+      <object class="GtkLabel">
+        <property name="label">Large Title</property>
+        <style>
+          <class name="large-title"/>
+        </style>
+      </object>
+    </property>
+  </object>
+</interface>
diff --git a/doc/tools/data/typography-monospace.ui b/doc/tools/data/typography-monospace.ui
new file mode 100644
index 00000000..e053bda2
--- /dev/null
+++ b/doc/tools/data/typography-monospace.ui
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="AdwBin" id="widget">
+    <style>
+      <class name="text-sample"/>
+    </style>
+    <property name="child">
+      <object class="GtkLabel">
+        <property name="label">Monospace</property>
+        <style>
+          <class name="monospace"/>
+        </style>
+      </object>
+    </property>
+  </object>
+</interface>
diff --git a/doc/tools/data/typography-numeric.ui b/doc/tools/data/typography-numeric.ui
new file mode 100644
index 00000000..a7f3d60c
--- /dev/null
+++ b/doc/tools/data/typography-numeric.ui
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="AdwBin" id="widget">
+    <style>
+      <class name="text-sample"/>
+    </style>
+    <property name="child">
+      <object class="GtkBox">
+        <property name="orientation">vertical</property>
+        <property name="spacing">6</property>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Regular (0123456789)</property>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Numeric (0123456789)</property>
+            <style>
+              <class name="numeric"/>
+            </style>
+          </object>
+        </child>
+      </object>
+    </property>
+  </object>
+</interface>
diff --git a/doc/tools/data/typography-titles.ui b/doc/tools/data/typography-titles.ui
new file mode 100644
index 00000000..86ff7da3
--- /dev/null
+++ b/doc/tools/data/typography-titles.ui
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<interface>
+  <requires lib="gtk" version="4.0"/>
+  <requires lib="libadwaita" version="1.0"/>
+  <object class="AdwBin" id="widget">
+    <style>
+      <class name="text-sample"/>
+    </style>
+    <property name="child">
+      <object class="GtkBox">
+        <property name="orientation">vertical</property>
+        <property name="spacing">12</property>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Title 1</property>
+            <property name="xalign">0</property>
+            <style>
+              <class name="title-1"/>
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Title 2</property>
+            <property name="xalign">0</property>
+            <style>
+              <class name="title-2"/>
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Title 3</property>
+            <property name="xalign">0</property>
+            <style>
+              <class name="title-3"/>
+            </style>
+          </object>
+        </child>
+        <child>
+          <object class="GtkLabel">
+            <property name="label">Title 4</property>
+            <property name="xalign">0</property>
+            <style>
+              <class name="title-4"/>
+            </style>
+          </object>
+        </child>
+      </object>
+    </property>
+  </object>
+</interface>
diff --git a/doc/tools/icons/scalable/apps/org.gnome.Boxes.svg 
b/doc/tools/icons/scalable/apps/org.gnome.Boxes.svg
new file mode 100644
index 00000000..bb0a94f4
--- /dev/null
+++ b/doc/tools/icons/scalable/apps/org.gnome.Boxes.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink"; width="128" height="128" 
version="1.0"><defs><linearGradient id="a"><stop offset="0" stop-color="#fff"/><stop offset=".4" 
stop-color="#fff"/><stop offset="1" stop-color="#f6f5f4"/></linearGradient><radialGradient xlink:href="#a" 
id="i" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4 0 0 4 -492.799 -641.952)" cx="134.2" 
cy="222.988" fx="134.2" fy="222.988" r="2"/><radialGradient xlink:href="#a" id="h" 
gradientUnits="userSpaceOnUse" gradientTransform="matrix(4 0 0 4 -492.799 -681.952)" cx="134.2" cy="222.988" 
fx="134.2" fy="222.988" r="2"/><radialGradient xlink:href="#a" id="g" gradientUnits="userSpaceOnUse" 
gradientTransform="matrix(6 0 0 6 -785.198 -1065.928)" cx="134.2" cy="222.988" fx="134.2" fy="222.988" 
r="2"/><radialGradient xlink:href="#a" id="f" cx="134.2" cy="222.988" fx="134.2" fy="222.988" r="2" 
gradientUnits="userSpaceOnUse" gradientTransform="matrix(6 0 0 6 -785.198 -1153.928)"/
> <radialGradient xlink:href="#a" id="e" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4 0 0 4 
> -452.799 -681.952)" cx="134.2" cy="222.988" fx="134.2" fy="222.988" r="2"/><radialGradient xlink:href="#a" 
> id="d" gradientUnits="userSpaceOnUse" gradientTransform="matrix(4 0 0 4 -452.799 -641.952)" cx="134.2" 
> cy="222.988" fx="134.2" fy="222.988" r="2"/><radialGradient xlink:href="#a" id="c" 
> gradientUnits="userSpaceOnUse" gradientTransform="matrix(6 0 0 6 -697.198 -1065.928)" cx="134.2" 
> cy="222.988" fx="134.2" fy="222.988" r="2"/><radialGradient xlink:href="#a" id="b" 
> gradientUnits="userSpaceOnUse" gradientTransform="matrix(6 0 0 6 -697.198 -1153.928)" cx="134.2" 
> cy="222.988" fx="134.2" fy="222.988" r="2"/></defs><g transform="translate(0 -172)"><path 
> style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;tex
 
t-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;white-space:normal;shape-padding:0;isolation:auto;mix-blend-mode:normal;solid-color:#000;solid-opacity:1;marker:none"
 d="M22.352 194.352h82.687v82.687H22.352z" color="#000" font-weight="400" font-family="sans-serif" 
overflow="visible" fill="none"/><g color="#000" fill="none" stroke="#f6f5f4" stroke-width="8"><path 
style="marker:none" d="M84 256l24 24M84 216l24-24M44 256l-24 24M44 216l-24-24M44 216h40v40H44z" 
overflow="visible"/><path style="marker:none" overflow="visible" d="M20 192h88v88H20z"/></g><path 
style="marker:none" fill="#d5d3cf" d="M98.5 194v2h-69v-2z"/><path style="marker:none" d="M120 192c0 
6.627-5.373 12-12 12-1.85 0-3.222-.095-5.165-1.166-1.092-1.726-3.55-4.584-5.668-5.666C96.096 195.224 96 
193.85 96 192c0-6.627 5.373-12 12-12s12 5.373 12 12z" color="#000" overflow="visible" fill="#d5d3cf"/><path 
style="marker:none" fill="#d5d3cf" d="M110 203h2v69h-2
 z"/><circle style="marker:none" cx="108" cy="280" r="12" color="#000" overflow="visible" 
fill="#d5d3cf"/><path style="marker:none" fill="#d5d3cf" d="M79 258v2H49v-2zM99.604 274.425l-1.414 
1.415-15-15 1.415-1.415zM103.058 199.793l1.414 1.414-15 15-1.414-1.414z"/><circle style="marker:none" 
cx="108" cy="190" r="12" color="#000" overflow="visible" fill="url(#b)"/><path style="marker:none" 
fill="#d5d3cf" d="M86 222h2v26h-2zM79 218v2H49v-2z"/><circle style="marker:none" cx="84" cy="216" r="8" 
color="#000" overflow="visible" fill="#d5d3cf"/><path style="marker:none" fill="#d5d3cf" d="M98.5 
282v2h-69v-2z"/><circle r="12" cy="278" cx="108" style="marker:none" color="#000" overflow="visible" 
fill="url(#c)"/><path style="marker:none" d="M92 256c0 .666 0 1-.235 1.932-1.165.59-4.765 4.542-5.787 
5.822-.502.246-1.295.246-1.978.246a8 8 0 1 1 8-8z" color="#000" overflow="visible" fill="#d5d3cf"/><circle 
style="marker:none" cx="84" cy="254" r="8" color="#000" overflow="visible" fill="url(#d)"/><circ
 le r="8" cy="214" cx="84" style="marker:none" color="#000" overflow="visible" fill="url(#e)"/><path 
style="marker:none" fill="#d5d3cf" d="M22 203h2v69h-2z"/><circle r="12" cy="280" cx="20" style="marker:none" 
color="#000" overflow="visible" fill="#d5d3cf"/><path style="marker:none" fill="#d5d3cf" d="M46 
222h2v26h-2z"/><circle r="8" cy="216" cx="44" style="marker:none" color="#000" overflow="visible" 
fill="#d5d3cf"/><path style="marker:none" fill="#d5d3cf" d="M43.586 259.586L45 261l-15 
15-1.414-1.414z"/><path d="M7.912 192c0 6.627 5.372 12 12 12 1.849 0 3.222-.095 5.165-1.166 1.092-1.726 
3.55-4.584 5.668-5.666 1.071-1.944 1.167-3.318 1.167-5.168 0-6.627-5.373-12-12-12-6.628 0-12 5.373-12 12z" 
style="marker:none" color="#000" overflow="visible" fill="#d5d3cf"/><path style="marker:none" fill="#d5d3cf" 
d="M40.077 214.953l-1.414 1.415-15-15 1.415-1.414z"/><circle r="12" cy="190" cx="20" style="marker:none" 
color="#000" overflow="visible" fill="url(#f)"/><circle style="marker:none" cx="20
 " cy="278" r="12" color="#000" overflow="visible" fill="url(#g)"/><circle style="marker:none" cx="44" 
cy="214" r="8" color="#000" overflow="visible" fill="url(#h)"/><path d="M36 256c0 .666 0 1 .235 1.932 
1.165.59 4.765 4.542 5.787 5.822.502.246 1.295.246 1.978.246a8 8 0 1 0-8-8z" style="marker:none" color="#000" 
overflow="visible" fill="#d5d3cf"/><circle r="8" cy="254" cx="44" style="marker:none" color="#000" 
overflow="visible" fill="url(#i)"/></g></svg>
\ No newline at end of file
diff --git a/doc/tools/screenshot.gresources.xml b/doc/tools/screenshot.gresources.xml
index 2df7b63a..6ad0739c 100644
--- a/doc/tools/screenshot.gresources.xml
+++ b/doc/tools/screenshot.gresources.xml
@@ -1,6 +1,48 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/org/gnome/Adwaita/Screenshot">
+    <file preprocess="xml-stripblanks">icons/scalable/apps/org.gnome.Boxes.svg</file>
+
+    <file preprocess="xml-stripblanks">data/app-icons.ui</file>
+    <file preprocess="xml-stripblanks">data/boxed-lists.ui</file>
+    <file preprocess="xml-stripblanks">data/buttons-circular.ui</file>
+    <file preprocess="xml-stripblanks">data/buttons-destructive-action.ui</file>
+    <file preprocess="xml-stripblanks">data/buttons-flat.ui</file>
+    <file preprocess="xml-stripblanks">data/buttons-opaque.ui</file>
+    <file preprocess="xml-stripblanks">data/buttons-pill.ui</file>
+    <file preprocess="xml-stripblanks">data/buttons-raised.ui</file>
+    <file preprocess="xml-stripblanks">data/buttons-suggested-action.ui</file>
+    <file preprocess="xml-stripblanks">data/cards.ui</file>
+    <file preprocess="xml-stripblanks">data/deprecated-app-notification.ui</file>
+    <file preprocess="xml-stripblanks">data/deprecated-sidebar.ui</file>
+    <file preprocess="xml-stripblanks">data/devel-window.ui</file>
+    <file preprocess="xml-stripblanks">data/dim-label.ui</file>
+    <file preprocess="xml-stripblanks">data/flat-header-bar.ui</file>
+    <file preprocess="xml-stripblanks">data/linked-controls.ui</file>
+    <file preprocess="xml-stripblanks">data/navigation-sidebar.ui</file>
+    <file preprocess="xml-stripblanks">data/osd.ui</file>
+    <file preprocess="xml-stripblanks">data/osd-buttons.ui</file>
+    <file preprocess="xml-stripblanks">data/osd-progress-bar.ui</file>
+    <file preprocess="xml-stripblanks">data/osd-toolbar.ui</file>
+    <file preprocess="xml-stripblanks">data/popover-menu-list.ui</file>
+    <file preprocess="xml-stripblanks">data/selection-mode-checks.ui</file>
+    <file preprocess="xml-stripblanks">data/status-page-compact.ui</file>
+    <file preprocess="xml-stripblanks">data/style-background.ui</file>
+    <file preprocess="xml-stripblanks">data/style-colors.ui</file>
+    <file preprocess="xml-stripblanks">data/style-frame.ui</file>
+    <file preprocess="xml-stripblanks">data/style-view.ui</file>
+    <file preprocess="xml-stripblanks">data/toolbar.ui</file>
+    <file preprocess="xml-stripblanks">data/toolbar-flat.ui</file>
+    <file preprocess="xml-stripblanks">data/toolbar-raised.ui</file>
+    <file preprocess="xml-stripblanks">data/toolbar-spacer.ui</file>
+    <file preprocess="xml-stripblanks">data/typography-body.ui</file>
+    <file preprocess="xml-stripblanks">data/typography-captions.ui</file>
+    <file preprocess="xml-stripblanks">data/typography-heading.ui</file>
+    <file preprocess="xml-stripblanks">data/typography-large-title.ui</file>
+    <file preprocess="xml-stripblanks">data/typography-monospace.ui</file>
+    <file preprocess="xml-stripblanks">data/typography-numeric.ui</file>
+    <file preprocess="xml-stripblanks">data/typography-titles.ui</file>
+
     <file compressed="true">style.css</file>
   </gresource>
 </gresources>
diff --git a/doc/tools/style.css b/doc/tools/style.css
index e69de29b..1b0da73c 100644
--- a/doc/tools/style.css
+++ b/doc/tools/style.css
@@ -0,0 +1,20 @@
+.toolbar-sample {
+  background: alpha(currentColor, .05);
+  border-radius: 12px;
+}
+
+.text-sample {
+  background: alpha(currentColor, .05);
+  padding: 12px;
+  border-radius: 12px;
+}
+
+#opaque-button-1 {
+  color: @success_fg_color;
+  background-color: @success_bg_color;
+}
+
+#opaque-button-2 {
+  color: @warning_fg_color;
+  background-color: @warning_bg_color;
+}