From aa7259e525d1829e0a6d4c5d6fa128ab0132b31d Mon Sep 17 00:00:00 2001
From: Alexander Bias <alexander.bias@uni-ulm.de>
Date: Sat, 28 Nov 2020 22:59:17 +0100
Subject: [PATCH] Adjusted SCSS brand color and gray color variables after the
 BS4Alpha compatibility layer has been removed in theme Boost core.

---
 CHANGES.md     |  3 +++
 scss/post.scss | 48 ++++++++++++++++++++++++------------------------
 settings.php   | 10 +++++-----
 3 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 844ec0f..39bf50f 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -6,6 +6,9 @@ Changes
 
 ### Unreleased
 
+* 2020-11-28 - Adjusted SCSS brand color and gray color variables after the BS4Alpha compatibility layer has been removed in theme Boost core.
+               PLEASE NOTE: If you have used $brand-* or $gray-* variables in your RAW SCSS as we did in Boost Campus up to now, you might have to adapt your SCSS code now as well.
+               See https://github.com/moodle/moodle/blob/MOODLE_38_STABLE/theme/boost/scss/moodle/bs4alphacompat.scss#L29-L43 for the compatibility variable assignments which have vanished.
 * 2020-11-28 - Adjusted navbar.mustache due to upstream changes in theme Boost core.
 * 2020-11-28 - Prepare compatibility for Moodle 3.10.
 * 2020-11-18 - Change in Moodle release support:
diff --git a/scss/post.scss b/scss/post.scss
index 68d75c0..e3885bb 100644
--- a/scss/post.scss
+++ b/scss/post.scss
@@ -271,7 +271,7 @@ body.loginbackgroundimage #page {
             .usertext:hover,
             .dropdown-toggle:hover,
             .site-name:hover {
-                color: $brand-primary;
+                color: $primary;
             }
             .navbar-brand:not(.has-logo) .site-name:hover {
                 color: #fff;
@@ -451,10 +451,10 @@ body.loginbackgroundimage #page {
     ul.topics,
     ul.weeks,
     ul.periods {
-        /* Set section dividing border-color to brand-primary. */
+        /* Set section dividing border-color to primary brand color. */
         li.section.main {
             border: none;
-            border-bottom: 1px solid $brand-primary;
+            border-bottom: 1px solid $primary;
             padding-top: 3rem;
             padding-bottom: 2rem;
             margin: 0;
@@ -474,9 +474,9 @@ body.loginbackgroundimage #page {
         }
         /* Change style of highlighted section to highlight more. */
         li.section.main.current {
-            border-bottom: $brand-primary 4px solid;
-            border-top: $brand-primary 3px solid; /*1px less because of section dividing border. */
-            background: $gray-lightest;
+            border-bottom: $primary 4px solid;
+            border-top: $primary 3px solid; /*1px less because of section dividing border. */
+            background: $gray-100;
         }
         /* Remove highlighting from Theme Boost. */
         li.section.main.current::before {
@@ -501,14 +501,14 @@ body.loginbackgroundimage #page {
         }
         /* Add border to description text to differ it from module content. */
         .section .contentafterlink {
-            border-left: 2px solid $gray-light;
+            border-left: 2px solid $gray-600;
             padding-left: 10px;
             font-size: .9rem;
         }
         /* Add border to description text for restricted activities and show it also to students.
            This is needed because the classes for teachers and students differ. */
         .section li:not(.label) .contentwithoutlink:not(:empty) {
-            border-left: 2px solid $gray-light;
+            border-left: 2px solid $gray-600;
             padding-left: 10px;
             font-size: .9rem;
             display: block;
@@ -541,7 +541,7 @@ body.loginbackgroundimage #page {
         }
         .section-navigation .mdl-left:not(:empty),
         .section-navigation .mdl-right:not(:empty) {
-            background-color: $brand-primary;
+            background-color: $primary;
             padding: 2px 8px;
             border-radius: 2px;
             a {
@@ -558,7 +558,7 @@ body.loginbackgroundimage #page {
     ul.periods {
         /* Add bottom border to last section in editing mode. */
         li.section.main:last-child {
-            border-bottom: 1px solid $brand-primary;
+            border-bottom: 1px solid $primary;
         }
         /* Special rule for hidden sections in editing mode as indents are different in this view. */
         li.section.main.hidden {
@@ -580,9 +580,9 @@ body.loginbackgroundimage #page {
  */
 /* Add a decent background to intro text */
 #intro {
-    background-color: $gray-lightest;
+    background-color: $gray-100;
     margin-bottom: 1em;
-    border-left: 3px solid $brand-primary;
+    border-left: 3px solid $primary;
     padding-left: 15px;
     padding-right: 15px;
 }
@@ -593,7 +593,7 @@ body.loginbackgroundimage #page {
 /* Adjust the activity navigation buttons to suit to the topics navigation buttons. */
 #next-activity-link,
 #prev-activity-link {
-    background-color: $brand-primary;
+    background-color: $primary;
     padding: 4px 8px;
     border-radius: 2px;
     color: #fff;
@@ -756,11 +756,11 @@ blockquote::before {
 
     /* Set footer blocks text color from white to dark gray. */
     .block {
-        color: $gray-dark;
+        color: $gray-900;
         /* Set link and icon color from white to gray. */
         a,
         .icon {
-            color: $gray-dark;
+            color: $gray-900;
         }
         /* Remove the underline decoration from footer blocks context menu items.*/
         .dropdown-item.menu-action {
@@ -854,7 +854,7 @@ blockquote::before {
 
 /* Mark broken links with red color. */
 a[href*="/brokenfile.php"] {
-    color: $brand-danger;
+    color: $danger;
 }
 
 /* Add Font Awesome "broken chain" icon in front of broken link. */
@@ -939,7 +939,7 @@ a[href^="mailto"]::before {
     right: 0.5em;
     line-height: 1.7rem;
     color: #fff;
-    background-color: $brand-primary;
+    background-color: $primary;
     border-radius: 100px;
     cursor: pointer;
     box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
@@ -992,7 +992,7 @@ a[href^="mailto"]::before {
             }
             /* We have to add a border for the users who do not have a switch role menu item due to their capabilities. */
             .dropdown-menu.dropdown-menu-right a:last-child {
-                border-bottom: 1px solid $gray-lighter;
+                border-bottom: 1px solid $gray-300;
             }
             .dropdown-menu-right div:last-of-type {
                 margin-bottom: 0;
@@ -1103,31 +1103,31 @@ a[href^="mailto"]::before {
 }
 .video-js {
     .vjs-big-play-button {
-        background-color: $brand-primary;
+        background-color: $primary;
         border-radius: 2px;
     }
     &:hover .vjs-big-play-button {
-        background-color: $brand-primary;
+        background-color: $primary;
     }
     .vjs-big-play-button {
         &:focus,
         &:active {
-            background-color: $gray-dark;
+            background-color: $gray-900;
         }
     }
     .vjs-loading-spinner {
-        border-color: $brand-primary;
+        border-color: $primary;
     }
     .vjs-control-bar2 {
         background-color: transparent;
     }
     .vjs-control-bar {
-        background-color: $gray-dark !important;
+        background-color: $gray-900 !important;
         color: #fff;
     }
     .vjs-play-progress,
     .vjs-volume-level {
-        background-color: $brand-primary;
+        background-color: $primary;
     }
     .vjs-big-play-button {
         border-width: 2px;
diff --git a/settings.php b/settings.php
index d08399d..c41f1a2 100644
--- a/settings.php
+++ b/settings.php
@@ -96,7 +96,7 @@ if ($ADMIN->fulltree) {
     $setting = new admin_setting_heading($name, $title, null);
     $page->add($setting);
 
-    // Variable $brand-color.
+    // Variable $primary.
     // We use an empty default value because the default colour should come from the preset.
     $name = 'theme_boost_campus/brandcolor';
     $title = get_string('brandcolor', 'theme_boost', null, true);
@@ -105,7 +105,7 @@ if ($ADMIN->fulltree) {
     $setting->set_updatedcallback('theme_reset_all_caches');
     $page->add($setting);
 
-    // Variable $brand-succes-color.
+    // Variable $success.
     $name = 'theme_boost_campus/brandsuccesscolor';
     $title = get_string('brandsuccesscolorsetting', 'theme_boost_campus', null, true);
     $description = get_string('brandsuccesscolorsetting_desc', 'theme_boost_campus', null, true);
@@ -113,7 +113,7 @@ if ($ADMIN->fulltree) {
     $setting->set_updatedcallback('theme_reset_all_caches');
     $page->add($setting);
 
-    // Variable $brand-info-color.
+    // Variable $info.
     $name = 'theme_boost_campus/brandinfocolor';
     $title = get_string('brandinfocolorsetting', 'theme_boost_campus', null, true);
     $description = get_string('brandinfocolorsetting_desc', 'theme_boost_campus', null, true);
@@ -121,7 +121,7 @@ if ($ADMIN->fulltree) {
     $setting->set_updatedcallback('theme_reset_all_caches');
     $page->add($setting);
 
-    // Variable $brand-warning-color.
+    // Variable $warning.
     $name = 'theme_boost_campus/brandwarningcolor';
     $title = get_string('brandwarningcolorsetting', 'theme_boost_campus', null, true);
     $description = get_string('brandwarningcolorsetting_desc', 'theme_boost_campus', null, true);
@@ -129,7 +129,7 @@ if ($ADMIN->fulltree) {
     $setting->set_updatedcallback('theme_reset_all_caches');
     $page->add($setting);
 
-    // Variable $brand-warning-color.
+    // Variable $danger.
     $name = 'theme_boost_campus/branddangercolor';
     $title = get_string('branddangercolorsetting', 'theme_boost_campus', null, true);
     $description = get_string('branddangercolorsetting_desc', 'theme_boost_campus', null, true);
-- 
GitLab