feedc0de/qt-creator
1
0
Fork 0
forked from qt-creator/qt-creator
Code Pull Requests Activity

Welcome: Restore legibility

Browse Source 
After the release of Qt Creator 13.0.0, a couple of bug reports and
comments regarding reduced legibility appeared.

They boil down to:

 1) Text appears blurry
 2) Text is too small
 3) Text contrast is too low

This change fixes the blurryness by setting less custom font weights for
non-HighDpi systems in StyleHelper::uiFont().

Bigger texts are used for the "Session" and "Recent Project" delegates.

The text contrast is being increased by making Token_Text_Accent darker
for light themes and brighter for dark themes.
Token_Background_Muted, which is used as background color is made a bit
brighter for light themes.

Fixes: QTCREATORBUG-30579
Fixes: QTCREATORBUG-30637
Fixes: QTCREATORBUG-30650
Change-Id: I8eeb9db6854a19b0de0bcee14b10e2ef66234e06
Reviewed-by: André Hartmann <aha_1980@gmx.de>
Reviewed-by: hjk <hjk@qt.io>
This commit is contained in:
Alessandro Portale
2024-04-11 17:11:56 +02:00
parent d3fb3a163c
commit a0b19d9fba
4 changed files with 75 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
share/qtcreator/themes/dark.figmatokens
View File

@@ -20,7 +20,13 @@ Token_Foreground_Subtle=ff2A2A2A
Token_Text_Default=ffF8F8F8
Token_Text_Muted=ffAEAEAE
Token_Text_Subtle=ff595959
Token_Text_Accent=ff23B26A
; Token_Text_Accent value from Figma is still too dark. Therefore, it is modified, here.
; Text (consisting of thin lines) needs to be substantially brighter than accent colors used for
; larger-area elements like the filled button.
; Token_Text_Accent=ff23B26A
Token_Text_Accent=ff30C06A
Token_Stroke_Strong=ffeeeeee
Token_Stroke_Muted=ff727272

9
share/qtcreator/themes/light.figmatokens
View File

@@ -10,7 +10,12 @@ Token_Accent_Muted=ff1f9b5d
Token_Accent_Subtle=ff1a8550
Token_Background_Default=fffcfcfc
Token_Background_Muted=ffF2F2F2
; Token_Background_Muted value from Figma is too dark to ensure proper contrast when used as
; text bachground. Therefore, it is modified, here.
;Token_Background_Muted=ffF2F2F2
Token_Background_Muted=ffF6F6F6
Token_Background_Subtle=ffe7e7e7
Token_Foreground_Default=ffD8D8D8
@@ -20,7 +25,7 @@ Token_Foreground_Subtle=ffEFEFEF
Token_Text_Default=ff393939
Token_Text_Muted=ff6a6a6a
Token_Text_Subtle=ffbebebe
Token_Text_Accent=ff28C878
Token_Text_Accent=ff1F9B5D
Token_Stroke_Strong=ff464646
Token_Stroke_Muted=ff727272

6
src/libs/utils/stylehelper.cpp
View File

@@ -1010,6 +1010,12 @@ QFont StyleHelper::uiFont(UiElement element)
const qreal qrealPointSize = metrics.pixelSize * pixelsToPointSizeFactor;
font.setPointSizeF(qrealPointSize);
// Intermediate font weights can produce blurry rendering and are harder to read.
// For "non-retina" screens, apply the weight only for some fonts.
static const bool isHighDpi = qApp->devicePixelRatio() >= 2;
const bool setWeight = isHighDpi || element == UiElementCaptionStrong
|| element <= UiElementH4;
if (setWeight)
font.setWeight(metrics.weight);
return font;

47
src/plugins/projectexplorer/projectwelcomepage.cpp
View File

@@ -47,10 +47,9 @@ const char PROJECT_BASE_ID[] = "Welcome.OpenRecentProject";
namespace ProjectExplorer {
namespace Internal {
constexpr TextFormat projectNameTF {Theme::Token_Text_Accent, StyleHelper::UiElementH6};
constexpr TextFormat projectPathTF {Theme::Token_Text_Muted, StyleHelper::UiElementCaptionStrong};
constexpr TextFormat sessionNameTF = {projectNameTF.themeColor, projectNameTF.uiElement,
Qt::AlignVCenter | Qt::TextDontClip};
constexpr TextFormat projectNameTF {Theme::Token_Text_Accent, StyleHelper::UiElementH5};
constexpr TextFormat projectPathTF {Theme::Token_Text_Muted, StyleHelper::UiElementH6};
constexpr TextFormat sessionNameTF = projectNameTF;
constexpr TextFormat sessionProjectNameTF {Theme::Token_Text_Default, projectNameTF.uiElement};
constexpr TextFormat shortcutNumberTF {Theme::Token_Text_Default,
StyleHelper::UiElementCaptionStrong,
@@ -59,7 +58,7 @@ constexpr TextFormat actionTF {Theme::Token_Text_Default, StyleHelper::UiElement
Qt::AlignCenter | Qt::TextDontClip};
constexpr TextFormat actionDisabledTF {Theme::Token_Text_Subtle, actionTF.uiElement,
actionTF.drawTextFlags};
constexpr int shortcutNumberWidth = 16;
constexpr int shortcutNumberWidth = 6;
constexpr int actionSepWidth = 1;
constexpr int sessionScrollBarGap = HPaddingXs;
@@ -318,16 +317,16 @@ public:
{
// visible on withIcon() Gap + arrow visible on hover Extra margin right of project item
// | | |
// +-----------+----------+ +--------+-------+ +----------+----------+
// +----------+----------+ +--------+-------+ +----------+----------+
// | | | | | |
//
// +------------+--------+---------+------------+---------+-------------+--------+-------+------------+---------------------+ --+
// +------------+--------+--------+------------+--------+-------------+--------+-------+------------+---------------------+ --+
// | | | |(VPaddingXs)| |(VPaddingXs) | | | | | |
// | | | +------------+ +-------------+ | | | | |
// |(HPaddingXs)|<number>|(HGapXxs)| <icon> |(HGapXxs)|<sessionName>|(HGapXs)|<arrow>| | | +-- Header
// | |(16x16) | +------------+ +-------------+ | | | | |
// |(HPaddingXs)|<number>|(HGapXs)| <icon> |(HGapXs)|<sessionName>|(HGapXs)|<arrow>| | | +-- Header
// | |(w:6) | +------------+ +-------------+ | | | | |
// | | | |(VPaddingXs)| |(VPaddingXs) | | | | | |
// |------------+--------+---------+------------+---------+-------------+--------+-------+ | | --+
// |------------+--------+--------+------------+--------+-------------+--------+-------+ | | --+
// | +-- | (VPaddingXxs) | | | |
// | | +------------------------------+(HPaddingXs)| | |
// | | | <projectName> | | | |
@@ -337,15 +336,15 @@ public:
// | | | <projectPath> | | | |
// | | +------------------------------+ | | +-- Expansion
// | +-- | (VPaddingXxs) | | | |
// +------------------------------------------------------+------------------------------+------------+ | |
// +----------------------------------------------------+------------------------------+------------+ | |
// | (VPaddingXs) | | |
// +-----------------------------------------+--------------+-----------------------------------------+ | |
// +---------------------------------------+--------------+-----------------------------------------+ | |
// +-- | <cloneButton>|<renameButton>|<deleteButton> | | |
// | +-----------------------------------------+--------------+-----------------------------------------+ | |
// | +---------------------------------------+--------------+-----------------------------------------+ | |
// | | (VPaddingXs) | | |
// | +--------------------------------------------------------------------------------------------------+---------------------+ --+
// | +------------------------------------------------------------------------------------------------+---------------------+ --+
// | | (VGapL) | +-- Gap between session items
// | +------------------------------------------------------------------------------------------------------------------------+ --+
// | +----------------------------------------------------------------------------------------------------------------------+ --+
// |
// \ session action "buttons" and dividers
// +-----------------------------------------------+--------+---------+--------+
@@ -381,11 +380,11 @@ public:
const int y = bgR.y();
const int numberX = x + s(HPaddingXs);
const int iconX = numberX + shortcutNumberWidth + s(HGapXxs);
const int iconX = numberX + shortcutNumberWidth + s(HGapXs);
const int arrowX = bgR.right() - s(HPaddingXs) - arrowS.width();
const QRect arrowHoverR(arrowX - s(HGapXs) + 1, y,
s(HGapXs) + arrowS.width() + s(HPaddingXs), hdR.height());
const int textX = withIcon() ? iconX + iconS.width() + s(HGapXxs) : iconX;
const int textX = withIcon() ? iconX + iconS.width() + s(HGapXs) : iconX;
const int iconY = y + (hdR.height() - iconS.height()) / 2;
const int arrowY = y + (hdR.height() - arrowS.height()) / 2;
@@ -627,19 +626,19 @@ public:
// +--------+-------+ +------+-----+
// | | | |
//
// +------------+--------+---------+------+---------+-------------+------------+------------+
// +------------+--------+--------+------+---------+-------------+------------+------------+
// | | | | | | (VPaddingXs)| | |
// | | | | | +-------------+ | |
// | | | | | |<projectName>| | |
// | | | | | +-------------+ | |
// |(HPaddingXs)|<number>|(HGapXxs)|<icon>|(HGapXxs)| (VGapXs) |(HPaddingXs)|(HPaddingXs)|
// | |(16x16) | | | +-------------+ | |
// |(HPaddingXs)|<number>|(HGapXs)|<icon>|(HGapXxs)| (VGapXs) |(HPaddingXs)|(HPaddingXs)|
// | |(w:6) | | | +-------------+ | |
// | | | | | |<projectPath>| | |
// | | | | | +-------------+ | |
// | | | | | | (VPaddingXs)| | |
// +------------+--------+---------+------+---------+-------------+------------+------------+ --+
// +------------+--------+--------+------+---------+-------------+------------+------------+ --+
// | (VGapL) | +-- Gap between project items
// +----------------------------------------------------------------------------------------+ --+
// +---------------------------------------------------------------------------------------+ --+
const bool hovered = option.widget->isActiveWindow()
&& option.state & QStyle::State_MouseOver;
@@ -651,9 +650,9 @@ public:
const int x = bgR.x();
const int numberX = x + s(HPaddingXs);
const int iconX = numberX + shortcutNumberWidth + s(HGapXxs);
const int iconX = numberX + shortcutNumberWidth + s(HGapXs);
const int iconWidth = iconS.width();
const int textX = withIcon() ? iconX + iconWidth + s(HGapXxs) : iconX;
const int textX = withIcon() ? iconX + iconWidth + s(HGapXs) : iconX;
const int textWidth = bgR.width() - s(HPaddingXs) - textX;
const int y = bgR.y();