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>

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
+    }
+}

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

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]

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}.

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
+    \include style-screenshots.qdocinc {file} {iOS} {ios}
-        \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
 
     To run an application with the iOS style, see
     \l {Using Styles in Qt Quick Controls}.

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
+    \include style-screenshots.qdocinc {file} {macOS} {macos}
-        \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
 
     To run an application with the macOS style, see
     \l {Using Styles in Qt Quick Controls}.

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
+    \include style-screenshots.qdocinc {file} {Material} {material}
-        \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
 
     To run an application with the Material style, see
     \l {Using Styles in Qt Quick Controls}.

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.
 

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
+    \include style-screenshots.qdocinc {file} {Universal} {universal}
-        \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
 
     To run an application with the Universal style, see
     \l {Using Styles in Qt Quick Controls}.