carrydela/qemby
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: unify visual language on Slate/Blue token scales

Browse Source 
- add tokens/ColorTokens.h (Slate/Blue/Red/Green scales, semantic roles,
  shared SearchTint ramp) and reference it from painted widgets
- dark: media-action-menu and modern-tray-menu moved from Gray/Zinc to Slate
- light: full Gray->Slate sweep, one-off tinted blues collapsed to
  Blue-50/Blue-100/Slate-50, Windows-blue links mapped to Blue-600/700
- radii off-scale values (10px/16px) converged to the 8/14 scale,
  font sizes 9/15/22/26px converged to the documented scale
- dark white overlays collapsed from 40+ alpha stops to a 6-step scale
  (player OSD keeps a separate high-alpha band, now decimal notation)
- librarycard/collectioncard palettes now read from ColorTokens (no visual change)
- searchhistorychip/searchcompleterpopup private blue palettes replaced by
  the shared SearchTint ramp so both render identical heat levels
- removed dead #playerControlBar/#playPauseBtn and webdav-visibility-toggle
  rules; close-button red unified on #DC2626/#EF4444
- palette header comments in both QSS files updated as the reference
This commit is contained in:
dela
2026-07-08 11:45:11 +08:00
parent ab1accc821
commit 3002adb7bf
7 changed files with 713 additions and 738 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/qEmbyApp/components/collectioncard.cpp
+20 -18
View File
@@ -1,6 +1,7 @@
#include "collectioncard.h"
#include "collectiongrid.h"
#include "../managers/thememanager.h"
#include "../tokens/ColorTokens.h"
#include "../utils/hoveranimator.h"
#include <QApplication>
@@ -123,28 +124,29 @@ void CollectionCard::paintEvent(QPaintEvent* event)
int w = width(), h = height();
QColor cardBg = isDark ? QColor(51, 65, 85, 140) : QColor(255, 255, 255, 245);
QColor border = isDark ? QColor(71, 85, 105, 100) : QColor(226, 232, 240);
QColor nameFg = isDark ? QColor("#F1F5F9") : QColor("#0F172A");
QColor typeFg = isDark ? QColor("#94A3B8") : QColor("#64748B");
const QColor accent("#3B82F6");
using namespace ColorTokens;
QColor cardBg = isDark ? withAlpha(Slate::k700, 140) : withAlpha(Qt::white, 245);
QColor border = isDark ? withAlpha(Slate::k600, 100) : Slate::k200;
QColor nameFg = isDark ? Slate::k100 : Slate::k900;
QColor typeFg = isDark ? Slate::k400 : Slate::k500;
const QColor accent = Blue::k500;
const qreal hp = m_hover->progress();
if (hp > 0.0 && !m_selected && !m_dragging) {
const QColor hoverBorder = isDark ? QColor(96, 165, 250, 190) : QColor(59, 130, 246, 190);
const QColor hoverBg = isDark ? QColor(51, 65, 85, 190) : QColor(255, 255, 255, 255);
const QColor hoverBorder = withAlpha(isDark ? Blue::k400 : Blue::k500, 190);
const QColor hoverBg = isDark ? withAlpha(Slate::k700, 190) : QColor(Qt::white);
border = lerpColor(border, hoverBorder, hp);
cardBg = lerpColor(cardBg, hoverBg, hp);
}
if (m_selected) {
cardBg = isDark ? QColor(30, 41, 59, 220) : QColor(239, 246, 255, 245);
border = isDark ? QColor(96, 165, 250, 220) : QColor(59, 130, 246, 220);
cardBg = isDark ? withAlpha(Slate::k800, 220) : withAlpha(Blue::k50, 245);
border = withAlpha(isDark ? Blue::k400 : Blue::k500, 220);
}
if (m_dragging) {
cardBg = isDark ? QColor(15, 23, 42, 235) : QColor(248, 250, 252, 252);
border = isDark ? QColor(59, 130, 246, 235) : QColor(37, 99, 235, 230);
cardBg = isDark ? withAlpha(Slate::k900, 235) : withAlpha(Slate::k50, 252);
border = isDark ? withAlpha(Blue::k500, 235) : withAlpha(Blue::k600, 230);
}
p.setPen(QPen(border, m_selected ? 2 : 1));
@@ -153,12 +155,12 @@ void CollectionCard::paintEvent(QPaintEvent* event)
const QRectF badgeRect(w - 28, 10, 18, 18);
p.setPen(QPen(m_selected ? accent
: (isDark ? QColor(100, 116, 139, 160)
: QColor(148, 163, 184, 180)),
: (isDark ? withAlpha(Slate::k500, 160)
: withAlpha(Slate::k400, 180)),
1.5));
p.setBrush(m_selected ? accent
: (isDark ? QColor(15, 23, 42, 180)
: QColor(255, 255, 255, 220)));
: (isDark ? withAlpha(Slate::k900, 180)
: withAlpha(Qt::white, 220)));
p.drawEllipse(badgeRect);
if (m_selected) {
@@ -180,8 +182,8 @@ void CollectionCard::paintEvent(QPaintEvent* event)
useSquareThumb ? imgSide : defaultImgAreaH);
QLinearGradient grad(imgRect.topLeft(), imgRect.bottomRight());
grad.setColorAt(0, isDark ? QColor(30, 41, 59) : QColor(241, 245, 249));
grad.setColorAt(1, isDark ? QColor(51, 65, 85) : QColor(226, 232, 240));
grad.setColorAt(0, isDark ? Slate::k800 : Slate::k100);
grad.setColorAt(1, isDark ? Slate::k700 : Slate::k200);
QPainterPath clipPath;
clipPath.addRoundedRect(imgRect, 9, 9);
@@ -207,7 +209,7 @@ void CollectionCard::paintEvent(QPaintEvent* event)
QFont iconFont = font();
iconFont.setPixelSize(32);
p.setFont(iconFont);
p.setPen(isDark ? QColor(148, 163, 184, 80) : QColor(100, 116, 139, 80));
p.setPen(withAlpha(isDark ? Slate::k400 : Slate::k500, 80));
QString placeholder = (m_type == "Playlist") ? QString::fromUtf8("🎵") : QString::fromUtf8("📂");
p.drawText(imgRect, Qt::AlignCenter, placeholder);
src/qEmbyApp/components/searchcompleterpopup.cpp
+13 -67
View File
@@ -1,6 +1,7 @@
#include "searchcompleterpopup.h"
#include "../managers/thememanager.h"
#include "../tokens/ColorTokens.h"
#include <QAbstractItemView>
#include <QApplication>
#include <QFontMetrics>
@@ -40,74 +41,19 @@ struct PopupItemPalette
PopupItemPalette popupItemPalette(bool darkMode, bool hovered, bool selected)
{
if (darkMode)
{
if (selected)
{
return {
QColor(QStringLiteral("#163356")),
QColor(QStringLiteral("#102B49")),
QColor(QStringLiteral("#3C73A7")),
QColor(QStringLiteral("#F8FAFC")),
QColor(QStringLiteral("#BFDBFE")),
QColor(QStringLiteral("#1D446C")),
QColor(QStringLiteral("#BFDBFE"))};
}
using namespace ColorTokens;
const int level = selected ? 3 : (hovered ? 2 : 0);
const SearchTint::Surface s = SearchTint::surface(level, darkMode);
if (hovered)
{
return {
QColor(QStringLiteral("#162234")),
QColor(QStringLiteral("#101B2C")),
QColor(QStringLiteral("#28486B")),
QColor(QStringLiteral("#E6EEF8")),
QColor(QStringLiteral("#93C5FD")),
QColor(QStringLiteral("#17314E")),
QColor(QStringLiteral("#93C5FD"))};
}
return {
QColor(QStringLiteral("#111B2B")),
QColor(QStringLiteral("#0D1726")),
QColor(QStringLiteral("#1D2B3D")),
QColor(QStringLiteral("#CBD5E1")),
QColor(QStringLiteral("#93C5FD")),
QColor(QStringLiteral("#162233")),
QColor(QStringLiteral("#7F93AA"))};
}
if (selected)
{
return {
QColor(QStringLiteral("#EAF2FF")),
QColor(QStringLiteral("#E2EEFF")),
QColor(QStringLiteral("#C6D9F6")),
QColor(QStringLiteral("#1E40AF")),
QColor(QStringLiteral("#1D4ED8")),
QColor(QStringLiteral("#DDE9FF")),
QColor(QStringLiteral("#1D4ED8"))};
}
if (hovered)
{
return {
QColor(QStringLiteral("#F6FAFF")),
QColor(QStringLiteral("#EEF5FF")),
QColor(QStringLiteral("#D8E5F7")),
QColor(QStringLiteral("#284675")),
QColor(QStringLiteral("#2563EB")),
QColor(QStringLiteral("#EAF2FF")),
QColor(QStringLiteral("#2563EB"))};
}
return {
QColor(QStringLiteral("#F8FBFE")),
QColor(QStringLiteral("#F3F7FA")),
QColor(QStringLiteral("#E4EBF3")),
QColor(QStringLiteral("#334155")),
QColor(QStringLiteral("#2563EB")),
QColor(QStringLiteral("#EFF4FA")),
QColor(QStringLiteral("#7A8CA3"))};
PopupItemPalette palette;
palette.backgroundTop = s.bgTop;
palette.backgroundBottom = s.bgBottom;
palette.border = s.border;
palette.text = s.text;
palette.textHighlight = darkMode ? Blue::k200 : Blue::k700;
palette.iconBubble = mix(s.bgTop, s.accent, darkMode ? 0.25 : 0.15);
palette.icon = s.accent;
return palette;
}
class SearchCompleterItemDelegate : public QStyledItemDelegate
src/qEmbyApp/components/searchhistorychip.cpp
+32 -107
View File
@@ -15,6 +15,7 @@
#include <QVariantAnimation>
#include <utility>
#include "../tokens/AnimationTokens.h"
#include "../tokens/ColorTokens.h"
namespace
{
@@ -105,116 +106,40 @@ QFont chipBadgeFont(const QWidget *widget)
return font;
}
int heatTintLevel(const QString &heatLevel)
{
if (heatLevel == QLatin1String("top"))
{
return 3;
}
if (heatLevel == QLatin1String("high"))
{
return 2;
}
if (heatLevel == QLatin1String("mid"))
{
return 1;
}
return 0;
}
ChipPalette basePalette(const QString &heatLevel, bool darkMode)
{
if (darkMode)
{
if (heatLevel == QLatin1String("top"))
{
return {
QColor(QStringLiteral("#23476D")),
QColor(QStringLiteral("#183B5F")),
QColor(QStringLiteral("#4F80B5")),
QColor(QStringLiteral("#F8FBFF")),
QColor(QStringLiteral("#315F93")),
QColor(QStringLiteral("#6499D1")),
QColor(QStringLiteral("#FFFFFF")),
QColor(QStringLiteral("#284F7B")),
QColor(QStringLiteral("#EAF3FF"))};
}
using namespace ColorTokens;
const SearchTint::Surface s =
SearchTint::surface(heatTintLevel(heatLevel), darkMode);
if (heatLevel == QLatin1String("high"))
{
return {
QColor(QStringLiteral("#1B3A59")),
QColor(QStringLiteral("#15314D")),
QColor(QStringLiteral("#3F71A4")),
QColor(QStringLiteral("#EAF3FF")),
QColor(QStringLiteral("#28527E")),
QColor(QStringLiteral("#5082B9")),
QColor(QStringLiteral("#F5FAFF")),
QColor(QStringLiteral("#24486F")),
QColor(QStringLiteral("#EAF3FF"))};
}
if (heatLevel == QLatin1String("mid"))
{
return {
QColor(QStringLiteral("#17304A")),
QColor(QStringLiteral("#122943")),
QColor(QStringLiteral("#355C84")),
QColor(QStringLiteral("#D6E7FF")),
QColor(QStringLiteral("#23486F")),
QColor(QStringLiteral("#4472A5")),
QColor(QStringLiteral("#E7F2FF")),
QColor(QStringLiteral("#203F61")),
QColor(QStringLiteral("#DDEBFF"))};
}
return {
QColor(QStringLiteral("#1B2535")),
QColor(QStringLiteral("#141E2D")),
QColor(QStringLiteral("#2F3D54")),
QColor(QStringLiteral("#D6E0EB")),
QColor(QStringLiteral("#253247")),
QColor(QStringLiteral("#43546C")),
QColor(QStringLiteral("#C8D4E2")),
QColor(QStringLiteral("#222F43")),
QColor(QStringLiteral("#CBD5E1"))};
}
if (heatLevel == QLatin1String("top"))
{
return {
QColor(QStringLiteral("#E2F0FF")),
QColor(QStringLiteral("#CFE2FF")),
QColor(QStringLiteral("#95B9F0")),
QColor(QStringLiteral("#173D8C")),
QColor(QStringLiteral("#CFE1FF")),
QColor(QStringLiteral("#95B9F0")),
QColor(QStringLiteral("#1D4ED8")),
QColor(QStringLiteral("#E9F2FF")),
QColor(QStringLiteral("#5A79B8"))};
}
if (heatLevel == QLatin1String("high"))
{
return {
QColor(QStringLiteral("#EDF5FF")),
QColor(QStringLiteral("#DDEBFF")),
QColor(QStringLiteral("#B9D2F8")),
QColor(QStringLiteral("#214AA5")),
QColor(QStringLiteral("#DDEBFF")),
QColor(QStringLiteral("#ABC8F6")),
QColor(QStringLiteral("#2563EB")),
QColor(QStringLiteral("#EEF4FC")),
QColor(QStringLiteral("#63758F"))};
}
if (heatLevel == QLatin1String("mid"))
{
return {
QColor(QStringLiteral("#F5F9FF")),
QColor(QStringLiteral("#E9F1FF")),
QColor(QStringLiteral("#CBDCF4")),
QColor(QStringLiteral("#2558BB")),
QColor(QStringLiteral("#EAF2FF")),
QColor(QStringLiteral("#C5D8F7")),
QColor(QStringLiteral("#2D69D1")),
QColor(QStringLiteral("#F2F6FB")),
QColor(QStringLiteral("#71839B"))};
}
return {
QColor(QStringLiteral("#FBFCFE")),
QColor(QStringLiteral("#F3F7FA")),
QColor(QStringLiteral("#DEE6EF")),
QColor(QStringLiteral("#334155")),
QColor(QStringLiteral("#FFFFFF")),
QColor(QStringLiteral("#D8E1EC")),
QColor(QStringLiteral("#64748B")),
QColor(QStringLiteral("#F3F6F9")),
QColor(QStringLiteral("#8090A4"))};
ChipPalette palette;
palette.backgroundTop = s.bgTop;
palette.backgroundBottom = s.bgBottom;
palette.border = s.border;
palette.text = s.text;
palette.badgeBackground = mix(s.bgTop, s.accent, darkMode ? 0.35 : 0.20);
palette.badgeBorder = mix(s.border, s.accent, 0.5);
palette.badgeText = darkMode ? Slate::k50 : Blue::k700;
palette.removeBackground = mix(s.bgTop, s.border, 0.5);
palette.removeIcon = darkMode ? Slate::k200 : Slate::k500;
return palette;
}
ChipPalette statePalette(const QString &heatLevel, bool darkMode, bool hovered, bool pressed)
src/qEmbyApp/resources/qss/dark-style.qss
+277 -286
View File
File diff suppressed because it is too large Load Diff
src/qEmbyApp/resources/qss/light-style.qss
+236 -252
View File
File diff suppressed because it is too large Load Diff
src/qEmbyApp/tokens/ColorTokens.h
+125
View File
@@ -0,0 +1,125 @@
#ifndef QEMBYAPP_COLOR_TOKENS_H
#define QEMBYAPP_COLOR_TOKENS_H
#include <QColor>
// Palette scales mirror the Tailwind Slate/Blue values documented at the top
// of resources/qss/dark-style.qss and light-style.qss. C++ paint code should
// take colors from here instead of hardcoding hex literals so the two QSS
// themes and painted widgets stay in the same color system.
namespace ColorTokens {
namespace Slate {
inline const QColor k50 {"#F8FAFC"};
inline const QColor k100 {"#F1F5F9"};
inline const QColor k200 {"#E2E8F0"};
inline const QColor k300 {"#CBD5E1"};
inline const QColor k400 {"#94A3B8"};
inline const QColor k500 {"#64748B"};
inline const QColor k600 {"#475569"};
inline const QColor k700 {"#334155"};
inline const QColor k800 {"#1E293B"};
inline const QColor k900 {"#0F172A"};
inline const QColor k950 {"#020617"};
}
namespace Blue {
inline const QColor k50 {"#EFF6FF"};
inline const QColor k100 {"#DBEAFE"};
inline const QColor k200 {"#BFDBFE"};
inline const QColor k300 {"#93C5FD"};
inline const QColor k400 {"#60A5FA"};
inline const QColor k500 {"#3B82F6"};
inline const QColor k600 {"#2563EB"};
inline const QColor k700 {"#1D4ED8"};
inline const QColor k800 {"#1E40AF"};
inline const QColor k900 {"#1E3A8A"};
}
namespace Red {
inline const QColor k500 {"#EF4444"};
inline const QColor k600 {"#DC2626"};
}
namespace Green {
inline const QColor k500 {"#22C55E"};
}
// Semantic roles per theme. Pick Dark/Light based on ThemeManager state.
namespace Dark {
inline const QColor kBgBase = Slate::k900;
inline const QColor kBgSurface = Slate::k800;
inline const QColor kBgRaised = Slate::k700;
inline const QColor kBorder = Slate::k700;
inline const QColor kBorderSoft = Slate::k600;
inline const QColor kTextPrimary = Slate::k100;
inline const QColor kTextBody = Slate::k300;
inline const QColor kTextMuted = Slate::k400;
inline const QColor kAccent = Blue::k500;
inline const QColor kAccentHover = Blue::k400;
}
namespace Light {
inline const QColor kBgBase = Slate::k50;
inline const QColor kBgSurface = QColor("#FFFFFF");
inline const QColor kBgRaised = Slate::k100;
inline const QColor kBorder = Slate::k200;
inline const QColor kBorderSoft = Slate::k300;
inline const QColor kTextPrimary = Slate::k800;
inline const QColor kTextBody = Slate::k600;
inline const QColor kTextMuted = Slate::k500;
inline const QColor kAccent = Blue::k500;
inline const QColor kAccentHover = Blue::k600;
}
inline QColor withAlpha(QColor c, int alpha)
{
c.setAlpha(alpha);
return c;
}
inline QColor mix(const QColor &from, const QColor &to, qreal t)
{
return QColor(qRound(from.red() + (to.red() - from.red()) * t),
qRound(from.green() + (to.green() - from.green()) * t),
qRound(from.blue() + (to.blue() - from.blue()) * t));
}
// Shared blue-tinted surface ramp for the search history chips and the
// search completer popup, so the same intensity level renders the same
// color in both components. Level 0 is a neutral Slate surface; level 3
// is the strongest blue tint.
namespace SearchTint {
struct Surface
{
QColor bgTop;
QColor bgBottom;
QColor border;
QColor text;
QColor accent;
};
inline Surface surface(int level, bool dark)
{
const qreal t = qBound(0, level, 3) / 3.0;
if (dark)
{
return {mix(Slate::k800, Blue::k800, t * 0.45),
mix(Slate::k900, Blue::k900, t * 0.45),
mix(Slate::k600, Blue::k400, t * 0.45),
mix(Slate::k300, Blue::k50, t),
mix(Slate::k400, Blue::k300, t)};
}
return {mix(Slate::k50, Blue::k100, t * 0.75),
mix(Slate::k100, Blue::k200, t * 0.6),
mix(Slate::k200, Blue::k300, t * 0.6),
mix(Slate::k700, Blue::k800, t),
mix(Slate::k500, Blue::k600, t)};
}
} // namespace SearchTint
} // namespace ColorTokens
#endif // QEMBYAPP_COLOR_TOKENS_H
src/qEmbyApp/views/admin/librarycard.cpp
+18 -16
View File
@@ -2,6 +2,7 @@
#include "librarygrid.h"
#include "../../components/libraryactionmenu.h"
#include "../../managers/thememanager.h"
#include "../../tokens/ColorTokens.h"
#include "../../utils/hoveranimator.h"
#include "../../utils/tweenedvalue.h"
@@ -156,23 +157,24 @@ void LibraryCard::paintEvent(QPaintEvent* event)
int w = width(), h = height();
QColor cardBg = isDark ? QColor(51, 65, 85, 140) : QColor(255, 255, 255, 245);
QColor border = isDark ? QColor(71, 85, 105, 100) : QColor(226, 232, 240);
QColor nameFg = isDark ? QColor("#F1F5F9") : QColor("#0F172A");
QColor typeFg = isDark ? QColor("#94A3B8") : QColor("#64748B");
const QColor accent("#3B82F6");
using namespace ColorTokens;
QColor cardBg = isDark ? withAlpha(Slate::k700, 140) : withAlpha(Qt::white, 245);
QColor border = isDark ? withAlpha(Slate::k600, 100) : Slate::k200;
QColor nameFg = isDark ? Slate::k100 : Slate::k900;
QColor typeFg = isDark ? Slate::k400 : Slate::k500;
const QColor accent = Blue::k500;
const qreal hp = m_hover->progress();
if (hp > 0.0 && !m_selected && !m_dragging) {
const QColor hoverBorder = isDark ? QColor(96, 165, 250, 190) : QColor(59, 130, 246, 190);
const QColor hoverBg = isDark ? QColor(51, 65, 85, 190) : QColor(255, 255, 255, 255);
const QColor hoverBorder = withAlpha(isDark ? Blue::k400 : Blue::k500, 190);
const QColor hoverBg = isDark ? withAlpha(Slate::k700, 190) : QColor(Qt::white);
border = lerpColor(border, hoverBorder, hp);
cardBg = lerpColor(cardBg, hoverBg, hp);
}
if (m_selected) {
cardBg = isDark ? QColor(30, 41, 59, 220) : QColor(239, 246, 255, 245);
border = isDark ? QColor(96, 165, 250, 220) : QColor(59, 130, 246, 220);
cardBg = isDark ? withAlpha(Slate::k800, 220) : withAlpha(Blue::k50, 245);
border = withAlpha(isDark ? Blue::k400 : Blue::k500, 220);
}
p.setPen(QPen(border, m_selected ? 2 : 1));
@@ -182,12 +184,12 @@ void LibraryCard::paintEvent(QPaintEvent* event)
const QRectF badgeRect(w - 28, 10, 18, 18);
p.setPen(QPen(m_selected ? accent
: (isDark ? QColor(100, 116, 139, 160)
: QColor(148, 163, 184, 180)),
: (isDark ? withAlpha(Slate::k500, 160)
: withAlpha(Slate::k400, 180)),
1.5));
p.setBrush(m_selected ? accent
: (isDark ? QColor(15, 23, 42, 180)
: QColor(255, 255, 255, 220)));
: (isDark ? withAlpha(Slate::k900, 180)
: withAlpha(Qt::white, 220)));
p.drawEllipse(badgeRect);
if (m_selected) {
@@ -221,8 +223,8 @@ void LibraryCard::paintEvent(QPaintEvent* event)
p.restore();
} else {
QLinearGradient grad(imgRect.topLeft(), imgRect.bottomRight());
grad.setColorAt(0, isDark ? QColor(30, 41, 59) : QColor(241, 245, 249));
grad.setColorAt(1, isDark ? QColor(51, 65, 85) : QColor(226, 232, 240));
grad.setColorAt(0, isDark ? Slate::k800 : Slate::k100);
grad.setColorAt(1, isDark ? Slate::k700 : Slate::k200);
QPainterPath clipPath;
clipPath.addRoundedRect(imgRect, 9, 9);
p.save();
@@ -232,7 +234,7 @@ void LibraryCard::paintEvent(QPaintEvent* event)
QFont iconFont = font();
iconFont.setPixelSize(32);
p.setFont(iconFont);
p.setPen(isDark ? QColor(148, 163, 184, 80) : QColor(100, 116, 139, 80));
p.setPen(withAlpha(isDark ? Slate::k400 : Slate::k500, 80));
p.drawText(imgRect, Qt::AlignCenter, "📁");
p.restore();
}