SAK-45362 Parent issue for several dark mode fixes (sakaiproject#9181)

* Replace hard coded black text with color var

* Adapt color variables for dark mode

* Add disabled button text color for calendar

* Give low priority/timezone banners some color vars

* Give medium and high priority banners some color vars

library/src/morpheus-master/sass/themes/_light.scss

@@ -508,12 +508,12 @@
     --sakai-separator-color: var(--sakai-border-color);
     --sakai-calendar-button-bg-color: var(--button-background);
     --sakai-calendar-button-color: var(--button-text-color);
+    --sakai-calendar-button-disabled-color: var(--button-disabled-text-color);
     --sakai-calendar-button-disabled-bg-color: var(--button-disabled-background);
-    --sakai-calendar-today-bg: yellow;
-    --sakai-calendar-today-fg: black;
-    --sakai-calendar-has-events-fg: white;
-    --sakai-calendar-has-events-bg: green;
-    --sakai-calendar-has-events-fg: white;
+    --sakai-calendar-today-bg-color: var(--sakai-primary-color-1);
+    --sakai-calendar-today-fg-color: var(--sakai-text-color-inverted);
+    --sakai-calendar-has-events-bg-color: var(--sakai-color-green--darker-4);
+    --sakai-calendar-has-events-fg-color: var(--sakai-text-color-inverted);
 
     --sakai-user-status-online: var(--sakai-color-green--lighter-2);
 

pasystem/pasystem-tool/tool/src/webapp/stylesheets/pasystem.css

@@ -31,36 +31,38 @@
 }
 .pasystem-banner-alert,
 .pasystem-banner-alert.pasystem-banner-medium {
-  background-color: #f7e084;
+  background-color: var(--warnBanner-bgcolor);
+  color: var(--warnBanner-color);
 }
 .pasystem-banner-alert:before,
 .pasystem-banner-alert.pasystem-banner-medium:before {
   content: '\f071';
-  color: #a9860c;
+  color: var(--warnBanner-color);
 }
 .pasystem-banner-alert.pasystem-banner-high {
-  background-color: #f1d3d3;
+  background-color: var(--errorBanner-bgcolor);
+  color: var(--errorBanner-color); 
 }
 .pasystem-banner-alert.pasystem-banner-high:before {
   content: '\f06a';
-  color: #b30e0a;
+  color: var(--errorBanner-color);
 }
 .pasystem-banner-alert.pasystem-banner-timezone,
 .pasystem-banner-alert.pasystem-banner-low {
-  background-color: #c7e4f4;
+  background-color: var(--infoBanner-bgcolor);
+  color: var(--infoBanner-color);
 }
 .pasystem-banner-alert.pasystem-banner-timezone:before,
 .pasystem-banner-alert.pasystem-banner-low:before {
   content: '\f05a';
-  color: #144bae;
+  color: var(--infoBanner-color);
 }
 .pasystem-banner-alert .pasystem-banner-alert-close {
   position: absolute;
   top: 50%;
   right: 10px;
   text-decoration: none;
   margin-top: -10px;
-  color: #666;
 }
 .pasystem-banner-alert .pasystem-banner-alert-close:before {
   font-family: 'pasystem-icons';
@@ -141,7 +143,6 @@
     padding: 8px;
   }
 }
-
 .featherlight .featherlight-content {
     min-width: 450px;
     max-width: 782px;

webcomponents/tool/src/main/frontend/js/calendar/sakai-calendar.js

@@ -179,26 +179,30 @@ export class SakaiCalendar extends LionCalendar {
       }
 
       .calendar__day-button[today] {
-        background-color: var(--sakai-calendar-today-bg);
-        color: var(--sakai-calendar-today-fg);
+        background-color: var(--sakai-calendar-today-bg-color);
+        color: var(--sakai-calendar-today-fg-color);
+        text-decoration: none;
         font-weight: bold;
         border-radius: 50%;
       }
       .calendar__previous-month-button,
       .calendar__next-month-button,
       .calendar__day-button {
         background-color: var(--sakai-calendar-button-bg-color, #fff);
+        color: var(--sakai-calendar-button-color, rgb(115, 115, 115));
       }
 
       .has-events {
-        background-color: var(--sakai-calendar-has-events-bg);
-        color: var(--sakai-calendar-has-events-fg);
+        background-color: var(--sakai-calendar-has-events-bg-color);
+        color: var(--sakai-calendar-has-events-fg-color);
         border-radius: 50%;
       }
 
       .calendar__day-button[previous-month],
       .calendar__day-button[next-month] {
-        color: var(--sakai-calendar-button-color, rgb(115, 115, 115));
+        color: var(--sakai-calendar-button-disabled-color, rgb(115, 115, 115));
+        background-color: var(--sakai-calendar-button-disabled-bg-color, #fff);
+
       }
 
       .calendar__day-button:hover {
@@ -207,7 +211,12 @@ export class SakaiCalendar extends LionCalendar {
 
       .calendar__day-button[disabled] {
         background-color: var(--sakai-calendar-button-disabled-bg-color, #fff);
-        color: var(--sakai-text-color-disabled, #eee);
+        color: var(--sakai-calendar-button-diabled-color, #eee);
+      }
+
+      a {
+        text-decoration: none;
+        color: var(--link-color);
       }
     `];
   }

webcomponents/tool/src/main/frontend/js/widgets/sakai-announcements-widget.js

@@ -159,7 +159,7 @@ export class SakaiAnnouncementsWidget extends SakaiDashboardWidget {
         }
           .header a {
             text-decoration: none;
-            color: black;
+            color: var(--sakai-text-color-1);
           }
         .title {
           flex: 2;

webcomponents/tool/src/main/frontend/js/widgets/sakai-dashboard-widget.js

@@ -206,6 +206,11 @@ export class SakaiDashboardWidget extends LitElement {
           padding: 5px;
           flex: 1;
         }
+
+      a {
+        text-decoration: none;
+        color: var(--link-color);
+      }
     `;
   }
 }

webcomponents/tool/src/main/frontend/js/widgets/sakai-forums-widget.js

@@ -190,7 +190,7 @@ export class SakaiForumsWidget extends SakaiDashboardWidget {
         }
           .header a {
             text-decoration: none;
-            color: black;
+            color: var(--sakai-text-color-1);
           }
         .cell {
           padding: 8px;

webcomponents/tool/src/main/frontend/js/widgets/sakai-widget-picker.js

@@ -91,7 +91,7 @@ export class SakaiWidgetPicker extends SakaiDashboardWidget {
       }
       .widget-option a {
         text-decoration: none;
-        color: black;
+        color: var(--sakai-text-color-1);
         font-size: 18px;
       }
     `;