Update style screenshots

- Added iOS screenshots.
- Replaced single Fusion screenshot with light and dark screenshots.
- Updated Material screenshots.
- Added snippet to generate Material attributes screenshot.
- Removed "thumbnail" screenshots in favor of individual images joined
  side-by-side in a \table. They are the same dimensions anyway, and
  this results in less images to maintain.
- Moved duplicated qdoc style table code into a parameterized include file.

Fixes: QTBUG-111175
Pick-to: 6.5
Change-Id: Ic828468b050db71d6821a797a6480bd0d449e611
Reviewed-by: Oliver Eftevaag <oliver.eftevaag@qt.io>

37 files changed, 160 insertions, 37 deletions

diff --git a/src/quickcontrols/doc/images/qtquickcontrols-basic-thumbnail.png b/src/quickcontrols/doc/images/qtquickcontrols-basic-thumbnail.png
deleted file mode 100644
index e971a7aaec..0000000000
--- a/src/quickcontrols/doc/images/qtquickcontrols-basic-thumbnail.png
+++ /dev/null
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-basic.png b/src/quickcontrols/doc/images/qtquickcontrols-basic.png
index 099db17038..2348d3f280 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-basic.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-basic.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-fusion-dark.png b/src/quickcontrols/doc/images/qtquickcontrols-fusion-dark.png
new file mode 100644
index 0000000000..4e3f72e2b6
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols-fusion-dark.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-fusion-light.png b/src/quickcontrols/doc/images/qtquickcontrols-fusion-light.png
new file mode 100644
index 0000000000..44403c6786
--- /dev/null
+++ b/src/quickcontrols/doc/images/qtquickcontrols-fusion-light.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-fusion-thumbnail.png b/src/quickcontrols/doc/images/qtquickcontrols-fusion-thumbnail.png
deleted file mode 100644
index c270c6efba..0000000000
--- a/src/quickcontrols/doc/images/qtquickcontrols-fusion-thumbnail.png
+++ /dev/null
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-imagine-thumbnail.png b/src/quickcontrols/doc/images/qtquickcontrols-imagine-thumbnail.png
deleted file mode 100644
index ecf2bb163d..0000000000
--- a/src/quickcontrols/doc/images/qtquickcontrols-imagine-thumbnail.png
+++ /dev/null
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-imagine.png b/src/quickcontrols/doc/images/qtquickcontrols-imagine.png
index ffe2c267b2..4e928b7a6a 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-imagine.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-imagine.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-ios-dark.png b/src/quickcontrols/doc/images/qtquickcontrols-ios-dark.png
index fd4609c729..bfa014aee9 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-ios-dark.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-ios-dark.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-ios-light.png b/src/quickcontrols/doc/images/qtquickcontrols-ios-light.png
index f990078ddf..5a3e868274 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-ios-light.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-ios-light.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-macos-dark.png b/src/quickcontrols/doc/images/qtquickcontrols-macos-dark.png
index 97d8a5a4e7..b639221e9b 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-macos-dark.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-macos-dark.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-macos-light.png b/src/quickcontrols/doc/images/qtquickcontrols-macos-light.png
index 4a598ad498..653aefc3ed 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-macos-light.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-macos-light.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-macos-thumbnail.png b/src/quickcontrols/doc/images/qtquickcontrols-macos-thumbnail.png
deleted file mode 100644
index 57fd98d63a..0000000000
--- a/src/quickcontrols/doc/images/qtquickcontrols-macos-thumbnail.png
+++ /dev/null
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-material-accent.png b/src/quickcontrols/doc/images/qtquickcontrols-material-accent.png
index a85afc68ed..e058fc81f4 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-material-accent.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-material-accent.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-material-attributes.png b/src/quickcontrols/doc/images/qtquickcontrols-material-attributes.png
index bb54071d79..60362a94aa 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-material-attributes.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-material-attributes.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-material-background.png b/src/quickcontrols/doc/images/qtquickcontrols-material-background.png
index 62028f523c..376bd2ef05 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-material-background.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-material-background.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-material-dark.png b/src/quickcontrols/doc/images/qtquickcontrols-material-dark.png
index f6e45b3b1c..3a24d4424a 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-material-dark.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-material-dark.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-material-elevation.png b/src/quickcontrols/doc/images/qtquickcontrols-material-elevation.png
index d152f14529..be72fa0da8 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-material-elevation.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-material-elevation.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-material-foreground.png b/src/quickcontrols/doc/images/qtquickcontrols-material-foreground.png
index 0d0e1b651a..e7564dee84 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-material-foreground.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-material-foreground.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-material-light.png b/src/quickcontrols/doc/images/qtquickcontrols-material-light.png
index c9abe2cb8b..a51ae9ecb0 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-material-light.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-material-light.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-material-theme.png b/src/quickcontrols/doc/images/qtquickcontrols-material-theme.png
index 1d09a82580..79bd1899ec 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-material-theme.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-material-theme.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-material-thumbnail.png b/src/quickcontrols/doc/images/qtquickcontrols-material-thumbnail.png
deleted file mode 100644
index d758ff1803..0000000000
--- a/src/quickcontrols/doc/images/qtquickcontrols-material-thumbnail.png
+++ /dev/null
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-material-variant-dense.png b/src/quickcontrols/doc/images/qtquickcontrols-material-variant-dense.png
index 02f39b7885..314e1338ce 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-material-variant-dense.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-material-variant-dense.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-material-variant-normal.png b/src/quickcontrols/doc/images/qtquickcontrols-material-variant-normal.png
index c1e366c531..2263b72b11 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-material-variant-normal.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-material-variant-normal.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-universal-dark.png b/src/quickcontrols/doc/images/qtquickcontrols-universal-dark.png
index 952651dca0..85b3e70db7 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-universal-dark.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-universal-dark.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-universal-light.png b/src/quickcontrols/doc/images/qtquickcontrols-universal-light.png
index e65447a4c5..fa9375903f 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-universal-light.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-universal-light.png
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-universal-thumbnail.png b/src/quickcontrols/doc/images/qtquickcontrols-universal-thumbnail.png
deleted file mode 100644
index db7fe5b076..0000000000
--- a/src/quickcontrols/doc/images/qtquickcontrols-universal-thumbnail.png
+++ /dev/null
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-windows-thumbnail.png b/src/quickcontrols/doc/images/qtquickcontrols-windows-thumbnail.png
deleted file mode 100644
index 15408d3bba..0000000000
--- a/src/quickcontrols/doc/images/qtquickcontrols-windows-thumbnail.png
+++ /dev/null
diff --git a/src/quickcontrols/doc/images/qtquickcontrols-windows.png b/src/quickcontrols/doc/images/qtquickcontrols-windows.png
index 324a03412d..c0adcd5549 100644
--- a/src/quickcontrols/doc/images/qtquickcontrols-windows.png
+++ b/src/quickcontrols/doc/images/qtquickcontrols-windows.png
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols-material-attributes.qml b/src/quickcontrols/doc/snippets/qtquickcontrols-material-attributes.qml
new file mode 100644
index 0000000000..3e9d1738e8
--- /dev/null
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols-material-attributes.qml
@@ -0,0 +1,120 @@
+// Copyright (C) 2023 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+import QtQuick
+import QtQuick.Controls.Material
+import QtQuick.Shapes
+
+Pane {
+    width: 400
+    height: 300
+
+    Page {
+        anchors.fill: parent
+        anchors.margins: 40
+
+        header: ToolBar {
+            Label {
+                text: "Material"
+                anchors.centerIn: parent
+            }
+        }
+
+        TextField {
+            id: textField
+            text: "TextField"
+            anchors.centerIn: parent
+
+            Component.onCompleted: forceActiveFocus()
+        }
+
+        component Line: Shape {
+            // Account for 1-pixel-wide lines.
+            width: Math.max(1, endX - startX)
+            height: Math.max(1, endY - startY)
+
+            layer.enabled: true
+            layer.samples: 4
+
+            property alias startX: shapePath.startX
+            property alias startY: shapePath.startY
+            property alias endX: pathLine.x
+            property alias endY: pathLine.y
+
+            ShapePath {
+                id: shapePath
+                strokeWidth: 1
+                strokeColor: "#444"
+
+                PathLine {
+                    id: pathLine
+                }
+            }
+        }
+    }
+
+    Label {
+        id: primaryLabel
+        x: 40
+        y: 3
+        text: "Primary"
+    }
+    Line {
+        id: primaryLine
+        x: primaryLabel.x + primaryLabel.width / 2
+        y: primaryLabel.y + primaryLabel.height
+        startX: 0.5
+        startY: 0
+        endX: 0.5
+        endY: 40
+    }
+
+    Label {
+        id: foregroundLabel
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: 3
+        text: "Foreground"
+    }
+    Line {
+        id: foregroundLine
+        x: foregroundLabel.x + foregroundLabel.width / 2
+        y: foregroundLabel.y + foregroundLabel.height
+        // Lines are drawn at the center of the pixel.
+        startX: 0.5
+        startY: 0
+        endX: 0.5
+        endY: 34
+    }
+
+    Label {
+        id: accentLabel
+        anchors.horizontalCenter: parent.horizontalCenter
+        y: parent.height * 0.825
+        text: "Accent"
+    }
+    Line {
+        id: accentLine
+        x: accentLabel.x + accentLabel.width / 2
+        y: parent.height * 0.7
+        startX: 0.5
+        startY: 0
+        endX: 0.5
+        endY: 38
+    }
+
+    Label {
+        id: backgroundLabel
+        x: parent.width - width - 10
+        y: parent.height - height - 10
+        text: "Background"
+    }
+    Line {
+        id: backgroundLine
+        x: backgroundLabel.x + backgroundLabel.width / 2
+        y: backgroundLabel.y - height
+        startX: 0.5
+        startY: 0
+        endX: 0.5
+        endY: 40
+    }
+}
diff --git a/src/quickcontrols/doc/snippets/qtquickcontrols-material-variant.qml b/src/quickcontrols/doc/snippets/qtquickcontrols-material-variant.qml
index ad824f1e34..cebd3a4db5 100644
--- a/src/quickcontrols/doc/snippets/qtquickcontrols-material-variant.qml
+++ b/src/quickcontrols/doc/snippets/qtquickcontrols-material-variant.qml
@@ -1,6 +1,16 @@
 // Copyright (C) 2018 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
 
+/*
+    This file is used by tst_snippets to generate qtquickcontrols-material-variant-normal.png:
+
+    SCREENSHOTS=1 ./tst_snippets verify:qtquickcontrols-material-variant
+
+    and qtquickcontrols-material-variant-dense.png:
+
+    SCREENSHOTS=1 QT_QUICK_CONTROLS_MATERIAL_VARIANT=Dense ./tst_snippets verify:qtquickcontrols-material-variant
+*/
+
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Controls.Material
diff --git a/src/quickcontrols/doc/src/includes/style-screenshots.qdocinc b/src/quickcontrols/doc/src/includes/style-screenshots.qdocinc
new file mode 100644
index 0000000000..b7cd902937
--- /dev/null
+++ b/src/quickcontrols/doc/src/includes/style-screenshots.qdocinc
@@ -0,0 +1,9 @@
+//! [file]
+\table
+    \row
+        \li \image qtquickcontrols-\2-light.png
+            \caption The light theme of the \1 style.
+        \li \image qtquickcontrols-\2-dark.png
+            \caption The dark theme of the \1 style.
+\endtable
+//! [file]
diff --git a/src/quickcontrols/doc/src/qtquickcontrols-fusion.qdoc b/src/quickcontrols/doc/src/qtquickcontrols-fusion.qdoc
index d3c4199e7d..05792fb7da 100644
--- a/src/quickcontrols/doc/src/qtquickcontrols-fusion.qdoc
+++ b/src/quickcontrols/doc/src/qtquickcontrols-fusion.qdoc
@@ -11,7 +11,7 @@
     look and feel. It implements the same design language as the
     \l {Qt Widget Gallery}{Fusion style for Qt Widgets}.
 
-    \image qtquickcontrols-fusion.png
+    \include style-screenshots.qdocinc {file} {Fusion} {fusion}
 
     To run an application with the Fusion style, see
     \l {Using Styles in Qt Quick Controls}.
diff --git a/src/quickcontrols/doc/src/qtquickcontrols-ios.qdoc b/src/quickcontrols/doc/src/qtquickcontrols-ios.qdoc
index f535d8ac6d..9e107eecd2 100644
--- a/src/quickcontrols/doc/src/qtquickcontrols-ios.qdoc
+++ b/src/quickcontrols/doc/src/qtquickcontrols-ios.qdoc
@@ -26,13 +26,7 @@
     and iOS and should look the same on both platforms, besides minor differences that may occur
     due to differences in available system fonts and font rendering engines.
 
-    \table
-        \row
-            \li \image qtquickcontrols-ios-light.png
-                \caption The iOS style in light theme
-            \li \image qtquickcontrols-ios-dark.png
-                \caption The iOS style in dark theme
-    \endtable
+    \include style-screenshots.qdocinc {file} {iOS} {ios}
 
     To run an application with the iOS style, see
     \l {Using Styles in Qt Quick Controls}.
diff --git a/src/quickcontrols/doc/src/qtquickcontrols-macos.qdoc b/src/quickcontrols/doc/src/qtquickcontrols-macos.qdoc
index 97d79c6278..c024b7fb82 100644
--- a/src/quickcontrols/doc/src/qtquickcontrols-macos.qdoc
+++ b/src/quickcontrols/doc/src/qtquickcontrols-macos.qdoc
@@ -18,13 +18,7 @@
     \note Be aware that the apperance of this style can change from one minor Qt version to the
     next, to better blend in with native applications on the platform.
 
-    \table
-        \row
-            \li \image qtquickcontrols-macos-light.png
-                \caption The macOS style in light theme
-            \li \image qtquickcontrols-macos-dark.png
-                \caption The macOS style in dark theme
-    \endtable
+    \include style-screenshots.qdocinc {file} {macOS} {macos}
 
     To run an application with the macOS style, see
     \l {Using Styles in Qt Quick Controls}.
diff --git a/src/quickcontrols/doc/src/qtquickcontrols-material.qdoc b/src/quickcontrols/doc/src/qtquickcontrols-material.qdoc
index 450cbb151c..9f28726d7d 100644
--- a/src/quickcontrols/doc/src/qtquickcontrols-material.qdoc
+++ b/src/quickcontrols/doc/src/qtquickcontrols-material.qdoc
@@ -36,13 +36,7 @@
     {Google Material Design Guidelines}. It allows for a unified experience
     across platforms and device sizes.
 
-    \table
-        \row
-            \li \image qtquickcontrols-material-light.png
-                \caption The Material style in light theme
-            \li \image qtquickcontrols-material-dark.png
-                \caption The Material style in dark theme
-    \endtable
+    \include style-screenshots.qdocinc {file} {Material} {material}
 
     To run an application with the Material style, see
     \l {Using Styles in Qt Quick Controls}.
diff --git a/src/quickcontrols/doc/src/qtquickcontrols-styles.qdoc b/src/quickcontrols/doc/src/qtquickcontrols-styles.qdoc
index 351732c9a3..ec8e371a01 100644
--- a/src/quickcontrols/doc/src/qtquickcontrols-styles.qdoc
+++ b/src/quickcontrols/doc/src/qtquickcontrols-styles.qdoc
@@ -11,38 +11,44 @@
 
     \section2 Basic Style
 
-    \image qtquickcontrols-basic-thumbnail.png
+    \image qtquickcontrols-basic.png
+
     The \l {Basic Style} is a simple and light-weight all-round style that offers
     the maximum performance for Qt Quick Controls.
 
     \section2 Fusion Style
 
-    \image qtquickcontrols-fusion-thumbnail.png
+    \include style-screenshots.qdocinc {file} {Fusion} {fusion}
+
     The \l {Fusion Style} is a platform-agnostic style that offers a desktop-oriented
     look and feel for Qt Quick Controls.
 
     \section2 Imagine Style
 
-    \image qtquickcontrols-imagine-thumbnail.png
+    \image qtquickcontrols-imagine.png
+
     The \l {Imagine Style} is based on image assets. The style comes with a default
     set of images which can easily be changed by providing a directory
     with images using a predefined naming convention.
 
     \section2 macOS Style
 
-    \image qtquickcontrols-macos-thumbnail.png
+    \include style-screenshots.qdocinc {file} {macOS} {macos}
+
     The \l {macOS Style} is a native-looking style for macOS.
     \note this style is only available for applications running on macOS.
 
-
     \section2 iOS Style
 
+    \include style-screenshots.qdocinc {file} {iOS} {ios}
+
     The \l {iOS Style} is a native-looking style for iOS based on image assets.
     \note this style is only available for applications running on iOS.
 
     \section2 Material Style
 
-    \image qtquickcontrols-material-thumbnail.png
+    \include style-screenshots.qdocinc {file} {Material} {material}
+
     The \l {Material Style} offers an appealing design based on the
     \l {https://www.google.com/design/spec/material-design/introduction.html}
     {Google Material Design Guidelines}, but requires more system resources than
@@ -50,14 +56,16 @@
 
     \section2 Universal Style
 
-    \image qtquickcontrols-universal-thumbnail.png
+    \include style-screenshots.qdocinc {file} {Universal} {universal}
+
     The \l {Universal Style} offers an appealing design based on the
     \l {https://dev.windows.com/design}{Microsoft Universal Design Guidelines},
     but requires more system resources than the Basic style.
 
     \section2 Windows Style
 
-    \image qtquickcontrols-windows-thumbnail.png
+    \image qtquickcontrols-windows.png
+
     The \l {Windows Style} is a native-looking style for Windows.
     \note this style is only available for applications running on Windows.
 
diff --git a/src/quickcontrols/doc/src/qtquickcontrols-universal.qdoc b/src/quickcontrols/doc/src/qtquickcontrols-universal.qdoc
index 4c8db816d7..3268b5b11a 100644
--- a/src/quickcontrols/doc/src/qtquickcontrols-universal.qdoc
+++ b/src/quickcontrols/doc/src/qtquickcontrols-universal.qdoc
@@ -33,13 +33,7 @@
     The Universal style has been designed to look good on all devices, from
     phones and tablets to PCs.
 
-    \table
-        \row
-            \li \image qtquickcontrols-universal-light.png
-                \caption The Universal style in light theme
-            \li \image qtquickcontrols-universal-dark.png
-                \caption The Universal style in dark theme
-    \endtable
+    \include style-screenshots.qdocinc {file} {Universal} {universal}
 
     To run an application with the Universal style, see
     \l {Using Styles in Qt Quick Controls}.