Add Dense Material style variant for desktop

The current Material style is based on the mobile variant of the
design, which is far too large for desktop applications.

From https://material.io/guidelines/components/lists.html#lists-usage:

"When the mouse and keyboard are the primary input methods,
measurements may be condensed to accommodate denser layouts."

This patch adds a dense variant of the style where most controls like
buttons and delegates are smaller in height and use smaller font sizes.

Note that the Material design guidelines seem to distinguish between
mobile, desktop and dense measurements, where "dense" seems to be a
specialization of desktop. We cannot afford to/do not see sense in
maintaining three separate variants, so the dense variant will be the
only desktop version of the Material style.

[ChangeLog][Material] Added Dense variant of the Material style for use
on desktop platforms. Some controls are slightly smaller in height and
use smaller font sizes. The variant can be enabled by setting
QT_QUICK_CONTROLS_MATERIAL_VARIANT to Dense or setting Variant=Dense
in the qtquickcontrols.conf file.

Task-number: QTBUG-51109
Change-Id: I11846b7f6e61f7b5dcf3c146b18c220234a73ef2
Reviewed-by: J-P Nurmi <jpnurmi@qt.io>

29 files changed, 234 insertions, 53 deletions

diff --git a/src/imports/controls/doc/src/includes/qquickmaterialstyle.qdocinc b/src/imports/controls/doc/src/includes/qquickmaterialstyle.qdocinc
index c5d94279..72c97bb6 100644
--- a/src/imports/controls/doc/src/includes/qquickmaterialstyle.qdocinc
+++ b/src/imports/controls/doc/src/includes/qquickmaterialstyle.qdocinc
@@ -8,6 +8,14 @@
         \li Specifies the default \l {material-theme-attached-prop}{Material theme}.
             The value can be one of the available themes, for example \c "Dark".
     \row
+        \li \c Variant
+        \li Specifies the Material variant. The Material Design has two
+            variants: a normal variant designed for touch devices, and a dense
+            variant for desktop. The dense variant uses smaller sizes for
+            controls and their fonts.
+
+            The value can be \c "Normal" or \c "Dense".
+    \row
         \li \c Accent
         \li Specifies the default \l {material-accent-attached-prop}{Material accent color}.
             The value can be any \l {colorbasictypedocs}{color}, but it is recommended to use
@@ -40,6 +48,14 @@
         \li Specifies the default \l {material-theme-attached-prop}{Material theme}.
             The value can be one of the available themes, for example \c "Dark".
     \row
+        \li \c QT_QUICK_CONTROLS_MATERIAL_VARIANT
+        \li Specifies the Material variant. The Material Design has two
+            variants: a normal variant designed for touch devices, and a dense
+            variant for desktop. The dense variant uses smaller sizes for
+            controls and their fonts.
+
+            The value can be \c "Normal" or \c "Dense".
+    \row
         \li \c QT_QUICK_CONTROLS_MATERIAL_ACCENT
         \li Specifies the default \l {material-accent-attached-prop}{Material accent color}.
             The value can be any \l {colorbasictypedocs}{color}, but it is recommended to use
diff --git a/src/imports/controls/material/BusyIndicator.qml b/src/imports/controls/material/BusyIndicator.qml
index 5e53bdb9..41e5d25f 100644
--- a/src/imports/controls/material/BusyIndicator.qml
+++ b/src/imports/controls/material/BusyIndicator.qml
@@ -48,8 +48,8 @@ T.BusyIndicator {
     padding: 6
 
     contentItem: BusyIndicatorImpl {
-        implicitWidth: 48
-        implicitHeight: 48
+        implicitWidth: control.Material.buttonHeight
+        implicitHeight: control.Material.buttonHeight
         color: control.Material.accentColor
 
         running: control.running
diff --git a/src/imports/controls/material/Button.qml b/src/imports/controls/material/Button.qml
index 6401b2ad..7ed2aa2c 100644
--- a/src/imports/controls/material/Button.qml
+++ b/src/imports/controls/material/Button.qml
@@ -82,7 +82,7 @@ T.Button {
     // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
     background: Rectangle {
         implicitWidth: 64
-        implicitHeight: 48
+        implicitHeight: control.Material.buttonHeight
 
         // external vertical padding is 6 (to increase touch area)
         y: 6
diff --git a/src/imports/controls/material/CheckDelegate.qml b/src/imports/controls/material/CheckDelegate.qml
index 1d3ff61d..f6c687d3 100644
--- a/src/imports/controls/material/CheckDelegate.qml
+++ b/src/imports/controls/material/CheckDelegate.qml
@@ -82,7 +82,7 @@ T.CheckDelegate {
     }
 
     background: Rectangle {
-        implicitHeight: 48
+        implicitHeight: control.Material.delegateHeight
 
         color: control.highlighted ? control.Material.listHighlightColor : "transparent"
 
diff --git a/src/imports/controls/material/ComboBox.qml b/src/imports/controls/material/ComboBox.qml
index 3dd3cf30..7ecf5d1a 100644
--- a/src/imports/controls/material/ComboBox.qml
+++ b/src/imports/controls/material/ComboBox.qml
@@ -99,7 +99,7 @@ T.ComboBox {
 
     background: Rectangle {
         implicitWidth: 120
-        implicitHeight: 48
+        implicitHeight: control.Material.buttonHeight
 
         // external vertical padding is 6 (to increase touch area)
         y: 6
diff --git a/src/imports/controls/material/DelayButton.qml b/src/imports/controls/material/DelayButton.qml
index 4043949c..43d09ef5 100644
--- a/src/imports/controls/material/DelayButton.qml
+++ b/src/imports/controls/material/DelayButton.qml
@@ -75,7 +75,7 @@ T.DelayButton {
     // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
     background: Rectangle {
         implicitWidth: 64
-        implicitHeight: 48
+        implicitHeight: control.Material.buttonHeight
 
         // external vertical padding is 6 (to increase touch area)
         y: 6
diff --git a/src/imports/controls/material/DialogButtonBox.qml b/src/imports/controls/material/DialogButtonBox.qml
index 628e85f7..c3bea49f 100644
--- a/src/imports/controls/material/DialogButtonBox.qml
+++ b/src/imports/controls/material/DialogButtonBox.qml
@@ -62,7 +62,7 @@ T.DialogButtonBox {
 
     contentItem: ListView {
         implicitWidth: contentWidth
-        implicitHeight: 48
+        implicitHeight: control.Material.buttonHeight
 
         model: control.contentModel
         spacing: control.spacing
@@ -72,7 +72,7 @@ T.DialogButtonBox {
     }
 
     background: PaddedRectangle {
-        implicitHeight: 52
+        implicitHeight: control.Material.dialogButtonBoxHeight
         radius: 2
         color: control.Material.dialogColor
         // Rounded corners should be only at the top or at the bottom
diff --git a/src/imports/controls/material/Frame.qml b/src/imports/controls/material/Frame.qml
index 51721c2c..46f5c13e 100644
--- a/src/imports/controls/material/Frame.qml
+++ b/src/imports/controls/material/Frame.qml
@@ -49,6 +49,8 @@ T.Frame {
     contentHeight: contentItem.implicitHeight || (contentChildren.length === 1 ? contentChildren[0].implicitHeight : 0)
 
     padding: 12
+    topPadding: Material.frameVerticalPadding
+    bottomPadding: Material.frameVerticalPadding
 
     background: Rectangle {
         radius: 2
diff --git a/src/imports/controls/material/GroupBox.qml b/src/imports/controls/material/GroupBox.qml
index 7ac30ec6..e99deffd 100644
--- a/src/imports/controls/material/GroupBox.qml
+++ b/src/imports/controls/material/GroupBox.qml
@@ -52,7 +52,8 @@ T.GroupBox {
 
     spacing: 6
     padding: 12
-    topPadding: padding + (label && label.implicitWidth > 0 ? label.implicitHeight + spacing : 0)
+    topPadding: Material.frameVerticalPadding + (label && label.implicitWidth > 0 ? label.implicitHeight + spacing : 0)
+    bottomPadding: Material.frameVerticalPadding
 
     label: Text {
         x: control.leftPadding
diff --git a/src/imports/controls/material/ItemDelegate.qml b/src/imports/controls/material/ItemDelegate.qml
index 0efb3b93..0793dddd 100644
--- a/src/imports/controls/material/ItemDelegate.qml
+++ b/src/imports/controls/material/ItemDelegate.qml
@@ -51,7 +51,7 @@ T.ItemDelegate {
                                       indicator ? indicator.implicitHeight : 0) + topPadding + bottomPadding)
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
-    padding: 16
+    padding: control.Material.itemDelegateVerticalPadding
     spacing: 16
 
     icon.width: 24
@@ -71,7 +71,7 @@ T.ItemDelegate {
     }
 
     background: Rectangle {
-        implicitHeight: 48
+        implicitHeight: control.Material.delegateHeight
 
         color: control.highlighted ? control.Material.listHighlightColor : "transparent"
 
diff --git a/src/imports/controls/material/Menu.qml b/src/imports/controls/material/Menu.qml
index 0f40380c..c91d450e 100644
--- a/src/imports/controls/material/Menu.qml
+++ b/src/imports/controls/material/Menu.qml
@@ -84,7 +84,7 @@ T.Menu {
 
     background: Rectangle {
         implicitWidth: 200
-        implicitHeight: 48
+        implicitHeight: control.Material.menuItemHeight
 
         radius: 3
         color: control.Material.dialogColor
diff --git a/src/imports/controls/material/MenuItem.qml b/src/imports/controls/material/MenuItem.qml
index 13d4694c..9ef530b7 100644
--- a/src/imports/controls/material/MenuItem.qml
+++ b/src/imports/controls/material/MenuItem.qml
@@ -52,8 +52,8 @@ T.MenuItem {
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
     padding: 16
-    topPadding: 12
-    bottomPadding: 12
+    topPadding: Material.menuItemVerticalPadding
+    bottomPadding: Material.menuItemVerticalPadding
     spacing: 16
 
     icon.width: 24
@@ -96,7 +96,7 @@ T.MenuItem {
 
     background: Rectangle {
         implicitWidth: 200
-        implicitHeight: 48
+        implicitHeight: control.Material.menuItemHeight
         color: control.highlighted ? control.Material.listHighlightColor : "transparent"
 
         Ripple {
diff --git a/src/imports/controls/material/RadioDelegate.qml b/src/imports/controls/material/RadioDelegate.qml
index d498ee80..f97a86e9 100644
--- a/src/imports/controls/material/RadioDelegate.qml
+++ b/src/imports/controls/material/RadioDelegate.qml
@@ -82,7 +82,7 @@ T.RadioDelegate {
     }
 
     background: Rectangle {
-        implicitHeight: 48
+        implicitHeight: control.Material.delegateHeight
 
         color: control.highlighted ? control.Material.listHighlightColor : "transparent"
 
diff --git a/src/imports/controls/material/RoundButton.qml b/src/imports/controls/material/RoundButton.qml
index 92e6bc84..b900e4d1 100644
--- a/src/imports/controls/material/RoundButton.qml
+++ b/src/imports/controls/material/RoundButton.qml
@@ -79,8 +79,8 @@ T.RoundButton {
 
     // TODO: Add a proper ripple/ink effect for mouse/touch input and focus state
     background: Rectangle {
-        implicitWidth: 48
-        implicitHeight: 48
+        implicitWidth: control.Material.buttonHeight
+        implicitHeight: control.Material.buttonHeight
 
         // external vertical padding is 6 (to increase touch area)
         x: 6
diff --git a/src/imports/controls/material/SpinBox.qml b/src/imports/controls/material/SpinBox.qml
index cf9196ac..5ac617ba 100644
--- a/src/imports/controls/material/SpinBox.qml
+++ b/src/imports/controls/material/SpinBox.qml
@@ -83,8 +83,8 @@ T.SpinBox {
 
     up.indicator: Item {
         x: control.mirrored ? 0 : parent.width - width
-        implicitWidth: 48
-        implicitHeight: 48
+        implicitWidth: control.Material.buttonHeight
+        implicitHeight: control.Material.buttonHeight
         height: parent.height
         width: height
 
@@ -117,8 +117,8 @@ T.SpinBox {
 
     down.indicator: Item {
         x: control.mirrored ? parent.width - width : 0
-        implicitWidth: 48
-        implicitHeight: 48
+        implicitWidth: control.Material.buttonHeight
+        implicitHeight: control.Material.buttonHeight
         height: parent.height
         width: height
 
@@ -144,7 +144,7 @@ T.SpinBox {
 
     background: Item {
         implicitWidth: 192
-        implicitHeight: 48
+        implicitHeight: control.Material.buttonHeight
 
         Rectangle {
             x: parent.width / 2 - width / 2
diff --git a/src/imports/controls/material/SwipeDelegate.qml b/src/imports/controls/material/SwipeDelegate.qml
index 1095ac68..2ffa8797 100644
--- a/src/imports/controls/material/SwipeDelegate.qml
+++ b/src/imports/controls/material/SwipeDelegate.qml
@@ -75,7 +75,7 @@ T.SwipeDelegate {
     }
 
     background: Rectangle {
-        implicitHeight: 48
+        implicitHeight: control.Material.delegateHeight
 
         color: control.Material.backgroundColor
 
diff --git a/src/imports/controls/material/SwitchDelegate.qml b/src/imports/controls/material/SwitchDelegate.qml
index 308e9772..f3969a5f 100644
--- a/src/imports/controls/material/SwitchDelegate.qml
+++ b/src/imports/controls/material/SwitchDelegate.qml
@@ -52,8 +52,8 @@ T.SwitchDelegate {
     baselineOffset: contentItem.y + contentItem.baselineOffset
 
     padding: 16
-    topPadding: 8
-    bottomPadding: 8
+    topPadding: Material.switchDelegateVerticalPadding
+    bottomPadding: Material.switchDelegateVerticalPadding
     spacing: 16
 
     icon.width: 24
@@ -82,7 +82,7 @@ T.SwitchDelegate {
     }
 
     background: Rectangle {
-        implicitHeight: 48
+        implicitHeight: control.Material.delegateHeight
 
         color: control.highlighted ? control.Material.listHighlightColor : "transparent"
 
diff --git a/src/imports/controls/material/TabButton.qml b/src/imports/controls/material/TabButton.qml
index 3134cca9..10da9a5f 100644
--- a/src/imports/controls/material/TabButton.qml
+++ b/src/imports/controls/material/TabButton.qml
@@ -69,7 +69,7 @@ T.TabButton {
     }
 
     background: Ripple {
-        implicitHeight: 48
+        implicitHeight: control.Material.buttonHeight
 
         clip: true
         pressed: control.pressed
diff --git a/src/imports/controls/material/ToolButton.qml b/src/imports/controls/material/ToolButton.qml
index 86a9f5c0..a1c47f2a 100644
--- a/src/imports/controls/material/ToolButton.qml
+++ b/src/imports/controls/material/ToolButton.qml
@@ -70,8 +70,8 @@ T.ToolButton {
     }
 
     background: Ripple {
-        implicitWidth: 48
-        implicitHeight: 48
+        implicitWidth: control.Material.buttonHeight
+        implicitHeight: control.Material.buttonHeight
 
         readonly property bool square: control.contentItem.width <= control.contentItem.height
 
diff --git a/src/imports/controls/material/ToolTip.qml b/src/imports/controls/material/ToolTip.qml
index 0d690f59..1f786a3f 100644
--- a/src/imports/controls/material/ToolTip.qml
+++ b/src/imports/controls/material/ToolTip.qml
@@ -76,7 +76,7 @@ T.ToolTip {
     }
 
     background: Rectangle {
-        implicitHeight: 32
+        implicitHeight: control.Material.tooltipHeight
         color: control.Material.tooltipColor
         opacity: 0.9
         radius: 2
diff --git a/src/imports/controls/material/qquickmaterialstyle.cpp b/src/imports/controls/material/qquickmaterialstyle.cpp
index 313ceca2..9aad1199 100644
--- a/src/imports/controls/material/qquickmaterialstyle.cpp
+++ b/src/imports/controls/material/qquickmaterialstyle.cpp
@@ -387,6 +387,10 @@ static bool globalPrimaryCustom = false;
 static bool globalAccentCustom = false;
 static bool globalForegroundCustom = true;
 static bool globalBackgroundCustom = true;
+// This is global because:
+// 1) The theme needs access to it to determine font sizes.
+// 2) There can only be one variant used for the whole application.
+static QQuickMaterialStyle::Variant globalVariant = QQuickMaterialStyle::Normal;
 
 static const QRgb backgroundColorLight = 0xFFFAFAFA;
 static const QRgb backgroundColorDark = 0xFF303030;
@@ -445,7 +449,7 @@ QQuickMaterialStyle::QQuickMaterialStyle(QObject *parent) : QQuickAttachedObject
     m_background(globalBackground),
     m_elevation(0)
 {
-    init();
+    QQuickAttachedObject::init();
 }
 
 QQuickMaterialStyle *QQuickMaterialStyle::qmlAttachedProperties(QObject *object)
@@ -1135,17 +1139,60 @@ QColor QQuickMaterialStyle::shade(const QColor &color, Shade shade) const
     }
 }
 
-void QQuickMaterialStyle::attachedParentChange(QQuickAttachedObject *newParent, QQuickAttachedObject *oldParent)
+int QQuickMaterialStyle::buttonHeight() const
 {
-    Q_UNUSED(oldParent);
-    QQuickMaterialStyle *material = qobject_cast<QQuickMaterialStyle *>(newParent);
-    if (material) {
-        inheritPrimary(material->m_primary, material->m_customPrimary);
-        inheritAccent(material->m_accent, material->m_customAccent);
-        inheritForeground(material->m_foreground, material->m_customForeground, material->m_hasForeground);
-        inheritBackground(material->m_background, material->m_customBackground, material->m_hasBackground);
-        inheritTheme(material->theme());
-    }
+    // https://material.io/guidelines/components/buttons.html#buttons-style
+    return globalVariant == Dense ? 44 : 48;
+}
+
+int QQuickMaterialStyle::delegateHeight() const
+{
+    // https://material.io/guidelines/components/lists.html#lists-specs
+    return globalVariant == Dense ? 40 : 48;
+}
+
+int QQuickMaterialStyle::dialogButtonBoxHeight() const
+{
+    return globalVariant == Dense ? 48 : 52;
+}
+
+int QQuickMaterialStyle::frameVerticalPadding() const
+{
+    return globalVariant == Dense ? 8 : 12;
+}
+
+int QQuickMaterialStyle::itemDelegateVerticalPadding() const
+{
+    return globalVariant == Dense ? 12 : 16;
+}
+
+int QQuickMaterialStyle::menuItemHeight() const
+{
+    // https://material.io/guidelines/components/menus.html#menus-simple-menus
+    return globalVariant == Dense ? 32 : 48;
+}
+
+int QQuickMaterialStyle::menuItemVerticalPadding() const
+{
+    return globalVariant == Dense ? 8 : 12;
+}
+
+int QQuickMaterialStyle::switchDelegateVerticalPadding() const
+{
+    // SwitchDelegate's indicator is much larger than the others due to the shadow,
+    // so we must reduce its padding to ensure its implicitHeight is 40 when dense.
+    return globalVariant == Dense ? 4 : 8;
+}
+
+int QQuickMaterialStyle::tooltipHeight() const
+{
+    // https://material.io/guidelines/components/tooltips.html
+    return globalVariant == Dense ? 22 : 32;
+}
+
+QQuickMaterialStyle::Variant QQuickMaterialStyle::variant()
+{
+    return globalVariant;
 }
 
 template <typename Enum>
@@ -1177,6 +1224,13 @@ void QQuickMaterialStyle::initGlobals()
     else if (!themeValue.isEmpty())
         qWarning().nospace().noquote() << "Material: unknown theme value: " << themeValue;
 
+    QByteArray variantValue = resolveSetting("QT_QUICK_CONTROLS_MATERIAL_VARIANT", settings, QStringLiteral("Variant"));
+    Variant variantEnum = toEnumValue<Variant>(variantValue, &ok);
+    if (ok)
+        globalVariant = variantEnum;
+    else if (!variantValue.isEmpty())
+        qWarning().nospace().noquote() << "Material: unknown variant value: " << variantValue;
+
     QByteArray primaryValue = resolveSetting("QT_QUICK_CONTROLS_MATERIAL_PRIMARY", settings, QStringLiteral("Primary"));
     Color primaryEnum = toEnumValue<Color>(primaryValue, &ok);
     if (ok) {
@@ -1242,6 +1296,19 @@ void QQuickMaterialStyle::initGlobals()
     }
 }
 
+void QQuickMaterialStyle::attachedParentChange(QQuickAttachedObject *newParent, QQuickAttachedObject *oldParent)
+{
+    Q_UNUSED(oldParent);
+    QQuickMaterialStyle *material = qobject_cast<QQuickMaterialStyle *>(newParent);
+    if (material) {
+        inheritPrimary(material->m_primary, material->m_customPrimary);
+        inheritAccent(material->m_accent, material->m_customAccent);
+        inheritForeground(material->m_foreground, material->m_customForeground, material->m_hasForeground);
+        inheritBackground(material->m_background, material->m_customBackground, material->m_hasBackground);
+        inheritTheme(material->theme());
+    }
+}
+
 bool QQuickMaterialStyle::variantToRgba(const QVariant &var, const char *name, QRgb *rgba, bool *custom) const
 {
     *custom = false;
diff --git a/src/imports/controls/material/qquickmaterialstyle_p.h b/src/imports/controls/material/qquickmaterialstyle_p.h
index 4b63747c..37baa450 100644
--- a/src/imports/controls/material/qquickmaterialstyle_p.h
+++ b/src/imports/controls/material/qquickmaterialstyle_p.h
@@ -98,6 +98,16 @@ class QQuickMaterialStyle : public QQuickAttachedObject
     Q_PROPERTY(QColor toolTextColor READ toolTextColor NOTIFY paletteChanged FINAL)
     Q_PROPERTY(QColor spinBoxDisabledIconColor READ spinBoxDisabledIconColor NOTIFY paletteChanged FINAL)
 
+    Q_PROPERTY(int buttonHeight READ buttonHeight CONSTANT FINAL)
+    Q_PROPERTY(int delegateHeight READ delegateHeight CONSTANT FINAL)
+    Q_PROPERTY(int dialogButtonBoxHeight READ dialogButtonBoxHeight CONSTANT FINAL)
+    Q_PROPERTY(int frameVerticalPadding READ frameVerticalPadding CONSTANT FINAL)
+    Q_PROPERTY(int itemDelegateVerticalPadding READ itemDelegateVerticalPadding CONSTANT FINAL)
+    Q_PROPERTY(int menuItemHeight READ menuItemHeight CONSTANT FINAL)
+    Q_PROPERTY(int menuItemVerticalPadding READ menuItemVerticalPadding CONSTANT FINAL)
+    Q_PROPERTY(int switchDelegateVerticalPadding READ switchDelegateVerticalPadding CONSTANT FINAL)
+    Q_PROPERTY(int tooltipHeight READ tooltipHeight CONSTANT FINAL)
+
 public:
     enum Theme {
         Light,
@@ -105,6 +115,11 @@ public:
         System
     };
 
+    enum Variant {
+        Normal,
+        Dense
+    };
+
     enum Color {
         Red,
         Pink,
@@ -145,6 +160,7 @@ public:
     };
 
     Q_ENUM(Theme)
+    Q_ENUM(Variant)
     Q_ENUM(Color)
     Q_ENUM(Shade)
 
@@ -225,8 +241,20 @@ public:
     Q_INVOKABLE QColor color(Color color, Shade shade = Shade500) const;
     Q_INVOKABLE QColor shade(const QColor &color, Shade shade) const;
 
+    int buttonHeight() const;
+    int delegateHeight() const;
+    int dialogButtonBoxHeight() const;
+    int frameVerticalPadding() const;
+    int itemDelegateVerticalPadding() const;
+    int menuItemHeight() const;
+    int menuItemVerticalPadding() const;
+    int switchDelegateVerticalPadding() const;
+    int tooltipHeight() const;
+
     static void initGlobals();
 
+    static Variant variant();
+
 Q_SIGNALS:
     void themeChanged();
     void primaryChanged();
diff --git a/src/imports/controls/material/qquickmaterialtheme.cpp b/src/imports/controls/material/qquickmaterialtheme.cpp
index 0c30ae8f..471f5143 100644
--- a/src/imports/controls/material/qquickmaterialtheme.cpp
+++ b/src/imports/controls/material/qquickmaterialtheme.cpp
@@ -35,6 +35,7 @@
 ****************************************************************************/
 
 #include "qquickmaterialtheme_p.h"
+#include "qquickmaterialstyle_p.h"
 
 #include <QtGui/qpa/qplatformdialoghelper.h>
 #include <QtGui/qfont.h>
@@ -67,29 +68,33 @@ void QQuickMaterialTheme::resolveFonts(const QFont &defaultFont)
         editorFont.setFamily(family);
     }
 
-    systemFont.setPixelSize(14);
+    const bool dense = QQuickMaterialStyle::variant() == QQuickMaterialStyle::Dense;
+    systemFont.setPixelSize(dense ? 13 : 14);
     systemFont = defaultFont.resolve(systemFont);
 
-    buttonFont.setPixelSize(14);
+    // https://material.io/guidelines/components/buttons.html#buttons-style
+    buttonFont.setPixelSize(dense ? 13 : 14);
     buttonFont.setCapitalization(QFont::AllUppercase);
     buttonFont.setWeight(QFont::Medium);
     buttonFont = defaultFont.resolve(buttonFont);
 
-    toolTipFont.setPixelSize(14);
+    // https://material.io/guidelines/components/tooltips.html
+    toolTipFont.setPixelSize(dense ? 10 : 14);
     toolTipFont.setWeight(QFont::Medium);
     toolTipFont = defaultFont.resolve(toolTipFont);
 
-    itemViewFont.setPixelSize(14);
+    itemViewFont.setPixelSize(dense ? 13 : 14);
     itemViewFont.setWeight(QFont::Medium);
     itemViewFont = defaultFont.resolve(itemViewFont);
 
-    listViewFont.setPixelSize(16);
+    // https://material.io/guidelines/components/lists.html#lists-specs
+    listViewFont.setPixelSize(dense ? 13 : 16);
     listViewFont = defaultFont.resolve(listViewFont);
 
-    menuItemFont.setPixelSize(16);
+    menuItemFont.setPixelSize(dense ? 13 : 16);
     menuItemFont = defaultFont.resolve(menuItemFont);
 
-    editorFont.setPixelSize(16);
+    editorFont.setPixelSize(dense ? 13 : 16);
     editorFont = defaultFont.resolve(editorFont);
 }
 
diff --git a/src/quickcontrols2/qquickstyle.cpp b/src/quickcontrols2/qquickstyle.cpp
index 800341d7..daa48144 100644
--- a/src/quickcontrols2/qquickstyle.cpp
+++ b/src/quickcontrols2/qquickstyle.cpp
@@ -233,6 +233,7 @@ struct QQuickStyleSpec
         style.clear();
         fallbackStyle.clear();
         fallbackMethod.clear();
+        configFilePath.clear();
     }
 
     QString resolveConfigFilePath()
diff --git a/tests/auto/qquickmaterialstyleconf/data/applicationwindow.qml b/tests/auto/qquickmaterialstyleconf/data/applicationwindow.qml
index 65196393..9a31966f 100644
--- a/tests/auto/qquickmaterialstyleconf/data/applicationwindow.qml
+++ b/tests/auto/qquickmaterialstyleconf/data/applicationwindow.qml
@@ -57,8 +57,13 @@ ApplicationWindow {
     height: 400
 
     property alias label: label
+    property alias button: button
 
     Label {
         id: label
     }
+
+    Button {
+        id: button
+    }
 }
diff --git a/tests/auto/qquickmaterialstyleconf/qquickmaterialstyleconf.qrc b/tests/auto/qquickmaterialstyleconf/qquickmaterialstyleconf.qrc
index 53ba6450..49219139 100644
--- a/tests/auto/qquickmaterialstyleconf/qquickmaterialstyleconf.qrc
+++ b/tests/auto/qquickmaterialstyleconf/qquickmaterialstyleconf.qrc
@@ -1,5 +1,7 @@
-<!DOCTYPE RCC><RCC version="1.0">
-<qresource>
-    <file>qtquickcontrols2.conf</file>
-</qresource>
+<RCC>
+    <qresource prefix="/">
+        <file>qtquickcontrols2.conf</file>
+        <file>variant-dense.conf</file>
+        <file>variant-normal.conf</file>
+    </qresource>
 </RCC>
diff --git a/tests/auto/qquickmaterialstyleconf/tst_qquickmaterialstyleconf.cpp b/tests/auto/qquickmaterialstyleconf/tst_qquickmaterialstyleconf.cpp
index 17d1ea6d..72136445 100644
--- a/tests/auto/qquickmaterialstyleconf/tst_qquickmaterialstyleconf.cpp
+++ b/tests/auto/qquickmaterialstyleconf/tst_qquickmaterialstyleconf.cpp
@@ -36,6 +36,7 @@
 
 #include <qtest.h>
 #include <QtQuick/private/qquickitem_p.h>
+#include <QtQuickControls2/private/qquickstyle_p.h>
 #include "../shared/util.h"
 #include "../shared/visualtestutil.h"
 
@@ -49,6 +50,8 @@ public:
 
 private slots:
     void conf();
+    void variants_data();
+    void variants();
 };
 
 void tst_qquickmaterialstyleconf::conf()
@@ -73,6 +76,45 @@ void tst_qquickmaterialstyleconf::conf()
     QCOMPARE(label->property("font").value<QFont>(), customFont);
 }
 
+void tst_qquickmaterialstyleconf::variants_data()
+{
+    QTest::addColumn<QByteArray>("confPath");
+    QTest::addColumn<int>("expectedButtonHeight");
+    // Just to ensure that the correct conf is loaded.
+    QTest::addColumn<QColor>("expectedColor");
+
+    // (36 button height + 12 touchable area)
+    QTest::newRow("normal") << QByteArray(":/variant-normal.conf") << 48 << QColor::fromRgb(0x123456);
+    // We specified a custom variant (dense), so the button should be small.
+    // (32 button height + 12 touchable area)
+    QTest::newRow("dense") << QByteArray(":/variant-dense.conf") << 44 << QColor::fromRgb(0x789abc);
+}
+
+void tst_qquickmaterialstyleconf::variants()
+{
+    QFETCH(QByteArray, confPath);
+    QFETCH(int, expectedButtonHeight);
+    QFETCH(QColor, expectedColor);
+
+    qmlClearTypeRegistrations();
+    QQuickStylePrivate::reset();
+    qputenv("QT_QUICK_CONTROLS_CONF", confPath);
+
+    QQuickApplicationHelper helper(this, QLatin1String("applicationwindow.qml"));
+
+    QQuickApplicationWindow *window = helper.appWindow;
+    window->show();
+    QVERIFY(QTest::qWaitForWindowExposed(window));
+
+    QQuickItem *label = window->property("label").value<QQuickItem*>();
+    QVERIFY(label);
+    QCOMPARE(label->property("color").value<QColor>(), expectedColor);
+
+    QQuickItem *button = window->property("button").value<QQuickItem*>();
+    QVERIFY(button);
+    QCOMPARE(button->height(), expectedButtonHeight);
+}
+
 QTEST_MAIN(tst_qquickmaterialstyleconf)
 
 #include "tst_qquickmaterialstyleconf.moc"
diff --git a/tests/auto/qquickmaterialstyleconf/variant-dense.conf b/tests/auto/qquickmaterialstyleconf/variant-dense.conf
new file mode 100644
index 00000000..6636894e
--- /dev/null
+++ b/tests/auto/qquickmaterialstyleconf/variant-dense.conf
@@ -0,0 +1,6 @@
+[Controls]
+Style=Material
+
+[Material]
+Variant=Dense
+Foreground=#789abc
diff --git a/tests/auto/qquickmaterialstyleconf/variant-normal.conf b/tests/auto/qquickmaterialstyleconf/variant-normal.conf
new file mode 100644
index 00000000..08778e92
--- /dev/null
+++ b/tests/auto/qquickmaterialstyleconf/variant-normal.conf
@@ -0,0 +1,6 @@
+[Controls]
+Style=Material
+
+[Material]
+Variant=Normal
+Foreground=#123456