minor #50752 [WebProfilerBundle] Fix the accessibility of some background color (javiereguiluz)

fabpot · fabpot · commit 2e7e0eea2c3f · 2023-06-23T10:17:48.000+02:00
This PR was merged into the 6.2 branch. Discussion ---------- [WebProfilerBundle] Fix the accessibility of some background color | Q | A | ------------- | --- | Branch? | 6.2 | Bug fix? | yes | New feature? | no | Deprecations? | no | Tickets | | License | MIT | Doc PR | #48961 is a great PR that fixes some small issues in the toolbar. However, I'm worried about one of its changes. Instead of using the custom green color defined for the toolbar, it now uses one of the green colors used in the profiler. The result is that now the profiler has a too low contrast ratio: <img width="357" alt="before" src="https://github.com/symfony/symfony/assets/73419/57d634db-ed47-425a-a88e-4346d84bdcbd"> This PR restores the original green color, which looks like this: <img width="362" alt="after" src="https://github.com/symfony/symfony/assets/73419/371c4bba-7412-4bd5-aca2-c58018923159"> <img width="293" alt="after-server" src="https://github.com/symfony/symfony/assets/73419/b341d83d-38d3-4422-849b-1816444916ac"> Commits ------- 99736d3 [WebProfilerBundle] Fix the accessibility of some background color
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
@@ -38,7 +38,7 @@
     --sf-toolbar-green-100: #deeaea;
     --sf-toolbar-green-200: #bbd5d5;
     --sf-toolbar-green-300: #99bfbf;
-    --sf-toolbar-green-400: #1dc9a4;
+    --sf-toolbar-green-400: #76a9a9;
     --sf-toolbar-green-500: #598e8e;
     --sf-toolbar-green-600: #436c6c;
     --sf-toolbar-green-700: #2e4949;
@@ -280,8 +280,8 @@ div.sf-toolbar  .sf-toolbar-block .sf-toolbar-info-piece.sf-toolbar-info-php-ext
 
 .sf-toolbar-block .sf-toolbar-status.sf-toolbar-status-green,
 .sf-toolbar-block .sf-toolbar-info .sf-toolbar-status.sf-toolbar-status-green {
-    background-color: var(--sf-toolbar-green-400);
-    color: var(--sf-toolbar-green-50);
+    background-color: #059669;
+    color: var(--white);
 }
 .sf-toolbar-block .sf-toolbar-status.sf-toolbar-status-red,
 .sf-toolbar-block .sf-toolbar-info .sf-toolbar-status.sf-toolbar-status-red {
