From e65e8e25d75ea20d88bf956193b33a8dc9664ef2 Mon Sep 17 00:00:00 2001
From: Alessandro Portale <alessandro.portale@qt.io>
Date: Thu, 5 Jun 2025 16:50:09 +0200
Subject: [PATCH] Utils: Migrate to new spacing tokens

The spacing tokens in the Figma designs were reorganized. This change
adopts the new tokens in Qt Creator. Only constants names do change, all
values remain the same as they were.

Change-Id: Icedf82bfd55a145ccf3d31d955ddda636ca2f564
Reviewed-by: hjk <hjk@qt.io>
---
 src/libs/utils/aspects.cpp                    |   2 +-
 src/libs/utils/markdownbrowser.cpp            |  10 +-
 src/libs/utils/qtcwidgets.cpp                 | 103 +++++++++--------
 src/libs/utils/stylehelper.h                  |  64 +++++++----
 .../progressmanager/progressmanager.cpp       |  18 +--
 src/plugins/coreplugin/versiondialog.cpp      |   2 +-
 src/plugins/coreplugin/welcomepagehelper.cpp  | 108 +++++++++---------
 .../extensionmanagersettings.cpp              |   2 +-
 .../extensionmanagerwidget.cpp                |  33 +++---
 .../extensionmanager/extensionsbrowser.cpp    |  98 ++++++++--------
 src/plugins/learning/qtacademywelcomepage.cpp |   6 +-
 src/plugins/lua/bindings/fetch.cpp            |   2 +-
 src/plugins/lua/bindings/install.cpp          |   2 +-
 .../projectexplorer/projectwelcomepage.cpp    |  46 ++++----
 .../qtsupport/gettingstartedwelcomepage.cpp   |  12 +-
 src/plugins/welcome/welcomeplugin.cpp         |   6 +-
 16 files changed, 263 insertions(+), 251 deletions(-)

diff --git a/src/libs/utils/aspects.cpp b/src/libs/utils/aspects.cpp
index 89f8acb8d4a..1cc844d2732 100644
--- a/src/libs/utils/aspects.cpp
+++ b/src/libs/utils/aspects.cpp
@@ -2129,7 +2129,7 @@ void BoolAspect::addToLayoutHelper(Layouting::Layout &parent, QAbstractButton *b
         ttLabel->setFont(StyleHelper::uiFont(StyleHelper::UiElementLabelSmall));
         auto lt = new QVBoxLayout;
         lt->setContentsMargins({});
-        lt->setSpacing(StyleHelper::SpacingTokens::VGapXxs);
+        lt->setSpacing(StyleHelper::SpacingTokens::GapVXs);
         lt->addWidget(button);
         lt->addWidget(ttLabel);
         parent.addItem(lt);
diff --git a/src/libs/utils/markdownbrowser.cpp b/src/libs/utils/markdownbrowser.cpp
index 2c90f426aa8..7d77981c3e7 100644
--- a/src/libs/utils/markdownbrowser.cpp
+++ b/src/libs/utils/markdownbrowser.cpp
@@ -647,9 +647,9 @@ void MarkdownBrowser::highlightCodeBlock(const QString &language, QTextBlock &bl
     QTextFrameFormat frameFormat;
     frameFormat.setBorderStyle(QTextFrameFormat::BorderStyle_Solid);
     frameFormat.setBackground(creatorColor(Theme::Token_Background_Muted));
-    frameFormat.setPadding(SpacingTokens::ExPaddingGapM);
-    frameFormat.setLeftMargin(SpacingTokens::VGapM);
-    frameFormat.setRightMargin(SpacingTokens::VGapM);
+    frameFormat.setPadding(SpacingTokens::PaddingVS);
+    frameFormat.setLeftMargin(SpacingTokens::PaddingVXs);
+    frameFormat.setRightMargin(SpacingTokens::PaddingVXs);
 
     QTextFrame *frame = cursor.insertFrame(frameFormat);
     QTextCursor frameCursor(frame);
@@ -837,8 +837,8 @@ void MarkdownBrowser::postProcessDocument(bool firstTime)
         };
 
         if (blockFormat.hasProperty(QTextFormat::HeadingLevel)) {
-            blockFormat.setTopMargin(SpacingTokens::ExVPaddingGapXl * fontScale);
-            blockFormat.setBottomMargin(SpacingTokens::VGapL * fontScale);
+            blockFormat.setTopMargin(SpacingTokens::PaddingVXxl * fontScale);
+            blockFormat.setBottomMargin(SpacingTokens::GapVM * fontScale);
         } else {
             blockFormat
                 .setLineHeight(lineHeight(contentTF) * fontScale, QTextBlockFormat::FixedHeight);
diff --git a/src/libs/utils/qtcwidgets.cpp b/src/libs/utils/qtcwidgets.cpp
index b759bdebdb4..a07f628acbf 100644
--- a/src/libs/utils/qtcwidgets.cpp
+++ b/src/libs/utils/qtcwidgets.cpp
@@ -138,31 +138,31 @@ QSize QtcButton::minimumSizeHint() const
 void QtcButton::paintEvent(QPaintEvent *event)
 {
     // Without pixmap
-    // +----------------+----------------+----------------+
-    // |                |(VPadding[S|XS])|                |
-    // |                +----------------+----------------+
-    // |(HPadding[S|XS])|     <label>    |(HPadding[S|XS])|
-    // |                +----------------+----------------+
-    // |                |(VPadding[S|XS])|                |
-    // +----------------+---------------------------------+
+    // +------------------------+-----------+------------------------+
+    // |                        |(PaddingVM)|                        |
+    // |                        +-----------+                        |
+    // |([PaddingHXL|PaddingHM])|  <label>  |([PaddingHXL|PaddingHM])|
+    // |                        +-----------+                        |
+    // |                        |(PaddingVM)|                        |
+    // +------------------------+-----------+------------------------+
     //
     // With pixmap
-    // +-------+--------+-------------------------+---------------------------------+
-    // |       |        |                         |(VPadding[S|XS])|                |
-    // |       |        |                         +----------------+                |
-    // |(HGapS)|<pixmap>|([ExPaddingGapM|HGapXxs])|     <label>    |(HPadding[S|XS])|
-    // |       |        |                         +----------------+                |
-    // |       |        |                         |(VPadding[S|XS])|                |
-    // +-------+--------+-------------------------+----------------+----------------+
+    // +-----------+--------+----------------+-----------+------------------------+
+    // |           |        |                |(PaddingVM)|                        |
+    // |           |        |                +-----------+                        |
+    // |(PaddingHM)|<pixmap>|([GapHS|GapHXs])|  <label>  |([PaddingHXL|PaddingHM])|
+    // |           |        |                +-----------+                        |
+    // |           |        |                |(PaddingVM)|                        |
+    // +-----------+--------+----------------+-----------+------------------------+
     //
     // SmallLink with pixmap
-    // +--------+---------------+---------------------------------+
-    // |        |               |(VPadding[S|XS])|                |
-    // |        |               +----------------+                |
-    // |<pixmap>|(ExPaddingGapM)|     <label>    |(HPadding[S|XS])|
-    // |        |               +----------------+                |
-    // |        |               |(VPadding[S|XS])|                |
-    // +--------+---------------+----------------+----------------+
+    // +--------+-------+-----------+------------------------+
+    // |        |       |(PaddingVM)|                        |
+    // |        |       +-----------+                        |
+    // |<pixmap>|(GapHS)|  <label>  |([PaddingHXl|PaddingHM])|
+    // |        |       +-----------+                        |
+    // |        |       |(PaddingVM)|                        |
+    // +--------+-------+-----------+------------------------+
 
     const bool hovered = underMouse();
     const WidgetState state = isChecked() ? WidgetStateChecked : hovered ? WidgetStateHovered
@@ -227,7 +227,7 @@ void QtcButton::paintEvent(QPaintEvent *event)
 
     if (!m_pixmap.isNull()) {
         const QSizeF pixmapS = m_pixmap.deviceIndependentSize();
-        const int pixmapX = m_role == SmallLink ? 0 : HGapS;
+        const int pixmapX = m_role == SmallLink ? 0 : PaddingHM;
         const int pixmapY = (bgR.height() - pixmapS.height()) / 2;
         p.drawPixmap(pixmapX, pixmapY, m_pixmap);
     }
@@ -258,18 +258,17 @@ void QtcButton::setRole(Role role)
 void QtcButton::updateMargins()
 {
     if (m_role == Tag) {
-        setContentsMargins(HPaddingXs, VPaddingXxs, HPaddingXs, VPaddingXxs);
+        setContentsMargins(PaddingHM, PaddingVXs, PaddingHM, PaddingVXs);
         return;
     }
     const bool tokenSizeS = m_role == LargePrimary || m_role == LargeSecondary
                             || m_role == SmallList || m_role == SmallLink;
-    const int hPaddingR = tokenSizeS ? HPaddingS : HPaddingXs;
+    const int hPaddingR = tokenSizeS ? PaddingHXl : PaddingHM;
     const int hPaddingL = m_pixmap.isNull() ? hPaddingR
-                                            : (m_role == SmallLink ? 0 : HGapS)
+                                            : (m_role == SmallLink ? 0 : PaddingHM)
                                                   + int(m_pixmap.deviceIndependentSize().width())
-                                                  + (tokenSizeS ? ExPaddingGapM : HGapXxs);
-    const int vPadding = tokenSizeS ? VPaddingS : VPaddingXs;
-    setContentsMargins(hPaddingL, vPadding, hPaddingR, vPadding);
+                                                  + (tokenSizeS ? GapHS : GapHXs);
+    setContentsMargins(hPaddingL, PaddingVM, hPaddingR, PaddingVM);
 }
 
 QtcLabel::QtcLabel(const QString &text, Role role, QWidget *parent)
@@ -285,7 +284,7 @@ void QtcLabel::setRole(Role role)
         secondaryTF{primaryTF.themeColor, StyleHelper::UiElement::UiElementH6Capital};
 
     const TextFormat &tF = role == Primary ? primaryTF : secondaryTF;
-    const int vPadding = role == Primary ? ExPaddingGapM : VPaddingS;
+    const int vPadding = role == Primary ? PaddingVS : PaddingVM;
 
     setFixedHeight(vPadding + tF.lineHeight() + vPadding);
     setFont(tF.font());
@@ -326,8 +325,8 @@ QtcSearchBox::QtcSearchBox(QWidget *parent)
     pal.setColor(QPalette::Text, searchBoxTextTF.color());
     setPalette(pal);
 
-    setContentsMargins({HPaddingXs, ExPaddingGapM, 0, ExPaddingGapM});
-    setFixedHeight(ExPaddingGapM + searchBoxTextTF.lineHeight() + ExPaddingGapM);
+    setContentsMargins({PaddingHM, PaddingVS, 0, PaddingVS});
+    setFixedHeight(PaddingVS + searchBoxTextTF.lineHeight() + PaddingVS);
     setFiltering(true);
 }
 
@@ -366,13 +365,13 @@ static void paintCommonBackground(QPainter *p, const QRectF &rect, const QWidget
 
 void QtcSearchBox::paintEvent(QPaintEvent *event)
 {
-    // +------------+---------------+------------+------+------------+
-    // |            |(ExPaddingGapM)|            |      |            |
-    // |            +---------------+            |      |            |
-    // |(HPaddingXs)|  <lineEdit>   |(HPaddingXs)|<icon>|(HPaddingXs)|
-    // |            +---------------+            |      |            |
-    // |            |(ExPaddingGapM)|            |      |            |
-    // +------------+---------------+------------+------+------------+
+    // +-----------+-----------+-------+------+-----------+
+    // |           |(PaddingVS)|       |      |           |
+    // |           +-----------+       |      |           |
+    // |(PaddingHM)| <lineEdit>|(GapHM)|<icon>|(PaddingHM)|
+    // |           +-----------+       |      |           |
+    // |           |(PaddingVS)|       |      |           |
+    // +-----------+-----------+-------+------+-----------+
 
     QPainter p(this);
 
@@ -380,7 +379,7 @@ void QtcSearchBox::paintEvent(QPaintEvent *event)
     if (text().isEmpty()) {
         const QPixmap icon = searchBoxIcon();
         const QSize iconS = icon.deviceIndependentSize().toSize();
-        const QPoint iconPos(width() - HPaddingXs - iconS.width(), (height() - iconS.height()) / 2);
+        const QPoint iconPos(width() - PaddingHM - iconS.width(), (height() - iconS.height()) / 2);
         if (!isEnabled())
             p.setOpacity(disabledIconOpacity);
         p.drawPixmap(iconPos, icon);
@@ -407,8 +406,8 @@ QtcComboBox::QtcComboBox(QWidget *parent)
     setMouseTracking(true);
 
     const QSize iconSize = comboBoxIcon().deviceIndependentSize().toSize();
-    setContentsMargins({HPaddingXs, VPaddingXs,
-                        HGapXxs + iconSize.width() + HPaddingXs, VPaddingXs});
+    setContentsMargins({PaddingHM, PaddingVM,
+                        GapHXs + iconSize.width() + PaddingHM, PaddingVM});
 }
 
 QSize QtcComboBox::sizeHint() const
@@ -433,13 +432,13 @@ void QtcComboBox::leaveEvent(QEvent *event)
 
 void QtcComboBox::paintEvent(QPaintEvent *)
 {
-    // +------------+-------------+---------+-------+------------+
-    // |            | (VPaddingXs)|         |       |            |
-    // |            +-------------+         |       |            |
-    // |(HPaddingXs)|<currentItem>|(HGapXxs)|<arrow>|(HPaddingXs)|
-    // |            +-------------+         |       |            |
-    // |            | (VPaddingXs)|         |       |            |
-    // +------------+-------------+---------+-------+------------+
+    // +-----------+-------------+--------+-------+-----------+
+    // |           | (PaddingVM) |        |       |           |
+    // |           +-------------+        |       |           |
+    // |(PaddingHM)|<currentItem>|(GapHXs)|<arrow>|(PaddingHM)|
+    // |           +-------------+        |       |           |
+    // |           | (PaddingVM) |        |       |           |
+    // +-----------+-------------+--------+-------+-----------+
 
     QPainter p(this);
     paintCommonBackground(&p, rect(), this);
@@ -454,7 +453,7 @@ void QtcComboBox::paintEvent(QPaintEvent *)
 
     const QPixmap icon = comboBoxIcon();
     const QSize iconS = icon.deviceIndependentSize().toSize();
-    const QPoint iconPos(width() - HPaddingXs - iconS.width(), (height() - iconS.height()) / 2);
+    const QPoint iconPos(width() - PaddingHM - iconS.width(), (height() - iconS.height()) / 2);
     if (!isEnabled())
         p.setOpacity(disabledIconOpacity);
     p.drawPixmap(iconPos, icon);
@@ -477,8 +476,8 @@ QSize QtcSwitch::sizeHint() const
 {
     const QFontMetrics fm(SwitchLabelTf.font());
     const int textWidth = fm.size(Qt::TextShowMnemonic, text()).width();
-    const int width = switchTrackS.width() + HGapS + textWidth;
-    return {width, ExPaddingGapM + SwitchLabelTf.lineHeight() + ExPaddingGapM};
+    const int width = switchTrackS.width() + GapHM + textWidth;
+    return {width, PaddingVS + SwitchLabelTf.lineHeight() + PaddingVS};
 }
 
 QSize QtcSwitch::minimumSizeHint() const
@@ -537,7 +536,7 @@ void QtcSwitch::paintEvent([[maybe_unused]] QPaintEvent *event)
         StyleHelper::drawCardBg(&p, thumbR, fill, outline, thumbRounding);
     }
     { // switch text label
-        const int switchAndGapWidth = switchTrackS.width() + HGapS;
+        const int switchAndGapWidth = switchTrackS.width() + GapHM;
         const QRect textR(ltr ? switchAndGapWidth : 0, 0, width() - switchAndGapWidth,
                           trackY + switchTrackS.height());
         p.setFont(SwitchLabelTf.font());
diff --git a/src/libs/utils/stylehelper.h b/src/libs/utils/stylehelper.h
index cb1ca4b1418..d76ad0ed337 100644
--- a/src/libs/utils/stylehelper.h
+++ b/src/libs/utils/stylehelper.h
@@ -44,35 +44,49 @@ constexpr char C_TOOLBAR_ACTIONWIDGET[] = "toolbar_actionWidget";
 constexpr char C_QT_SCALE_FACTOR_ROUNDING_POLICY[] = "QT_SCALE_FACTOR_ROUNDING_POLICY";
 
 namespace SpacingTokens {
-    constexpr int VPaddingXxs = 4;   // Top and bottom padding within the component
-    constexpr int HPaddingXxs = 4;   // Left and right padding within the component
-    constexpr int VGapXxs = 4;       // Vertical Space between TEXT LINE within the Component
-    constexpr int HGapXxs = 4;       // Horizontal Space between elements within the Component
+    constexpr int PrimitiveXxs = 2;
+    constexpr int PrimitiveXs = 4;
+    constexpr int PrimitiveS = 6;
+    constexpr int PrimitiveM = 8;
+    constexpr int PrimitiveL = 12;
+    constexpr int PrimitiveXl = 16;
+    constexpr int PrimitiveXxl = 24;
 
-    constexpr int VPaddingXs = 8;
-    constexpr int HPaddingXs = 8;
-    constexpr int VGapXs = 4;
-    constexpr int HGapXs = 8;
+    // Top and bottom padding within the component
+    constexpr int PaddingVXxs = PrimitiveXxs;
+    constexpr int PaddingVXs = PrimitiveXs;
+    constexpr int PaddingVS = PrimitiveS;
+    constexpr int PaddingVM = PrimitiveM;
+    constexpr int PaddingVL = PrimitiveL;
+    constexpr int PaddingVXl = PrimitiveXl;
+    constexpr int PaddingVXxl = PrimitiveXxl;
 
-    constexpr int VPaddingS = 8;
-    constexpr int HPaddingS = 16;
-    constexpr int VGapS = 4;
-    constexpr int HGapS = 8;
+    // Left and right padding within the component
+    constexpr int PaddingHXxs = PrimitiveXxs;
+    constexpr int PaddingHXs = PrimitiveXs;
+    constexpr int PaddingHS = PrimitiveS;
+    constexpr int PaddingHM = PrimitiveM;
+    constexpr int PaddingHL = PrimitiveL;
+    constexpr int PaddingHXl = PrimitiveXl;
+    constexpr int PaddingHXxl = PrimitiveXxl;
 
-    constexpr int VPaddingM = 16;
-    constexpr int HPaddingM = 24;
-    constexpr int VGapM = 4;
-    constexpr int HGapM = 16;
+    // Gap between vertically (on top of each other) positioned elements
+    constexpr int GapVXxs = PrimitiveXxs;
+    constexpr int GapVXs = PrimitiveXs;
+    constexpr int GapVS = PrimitiveS;
+    constexpr int GapVM = PrimitiveM;
+    constexpr int GapVL = PrimitiveL;
+    constexpr int GapVXl = PrimitiveXl;
+    constexpr int GapVXxl = PrimitiveXxl;
 
-    constexpr int VPaddingL = 16;
-    constexpr int HPaddingL = 24;
-    constexpr int VGapL = 8;
-    constexpr int HGapL = 16;
-
-    constexpr int ExPaddingGapS = 2;
-    constexpr int ExPaddingGapM = 6;
-    constexpr int ExPaddingGapL = 12;
-    constexpr int ExVPaddingGapXl = 24;
+    // Gap between horizontally (from left to right) positioned elements
+    constexpr int GapHXxs = PrimitiveXxs;
+    constexpr int GapHXs = PrimitiveXs;
+    constexpr int GapHS = PrimitiveS;
+    constexpr int GapHM = PrimitiveM;
+    constexpr int GapHL = PrimitiveL;
+    constexpr int GapHXl = PrimitiveXl;
+    constexpr int GapHXxl = PrimitiveXxl;
 }
 
 enum class ToolbarStyle {
diff --git a/src/plugins/coreplugin/progressmanager/progressmanager.cpp b/src/plugins/coreplugin/progressmanager/progressmanager.cpp
index 26e55c5dd43..b92f0e49ba3 100644
--- a/src/plugins/coreplugin/progressmanager/progressmanager.cpp
+++ b/src/plugins/coreplugin/progressmanager/progressmanager.cpp
@@ -124,7 +124,7 @@ void PopupInfoBarDisplay::paintEvent(QPaintEvent *)
     const QRect r = rect().adjusted(0, layout()->contentsMargins().top(), 0, 0);
     StyleHelper::drawCardBg(&p, r, creatorColor(Theme::Token_Background_Muted),
                             creatorColor(Theme::Token_Stroke_Subtle),
-                            StyleHelper::SpacingTokens::HPaddingXs);
+                            StyleHelper::SpacingTokens::PaddingHM);
 }
 
 static void disconnectRecursively(QObject *obj)
@@ -188,7 +188,7 @@ InfoWidget::InfoWidget(const InfoBarEntry &info, QPointer<InfoBar> infoBar)
             Column {
                 Layouting::IconDisplay { icon(InfoBarEntry::icon(infoType)) },
                 st,
-                customMargins(0, 0, StyleHelper::SpacingTokens::ExPaddingGapS, 0),
+                customMargins(0, 0, StyleHelper::SpacingTokens::PaddingHXxs, 0),
             },
             Column {
                 Row {
@@ -201,12 +201,12 @@ InfoWidget::InfoWidget(const InfoBarEntry &info, QPointer<InfoBar> infoBar)
                 }
             }
         },
-        Space(StyleHelper::SpacingTokens::HGapS),
+        Space(StyleHelper::SpacingTokens::GapHM),
         Flow{ bindTo(&buttonLayout), alignment(Qt::AlignRight) },
-        customMargins(StyleHelper::SpacingTokens::HPaddingS,
-                      StyleHelper::SpacingTokens::ExPaddingGapL,
-                      StyleHelper::SpacingTokens::HPaddingS,
-                      StyleHelper::SpacingTokens::ExPaddingGapL),
+        customMargins(StyleHelper::SpacingTokens::PaddingHXl,
+                      StyleHelper::SpacingTokens::PaddingVL,
+                      StyleHelper::SpacingTokens::PaddingHXl,
+                      StyleHelper::SpacingTokens::PaddingVL),
     }.attachTo(this);
     // clang-format on
 
@@ -298,8 +298,8 @@ void InfoWidget::paintEvent(QPaintEvent *)
 {
     QPainter p(this);
     p.setPen(creatorColor(Theme::Token_Stroke_Subtle));
-    p.drawLine(Utils::StyleHelper::SpacingTokens::HPaddingXs, 0,
-               width() - Utils::StyleHelper::SpacingTokens::HPaddingXs - 1, 0);
+    p.drawLine(Utils::StyleHelper::SpacingTokens::PaddingHM, 0,
+               width() - Utils::StyleHelper::SpacingTokens::PaddingHM - 1, 0);
 }
 
 class ProgressTimer : public QObject
diff --git a/src/plugins/coreplugin/versiondialog.cpp b/src/plugins/coreplugin/versiondialog.cpp
index 6a3b23b6ff9..7ef5abdf943 100644
--- a/src/plugins/coreplugin/versiondialog.cpp
+++ b/src/plugins/coreplugin/versiondialog.cpp
@@ -47,7 +47,7 @@ VersionDialog::VersionDialog()
 
     auto logoLabel = new QLabel;
     logoLabel->setPixmap(Icons::QTCREATORLOGO_BIG.pixmap());
-    const int margin = Utils::StyleHelper::SpacingTokens::ExPaddingGapL;
+    const int margin = Utils::StyleHelper::SpacingTokens::PaddingVL;
     logoLabel->setContentsMargins({margin, margin, margin, margin});
 
     auto copyRightLabel = new QLabel(ICore::aboutInformationHtml());
diff --git a/src/plugins/coreplugin/welcomepagehelper.cpp b/src/plugins/coreplugin/welcomepagehelper.cpp
index 00c40f4e0d4..b7f3bbc44c6 100644
--- a/src/plugins/coreplugin/welcomepagehelper.cpp
+++ b/src/plugins/coreplugin/welcomepagehelper.cpp
@@ -409,7 +409,7 @@ constexpr QSize thumbnailAreaSize =
     WelcomeThumbnailSize.grownBy({thumbnailAreaBorderWidth, thumbnailAreaBorderWidth,
                                   thumbnailAreaBorderWidth, thumbnailAreaBorderWidth});
 constexpr int tagsRowsCount = 1;
-constexpr int tagsHGap = ExPaddingGapM;
+constexpr int tagsHGap = GapHS;
 
 constexpr QEasingCurve::Type hoverEasing = QEasingCurve::OutCubic;
 constexpr std::chrono::milliseconds hoverDuration(300);
@@ -420,80 +420,80 @@ QSize ListItemDelegate::itemSize()
 {
     const int tagsTfLineHeight = tagsTF.lineHeight();
     const int width =
-        ExPaddingGapL
+        PaddingHL
         + thumbnailAreaSize.width()
-        + ExPaddingGapL;
+        + PaddingHL;
     const int height =
-        ExPaddingGapL
+        PaddingVL
         + thumbnailAreaSize.height()
-        + VGapL
+        + GapVM
         + titleTF.lineHeight()
-        + VGapL
+        + GapVM
         + tagsTfLineHeight
-        + (tagsTfLineHeight + ExPaddingGapS) * (tagsRowsCount - 1) // If more than one row
-        + ExPaddingGapL;
-    return {width + ExVPaddingGapXl, height + ExVPaddingGapXl};
+        + (tagsTfLineHeight + PaddingVXxs) * (tagsRowsCount - 1) // If more than one row
+        + PaddingVL;
+    return {width + GapHXxl, height + GapVXxl};
 }
 
 void ListItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option,
                              const QModelIndex &index) const
 {
     // Unhovered tile
-    // +---------------+------------------+---------------+-----------------+
-    // |               |  (ExPaddingGapL) |               |                 |
-    // |               +------------------+               |                 |
-    // |               |    <thumbnail>   |               |                 |
-    // |               +------------------+               |                 |
-    // |               |      (VGapL)     |               |                 |
-    // |               +------------------+               |                 |
-    // |(ExPaddingGapL)|      <title>     |(ExPaddingGapL)|(ExVPaddingGapXs)|
-    // |               +------------------+               |                 |
-    // |               |      (VGapL)     |               |                 |
-    // |               +-----------+------+               |                 |
-    // |               |<tagsLabel>|<tags>|               |                 |
-    // |               +-----------+------+               |                 |
-    // |               |  (ExPaddingGapL) |               |                 |
-    // +---------------+------------------+---------------+-----------------+
-    // |                          (ExVPaddingGapXs)                         |
-    // +--------------------------------------------------------------------+
+    // +-----------+------------------+-----------+---------+
+    // |           |    (PaddingVL)   |           |         |
+    // |           +------------------+           |         |
+    // |           |    <thumbnail>   |           |         |
+    // |           +------------------+           |         |
+    // |           |      (GapVM)     |           |         |
+    // |           +------------------+           |         |
+    // |(PaddingHL)|      <title>     |(PaddingHL)|(GapHXxl)|
+    // |           +------------------+           |         |
+    // |           |      (GapVM)     |           |         |
+    // |           +-----------+------+           |         |
+    // |           |<tagsLabel>|<tags>|           |         |
+    // |           +-----------+------+           |         |
+    // |           |    (PaddingVL)   |           |         |
+    // +-----------+------------------+-----------+---------+
+    // |                      (GapVXxl)                     |
+    // +----------------------------------------------------+
     //
     // Hovered, final animation state of the are above tagsLabel
-    // +---------------+------------------+---------------+
-    // |               |  (ExPaddingGapL) |               |
-    // |               +------------------+               |
-    // |               |      <title>     |               |
-    // |               +------------------+               |
-    // |               |  (ExPaddingGapS) |               |
-    // |(ExPaddingGapL)+------------------+(ExPaddingGapL)| ...
-    // |               |       <hr>       |               |
-    // |               +------------------+               |
-    // |               |  (ExPaddingGapS) |               |
-    // |               +------------------+               |
-    // |               |   <description>  |               |
-    // +---------------+------------------+---------------+
-    //                          ...
+    // +-----------+-------------+-----------+
+    // |           | (PaddingVL) |           |
+    // |           +-------------+           |
+    // |           |   <title>   |           |
+    // |           +-------------+           |
+    // |           |  (GapVXxs)  |           |
+    // |(PaddingHL)+-------------+(PaddingHL)| ...
+    // |           |     <hr>    |           |
+    // |           +-------------+           |
+    // |           |  (GapVXxs)  |           |
+    // |           +-------------+           |
+    // |           |<description>|           |
+    // +-----------+-------------+-----------+
+    //                   ...
 
     const ListItem *item = index.data(ListModel::ItemRole).value<Core::ListItem *>();
 
     const QFont tagsLabelFont = tagsLabelTF.font();
     const QFontMetrics tagsLabelFM(tagsLabelFont);
 
-    const QRect bgRGlobal = option.rect.adjusted(0, 0, -ExVPaddingGapXl, -ExVPaddingGapXl);
+    const QRect bgRGlobal = option.rect.adjusted(0, 0, -PaddingHXxl, -PaddingVXxl);
     const QRect bgR = bgRGlobal.translated(-option.rect.topLeft());
-    const QRect thumbnailAreaR(bgR.left() + ExPaddingGapL, bgR.top() + ExPaddingGapL,
+    const QRect thumbnailAreaR(bgR.left() + PaddingHL, bgR.top() + PaddingVL,
                                thumbnailAreaSize.width(), thumbnailAreaSize.height());
-    const QRect titleR(thumbnailAreaR.left(), thumbnailAreaR.bottom() + VGapL + 1,
+    const QRect titleR(thumbnailAreaR.left(), thumbnailAreaR.bottom() + GapVM + 1,
                        thumbnailAreaR.width(), titleTF.lineHeight());
     const QString tagsLabelText = Tr::tr("Tags:");
     const int tagsLabelTextWidth = tagsLabelFM.horizontalAdvance(tagsLabelText);
-    const QRect tagsLabelR(titleR.left(), titleR.bottom() + VGapL + 1,
+    const QRect tagsLabelR(titleR.left(), titleR.bottom() + GapVM + 1,
                            tagsLabelTextWidth, tagsTF.lineHeight());
     const QRect tagsR(tagsLabelR.right() + 1 + tagsHGap, tagsLabelR.top(),
-                      bgR.right() - ExPaddingGapL - tagsLabelR.right() - tagsHGap,
+                      bgR.right() - PaddingHL - tagsLabelR.right() - tagsHGap,
                       tagsLabelR.height()
-                          + (tagsLabelR.height() + ExPaddingGapS) * (tagsRowsCount - 1));
-    QTC_CHECK(option.rect.height() == tagsR.bottom() + 1 + ExPaddingGapL + ExVPaddingGapXl);
-    QTC_CHECK(option.rect.width() == tagsR.right() + 1 + ExPaddingGapL + ExVPaddingGapXl);
+                          + (tagsLabelR.height() + PaddingVXxs) * (tagsRowsCount - 1));
+    QTC_CHECK(option.rect.height() == tagsR.bottom() + 1 + GapVL + PaddingVXxl);
+    QTC_CHECK(option.rect.width() == tagsR.right() + 1 + GapHL + PaddingHXxl);
 
     QTextOption wrapTO;
     wrapTO.setWrapMode(QTextOption::WordWrap);
@@ -604,11 +604,11 @@ void ListItemDelegate::paint(QPainter *painter, const QStyleOptionViewItem &opti
         painter->setOpacity(animationProgress); // "fade in" separator line and description
 
         // The separator line below the example title.
-        const QRect hrR(titleR.x(), titleR.bottom() + 1 + ExPaddingGapS, thumbnailAreaR.width(), 1);
+        const QRect hrR(titleR.x(), titleR.bottom() + 1 + GapVXxs, thumbnailAreaR.width(), 1);
         painter->fillRect(hrR, themeColor(Theme::Token_Stroke_Muted));
 
         // The description text.
-        const QRect descriptionR(hrR.x(), hrR.bottom() + 1 + ExPaddingGapS,
+        const QRect descriptionR(hrR.x(), hrR.bottom() + 1 + GapVXxs,
                                  thumbnailAreaR.width(), shiftY);
         painter->setPen(descriptionTF.color());
         painter->setFont(descriptionTF.font());
@@ -846,8 +846,8 @@ ListModel *SectionedGridView::addSection(const Section &section, const QList<Lis
         createTitleLabel(section.name),
         st,
         seeAllLink,
-        Space(ExVPaddingGapXl),
-        customMargins(0, ExPaddingGapM, 0, ExPaddingGapM),
+        Space(GapHXxl),
+        customMargins(0, PaddingVS, 0, PaddingVS),
     }.emerge();
     m_sectionLabels.append(sectionLabel);
     auto scrollArea = qobject_cast<QScrollArea *>(widget(0));
@@ -917,8 +917,8 @@ void SectionedGridView::zoomInSection(const Section &section)
         createTitleLabel(section.name),
         st,
         backLink,
-        Space(ExVPaddingGapXl),
-        customMargins(0, ExPaddingGapM, 0, ExPaddingGapM),
+        Space(GapHXxl),
+        customMargins(0, PaddingVS, 0, PaddingVS),
     }.emerge();
 
     auto gridView = new GridView(zoomedInWidget);
diff --git a/src/plugins/extensionmanager/extensionmanagersettings.cpp b/src/plugins/extensionmanager/extensionmanagersettings.cpp
index d1e55cbc090..e0c2b591b73 100644
--- a/src/plugins/extensionmanager/extensionmanagersettings.cpp
+++ b/src/plugins/extensionmanager/extensionmanagersettings.cpp
@@ -83,7 +83,7 @@ ExtensionManagerSettings::ExtensionManagerSettings()
                 st,
             },
             st,
-            spacing(Utils::StyleHelper::SpacingTokens::ExVPaddingGapXl),
+            spacing(Utils::StyleHelper::SpacingTokens::GapVXxl),
         };
     });
     // clang-format on
diff --git a/src/plugins/extensionmanager/extensionmanagerwidget.cpp b/src/plugins/extensionmanager/extensionmanagerwidget.cpp
index 797d1d4fa33..7f0c1a1bbb7 100644
--- a/src/plugins/extensionmanager/extensionmanagerwidget.cpp
+++ b/src/plugins/extensionmanager/extensionmanagerwidget.cpp
@@ -85,8 +85,8 @@ static QLabel *sectionTitle(const TextFormat &tf, const QString &title)
 
 static QWidget *toScrollableColumn(QWidget *widget)
 {
-    widget->setContentsMargins(SpacingTokens::ExVPaddingGapXl, SpacingTokens::ExVPaddingGapXl,
-                               SpacingTokens::ExVPaddingGapXl, SpacingTokens::ExVPaddingGapXl);
+    widget->setContentsMargins(SpacingTokens::PaddingHXxl, SpacingTokens::PaddingVXxl,
+                               SpacingTokens::PaddingHXxl, SpacingTokens::PaddingVXxl);
     widget->setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Minimum);
 
     auto scrollArea = new QScrollArea;
@@ -285,11 +285,11 @@ public:
                     Widget {
                         bindTo(&m_dlCountItems),
                         Row {
-                            Space(SpacingTokens::HGapXs),
+                            Space(SpacingTokens::GapHM),
                             m_divider,
-                            Space(SpacingTokens::HGapXs),
+                            Space(SpacingTokens::GapHM),
                             m_dlIcon,
-                            Space(SpacingTokens::HGapXxs),
+                            Space(SpacingTokens::GapHXs),
                             m_dlCount,
                             noMargin, spacing(0),
                         },
@@ -306,7 +306,7 @@ public:
                 m_versionSelector,
                 st,
             },
-            noMargin, spacing(SpacingTokens::ExPaddingGapL),
+            noMargin, spacing(SpacingTokens::GapHL),
         }.attachTo(this);
         // clang-format on
 
@@ -526,7 +526,7 @@ public:
             // clang-format off
             Flow {
                 noMargin,
-                spacing(SpacingTokens::HGapXs),
+                spacing(SpacingTokens::GapHM),
                 Utils::transform(tags, tagToButton)
             }.attachTo(this);
             // clang-format on
@@ -594,7 +594,7 @@ static QWidget *descriptionPlaceHolder()
             WelcomePageHelpers::createRule(Qt::Horizontal),
             text,
             Stretch(3),
-            spacing(SpacingTokens::ExPaddingGapL),
+            spacing(SpacingTokens::GapVL),
         },
         st,
         noMargin,
@@ -618,7 +618,7 @@ ExtensionManagerWidget::ExtensionManagerWidget()
     QPalette browserPal = m_description->palette();
     browserPal.setColor(QPalette::Base, creatorColor(Theme::Token_Background_Default));
     m_description->setPalette(browserPal);
-    const int verticalPadding = SpacingTokens::ExVPaddingGapXl - SpacingTokens::VPaddingM;
+    const int verticalPadding = SpacingTokens::PaddingVXxl - SpacingTokens::PaddingVXl;
     m_description->setMargins({verticalPadding, 0, verticalPadding, 0});
     m_description->setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Preferred);
 
@@ -664,15 +664,14 @@ ExtensionManagerWidget::ExtensionManagerWidget()
     auto detailsSplitter = new MiniSplitter;
 
     using namespace Layouting;
-    const auto spL = spacing(SpacingTokens::VPaddingL);
-    const auto spXxs = spacing(SpacingTokens::VPaddingXxs);
+    const auto spXxs = spacing(SpacingTokens::GapVXs);
     // clang-format off
     Column {
         Row {
             m_headingWidget,
             m_pluginStatus,
-            customMargins(SpacingTokens::ExVPaddingGapXl, SpacingTokens::ExVPaddingGapXl,
-                          SpacingTokens::ExVPaddingGapXl, SpacingTokens::ExVPaddingGapXl),
+            customMargins(SpacingTokens::PaddingHXxl, SpacingTokens::PaddingVXxl,
+                          SpacingTokens::PaddingHXxl, SpacingTokens::PaddingVXxl),
         },
         m_description,
         noMargin, spacing(0),
@@ -686,16 +685,16 @@ ExtensionManagerWidget::ExtensionManagerWidget()
             Column { m_platformsTitle, m_platforms, spXxs },
             Column { m_dependenciesTitle, m_dependencies, spXxs },
             Column { m_packExtensionsTitle, m_packExtensions, spXxs },
-            spacing(SpacingTokens::VPaddingL),
+            spacing(SpacingTokens::GapVXl),
         },
         st,
-        noMargin, spacing(SpacingTokens::ExVPaddingGapXl),
+        noMargin, spacing(SpacingTokens::GapVXxl),
     }.attachTo(secondaryDetails);
 
     Column {
         new StyledBar,
         Row {
-            Space(SpacingTokens::ExVPaddingGapXl),
+            Space(SpacingTokens::GapHXxl),
             m_extensionBrowser,
             WelcomePageHelpers::createRule(Qt::Vertical),
             Stack {
@@ -788,7 +787,7 @@ void ExtensionManagerWidget::updateView(const QModelIndex &current)
 
     const QString description = current.data(RoleDescriptionLong).toString();
     m_description->setMarkdown(description);
-    m_description->document()->setDocumentMargin(SpacingTokens::VPaddingM);
+    m_description->document()->setDocumentMargin(SpacingTokens::PaddingVXl);
 
     auto idToDisplayName = [this](const QString &id) {
         const QModelIndex dependencyIndex = m_extensionModel->indexOfId(id);
diff --git a/src/plugins/extensionmanager/extensionsbrowser.cpp b/src/plugins/extensionmanager/extensionsbrowser.cpp
index 1d103cfa412..c3dd7921ce1 100644
--- a/src/plugins/extensionmanager/extensionsbrowser.cpp
+++ b/src/plugins/extensionmanager/extensionsbrowser.cpp
@@ -64,7 +64,7 @@ namespace ExtensionManager::Internal {
 
 Q_LOGGING_CATEGORY(browserLog, "qtc.extensionmanager.browser", QtWarningMsg)
 
-constexpr int gapSize = HGapL;
+constexpr int gapSize = GapHXl;
 constexpr int itemWidth = 330;
 constexpr int cellWidth = itemWidth + gapSize;
 
@@ -84,22 +84,22 @@ public:
 protected:
     void paintEvent([[maybe_unused]] QPaintEvent *event) override
     {
-        // +------------+------+---------+---------------+------------+
-        // |            |      |         |  (VPaddingXs) |            |
-        // |            |      |         +---------------+            |
-        // |(HPaddingXs)|(icon)|(HGapXxs)|<template%item>|(HPaddingXs)|
-        // |            |      |         +---------------+            |
-        // |            |      |         |  (VPaddingXs) |            |
-        // +------------+------+---------+---------------+------------+
+        // +-----------+------+--------+---------------+-----------+
+        // |           |      |        |  (PaddingVM)  |           |
+        // |           |      |        +---------------+           |
+        // |(PaddingHM)|(icon)|(GapHXs)|<template%item>|(PaddingHM)|
+        // |           |      |        +---------------+           |
+        // |           |      |        |  (PaddingVM)  |           |
+        // +-----------+------+--------+---------------+-----------+
 
         const bool active = currentIndex() > 0;
         const bool hover = underMouse();
         const TextFormat &tF = (active || hover) ? m_itemActiveTf : m_itemDefaultTf;
 
-        const QRect iconRect(HPaddingXs, 0, m_iconSize.width(), height());
-        const int textX = iconRect.right() + 1 + HGapXxs;
-        const QRect textRect(textX, VPaddingXs,
-                             width() - HPaddingXs - textX, tF.lineHeight());
+        const QRect iconRect(PaddingHM, 0, m_iconSize.width(), height());
+        const int textX = iconRect.right() + 1 + GapHXs;
+        const QRect textRect(textX, PaddingVM,
+                             width() - PaddingHM - textX, tF.lineHeight());
 
         QPainter p(this);
         (active ? m_iconActive : m_iconDefault).paint(&p, iconRect);
@@ -107,7 +107,7 @@ protected:
         p.setFont(tF.font());
         const QString elidedText = p.fontMetrics().elidedText(currentFormattedText(),
                                                               Qt::ElideRight,
-                                                              textRect.width() + HPaddingXs);
+                                                              textRect.width() + PaddingHM);
         p.drawText(textRect, tF.drawTextFlags, elidedText);
     }
 
@@ -129,15 +129,15 @@ private:
         const QFontMetrics fm(m_itemDefaultTf.font());
         const int textWidth = fm.horizontalAdvance(currentFormattedText());
         const int width =
-            HPaddingXs
+            PaddingHM
             + m_iconSize.width()
-            + HGapXxs
+            + GapHXs
             + textWidth
-            + HPaddingXs;
+            + PaddingHM;
         const int height =
-            VPaddingXs
+            PaddingVM
             + m_itemDefaultTf.lineHeight()
-            + VPaddingXs;
+            + PaddingVM;
         return {width, height};
     }
 
@@ -195,23 +195,23 @@ public:
     ExtensionItemWidget(QWidget *parent = nullptr)
         : QWidget(parent)
     {
-        // +---------------+-------+---------------+-----------------------------------------------------------------------------------+---------------+---------+
-        // |               |       |               |                                  (ExPaddingGapL)                                  |               |         |
-        // |               |       |               +----------+---------+---------------+---------+--------------+---------+-----------+               |         |
-        // |               |       |               |<itemName>|(HGapXxs)|<releaseStatus>|(HGapXxs)|<installState>|(HGapXxs)|<checkmark>|               |         |
-        // |               |       |               +----------+---------+---------------+---------+--------------+---------+-----------+               |         |
-        // |               |       |               |                                     (VGapXxs)                                     |               |         |
-        // |               |       |               +---------------------+--------+--------------+--------+--------+---------+---------+               |         |
-        // |(ExPaddingGapL)|<icon> |(ExPaddingGapL)|       <vendor>      |(HGapXs)|<divider>(h16)|(HGapXs)|<dlIcon>|(HGapXxs)|<dlCount>|(ExPaddingGapL)|(gapSize)|
-        // |               |(50x50)|               +---------------------+--------+--------------+--------+--------+---------+---------+               |         |
-        // |               |       |               |                                     (VGapXxs)                                     |               |         |
-        // |               |       |               +-----------------------------------------------------------------------------------+               |         |
-        // |               |       |               |                                 <shortDescription>                                |               |         |
-        // |               |       |               +-----------------------------------------------------------------------------------+               |         |
-        // |               |       |               |                                  (ExPaddingGapL)                                  |               |         |
-        // +---------------+-------+---------------+-----------------------------------------------------------------------------------+---------------+---------+
-        // |                                                                      (gapSize)                                                                      |
-        // +-----------------------------------------------------------------------------------------------------------------------------------------------------+
+        // +-----------+-------+-------+--------------------------------------------------------------------------------+-----------+---------+
+        // |           |       |       |                                   (PaddingVL)                                  |           |         |
+        // |           |       |       +----------+--------+---------------+--------+--------------+--------+-----------+           |         |
+        // |           |       |       |<itemName>|(GapHXs)|<releaseStatus>|(GapHXs)|<installState>|(GapHXs)|<checkmark>|           |         |
+        // |           |       |       +----------+--------+---------------+--------+--------------+--------+-----------+           |         |
+        // |           |       |       |                                    (GapVXs)                                    |           |         |
+        // |           |       |       +---------------------+-------+--------------+-------+--------+--------+---------+           |         |
+        // |(PaddingHL)|<icon> |(GapHL)|       <vendor>      |(GapHM)|<divider>(h16)|(GapHM)|<dlIcon>|(GapHXs)|<dlCount>|(PaddingHL)|(gapSize)|
+        // |           |(50x50)|       +---------------------+-------+--------------+-------+--------+--------+---------+           |         |
+        // |           |       |       |                                    (GapVXs)                                    |           |         |
+        // |           |       |       +--------------------------------------------------------------------------------+           |         |
+        // |           |       |       |                               <shortDescription>                               |           |         |
+        // |           |       |       +--------------------------------------------------------------------------------+           |         |
+        // |           |       |       |                                   (PaddingVL)                                  |           |         |
+        // +-----------+-------+-------+--------------------------------------------------------------------------------+-----------+---------+
+        // |                                                             (gapSize)                                                            |
+        // +----------------------------------------------------------------------------------------------------------------------------------+
 
         m_iconLabel = new QLabel;
         m_iconLabel->setSizePolicy(QSizePolicy::Maximum, QSizePolicy::Maximum);
@@ -249,11 +249,11 @@ public:
                         Row {
                             m_installStateLabel,
                             m_installStateIcon,
-                            spacing(HGapXxs),
+                            spacing(GapHXs),
                             noMargin,
                         },
                     },
-                    spacing(HGapXxs),
+                    spacing(GapHXs),
                 },
                 Row {
                     m_vendorLabel,
@@ -261,21 +261,21 @@ public:
                         bindTo(&m_downloads),
                         Row {
                             m_downloadDividerLabel,
-                            Space(HGapXs),
+                            Space(GapHM),
                             m_downloadIconLabel,
-                            Space(HGapXxs),
+                            Space(GapHXs),
                             m_downloadCountLabel,
                             tight,
                         },
                     },
-                    spacing(HGapXs),
+                    spacing(GapHM),
                 },
                 m_shortDescriptionLabel,
                 noMargin,
-                spacing(VGapXxs),
+                spacing(GapVXs),
             },
-            customMargins(ExPaddingGapL, ExPaddingGapL, ExPaddingGapL, ExPaddingGapL),
-            spacing(ExPaddingGapL),
+            customMargins(PaddingHL, PaddingVL, PaddingHL, PaddingVL),
+            spacing(GapHL),
         }.attachTo(this);
 
         setFixedWidth(itemWidth);
@@ -523,7 +523,7 @@ static QWidget *extensionViewPlaceHolder()
     using namespace Layouting;
     // clang-format off
     return Column {
-        Space(SpacingTokens::ExVPaddingGapXl),
+        Space(SpacingTokens::PaddingVXxl),
         text,
         st,
         noMargin,
@@ -595,14 +595,14 @@ ExtensionsBrowser::ExtensionsBrowser(ExtensionsModel *model, QWidget *parent)
         Row {
             titleLabel,
             settingsToolButton,
-            customMargins(0, VPaddingM, rightMargin, 0),
+            customMargins(0, PaddingVXl, rightMargin, 0),
         },
         Row {
             Column {
                 Row{ st, externalRepoSwitch },
                 d->searchBox,
             },
-            customMargins(0, VPaddingM, rightMargin, VPaddingM),
+            customMargins(0, PaddingVXl, rightMargin, PaddingVXl),
         },
         Row {
             d->filterChooser,
@@ -702,7 +702,7 @@ QSize ExtensionsBrowser::sizeHint() const
 int ExtensionsBrowser::extraListViewWidth() const
 {
     // TODO: Investigate "transient" scrollbar, just for this list view.
-    constexpr int extraPadding = qMax(0, ExVPaddingGapXl - gapSize);
+    constexpr int extraPadding = qMax(0, PaddingHXxl - gapSize);
     return d->extensionsView->style()->pixelMetric(QStyle::PM_ScrollBarExtent)
            + extraPadding
            + 1; // Needed
@@ -934,8 +934,8 @@ QPixmap itemBadge(const QModelIndex &index, [[maybe_unused]] Size size)
 
     const QFont font = badgeTF.font();
     const int textWidth = QFontMetrics(font).horizontalAdvance(badgeText);
-    const QSize badgeS(ExPaddingGapM + textWidth + ExPaddingGapM,
-                       ExPaddingGapS + badgeTF.lineHeight() + ExPaddingGapS);
+    const QSize badgeS(PaddingHS + textWidth + PaddingHS,
+                       PaddingVXxs + badgeTF.lineHeight() + PaddingVXxs);
     const QRect badgeR(QPoint(), badgeS);
     const qreal dpr = qApp->devicePixelRatio();
     QPixmap pixmap(badgeS * dpr);
diff --git a/src/plugins/learning/qtacademywelcomepage.cpp b/src/plugins/learning/qtacademywelcomepage.cpp
index 1752af9dfcd..dfc34552e5a 100644
--- a/src/plugins/learning/qtacademywelcomepage.cpp
+++ b/src/plugins/learning/qtacademywelcomepage.cpp
@@ -498,7 +498,7 @@ public:
         Column {
             Row {
                 m_searcher,
-                customMargins(0, 0, ExVPaddingGapXl, 0),
+                customMargins(0, 0, PaddingVXxl, 0),
             },
             Grid {
                 GridCell({
@@ -507,8 +507,8 @@ public:
                     Align(Qt::AlignCenter, detailWdgt),
                 }),
             },
-            spacing(ExVPaddingGapXl),
-            customMargins(ExVPaddingGapXl, ExVPaddingGapXl, 0, 0),
+            spacing(GapVXxl),
+            customMargins(PaddingHXxl, PaddingVXxl, 0, 0),
         }.attachTo(this);
         // clang-format on
 
diff --git a/src/plugins/lua/bindings/fetch.cpp b/src/plugins/lua/bindings/fetch.cpp
index a887ca25a8e..8dab3d94ca5 100644
--- a/src/plugins/lua/bindings/fetch.cpp
+++ b/src/plugins/lua/bindings/fetch.cpp
@@ -233,7 +233,7 @@ void setupFetchModule()
                     QLabel *list = new QLabel();
                     list->setTextFormat(Qt::TextFormat::MarkdownText);
                     list->setText(markdown);
-                    list->setMargin(StyleHelper::SpacingTokens::ExPaddingGapS);
+                    list->setMargin(StyleHelper::SpacingTokens::PaddingVXxs);
                     return list;
                 });
                 entry.addCustomButton(
diff --git a/src/plugins/lua/bindings/install.cpp b/src/plugins/lua/bindings/install.cpp
index d4d18cf3bf1..52c4205e238 100644
--- a/src/plugins/lua/bindings/install.cpp
+++ b/src/plugins/lua/bindings/install.cpp
@@ -398,7 +398,7 @@ void setupInstallModule()
                         QLabel *list = new QLabel();
                         list->setTextFormat(Qt::TextFormat::MarkdownText);
                         list->setText(details);
-                        list->setMargin(StyleHelper::SpacingTokens::ExPaddingGapS);
+                        list->setMargin(StyleHelper::SpacingTokens::PaddingVXxs);
                         return list;
                     });
                     ICore::infoBar()->addInfo(entry);
diff --git a/src/plugins/projectexplorer/projectwelcomepage.cpp b/src/plugins/projectexplorer/projectwelcomepage.cpp
index 5a65944efdf..185fe14d9df 100644
--- a/src/plugins/projectexplorer/projectwelcomepage.cpp
+++ b/src/plugins/projectexplorer/projectwelcomepage.cpp
@@ -63,8 +63,8 @@ constexpr TextFormat shortcutNumberTF {Theme::Token_Text_Default,
                                       StyleHelper::UiElementCaptionStrong,
                                       Qt::AlignCenter | Qt::TextDontClip};
 constexpr int shortcutNumberWidth = 6;
-constexpr int sessionScrollBarGap = HPaddingXs;
-const int itemSpacing = VGapL;
+constexpr int sessionScrollBarGap = PaddingHM;
+const int itemSpacing = GapVM;
 
 static FilePaths pathsForSession(const QString &session, QString *title = nullptr)
 {
@@ -313,7 +313,7 @@ public:
     {
         m_shortcut = new QLabel;
         applyTf(m_shortcut, shortcutNumberTF, false);
-        const int shortcutWidth = HPaddingXs + shortcutNumberWidth + HGapXs;
+        const int shortcutWidth = PaddingHM + shortcutNumberWidth + GapHM;
         m_shortcut->setMinimumWidth(shortcutWidth);
 
         static const QPixmap icon = pixmap("session", Theme::Token_Text_Muted);
@@ -328,8 +328,8 @@ public:
         m_sessionNameLabel->setSizePolicy(QSizePolicy::MinimumExpanding, QSizePolicy::Preferred);
         m_sessionNameLabel->setTextInteractionFlags(Qt::NoTextInteraction);
 
-        const int collapsedHeight = VPaddingXs + std::max(16, sessionNameTF.lineHeight())
-                                    + VPaddingXs;
+        const int collapsedHeight = PaddingVM + std::max(16, sessionNameTF.lineHeight())
+                                    + PaddingVM;
         m_shortcut->setMinimumHeight(collapsedHeight);
         iconLabel->setMinimumHeight(collapsedHeight);
 
@@ -338,7 +338,7 @@ public:
 
         m_sessionType = new ElidingLabel;
         applyTf(m_sessionType, sessionTypeTF);
-        m_sessionType->setFixedHeight(m_sessionType->height() + VGapXs);
+        m_sessionType->setFixedHeight(m_sessionType->height() + GapVXs);
         m_sessionType->setSizePolicy(m_sessionNameLabel->sizePolicy());
         m_sessionType->setTextInteractionFlags(Qt::NoTextInteraction);
 
@@ -353,15 +353,15 @@ public:
 
         auto space = [] {
             auto sp = new QWidget;
-            sp->setFixedSize(HGapXs, VGapXs);
+            sp->setFixedSize(GapHM, GapVXs);
             return sp;
         };
 
         using namespace Layouting;
         Column paths {
             m_sessionType,
-            spacing(ExPaddingGapS),
-            customMargins(0, 0, HPaddingXs, 0),
+            spacing(GapVXxs),
+            customMargins(0, 0, PaddingHM, 0),
         };
         for (int i = 0; i < kMaxPathsDisplay + 1; ++i) {
             auto pathLine = new ElidingLabel;
@@ -387,10 +387,10 @@ public:
                     createRule(Qt::Vertical),
                     m_delete,
                     st,
-                    spacing(ExPaddingGapM),
+                    spacing(GapHS),
                     noMargin,
                 },
-                customMargins(0, VPaddingXs, 0, VPaddingXs),
+                customMargins(0, PaddingVM, 0, PaddingVM),
             },
             customMargins(0, 0, sessionScrollBarGap, itemSpacing),
             spacing(0),
@@ -542,7 +542,7 @@ public:
     {
         m_shortcut = new QLabel;
         applyTf(m_shortcut, shortcutNumberTF, false);
-        const int shortcutWidth = HPaddingXs + shortcutNumberWidth + HGapXs;
+        const int shortcutWidth = PaddingHM + shortcutNumberWidth + GapHM;
         m_shortcut->setMinimumWidth(shortcutWidth);
 
         const QPixmap icon = pixmap("project", Theme::Token_Text_Muted);
@@ -564,14 +564,14 @@ public:
         Row {
             m_shortcut,
             iconLabel,
-            Space(HGapXs),
+            Space(GapHM),
             Column {
                 m_projectName,
                 m_projectPath,
-                customMargins(0, VPaddingXs, 0, VPaddingXs),
-                spacing(VGapXs),
+                customMargins(0, PaddingVM, 0, PaddingVM),
+                spacing(GapVXs),
             },
-            customMargins(0, 0, HPaddingXs, 0),
+            customMargins(0, 0, PaddingHM, 0),
             spacing(0),
         }.attachTo(this);
 
@@ -599,7 +599,7 @@ public:
         const bool hovered = option.widget->isActiveWindow()
                              && option.state & QStyle::State_MouseOver;
 
-        const QRect bgRGlobal = option.rect.adjusted(0, 0, -HPaddingXs, -itemSpacing);
+        const QRect bgRGlobal = option.rect.adjusted(0, 0, -PaddingHM, -itemSpacing);
         const QRect bgR = bgRGlobal.translated(-option.rect.topLeft());
 
         QFont projectNameFont = m_projectName->font();
@@ -744,11 +744,11 @@ public:
                     sessionsLabel,
                     st,
                     manageSessionsButton,
-                    customMargins(HPaddingS, 0, sessionScrollBarGap, 0),
+                    customMargins(PaddingHXl, 0, sessionScrollBarGap, 0),
                 },
                 m_sessionList,
-                spacing(ExPaddingGapL),
-                customMargins(ExVPaddingGapXl, ExVPaddingGapXl, 0, 0),
+                spacing(GapVL),
+                customMargins(PaddingHXxl, PaddingVXxl, 0, 0),
             }.attachTo(sessions);
             connect(manageSessionsButton, &QtcButton::clicked,
                     this, &SessionManager::showSessionManager);
@@ -770,11 +770,11 @@ public:
             Column {
                 Row {
                     projectsLabel,
-                    customMargins(HPaddingS, 0, 0, 0),
+                    customMargins(PaddingHXl, 0, 0, 0),
                 },
                 projectsList,
-                spacing(ExPaddingGapL),
-                customMargins(ExVPaddingGapXl - sessionScrollBarGap, ExVPaddingGapXl, 0, 0),
+                spacing(GapVL),
+                customMargins(PaddingHXxl - sessionScrollBarGap, PaddingVXxl, 0, 0),
             }.attachTo(projects);
         }
 
diff --git a/src/plugins/qtsupport/gettingstartedwelcomepage.cpp b/src/plugins/qtsupport/gettingstartedwelcomepage.cpp
index e58635a38c5..fdf1d5caa23 100644
--- a/src/plugins/qtsupport/gettingstartedwelcomepage.cpp
+++ b/src/plugins/qtsupport/gettingstartedwelcomepage.cpp
@@ -252,7 +252,7 @@ protected:
             painter->setCompositionMode(QPainter::CompositionMode_Difference);
             painter->setPen(Qt::white);
             painter->drawText(
-                currentPixmapRect.translated(0, -StyleHelper::SpacingTokens::VPaddingXxs),
+                currentPixmapRect.translated(0, -StyleHelper::SpacingTokens::PaddingVXs),
                 exampleItem->videoLength, Qt::AlignBottom | Qt::AlignHCenter);
             painter->restore();
             static const QPixmap playOverlay =
@@ -280,8 +280,8 @@ public:
         using namespace StyleHelper::SpacingTokens;
         using namespace Layouting;
         Row titleRow {
-            customMargins(0, 0, ExVPaddingGapXl, 0),
-            spacing(ExVPaddingGapXl),
+            customMargins(0, 0, PaddingHXxl, 0),
+            spacing(GapHXxl),
         };
 
         m_searcher = new QtcSearchBox;
@@ -291,7 +291,7 @@ public:
             auto exampleSetSelector = new QtcComboBox;
             exampleSetSelector->setSizeAdjustPolicy(QComboBox::AdjustToContents);
             exampleSetSelector->setMinimumWidth(ListItemDelegate::itemSize().width()
-                                                - ExVPaddingGapXl);
+                                                - PaddingVXxl);
             exampleSetSelector->setModel(s_exampleSetModel);
             exampleSetSelector->setCurrentIndex(s_exampleSetModel->selectedExampleSet());
             titleRow.addItem(exampleSetSelector);
@@ -317,8 +317,8 @@ public:
         Column {
             titleRow,
             gridView,
-            spacing(ExVPaddingGapXl),
-            customMargins(ExVPaddingGapXl, ExVPaddingGapXl, 0, 0),
+            spacing(GapVXxl),
+            customMargins(PaddingHXxl, PaddingVXxl, 0, 0),
         }.attachTo(this);
 
         connect(&m_exampleDelegate, &ExampleDelegate::tagClicked,
diff --git a/src/plugins/welcome/welcomeplugin.cpp b/src/plugins/welcome/welcomeplugin.cpp
index 528bd22d12b..ff8eafa6e35 100644
--- a/src/plugins/welcome/welcomeplugin.cpp
+++ b/src/plugins/welcome/welcomeplugin.cpp
@@ -63,7 +63,7 @@ public:
         setSizePolicy(QSizePolicy::Minimum, QSizePolicy::Fixed);
 
         m_pluginButtons = new QHBoxLayout;
-        m_pluginButtons->setSpacing(VGapL);
+        m_pluginButtons->setSpacing(GapVM);
         m_pluginButtons->setContentsMargins({});
 
         auto newButton = new QtcButton(Tr::tr("Create Project..."), QtcButton::LargePrimary);
@@ -76,8 +76,8 @@ public:
                 st,
                 newButton,
                 openButton,
-                spacing(HGapM),
-                customMargins(HPaddingM, VPaddingM, HPaddingM, VPaddingM),
+                spacing(GapHXl),
+                customMargins(PaddingHXxl, PaddingVXl, PaddingHXxl, PaddingVXl),
             },
             createRule(Qt::Horizontal),
             noMargin, spacing(0),