Initial work on creating a custom style

qtquick/SailfinStyle/Page.qml

@@ -0,0 +1,6 @@
+import QtQuick 2.12
+import QtQuick.Templates 2.12 as T
+
+T.Page {
+
+}

qtquick/SailfinStyle/SailfinStyle.qml

@@ -0,0 +1,20 @@
+pragma Singleton
+import QtQuick 2.12
+
+QtObject {
+    readonly property real scaleFactor: 1.0
+    readonly property real unit: 8.0 * scaleFactor
+    readonly property real smallPadding: unit
+    readonly property real mediumPadding: 2 * unit
+    readonly property real largePadding: 3 * unit
+    readonly property real hugePadding: 4 * unit
+    readonly property real enormousPadding: 5 * unit
+
+    // Fonts
+    readonly property real fontMultiplier: 1.0
+    readonly property real fontSizeMedium: 3 * unit * fontMultiplier
+    readonly property real fontSizeLarge: 4 * unit * fontMultiplier
+
+    // Specific controls
+    readonly property real toolbarHeight: 8 * unit
+}

qtquick/SailfinStyle/ToolBar.qml

@@ -0,0 +1,45 @@
+import QtQuick 2.12
+import QtGraphicalEffects 1.12
+import QtQuick.Templates 2.12 as T
+
+import "."
+
+T.ToolBar {
+    horizontalPadding: SailfinStyle.mediumPadding
+    topPadding: SailfinStyle.smallPadding
+    bottomPadding: implicitBackgroundHeight / 3 * 2 + SailfinStyle.smallPadding
+
+    implicitHeight: Math.max(background ? background.implicitHeight : 0, contentHeight + topPadding + bottomPadding)
+    implicitWidth: Math.max(background ? background.implicitWidth : 0, contentWidth + leftPadding + rightPadding)
+
+    contentHeight: contentItem.implicitHeight || (contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0)
+    contentWidth: contentItem.implicitWidth || (contentChildren.length === 1 ? contentChildren[0].implicitWidth : 0)
+
+    background: Item {
+        implicitHeight: SailfinStyle.toolbarHeight
+        // FIXME: SVG is being "cut", show a rectangle as background as workaround.
+        Rectangle {
+            anchors {
+                left: parent.left; right: parent.right; top: parent.top; bottom: parent.bottom;
+                bottomMargin: 75
+            }
+            color: "crimson"
+        }
+
+        BorderImage {
+            id: backgroundImage
+            anchors.fill: parent
+            border { left: 0; right: 0; bottom: 75; top: 10; }
+            horizontalTileMode: BorderImage.Stretch
+            verticalTileMode: BorderImage.Stretch
+            source: Qt.resolvedUrl("assets/ToolBarBackground.svg")
+            visible: false
+        }
+
+        ColorOverlay {
+            anchors.fill: backgroundImage
+            source: backgroundImage
+            color: "crimson"
+        }
+    }
+}

qtquick/SailfinStyle/assets/ToolBarBackground.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="500" height="75" version="1.1" viewBox="0 0 500 75" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <radialGradient id="radialGradient2446" cx="250" cy="-203.06" r="250" gradientTransform="matrix(-1.16 1.5346e-8 0 -.14 540 -3.4277)" gradientUnits="userSpaceOnUse">
+   <stop stop-opacity=".74902" offset="0"/>
+   <stop stop-opacity="0" offset="1"/>
+  </radialGradient>
+ </defs>
+ <metadata>
+  <rdf:RDF>
+   <cc:Work rdf:about="">
+    <dc:format>image/svg+xml</dc:format>
+    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
+    <dc:title/>
+   </cc:Work>
+  </rdf:RDF>
+ </metadata>
+ <g>
+  <path d="m500-5h-500v30c125 25 375 25 500 0z" fill="#fff"/>
+  <path d="m500 75h-500l1.5984e-6 -50c125 25 375 25 500 0z" fill="url(#radialGradient2446)"/>
+ </g>
+</svg>

qtquick/SailfinStyle/qmldir

@@ -0,0 +1,4 @@
+module SailfinStyle
+depends QtQuick.Controls 2.12
+
+singleton SailfinStyle 1.0 SailfinStyle.qml