Implement Style as an attached property

Change-Id: I006ee566647e31d1a14919d164d7dd68539aae10
Reviewed-by: Jari-Pekka Nurmi <jpnurmi@theqtcompany.com>

5 files changed, 65 insertions, 72 deletions

diff --git a/examples/quick/calendar/main.qml b/examples/quick/calendar/main.qml
index 759a081e..645b05dd 100644
--- a/examples/quick/calendar/main.qml
+++ b/examples/quick/calendar/main.qml
@@ -99,7 +99,7 @@ ApplicationWindow {
                     id: title
                     x: delegate.contentItem.x
                     width: delegate.contentItem.width
-                    spacing: window.style.spacing
+                    spacing: Style.spacing
                     Text {
                         width: parent.width
                         height: implicitHeight * 2
@@ -129,7 +129,7 @@ ApplicationWindow {
                     width: delegate.contentItem.width / 7
                     height: delegate.contentItem.height / 6
                     opacity: model.month === delegate.month ? 1 : 0
-                    color: model.today ? window.style.accentColor : window.style.textColor
+                    color: model.today ? Style.accentColor : Style.textColor
                     Rectangle {
                         z: -1
                         anchors.centerIn: parent
@@ -137,8 +137,8 @@ ApplicationWindow {
                         height: width
                         radius: width / 2
                         opacity: 0.5
-                        color: pressed ? window.style.pressColor : "transparent"
-                        border.color: eventModel.eventsForDate(model.date).length > 0 ? window.style.accentColor : "transparent"
+                        color: pressed ? Style.pressColor : "transparent"
+                        border.color: eventModel.eventsForDate(model.date).length > 0 ? Style.accentColor : "transparent"
                     }
                 }
             }
@@ -146,7 +146,7 @@ ApplicationWindow {
                 z: -1
                 parent: calendar
                 anchors.fill: parent
-                border.color: window.style.frameColor
+                border.color: Style.frameColor
             }
         }
 
@@ -185,7 +185,7 @@ ApplicationWindow {
         Rectangle {
             width: (parent.width > parent.height ? (parent.width - parent.spacing) * 0.4 : parent.width)
             height: (parent.height > parent.width ? (parent.height - parent.spacing) * 0.4 : parent.height)
-            border.color: window.style.frameColor
+            border.color: Style.frameColor
 
             ListView {
                 id: eventsListView
diff --git a/examples/quick/controls/drawer/main.qml b/examples/quick/controls/drawer/main.qml
index df46577b..8ab67829 100644
--- a/examples/quick/controls/drawer/main.qml
+++ b/examples/quick/controls/drawer/main.qml
@@ -53,7 +53,7 @@ ApplicationWindow {
         id: content
         anchors.fill: parent
         anchors.margins: -1
-        border.color: window.style.frameColor
+        border.color: Style.frameColor
 
         Image {
             width: window.width / 2
@@ -98,13 +98,13 @@ ApplicationWindow {
             model: VisualItemModel {
                 Label {
                     text: "Settings"
-                    x: window.style.padding
-                    width: parent.width - window.style.padding * 2
+                    x: Style.padding
+                    width: parent.width - Style.padding * 2
                     lineHeight: 2.0
-                    color: window.style.accentColor
+                    color: Style.accentColor
                     verticalAlignment: Text.AlignVCenter
                 }
-                Rectangle { width: parent.width; height: 1; color: window.style.frameColor }
+                Rectangle { width: parent.width; height: 1; color: Style.frameColor }
                 Switch {
                     id: dim
                     text: "Dim"
@@ -113,7 +113,7 @@ ApplicationWindow {
                     layoutDirection: Qt.RightToLeft
                     enabled: effect.current != uncover
                 }
-                Rectangle { width: parent.width; height: 1; color: window.style.frameColor }
+                Rectangle { width: parent.width; height: 1; color: Style.frameColor }
                 RadioButton {
                     id: overlay
                     text: "Overlay"
@@ -136,14 +136,14 @@ ApplicationWindow {
                     Exclusive.group: effect
                     layoutDirection: Qt.RightToLeft
                 }
-                Rectangle { width: parent.width; height: 1; color: window.style.frameColor }
+                Rectangle { width: parent.width; height: 1; color: Style.frameColor }
             }
             Rectangle {
                 z: -1
                 anchors.fill: parent
                 anchors.topMargin: -1
                 anchors.bottomMargin: -1
-                border.color: window.style.frameColor
+                border.color: Style.frameColor
             }
 
             transform: Translate {
diff --git a/examples/quick/controls/mirroring/main.qml b/examples/quick/controls/mirroring/main.qml
index 8aeae85f..1bdf8cb2 100644
--- a/examples/quick/controls/mirroring/main.qml
+++ b/examples/quick/controls/mirroring/main.qml
@@ -67,7 +67,7 @@ ApplicationWindow {
             Label {
                 id: label
                 text: "Beyond the essentials."
-                color: window.style.accentColor
+                color: Style.accentColor
                 anchors.fill: parent
                 anchors.margins: 48
                 horizontalAlignment: Text.AlignHCenter
@@ -89,7 +89,7 @@ ApplicationWindow {
                 width: parent.width
                 height: 1
                 anchors.bottom: parent.bottom
-                color: window.style.frameColor
+                color: Style.frameColor
             }
         }
 
@@ -157,7 +157,7 @@ ApplicationWindow {
                     width: flow.width
                     Row {
                         width: parent.width
-                        spacing: window.style.spacing
+                        spacing: Style.spacing
                         readonly property real availableWidth: (flow.width - 12) / 2
                         readonly property real contentWidth: okButton.implicitWidth + cancelButton.implicitWidth + 12
                         readonly property real buttonWidth: contentWidth > availableWidth ? (width / 2 - spacing) : (width / 2 - 2 * spacing) / 2
@@ -196,7 +196,7 @@ ApplicationWindow {
                     width: flow.width
                     Column {
                         width: parent.width
-                        spacing: window.style.spacing
+                        spacing: Style.spacing
                         ProgressBar {
                             width: parent.width
                             indeterminate: true
@@ -213,7 +213,7 @@ ApplicationWindow {
                     width: flow.width
                     Column {
                         width: parent.width
-                        spacing: window.style.spacing
+                        spacing: Style.spacing
                         Slider {
                             id: slider
                             value: 0.4
diff --git a/examples/quick/controls/styles/main.qml b/examples/quick/controls/styles/main.qml
index 1d0dd20b..c614320d 100644
--- a/examples/quick/controls/styles/main.qml
+++ b/examples/quick/controls/styles/main.qml
@@ -52,7 +52,7 @@ ApplicationWindow {
         ToolButton {
             label: Text {
                 text: "\u25C0"
-                color: enabled ? window.style.accentColor : window.style.frameColor
+                color: enabled ? Style.accentColor : Style.frameColor
                 anchors.centerIn: parent
             }
             enabled: stackview.depth > 1
@@ -70,18 +70,15 @@ ApplicationWindow {
         id: pageComponent
         Control {
             id: page
-            style: Style {
-                padding: 6
-                roundness: roundedToggle.checked ? 3 : 0
-                accentColor: Qt.hsla(colorSlider.position, 0.5, 0.5, 1.0)
-                backgroundColor: darkButton.checked ? "#444" : "#fff"
-                frameColor: darkButton.checked ? "#666" : "#ccc"
-                textColor: darkButton.checked ? "#eee" : "#111"
-                pressColor: darkButton.checked ? "#33ffffff" : "#33333333"
-                baseColor: darkButton.checked ? "#444" : "#eee"
-            }
+            Style.roundness: roundedToggle.checked ? 3 : 0
+            Style.accentColor: Qt.hsla(colorSlider.position, 0.5, 0.5, 1.0)
+            Style.backgroundColor: darkButton.checked ? "#444" : "#fff"
+            Style.frameColor: darkButton.checked ? "#666" : "#ccc"
+            Style.textColor: darkButton.checked ? "#eee" : "#111"
+            Style.pressColor: darkButton.checked ? "#33ffffff" : "#33333333"
+            Style.baseColor: darkButton.checked ? "#444" : "#eee"
             background: Rectangle {
-                color: style.backgroundColor
+                color: Style.backgroundColor
             }
             Flickable {
                 anchors.fill: parent
@@ -97,7 +94,7 @@ ApplicationWindow {
 
                     Label {
                         text: "Code less. Create more."
-                        color: page.style.accentColor
+                        color: Style.accentColor
                         width: parent.width
                         horizontalAlignment: Text.AlignHCenter
                         verticalAlignment: Text.AlignVCenter
@@ -110,7 +107,7 @@ ApplicationWindow {
                     Rectangle {
                         width: parent.width
                         height: 1
-                        color: page.style.frameColor
+                        color: Style.frameColor
                     }
 
                     Column {
@@ -118,20 +115,19 @@ ApplicationWindow {
                         width: parent.width
                         Label {
                             text: "Accent color"
-                            color: page.style.textColor
+                            color: Style.textColor
                         }
                         Slider {
                             id: colorSlider
                             width: parent.width
                             value: 0.275
-                            //background: Rectangle { border.color: "red" }
                         }
                     }
 
                     Rectangle {
                         width: parent.width
                         height: 1
-                        color: page.style.frameColor
+                        color: Style.frameColor
                     }
 
                     ExclusiveGroup {
@@ -148,7 +144,6 @@ ApplicationWindow {
                             checked: true
                             layoutDirection: Qt.RightToLeft
                             Exclusive.group: styleGroup
-                            //background: Rectangle { border.color: "red" }
                         }
                         RadioButton {
                             id: darkButton
@@ -156,14 +151,13 @@ ApplicationWindow {
                             width: parent.width
                             layoutDirection: Qt.RightToLeft
                             Exclusive.group: styleGroup
-                            //background: Rectangle { border.color: "red" }
                         }
                     }
 
                     Rectangle {
                         width: parent.width
                         height: 1
-                        color: page.style.frameColor
+                        color: Style.frameColor
                     }
 
                     ToggleButton {
@@ -172,13 +166,12 @@ ApplicationWindow {
                         text: "Rounded corners"
                         layoutDirection: Qt.RightToLeft
                         checked: true
-                        //background: Rectangle { border.color: "red" }
                     }
 
                     Rectangle {
                         width: parent.width
                         height: 1
-                        color: page.style.frameColor
+                        color: Style.frameColor
                     }
 
                     Button {
diff --git a/examples/quick/controls/tabs/main.qml b/examples/quick/controls/tabs/main.qml
index 48daaa51..42902298 100644
--- a/examples/quick/controls/tabs/main.qml
+++ b/examples/quick/controls/tabs/main.qml
@@ -55,7 +55,7 @@ ApplicationWindow {
 
         spacing: 1
         anchors.fill: parent
-        background: Rectangle { color: style.frameColor }
+        background: Rectangle { color: Style.frameColor }
 
         Rectangle {
             Tab.title: "Home"
@@ -72,7 +72,7 @@ ApplicationWindow {
 
             Label {
                 text: "Things just got better"
-                color: window.style.accentColor
+                color: Style.accentColor
                 anchors.margins: 40
                 anchors.top: logo.bottom
                 anchors.left: parent.left
@@ -110,46 +110,46 @@ ApplicationWindow {
                     Column {
                         id: feedItem
                         width: parent.width
-                        spacing: window.style.spacing
+                        spacing: Style.spacing
                         Rectangle {
                             width: parent.width
                             height: 1
-                            color: window.style.frameColor
+                            color: Style.frameColor
                             visible: index == 0
                         }
-                        Item { width: 1; height: window.style.spacing }
+                        Item { width: 1; height: Style.spacing }
                         Label {
                             text: model.title
-                            x: window.style.padding
-                            width: parent.width - 2 * window.style.padding
+                            x: Style.padding
+                            width: parent.width - 2 * Style.padding
                             elide: Text.ElideRight
-                            color: window.style.accentColor
+                            color: Style.accentColor
                             font.pointSize: 20
                             lineHeight: 0.75
                         }
                         Label {
                             text: model.description
                             textFormat: Qt.RichText
-                            x: window.style.padding
-                            width: parent.width - 2 * window.style.padding
+                            x: Style.padding
+                            width: parent.width - 2 * Style.padding
                             wrapMode: Text.WordWrap
                         }
                         RowLayout {
-                            x: window.style.padding
-                            width: parent.width - 2 * window.style.padding
-                            spacing: window.style.spacing
+                            x: Style.padding
+                            width: parent.width - 2 * Style.padding
+                            spacing: Style.spacing
                             Label {
                                 text: model.creator
                                 height: parent.height
                                 verticalAlignment: Text.AlignVCenter
-                                color: window.style.focusColor
+                                color: Style.focusColor
                                 font.pointSize: 8
                             }
                             Label {
                                 text: model.pubDate
                                 height: parent.height
                                 verticalAlignment: Text.AlignVCenter
-                                opacity: window.style.disabledOpacity
+                                opacity: Style.disabledOpacity
                                 font.pointSize: 8
                             }
                             Item { Layout.fillWidth: true }
@@ -161,7 +161,7 @@ ApplicationWindow {
                         Rectangle {
                             width: parent.width
                             height: 1
-                            color: window.style.frameColor
+                            color: Style.frameColor
                         }
                     }
                 }
@@ -200,47 +200,47 @@ ApplicationWindow {
                     Column {
                         id: commentItem
                         width: parent.width
-                        spacing: window.style.spacing
+                        spacing: Style.spacing
                         Rectangle {
                             width: parent.width
                             height: 1
-                            color: window.style.frameColor
+                            color: Style.frameColor
                             visible: index == 0
                         }
-                        Item { width: 1; height: window.style.spacing }
+                        Item { width: 1; height: Style.spacing }
                         Label {
                             text: model.title
-                            x: window.style.padding
-                            width: parent.width - 2 * window.style.padding
+                            x: Style.padding
+                            width: parent.width - 2 * Style.padding
                             elide: Text.ElideRight
-                            color: window.style.accentColor
+                            color: Style.accentColor
                             font.pointSize: 14
                             lineHeight: 0.75
                         }
-                        Item { width: 1; height: window.style.spacing }
+                        Item { width: 1; height: Style.spacing }
                         Label {
                             text: model.description
                             textFormat: Qt.RichText
-                            x: window.style.padding
-                            width: parent.width - 2 * window.style.padding
+                            x: Style.padding
+                            width: parent.width - 2 * Style.padding
                             wrapMode: Text.WordWrap
                         }
                         RowLayout {
-                            x: window.style.padding
-                            width: parent.width - 2 * window.style.padding
-                            spacing: window.style.spacing
+                            x: Style.padding
+                            width: parent.width - 2 * Style.padding
+                            spacing: Style.spacing
                             Label {
                                 text: model.creator
                                 height: parent.height
                                 verticalAlignment: Text.AlignVCenter
-                                color: window.style.focusColor
+                                color: Style.focusColor
                                 font.pointSize: 8
                             }
                             Label {
                                 text: model.pubDate
                                 height: parent.height
                                 verticalAlignment: Text.AlignVCenter
-                                opacity: window.style.disabledOpacity
+                                opacity: Style.disabledOpacity
                                 font.pointSize: 8
                             }
                             Item { Layout.fillWidth: true }
@@ -252,7 +252,7 @@ ApplicationWindow {
                         Rectangle {
                             width: parent.width
                             height: 1
-                            color: window.style.frameColor
+                            color: Style.frameColor
                         }
                     }
                 }