StyleKit: document the existing StyleKit example

There is a 'stylekit' example in the examples folder
in qtdeclarative. Polish, document, and link to it, from
the StyleKit landing page.

Change-Id: I62a354bee91f45075a448c253d0aa138b23de8b2
Reviewed-by: Topi Reinio <topi.reinio@qt.io>
(cherry picked from commit a22245a136dd2555b08ca1689bdb60197ea5d4d5)
Reviewed-by: Qt Cherry-pick Bot <cherrypick_bot@qt-project.org>
(cherry picked from commit 08a7195b4ff8ce26ae28b758b209304822256238)

9 files changed, 348 insertions, 186 deletions

diff --git a/examples/quickcontrols/stylekit/Main.qml b/examples/quickcontrols/stylekit/Main.qml
index d06d421f1e..461ee5d3e0 100644
--- a/examples/quickcontrols/stylekit/Main.qml
+++ b/examples/quickcontrols/stylekit/Main.qml
@@ -13,12 +13,11 @@ ApplicationWindow {
     visible: true
     title: qsTr("StyleKit")
 
-    // Set which style to start the application with:
+    // Set the initial style:
     StyleKit.style: hazeStyle
 
-    // An application can provide multiple styles for the user to choose from,
-    // and each style includes its own set of themes.
-
+    // Instantiate the available styles. The user can switch between them
+    // at runtime, and each style provides its own set of themes.
     Haze { id: hazeStyle }
     Vitrum { id: vitrumStyle }
     CustomDelegates { id: delegateStyle }
@@ -35,12 +34,12 @@ ApplicationWindow {
         ColumnLayout {
             id: content
             x: 10
-            y: 30
+            y: app.spacing * 2
             transformOrigin: Item.TopLeft
             spacing: app.spacing * 2
 
             GroupBox {
-                title: "Button"
+                title: "Buttons"
                 RowLayout {
                     spacing: app.spacing
                     Button {
@@ -66,7 +65,7 @@ ApplicationWindow {
             }
 
             GroupBox {
-                title: "CheckBox and RadioButton"
+                title: "CheckBoxes and RadioButtons"
                 GridLayout {
                     rowSpacing: app.spacing
                     columnSpacing: app.spacing
@@ -102,7 +101,7 @@ ApplicationWindow {
             }
 
             GroupBox {
-                title: "Text input"
+                title: "Text inputs"
                 RowLayout {
                     spacing: app.spacing
 
@@ -143,23 +142,25 @@ ApplicationWindow {
             }
 
             GroupBox {
-                title: "Slider"
+                title: "Sliders"
                 RowLayout {
                     spacing: app.spacing
 
-                    Slider {
-                        id: slider1
-                        from: 0
-                        to: 10
-                        value: 5
-                    }
+                    ColumnLayout {
+                        Slider {
+                            id: slider1
+                            from: 0
+                            to: 10
+                            value: 5
+                        }
 
-                    RangeSlider {
-                        id: rangeSlider1
-                        from: 0
-                        to: 10
-                        first.value: 2
-                        second.value: 8
+                        RangeSlider {
+                            id: rangeSlider1
+                            from: 0
+                            to: 10
+                            first.value: 2
+                            second.value: 8
+                        }
                     }
 
                     Slider {
@@ -182,26 +183,7 @@ ApplicationWindow {
             }
 
             GroupBox {
-                title: "ItemDelegate"
-                ColumnLayout {
-                    spacing:  app.spacing
-
-                    ItemDelegate {
-                        id: itemDelegate1
-                        text: "ItemDelegate 1"
-                        Layout.fillWidth: true
-                    }
-
-                    ItemDelegate {
-                        id: itemDelegate2
-                        text: "ItemDelegate 2"
-                        Layout.fillWidth: true
-                    }
-                }
-            }
-
-            GroupBox {
-                title: "Popup"
+                title: "Popups"
                 RowLayout {
                     spacing: app.spacing
 
@@ -213,34 +195,12 @@ ApplicationWindow {
             }
 
             GroupBox {
-                title: "Pane, Frame and GroupBox"
-                RowLayout {
-                    spacing: app.spacing
-
-                    Pane {
-                        id: pane1
-                        Text {
-                            anchors.centerIn: parent
-                            text: "This is a Pane"
-                        }
-                    }
-
-                    Frame {
-                        id: frame1
-                        Text {
-                            anchors.centerIn: parent
-                            text: "This is a Frame"
-                        }
-                    }
-                }
-            }
-
-            GroupBox {
                 title: "Variations"
                 StyleVariation.variations: ["mini"]
                 ColumnLayout {
-                    spacing: app.spacing
+                    spacing: app.spacing * 2
                     Text {
+                        visible: StyleKit.style === hazeStyle
                         text: "These controls are affected by an Instance Variation named 'mini'"
                     }
                     RowLayout {
@@ -270,19 +230,22 @@ ApplicationWindow {
                         }
                     }
                     Frame {
-                        Layout.preferredHeight: 80
+                        Layout.preferredHeight: 120
                         Layout.fillWidth: true
-                        Text {
-                            anchors.horizontalCenter: parent.horizontalCenter
-                            text: "Frame also has a Type Variation that affects Button"
+                        Column {
+                            spacing: 20
+                            anchors.fill: parent
+                            Text {
+                                visible: StyleKit.style === hazeStyle
+                                anchors.horizontalCenter: parent.horizontalCenter
+                                text: "Frame also has a Type Variation that affects Button"
+                            }
+                            Button {
+                                anchors.horizontalCenter: parent.horizontalCenter
+                                text: "Button"
+                            }
                         }
-                        Button {
-                            anchors.horizontalCenter: parent.horizontalCenter
-                            anchors.bottom: parent.bottom
-                            anchors.bottomMargin: app.spacing
-                            text: "Button"
-                        }
-                    }
+                     }
                 }
             }
 
@@ -305,13 +268,14 @@ ApplicationWindow {
             anchors.rightMargin: 10
             contentWidth: menuContents.implicitWidth
             contentHeight: menuContents.implicitHeight
-            spacing: app.spacing
             title: "Settings"
-            y: 26
+            y: app.spacing * 2
 
             GridLayout {
                 id: menuContents
                 columns: 2
+                rowSpacing: app.spacing
+                columnSpacing: app.spacing
 
                 Label { text: "Style" }
                 ComboBox {
@@ -321,9 +285,9 @@ ApplicationWindow {
                     currentValue: StyleKit.style
                     model: [
                         { value: hazeStyle, text: "Haze" },
-                        { value: vitrumStyle, text: "Vitrum" },
-                        { value: delegateStyle, text: "CustomDelegates" },
                         { value: plainStyle, text: "Plain" },
+                        { value: vitrumStyle, text: "Vitrum" },
+                        { value: delegateStyle, text: "CustomDelegates" }
                     ]
                     onCurrentTextChanged: {
                         StyleKit.style = model[currentIndex].value;
@@ -353,7 +317,7 @@ ApplicationWindow {
                         // set, or if that value is out-of-range WRT the slider. In both cases,
                         // this would lead to a binding loop.
                         let styleValue = StyleKit.style.control.background.radius
-                        if (styleValue === value || styleValue < from || styleValue > to)
+                        if (styleValue === value || styleValue < from || styleValue > to)
                             return
                         StyleKit.style.abstractButton.background.radius = value
                         StyleKit.style.groupBox.background.radius = value
@@ -380,13 +344,14 @@ ApplicationWindow {
         id: popup
         anchors.centerIn: parent
         closePolicy: Popup.NoAutoClose
+        popupType: Popup.Window
 
         ColumnLayout {
             anchors.centerIn: parent
-            spacing: 20
+            spacing: app.spacing * 2
 
             Label {
-                text: qsTr("This is a Label in a Popup")
+                text: qsTr("A Label in a Popup")
                 Layout.alignment: Qt.AlignHCenter
             }
 
@@ -403,8 +368,8 @@ ApplicationWindow {
     // define and style your own custom controls.
 
     component CustomButtonImplementation : Rectangle {
-        implicitWidth: fancyButton.background.implicitWidth
-        implicitHeight: fancyButton.background.implicitHeight
+        implicitWidth: fancyButton.background.implicitWidth + fancyButton.leftPadding + fancyButton.rightPadding
+        implicitHeight: fancyButton.background.implicitHeight + fancyButton.topPadding + fancyButton.bottomPadding
         radius: fancyButton.background.radius
         border.color: fancyButton.background.border.color
         border.width: fancyButton.background.border.width
@@ -432,9 +397,11 @@ ApplicationWindow {
         TapHandler {
             id: tapHandler
             onTapped: {
-                let allFancyButtons = StyleKit.style.theme.getControl(fancyButton.type)
-                if (allFancyButtons) // only hazeStyle has defined a fancyButtton
-                    allFancyButtons.background.color = "magenta"
+                // Change the background color of all controls whose
+                // controlType matches fancyButton.type.
+                let fancyButtons = StyleKit.style.theme.getControl(fancyButton.type)
+                if (fancyButtons) // Only the Haze style defines a fancyButton
+                    fancyButtons.background.color = "yellowgreen"
             }
         }
     }
diff --git a/examples/quickcontrols/stylekit/styles/CustomDelegates.qml b/examples/quickcontrols/stylekit/styles/CustomDelegates.qml
index 7b7a654839..cfca6db955 100644
--- a/examples/quickcontrols/stylekit/styles/CustomDelegates.qml
+++ b/examples/quickcontrols/stylekit/styles/CustomDelegates.qml
@@ -2,36 +2,84 @@
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 
 import QtQuick
+import QtQuick.Shapes
 import QtQuick.Templates as T
 import Qt.labs.StyleKit
 
 Style {
 
-    // Define some custom delegates:
+    /******************************************************************
+     * Defining some helper types for the custom delegates further down
+     ******************************************************************/
+
+    component Star : Shape {
+        id: star
+        ShapePath {
+            fillColor: star.palette.accent
+            scale: Qt.size(star.width, star.height)
+            PathMove { x: 0.50; y: 0.00 }
+            PathLine { x: 0.59; y: 0.35 }
+            PathLine { x: 0.97; y: 0.35 }
+            PathLine { x: 0.66; y: 0.57 }
+            PathLine { x: 0.78; y: 0.91 }
+            PathLine { x: 0.50; y: 0.70 }
+            PathLine { x: 0.22; y: 0.91 }
+            PathLine { x: 0.34; y: 0.57 }
+            PathLine { x: 0.03; y: 0.35 }
+            PathLine { x: 0.41; y: 0.35 }
+            PathLine { x: 0.50; y: 0.00 }
+        }
+        NumberAnimation on rotation {
+            loops: Animation.Infinite
+            from: 0
+            to: 359
+            duration: 20000
+        }
+    }
+
+    component OverlayData: QtObject {
+        property real overlayScale: 1
+    }
+
+    /******************************************************************
+     * Define custom delegates. These replace the default StyledItem
+     * for selected controls in the style definition below.
+     ******************************************************************/
 
     component OverlayDelegate : StyledItem {
-        // Using StyledItem as the base type is the easiest approach when creating
-        // a custom delegate. A StyledItem will draw the delegate as configured by
-        // the style, and give you the opportunity to place your own items on top.
-        // Note that all delegates used in StyleKit, custom or not, are laid out by
-        // StyleKit, so you only need to focus on the appearance.
-        Rectangle {
-            width: 20
-            height: 15
-            scale: 2.5
-            radius: 255
-            opacity: 0.5
-            color: "transparent"
-            border.width: 4
-            border.color: palette.accent
+        /* Using StyledItem as the base type is the easiest approach when creating
+         * a custom delegate. A StyledItem will draw the delegate as configured by
+         * the style, and give you the opportunity to place your own items on top. */
+        id: delegate
+        width: parent.width
+        height: parent.height
+
+        Star {
+            width: 40
+            height: 40
+            anchors.centerIn: parent
+            anchors.verticalCenterOffset: -10
+            scale: delegate.delegateStyle.data.overlayScale
+            Behavior on scale {
+                NumberAnimation {
+                    duration: 300
+                    easing.type: Easing.OutBounce
+                }
+            }
+        }
+        Text {
+            text: "overlay"
+            font.pixelSize: 8
+            y: -10
         }
     }
 
     component UnderlayDelegate : Item {
-        /* Custom delegates that don't inherit from StyledItem can optionally
-         * declare 'delegateStyle' and 'control' properties. Use delegateStyle
-         * to bind to style attributes like color, radius, and opacity. Use control
-         * to access the Quick Control the owns the delegate. */
+        /* Custom delegates that don't inherit from StyledItem needs to define
+         * 'delegateStyle' and 'control' properties, which are assinged to by StyleKit.
+         * Use 'delegateStyle' to bind to style attributes like color, radius, and opacity.
+         * Use 'control' to access the Quick Control the owns the delegate. */
+        id: delegate
         required property DelegateStyle delegateStyle
         required property QtObject control
 
@@ -43,46 +91,38 @@ Style {
         rotation: delegateStyle.rotation
         visible: delegateStyle.visible
 
-        Rectangle {
-            id: underlay
+        Star {
+            visible: delegate.control.checked
             anchors.centerIn: parent
-            width: 10 + (parent.width / 2)
-            height: 10 + (parent.height / 2)
-            radius: delegateStyle.radius
-            scale: delegateStyle.data.underlayScale
-            opacity: 0.5
-            border.width: 8
-            border.color: palette.accent
-            Behavior on scale {
-                NumberAnimation {
-                    duration: 100
-                }
-            }
-            NumberAnimation on rotation {
-                loops: Animation.Infinite
-                from: 0
-                to: 359
-                duration: 5000
-            }
+            anchors.verticalCenterOffset: -1
+            width: 60
+            height: 60
+        }
+
+        Text {
+            text: "underlay"
+            font.pixelSize: 8
+            y: -10
         }
 
         StyledItem {
-            // Embed a StyledItem to render the standard delegate on top of the custom one
-            delegateStyle: parent.delegateStyle
+            // Embed a StyledItem to render the standard delegate on top
+            delegateStyle: delegate.delegateStyle
         }
     }
 
     component SliderHandle : StyledItem {
-        // You can pass your own properties from the style, like
-        // here, where we use 'isFirst' to tell whether the delegate instance
-        // represents the first or the second handle, in case of a RangeSlider.
-        // By adding a 'control' property, we can access the slider's value(s).
+        /* Unlike the 'data' property, which varies per state, you can use regular
+         * QML properties to pass static information to a delegate. Here, 'isFirstHandle'
+         * distinguishes the first from the second handle in a RangeSlider, and
+         * 'control' gives access to the slider's current value(s). */
         id: sliderHandle
         property bool isFirstHandle: false
         required property QtObject control
 
         Text {
             rotation: sliderHandle.control.vertical ? -90 : 0
+            color: "ghostwhite"
             anchors.centerIn: parent
             font.pixelSize: 9
             text: {
@@ -99,8 +139,8 @@ Style {
     }
 
     component NoiseDelegate : ShaderEffect {
-        // Use graphical effects in combination with StyledItem to create more
-        // complex delegate appearances. In this delegate, we create a noise overlay.
+        /* Use graphical effects in combination with StyledItem to create more
+         * complex delegate appearances. In this delegate, we create a noise overlay. */
         implicitWidth: unifiedSourceItem.implicitWidth
         implicitHeight: unifiedSourceItem.implicitHeight
         width: parent.width
@@ -139,11 +179,18 @@ Style {
             rotation: 0.0
             scale: 1.0
         }
+
+        Text {
+            text: "noise"
+            font.pixelSize: 8
+            y: -10
+        }
     }
 
     component WavingQt : ShaderEffect {
         implicitWidth: delegateStyle.implicitWidth
         implicitHeight: delegateStyle.implicitHeight
+        visible: delegateStyle.visible
 
         required property DelegateStyle delegateStyle
 
@@ -190,58 +237,109 @@ Style {
 
         Text {
             anchors.right: parent.right
-            anchors.bottom: parent.bottom
+            anchors.top: parent.bottom
             anchors.rightMargin: 10
-            color: "white"
+            font.pixelSize: 8
             text: "Custom shadow"
         }
     }
 
-    // Define the style itself, and tell it to use the custom delegates to render
-    // the controls (instead of the otherwise default StyledItem):
+    /******************************************************************
+     * Define the style, assigning the custom delegates above to specific
+     * controls in place of the default StyledItem:
+     ******************************************************************/
 
-    checkBox.checked.indicator.delegate: OverlayDelegate {}
-    radioButton.checked.indicator.foreground.delegate: OverlayDelegate {}
-    switchControl.handle.delegate: WavingQt {}
+    applicationWindow {
+        background.color: "#544e52"
+    }
 
-    abstractButton {
+    control {
+        text.color: "ghostwhite"
         background {
-            delegate: UnderlayDelegate {}
-            shadow.opacity: 0
-            data: QtObject {
-                // When using custom delegates, you might need pass properties to it that
-                // should change per state. The 'data' property can be used for this purpose.
-                property real underlayScale: 1.1
+            border.color: "#3d373b"
+            shadow.color: "#555555"
+            color: "#8e848a"
+        }
+
+        handle {
+            color: "#8e848a"
+            border.color: Qt.darker("#544e52", 1.5)
+            shadow.color: "#808080"
+        }
+
+        indicator {
+            color: Qt.darker("#8e848a", 1.6)
+        }
+        hovered.background.color: Qt.lighter("#8e848a", 1.2)
+    }
+
+    button {
+        topPadding: 30
+        background {
+            delegate: OverlayDelegate{}
+            // Use the 'data' property to pass custom, per-state information to a custom delegate
+            data: OverlayData {
+                overlayScale: 0.5
             }
         }
-        hovered.background.data: QtObject {
-            property real underlayScale: 1.4
+        hovered.background.data: OverlayData {
+            overlayScale: 1.8
+        }
+        pressed.background.data: OverlayData {
+            overlayScale: 1.6
+        }
+        checked.background.data: OverlayData {
+            overlayScale: 1.4
+        }
+    }
+
+    flatButton {
+        background.shadow.visible: false
+    }
+
+    checkBox {
+        indicator.foreground {
+            implicitWidth: 30
+            implicitHeight: 30
+            margins: 4
+            delegate: WavingQt {}
         }
     }
 
+    radioButton {
+        indicator.delegate: UnderlayDelegate {}
+    }
+
     slider {
         background.visible: true
-        background.delegate: NoiseDelegate {}
-        indicator.delegate: NoiseDelegate {}
+        // background.delegate: NoiseDelegate {}
+        // indicator.delegate: NoiseDelegate {}
         handle.delegate: SliderHandle { isFirstHandle: true }
         handle.second.delegate: SliderHandle { isFirstHandle: false }
     }
 
     textField {
-        background.shadow.color: "lightgray"
-        background.shadow.verticalOffset: 14
-        background.shadow.horizontalOffset: 14
+        background.shadow.verticalOffset: 4
+        background.shadow.horizontalOffset: 4
         background.shadow.delegate: CustomShadowDelegate {}
-        // verify that the delegate is allowed to change per state
-        pressed.background.shadow.delegate: CustomShadowDelegate {}
-        variations: StyleVariation {
-            button.background {
-                delegate: null
-                implicitWidth: 30
-                implicitHeight: 20
-                margins: 10
-                shadow.color: "transparent"
-            }
+    }
+
+    switchControl {
+        background.visible: true
+        checked {
+            background.delegate: NoiseDelegate {}
+            indicator.foreground.delegate: NoiseDelegate {}
         }
     }
+
+    comboBox {
+        background.implicitWidth: 200
+    }
+
+    frame {
+        padding: 20
+        spacing: 50
+        hovered.background.color: "#8e848a"
+    }
+
 }
diff --git a/examples/quickcontrols/stylekit/styles/Haze.qml b/examples/quickcontrols/stylekit/styles/Haze.qml
index ebad28ac95..cdeda4a3de 100644
--- a/examples/quickcontrols/stylekit/styles/Haze.qml
+++ b/examples/quickcontrols/stylekit/styles/Haze.qml
@@ -19,10 +19,10 @@ Style {
     control {
         // 'control' is the fallback for all the controls. Any properties that are not
         // overridden by a specific control underneath will be read from here instead.
-        leftPadding: 10
-        topPadding: 5
-        rightPadding: 10
-        bottomPadding: 5
+        leftPadding: 8
+        topPadding: 2
+        rightPadding: 8
+        bottomPadding: 2
 
         handle {
             implicitWidth: 25
@@ -66,7 +66,7 @@ Style {
         // have in common. Any properties not set here will fall back to those defined in 'control'.
         background {
             implicitWidth: 100
-            implicitHeight: 40
+            implicitHeight: 30
             opacity: 0.8
             radius: 8
 
@@ -91,6 +91,11 @@ Style {
         }
     }
 
+    flatButton {
+        background.shadow.visible: false
+        background.gradient: null
+    }
+
     checkBox {
         transition: Transition {
             NumberAnimation {
@@ -114,17 +119,11 @@ Style {
         pressed.background.scale: 1.0
     }
 
-    groupBox {
-        background.topMargin: 30
-        background.implicitHeight: 30
-        text.bold: true
-        spacing: 5
-        padding: 10
-    }
-
     pane {
         // 'pane' is the fallback for all pane based controls, such as 'frame' and 'groupBox'.
         //  Any properties not set here will fall back to those defined in 'control'.
+        spacing: 5
+        padding: 20
         background {
             border.width: 0
             implicitWidth: 200
@@ -133,6 +132,12 @@ Style {
         }
     }
 
+    groupBox {
+        background.topMargin: 20
+        background.implicitHeight: 30
+        text.bold: true
+    }
+
     radioButton {
         indicator {
             foreground {
@@ -162,6 +167,9 @@ Style {
                 radius: 8
             }
         }
+        vertical {
+            background.implicitWidth: 150
+        }
     }
 
     spinBox {
@@ -241,6 +249,11 @@ Style {
             indicator.implicitHeight: 8
             indicator.implicitWidth: Style.Stretch
         }
+
+        pane {
+            padding: 20
+            spacing: 5
+        }
     }
 
     StyleVariation {
@@ -287,8 +300,9 @@ Style {
         // The 'controlType' can be any number between 0 and 100000.
         controlType: fancyButton
         background {
-            implicitWidth: 200
-            radius: 4
+            implicitWidth: 120
+            implicitHeight: 30
+            radius: 0
         }
     }
 
@@ -359,6 +373,9 @@ Style {
         }
 
         abstractButton {
+            background {
+                shadow.scale: 1.05
+            }
             hovered.background {
                 shadow.scale: 1.4
                 color: palette.accent
@@ -399,7 +416,7 @@ Style {
         CustomControl {
             controlType: fancyButton
             background {
-                color: "lightslategray"
+                color: "tan"
             }
         }
 
@@ -437,6 +454,7 @@ Style {
         }
 
         control {
+            text.color: "lightgray"
             background {
                 border.color: "#3d373b"
                 shadow.color: "#555555"
@@ -519,7 +537,7 @@ Style {
         CustomControl {
             controlType: fancyButton
             background {
-                color: "lightsteelblue"
+                color: "thistle"
             }
         }
 
diff --git a/examples/quickcontrols/stylekit/styles/Plain.qml b/examples/quickcontrols/stylekit/styles/Plain.qml
index fad56cc86e..b83f14ee7e 100644
--- a/examples/quickcontrols/stylekit/styles/Plain.qml
+++ b/examples/quickcontrols/stylekit/styles/Plain.qml
@@ -7,6 +7,9 @@ import Qt.labs.StyleKit
 Style {
     control {
         // We start by styling a control in its 'normal' state
+        leftPadding: 20
+        rightPadding: 20
+
         background {
             border.color: palette.accent
             radius: 4
@@ -34,6 +37,7 @@ Style {
         }
 
         checked {
+            text.color: "white"
             background {
                 color: palette.accent.darker(1.2)
                 scale: 0.95
@@ -63,17 +67,36 @@ Style {
         // In this style, we want to show the background for all button types, such as
         // 'button', 'checkBox', 'radioButton', etc, so we set 'background.visible: true'.
         // By default, the background is normally hidden for most controls.
-        background.visible: true
+        background {
+            visible: true
+            shadow {
+                color: "darkgray"
+                horizontalOffset: 2
+                verticalOffset: 2
+            }
+        }
     }
 
     itemDelegate {
         // We don't want the menu items in a ComboBox to fade, so we override and unset
         // the transition previously set for all controls in the 'control' section.
         transition: null
+        background.color: "transparent"
+        hovered {
+            background.color: palette.accent
+            text.color: "white"
+        }
+    }
+
+    popup {
+        // Remove padding so that item delegates span the full width
+        padding: 0
     }
 
     scrollBar {
+        // Hide the background, showing only the groove and handle
         background.visible: false
+        padding: 0
     }
 
     pane {
@@ -81,4 +104,8 @@ Style {
          * should not. Override the property here to disable that behavior for panes. */
         background.color: "white"
     }
+
+    applicationWindow {
+        background.color: "whitesmoke"
+    }
 }
diff --git a/examples/quickcontrols/stylekit/styles/Vitrum.qml b/examples/quickcontrols/stylekit/styles/Vitrum.qml
index 2995e818ce..03973c28b1 100644
--- a/examples/quickcontrols/stylekit/styles/Vitrum.qml
+++ b/examples/quickcontrols/stylekit/styles/Vitrum.qml
@@ -217,6 +217,7 @@ Style {
     }
 
     pane {
+        padding: 20
         background.delegate: null
     }
 
diff --git a/src/labs/stylekit/doc/images/qtlabsstylekit-example.webp b/src/labs/stylekit/doc/images/qtlabsstylekit-example.webp
new file mode 100644
index 0000000000..da6569e48e
--- /dev/null
+++ b/src/labs/stylekit/doc/images/qtlabsstylekit-example.webp
diff --git a/src/labs/stylekit/doc/qtlabsstylekit.qdocconf b/src/labs/stylekit/doc/qtlabsstylekit.qdocconf
index a22c20b467..d5d7584c0e 100644
--- a/src/labs/stylekit/doc/qtlabsstylekit.qdocconf
+++ b/src/labs/stylekit/doc/qtlabsstylekit.qdocconf
@@ -1,5 +1,5 @@
 include($QT_INSTALL_DOCS/global/qt-module-defaults.qdocconf)
-include($QT_INSTALL_DOCS/config/exampleurl-qtquickcontrols.qdocconf)
+include($QT_INSTALL_DOCS/config/exampleurl-qtdeclarative.qdocconf)
 
 project                 = QtLabsStyleKit
 description             = Qt Labs StyleKit Reference Documentation
@@ -28,7 +28,14 @@ depends = qtcore qtgui qtdoc qtqml qtqmlcore qtquick qtquickcontrols
 # This module has no documented C++ types, clear the module header
 moduleheader =
 
-exampledirs += snippets src
+exampledirs += snippets
+
+# The StyleKit example lives under examples/quickcontrols/, but its docs
+# need to link to StyleKit types, which are not available during the
+# Quick Controls doc build. We therefore build the example docs here
+# and point examples to the example project file.
+examples += ../../../../examples/quickcontrols/stylekit/CMakeLists.txt
+examplesinstallpath = quickcontrols
 
 {headerdirs,sourcedirs} += ..
 
diff --git a/src/labs/stylekit/doc/src/qtlabsstylekit-example.qdoc b/src/labs/stylekit/doc/src/qtlabsstylekit-example.qdoc
new file mode 100644
index 0000000000..90310097a7
--- /dev/null
+++ b/src/labs/stylekit/doc/src/qtlabsstylekit-example.qdoc
@@ -0,0 +1,41 @@
+// Copyright (C) 2026 The Qt Company Ltd.
+// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR GFDL-1.3-no-invariants-only
+
+/*!
+    \example stylekit
+    \examplecategory {User Interface Components}
+    \title StyleKit Example
+    \brief Shows how to style \l {Qt Quick Controls} using \l {Qt Labs StyleKit}{StyleKit}.
+    \ingroup qtquickcontrols-examples
+
+    \image qtlabsstylekit-example.webp
+
+    This example shows how to style applications with \l {Qt Labs StyleKit}{StyleKit}.
+    It includes several styles that each demonstrate different aspects of styling:
+
+    \list
+        \li \b Plain - A minimal style with only the basics
+        \li \b Haze - An advanced style with multiple themes
+        \li \b Vitrum - A style targeting VR environments
+        \li \b CustomDelegates - A style demonstrating how to create overlays, underlays, and shader effects
+    \endlist
+
+    The example demonstrates, among other things, how to:
+
+    \list
+        \li Implement and switch between different styles.
+        \li Implement support for light and dark themes, as well as additional themes
+            such as high-contrast.
+        \li Use \l StyleVariation to provide alternative styling for
+            parts of the application.
+        \li Implement custom delegates to add overlay and underlay effects.
+        \li Apply shader-based visual effects to the controls.
+        \li Build custom controls using \l CustomControl and \l StyleReader.
+        \li Interact with a style at runtime, for example to change the
+            theme or adjust style properties like the background radius.
+    \endlist
+
+    \sa {Qt Labs StyleKit}, Style, Theme
+
+    \include examples-run.qdocinc
+*/
diff --git a/src/labs/stylekit/doc/src/qtlabsstylekit-index.qdoc b/src/labs/stylekit/doc/src/qtlabsstylekit-index.qdoc
index 084c3aeeb9..bf01245ad8 100644
--- a/src/labs/stylekit/doc/src/qtlabsstylekit-index.qdoc
+++ b/src/labs/stylekit/doc/src/qtlabsstylekit-index.qdoc
@@ -60,6 +60,9 @@
     \section1 Articles and Guides
 
     \section1 Examples
+    \list
+        \li \l{StyleKit Example} - Shows how to style \l {Qt Quick Controls} using \l {Qt Labs StyleKit}{StyleKit}.
+    \endlist
 
     \section1 QML Types