feat(theme): add themable tooltip surface colors (#3967)

port 2.0

(cherry picked from commit 8f1a8ad824)
This commit is contained in:
Huỳnh Thiện Lộc authored and dux-ci[bot] committed 2026-10-28 13:28:05 +00:00
1 parent e038d76fb6
commit 8e10f620c9
7 files changed
+56 -21

No files matched your search

+2 -4
View File
@@ -184,6 +184,8 @@ Singleton {
property string hostSurfaceCustomColor: Spec.SPEC.hostSurfaceCustomColor.def
property string cardSurfaceColor: Spec.SPEC.cardSurfaceColor.def
property string cardSurfaceCustomColor: Spec.SPEC.cardSurfaceCustomColor.def
property string tooltipSurfaceColor: Spec.SPEC.tooltipSurfaceColor.def
property string tooltipSurfaceCustomColor: Spec.SPEC.tooltipSurfaceCustomColor.def
property string chipSurfaceColor: Spec.SPEC.chipSurfaceColor.def
property string chipSurfaceCustomColor: Spec.SPEC.chipSurfaceCustomColor.def
property string chipSurfaceNestedColor: Spec.SPEC.chipSurfaceNestedColor.def
@@ -340,10 +342,6 @@ Singleton {
onBlurLayerOutlineOpacityChanged: saveSettings()
property real sectionDividerOpacity: Spec.SPEC.sectionDividerOpacity.def
onSectionDividerOpacityChanged: saveSettings()
property string tooltipSurfaceColor: Spec.SPEC.tooltipSurfaceColor.def
onTooltipSurfaceColorChanged: saveSettings()
property string tooltipSurfaceCustomColor: Spec.SPEC.tooltipSurfaceCustomColor.def
onTooltipSurfaceCustomColorChanged: saveSettings()
property bool blurBorderEnabled: Spec.SPEC.blurBorderEnabled.def
onBlurBorderEnabledChanged: saveSettings()
property string blurBorderColor: Spec.SPEC.blurBorderColor.def
+6
View File
@@ -222,6 +222,8 @@ Singleton {
"surfaceContainer": getMatugenColorForMode(colorMode, "surface_container", "#1e2023"),
"surfaceContainerHigh": getMatugenColorForMode(colorMode, "surface_container_high", "#292b2f"),
"surfaceContainerHighest": getMatugenColorForMode(colorMode, "surface_container_highest", "#343740"),
"inverseSurface": getMatugenColorForMode(colorMode, "inverse_surface", getMatugenColorForMode(colorMode === "light" ? "dark" : "light", "surface", "#fdf7fe")),
"inverseOnSurface": getMatugenColorForMode(colorMode, "inverse_on_surface", getMatugenColorForMode(colorMode === "light" ? "dark" : "light", "on_surface", "#302e33")),
"error": getMatugenColorForMode(colorMode, "error", "#F2B8B5"),
"errorText": getMatugenColorForMode(colorMode, "on_error"),
"errorContainer": getMatugenColorForMode(colorMode, "error_container"),
@@ -368,6 +370,8 @@ Singleton {
readonly property color cardSurface: typeof SettingsData === "undefined" ? surfaceContainer : surfaceRoleColor(SettingsData.cardSurfaceColor, SettingsData.cardSurfaceCustomColor, surfaceContainer)
readonly property color chipSurface: typeof SettingsData === "undefined" ? surfaceContainerHigh : surfaceRoleColor(SettingsData.chipSurfaceColor, SettingsData.chipSurfaceCustomColor, surfaceContainerHigh)
readonly property color chipSurfaceNested: typeof SettingsData === "undefined" ? surfaceContainerHighest : surfaceRoleColor(SettingsData.chipSurfaceNestedColor, SettingsData.chipSurfaceNestedCustomColor, surfaceContainerHighest)
readonly property color tooltipSurface: typeof SettingsData === "undefined" ? surfaceContainerHighest : surfaceRoleColor(SettingsData.tooltipSurfaceColor, SettingsData.tooltipSurfaceCustomColor, surfaceContainerHighest)
readonly property color tooltipText: Contrast.readableOn(tooltipSurface, [surfaceText, (isLightColor(tooltipSurface) ? contrastDark : contrastLight)])
readonly property real containerSaturation: typeof SettingsData === "undefined" ? 1 : SettingsData.containerSaturation / 100
readonly property real containerTint: (currentThemeData.containerTint ?? Tonal.defaultTint(surfaceContainer)) * containerSaturation
property color primaryContainer: currentThemeData.softPrimaryContainer || Tonal.softContainer(primary, surfaceContainer, containerTint)
@@ -631,6 +635,8 @@ Singleton {
return surfaceContainerHigh;
case "schh":
return surfaceContainerHighest;
case "inverseSurface":
return inverseSurface;
case "sth":
return surfaceTextHover;
case "error":
@@ -846,6 +846,13 @@ Column {
"fallback": "schh",
"text": I18n.tr("Nested chip", "surface role"),
"tags": ["nested", "chip", "control"]
},
{
"key": "tooltipSurfaceColor",
"customKey": "tooltipSurfaceCustomColor",
"fallback": "schh",
"text": I18n.tr("Tooltip", "surface role"),
"tags": ["tooltip", "hint", "hover", "toast"]
}
]
@@ -55,19 +55,40 @@ Item {
color: Theme.chipSurface
radius: Theme.cornerRadiusS
Rectangle {
Column {
width: parent.width
height: nestedLabel.height + Theme.spacingM * 2
color: Theme.chipSurfaceNested
radius: Theme.cornerRadiusXS
spacing: Theme.spacingS
StyledText {
id: nestedLabel
anchors.centerIn: parent
text: I18n.tr("Nested chip", "surface role")
font.pixelSize: Theme.fontSizeSmall
font.weight: Theme.fontWeightMedium
color: Theme.surfaceText
Rectangle {
width: parent.width
height: nestedLabel.height + Theme.spacingM * 2
color: Theme.chipSurfaceNested
radius: Theme.cornerRadiusXS
StyledText {
id: nestedLabel
anchors.centerIn: parent
text: I18n.tr("Nested chip", "surface role")
font.pixelSize: Theme.fontSizeSmall
font.weight: Theme.fontWeightMedium
color: Theme.surfaceText
}
}
Rectangle {
anchors.horizontalCenter: parent.horizontalCenter
width: tooltipLabel.implicitWidth + Theme.spacingM * 2
height: tooltipLabel.implicitHeight + Theme.spacingS * 2
color: Theme.tooltipSurface
radius: Theme.cornerRadiusXS
StyledText {
id: tooltipLabel
anchors.centerIn: parent
text: I18n.tr("Tooltip", "surface role")
font.pixelSize: Theme.fontSizeSmall
color: Theme.tooltipText
}
}
}
}
@@ -20,6 +20,9 @@ ColorDropdownRow {
}), ({
"value": "schh",
"label": I18n.tr("Surface Highest", "surface color option")
}), ({
"value": "inverseSurface",
"label": I18n.tr("Inverse Surface", "surface color option")
}), ({
"value": "primaryContainer",
"label": I18n.tr("Primary Container", "surface color option")
+4 -4
View File
@@ -339,7 +339,7 @@ PanelWindow {
visible: copyDetailsButton.showTooltip
width: detailsTooltipLabel.implicitWidth + Theme.spacingM * 2
height: detailsTooltipLabel.implicitHeight + Theme.spacingS * 2
color: Theme.inverseSurface
color: Theme.tooltipSurface
radius: Theme.cornerRadiusXS
y: -height - Theme.spacingS
x: -width / 2 + copyDetailsButton.width / 2
@@ -349,7 +349,7 @@ PanelWindow {
anchors.centerIn: parent
text: root.copiedText
font.pixelSize: Theme.fontSizeSmall
color: Theme.inverseOnSurface
color: Theme.tooltipText
}
}
}
@@ -423,7 +423,7 @@ PanelWindow {
visible: copyButton.showTooltip
width: tooltipLabel.implicitWidth + Theme.spacingM * 2
height: tooltipLabel.implicitHeight + Theme.spacingS * 2
color: Theme.inverseSurface
color: Theme.tooltipSurface
radius: Theme.cornerRadiusXS
y: -height - Theme.spacingS
x: -width / 2 + copyButton.width / 2
@@ -433,7 +433,7 @@ PanelWindow {
anchors.centerIn: parent
text: root.copiedText
font.pixelSize: Theme.fontSizeSmall
color: Theme.inverseOnSurface
color: Theme.tooltipText
}
}
}
+2 -2
View File
@@ -71,7 +71,7 @@ PanelWindow {
Rectangle {
anchors.fill: parent
visible: root.shown
color: Theme.inverseSurface
color: Theme.tooltipSurface
radius: Theme.cornerRadiusXS
StyledText {
@@ -80,7 +80,7 @@ PanelWindow {
anchors.centerIn: parent
text: root.text
font.pixelSize: Theme.fontSizeSmall
color: Theme.inverseOnSurface
color: Theme.tooltipText
wrapMode: Text.NoWrap
maximumLineCount: 1
elide: Text.ElideRight