From 7e56c9230789c289e5184778f7658fe396a22eac Mon Sep 17 00:00:00 2001 From: MAEDA Go Date: Thu, 8 Oct 2026 08:36:51 +0900 Subject: [PATCH] Use a neutral text color in notice and warning messages Warning messages, conflict messages, and "No data to display" boxes used pink-9 text on a yellow background. This combination looked harsh. Since pink-9 is also the text color of error messages, warnings could look like errors. Use gray-7 for the text of these messages. The type of a message is still conveyed by its background, border, and icon. Notice messages are changed in the same way for consistency. gray-7 is the color of headings and is about as dark as the pink-9 text of error messages, so all types of messages have a similar visual weight. The warning icon becomes yellow-9 to match its background. Error messages are unchanged. As a side effect, the text of notice messages becomes easier to read because of the higher contrast. Co-Authored-By: Claude Opus 5.5 --- app/assets/stylesheets/application.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 87274bed3..302cdba14 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -1559,7 +1559,7 @@ div.flash.error svg.icon-svg, #errorExplanation svg.icon-svg { div.flash.notice { background-color: var(--oc-green-1); border-color: var(--oc-green-3); - color: var(--oc-green-9); + color: var(--oc-gray-7); } div.flash.notice svg.icon-svg { stroke: var(--oc-green-9); @@ -1568,18 +1568,18 @@ div.flash.notice svg.icon-svg { div.flash.warning, .conflict { background-color: var(--oc-yellow-1); border-color: var(--oc-yellow-3); - color: var(--oc-pink-9); + color: var(--oc-gray-7); text-align: start; } div.flash.warning svg.icon-svg, .conflict svg.icon-svg { - stroke: var(--oc-pink-9); + stroke: var(--oc-yellow-9); } .nodata, .warning { text-align: center; background-color: var(--oc-yellow-1); border-color: var(--oc-yellow-3); - color: var(--oc-pink-9); + color: var(--oc-gray-7); } .warning .oauth-permissions { display:inline-block;text-align:start; } -- 2.55.0