fix: More darkmode fixes (#6477)

* fix: More dark mode fixes

This first commit increases contrast of the leftmenu text.

* Fix own ballot position highlight in dark mode

* Fix dark mode axis color in timeline diagrams

* Enable highcharts dark mode

* Fix template

* Properly import our customized bs5 everywhere

* Fix #6499

* Use bs5 color for border-left

* Remove superfluous load

ietf/static/css/custom-bs-import.scss

@@ -0,0 +1,55 @@
+@import "bootstrap/scss/functions";
+
+// Enable negative margin classes.
+$enable-negative-margins: true;
+
+// Don't add carets to dropdowns by default.
+// $enable-caret: false;
+
+$popover-max-width: 100%;
+
+// Override default fonts
+
+$font-family-sans-serif: "Inter",
+system-ui,
+-apple-system,
+"Segoe UI",
+Roboto,
+"Helvetica Neue",
+"Noto Sans",
+"Liberation Sans",
+Arial,
+sans-serif,
+"Apple Color Emoji",
+"Segoe UI Emoji",
+"Segoe UI Symbol",
+"Noto Color Emoji";
+$font-family-monospace: "Noto Sans Mono",
+SFMono-Regular,
+Menlo,
+Monaco,
+Consolas,
+"Liberation Mono",
+"Courier New",
+monospace;
+
+// Enable color modes
+$color-mode-type: data;
+
+@import "bootstrap/scss/variables";
+@import "bootstrap/scss/variables-dark";
+
+$h1-font-size: $font-size-base * 2.2;
+$h2-font-size: $font-size-base * 1.8;
+$h3-font-size: $font-size-base * 1.6;
+$h4-font-size: $font-size-base * 1.4;
+$h5-font-size: $font-size-base * 1.2;
+$h6-font-size: $font-size-base;
+
+@import "bootstrap/scss/maps";
+@import "bootstrap/scss/mixins";
+@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/root";
+
+
+

ietf/static/css/datepicker.scss

@@ -1,13 +1,4 @@
-@import "bootstrap/scss/functions";
-
-// Enable color modes
-$color-mode-type: data;
-
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/root";
+@import "custom-bs-import";
 
 // FIXME: color.scale doesn't seem to work with CSS variables, so avoid those:`
 $dp-cell-focus-background-color: $dropdown-link-hover-bg !default;

ietf/static/css/document_html.scss

@@ -1,41 +1,9 @@
 @use "sass:map";
 
-$font-family-sans-serif: "Inter",
-system-ui,
--apple-system,
-"Segoe UI",
-Roboto,
-"Helvetica Neue",
-"Noto Sans",
-"Liberation Sans",
-Arial,
-sans-serif,
-"Apple Color Emoji",
-"Segoe UI Emoji",
-"Segoe UI Symbol",
-"Noto Color Emoji";
-$font-family-monospace: "Noto Sans Mono",
-SFMono-Regular,
-Menlo,
-Monaco,
-Consolas,
-"Liberation Mono",
-"Courier New",
-monospace;
-
-@import "bootstrap/scss/functions";
-
-// Enable color modes
-$color-mode-type: data;
-
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
-@import "bootstrap/scss/root";
+@import "custom-bs-import";
 
 // Layout & components
+// Only import what we need:
 @import "bootstrap/scss/reboot";
 @import "bootstrap/scss/type";
 // @import "bootstrap/scss/images";

ietf/static/css/document_html_txt.scss

@@ -69,7 +69,7 @@ figure {
 blockquote {
   @include margin-paragraph; // margin: var(--paragraph);
   padding-left: calc(2ch - 2px);
-  border-left: 2px solid darkgrey;
+  border-left: 2px solid var(--bs-border-color);
 }
 
 /* Header junk */
@@ -374,7 +374,7 @@ thead, tfoot {
   border-bottom-style: double;
 }
 td, th {
-  border: 1px solid inherit;
+  border: 1px solid var(--bs-border-color);
   // padding: var(--half-line) 1ch;
   padding-top: var(--half-line);
   padding-right: 1ch;

ietf/static/css/highcharts.scss

@@ -0,0 +1 @@
+@import "npm:highcharts/css/highcharts.css";

ietf/static/css/ietf.scss

@@ -1,61 +1,9 @@
 @use "sass:map";
 
-@import "bootstrap/scss/functions";
-
-// Enable negative margin classes.
-$enable-negative-margins: true;
-
-// Don't add carets to dropdowns by default.
-// $enable-caret: false;
-
-$popover-max-width: 100%;
-
-// Override default fonts
-
-$font-family-sans-serif: "Inter",
-system-ui,
--apple-system,
-"Segoe UI",
-Roboto,
-"Helvetica Neue",
-"Noto Sans",
-"Liberation Sans",
-Arial,
-sans-serif,
-"Apple Color Emoji",
-"Segoe UI Emoji",
-"Segoe UI Symbol",
-"Noto Color Emoji";
-$font-family-monospace: "Noto Sans Mono",
-SFMono-Regular,
-Menlo,
-Monaco,
-Consolas,
-"Liberation Mono",
-"Courier New",
-monospace;
-
-// Enable color modes
-$color-mode-type: data;
-
-// Only import what we need:
-
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark";
-
-$h1-font-size: $font-size-base * 2.2;
-$h2-font-size: $font-size-base * 1.8;
-$h3-font-size: $font-size-base * 1.6;
-$h4-font-size: $font-size-base * 1.4;
-$h5-font-size: $font-size-base * 1.2;
-$h6-font-size: $font-size-base;
-
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
-@import "bootstrap/scss/root";
+@import "custom-bs-import";
 
 // Layout & components
+// Only import what we need:
 @import "bootstrap/scss/reboot";
 @import "bootstrap/scss/type";
 @import "bootstrap/scss/images";
@@ -205,8 +153,8 @@ pre {
         --#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
         --#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
         --#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
-        --#{$prefix}dropdown-link-color: #{$dropdown-link-color};
-        --#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
+        --#{$prefix}dropdown-link-color: #{$nav-link-color};
+        --#{$prefix}dropdown-link-hover-color: #{$nav-link-hover-color};
         --#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
         --#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
         --#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
@@ -351,7 +299,7 @@ th,
     .axis path,
     .axis line {
         fill: none;
-        stroke: black;
+        stroke: var(--bs-body-color);
     }
 
     .axis.y path,
@@ -368,7 +316,7 @@ th,
     }
 
     .bar text {
-        fill: black;
+        fill: var(--bs-body-color);
         dominant-baseline: central;
         pointer-events: none;
     }
@@ -407,7 +355,7 @@ th,
 }
 
 .ballot-icon table .my {
-    border: calc(2 * $table-border-width) solid #000;
+    border: calc(2 * $table-border-width) solid var(--bs-emphasis-color);
 }
 
 // See https://getbootstrap.com/docs/5.1/customize/color/#all-colors

ietf/static/css/list.scss

@@ -1,11 +1,4 @@
-// Import bootstrap helpers
-@import "bootstrap/scss/functions";
-
-// Enable color modes
-$color-mode-type: data;
-
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark";
+@import "custom-bs-import";
 
 table .sort {
     cursor: pointer;

ietf/static/css/select2.scss

@@ -1,13 +1,4 @@
-@import "bootstrap/scss/functions";
-
-// Enable color modes
-$color-mode-type: data;
-
-@import "bootstrap/scss/variables";
-@import "bootstrap/scss/variables-dark";
-@import "bootstrap/scss/maps";
-@import "bootstrap/scss/mixins";
-@import "bootstrap/scss/root";
+@import "custom-bs-import";
 
 // FIXME: bs-5.3.0 workaround from https://github.com/apalfrey/select2-bootstrap-5-theme/issues/75#issuecomment-1573265695
 $s2bs5-border-color: $border-color;

ietf/static/js/highcharts.js

@@ -13,17 +13,9 @@ Highcharts_Accessibility(Highcharts);
 Highcharts_Sunburst(Highcharts);
 
 Highcharts.setOptions({
-    // use colors from https://colorbrewer2.org/#type=qualitative&scheme=Paired&n=12
-    colors: ['#a6cee3', '#1f78b4', '#b2df8a', '#33a02c', '#fb9a99',
-        '#e31a1c', '#fdbf6f', '#ff7f00', '#cab2d6', '#6a3d9a',
-        '#ffff99', '#b15928'
-    ],
     chart: {
         height: "100%",
-        style: {
-            fontFamily: getComputedStyle(document.body)
-                .getPropertyValue('--bs-body-font-family')
-        }
+        styledMode: true,
     },
     credits: {
         enabled: false

ietf/static/js/highstock.js

@@ -10,4 +10,13 @@ Highcharts_Offline_Exporting(Highcharts);
 Highcharts_Export_Data(Highcharts);
 Highcharts_Accessibility(Highcharts);
 
+Highcharts.setOptions({
+    chart: {
+        styledMode: true,
+    },
+    credits: {
+        enabled: false
+    },
+});
+
 window.Highcharts = Highcharts;

ietf/templates/base/menu.html

@@ -22,7 +22,7 @@
     {% if flavor == 'top' %}<li class="dropdown-header">By area/parent</li>{% endif %}
     {% wg_menu flavor %}
     <li class="dropend">
-        <a class="dropdown-item dropdown-toggle {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item dropdown-toggle {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url "ietf.group.views.active_groups" %}">
             Other
         </a>
@@ -31,19 +31,19 @@
     {% if flavor == 'top' %}<li><hr class="dropdown-divider"></li>{% endif %}
     <li {% if flavor == 'top' %}class="dropdown-header"{% else %}class="nav-item fw-bolder"{% endif %}>New work</li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url "ietf.group.views.chartering_groups" %}">
             Chartering groups
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url "ietf.group.views.bofs" group_type="wg" %}">
             BOFs
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url "ietf.doc.views_bofreq.bof_requests" %}">
             BOF Requests
         </a>
@@ -51,13 +51,13 @@
     {% if flavor == 'top' %}<li><hr class="dropdown-divider"></li>{% endif %}
     <li {% if flavor == 'top' %}class="dropdown-header"{% else %}class="nav-item fw-bolder"{% endif %}>Other groups</li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url "ietf.group.views.concluded_groups" %}">
             Concluded groups
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'ietf.mailinglists.views.nonwg' %}">
             Non-WG lists
         </a>
@@ -81,32 +81,32 @@
         </li>
     {% endif %}
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url "ietf.doc.views_search.search" %}">
             Search
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url "ietf.doc.views_search.recent_drafts" %}">
             Recent I-Ds
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url "ietf.submit.views.upload_submission" %}">
             I-D submission
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'ietf.doc.views_search.ad_workload' %}">
             IESG dashboard
         </a>
     </li>
     {% if user and user.is_authenticated %}
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
                href="{% url "ietf.community.views.view_list" user.username %}">
                 My tracked docs
             </a>
@@ -114,7 +114,7 @@
         {% if user|has_role:"Area Director,Secretariat" %}
             {% if flavor == 'top' %}<li><hr class="dropdown-divider"></li>{% endif %}
             <li>
-                <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+                <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
                    href="{% url 'ietf.doc.views_status_change.rfc_status_changes' %}">
                     RFC status changes
                 </a>
@@ -122,7 +122,7 @@
         {% endif %}
         {% if flavor == 'top' %}<li><hr class="dropdown-divider"></li>{% endif %}
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
                href="{% url 'ietf.doc.views_ballot.irsg_ballot_status' %}">
                 IRSG ballot status
             </a>
@@ -131,14 +131,14 @@
             {% if flavor == 'top' %}<li><hr class="dropdown-divider"></li>{% endif %}
             <li {% if flavor == 'top' %}class="dropdown-header"{% else %}class="nav-item fw-bolder"{% endif %}>Manage</li>
             <li>
-                <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+                <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
                    href="{% url "ietf.submit.views.approvals" %}">
                     Approve an I-D
                 </a>
             </li>
             {% for g in user|docman_groups %}
                 <li>
-                    <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+                    <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
                        href="{% url "ietf.group.views.group_documents" g.acronym %}">
                         {{ g.acronym }} {{ g.type.slug }} docs
                     </a>
@@ -146,7 +146,7 @@
             {% endfor %}
             {% for g in user|matman_groups %}
                 <li>
-                    <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+                    <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
                        href="{% url "ietf.group.views.meetings" g.acronym %}">
                         {{ g.acronym }} {{ g.type.slug }} meetings
                     </a>
@@ -163,7 +163,7 @@
             </li>
             {% for g in user|managed_review_groups %}
                 <li>
-                    <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+                    <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
                        href="{% url "ietf.group.views.review_requests" g.acronym %}">
                         {{ g.acronym }} reviews
                     </a>
@@ -180,7 +180,7 @@
             </li>
             {% for nomcom in nomcoms %}
                 <li>
-                    <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+                    <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
                        href="{% url "ietf.nomcom.views.private_index" nomcom.year %}">
                         {{ nomcom|capfirst }}
                     </a>
@@ -196,25 +196,25 @@
         RFC streams
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url "ietf.group.views.stream_documents" acronym="iab" %}">
             IAB
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url "ietf.group.views.stream_documents" acronym="irtf" %}">
             IRTF
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url "ietf.group.views.stream_documents" acronym="ise" %}">
             ISE
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url "ietf.group.views.stream_documents" acronym="editorial" %}">
             Editorial
         </a>
@@ -240,43 +240,43 @@
         </li>
     {% endif %}
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'agenda' %}">
             Agenda
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'ietf.meeting.views.materials' %}">
             Materials
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'floor-plan' %}">
             Floor plan
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="https://www.ietf.org/how/meetings/register/">
             Registration
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'ietf.meeting.views.important_dates' %}">
             Important dates
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'ietf.secr.sreq.views.main' %}">
             Request a session
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'ietf.meeting.views.meeting_requests' %}">
             Session requests
         </a>
@@ -291,7 +291,7 @@
         </li>
     {% endif %}
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'ietf.meeting.views.upcoming' %}">
             Upcoming meetings
         </a>
@@ -306,13 +306,13 @@
         </li>
     {% endif %}
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'ietf.meeting.views.past' %}">
             Past meetings
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="https://www.ietf.org/how/meetings/past/">
             Meeting proceedings
         </a>
@@ -338,56 +338,56 @@
         </li>
     {% endif %}
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'ietf.ipr.views.showlist' %}">
             IPR disclosures
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'ietf.liaisons.views.liaison_list' %}">
             Liaison statements
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'ietf.iesg.views.agenda' %}">
             IESG agenda
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'ietf.nomcom.views.index' %}">
             NomComs
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'ietf.doc.views_downref.downref_registry' %}">
             Downref registry
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url "ietf.stats.views.stats_index" %}">
             Statistics
         </a>
         <ul class="dropdown-menu {% if flavor == 'top' %}mt-n1{% else %}ms-n1{% endif %}">
             <li>
-                <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+                <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
                    href="{% url 'ietf.stats.views.document_stats' %}">
                     I-Ds/RFCs
                 </a>
             </li>
             <li>
-                <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+                <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
                    href="{% url 'ietf.stats.views.meeting_stats' %}">
                     Meetings
                 </a>
             </li>
             {% if user and user.is_authenticated %}
                 <li>
-                    <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+                    <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
                        href="{% url 'ietf.stats.views.review_stats' %}">
                         Reviews
                     </a>
@@ -396,13 +396,13 @@
         </ul>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'ietf.api.views.api_help' %}">
             API Help
         </a>
     </li>
     <li>
-        <a class="dropdown-item {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{% url 'ietf.release.views.release' %}">
             Release notes
         </a>
@@ -412,7 +412,7 @@
         </li>
     {% endif %}
     <li>
-        <a class="dropdown-item text-danger {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item text-danger {% if flavor != 'top' %}text-wrap{% endif %}"
            target="_blank" href="https://github.com/ietf-tools/datatracker/issues/new/choose">
             <i class="bi bi-bug">
             </i>

ietf/templates/base/menu_user.html

@@ -23,7 +23,7 @@
     {% url 'django.contrib.auth.views.logout' as logout_url %}
     {% if request.get_full_path == logout_url %}
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                rel="nofollow"
                href="{% url 'ietf.ietfauth.views.login' %}">
                 Sign in
@@ -34,14 +34,14 @@
             <li>
                 <form id="logout-form" method="post" action="{% url 'django.contrib.auth.views.logout' %}">
                     {% csrf_token %}
-                    <button class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}" 
+                    <button class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}" 
                             type="submit">
                         Sign out
                     </button>
                 </form>
             </li>
             <li>
-                <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+                <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                    rel="nofollow"
                    href="{% url 'ietf.ietfauth.views.profile' %}">
                     Account info
@@ -49,35 +49,35 @@
             </li>
             {% if user and user.person %}
                 <li>
-                    <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+                    <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                        href="{% url 'ietf.person.views.profile' email_or_name=user.person.name %}">
                         Public profile page
                     </a>
                 </li>
             {% endif %}
             <li>
-                <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+                <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                    href="{% url 'ietf.cookies.views.preferences' %}"
                    rel="nofollow">
                     Preferences
                 </a>
             </li>
             <li>
-                <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+                <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                    href="{% url 'ietf.ietfauth.views.apikey_index' %}"
                    rel="nofollow">
                     API keys
                 </a>
             </li>
             <li>
-                <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+                <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                    rel="nofollow"
                    href="{% url 'ietf.ietfauth.views.change_password' %}">
                     Change password
                 </a>
             </li>
             <li>
-                <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+                <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                    rel="nofollow"
                    href="{% url 'ietf.ietfauth.views.change_username' %}">
                     Change username
@@ -85,21 +85,21 @@
             </li>
         {% else %}
             <li>
-                <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+                <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                    rel="nofollow"
                    href="{% url 'ietf.ietfauth.views.login' %}?next={{ request.get_full_path|urlencode }}">
                     Sign in
                 </a>
             </li>
             <li>
-                <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+                <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                    rel="nofollow"
                    href="{% url 'ietf.ietfauth.views.password_reset' %}">
                     Password reset
                 </a>
             </li>
             <li>
-                <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+                <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                    href="{% url 'ietf.cookies.views.preferences' %}"
                    rel="nofollow">
                     Preferences
@@ -109,7 +109,7 @@
     {% endif %}
     {% if not request.user.is_authenticated %}
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                href="{% url 'ietf.ietfauth.views.create_account' %}">
                 New account
             </a>
@@ -117,7 +117,7 @@
     {% endif %}
     {% if user|has_role:"Reviewer" %}
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                href="{% url 'ietf.ietfauth.views.review_overview' %}">
                 My reviews
             </a>
@@ -127,31 +127,31 @@
         {% if flavor == "top" %}<li><hr class="dropdown-divider"></li>{% endif %}
         <li {% if flavor == "top" %}class="dropdown-header"{% else %}class="nav-item fw-bolder"{% endif %}>AD dashboard</li>
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                href="{% url 'ietf.doc.views_search.docs_for_ad' name=user.person.full_name_as_key %}">
                 My docs
             </a>
         </li>
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                href="{% url 'ietf.iesg.views.agenda_documents' %}">
                 Next telechat
             </a>
         </li>
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                href="{% url 'ietf.iesg.views.discusses' %}">
                 Discusses
             </a>
         </li>
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                href="{% url 'ietf.iesg.views.milestones_needing_review' %}">
                 Milestone review
             </a>
         </li>
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                href="{% url 'ietf.doc.views_search.drafts_in_last_call' %}">
                 Last Call docs
             </a>
@@ -163,31 +163,31 @@
             IETF secretariat
         </li>
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                href="{% url 'admin:iesg_telechatdate_changelist' %}">
                 Telechat dates
             </a>
         </li>
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                href="{% url 'admin:iesg_telechatagendaitem_changelist' %}">
                 Management items
             </a>
         </li>
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                href="{% url 'ietf.iesg.views.milestones_needing_review' %}">
                 Milestones
             </a>
         </li>
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                href="{% url 'ietf.sync.views.discrepancies' %}">
                 Sync discrepancies
             </a>
         </li>
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                href="{% url 'ietf.ietfauth.views.add_account_allowlist' %}">
                 Account allowlist
             </a>
@@ -202,7 +202,7 @@
             IANA
         </li>
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                href="{% url 'ietf.sync.views.discrepancies' %}">
                 Sync discrepancies
             </a>
@@ -217,7 +217,7 @@
             RFC Editor
         </li>
         <li>
-            <a class="dropdown-item {% if flavor != 'top' %} text-wrap link-primary{% endif %}"
+            <a class="dropdown-item {% if flavor != 'top' %} text-wrap{% endif %}"
                href="{% url 'ietf.sync.views.discrepancies' %}">
                 Sync discrepancies
             </a>

ietf/templates/base/menu_wg.html

@@ -3,7 +3,7 @@
 {% origin %}
 {% for p in parents %}
     <li class="dropend group-menu group-parent-{{ p.id }}">
-        <a class="dropdown-item dropdown-toggle {% if flavor != 'top' %}text-wrap link-primary{% endif %}"
+        <a class="dropdown-item dropdown-toggle {% if flavor != 'top' %}text-wrap{% endif %}"
            href="{{ p.menu_url }}">
             {{ p.short_name }}
         </a>

ietf/templates/doc/stats/highstock.html

@@ -3,6 +3,9 @@
 {% load origin %}
 {% load static %}
 {% load ietf_filters %}
+{% block pagehead %}
+    <link rel="stylesheet" href="{% static "ietf/css/highcharts.css" %}">
+{% endblock %}
 {% block js %}
     <script src="{% static 'ietf/js/highstock.js' %}"></script>
     <script>

ietf/templates/group/active_areas.html

@@ -1,6 +1,9 @@
 {% extends "base.html" %}
 {# Copyright The IETF Trust 2015, All Rights Reserved #}
 {% load origin textfilters ietf_filters static %}
+{% block pagehead %}
+    <link rel="stylesheet" href="{% static "ietf/css/highcharts.css" %}">
+{% endblock %}
 {% block title %}Active areas{% endblock %}
 {% block content %}
     {% origin %}

ietf/templates/group/group_about.html

@@ -14,6 +14,7 @@ height: 100vh;
 {% endblock %}
 {% block pagehead %}
     <link rel="stylesheet" href="{% static "ietf/css/list.css" %}">
+    <link rel="stylesheet" href="{% static "ietf/css/highcharts.css" %}">
 {% endblock %}
 {% block group_content %}
     {% origin %}

ietf/templates/person/profile.html

@@ -7,6 +7,7 @@
 {% load group_filters %}
 {% block pagehead %}
     <link rel="stylesheet" href="{% static "ietf/css/list.css" %}">
+    <link rel="stylesheet" href="{% static "ietf/css/highcharts.css" %}">
 {% endblock %}
 {% block title %}Profile for {{ persons.0 }}{% endblock %}
 {% block content %}

ietf/templates/stats/document_stats.html

@@ -4,6 +4,7 @@
 {% block title %}{{ stats_title }}{% endblock %}
 {% block pagehead %}
     <link rel="stylesheet" href="{% static "ietf/css/list.css" %}">
+    <link rel="stylesheet" href="{% static "ietf/css/highcharts.css" %}">
 {% endblock %}
 {% block content %}
     {% origin %}

ietf/templates/stats/meeting_stats.html

@@ -4,6 +4,7 @@
 {% block title %}{{ stats_title }}{% endblock %}
 {% block pagehead %}
     <link rel="stylesheet" href="{% static 'ietf/css/list.css' %}">
+    <link rel="stylesheet" href="{% static "ietf/css/highcharts.css" %}">
 {% endblock %}
 {% block content %}
     {% origin %}

ietf/templates/stats/review_stats.html

@@ -5,6 +5,7 @@
 {% block pagehead %}
     <link rel="stylesheet" href="{% static "ietf/css/list.css" %}">
     <link rel="stylesheet" href="{% static 'ietf/css/datepicker.css' %}">
+    <link rel="stylesheet" href="{% static "ietf/css/highcharts.css" %}">
 {% endblock %}
 {% block content %}
     {% origin %}

package.json

@@ -82,6 +82,7 @@
         "ietf/static/css/document_html_inline.scss",
         "ietf/static/css/document_html_referenced.scss",
         "ietf/static/css/document_html_txt.scss",
+        "ietf/static/css/highcharts.scss",
         "ietf/static/css/ietf.scss",
         "ietf/static/css/liaisons.css",
         "ietf/static/css/list.scss",