MOBILE-4196 boostrap: Adapt BS5 and add compatibility to BS4

Author: crazyserver

.github/workflows/testing.yml

@@ -79,7 +79,7 @@ jobs:
         # In order to support Chrome 93 and iOS 15 we need to find Static initialization blocks are not present in the code.
         # See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/Static_initialization_blocks
         # acorn is used by es-check but cannot check for this feature only, so we need to check it manually.
-        if grep -qE 'static[ ]*\{' www/*.js cordova-plugin-moodleapp/www/*.js; then
+        if grep -qE '(^|[^-])\bstatic[ ]*\{' www/*.js cordova-plugin-moodleapp/www/*.js; then
           echo "::error::Static initialization blocks are not supported in Chrome 93 and iOS 15."
           exit 1
         fi

src/addons/mod/book/tests/behat/snapshots/test-basic-usage-of-book-activity-in-app-open-chapters-from-table-of-contents_11.png

@@ -23,7 +23,6 @@ $grid-column-paddings: (
     padding: 16px;
 
     ::ng-deep {
-        @import "theme/components/moodle";
         @import "theme/components/bootstrap/bootstrap";
 
         table {

src/addons/mod/data/data.scss

@@ -1,12 +1,11 @@
-:root,
-[data-bs-theme="light"] {
+& {
   // Note: Custom variable values only support SassScript inside `#{}`.
 
   // Colors
   //
   // Generate palettes for full colors, grays, and theme colors.
 
-  @each $color, $value in $colors {
+  @each $color, $value in $bs-colors {
     --#{$prefix}#{$color}: #{$value};
   }
 

src/theme/components/bootstrap/_root.scss

@@ -50,7 +50,7 @@ $body-emphasis-color-dark:          $white !default;
 $border-color-dark:                 $gray-700 !default;
 $border-color-translucent-dark:     rgba($white, .15) !default;
 $headings-color-dark:               inherit !default;
-$link-color-dark:                   tint-color($primary, 40%) !default;
+$link-color-dark:                   tint-color($blue, 40%) !default;
 $link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
 $code-color-dark:                   tint-color($code-color, 40%) !default;
 $mark-color-dark:                   $body-color-dark !default;

src/theme/components/bootstrap/_variables-dark.scss

@@ -6,17 +6,17 @@
 // Color system
 
 // scss-docs-start gray-color-variables
-$white:    #fff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
-$gray-600: #6c757d !default;
-$gray-700: #495057 !default;
-$gray-800: #343a40 !default;
-$gray-900: #212529 !default;
-$black:    #000 !default;
+$white:    global.$white;
+$gray-100: global.$gray-100;
+$gray-200: global.$gray-200;
+$gray-300: global.$gray-300;
+$gray-400: global.$gray-400;
+$gray-500: global.$gray-500;
+$gray-600: global.$gray-600;
+$gray-700: global.$gray-700;
+$gray-800: global.$gray-800;
+$gray-900: global.$gray-900;
+$black:    global.$black;
 // scss-docs-end gray-color-variables
 
 // fusv-disable
@@ -36,20 +36,20 @@ $grays: (
 // fusv-enable
 
 // scss-docs-start color-variables
-$blue:    #0d6efd !default;
+$blue:    global.$blue !default;
 $indigo:  #6610f2 !default;
 $purple:  #6f42c1 !default;
 $pink:    #d63384 !default;
-$red:     #dc3545 !default;
-$orange:  #fd7e14 !default;
-$yellow:  #ffc107 !default;
-$green:   #198754 !default;
+$red:     global.$red !default;
+$orange:  #f98012 !default;
+$yellow:  global.$yellow !default;
+$green:   global.$green !default;
 $teal:    #20c997 !default;
-$cyan:    #0dcaf0 !default;
+$cyan:    global.$cyan !default;
 // scss-docs-end color-variables
 
 // scss-docs-start colors-map
-$colors: (
+$bs-colors: (
   "blue":       $blue,
   "indigo":     $indigo,
   "purple":     $purple,
@@ -298,14 +298,14 @@ $cyans: (
 // fusv-enable
 
 // scss-docs-start theme-color-variables
-$primary:       $blue !default;
-$secondary:     $gray-600 !default;
-$success:       $green !default;
-$info:          $cyan !default;
-$warning:       $yellow !default;
-$danger:        $red !default;
-$light:         $gray-100 !default;
-$dark:          $gray-900 !default;
+$primary:       global.$primary;
+$secondary:     global.$secondary;
+$success:       global.$success;
+$info:          global.$cyan;
+$warning:       global.$warning;
+$danger:        global.$danger;
+$light:         global.$light;
+$dark:          global.$dark;
 // scss-docs-end theme-color-variables
 
 // scss-docs-start theme-colors-map
@@ -435,8 +435,8 @@ $position-values: (
 // Settings for the `<body>` element.
 
 $body-text-align:           null !default;
-$body-color:                $gray-900 !default;
-$body-bg:                   $white !default;
+$body-color:                global.$text-color !default;
+$body-bg:                   global.$background-color !default;
 
 $body-secondary-color:      rgba($body-color, .75) !default;
 $body-secondary-bg:         $gray-200 !default;
@@ -450,7 +450,7 @@ $body-emphasis-color:       $black !default;
 //
 // Style anchor elements.
 
-$link-color:                              $primary !default;
+$link-color:                              $blue !default;
 $link-decoration:                         underline !default;
 $link-shade-percentage:                   20% !default;
 $link-hover-color:                        shift-color($link-color, $link-shade-percentage) !default;
@@ -603,10 +603,10 @@ $aspect-ratios: (
 
 // scss-docs-start font-variables
 // stylelint-disable value-keyword-case
-$font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-sans-serif:      var(--ion-font-family);
 $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
 // stylelint-enable value-keyword-case
-$font-family-base:            var(--#{$prefix}font-sans-serif) !default;
+$font-family-base:            var(--ion-font-family) !default;
 $font-family-code:            var(--#{$prefix}font-monospace) !default;
 
 // $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins

src/theme/components/bootstrap/_variables.scss

@@ -1,3 +1,5 @@
+@use "../../globals" as global;
+
 @import "mixins/banner";
 @include bsBanner("");
 
@@ -50,3 +52,5 @@
 // Utilities
 @import "utilities/api";
 // scss-docs-end import-stack
+
+@import "bs4-compat";