[IMP] runbot: add a friendly colorblindness theme

The runbot colors can lack contrast in some case, especially for colorblinded people. This commit introduces a theme that should help a little. Note that this was done without much analysis and should be tweaked in the future.
odoo · Jul 26, 2024 · 65d7941 · 65d7941
1 parent 9d62213
commit 65d7941
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/runbot/static/src/css/runbot.css b/runbot/static/src/css/runbot.css
@@ -13,13 +13,18 @@
 	--bs-info-bg-subtle: #d9edf7;
 	--bs-info-rgb: 23, 162, 184;
 }
+:root[data-bs-theme=red404] { 
+	--bs-success-bg-subtle: #cdffb9;
+	--bs-danger-bg-subtle: #e67ecf;
+	--bs-warning-bg-subtle: #fae9b1;
+	--bs-info-bg-subtle: #b6e2f8;
+	--bs-info-rgb: 23, 162, 184;
+}
 
 [data-bs-theme=legacy] .text-bg-info {
 	color: #fff !important; /* black by default, changes from previous version, color forced to fit with --bs-info-rgb*/
 }
 
-
-
 [data-bs-theme=legacy] .btn-success {
 	--bs-btn-color: #fff;
 	--bs-btn-bg: #198754;
@@ -37,6 +42,23 @@
 	--bs-btn-disabled-border-color: #28a745;
   }
 
+[data-bs-theme=red404] .btn-danger {
+	--bs-btn-color: #fff;
+	--bs-btn-bg: #990a59;
+	--bs-btn-border-color: #990a59;
+	--bs-btn-hover-color: #fff;
+	--bs-btn-hover-bg: #740442;
+	--bs-btn-hover-border-color: #740442;
+	--bs-btn-focus-shadow-rgb: 60, 153, 110;
+	--bs-btn-active-color: #fff;
+	--bs-btn-active-bg: #740442;
+	--bs-btn-active-border-color: #740442;
+	--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+	--bs-btn-disabled-color: #fff;
+	--bs-btn-disabled-bg: #b90e6c;
+	--bs-btn-disabled-border-color: #b90e6c;
+}
+
 
 :root {
 	--alternative:#ccc;

diff --git a/runbot/templates/utils.xml b/runbot/templates/utils.xml
@@ -60,9 +60,7 @@
                                     <t t-if="not user_id._is_public()">
                                         <t t-call="runbot.build_errors_link"/>
                                         <li class="nav-item dropdown" t-ignore="true">
-                                            <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
-                                                <b>
-                                                    <span t-esc="user_id.name[:23] + '...' if user_id.name and len(user_id.name) &gt; 25 else user_id.name"/>
+                                            <a href="#" clzepplint-esc="user_id.name[:23] + '...' if user_id.name and len(user_id.name) &gt; 25 else user_id.name"/>
                                                 </b>
                                             </a>
                                             <div class="dropdown-menu js_usermenu" role="menu">
@@ -104,6 +102,7 @@
                                 <button onclick="document.cookie = 'theme=legacy; expires=Thu, 1 Dec 2942 12:00:00 UTC; path=/'; location.reload();" type="button" t-attf-class="btn btn-{{'primary' if theme=='legacy' else 'secondary'}}">Legacy</button>
                                 <button onclick="document.cookie = 'theme=dark; expires=Thu, 1 Dec 2942 12:00:00 UTC; path=/'; location.reload();" type="button" t-attf-class="btn btn-{{'primary' if theme=='dark' else 'secondary'}}">Dark</button>
                                 <button onclick="document.cookie = 'theme=light; expires=Thu, 1 Dec 2942 12:00:00 UTC; path=/'; location.reload();" type="button" t-attf-class="btn btn-{{'primary' if theme=='light' else 'secondary'}}">Light</button>
+                                <button onclick="document.cookie = 'theme=red404; expires=Thu, 1 Dec 2942 12:00:00 UTC; path=/'; location.reload();" type="button" t-attf-class="btn btn-{{'primary' if theme=='red404' else 'secondary'}}">Red404</button>
                             </div>
 
                             <hr class="separator"/>