QmlDesigner: Implement new control design

* Update creator theme files and related enum
* Remove unused ActionIndicator functionality
* Update all controls (Colors, Positions, Sizes)
* Add global hover state and cleanup all other states
* Add global hover functionality to ButtonRow
* Add missing states
* Add new MenuItemWithIcon
* Add checkers.png for StateDelegate preview background
* Update copyright headers
* Replace AnchorButtons spacing
* Make ADS title bar buttons and tab bar buttons themeable
* Fix replace CSS colors to allow specifing alpha
* Fix replace CSS overwritting consecutive variables
* Make navigator icons and other elements themeable
* Make connection view themeable
* Make item library themeable
* Fix item library import path
* Update all HelperWidgets
* Fix GradientDialogPopup

Task-number: QDS-3768
Change-Id: I28a5fed178c95d098db052b8c2eabaa083d37b81
Reviewed-by: Alessandro Portale <alessandro.portale@qt.io>

src/plugins/qmldesigner/components/componentcore/theme.cpp

@@ -76,7 +76,7 @@ QColor Theme::evaluateColorAtThemeInstance(const QString &themeColorName)
     const QMetaEnum e = m.enumerator(m.indexOfEnumerator("Color"));
     for (int i = 0, total = e.keyCount(); i < total; ++i) {
         if (QString::fromLatin1(e.key(i)) == themeColorName)
-            return color(static_cast<Utils::Theme::Color>(i)).name();
+            return color(static_cast<Utils::Theme::Color>(i));
     }
 
     qWarning() << Q_FUNC_INFO << "error while evaluating" << themeColorName;
@@ -101,14 +101,21 @@ QString Theme::replaceCssColors(const QString &input)
     while (it.hasNext()) {
         const QRegularExpressionMatch match = it.next();
         const QString themeColorName = match.captured(1);
+        const QRegularExpression replaceExp("creatorTheme\\." + themeColorName + "(\\s|;|\\n)");
 
         if (themeColorName == "smallFontPixelSize") {
-            output.replace("creatorTheme." + themeColorName, QString::number(instance()->smallFontPixelSize()) + "px");
+            output.replace(replaceExp,
+                           QString::number(instance()->smallFontPixelSize()) + "px" + "\\1");
         } else if (themeColorName == "captionFontPixelSize") {
-            output.replace("creatorTheme." + themeColorName, QString::number(instance()->captionFontPixelSize()) + "px");
+            output.replace(replaceExp,
+                           QString::number(instance()->captionFontPixelSize()) + "px" + "\\1");
         } else {
             const QColor color = instance()->evaluateColorAtThemeInstance(themeColorName);
-            output.replace("creatorTheme." + themeColorName, color.name());
+            // Create rgba(r, g, b, a)
+            const QString rgbaStr = QString("rgba(%1, %2, %3, %4)")
+                                    .arg(color.red()).arg(color.green()).arg(color.blue())
+                                    .arg(color.alpha());
+            output.replace(replaceExp, rgbaStr + "\\1");
         }
         pos += match.capturedLength();
     }

src/plugins/qmldesigner/components/connectioneditor/connectionviewwidget.ui

@@ -18,7 +18,7 @@
     <number>0</number>
    </property>
    <property name="topMargin">
-    <number>0</number>
+    <number>1</number>
    </property>
    <property name="rightMargin">
     <number>0</number>
@@ -43,13 +43,13 @@
      <property name="minimumSize">
       <size>
        <width>0</width>
-       <height>4</height>
+       <height>2</height>
       </size>
      </property>
      <property name="maximumSize">
       <size>
        <width>16777215</width>
-       <height>4</height>
+       <height>2</height>
       </size>
      </property>
     </widget>
@@ -244,7 +244,7 @@
     </widget>
    </item>
    <item row="2" column="0">
-    <widget class="QToolBar" name="toolBar" native="true"/>
+    <widget class="QToolBar" name="toolBar"/>
    </item>
   </layout>
   <zorder>stackedWidget</zorder>

src/plugins/qmldesigner/components/connectioneditor/stylesheet.css

@@ -1,71 +1,64 @@
-QFrame
-{
-    background-color: creatorTheme.QmlDesigner_BackgroundColorDarkAlternate;
-    color: creatorTheme.PanelTextColorLight;
+QFrame {
+    background-color: creatorTheme.DSpanelBackground;
+    color: creatorTheme.DStextColor;
     font-size: creatorTheme.captionFontPixelSize;
     border-radius: 0px;
 }
 
 QTableView {
-    color: creatorTheme.PanelTextColorLight;
-    selection-color: creatorTheme.PanelTextColorLight;
-    selection-background-color: creatorTheme.QmlDesigner_HighlightColor;
-
+    color: creatorTheme.DStextColor;
+    selection-color: creatorTheme.DStextSelectedTextColor;
+    selection-background-color: creatorTheme.DStextSelectionColor;
 }
 
 QTabBar QToolButton {
-    background-color: creatorTheme.QmlDesigner_BackgroundColorDarkAlternate;
+    background-color: creatorTheme.DSpanelBackground;
     border: 1px solid creatorTheme.QmlDesigner_BackgroundColorDarker;
     border-radius: 0px;
 }
 
-QTableView::item
-{
+QTableView::item {
     border: 0px;
     padding-left: 4px;
 }
 
-QTableView::item:focus
-{
+QTableView::item:focus {
     border: none;
     background-color: transparent;
 }
 
-QTableView::item:selected
-{
+QTableView::item:selected {
     border: none
 }
 
 QHeaderView::section {
-    background-color: #494949;
+    background-color: creatorTheme.DSheaderViewBackground;
     border: 0px;
     color: creatorTheme.DStextColor;
     margin-right: 1px
 }
 
 QTableView {
-    alternate-background-color: #414141;
+    alternate-background-color: creatorTheme.DStableViewAlternateBackground;
 }
 
 QWidget#widgetSpacer {
-    background-color: creatorTheme.QmlDesigner_TabLight;
+    background-color: creatorTheme.DStabActiveBackground;
 }
 
 QStackedWidget {
     border: 0px;
-    background-color: creatorTheme.QmlDesigner_TabLight;
+    background-color: creatorTheme.DStabActiveBackground;
 }
 
 QTabBar::tab:selected {
     border: none;
     border-image: none;
     image: none;
-
-    background-color: creatorTheme.QmlDesigner_TabLight;
-    color: creatorTheme.QmlDesigner_TabDark;
+    background-color: creatorTheme.DStabActiveBackground;
+    color: creatorTheme.DStabActiveText;
 }
 
-
 QTabBar::tab {
     width: 92px;
     height: 22px;
@@ -75,48 +68,62 @@ QTabBar::tab {
     margin-right: 0px;
     font: bold;
     font-size: creatorTheme.captionFontPixelSize;
-    background-color: creatorTheme.QmlDesigner_TabDark;
-    color: creatorTheme.QmlDesigner_TabLight;
+    background-color: creatorTheme.DStabInactiveBackground;
+    color: creatorTheme.DStabInactiveText;
 }
 
-QSpinBox
-{
+/*
+QSpinBox {
     font-size: creatorTheme.captionFontPixelSize;
-    color: white;
+    color: creatorTheme.DStextColor;
     padding-right: 2px;
     padding-top: 2px;
     padding-bottom: 2px;
     padding-left: 12px;
-    border: 2px solid #0F0F0F;
-    border-width: 1;
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
-    stop: 0 #2c2c2c, stop: 1 #333333);
-
-     min-height: 22px;
-}
-
- QDoubleSpinBox
- {
-    font-size: creatorTheme.captionFontPixelSize;
-    color: white;
-    padding-right: 2px;
-    padding-top: 2px;
-    padding-bottom: 2px;
-    padding-left: 12px;
-    border: 2px solid #0F0F0F;
-    border-width: 1;
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
-    stop: 0 #2c2c2c, stop: 1 #333333);
+    border: 1px solid creatorTheme.DScontrolOutline;
+    background-color: creatorTheme.DScontrolBackground;
     min-height: 22px;
- }
-
-QLineEdit
-{
-    color: white;
-    font-size: creatorTheme.captionFontPixelSize;
-    border: 2px solid #0F0F0F;
-    border-width: 1;
-    min-height: 26px;
-    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
-    stop: 0 #2c2c2c, stop: 1 #333333);
+}
+
+QDoubleSpinBox {
+    font-size: creatorTheme.captionFontPixelSize;
+    color: creatorTheme.DStextColor;
+    padding-right: 2px;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-left: 12px;
+    border: 1px solid creatorTheme.DScontrolOutline;
+    background-color: creatorTheme.DScontrolBackground;
+    min-height: 22px;
+}
+*/
+
+QLineEdit {
+    color: creatorTheme.DStextColor;
+    selection-color: creatorTheme.DStextSelectedTextColor;
+    selection-background-color: creatorTheme.DStextSelectionColor;
+    font-size: creatorTheme.captionFontPixelSize;
+    border: 1px solid creatorTheme.DScontrolOutline;
+    min-height: 26px;
+    background-color: creatorTheme.DScontrolBackground;
+}
+
+QComboBox {
+    color: creatorTheme.DStextColor;
+    selection-color: creatorTheme.DStextSelectedTextColor;
+    selection-background-color: creatorTheme.DStextSelectionColor;
+    font-size: creatorTheme.captionFontPixelSize;
+    border: 1px solid creatorTheme.DScontrolOutline;
+    min-height: 26px;
+    background-color: creatorTheme.DScontrolBackground;
+}
+
+QComboBox QAbstractItemView {
+    show-decoration-selected: 1; /* make the selection span the entire width of the view */
+    background-color: creatorTheme.DSpopupBackground; /* sets background of the menu */
+    border: 1px solid creatorTheme.DScontrolOutline;
+    margin: 0px; /* some spacing around the menu */
+    color: creatorTheme.DStextColor;
+    selection-color: creatorTheme.DStextSelectedTextColor;
+    selection-background-color: creatorTheme.DSinteraction;
 }

src/plugins/qmldesigner/components/itemlibrary/itemlibrarywidget.cpp

@@ -144,13 +144,14 @@ ItemLibraryWidget::ItemLibraryWidget(AsynchronousImageCache &imageCache,
     m_headerWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
     Theme::setupTheme(m_headerWidget->engine());
     m_headerWidget->engine()->addImportPath(propertyEditorResourcesPath() + "/imports");
-    m_headerWidget->setClearColor(Theme::getColor(Theme::Color::QmlDesigner_BackgroundColorDarkAlternate));
+    m_headerWidget->setClearColor(Theme::getColor(Theme::Color::DSpanelBackground));
     m_headerWidget->rootContext()->setContextProperty("rootView", QVariant::fromValue(this));
 
     // create add imports widget
     m_addImportWidget->setResizeMode(QQuickWidget::SizeRootObjectToView);
-    m_addImportWidget->setClearColor(Theme::getColor(Theme::Color::QmlDesigner_BackgroundColorDarkAlternate));
     Theme::setupTheme(m_addImportWidget->engine());
+    m_addImportWidget->engine()->addImportPath(propertyEditorResourcesPath() + "/imports");
+    m_addImportWidget->setClearColor(Theme::getColor(Theme::Color::DSpanelBackground));
     m_addImportWidget->rootContext()->setContextProperties({
         {"addImportModel", QVariant::fromValue(m_itemLibraryAddImportModel.data())},
         {"rootView", QVariant::fromValue(this)},
@@ -172,7 +173,7 @@ ItemLibraryWidget::ItemLibraryWidget(AsynchronousImageCache &imageCache,
     m_itemViewQuickWidget->rootContext()->setContextProperty("tooltipBackend",
                                                              m_previewTooltipBackend.get());
 
-    m_itemViewQuickWidget->setClearColor(Theme::getColor(Theme::Color::QmlDesigner_ButtonColor));
+    m_itemViewQuickWidget->setClearColor(Theme::getColor(Theme::Color::DSpanelBackground));
     m_itemViewQuickWidget->engine()->addImageProvider(QStringLiteral("qmldesigner_itemlibrary"),
                                                       new Internal::ItemLibraryImageProvider);
     Theme::setupTheme(m_itemViewQuickWidget->engine());

src/plugins/qmldesigner/components/navigator/iconcheckboxitemdelegate.cpp

@@ -45,12 +45,9 @@
 
 namespace QmlDesigner {
 
-IconCheckboxItemDelegate::IconCheckboxItemDelegate(QObject *parent,
-                                                   const QIcon &checkedIcon,
-                                                   const QIcon &uncheckedIcon)
+IconCheckboxItemDelegate::IconCheckboxItemDelegate(QObject *parent, const QIcon &icon)
     : QStyledItemDelegate(parent),
-      m_checkedIcon(checkedIcon),
-      m_uncheckedIcon(uncheckedIcon)
+      m_icon(icon)
 {}
 
 QSize IconCheckboxItemDelegate::sizeHint(const QStyleOptionViewItem & /*option*/,
@@ -83,12 +80,18 @@ void IconCheckboxItemDelegate::paint(QPainter *painter,
                                      const QStyleOptionViewItem &styleOption,
                                      const QModelIndex &modelIndex) const
 {
-    if (styleOption.state & QStyle::State_MouseOver && !isThisOrAncestorLocked(modelIndex))
-        painter->fillRect(styleOption.rect.adjusted(0, delegateMargin, 0, -delegateMargin),
-                          Theme::getColor(Theme::Color::DSsliderHandle));
+    QIcon::Mode mode = QIcon::Mode::Normal;
 
-    if (styleOption.state & QStyle::State_Selected)
+    if (styleOption.state & QStyle::State_MouseOver && !isThisOrAncestorLocked(modelIndex)) {
+        painter->fillRect(styleOption.rect.adjusted(0, delegateMargin, 0, -delegateMargin),
+                          Theme::getColor(Theme::Color::DSnavigatorItemBackgroundHover));
+        mode = QIcon::Mode::Active; // hover
+    }
+
+    if (styleOption.state & QStyle::State_Selected) {
         NavigatorTreeView::drawSelectionBackground(painter, styleOption);
+        mode = QIcon::Mode::Selected;
+    }
 
     bool isVisibilityIcon = modelIndex.column() != NavigatorTreeModel::ColumnType::Visibility;
     // We need to invert the check status if visibility icon
@@ -106,8 +109,8 @@ void IconCheckboxItemDelegate::paint(QPainter *painter,
     const QPoint iconPosition(styleOption.rect.left() + (styleOption.rect.width() - iconSize.width()) / 2,
                               styleOption.rect.top() + 2 + delegateMargin);
 
-    const QIcon &icon = isChecked(modelIndex) ? m_checkedIcon : m_uncheckedIcon;
-    const QPixmap iconPixmap = icon.pixmap(window, iconSize);
+    const QIcon::State state = isChecked(modelIndex) ? QIcon::State::On : QIcon::State::Off;
+    const QPixmap iconPixmap = m_icon.pixmap(window, iconSize, mode, state);
 
     painter->save();
 

src/plugins/qmldesigner/components/navigator/iconcheckboxitemdelegate.h

@@ -34,9 +34,7 @@ class NavigatorTreeModel;
 class IconCheckboxItemDelegate : public QStyledItemDelegate
 {
 public:
-    explicit IconCheckboxItemDelegate(QObject *parent,
-                                      const QIcon &checkedIcon,
-                                      const QIcon &uncheckedIcon);
+    explicit IconCheckboxItemDelegate(QObject *parent, const QIcon &icon);
 
     QSize sizeHint(const QStyleOptionViewItem &option,
                    const QModelIndex &index) const override;
@@ -52,7 +50,6 @@ protected:
                      const QModelIndex &index) override;
 
 private:
-    const QIcon m_checkedIcon;
-    const QIcon m_uncheckedIcon;
+    const QIcon m_icon;
 };
 } // namespace QmlDesigner

src/plugins/qmldesigner/components/navigator/nameitemdelegate.cpp

@@ -217,12 +217,18 @@ void NameItemDelegate::paint(QPainter *painter,
 {
     painter->save();
 
-    if (styleOption.state & QStyle::State_MouseOver && !isThisOrAncestorLocked(modelIndex))
-        painter->fillRect(styleOption.rect.adjusted(0, delegateMargin, 0, -delegateMargin),
-                          Theme::getColor(Theme::Color::DSsliderHandle));
+    painter->setPen(Theme::getColor(Theme::Color::DSnavigatorText));
 
-    if (styleOption.state & QStyle::State_Selected)
+    if (styleOption.state & QStyle::State_MouseOver && !isThisOrAncestorLocked(modelIndex)) {
+        painter->fillRect(styleOption.rect.adjusted(0, delegateMargin, 0, -delegateMargin),
+                          Theme::getColor(Theme::Color::DSnavigatorItemBackgroundHover));
+        painter->setPen(Theme::getColor(Theme::Color::DSnavigatorTextHover));
+    }
+
+    if (styleOption.state & QStyle::State_Selected) {
         NavigatorTreeView::drawSelectionBackground(painter, styleOption);
+        painter->setPen(Theme::getColor(Theme::Color::DSnavigatorTextSelected));
+    }
 
     iconOffset = drawIcon(painter, styleOption, modelIndex);
 

src/plugins/qmldesigner/components/navigator/navigatortreeview.cpp

@@ -74,7 +74,7 @@ public:
                 mouseOverStateSavedFrameRectangle = option->rect;
 
             painter->fillRect(option->rect.adjusted(0, delegateMargin, 0, -delegateMargin),
-                              Theme::getColor(Theme::Color::QmlDesigner_BorderColor));
+                              Theme::getColor(Theme::Color::DSnavigatorItemBackground));
         } else if (element == PE_IndicatorItemViewItemDrop) {
             // between elements and on elements we have a width
             if (option->rect.width() > 0) {
@@ -101,7 +101,8 @@ public:
             int bef_v = mid_v;
             int aft_h = mid_h;
             int aft_v = mid_v;
-            QBrush brush(Theme::getColor(Theme::Color::DSsliderHandle), Qt::SolidPattern);
+
+            QBrush brush(Theme::getColor(Theme::Color::DSnavigatorBranch), Qt::SolidPattern);
             if (option->state & State_Item) {
                 if (option->direction == Qt::RightToLeft)
                     painter->fillRect(option->rect.left(), mid_v, bef_h - option->rect.left(), 1, brush);
@@ -116,11 +117,11 @@ public:
                 int delta = decoration_size / 2;
                 bef_h -= delta;
                 bef_v -= delta;
-                aft_h += delta;
-                aft_v += delta;
+                //aft_h += delta;
+                //aft_v += delta;
 
                 const QRectF rect(bef_h, bef_v, decoration_size + 1, decoration_size + 1);
-                painter->fillRect(rect, QBrush(Theme::getColor(Theme::Color::QmlDesigner_BackgroundColorDarkAlternate)));
+                painter->fillRect(rect, QBrush(Theme::getColor(Theme::Color::DSpanelBackground)));
 
                 static const QPointF collapsePoints[3] = {
                     QPointF(0.0, 0.0),
@@ -134,7 +135,7 @@ public:
                     QPointF(4.0, 4.0)
                 };
 
-                auto color = Theme::getColor(Theme::Color::IconsBaseColor);
+                auto color = Theme::getColor(Theme::Color::DSnavigatorBranchIndicator);
                 painter->setPen(color);
                 painter->setBrush(color);
 
@@ -167,23 +168,15 @@ public:
 private: // functions
     QColor highlightBrushColor() const
     {
-        QColor highlightBrushColor = m_currentTextColor;
-        highlightBrushColor.setAlphaF(0.7);
-        return highlightBrushColor;
+        QColor color = Theme::getColor(Theme::Color::DSnavigatorDropIndicatorBackground);
+        color.setAlphaF(0.7);
+        return color;
     }
     QColor highlightLineColor() const
     {
-        return highlightBrushColor().lighter();
-    }
-    QColor backgroundBrushColor() const
-    {
-        QColor backgroundBrushColor = highlightBrushColor();
-        backgroundBrushColor.setAlphaF(0.2);
-        return backgroundBrushColor;
-    }
-    QColor backgroundLineColor() const
-    {
-        return backgroundBrushColor().lighter();
+        QColor color = Theme::getColor(Theme::Color::DSnavigatorDropIndicatorOutline);
+        color.setAlphaF(0.7);
+        return color;
     }
 
     void drawHighlightFrame(const QRect &frameRectangle, QPainter *painter) const
@@ -192,12 +185,7 @@ private: // functions
         painter->setBrush(highlightBrushColor());
         painter->drawRect(frameRectangle);
     }
-    void drawBackgroundFrame(const QRect &frameRectangle, QPainter *painter) const
-    {
-        painter->setPen(QPen(backgroundLineColor(), 2));
-        painter->setBrush(backgroundBrushColor());
-        painter->drawRect(frameRectangle);
-    }
+
     void drawIndicatorLine(const QPoint &leftPoint, const QPoint &rightPoint, QPainter *painter) const
     {
         painter->setPen(QPen(highlightLineColor(), 3));
@@ -231,7 +219,7 @@ void NavigatorTreeView::drawSelectionBackground(QPainter *painter, const QStyleO
 {
     painter->save();
     painter->fillRect(option.rect.adjusted(0, delegateMargin, 0, -delegateMargin),
-                      Theme::getColor(Theme::Color::QmlDesigner_HighlightColor));
+                      Theme::getColor(Theme::Color::DSnavigatorItemBackgroundSelected));
     painter->restore();
 }
 

src/plugins/qmldesigner/components/navigator/navigatorview.cpp

@@ -615,44 +615,85 @@ void NavigatorView::setupWidget()
 
 #ifndef QMLDESIGNER_TEST
     const QString fontName = "qtds_propertyIconFont.ttf";
+    const QSize size = QSize(28, 28);
 
-    const QIcon visibilityOnIcon =
-            Utils::StyleHelper::getIconFromIconFont(fontName,
-                                                    Theme::getIconUnicode(Theme::Icon::visibilityOn),
-                                                    20, 20, QColor(Qt::white));
-    const QIcon visibilityOffIcon =
-            Utils::StyleHelper::getIconFromIconFont(fontName,
-                                                    Theme::getIconUnicode(Theme::Icon::visibilityOff),
-                                                    20, 20, QColor(Qt::white));
+    const QString visibilityOnUnicode = Theme::getIconUnicode(Theme::Icon::visibilityOn);
+    const QString visibilityOffUnicode = Theme::getIconUnicode(Theme::Icon::visibilityOff);
 
-    const QIcon aliasOnIcon =
-            Utils::StyleHelper::getIconFromIconFont(fontName,
-                                                    Theme::getIconUnicode(Theme::Icon::idAliasOn),
-                                                    20, 20, QColor(Qt::red));
-    const QIcon aliasOffIcon =
-            Utils::StyleHelper::getIconFromIconFont(fontName,
-                                                    Theme::getIconUnicode(Theme::Icon::idAliasOff),
-                                                    20, 20, QColor(Qt::white));
+    const QString aliasOnUnicode = Theme::getIconUnicode(Theme::Icon::idAliasOn);
+    const QString aliasOffUnicode = Theme::getIconUnicode(Theme::Icon::idAliasOff);
 
-    const QIcon lockOnIcon =
-            Utils::StyleHelper::getIconFromIconFont(fontName,
-                                                    Theme::getIconUnicode(Theme::Icon::lockOn),
-                                                    20, 20, QColor(Qt::white));
-    const QIcon lockOffIcon =
-            Utils::StyleHelper::getIconFromIconFont(fontName,
-                                                    Theme::getIconUnicode(Theme::Icon::lockOff),
-                                                    20, 20, QColor(Qt::white));
+    const QString lockOnUnicode = Theme::getIconUnicode(Theme::Icon::lockOn);
+    const QString lockOffUnicode = Theme::getIconUnicode(Theme::Icon::lockOff);
+
+    auto visibilityIconOffNormal = Utils::StyleHelper::IconFontHelper(
+        visibilityOffUnicode, Theme::getColor(Theme::DSnavigatorIcon), size, QIcon::Normal, QIcon::Off);
+    auto visibilityIconOffHover = Utils::StyleHelper::IconFontHelper(
+        visibilityOffUnicode, Theme::getColor(Theme::DSnavigatorIconHover), size, QIcon::Active, QIcon::Off);
+    auto visibilityIconOffSelected = Utils::StyleHelper::IconFontHelper(
+        visibilityOffUnicode, Theme::getColor(Theme::DSnavigatorIconSelected), size, QIcon::Selected, QIcon::Off);
+    auto visibilityIconOnNormal = Utils::StyleHelper::IconFontHelper(
+        visibilityOnUnicode, Theme::getColor(Theme::DSnavigatorIcon), size, QIcon::Normal, QIcon::On);
+    auto visibilityIconOnHover = Utils::StyleHelper::IconFontHelper(
+        visibilityOnUnicode, Theme::getColor(Theme::DSnavigatorIconHover), size, QIcon::Active, QIcon::On);
+    auto visibilityIconOnSelected = Utils::StyleHelper::IconFontHelper(
+        visibilityOnUnicode, Theme::getColor(Theme::DSnavigatorIconSelected), size, QIcon::Selected, QIcon::On);
+
+    const QIcon visibilityIcon = Utils::StyleHelper::getIconFromIconFont(
+                fontName, {visibilityIconOffNormal,
+                           visibilityIconOffHover,
+                           visibilityIconOffSelected,
+                           visibilityIconOnNormal,
+                           visibilityIconOnHover,
+                           visibilityIconOnSelected});
+
+    auto aliasIconOffNormal = Utils::StyleHelper::IconFontHelper(
+        aliasOffUnicode, Theme::getColor(Theme::DSnavigatorIcon), size, QIcon::Normal, QIcon::Off);
+    auto aliasIconOffHover = Utils::StyleHelper::IconFontHelper(
+        aliasOffUnicode, Theme::getColor(Theme::DSnavigatorIconHover), size, QIcon::Active, QIcon::Off);
+    auto aliasIconOffSelected = Utils::StyleHelper::IconFontHelper(
+        aliasOffUnicode, Theme::getColor(Theme::DSnavigatorIconSelected), size, QIcon::Selected, QIcon::Off);
+    auto aliasIconOnNormal = Utils::StyleHelper::IconFontHelper(
+        aliasOnUnicode, Theme::getColor(Theme::DSnavigatorAliasIconChecked), size, QIcon::Normal, QIcon::On);
+    auto aliasIconOnHover = Utils::StyleHelper::IconFontHelper(
+        aliasOnUnicode, Theme::getColor(Theme::DSnavigatorAliasIconChecked), size, QIcon::Active, QIcon::On);
+    auto aliasIconOnSelected = Utils::StyleHelper::IconFontHelper(
+        aliasOnUnicode, Theme::getColor(Theme::DSnavigatorAliasIconChecked), size, QIcon::Selected, QIcon::On);
+
+    const QIcon aliasIcon = Utils::StyleHelper::getIconFromIconFont(
+                fontName, {aliasIconOffNormal,
+                           aliasIconOffHover,
+                           aliasIconOffSelected,
+                           aliasIconOnNormal,
+                           aliasIconOnHover,
+                           aliasIconOnSelected});
+
+    auto lockIconOffNormal = Utils::StyleHelper::IconFontHelper(
+        lockOffUnicode, Theme::getColor(Theme::DSnavigatorIcon), size, QIcon::Normal, QIcon::Off);
+    auto lockIconOffHover = Utils::StyleHelper::IconFontHelper(
+        lockOffUnicode, Theme::getColor(Theme::DSnavigatorIconHover), size, QIcon::Active, QIcon::Off);
+    auto lockIconOffSelected = Utils::StyleHelper::IconFontHelper(
+        lockOffUnicode, Theme::getColor(Theme::DSnavigatorIconSelected), size, QIcon::Selected, QIcon::Off);
+    auto lockIconOnNormal = Utils::StyleHelper::IconFontHelper(
+        lockOnUnicode, Theme::getColor(Theme::DSnavigatorIcon), size, QIcon::Normal, QIcon::On);
+    auto lockIconOnHover = Utils::StyleHelper::IconFontHelper(
+        lockOnUnicode, Theme::getColor(Theme::DSnavigatorIconHover), size, QIcon::Active, QIcon::On);
+    auto lockIconOnSelected = Utils::StyleHelper::IconFontHelper(
+        lockOnUnicode, Theme::getColor(Theme::DSnavigatorIconSelected), size, QIcon::Selected, QIcon::On);
+
+    const QIcon lockIcon = Utils::StyleHelper::getIconFromIconFont(
+                fontName, {lockIconOffNormal,
+                           lockIconOffHover,
+                           lockIconOffSelected,
+                           lockIconOnNormal,
+                           lockIconOnHover,
+                           lockIconOnSelected});
 
     auto idDelegate = new NameItemDelegate(this);
 
-    IconCheckboxItemDelegate *visibilityDelegate =
-            new IconCheckboxItemDelegate(this, visibilityOnIcon, visibilityOffIcon);
-
-    IconCheckboxItemDelegate *aliasDelegate =
-            new IconCheckboxItemDelegate(this, aliasOnIcon, aliasOffIcon);
-
-    IconCheckboxItemDelegate *lockDelegate =
-            new IconCheckboxItemDelegate(this, lockOnIcon, lockOffIcon);
+    auto visibilityDelegate = new IconCheckboxItemDelegate(this, visibilityIcon);
+    auto aliasDelegate = new IconCheckboxItemDelegate(this, aliasIcon);
+    auto lockDelegate = new IconCheckboxItemDelegate(this, lockIcon);
 
     treeWidget()->setItemDelegateForColumn(NavigatorTreeModel::ColumnType::Name, idDelegate);
     treeWidget()->setItemDelegateForColumn(NavigatorTreeModel::ColumnType::Alias, aliasDelegate);

src/plugins/qmldesigner/components/resources/dockwidgets.css

@@ -1,112 +1,119 @@
-ADS--DockContainerWidget
-{
-    background-color: creatorTheme.QmlDesigner_BackgroundColorDarkAlternate;
+ADS--DockContainerWidget {
+    background: creatorTheme.DSdockContainerBackground;
 }
 
-ADS--DockContainerWidget QSplitter::handle
-{
-    background-color: creatorTheme.QmlDesigner_BackgroundColorDarkAlternate;
+ADS--DockContainerWidget QSplitter::handle {
+    background: creatorTheme.DSdockContainerSplitter;
 }
 
-ADS--DockAreaWidget
-{
-    background-color: creatorTheme.BackgroundColorNormal;
+ADS--DockAreaWidget {
+    background: creatorTheme.DSdockAreaBackground;
 }
 
-ADS--DockAreaWidget #tabsMenuButton::menu-indicator
-{
+ADS--DockAreaWidget #tabsMenuButton::menu-indicator {
     image: none;
 }
 
 ADS--DockSplitter::handle:horizontal {
     width: 1px;
-    background-color: creatorTheme.SplitterColor;
+    background: creatorTheme.DSdockWidgetSplitter;
 }
 
 ADS--DockSplitter::handle:vertical {
     height: 1px;
-    background-color: creatorTheme.SplitterColor;
+    background: creatorTheme.DSdockWidgetSplitter;
 }
 
-ADS--DockWidgetTab
-{
-    background-color: creatorTheme.BackgroundColorDark;
-    border-color: creatorTheme.SplitterColor;
+ADS--DockWidgetTab {
+    background-color: creatorTheme.DStabInactiveBackground;
+    border-color: creatorTheme.DStabSplitter;
     border-style: solid;
     border-width: 0 1px 0 0;
 }
 
-ADS--DockWidgetTab[activeTab="true"]
-{
-    background-color: creatorTheme.QmlDesigner_TabLight;
+ADS--DockWidgetTab QLabel {
+    color: creatorTheme.DStabInactiveText;
 }
 
-ADS--DockWidgetTab QLabel
-{
-    color: creatorTheme.QmlDesigner_TabLight;
+ADS--DockWidgetTab[activeTab="true"] {
+    background: creatorTheme.DStabActiveBackground;
 }
 
-ADS--DockWidgetTab[activeTab="true"] QLabel
-{
-    color: creatorTheme.QmlDesigner_TabDark;
+ADS--DockWidgetTab[activeTab="true"] QLabel {
+    color: creatorTheme.DStabActiveText;
 }
 
-ADS--DockWidget
-{
-    background-color: palette(light);
-    border-color: red;
-    border-style: solid;
-    border-width: 0;
+ADS--DockWidgetTab[activeTab="true"] > #tabCloseButton:hover {
+    background: creatorTheme.DStabActiveButtonHover;
 }
 
-ADS--DockAreaTitleBar
-{
-    background-color: creatorTheme.BackgroundColorDark;
+ADS--DockWidgetTab[activeTab="true"] > #tabCloseButton:pressed {
+    background: creatorTheme.DStabActiveButtonPress;
 }
 
-QWidget#tabsContainerWidget
-{
-    background-color: creatorTheme.BackgroundColorDark;
+ADS--DockWidget {
+    background: creatorTheme.DSdockWidgetBackground;
+    border: none;
 }
 
-ADS--TitleBarButton
-{
-    padding: 0px 0px;
+QWidget#tabsContainerWidget {
+    background: creatorTheme.DStabContainerBackground;
 }
 
-ADS--TitleBarButton:hover
-{
-    background-color: creatorTheme.QmlDesigner_BackgroundColorDarkAlternate;
+ADS--TitleBarButton {
+    margin: 1px;
+    background: none;
+    border: none;
 }
 
-QScrollArea#dockWidgetScrollArea
-{
-    background-color: creatorTheme.QmlDesigner_BackgroundColorDarkAlternate;
+ADS--TitleBarButton:hover {
+    background-color: creatorTheme.DStitleBarButtonHover;
+}
+
+ADS--TitleBarButton:press {
+    background-color: creatorTheme.DStitleBarButtonPress;
+}
+
+#floatingTitleLabel {
+    color: creatorTheme.DStitleBarText;
+}
+
+#floatingTitleCloseButton {
+    margin: 1px;
+    background: none;
+    border: none;
+}
+
+#floatingTitleCloseButton:hover {
+    background: creatorTheme.DStitleBarButtonHover;
+}
+
+#floatingTitleCloseButton:pressed {
+    background: creatorTheme.DStitleBarButtonPress;
+}
+
+QScrollArea#dockWidgetScrollArea {
+    background-color: creatorTheme.DSpanelBackground;
     padding: 0px;
     border: none;
 }
 
-#tabCloseButton
-{
-    margin-top: 2px;
+#tabCloseButton {
+    margin: 1px;
     background: none;
     border: none;
-    padding: 0px -2px;
 }
 
-#tabCloseButton:hover
-{
-    border: 1px solid rgba(0, 0, 0, 32);
-    background: rgba(0, 0, 0, 16);
+#tabCloseButton:hover {
+    background: creatorTheme.DStabInactiveButtonHover;
 }
 
-#tabCloseButton:pressed
-{
-    background: rgba(0, 0, 0, 32);
+#tabCloseButton:pressed {
+    background: creatorTheme.DStabInactiveButtonPress;
 }
 
 QScrollBar {
-    background-color: creatorTheme.BackgroundColorDark;
+    background: creatorTheme.DSscrollBarTrack;
 }
 
 QScrollBar:vertical {
@@ -118,7 +125,7 @@ QScrollBar:horizontal {
 }
 
 QScrollBar::handle {
-    background-color: creatorTheme.QmlDesigner_ScrollBarHandleColor;
+    background: creatorTheme.DSscrollBarHandle;
 }
 
 QScrollBar::handle:vertical {
@@ -141,28 +148,27 @@ QScrollBar::sub-page {
 
 /* Focus related styling */
 ADS--DockWidgetTab[focused="true"] {
-    background: creatorTheme.DSinteraction;
-    border-color: creatorTheme.DSinteraction;
+    background: creatorTheme.DStabFocusBackground;
 }
 
 ADS--DockWidgetTab[focused="true"] > #tabCloseButton:hover {
-    background: rgba(255, 255, 255, 48);
+    background: creatorTheme.DStabFocusButtonHover;
 }
 
 ADS--DockWidgetTab[focused="true"] > #tabCloseButton:pressed {
-    background: rgba(255, 255, 255, 92);
+    background: creatorTheme.DStabFocusButtonPress;
 }
 
 ADS--DockWidgetTab[focused="true"] QLabel {
-    color: palette(creatorTheme.DStextColor);
+    color: creatorTheme.DStabFocusText;
 }
 
 ADS--DockAreaTitleBar {
-    background: creatorTheme.QmlDesigner_BackgroundColorDarkAlternate;
-    border-bottom: 2px solid creatorTheme.QmlDesigner_TabLight;
+    background: creatorTheme.DSdockWidgetTitleBar;
+    border-bottom: 2px solid creatorTheme.DStabActiveBackground;
     padding-bottom: 0px;
 }
 
 ADS--DockAreaWidget[focused="true"] ADS--DockAreaTitleBar {
-    border-bottom-color: creatorTheme.DSinteraction;
+    border-bottom-color: creatorTheme.DStabFocusBackground;
 }

src/plugins/qmldesigner/components/resources/scrollbar.css

@@ -1,5 +1,5 @@
 QScrollBar {
-    background-color: creatorTheme.BackgroundColorDark;
+    background-color: creatorTheme.DSscrollBarTrack;
 }
 
 QScrollBar:vertical {
@@ -11,7 +11,7 @@ QScrollBar:horizontal {
 }
 
 QScrollBar::handle {
-    background-color: creatorTheme.QmlDesigner_ScrollBarHandleColor;
+    background-color: creatorTheme.DSscrollBarHandle;
 }
 
 QScrollBar::handle:vertical {

src/plugins/qmldesigner/components/resources/stylesheet.css

@@ -1,6 +1,11 @@
-QFrame {
-   border: 2px;
-   background-color: creatorTheme.QmlDesigner_BackgroundColorDarkAlternate;
+QFrame,
+QScrollArea,
+QStackedWidget,
+QGraphicsView,
+QTabWidget,
+QTabWidget::pane { /* The tab widget frame */
+    border: 0px;
+    background-color: creatorTheme.DSpanelBackground;
 }
 
 QLabel {
@@ -8,54 +13,52 @@ QLabel {
     border-image: none;
     padding: 0;
     background: none;
-    color: creatorTheme.PanelTextColorLight;
+    color: creatorTheme.DStextColor;
+    selection-color: creatorTheme.DStextSelectedTextColor;
+    selection-background-color: creatorTheme.DSinteraction;
 }
 
-QScrollArea {
-     border: 0px;
-     background-color: creatorTheme.QmlDesigner_BackgroundColorDarkAlternate;
+QFrame {
+    border: 2px;
 }
 
-QStackedWidget {
-     border: 0px;
-     background-color: creatorTheme.QmlDesigner_BackgroundColorDarkAlternate;
+QTreeView,
+QListView {
+    color: creatorTheme.DStextColor;
+    selection-color: creatorTheme.DStextSelectedTextColor;
+    selection-background-color: creatorTheme.DSinteraction;
 }
 
-QGraphicsView {
-     border: 0px;
-     background-color: creatorTheme.QmlDesigner_BackgroundColorDarkAlternate;
+QPushButton {
+    color: creatorTheme.DStextColor;
+    border: 1px solid creatorTheme.DScontrolOutline;
+    background: creatorTheme.DScontrolBackground;
+    padding: 4px 2px 4px 2px;
+    min-width: 70px;
 }
 
- QTreeView {
-    color: creatorTheme.PanelTextColorLight;
-    selection-color: creatorTheme.PanelTextColorLight;
-    selection-background-color: creatorTheme.QmlDesigner_HighlightColor;
- }
-
- QListView {
-    color: creatorTheme.PanelTextColorLight;
-    selection-color: creatorTheme.PanelTextColorLight;
-    selection-background-color: creatorTheme.QmlDesigner_HighlightColor;
- }
-
-  QComboBox QAbstractItemView {
-     show-decoration-selected: 1; /* make the selection span the entire width of the view */
-     background-color: creatorTheme.DSpanelBackground; /* sets background of the menu */
-     border: 1px solid black;
-     margin: 0px; /* some spacing around the menu */
-     color: creatorTheme.DStextColor;
-     selection-background-color: creatorTheme.DSinteraction;
-     selection-color: creatorTheme.DStextSelectedTextColor;
- }
-
-QTabWidget {
-     border: 0px;
-     background-color: creatorTheme.QmlDesigner_BackgroundColorDarkAlternate;
+QPushButton:hover {
+    background: creatorTheme.DScontrolBackgroundHover;
 }
 
-QTabWidget::pane { /* The tab widget frame */
-     border: 0px;
-     background-color: creatorTheme.QmlDesigner_BackgroundColorDarkAlternate;
+QPushButton:pressed {
+    border-color: creatorTheme.DScontrolOutlineInteraction;
+    background: creatorTheme.DScontrolBackgroundInteraction;
+    color: creatorTheme.DSiconColorInteraction;
+}
+
+QCheckBox {
+    color: creatorTheme.DStextColor;
+}
+
+QComboBox QAbstractItemView {
+    show-decoration-selected: 1; /* make the selection span the entire width of the view */
+    background-color: creatorTheme.DSpopupBackground; /* sets background of the menu */
+    border: 1px solid creatorTheme.DScontrolOutline;
+    margin: 0px; /* some spacing around the menu */
+    color: creatorTheme.DStextColor;
+    selection-color: creatorTheme.DStextSelectedTextColor;
+    selection-background-color: creatorTheme.DSinteraction;
 }
 
 QTabBar::tab {
@@ -63,8 +66,8 @@ QTabBar::tab {
     height: 22px;
 
     border-image: none;
-    background-color: creatorTheme.QmlDesigner_TabDark;
-    color: creatorTheme.QmlDesigner_TabLight;
+    background-color: creatorTheme.DStabInactiveBackground;
+    color: creatorTheme.DStabInactiveText;
     margin: 0px;
     font: bold;
     font-size: creatorTheme.captionFontPixelSize;
@@ -72,6 +75,13 @@ QTabBar::tab {
 
 QTabBar::tab:selected {
     border: none; /* no border for a flat push button */
-    background-color: creatorTheme.QmlDesigner_TabLight;
-    color: creatorTheme.QmlDesigner_TabDark;
+    background-color: creatorTheme.DStabActiveBackground;
+    color: creatorTheme.DStabActiveText;
+}
+
+QLineEdit {
+    color: creatorTheme.DStextColor;
+    background-color: creatorTheme.DSdockAreaBackground;
+    selection-color: creatorTheme.DStextSelectedTextColor;
+    selection-background-color: creatorTheme.DStextSelectionColor;
 }

src/plugins/qmldesigner/designmodewidget.cpp

@@ -215,7 +215,7 @@ void DesignModeWidget::disableWidgets()
 static void addSpacerToToolBar(QToolBar *toolBar)
 {
     QWidget* empty = new QWidget();
-    empty->setSizePolicy(QSizePolicy::Expanding,QSizePolicy::Preferred);
+    empty->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Preferred);
     toolBar->addWidget(empty);
 }
 
@@ -231,6 +231,7 @@ void DesignModeWidget::setup()
 
     ADS::DockManager::setConfigFlags(ADS::DockManager::DefaultNonOpaqueConfig);
     ADS::DockManager::setConfigFlag(ADS::DockManager::FocusHighlighting, true);
+    ADS::DockManager::setConfigFlag(ADS::DockManager::AllTabsHaveCloseButton, true);
     m_dockManager = new ADS::DockManager(this);
     m_dockManager->setSettings(settings);
     m_dockManager->setWorkspacePresetsPath(Core::ICore::resourcePath() + QLatin1String("/qmldesigner/workspacePresets/"));
@@ -239,32 +240,30 @@ void DesignModeWidget::setup()
     m_dockManager->setStyleSheet(Theme::replaceCssColors(sheet));
 
     // Setup icons
-    const QColor iconColor(Theme::getColor(Theme::IconsBaseColor));
-    const QColor buttonColor(Theme::getColor(Theme::QmlDesigner_TabLight)); // TODO Use correct color roles
-    const QColor tabColor(Theme::getColor(Theme::QmlDesigner_TabDark));
+    const QColor iconColor(Theme::getColor(Theme::DStitleBarIcon));
 
     const QString closeUnicode = Theme::getIconUnicode(Theme::Icon::adsClose);
     const QString menuUnicode = Theme::getIconUnicode(Theme::Icon::adsDropDown);
     const QString undockUnicode = Theme::getIconUnicode(Theme::Icon::adsDetach);
 
     const QString fontName = "qtds_propertyIconFont.ttf";
-    const QIcon closeIcon = Utils::StyleHelper::getIconFromIconFont(fontName, closeUnicode, 28, 28, buttonColor);
-    const QIcon menuIcon = Utils::StyleHelper::getIconFromIconFont(fontName, menuUnicode, 28, 28, buttonColor);
-    const QIcon undockIcon = Utils::StyleHelper::getIconFromIconFont(fontName, undockUnicode, 28, 28, buttonColor);
+    const QSize size = QSize(28, 28);
 
-    auto closeIconNormal = Utils::StyleHelper::IconFontHelper(closeUnicode,
-                                                              tabColor,
-                                                              QSize(28, 28),
-                                                              QIcon::Normal,
-                                                              QIcon::Off);
+    const QIcon closeIcon = Utils::StyleHelper::getIconFromIconFont(fontName, closeUnicode, 28, 28, iconColor);
+    const QIcon menuIcon = Utils::StyleHelper::getIconFromIconFont(fontName, menuUnicode, 28, 28, iconColor);
+    const QIcon undockIcon = Utils::StyleHelper::getIconFromIconFont(fontName, undockUnicode, 28, 28, iconColor);
 
-    auto closeIconFocused = Utils::StyleHelper::IconFontHelper(closeUnicode,
-                                                               Theme::getColor(Theme::DStextColor),
-                                                               QSize(28, 28),
-                                                               QIcon::Normal,
-                                                               QIcon::On);
+    auto tabCloseIconNormal = Utils::StyleHelper::IconFontHelper(
+        closeUnicode, Theme::getColor(Theme::DStabInactiveIcon), size, QIcon::Normal, QIcon::Off);
+    auto tabCloseIconActive = Utils::StyleHelper::IconFontHelper(
+        closeUnicode, Theme::getColor(Theme::DStabActiveIcon), size, QIcon::Active, QIcon::Off);
+    auto tabCloseIconFocus = Utils::StyleHelper::IconFontHelper(
+        closeUnicode, Theme::getColor(Theme::DStabFocusIcon), size, QIcon::Selected, QIcon::Off);
 
-    const QIcon tabsCloseIcon = Utils::StyleHelper::getIconFromIconFont(fontName, {closeIconNormal, closeIconFocused});
+    const QIcon tabsCloseIcon = Utils::StyleHelper::getIconFromIconFont(
+                fontName, {tabCloseIconNormal,
+                           tabCloseIconActive,
+                           tabCloseIconFocus});
 
     ADS::DockManager::iconProvider().registerCustomIcon(ADS::TabCloseIcon, tabsCloseIcon);
     ADS::DockManager::iconProvider().registerCustomIcon(ADS::DockAreaMenuIcon, menuIcon);
@@ -470,7 +469,8 @@ void DesignModeWidget::setup()
     });
 
     const QIcon gaIcon = Utils::StyleHelper::getIconFromIconFont(
-                fontName, Theme::getIconUnicode(Theme::Icon::annotationBubble), 36, 36, iconColor);
+                fontName, Theme::getIconUnicode(Theme::Icon::annotationBubble),
+                36, 36, Theme::getColor(Theme::IconsBaseColor));
     toolBar->addAction(gaIcon, tr("Edit global annotation for current file."), [&](){
         ModelNode node = currentDesignDocument()->rewriterView()->rootModelNode();
 

src/plugins/qmldesigner/documentwarningwidget.cpp

@@ -175,12 +175,11 @@ bool DocumentWarningWidget::eventFilter(QObject *object, QEvent *event)
 
 void DocumentWarningWidget::showEvent(QShowEvent *event)
 {
-    const QColor backgroundColor = Utils::creatorTheme()->color(Utils::Theme::QmlDesigner_BackgroundColor);
+    const QColor backgroundColor = Utils::creatorTheme()->color(Utils::Theme::DScontrolBackground);
+    const QColor outlineColor = Utils::creatorTheme()->color(Utils::Theme::DScontrolOutline);
     QPalette pal = palette();
-    QColor color = pal.color(QPalette::ToolTipBase);
-    const QColor backgroundNoAlpha = Utils::StyleHelper::alphaBlendedColors(color, backgroundColor);
-    color.setAlpha(255);
-    pal.setColor(QPalette::ToolTipBase, backgroundNoAlpha);
+    pal.setColor(QPalette::ToolTipBase, backgroundColor);
+    pal.setColor(QPalette::ToolTipText, outlineColor);
     setPalette(pal);
     m_gotoCodeWasClicked = false;
     moveToParentCenter();