From e1f0f7984c123e10ffeebb1ba92e444557691110 Mon Sep 17 00:00:00 2001
From: albertlast <mathiaspapealbert@hotmail.com>
Date: Sun, 9 Aug 2026 22:13:57 +0200
Subject: [PATCH] Points the personal message styles at design tokens

The mailbox capacity bar and its three fill states, the rule editor's
labels, the unread message background, and the unread message and alert
lists that hang off the user menu.

Every token holds the value the rule has today, so nothing renders
differently.

Signed-off-by: Mathias Albert <mathiaspapealbert@hotmail.com>
Signed-off-by: albertlast <mathiaspapealbert@hotmail.com>
---
 Themes/default/css/index.css     | 22 +++++++++++-----------
 Themes/default/css/variables.css | 19 +++++++++++++++++++
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/Themes/default/css/index.css b/Themes/default/css/index.css
index b72959eec3..7ea925e957 100644
--- a/Themes/default/css/index.css
+++ b/Themes/default/css/index.css
@@ -956,17 +956,17 @@ a[class^="mobile_generic_menu_"] {
 }
 .pm_unread, .alerts_unread {
 	margin-top: 5px;
-	border-top: 1px solid #ddd;
+	border-top: var(--notifylist-border-width) var(--notifylist-border-style) var(--notifylist-border-color);
 }
 .unread_notify {
-	border-bottom: 1px solid #ddd;
+	border-bottom: var(--notifylist-border-width) var(--notifylist-border-style) var(--notifylist-border-color);
 }
 .no_unread {
 	margin-top: 5px;
 	text-align: center;
 }
 .unread_notify:hover {
-	background: #eee;
+	background: var(--notifylist-item-bg_hover);
 	text-decoration: none;
 }
 .unread_notify:last-child {
@@ -2834,26 +2834,26 @@ dl.stats {
 	padding: 0 12px 0 0;
 }
 #personal_messages .capacity_bar {
-	background: #f0f4f7;
+	background: var(--capacitybar-bg);
 	display: block;
 	margin: 6px 0 0 12px;
 	height: 12px;
-	border: 1px solid #adadad;
+	border: var(--capacitybar-border-width) var(--capacitybar-border-style) var(--capacitybar-border-color);
 	width: 10em;
 }
 #personal_messages .capacity_bar span {
-	border-right: 1px solid #adadad;
+	border-right: var(--capacitybar-border-width) var(--capacitybar-border-style) var(--capacitybar-border-color);
 	display: block;
 	height: 12px;
 }
 #personal_messages .capacity_bar span.empty {
-	background: #a6d69d;
+	background: var(--capacitybar-inner-bg_empty);
 }
 #personal_messages .capacity_bar span.filled {
-	background: #eea800;
+	background: var(--capacitybar-inner-bg_filled);
 }
 #personal_messages .capacity_bar span.full {
-	background: #f10909;
+	background: var(--capacitybar-inner-bg_full);
 }
 #personal_messages .reportlinks {
 	padding: 6px 1.3em;
@@ -2869,7 +2869,7 @@ dl.stats {
 }
 dl.addrules dt.floatleft {
 	width: 15em;
-	color: #333;
+	color: var(--pmrules-label-color);
 	padding: 0 15px 6px 15px;
 }
 #addrule fieldset {
@@ -2880,7 +2880,7 @@ dl.addrules dt.floatleft {
 	margin-right: 10px;
 }
 .unread_pm {
-	background: #cfc;
+	background: var(--unreadpm-bg);
 }
 /* Styles for the show alerts section.
 ------------------------------------------------- */
diff --git a/Themes/default/css/variables.css b/Themes/default/css/variables.css
index f18c29ee3e..7ec4abc122 100644
--- a/Themes/default/css/variables.css
+++ b/Themes/default/css/variables.css
@@ -326,6 +326,25 @@
 	--popup-content-color:                            #222;
 	--popup-content-line-height:                      1.6em;
 
+	/** Personal Message Capacity Bar **/
+	--capacitybar-bg:                                 #f0f4f7;
+	--capacitybar-border-color:                       #adadad;
+	--capacitybar-border-style:                       solid;
+	--capacitybar-border-width:                       1px;
+	--capacitybar-inner-bg_empty:                     #a6d69d;
+	--capacitybar-inner-bg_filled:                    #eea800;
+	--capacitybar-inner-bg_full:                      #f10909;
+
+	/** Personal Messages **/
+	--pmrules-label-color:                            #333;
+	--unreadpm-bg:                                    #cfc;
+
+	/* The unread message and alert lists in the user menu. */
+	--notifylist-border-color:                        #ddd;
+	--notifylist-border-style:                        solid;
+	--notifylist-border-width:                        1px;
+	--notifylist-item-bg_hover:                       #eee;
+
 	/** Search Highlight **/
 	--searchhighlight-color:                          #ff7200;
 	--searchhighlight-font-size:                      1.1em;