From 0ce40927cfb7300d0fa1fbb7e5b152c429f0df01 Mon Sep 17 00:00:00 2001
From: Jun Pataleta <jun@moodle.com>
Date: Thu, 27 Aug 2020 22:54:48 +0800
Subject: [PATCH] MDL-69392 theme_boost: Improve question colour contrast

* Lighten info container.
* Fix colour contrast for the question container by
  - Lightening the background a bit
  - Darkening the text colour a bit
  - Making sure the link colour has good colour contrast against the
  question text.
* Fix colour contrast for the comments container by
  - Lightening the text colour a bit
  - Darkening the link colour a bit for better colour contrast against
  the feedback text.
---
 theme/boost/scss/moodle/question.scss | 10 +++++++---
 theme/boost/style/moodle.css          | 15 +++++++++------
 theme/classic/style/moodle.css        | 15 +++++++++------
 3 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/theme/boost/scss/moodle/question.scss b/theme/boost/scss/moodle/question.scss
index fc93c2b24d5..06e97bfbffb 100644
--- a/theme/boost/scss/moodle/question.scss
+++ b/theme/boost/scss/moodle/question.scss
@@ -245,7 +245,7 @@ body.path-question-type {
     width: 7em;
     padding: 0.5em;
     margin-bottom: 1.8em;
-    background-color: $gray-300;
+    background-color: $gray-100;
     border: 1px solid darken($gray-300, 7%);
 
     @include border-radius(2px);
@@ -292,11 +292,15 @@ body.path-question-type {
 }
 .que .outcome,
 .que .comment {
-    @include alert-variant(theme-color-level('warning', $alert-bg-level), theme-color-level('warning', $alert-border-level), theme-color-level('warning', $alert-color-level)); /* stylelint-disable-line max-line-length */
+    @include alert-variant(theme-color-level('warning', $alert-bg-level), theme-color-level('warning', $alert-border-level), theme-color-level('warning', $alert-color-level - 0.9)); /* stylelint-disable-line max-line-length */
+    // Darken link colour inside comments for better colour contrast against regular text.
+    a {
+        color: darken($link-color, 30%);
+    }
 }
 
 .que .formulation {
-    @include alert-variant(theme-color-level('info', $alert-bg-level), theme-color-level('info', $alert-border-level), theme-color-level('info', $alert-color-level)); /* stylelint-disable-line max-line-length */
+    @include alert-variant(theme-color-level('info', $alert-bg-level - 1.30), theme-color-level('info', $alert-border-level), theme-color-level('info', $alert-color-level + 4)); /* stylelint-disable-line max-line-length */
 }
 
 .que.multichoice .answer div.r0 .icon.fa-check,
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index f418ac7450b..436ff181814 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -15637,7 +15637,7 @@ body.path-question-type {
   width: 7em;
   padding: 0.5em;
   margin-bottom: 1.8em;
-  background-color: #dee2e6;
+  background-color: #f8f9fa;
   border: 1px solid #cad0d7; }
 
 .que h3.no {
@@ -15674,7 +15674,7 @@ body.path-question-type {
 
 .que .outcome,
 .que .comment {
-  color: #7d5a29;
+  color: #8e662e;
   background-color: #fcefdc;
   border-color: #fbe8cd;
   /* stylelint-disable-line max-line-length */ }
@@ -15683,17 +15683,20 @@ body.path-question-type {
     border-top-color: #f9ddb5; }
   .que .outcome .alert-link,
   .que .comment .alert-link {
-    color: #573e1c; }
+    color: #674a22; }
+  .que .outcome a,
+  .que .comment a {
+    color: #041f37; }
 
 .que .formulation {
-  color: #00434e;
-  background-color: #cce6ea;
+  color: #001a1e;
+  background-color: #e7f3f5;
   border-color: #b8dce2;
   /* stylelint-disable-line max-line-length */ }
   .que .formulation hr {
     border-top-color: #a6d3db; }
   .que .formulation .alert-link {
-    color: #00171b; }
+    color: black; }
 
 .que.multichoice .answer div.r0 .icon.fa-check,
 .que.multichoice .answer div.r1 .icon.fa-check,
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 4a23b655850..9b4e42e3331 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -15856,7 +15856,7 @@ body.path-question-type {
   width: 7em;
   padding: 0.5em;
   margin-bottom: 1.8em;
-  background-color: #dee2e6;
+  background-color: #f8f9fa;
   border: 1px solid #cad0d7;
   border-radius: 2px; }
 
@@ -15895,7 +15895,7 @@ body.path-question-type {
 
 .que .outcome,
 .que .comment {
-  color: #7d5a29;
+  color: #8e662e;
   background-color: #fcefdc;
   border-color: #fbe8cd;
   /* stylelint-disable-line max-line-length */ }
@@ -15904,17 +15904,20 @@ body.path-question-type {
     border-top-color: #f9ddb5; }
   .que .outcome .alert-link,
   .que .comment .alert-link {
-    color: #573e1c; }
+    color: #674a22; }
+  .que .outcome a,
+  .que .comment a {
+    color: #041f37; }
 
 .que .formulation {
-  color: #00434e;
-  background-color: #cce6ea;
+  color: #001a1e;
+  background-color: #e7f3f5;
   border-color: #b8dce2;
   /* stylelint-disable-line max-line-length */ }
   .que .formulation hr {
     border-top-color: #a6d3db; }
   .que .formulation .alert-link {
-    color: #00171b; }
+    color: black; }
 
 .que.multichoice .answer div.r0 .icon.fa-check,
 .que.multichoice .answer div.r1 .icon.fa-check,