From 0095f26934f0b259c89862b4ec630f10405cff01 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Fri, 6 Aug 2021 10:50:43 +0800
Subject: [PATCH] MDL-71385 theme: Fix contrast for dimmed text against striped
 table rows

In order to achieve good colour contrast between dimmed text and striped
table rows, the background colour of the striped rows are being
lightened to 0.03 alpha. While $gray-600 is being adjusted to a bit
darker shade of #6a737b. This gives a colour contrast ratio of 4.5:1
between the dimmed text colour and the striped table row background
which meets WCAG 2.1 Level AA requirements.

Comparing the normal font colour (#212529) with the adjusted dimmed text
colour gives a contrast ratio of 3.20:1 which meets WCAG 2.1 Level AA
requirements and still makes them distinguishable from one another.
---
 theme/boost/scss/preset/default.scss   |   5 +-
 theme/boost/style/moodle.css           | 146 ++++++++++++-------------
 theme/classic/scss/preset/default.scss |   5 +-
 theme/classic/style/moodle.css         | 146 ++++++++++++-------------
 4 files changed, 154 insertions(+), 148 deletions(-)

diff --git a/theme/boost/scss/preset/default.scss b/theme/boost/scss/preset/default.scss
index 7d9b33dde1e..697bd7bcd64 100644
--- a/theme/boost/scss/preset/default.scss
+++ b/theme/boost/scss/preset/default.scss
@@ -5,7 +5,7 @@ $gray-200: #e9ecef !default;
 $gray-300: #dee2e6 !default;
 $gray-400: #ced4da !default;
 $gray-500: #8f959e !default;
-$gray-600: #6c757d !default;
+$gray-600: #6a737b !default;
 $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
@@ -32,6 +32,9 @@ $secondary:     $gray-400 !default;
 $info-outline:    #1f7e9a;
 $warning-outline: #a6670e;
 
+// Tables
+$table-accent-bg:             rgba($black, .03) !default;
+
 // Options
 $enable-rounded: false !default;
 $enable-responsive-font-sizes: true !default;
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index c9a99b84a6d..6423f70d10d 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -2344,7 +2344,7 @@
   --teal: #20c997;
   --cyan: #008196;
   --white: #fff;
-  --gray: #6c757d;
+  --gray: #6a737b;
   --gray-dark: #343a40;
   --primary: #0f6fc5;
   --secondary: #ced4da;
@@ -2505,7 +2505,7 @@ table {
 caption {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
-  color: #6c757d;
+  color: #6a737b;
   text-align: left;
   caption-side: bottom; }
 
@@ -2750,7 +2750,7 @@ mark,
 .blockquote-footer {
   display: block;
   font-size: 80%;
-  color: #6c757d; }
+  color: #6a737b; }
   .blockquote-footer::before {
     content: "\2014\00A0"; }
 
@@ -2774,7 +2774,7 @@ mark,
 
 .figure-caption {
   font-size: 90%;
-  color: #6c757d; }
+  color: #6a737b; }
 
 code {
   font-size: 87.5%;
@@ -3545,7 +3545,7 @@ pre {
   border: 0; }
 
 .table-striped tbody tr:nth-of-type(odd) {
-  background-color: rgba(0, 0, 0, 0.05); }
+  background-color: rgba(0, 0, 0, 0.03); }
 
 .table-hover tbody tr:hover {
   color: #212529;
@@ -3800,7 +3800,7 @@ pre {
     outline: 0;
     box-shadow: 0 0 0 0.2rem rgba(15, 111, 197, 0.75); }
   .form-control::placeholder {
-    color: #6c757d;
+    color: #6a737b;
     opacity: 1; }
   .form-control:disabled, .form-control[readonly] {
     background-color: #e9ecef;
@@ -3910,7 +3910,7 @@ textarea.form-control {
   margin-left: -1.25rem; }
   .form-check-input[disabled] ~ .form-check-label,
   .form-check-input:disabled ~ .form-check-label {
-    color: #6c757d; }
+    color: #6a737b; }
 
 .form-check-label {
   margin-bottom: 0; }
@@ -4550,7 +4550,7 @@ fieldset:disabled a.btn {
   .btn-link:focus, .btn-link.focus {
     text-decoration: underline; }
   .btn-link:disabled, .btn-link.disabled {
-    color: #6c757d;
+    color: #6a737b;
     pointer-events: none; }
 
 .btn-lg, .btn-group-lg > .btn {
@@ -4783,7 +4783,7 @@ input[type="button"].btn-block {
     text-decoration: none;
     background-color: #0f6fc5; }
   .dropdown-item.disabled, .dropdown-item:disabled {
-    color: #6c757d;
+    color: #6a737b;
     pointer-events: none;
     background-color: transparent; }
 
@@ -4795,7 +4795,7 @@ input[type="button"].btn-block {
   padding: 0.5rem 1.5rem;
   margin-bottom: 0;
   font-size: 0.8203125rem;
-  color: #6c757d;
+  color: #6a737b;
   white-space: nowrap; }
 
 .dropdown-item-text {
@@ -5026,7 +5026,7 @@ input[type="button"].btn-block {
     background-color: #90c6f7;
     border-color: #90c6f7; }
   .custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
-    color: #6c757d; }
+    color: #6a737b; }
     .custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
       background-color: #e9ecef; }
 
@@ -5133,7 +5133,7 @@ input[type="button"].btn-block {
     padding-right: 0.75rem;
     background-image: none; }
   .custom-select:disabled {
-    color: #6c757d;
+    color: #6a737b;
     background-color: #e9ecef; }
   .custom-select::-ms-expand {
     display: none; }
@@ -5328,7 +5328,7 @@ input[type="button"].btn-block {
   .nav-link:hover, .nav-link:focus {
     text-decoration: none; }
   .nav-link.disabled {
-    color: #6c757d;
+    color: #6a737b;
     pointer-events: none;
     cursor: default; }
 
@@ -5341,7 +5341,7 @@ input[type="button"].btn-block {
     .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
       border-color: #e9ecef #e9ecef #dee2e6; }
     .nav-tabs .nav-link.disabled {
-      color: #6c757d;
+      color: #6a737b;
       background-color: transparent;
       border-color: transparent; }
   .nav-tabs .nav-link.active,
@@ -5777,14 +5777,14 @@ input[type="button"].btn-block {
     .breadcrumb-item + .breadcrumb-item::before {
       display: inline-block;
       padding-right: 0.5rem;
-      color: #6c757d;
+      color: #6a737b;
       content: "/"; }
   .breadcrumb-item + .breadcrumb-item:hover::before {
     text-decoration: underline; }
   .breadcrumb-item + .breadcrumb-item:hover::before {
     text-decoration: none; }
   .breadcrumb-item.active {
-    color: #6c757d; }
+    color: #6a737b; }
 
 .pagination {
   display: flex;
@@ -5821,7 +5821,7 @@ input[type="button"].btn-block {
   border-color: #0f6fc5; }
 
 .page-item.disabled .page-link {
-  color: #6c757d;
+  color: #6a737b;
   pointer-events: none;
   cursor: auto;
   background-color: #fff;
@@ -6122,7 +6122,7 @@ input[type="button"].btn-block {
   background-color: #fff;
   border: 1px solid rgba(0, 0, 0, 0.125); }
   .list-group-item.disabled, .list-group-item:disabled {
-    color: #6c757d;
+    color: #6a737b;
     pointer-events: none;
     background-color: #fff; }
   .list-group-item.active {
@@ -6337,7 +6337,7 @@ a.close.disabled {
   display: flex;
   align-items: center;
   padding: 0.25rem 0.75rem;
-  color: #6c757d;
+  color: #6a737b;
   background-color: rgba(255, 255, 255, 0.85);
   background-clip: padding-box;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
@@ -9517,7 +9517,7 @@ a.text-dark:hover, a.text-dark:focus {
   color: #212529 !important; }
 
 .text-muted {
-  color: #6c757d !important; }
+  color: #6a737b !important; }
 
 .text-black-50 {
   color: rgba(0, 0, 0, 0.5) !important; }
@@ -9738,7 +9738,7 @@ a.dimmed_text:visited,
 .usersuspended a:visited,
 .dimmed_category,
 .dimmed_category a {
-  color: #6c757d; }
+  color: #6a737b; }
 
 .aalink.focus, .aalink:focus,
 #page-footer a:not([class]).focus,
@@ -10388,7 +10388,7 @@ tr.flagged-tag a {
   padding-left: 10px; }
 
 .tag_feed .media .muted a {
-  color: #6c757d; }
+  color: #6a737b; }
 
 .tag_cloud {
   text-align: center; }
@@ -11026,7 +11026,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     .modchoosercontainer .optionscontainer .option .optionactions .optionaction,
     .modchoosercontainer .searchresultitemscontainer .option .optionactions .optionaction {
       cursor: pointer;
-      color: #6c757d; }
+      color: #6a737b; }
       .modchoosercontainer .optionscontainer .option .optionactions .optionaction i,
       .modchoosercontainer .searchresultitemscontainer .option .optionactions .optionaction i {
         margin: 0; }
@@ -11839,22 +11839,22 @@ input[disabled] {
       margin: 0.125rem; }
       .nav-tabs .nav-link.active,
       .nav-pills .nav-link.active {
-        color: #6c757d;
-        border-color: #6c757d;
-        border-color: #6c757d; }
+        color: #6a737b;
+        border-color: #6a737b;
+        border-color: #6a737b; }
         .nav-tabs .nav-link.active:hover,
         .nav-pills .nav-link.active:hover {
           color: #fff;
-          background-color: #6c757d;
-          border-color: #6c757d; }
+          background-color: #6a737b;
+          border-color: #6a737b; }
         .nav-tabs .nav-link.active:focus, .nav-tabs .nav-link.active.focus,
         .nav-pills .nav-link.active:focus,
         .nav-pills .nav-link.active.focus {
-          box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); }
+          box-shadow: 0 0 0 0.2rem rgba(106, 115, 123, 0.5); }
         .nav-tabs .nav-link.active.disabled, .nav-tabs .nav-link.active:disabled,
         .nav-pills .nav-link.active.disabled,
         .nav-pills .nav-link.active:disabled {
-          color: #6c757d;
+          color: #6a737b;
           background-color: transparent; }
         .nav-tabs .nav-link.active:not(:disabled):not(.disabled):active, .nav-tabs .nav-link.active:not(:disabled):not(.disabled).active,
         .show > .nav-tabs .nav-link.active.dropdown-toggle,
@@ -11863,15 +11863,15 @@ input[disabled] {
         .show >
         .nav-pills .nav-link.active.dropdown-toggle {
           color: #fff;
-          background-color: #6c757d;
-          border-color: #6c757d; }
+          background-color: #6a737b;
+          border-color: #6a737b; }
           .nav-tabs .nav-link.active:not(:disabled):not(.disabled):active:focus, .nav-tabs .nav-link.active:not(:disabled):not(.disabled).active:focus,
           .show > .nav-tabs .nav-link.active.dropdown-toggle:focus,
           .nav-pills .nav-link.active:not(:disabled):not(.disabled):active:focus,
           .nav-pills .nav-link.active:not(:disabled):not(.disabled).active:focus,
           .show >
           .nav-pills .nav-link.active.dropdown-toggle:focus {
-            box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); } }
+            box-shadow: 0 0 0 0.2rem rgba(106, 115, 123, 0.5); } }
 
 @media (max-width: 576px) and (max-height: 320px) {
   div#page {
@@ -12373,12 +12373,12 @@ input[disabled] {
 
 #page-admin-plugins #plugins-control-panel .pluginname .componentname {
   font-size: 0.8203125rem;
-  color: #6c757d;
+  color: #6a737b;
   margin-left: 22px; }
 
 #page-admin-plugins #plugins-control-panel .version .versionnumber {
   font-size: 0.8203125rem;
-  color: #6c757d; }
+  color: #6a737b; }
 
 #page-admin-plugins #plugins-control-panel .uninstall a {
   color: #ca3120; }
@@ -12388,7 +12388,7 @@ input[disabled] {
 
 #page-admin-plugins #plugins-control-panel .notes .requiredby {
   font-size: 0.8203125rem;
-  color: #6c757d; }
+  color: #6a737b; }
 
 #plugins-check-page #plugins-check .status-missing td,
 #plugins-check-page #plugins-check .status-downgrade td {
@@ -12492,7 +12492,7 @@ input[disabled] {
 
 #page-admin-tasklogs .task-class {
   font-size: 0.8203125rem;
-  color: #6c757d; }
+  color: #6a737b; }
 
 .path-admin-tool-uploaduser .uuwarning {
   background-color: #fcefdc; }
@@ -12767,7 +12767,7 @@ input[disabled] {
     margin-right: 2px; }
 
 .block.invisibleblock .card-title {
-  color: #6c757d; }
+  color: #6a737b; }
 
 @media (max-width: 767.98px) {
   .block.card {
@@ -12968,7 +12968,7 @@ input[disabled] {
     font-size: 0.8em;
     text-align: center; }
   .block .minicalendar td.weekend {
-    color: #6c757d; }
+    color: #6a737b; }
   .block .minicalendar td a {
     width: 100%;
     height: 100%;
@@ -13084,7 +13084,7 @@ table.calendartable caption {
     margin: 0; }
 
 .cal_courses_flt {
-  color: #6c757d; }
+  color: #6a737b; }
 
 .content-bank-container .cb-content-wrapper {
   padding: 0.5rem;
@@ -13266,7 +13266,7 @@ body:not(.editing) .sitetopic ul.section {
     .section .activity .activityinstance .dimmed .activityicon {
       opacity: .5; }
   .section .activity .stealth {
-    color: #6c757d; }
+    color: #6a737b; }
   .section .activity a.stealth,
   .section .activity a.stealth:hover {
     color: #61aef3 !important;
@@ -13356,7 +13356,7 @@ body:not(.editing) .sitetopic ul.section {
 
 .editing .section .activity:hover,
 .editing .section .activity.action-menu-shown {
-  background-color: rgba(0, 0, 0, 0.05); }
+  background-color: rgba(0, 0, 0, 0.03); }
 
 .course-content .current {
   position: relative; }
@@ -13381,7 +13381,7 @@ body:not(.editing) .sitetopic ul.section {
   margin: 2px 5px 2px 5px; }
 
 .course-content .section-summary .section-summary-activities .activity-count {
-  color: #6c757d;
+  color: #6a737b;
   font-size: 0.8203125rem;
   margin: 3px;
   white-space: nowrap;
@@ -13431,7 +13431,7 @@ body:not(.editing) .sitetopic ul.section {
 .course-content ul li.section.hidden .sectionname > span,
 .course-content ul li.section.hidden .content > div.summary,
 .course-content ul li.section.hidden .activity .activityinstance {
-  color: #6c757d; }
+  color: #6a737b; }
 
 .course-content ul.topics,
 .course-content ul.weeks {
@@ -13744,7 +13744,7 @@ span.editinstructions {
   padding-bottom: 0.5rem; }
 
 .courses .coursebox.even {
-  background-color: rgba(0, 0, 0, 0.05); }
+  background-color: rgba(0, 0, 0, 0.03); }
 
 .courses > .paging.paging-morelink {
   text-align: center;
@@ -13878,9 +13878,9 @@ span.editinstructions {
   #course-category-listings .listitem > div .idnumber {
     margin-right: 2em; }
   #course-category-listings .listitem[data-visible="0"] {
-    color: #6c757d; }
+    color: #6a737b; }
     #course-category-listings .listitem[data-visible="0"] > div > a {
-      color: #6c757d; }
+      color: #6a737b; }
     #course-category-listings .listitem[data-visible="0"] > div .item-actions .action-show {
       display: inline; }
     #course-category-listings .listitem[data-visible="0"] > div .item-actions .action-hide {
@@ -13990,7 +13990,7 @@ span.editinstructions {
   #course-category-listings .listing-pagination-totals {
     text-align: center; }
     #course-category-listings .listing-pagination-totals.dimmed {
-      color: #6c757d;
+      color: #6a737b;
       margin: 0.4rem 1rem 0.45rem; }
   #course-category-listings .select-a-category .notifymessage,
   #course-category-listings .select-a-category .alert {
@@ -14721,7 +14721,7 @@ a.ygtvspacer:hover {
   background-color: #ebebe4; }
 
 .fitem.disabled .fp-btn-choose {
-  color: #6c757d; }
+  color: #6a737b; }
 
 .fitem.disabled .filepicker-filelist .filepicker-filename {
   display: none; }
@@ -15599,7 +15599,7 @@ a.ygtvspacer:hover {
     text-align: left;
     font-weight: normal; }
   #categoryquestions > tbody > tr.r1 {
-    background-color: rgba(0, 0, 0, 0.05); }
+    background-color: rgba(0, 0, 0, 0.03); }
   #categoryquestions > tbody > tr.highlight {
     border: 1px solid #008196; }
   #categoryquestions .checkbox {
@@ -16282,14 +16282,14 @@ body.path-question-type .mform fieldset.hidden {
 
 .simplesearchform .btn-submit {
   border-color: #8f959e;
-  color: #6c757d; }
+  color: #6a737b; }
 
 .simplesearchform .btn-close,
 .simplesearchform .btn-clear {
   position: absolute;
   top: 0;
   right: 0;
-  color: #6c757d;
+  color: #6a737b;
   z-index: 4; }
 
 .simplesearchform .btn-close {
@@ -16420,7 +16420,7 @@ input#id_externalurl {
 
 .form-defaultinfo,
 .form-label .form-shortname {
-  color: #6c757d; }
+  color: #6a737b; }
 
 .form-label .form-shortname {
   font-size: 0.703125rem;
@@ -16433,10 +16433,10 @@ input#id_externalurl {
   margin-left: 0.5rem; }
 
 .formsettingheading .form-horizontal {
-  color: #6c757d; }
+  color: #6a737b; }
 
 .no-felement.fstatic {
-  color: #6c757d;
+  color: #6a737b;
   padding-top: 5px; }
 
 .no-fitem .fstaticlabel {
@@ -17444,7 +17444,7 @@ div#dock {
   width: 100%; }
 
 .path-mod-survey .surveytable > tbody > tr:nth-of-type(even) {
-  background-color: rgba(0, 0, 0, 0.05); }
+  background-color: rgba(0, 0, 0, 0.03); }
 
 .path-mod-survey .surveytable .rblock label {
   text-align: center; }
@@ -17604,7 +17604,7 @@ div#dock {
 .path-mod-quiz #mod_quiz_navblock .qnbutton.complete .trafficlight,
 .path-mod-quiz #mod_quiz_navblock .qnbutton.answersaved .trafficlight,
 .path-mod-quiz #mod_quiz_navblock .qnbutton.requiresgrading .trafficlight {
-  background-color: #6c757d; }
+  background-color: #6a737b; }
 
 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
   height: 1.4em;
@@ -17929,7 +17929,7 @@ div#dock {
   /* Striped rows like a table */ }
   .path-backup .mform .root_setting:nth-of-type(odd),
   .path-backup .mform .grouped_settings:nth-of-type(odd) {
-    background-color: rgba(0, 0, 0, 0.05); }
+    background-color: rgba(0, 0, 0, 0.03); }
   .path-backup .mform .root_setting:nth-of-type(even),
   .path-backup .mform .grouped_settings:nth-of-type(even) {
     background-color: #fff; }
@@ -17992,7 +17992,7 @@ div#dock {
   margin-top: 1rem;
   margin-bottom: 1rem; }
   .path-backup .backup_progress .backup_stage {
-    color: #6c757d; }
+    color: #6a737b; }
     .path-backup .backup_progress .backup_stage.backup_stage_current {
       font-weight: bold;
       color: inherit; }
@@ -18061,7 +18061,7 @@ div#dock {
   .generaltable tbody + tbody {
     border-top: 2px solid #dee2e6; }
   .generaltable tbody tr:nth-of-type(odd) {
-    background-color: rgba(0, 0, 0, 0.05); }
+    background-color: rgba(0, 0, 0, 0.03); }
   .generaltable.table-sm th,
   .generaltable.table-sm td {
     padding: 0.3rem; }
@@ -18503,7 +18503,7 @@ p.arrow_button {
   padding-left: 269px; }
 
 .path-grade-edit-tree .setup-grades.generaltable .levelodd {
-  background-color: rgba(0, 0, 0, 0.05); }
+  background-color: rgba(0, 0, 0, 0.03); }
 
 /**
  * Grader report.
@@ -18532,7 +18532,7 @@ p.arrow_button {
 .path-grade-report-user .user-grade {
   border: none; }
   .path-grade-report-user .user-grade.generaltable .levelodd {
-    background-color: rgba(0, 0, 0, 0.05); }
+    background-color: rgba(0, 0, 0, 0.03); }
   .path-grade-report-user .user-grade .column-contributiontocoursetotal,
   .path-grade-report-user .user-grade .column-range,
   .path-grade-report-user .user-grade .column-percentage,
@@ -19303,7 +19303,7 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
       font-size: 4em; }
 
 .form-control:-ms-input-placeholder {
-  color: #6c757d; }
+  color: #6a737b; }
 
 .custom-select {
   -webkit-appearance: none;
@@ -19667,26 +19667,26 @@ body {
   border-radius: 50%; }
 
 .btn-outline-secondary {
-  color: #6c757d;
-  border-color: #6c757d;
-  border-color: #6c757d; }
+  color: #6a737b;
+  border-color: #6a737b;
+  border-color: #6a737b; }
   .btn-outline-secondary:hover {
     color: #fff;
-    background-color: #6c757d;
-    border-color: #6c757d; }
+    background-color: #6a737b;
+    border-color: #6a737b; }
   .btn-outline-secondary:focus, .btn-outline-secondary.focus {
-    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(106, 115, 123, 0.5); }
   .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
-    color: #6c757d;
+    color: #6a737b;
     background-color: transparent; }
   .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
   .show > .btn-outline-secondary.dropdown-toggle {
     color: #fff;
-    background-color: #6c757d;
-    border-color: #6c757d; }
+    background-color: #6a737b;
+    border-color: #6a737b; }
     .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
     .show > .btn-outline-secondary.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(106, 115, 123, 0.5); }
 
 .btn-outline-info {
   color: #1f7e9a;
diff --git a/theme/classic/scss/preset/default.scss b/theme/classic/scss/preset/default.scss
index 6238e829310..3124ee51060 100644
--- a/theme/classic/scss/preset/default.scss
+++ b/theme/classic/scss/preset/default.scss
@@ -5,7 +5,7 @@ $gray-200: #e9ecef !default;
 $gray-300: #dee2e6 !default;
 $gray-400: #ced4da !default;
 $gray-500: #8f959e !default;
-$gray-600: #6e7377 !default;
+$gray-600: #6a737b !default;
 $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
@@ -32,6 +32,9 @@ $secondary:     $gray-400 !default;
 $info-outline:    #1f7e9a;
 $warning-outline: #a6670e;
 
+// Tables
+$table-accent-bg:             rgba($black, .03) !default;
+
 // Options
 $enable-rounded: true !default;
 $enable-responsive-font-sizes: true !default;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index efe97f79fe5..bd8fdc46795 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -2344,7 +2344,7 @@
   --teal: #20c997;
   --cyan: #008196;
   --white: #fff;
-  --gray: #6e7377;
+  --gray: #6a737b;
   --gray-dark: #343a40;
   --primary: #0f6fc5;
   --secondary: #ced4da;
@@ -2505,7 +2505,7 @@ table {
 caption {
   padding-top: 0.75rem;
   padding-bottom: 0.75rem;
-  color: #6e7377;
+  color: #6a737b;
   text-align: left;
   caption-side: bottom; }
 
@@ -2750,7 +2750,7 @@ mark,
 .blockquote-footer {
   display: block;
   font-size: 80%;
-  color: #6e7377; }
+  color: #6a737b; }
   .blockquote-footer::before {
     content: "\2014\00A0"; }
 
@@ -2775,7 +2775,7 @@ mark,
 
 .figure-caption {
   font-size: 90%;
-  color: #6e7377; }
+  color: #6a737b; }
 
 code {
   font-size: 87.5%;
@@ -3547,7 +3547,7 @@ pre {
   border: 0; }
 
 .table-striped tbody tr:nth-of-type(odd) {
-  background-color: rgba(0, 0, 0, 0.05); }
+  background-color: rgba(0, 0, 0, 0.03); }
 
 .table-hover tbody tr:hover {
   color: #212529;
@@ -3802,7 +3802,7 @@ pre {
     outline: 0;
     box-shadow: 0 0 0 0.2rem rgba(15, 111, 197, 0.75); }
   .form-control::placeholder {
-    color: #6e7377;
+    color: #6a737b;
     opacity: 1; }
   .form-control:disabled, .form-control[readonly] {
     background-color: #e9ecef;
@@ -3914,7 +3914,7 @@ textarea.form-control {
   margin-left: -1.25rem; }
   .form-check-input[disabled] ~ .form-check-label,
   .form-check-input:disabled ~ .form-check-label {
-    color: #6e7377; }
+    color: #6a737b; }
 
 .form-check-label {
   margin-bottom: 0; }
@@ -4556,7 +4556,7 @@ fieldset:disabled a.btn {
   .btn-link:focus, .btn-link.focus {
     text-decoration: underline; }
   .btn-link:disabled, .btn-link.disabled {
-    color: #6e7377;
+    color: #6a737b;
     pointer-events: none; }
 
 .btn-lg, .btn-group-lg > .btn {
@@ -4790,7 +4790,7 @@ input[type="button"].btn-block {
     text-decoration: none;
     background-color: #0f6fc5; }
   .dropdown-item.disabled, .dropdown-item:disabled {
-    color: #6e7377;
+    color: #6a737b;
     pointer-events: none;
     background-color: transparent; }
 
@@ -4802,7 +4802,7 @@ input[type="button"].btn-block {
   padding: 0.5rem 1.5rem;
   margin-bottom: 0;
   font-size: 0.8203125rem;
-  color: #6e7377;
+  color: #6a737b;
   white-space: nowrap; }
 
 .dropdown-item-text {
@@ -5087,7 +5087,7 @@ input[type="button"].btn-block {
     background-color: #90c6f7;
     border-color: #90c6f7; }
   .custom-control-input[disabled] ~ .custom-control-label, .custom-control-input:disabled ~ .custom-control-label {
-    color: #6e7377; }
+    color: #6a737b; }
     .custom-control-input[disabled] ~ .custom-control-label::before, .custom-control-input:disabled ~ .custom-control-label::before {
       background-color: #e9ecef; }
 
@@ -5197,7 +5197,7 @@ input[type="button"].btn-block {
     padding-right: 0.75rem;
     background-image: none; }
   .custom-select:disabled {
-    color: #6e7377;
+    color: #6a737b;
     background-color: #e9ecef; }
   .custom-select::-ms-expand {
     display: none; }
@@ -5401,7 +5401,7 @@ input[type="button"].btn-block {
   .nav-link:hover, .nav-link:focus {
     text-decoration: none; }
   .nav-link.disabled {
-    color: #6e7377;
+    color: #6a737b;
     pointer-events: none;
     cursor: default; }
 
@@ -5416,7 +5416,7 @@ input[type="button"].btn-block {
     .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
       border-color: #e9ecef #e9ecef #dee2e6; }
     .nav-tabs .nav-link.disabled {
-      color: #6e7377;
+      color: #6a737b;
       background-color: transparent;
       border-color: transparent; }
   .nav-tabs .nav-link.active,
@@ -5902,14 +5902,14 @@ input[type="button"].btn-block {
     .breadcrumb-item + .breadcrumb-item::before {
       display: inline-block;
       padding-right: 0.5rem;
-      color: #6e7377;
+      color: #6a737b;
       content: "/"; }
   .breadcrumb-item + .breadcrumb-item:hover::before {
     text-decoration: underline; }
   .breadcrumb-item + .breadcrumb-item:hover::before {
     text-decoration: none; }
   .breadcrumb-item.active {
-    color: #6e7377; }
+    color: #6a737b; }
 
 .pagination {
   display: flex;
@@ -5953,7 +5953,7 @@ input[type="button"].btn-block {
   border-color: #0f6fc5; }
 
 .page-item.disabled .page-link {
-  color: #6e7377;
+  color: #6a737b;
   pointer-events: none;
   cursor: auto;
   background-color: #fff;
@@ -6283,7 +6283,7 @@ input[type="button"].btn-block {
     border-bottom-right-radius: inherit;
     border-bottom-left-radius: inherit; }
   .list-group-item.disabled, .list-group-item:disabled {
-    color: #6e7377;
+    color: #6a737b;
     pointer-events: none;
     background-color: #fff; }
   .list-group-item.active {
@@ -6531,7 +6531,7 @@ a.close.disabled {
   display: flex;
   align-items: center;
   padding: 0.25rem 0.75rem;
-  color: #6e7377;
+  color: #6a737b;
   background-color: rgba(255, 255, 255, 0.85);
   background-clip: padding-box;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
@@ -9720,7 +9720,7 @@ a.text-dark:hover, a.text-dark:focus {
   color: #212529 !important; }
 
 .text-muted {
-  color: #6e7377 !important; }
+  color: #6a737b !important; }
 
 .text-black-50 {
   color: rgba(0, 0, 0, 0.5) !important; }
@@ -9942,7 +9942,7 @@ a.dimmed_text:visited,
 .usersuspended a:visited,
 .dimmed_category,
 .dimmed_category a {
-  color: #6e7377; }
+  color: #6a737b; }
 
 .aalink.focus, .aalink:focus,
 #page-footer a:not([class]).focus,
@@ -10592,7 +10592,7 @@ tr.flagged-tag a {
   padding-left: 10px; }
 
 .tag_feed .media .muted a {
-  color: #6e7377; }
+  color: #6a737b; }
 
 .tag_cloud {
   text-align: center; }
@@ -11232,7 +11232,7 @@ body#page-lib-editor-tinymce-plugins-moodlemedia-preview {
     .modchoosercontainer .optionscontainer .option .optionactions .optionaction,
     .modchoosercontainer .searchresultitemscontainer .option .optionactions .optionaction {
       cursor: pointer;
-      color: #6e7377; }
+      color: #6a737b; }
       .modchoosercontainer .optionscontainer .option .optionactions .optionaction i,
       .modchoosercontainer .searchresultitemscontainer .option .optionactions .optionaction i {
         margin: 0; }
@@ -12052,22 +12052,22 @@ input[disabled] {
       margin: 0.125rem; }
       .nav-tabs .nav-link.active,
       .nav-pills .nav-link.active {
-        color: #6e7377;
-        border-color: #6e7377;
-        border-color: #6e7377; }
+        color: #6a737b;
+        border-color: #6a737b;
+        border-color: #6a737b; }
         .nav-tabs .nav-link.active:hover,
         .nav-pills .nav-link.active:hover {
           color: #fff;
-          background-color: #6e7377;
-          border-color: #6e7377; }
+          background-color: #6a737b;
+          border-color: #6a737b; }
         .nav-tabs .nav-link.active:focus, .nav-tabs .nav-link.active.focus,
         .nav-pills .nav-link.active:focus,
         .nav-pills .nav-link.active.focus {
-          box-shadow: 0 0 0 0.2rem rgba(110, 115, 119, 0.5); }
+          box-shadow: 0 0 0 0.2rem rgba(106, 115, 123, 0.5); }
         .nav-tabs .nav-link.active.disabled, .nav-tabs .nav-link.active:disabled,
         .nav-pills .nav-link.active.disabled,
         .nav-pills .nav-link.active:disabled {
-          color: #6e7377;
+          color: #6a737b;
           background-color: transparent; }
         .nav-tabs .nav-link.active:not(:disabled):not(.disabled):active, .nav-tabs .nav-link.active:not(:disabled):not(.disabled).active,
         .show > .nav-tabs .nav-link.active.dropdown-toggle,
@@ -12076,15 +12076,15 @@ input[disabled] {
         .show >
         .nav-pills .nav-link.active.dropdown-toggle {
           color: #fff;
-          background-color: #6e7377;
-          border-color: #6e7377; }
+          background-color: #6a737b;
+          border-color: #6a737b; }
           .nav-tabs .nav-link.active:not(:disabled):not(.disabled):active:focus, .nav-tabs .nav-link.active:not(:disabled):not(.disabled).active:focus,
           .show > .nav-tabs .nav-link.active.dropdown-toggle:focus,
           .nav-pills .nav-link.active:not(:disabled):not(.disabled):active:focus,
           .nav-pills .nav-link.active:not(:disabled):not(.disabled).active:focus,
           .show >
           .nav-pills .nav-link.active.dropdown-toggle:focus {
-            box-shadow: 0 0 0 0.2rem rgba(110, 115, 119, 0.5); } }
+            box-shadow: 0 0 0 0.2rem rgba(106, 115, 123, 0.5); } }
 
 @media (max-width: 576px) and (max-height: 320px) {
   div#page {
@@ -12586,12 +12586,12 @@ input[disabled] {
 
 #page-admin-plugins #plugins-control-panel .pluginname .componentname {
   font-size: 0.8203125rem;
-  color: #6e7377;
+  color: #6a737b;
   margin-left: 22px; }
 
 #page-admin-plugins #plugins-control-panel .version .versionnumber {
   font-size: 0.8203125rem;
-  color: #6e7377; }
+  color: #6a737b; }
 
 #page-admin-plugins #plugins-control-panel .uninstall a {
   color: #ca3120; }
@@ -12601,7 +12601,7 @@ input[disabled] {
 
 #page-admin-plugins #plugins-control-panel .notes .requiredby {
   font-size: 0.8203125rem;
-  color: #6e7377; }
+  color: #6a737b; }
 
 #plugins-check-page #plugins-check .status-missing td,
 #plugins-check-page #plugins-check .status-downgrade td {
@@ -12706,7 +12706,7 @@ input[disabled] {
 
 #page-admin-tasklogs .task-class {
   font-size: 0.8203125rem;
-  color: #6e7377; }
+  color: #6a737b; }
 
 .path-admin-tool-uploaduser .uuwarning {
   background-color: #fcefdc; }
@@ -12981,7 +12981,7 @@ input[disabled] {
     margin-right: 2px; }
 
 .block.invisibleblock .card-title {
-  color: #6e7377; }
+  color: #6a737b; }
 
 @media (max-width: 767.98px) {
   .block.card {
@@ -13182,7 +13182,7 @@ input[disabled] {
     font-size: 0.8em;
     text-align: center; }
   .block .minicalendar td.weekend {
-    color: #6e7377; }
+    color: #6a737b; }
   .block .minicalendar td a {
     width: 100%;
     height: 100%;
@@ -13298,7 +13298,7 @@ table.calendartable caption {
     margin: 0; }
 
 .cal_courses_flt {
-  color: #6e7377; }
+  color: #6a737b; }
 
 .content-bank-container .cb-content-wrapper {
   padding: 0.5rem;
@@ -13480,7 +13480,7 @@ body:not(.editing) .sitetopic ul.section {
     .section .activity .activityinstance .dimmed .activityicon {
       opacity: .5; }
   .section .activity .stealth {
-    color: #6e7377; }
+    color: #6a737b; }
   .section .activity a.stealth,
   .section .activity a.stealth:hover {
     color: #61aef3 !important;
@@ -13570,7 +13570,7 @@ body:not(.editing) .sitetopic ul.section {
 
 .editing .section .activity:hover,
 .editing .section .activity.action-menu-shown {
-  background-color: rgba(0, 0, 0, 0.05); }
+  background-color: rgba(0, 0, 0, 0.03); }
 
 .course-content .current {
   position: relative; }
@@ -13595,7 +13595,7 @@ body:not(.editing) .sitetopic ul.section {
   margin: 2px 5px 2px 5px; }
 
 .course-content .section-summary .section-summary-activities .activity-count {
-  color: #6e7377;
+  color: #6a737b;
   font-size: 0.8203125rem;
   margin: 3px;
   white-space: nowrap;
@@ -13645,7 +13645,7 @@ body:not(.editing) .sitetopic ul.section {
 .course-content ul li.section.hidden .sectionname > span,
 .course-content ul li.section.hidden .content > div.summary,
 .course-content ul li.section.hidden .activity .activityinstance {
-  color: #6e7377; }
+  color: #6a737b; }
 
 .course-content ul.topics,
 .course-content ul.weeks {
@@ -13958,7 +13958,7 @@ span.editinstructions {
   padding-bottom: 0.5rem; }
 
 .courses .coursebox.even {
-  background-color: rgba(0, 0, 0, 0.05); }
+  background-color: rgba(0, 0, 0, 0.03); }
 
 .courses > .paging.paging-morelink {
   text-align: center;
@@ -14093,9 +14093,9 @@ span.editinstructions {
   #course-category-listings .listitem > div .idnumber {
     margin-right: 2em; }
   #course-category-listings .listitem[data-visible="0"] {
-    color: #6e7377; }
+    color: #6a737b; }
     #course-category-listings .listitem[data-visible="0"] > div > a {
-      color: #6e7377; }
+      color: #6a737b; }
     #course-category-listings .listitem[data-visible="0"] > div .item-actions .action-show {
       display: inline; }
     #course-category-listings .listitem[data-visible="0"] > div .item-actions .action-hide {
@@ -14205,7 +14205,7 @@ span.editinstructions {
   #course-category-listings .listing-pagination-totals {
     text-align: center; }
     #course-category-listings .listing-pagination-totals.dimmed {
-      color: #6e7377;
+      color: #6a737b;
       margin: 0.4rem 1rem 0.45rem; }
   #course-category-listings .select-a-category .notifymessage,
   #course-category-listings .select-a-category .alert {
@@ -14937,7 +14937,7 @@ a.ygtvspacer:hover {
   background-color: #ebebe4; }
 
 .fitem.disabled .fp-btn-choose {
-  color: #6e7377; }
+  color: #6a737b; }
 
 .fitem.disabled .filepicker-filelist .filepicker-filename {
   display: none; }
@@ -15818,7 +15818,7 @@ a.ygtvspacer:hover {
     text-align: left;
     font-weight: normal; }
   #categoryquestions > tbody > tr.r1 {
-    background-color: rgba(0, 0, 0, 0.05); }
+    background-color: rgba(0, 0, 0, 0.03); }
   #categoryquestions > tbody > tr.highlight {
     border: 1px solid #008196; }
   #categoryquestions .checkbox {
@@ -16507,14 +16507,14 @@ body.path-question-type .mform fieldset.hidden {
 
 .simplesearchform .btn-submit {
   border-color: #8f959e;
-  color: #6e7377; }
+  color: #6a737b; }
 
 .simplesearchform .btn-close,
 .simplesearchform .btn-clear {
   position: absolute;
   top: 0;
   right: 0;
-  color: #6e7377;
+  color: #6a737b;
   z-index: 4; }
 
 .simplesearchform .btn-close {
@@ -16645,7 +16645,7 @@ input#id_externalurl {
 
 .form-defaultinfo,
 .form-label .form-shortname {
-  color: #6e7377; }
+  color: #6a737b; }
 
 .form-label .form-shortname {
   font-size: 0.703125rem;
@@ -16658,10 +16658,10 @@ input#id_externalurl {
   margin-left: 0.5rem; }
 
 .formsettingheading .form-horizontal {
-  color: #6e7377; }
+  color: #6a737b; }
 
 .no-felement.fstatic {
-  color: #6e7377;
+  color: #6a737b;
   padding-top: 5px; }
 
 .no-fitem .fstaticlabel {
@@ -17671,7 +17671,7 @@ div#dock {
   width: 100%; }
 
 .path-mod-survey .surveytable > tbody > tr:nth-of-type(even) {
-  background-color: rgba(0, 0, 0, 0.05); }
+  background-color: rgba(0, 0, 0, 0.03); }
 
 .path-mod-survey .surveytable .rblock label {
   text-align: center; }
@@ -17831,7 +17831,7 @@ div#dock {
 .path-mod-quiz #mod_quiz_navblock .qnbutton.complete .trafficlight,
 .path-mod-quiz #mod_quiz_navblock .qnbutton.answersaved .trafficlight,
 .path-mod-quiz #mod_quiz_navblock .qnbutton.requiresgrading .trafficlight {
-  background-color: #6e7377; }
+  background-color: #6a737b; }
 
 #page-mod-quiz-edit ul.slots li.section li.activity .instancemaxmarkcontainer form input {
   height: 1.4em;
@@ -18160,7 +18160,7 @@ div#dock {
   /* Striped rows like a table */ }
   .path-backup .mform .root_setting:nth-of-type(odd),
   .path-backup .mform .grouped_settings:nth-of-type(odd) {
-    background-color: rgba(0, 0, 0, 0.05); }
+    background-color: rgba(0, 0, 0, 0.03); }
   .path-backup .mform .root_setting:nth-of-type(even),
   .path-backup .mform .grouped_settings:nth-of-type(even) {
     background-color: #fff; }
@@ -18224,7 +18224,7 @@ div#dock {
   margin-top: 1rem;
   margin-bottom: 1rem; }
   .path-backup .backup_progress .backup_stage {
-    color: #6e7377; }
+    color: #6a737b; }
     .path-backup .backup_progress .backup_stage.backup_stage_current {
       font-weight: bold;
       color: inherit; }
@@ -18293,7 +18293,7 @@ div#dock {
   .generaltable tbody + tbody {
     border-top: 2px solid #dee2e6; }
   .generaltable tbody tr:nth-of-type(odd) {
-    background-color: rgba(0, 0, 0, 0.05); }
+    background-color: rgba(0, 0, 0, 0.03); }
   .generaltable.table-sm th,
   .generaltable.table-sm td {
     padding: 0.3rem; }
@@ -18735,7 +18735,7 @@ p.arrow_button {
   padding-left: 269px; }
 
 .path-grade-edit-tree .setup-grades.generaltable .levelodd {
-  background-color: rgba(0, 0, 0, 0.05); }
+  background-color: rgba(0, 0, 0, 0.03); }
 
 /**
  * Grader report.
@@ -18767,7 +18767,7 @@ p.arrow_button {
 .path-grade-report-user .user-grade {
   border: none; }
   .path-grade-report-user .user-grade.generaltable .levelodd {
-    background-color: rgba(0, 0, 0, 0.05); }
+    background-color: rgba(0, 0, 0, 0.03); }
   .path-grade-report-user .user-grade .column-contributiontocoursetotal,
   .path-grade-report-user .user-grade .column-range,
   .path-grade-report-user .user-grade .column-percentage,
@@ -19485,7 +19485,7 @@ span[data-flexitour="container"][x-placement="right"], span[data-flexitour="cont
       font-size: 4em; }
 
 .form-control:-ms-input-placeholder {
-  color: #6e7377; }
+  color: #6a737b; }
 
 .custom-select {
   -webkit-appearance: none;
@@ -19856,26 +19856,26 @@ body {
   background-color: #fff; }
 
 .btn-outline-secondary {
-  color: #6e7377;
-  border-color: #6e7377;
-  border-color: #6e7377; }
+  color: #6a737b;
+  border-color: #6a737b;
+  border-color: #6a737b; }
   .btn-outline-secondary:hover {
     color: #fff;
-    background-color: #6e7377;
-    border-color: #6e7377; }
+    background-color: #6a737b;
+    border-color: #6a737b; }
   .btn-outline-secondary:focus, .btn-outline-secondary.focus {
-    box-shadow: 0 0 0 0.2rem rgba(110, 115, 119, 0.5); }
+    box-shadow: 0 0 0 0.2rem rgba(106, 115, 123, 0.5); }
   .btn-outline-secondary.disabled, .btn-outline-secondary:disabled {
-    color: #6e7377;
+    color: #6a737b;
     background-color: transparent; }
   .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active,
   .show > .btn-outline-secondary.dropdown-toggle {
     color: #fff;
-    background-color: #6e7377;
-    border-color: #6e7377; }
+    background-color: #6a737b;
+    border-color: #6a737b; }
     .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
     .show > .btn-outline-secondary.dropdown-toggle:focus {
-      box-shadow: 0 0 0 0.2rem rgba(110, 115, 119, 0.5); }
+      box-shadow: 0 0 0 0.2rem rgba(106, 115, 123, 0.5); }
 
 .btn-outline-info {
   color: #1f7e9a;