Merge pull request #3693 from dodona-edu/feature/bootstrap-5.2

Update Bootstrap to 5.2 beta
dodona-edu · Jun 10, 2022 · f75a36c · f75a36c
2 parents 7822fbd + 7f9a4ba
commit f75a36c
Show file tree

Hide file tree

Showing 62 changed files with 1,219 additions and 1,100 deletions.
diff --git a/app/assets/javascripts/code_listing/code_listing.ts b/app/assets/javascripts/code_listing/code_listing.ts
@@ -378,11 +378,11 @@ export class CodeListing {
           </div>
           <div class="annotation-submission-button-container">
             ${annotation && annotation.removable ? `
-                  <button class="btn-text annotation-control-button annotation-delete-button" type="button">
+                  <button class="btn btn-text annotation-control-button annotation-delete-button" type="button">
                     ${I18n.t("js.user_annotation.delete")}
                   </button>
                 ` : ""}
-            <button class="btn-text annotation-control-button annotation-cancel-button" type="button">
+            <button class="btn btn-text annotation-control-button annotation-cancel-button" type="button">
               ${I18n.t("js.user_annotation.cancel")}
             </button>
             <button class="btn btn-filled annotation-control-button annotation-submission-button" type="button">

diff --git a/app/assets/javascripts/heatmap.ts b/app/assets/javascripts/heatmap.ts
@@ -71,9 +71,9 @@ function initHeatmap(url: string, oldestFirst: boolean, year: string | undefined
 
 function drawHeatmap(data: [dayjs.Dayjs, number][], oldestFirst: boolean, year: string | undefined): void {
     const darkMode = window.dodona.darkMode;
-    const emptyColor = darkMode ? "#37474F" : "white";
-    const lowColor = darkMode ? "#364953" : "#E3F2FD";
-    const highColor = darkMode ? "#039BE5" : "#0D47A1";
+    const emptyColor = darkMode ? "#001d36" : "#fcfcff";
+    const lowColor = darkMode ? "#00325a" : "#d0e4ff";
+    const highColor = darkMode ? "#9ccaff" : "#003d6c";
 
     const longMonthNames = monthKeys.map(k => I18n.t(`js.months.long.${k}`));
     const shortMonthNames = monthKeys.map(k => I18n.t(`js.months.short.${k}`));
@@ -211,4 +211,3 @@ function drawHeatmap(data: [dayjs.Dayjs, number][], oldestFirst: boolean, year:
 }
 
 export { initHeatmap };
-
diff --git a/app/assets/javascripts/visualisations/timeseries.ts b/app/assets/javascripts/visualisations/timeseries.ts
@@ -46,12 +46,9 @@ export class TimeseriesGraph extends SeriesExerciseGraph {
 
         super.draw(animation);
 
-        // no data in cell
-        const emptyColor = this.darkMode ? "#37474F" : "white";
-        // almost no data in cell
-        const lowColor = this.darkMode ? "#364953" : "#E3F2FD";
-        // a lot of data in cell
-        const highColor = this.darkMode ? "#039BE5" : "#0D47A1";
+        const emptyColor = this.darkMode ? "#001d36" : "#fcfcff";
+        const lowColor = this.darkMode ? "#00325a" : "#d0e4ff";
+        const highColor = this.darkMode ? "#9ccaff" : "#003d6c";
 
         const end = new Date(this.maxDate);
         end.setHours(0, 0, 0, 0); // bin and domain seem to handle end differently

diff --git a/app/assets/stylesheets/application-dark.sass.scss b/app/assets/stylesheets/application-dark.sass.scss
@@ -1,5 +1,3 @@
-$development: false;
-
 $theme: "dark";
 
 @import "base.css.scss";
diff --git a/app/assets/stylesheets/application.sass.scss b/app/assets/stylesheets/application.sass.scss
@@ -1,5 +1,3 @@
-$development: false;
-
 $theme: "light";
 
 @import "base.css.scss";
diff --git a/app/assets/stylesheets/base.css.scss b/app/assets/stylesheets/base.css.scss
@@ -2,34 +2,46 @@
 @import "../../../node_modules/bootstrap/scss/functions";
 
 // 2. Include any default variable overrides here
-@import "theme/colors.css.scss";
+@import "theme/m3-theme-light.css.scss";
+@import "theme/m3-theme-dark.css.scss";
+
+@if $theme =="dark" {
+  @include theme-dark;
+}
+
 @import "bootstrap_variable_overrides.css.scss";
 @import "mixins.css.scss";
 @import "vendor";
 
-// also loads dark mode stuff
-@import "theme/theme-light.css.scss";
-
 @import "theme/rouge-light.css.scss";
 @import "theme/rouge-dark.css.scss";
-@if $theme == "dark" {
+
+@if $theme =="dark" {
   @include rouge-dark;
-} @else {
+}
+
+@else {
   @include rouge-light;
 }
 
 // 3. Include remainder of required Bootstrap stylesheets
 @import "../../../node_modules/bootstrap/scss/variables";
-@import "../../../node_modules/bootstrap/scss/mixins";
-@import "../../../node_modules/bootstrap/scss/utilities";
 
-// 4. Include any optional Bootstrap components as you like
+// 4. Include any default map overrides here
+
+// 5. Include remainder of required parts
+@import "../../../node_modules/bootstrap/scss/maps";
+@import "../../../node_modules/bootstrap/scss/mixins";
 @import "../../../node_modules/bootstrap/scss/root";
+
+// 6. Optionally include any other parts as needed
+@import "../../../node_modules/bootstrap/scss/utilities";
 @import "../../../node_modules/bootstrap/scss/reboot";
 @import "../../../node_modules/bootstrap/scss/type";
 @import "../../../node_modules/bootstrap/scss/images";
 @import "../../../node_modules/bootstrap/scss/containers";
 @import "../../../node_modules/bootstrap/scss/grid";
+@import "../../../node_modules/bootstrap/scss/helpers";
 @import "../../../node_modules/bootstrap/scss/tables";
 @import "../../../node_modules/bootstrap/scss/forms";
 @import "../../../node_modules/bootstrap/scss/buttons";
@@ -72,11 +84,11 @@
 @import "print.css.scss";
 
 .field_with_errors input {
-  border-color: $danger-fg;
+  border-color: $danger;
 }
 
 .colored-info {
-  color: $brand-info;
+  color: $info;
 }
 
 figcaption {

diff --git a/app/assets/stylesheets/bootstrap_style_overrides.css.scss b/app/assets/stylesheets/bootstrap_style_overrides.css.scss
@@ -22,7 +22,7 @@ pre {
   word-break: break-all;
   word-wrap: break-word;
   background-color: $code-bg;
-  border: 1px solid $hairlinegray;
+  border: 1px solid $outline;
   border-radius: $border-radius-base;
 
   code {
@@ -51,7 +51,6 @@ code {
 
 // alerts
 .alert {
-  color: $text-on-bg-color  !important;
   border-radius: $border-radius-base;
   border: 0;
 
@@ -65,46 +64,41 @@ code {
   }
 
   &.alert-info {
-    background-color: $info-bg;
+    background-color: $info-container;
+    color: $on-info-container;
   }
 
   &.alert-warning {
-    background-color: $warning-bg;
+    background-color: $warning-container;
+    color: $on-warning-container;
   }
 
   &.alert-danger {
-    background-color: $danger-bg;
+    background-color: $danger-container;
+    color: $on-danger-container;
   }
 
   &.alert-success {
-    background-color: $success-bg;
+    background-color: $success-container;
+    color: $on-success-container;
   }
 
   &.alert-primary {
-    background-color: $primary-bg;
+    background-color: $primary-container;
+    color: $on-primary-container;
   }
 }
 
-.alert button.btn-close {
-  color: $alert-secondary;
-  opacity: 1;
-  text-shadow: initial;
-}
-
-.alert button.btn-close:hover {
-  color: $alert-fg;
-}
-
 // popovers
 .popover {
-  border-radius: 2px;
+  border-radius: 4px;
   padding: 0px;
   @include shadow-z5;
   z-index: 5;
 }
 
 .popover .popover-title {
-  border-radius: 2px 2px 0 0;
+  border-radius: 4px 4px 0 0;
   border: 0;
 }
 
@@ -137,30 +131,22 @@ code {
   line-height: 16px;
   letter-spacing: 0;
   font-size: 12px;
-  color: $text-secondary;
+  color: $on-surface-muted;
   padding-bottom: 8px;
   border-bottom-width: 2px;
-  border-bottom-color: $border-color  !important;
+  border-bottom-color: $divider  !important;
 }
 
 // modals
 .modal-content {
   @include shadow-z5;
 }
 
-// extra small input elements
-.input-xs {
-  height: 22px;
-  padding: 1px 10px;
-  font-size: 12px;
-  line-height: 1.5;
-  border-radius: 3px;
-}
-
 .help-block {
+  margin-top: 4px;
   font-size: 12px;
   line-height: 14px;
-  color: $text-secondary;
+  color: $on-surface-muted;
 }
 
 .help-block:not(:last-child) {
@@ -172,76 +158,6 @@ code {
   cursor: pointer;
 }
 
-.has-error {
-
-  .col-form-label,
-  .radio,
-  .checkbox,
-  .radio-inline,
-  .checkbox-inline,
-  &.radio label,
-  &.checkbox label,
-  &.radio-inline label,
-  &.checkbox-inline label {
-    color: $text-color;
-  }
-
-  .help-block {
-    color: $text-secondary;
-  }
-
-  .form-control {
-    border-color: $state-danger-border;
-    @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075));
-
-    &:focus {
-      border-color: darken($state-danger-border, 10%);
-      $shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
-      0 0 6px lighten($state-danger-border, 20%);
-      @include box-shadow($shadow);
-    }
-  }
-
-  .btn {
-    border-color: $state-danger-border;
-  }
-}
-
-.has-warning {
-
-  .col-form-label,
-  .radio,
-  .checkbox,
-  .radio-inline,
-  .checkbox-inline,
-  &.radio label,
-  &.checkbox label,
-  &.radio-inline label,
-  &.checkbox-inline label {
-    color: $text-color;
-  }
-
-  .help-block {
-    color: $text-secondary;
-  }
-
-  .form-control {
-    border-color: $state-warning-border;
-    @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075));
-
-    &:focus {
-      border-color: darken($state-warning-border, 10%);
-      $shadow: inset 0 1px 1px rgba(0, 0, 0, .075),
-      0 0 6px lighten($state-warning-border, 20%);
-      @include box-shadow($shadow);
-    }
-  }
-
-  .btn {
-    border-color: $state-warning-border;
-  }
-}
-
 // panels
 .panel {
   border: 0;
@@ -257,8 +173,8 @@ code {
     font-size: 16px;
     color: inherit;
     padding: 12px;
-    background-color: $body-bg;
-    border-bottom: 1px solid $hairlinegray;
+    background-color: $background;
+    border-bottom: 1px solid $divider;
 
     a {
       color: inherit;

diff --git a/app/assets/stylesheets/bootstrap_variable_overrides.css.scss b/app/assets/stylesheets/bootstrap_variable_overrides.css.scss
@@ -1,4 +1,37 @@
-// Color overrides are in theme/theme.css.scss
+// boostrap color overrides
+
+// primary, secondary, success, info, warning, danger and the variables for color names are already overridden in m3-theme-light
+
+$body-bg: $background;
+$content-bg: $surface;
+$body-color: $on-background;
+$link-color: $primary;
+$text-secondary: $on-surface-muted;
+$text-disabled: $on-surface-muted;
+
+// dropdowns
+$dropdown-bg: $background;
+$dropdown-color: $on-background;
+$dropdown-link-color: $on-background;
+$dropdown-link-hover-bg: $secondary-container;
+$dropdown-link-hover-color: $on-secondary-container;
+$dropdown-link-active-bg: $secondary;
+
+// inputs
+$input-disabled-bg: $background;
+$input-border-color: $outline;
+$form-select-indicator-color: $on-background;
+
+// pagination
+$pagination-bg: $surface;
+$pagination-hover-bg: $surface;
+$pagination-disabled-bg: $background;
+
+$modal-content-bg: $surface;
+
+$form-check-input-checked-bg-color: $secondary;
+
+$table-border-color: $divider;
 
 // disable rfs
 $enable-rfs: false;
@@ -24,17 +57,6 @@ $blockquote-font-size: $font-size-base;
 
 $alert-bg-scale: 0%;
 
-$blue: $blue-500;
-$indigo: $indigo-500;
-$purple: $purple-500;
-$pink: $pink-500;
-$red: $red-500;
-$orange: $orange-500;
-$yellow: $yellow-500;
-$green: $green-500;
-$teal: $teal-500;
-$cyan: $cyan-500;
-
 // bootstrap offcanvas overrides
 $offcanvas-horizontal-width: 700px;
 $offcanvas-border-width: 0px;