refactor: migrate sass/scss deprecations

configuration/prettier-config/index.js

@@ -9,7 +9,8 @@ const config = {
   trailingComma: 'all',
   bracketSpacing: false,
   arrowParens: 'avoid',
-  endOfLine: 'lf'
+  endOfLine: 'lf',
+  htmlWhitespaceSensitivity: 'strict'
 }
 
 module.exports = config;

frontend/app/package.json

@@ -75,8 +75,8 @@
     "@capacitor/screen-orientation": "8.0.1",
     "@capacitor/share": "8.0.1",
     "@capacitor/splash-screen": "8.0.2",
-    "@ionic/angular": "8.8.16",
+    "@ionic/angular": "8.8.19",
-    "@ionic/angular-server": "8.8.16",
+    "@ionic/angular-server": "8.8.19",
     "@ionic/storage-angular": "4.0.0",
     "@maplibre/ngx-maplibre-gl": "17.4.1",
     "@ngx-translate/core": "15.0.0",
@@ -94,7 +94,7 @@
     "form-data": "4.0.6",
     "geojson": "0.5.0",
     "ionic-appauth": "2.1.0",
-    "ionicons": "8.0.13",
+    "ionicons": "8.1.0",
     "jsonpath-plus": "10.3.0",
     "maplibre-gl": "4.0.2",
     "material-symbols": "0.17.1",
@@ -110,7 +110,7 @@
     "semver": "7.6.0",
     "swiper": "8.4.5",
     "tslib": "2.6.2",
-    "zone.js": "0.15.1"
+    "zone.js": "0.16.2"
   },
   "devDependencies": {
     "@angular-devkit/architect": "0.1902.27",
@@ -132,7 +132,7 @@
     "@capacitor/assets": "3.0.5",
     "@capacitor/cli": "8.2.0",
     "@capacitor/ios": "8.2.0",
-    "@compodoc/compodoc": "1.1.23",
+    "@compodoc/compodoc": "1.2.1",
     "@cypress/schematic": "4.1.1",
     "@ionic/angular-toolkit": "12.3.0",
     "@ionic/cli": "7.2.1",
@@ -172,11 +172,11 @@
     "karma-junit-reporter": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
     "license-checker": "25.0.1",
-    "stylelint": "16.3.1",
+    "stylelint": "17.14.1",
-    "stylelint-config-clean-order": "5.4.1",
+    "stylelint-config-clean-order": "10.0.0",
     "stylelint-config-prettier-scss": "1.0.0",
-    "stylelint-config-recommended-scss": "14.0.0",
+    "stylelint-config-recommended-scss": "17.0.1",
-    "stylelint-config-standard-scss": "13.0.0",
+    "stylelint-config-standard-scss": "17.0.0",
     "surge": "0.23.1",
     "ts-node": "10.9.2",
     "typescript": "5.5.4"

frontend/app/src/app/modules/about/about-page/about-page.scss

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import '../../../../theme/util/mixins';
+@use '../../../../theme/util/mixins';
 
 ion-text {
   margin-inline: var(--spacing-md);
@@ -64,7 +64,7 @@ ion-text {
   .about-changelog,
   .licenses-content,
   .page-content {
-    @include border-radius-in-parallax(var(--border-radius-default));
+    @include mixins.border-radius-in-parallax(var(--border-radius-default));
 
     display: flex;
     flex-direction: column;
@@ -76,7 +76,7 @@ ion-text {
     background: var(--ion-item-background);
 
     & > * {
-      @include border-radius-in-parallax(var(--border-radius-default));
+      @include mixins.border-radius-in-parallax(var(--border-radius-default));
 
       position: relative;
       overflow: hidden;

frontend/app/src/app/modules/about/about-release-notes.scss

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import '../../../theme/util/mixins';
+@use '../../../theme/util/mixins';
 
 ion-button {
   --color: var(--ion-color-primary-contrast);
@@ -22,7 +22,7 @@ ion-button {
 }
 
 .release-notes {
-  @include border-radius-in-parallax(var(--border-radius-default));
+  @include mixins.border-radius-in-parallax(var(--border-radius-default));
 
   display: block;
   margin: var(--spacing-md);

frontend/app/src/app/modules/about/release-notes-markdown.scss

@@ -20,7 +20,7 @@
   }
 
   blockquote {
-    background: var(--ion-item-background);
     border-left: 0.25em solid var(--ion-color-medium);
+    background: var(--ion-item-background);
   }
 }

frontend/app/src/app/modules/about/release-notes.scss

@@ -1,11 +1,11 @@
-@import '../../../theme/util/mixins';
+@use '../../../theme/util/mixins';
 
 ion-title {
   padding-block: var(--spacing-md);
 }
 
 .content-card {
-  @include border-radius-in-parallax(var(--border-radius-default));
+  @include mixins.border-radius-in-parallax(var(--border-radius-default));
 
   display: block;
   margin: var(--spacing-md);

frontend/app/src/app/modules/dashboard/dashboard.collapse.component.scss

@@ -13,9 +13,9 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../../theme/util/mixins';
+@use '../../../theme/util/mixins';
 
-@include ion-md-down {
+@include mixins.ion-md-down {
   ion-toolbar,
   .logo,
   .schedule,

frontend/app/src/app/modules/dashboard/dashboard.component.html

@@ -21,7 +21,7 @@
 <div #schedule class="schedule">
   <a [routerLink]="['/schedule/weekly-view']">
     <ion-icon [size]="36" [weight]="300" name="calendar_month"></ion-icon>
-    <ion-label [innerHTML]="'schedule.recurring' | translate"></ion-label>
+    <ion-label>{{ 'schedule.recurring' | translate }}</ion-label>
   </a>
   <!-- Avoid structural directives here, they might interfere with the collapse animation -->
   <a

frontend/app/src/app/modules/dashboard/dashboard.component.scss

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../../theme/util/mixins';
+@use '../../../theme/util/mixins';
 
 :host ion-header {
   z-index: 1;
@@ -59,15 +59,6 @@ ion-content {
 }
 
 .schedule {
-  @include ion-md-up {
-    position: unset;
-
-    width: unset;
-    height: calc(var(--tablet-top-bar-height) + (2 * var(--spacing-xl)));
-    margin: 0;
-    padding: var(--spacing-xl);
-  }
-
   z-index: 3;
 
   display: flex;
@@ -82,6 +73,15 @@ ion-content {
 
   background: var(--ion-color-primary);
 
+  @include mixins.ion-md-up {
+    position: unset;
+
+    width: unset;
+    height: calc(var(--tablet-top-bar-height) + (2 * var(--spacing-xl)));
+    margin: 0;
+    padding: var(--spacing-xl);
+  }
+
   a {
     display: flex;
     flex-direction: column;
@@ -89,18 +89,13 @@ ion-content {
     height: auto;
     min-height: 80px;
     padding: var(--spacing-sm);
+    border-radius: var(--border-radius-default);
 
     color: var(--ion-color-primary-contrast);
     text-decoration: none;
-
-    border-radius: var(--border-radius-default);
   }
 
   a:first-child {
-    @include phone-landscape {
-      height: auto;
-    }
-
     overflow: hidden;
     flex: 0 0 auto;
     gap: var(--spacing-sm);
@@ -108,27 +103,22 @@ ion-content {
     justify-content: center;
 
     height: 100%;
+    border: 2px solid var(--ion-color-primary-tint);
 
     text-align: center;
 
-    border: 2px solid var(--ion-color-primary-tint);
+    @include mixins.phone-landscape {
+      height: auto;
+    }
 
     ion-label {
       font-size: var(--font-size-xxs);
       font-weight: var(--font-weight-semi-bold);
-      word-break: break-word;
+      word-break: overflow-wrap;
     }
   }
 
   a:last-child {
-    @include ion-md-up {
-      flex: 1 1 100%;
-    }
-
-    @include phone-landscape {
-      flex: 1 1 85%;
-    }
-
     z-index: 1;
 
     flex: 1 1 65%;
@@ -138,6 +128,14 @@ ion-content {
 
     background: var(--linear-gradient);
 
+    @include mixins.ion-md-up {
+      flex: 1 1 100%;
+    }
+
+    @include mixins.phone-landscape {
+      flex: 1 1 85%;
+    }
+
     ion-label {
       font-size: var(--font-size-xxs);
       font-weight: var(--font-weight-bold);

frontend/app/src/app/modules/dashboard/sections/jobs-section/job-section.component.scss

@@ -29,8 +29,8 @@ simple-swiper {
 
   &::part(native) {
     height: 100%;
-    background: none;
     border-radius: var(--border-radius-default);
+    background: none;
   }
 
   ion-label {

frontend/app/src/app/modules/dashboard/sections/news-section/news-section.component.scss

@@ -23,8 +23,8 @@ simple-swiper {
 
   &::part(native) {
     height: 100%;
-    background: none;
     border-radius: var(--border-radius-default);
+    background: none;
   }
 
   ion-label {
@@ -64,10 +64,9 @@ simple-swiper {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
 
     white-space: break-spaces;
-
-    -webkit-line-clamp: 3;
   }
 
   .title-sub {

frontend/app/src/app/modules/data/detail/data-detail-content.scss

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import '../../../../theme/util/mixins';
+@use '../../../../theme/util/mixins';
 
 :host {
   display: contents;
@@ -34,8 +34,8 @@ stapps-origin-detail {
   padding: 0 var(--spacing-md);
 
   ::ng-deep > * {
-    @include border-radius-in-parallax(var(--border-radius-default));
+    @include mixins.border-radius-in-parallax(var(--border-radius-default));
-    @include content-padding;
+    @include mixins.content-padding;
 
     position: relative;
 

frontend/app/src/app/modules/data/elements/long-inline-text.html

@@ -13,20 +13,20 @@
 ~ this program. If not, see <https://www.gnu.org/licenses/>.
 -->
 @if (text !== undefined) {
-  <span class="ion-hide-sm-up">
+  <span class="ion-hide-sm-up"
-    {{ text | slice: 0 : size }}
+    >{{ text | slice: 0 : size }}
     @if (text.length > size) {
       <span class="ion-hide-sm-up">…</span>
     }
   </span>
-  <span class="ion-hide-sm-down ion-hide-md-up">
+  <span class="ion-hide-sm-down ion-hide-md-up"
-    {{ text | slice: 0 : size * 2 }}
+    >{{ text | slice: 0 : size * 2 }}
     @if (text.length > size * 2) {
       <span class="ion-hide-sm-down ion-hide-md-up"> … </span>
     }
   </span>
-  <span class="ion-hide-md-down">
+  <span class="ion-hide-md-down"
-    {{ text | slice: 0 : size * 3 }}
+    >{{ text | slice: 0 : size * 3 }}
     @if (text.length > size * 3) {
       <span class="ion-hide-md-down">…</span>
     }

frontend/app/src/app/modules/data/elements/rating.scss

@@ -34,9 +34,9 @@ ion-button {
   justify-content: flex-start;
 
   padding-inline: var(--spacing-xl);
+  border-radius: var(--border-radius-default);
 
   background: var(--ion-color-light);
-  border-radius: var(--border-radius-default);
 
   > ion-icon {
     &:active,

frontend/app/src/app/modules/data/list/data-list-item.scss

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import '../../../../theme/util/mixins';
+@use '../../../../theme/util/mixins';
 
 :host {
   display: block;
@@ -26,7 +26,7 @@ ion-item::part(native) {
 ion-item {
   --border-color: transparent;
   --inner-padding-end: 0;
-  @include border-radius-in-parallax(var(--border-radius-default));
+  @include mixins.border-radius-in-parallax(var(--border-radius-default));
 
   overflow: hidden;
   height: 100%;
@@ -44,9 +44,8 @@ ion-item {
 .ion-text-wrap ::ng-deep ion-label {
   display: -webkit-box;
   -webkit-box-orient: vertical;
-  white-space: normal !important;
-
   -webkit-line-clamp: 3;
+  white-space: normal !important;
 }
 
 [slot='end'] {
@@ -64,22 +63,20 @@ ion-item ::ng-deep {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
 
     white-space: break-spaces;
-
-    -webkit-line-clamp: 2;
   }
 
   .title-sub {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
 
     margin-block: var(--spacing-xs);
 
     white-space: break-spaces;
-
-    -webkit-line-clamp: 1;
   }
 }
 

frontend/app/src/app/modules/data/types/dish/dish-characteristics.scss

@@ -44,8 +44,8 @@ abbr {
 
   mask-image: var(--background-url);
   mask-mode: alpha;
-  mask-position: center;
   mask-repeat: no-repeat;
+  mask-position: center;
   mask-size: contain;
 }
 

frontend/app/src/app/modules/data/types/message/message-list-item.html

@@ -23,7 +23,7 @@
             <stapps-long-inline-text [text]="item.messageBody" [size]="80"></stapps-long-inline-text>
           </p>
         }
-        <ion-note>{{ 'type' | thingTranslate: item }}</ion-note>
+        <ion-note>{{ 'type' | thingTranslate: item | titlecase }}</ion-note>
       </div>
     </ion-col>
   </ion-row>

frontend/app/src/app/modules/feedback/feedback-page.scss

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import '../../../theme/util/mixins';
+@use '../../../theme/util/mixins';
 
 pre {
   white-space: pre-wrap;
@@ -58,7 +58,7 @@ ion-button {
   }
 
   .feedback-content {
-    @include border-radius-in-parallax(var(--border-radius-default));
+    @include mixins.border-radius-in-parallax(var(--border-radius-default));
 
     display: flex;
     flex-direction: column;
@@ -69,7 +69,7 @@ ion-button {
     background: var(--ion-item-background);
 
     & > * {
-      @include border-radius-in-parallax(var(--border-radius-default));
+      @include mixins.border-radius-in-parallax(var(--border-radius-default));
 
       position: relative;
       overflow: hidden;

frontend/app/src/app/modules/map/elements/poi-marker.scss

@@ -27,12 +27,11 @@ ion-label {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
 
   padding: 4px 0;
 
   text-align: left;
   overflow-wrap: normal;
   white-space: wrap;
-
-  -webkit-line-clamp: 2;
 }

frontend/app/src/app/modules/map/elements/poi-markers.scss

@@ -5,13 +5,13 @@
 
   width: fit-content;
   padding-inline: var(--spacing-md);
+  border-radius: 15px;
 
   font-size: 0.8em;
   color: var(--ion-color-primary-contrast);
 
   opacity: 0.8;
   background: var(--ion-color-primary);
-  border-radius: 15px;
 }
 
 button:not(:only-child) {

frontend/app/src/app/modules/map/map-page.html

@@ -21,7 +21,7 @@
 
 <ion-content id="map">
   <mgl-map
-    [style]="('(prefers-color-scheme: dark)' | mediaQuery | async) ? 'dark' : 'light' | mapStyleUrl"
+    [style]="('(prefers-color-scheme: dark)' | mediaQuery | async) ? 'dark' : ('light' | mapStyleUrl)"
     [attributionControl]="false"
     [fitBounds]="(bounds | async) ?? undefined"
     [fitBoundsOptions]="{maxZoom: 15, padding: {top: 100, bottom: 50, left: 50, right: 50}, animate: false}"

frontend/app/src/app/modules/map/map-widget.html

@@ -14,7 +14,7 @@
   -->
 <mgl-map
   auto-3d
-  [style]="('(prefers-color-scheme: dark)' | mediaQuery | async) ? 'dark' : 'light' | mapStyleUrl"
+  [style]="('(prefers-color-scheme: dark)' | mediaQuery | async) ? 'dark' : ('light' | mapStyleUrl)"
   [interactive]="false"
   [attributionControl]="false"
   [center]="$any(place.geo.point.coordinates)"

frontend/app/src/app/modules/map/map-widget.scss

@@ -25,5 +25,5 @@ mgl-map {
 }
 
 .marker {
-  filter: drop-shadow(0 0 2px rgba(0 0 0 / 50%));
+  filter: drop-shadow(0 0 2px rgb(0 0 0 / 50%));
 }

frontend/app/src/app/modules/menu/navigation/navigation.scss

@@ -12,10 +12,10 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import '../../../../theme/util/mixins';
+@use '../../../../theme/util/mixins';
 
 stapps-navigation-tabs {
-  @include ion-xl-up {
+  @include mixins.ion-xl-up {
     display: none;
   }
 }
@@ -24,21 +24,21 @@ stapps-navigation-tabs {
   ion-split-pane {
     --side-max-width: 256px;
 
-    @include phone-landscape {
+    margin-bottom: calc(var(--ion-tabbar-height) + env(safe-area-inset-bottom));
+    transition: margin-top 150ms ease;
+
+    @include mixins.phone-landscape {
       margin-bottom: 0;
     }
 
-    @include ion-md-up {
+    @include mixins.ion-md-up {
       margin-bottom: 0;
       margin-left: var(--navigation-rail-width);
     }
 
-    @include ion-xl-up {
+    @include mixins.ion-xl-up {
       margin-left: 0;
     }
-
-    margin-bottom: calc(var(--ion-tabbar-height) + env(safe-area-inset-bottom));
-    transition: margin-top 150ms ease;
   }
 
   ion-toolbar.in-toolbar {
@@ -49,12 +49,12 @@ stapps-navigation-tabs {
       padding: var(--spacing-xl) var(--spacing-md);
 
       .logo {
-        @include ion-md-up {
-          height: var(--tablet-top-bar-height);
-        }
-
         height: 80px;
         object-position: left;
+
+        @include mixins.ion-md-up {
+          height: var(--tablet-top-bar-height);
+        }
       }
     }
   }

frontend/app/src/app/modules/menu/navigation/tabs.component.scss

@@ -12,10 +12,16 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import '../../../../theme/util/mixins';
+@use '../../../../theme/util/mixins';
 
 :host {
-  @include ion-md-up {
+  position: absolute;
+  z-index: 100;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  @include mixins.ion-md-up {
     top: 0;
     right: unset;
 
@@ -38,7 +44,6 @@
 
       width: var(--navigation-rail-width);
       height: 100vh;
-
       border-top: unset;
       border-right: var(--border);
     }
@@ -49,12 +54,6 @@
     }
   }
 
-  position: absolute;
-  z-index: 100;
-  right: 0;
-  bottom: 0;
-  left: 0;
-
   .menu-button {
     display: none;
   }

frontend/app/src/app/modules/news/item/news-item.scss

@@ -38,10 +38,10 @@ ion-card-title {
   overflow: hidden;
   display: -webkit-box;
   -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
 
   font-size: var(--font-size-xl);
 
-  -webkit-line-clamp: 3;
   max-lines: 3;
 }
 

frontend/app/src/app/modules/news/page/news-page.scss

@@ -12,10 +12,10 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import '../../../../theme/util/mixins';
+@use '../../../../theme/util/mixins';
 
 .news-grid {
-  @include auto-grid(300px);
+  @include mixins.auto-grid(300px);
 
   display: grid;
   gap: var(--spacing-sm);
@@ -27,7 +27,7 @@
 }
 
 ion-content.ios > div > .news-grid {
-  @include auto-grid(350px);
+  @include mixins.auto-grid(350px);
 
   gap: var(--spacing-lg);
   margin: var(--spacing-lg);

frontend/app/src/app/modules/profile/id-cards.scss

@@ -21,12 +21,12 @@ simple-swiper {
   --swiper-slide-width: calc(min(90cqw, 12cm));
 
   padding-block: 32px;
-  filter: drop-shadow(0 0 16px rgba(0 0 0 / 10%));
+  filter: drop-shadow(0 0 16px rgb(0 0 0 / 10%));
 }
 
 @media (prefers-color-scheme: dark) {
   simple-swiper {
-    filter: drop-shadow(0 0 16px rgba(0 0 0 / 50%));
+    filter: drop-shadow(0 0 16px rgb(0 0 0 / 50%));
   }
 }
 
@@ -39,11 +39,11 @@ simple-swiper {
 
   height: calc(min(90cqw, 12cm) * (53.98 / 85.6));
   padding: var(--spacing-xxl);
+  border-radius: 3mm;
 
   color: var(--ion-color-dark);
 
   background: var(--ion-color-light);
-  border-radius: 3mm;
   outline: 1px dashed var(--ion-color-dark);
   outline-offset: calc(-1 * var(--spacing-sm));
 

frontend/app/src/app/modules/schedule/page/components/calendar-component.scss

@@ -99,12 +99,12 @@ ion-content {
 
       width: 40px;
       height: 70px;
+      border-right: 1px solid var(--ion-item-border-color);
 
       font-weight: var(--font-weight-bold);
       text-align: center;
 
       background-color: var(--ion-background-color);
-      border-right: 1px solid var(--ion-item-border-color);
     }
   }
 
@@ -116,12 +116,11 @@ ion-content {
 .date-header {
   height: fit-content;
   padding: var(--spacing-sm) auto;
+  border-bottom: 1px solid var(--ion-item-border-color);
 
   font-weight: var(--font-weight-bold);
   text-align: center;
   text-transform: uppercase;
-
-  border-bottom: 1px solid var(--ion-item-border-color);
 }
 
 .day-labels > ion-button[disabled] {

frontend/app/src/app/modules/schedule/page/grid/schedule-card.scss

@@ -19,7 +19,6 @@ ion-card {
   width: inherit;
   margin-right: 0;
   margin-left: 0;
-
   border-radius: 0;
 
   &::after {

frontend/app/src/app/modules/schedule/page/grid/schedule-cursor.scss

@@ -36,8 +36,7 @@ div {
       height: 2px;
       margin-top: 8px;
       margin-right: 16px;
-      margin-block: 0 0;
+      margin-block: 0;
-
       border-top: 2px solid var(--ion-color-danger);
     }
 
@@ -48,9 +47,9 @@ div {
 
       width: 8px;
       height: 8px;
+      border-radius: 50% 0 50% 50%;
 
       background-color: var(--ion-color-danger);
-      border-radius: 50% 0 50% 50%;
     }
   }
 }

frontend/app/src/app/modules/schedule/page/grid/schedule-day.scss

@@ -30,13 +30,13 @@
 
       height: fit-content;
       padding: var(--spacing-md);
+      border-bottom: 2px solid var(--ion-item-border-color);
 
       font-size: var(--font-size-md);
       font-weight: var(--font-weight-bold);
       text-align: center;
 
       background-color: var(--ion-background-color);
-      border-bottom: 2px solid var(--ion-item-border-color);
 
       &.leftmost {
         border-left: 1px solid var(--ion-item-border-color);

frontend/app/src/app/modules/schedule/page/schedule-page.html

@@ -19,13 +19,13 @@
       <ion-back-button></ion-back-button>
     </ion-buttons>
     @if (tabChoreographer.currentValue === 'calendar') {
-      <ion-title [innerHTML]="'schedule.calendar' | translate | titlecase"></ion-title>
+      <ion-title>{{ 'schedule.calendar' | translate | titlecase }}</ion-title>
     }
     @if (tabChoreographer.currentValue === 'weekly-view') {
-      <ion-title [innerHTML]="'schedule.recurring' | translate | titlecase"></ion-title>
+      <ion-title>{{ 'schedule.recurring' | translate | titlecase }}</ion-title>
     }
     @if (tabChoreographer.currentValue === 'single') {
-      <ion-title [innerHTML]="'schedule.single' | translate | titlecase"></ion-title>
+      <ion-title>{{ 'schedule.single' | translate | titlecase }}</ion-title>
     }
     <ion-buttons slot="end">
       <ion-button (click)="onTodayClick()">
@@ -36,15 +36,15 @@
   <ion-toolbar color="primary" mode="md" class="tabs-toolbar">
     <ion-segment #segment value="calendar" (ionChange)="onSegmentChange()">
       <ion-segment-button value="calendar" layout="icon-start">
-        <ion-label class="ion-text-wrap" [innerHTML]="'schedule.calendar' | translate"></ion-label>
+        <ion-label class="ion-text-wrap">{{ 'schedule.calendar' | translate }}</ion-label>
         <ion-icon name="calendar_today"></ion-icon>
       </ion-segment-button>
       <ion-segment-button value="weekly-view" layout="icon-start">
-        <ion-label class="ion-text-wrap" [innerHTML]="'schedule.recurring' | translate"></ion-label>
+        <ion-label class="ion-text-wrap">{{ 'schedule.recurring' | translate }}</ion-label>
         <ion-icon name="event_repeat"></ion-icon>
       </ion-segment-button>
       <ion-segment-button value="single" layout="icon-start">
-        <ion-label class="ion-text-wrap" [innerHTML]="'schedule.single' | translate"></ion-label>
+        <ion-label class="ion-text-wrap">{{ 'schedule.single' | translate }}</ion-label>
         <ion-icon name="event_upcoming"></ion-icon>
       </ion-segment-button>
     </ion-segment>

frontend/app/src/app/modules/settings/page/settings-page.scss

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import '../../../../theme/util/mixins';
+@use '../../../../theme/util/mixins';
 
 :host ::ng-deep {
   ion-grid,
@@ -50,7 +50,7 @@
   }
 
   .settings-content {
-    @include border-radius-in-parallax(var(--border-radius-default));
+    @include mixins.border-radius-in-parallax(var(--border-radius-default));
 
     display: flex;
     flex-direction: column;
@@ -61,7 +61,7 @@
     background: var(--ion-item-background);
 
     & > * {
-      @include border-radius-in-parallax(var(--border-radius-default));
+      @include mixins.border-radius-in-parallax(var(--border-radius-default));
 
       position: relative;
       overflow: hidden;

frontend/app/src/app/util/section.scss

@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import '../../theme/util/mixins';
+@use '../../theme/util/mixins';
 
 a {
   display: contents;
@@ -58,13 +58,13 @@ ion-col {
   --swiper-scroll-padding: var(--spacing-md);
   --swiper-gap: var(--spacing-sm);
 
-  @include ion-md-up {
+  display: block;
+  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
+  transition: height 250ms ease;
+
+  @include mixins.ion-md-up {
     --swiper-scroll-padding: var(--spacing-xxl);
 
     padding: var(--spacing-lg) var(--spacing-xxl) var(--spacing-sm);
   }
-
-  display: block;
-  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm);
-  transition: height 250ms ease;
 }

frontend/app/src/global.scss

@@ -14,6 +14,34 @@
  */
 
 // http://ionicframework.com/docs/theming/
+
+@use 'theme/common/helper';
+@use 'theme/common/ion-alert';
+@use 'theme/common/ion-button';
+@use 'theme/common/ion-card';
+@use 'theme/common/ion-content-parallax';
+@use 'theme/common/ion-header';
+@use 'theme/common/ion-img';
+@use 'theme/common/ion-item';
+@use 'theme/common/ion-menu';
+@use 'theme/common/ion-modal';
+@use 'theme/common/ion-popover';
+@use 'theme/common/ion-refresher';
+@use 'theme/common/ion-searchbar';
+@use 'theme/common/ion-toolbar';
+@use 'theme/common/link';
+@use 'theme/common/maplibre';
+@use 'theme/common/material-symbols';
+@use 'theme/common/swiper';
+@use 'theme/common/title';
+
+@use 'theme/components/card';
+@use 'theme/components/centered-message-container';
+@use 'theme/components/image-dark';
+@use 'theme/components/section';
+
+@use 'theme/variables';
+
 @import '@ionic/angular/css/normalize.css';
 @import '@ionic/angular/css/structure.css';
 @import '@ionic/angular/css/typography.css';
@@ -32,33 +60,6 @@
 @import 'swiper/scss/controller';
 @import 'swiper/scss/navigation';
 
-@import './theme/common/helper';
-@import './theme/common/ion-alert';
-@import './theme/common/ion-button';
-@import './theme/common/ion-card';
-@import './theme/common/ion-content-parallax';
-@import './theme/common/ion-header';
-@import './theme/common/ion-img';
-@import './theme/common/ion-item';
-@import './theme/common/ion-menu';
-@import './theme/common/ion-modal';
-@import './theme/common/ion-popover';
-@import './theme/common/ion-refresher';
-@import './theme/common/ion-searchbar';
-@import './theme/common/ion-toolbar';
-@import './theme/common/link';
-@import './theme/common/maplibre';
-@import './theme/common/material-symbols';
-@import './theme/common/swiper';
-@import './theme/common/title';
-
-@import './theme/components/card';
-@import './theme/components/centered-message-container';
-@import './theme/components/image-dark';
-@import './theme/components/section';
-
-@import './theme/variables';
-
 .add-event-popover {
   --width: fit-content;
   --max-width: 95%;

frontend/app/src/theme/colors.scss

@@ -12,20 +12,20 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-@import './util/color-system';
+@use 'util/color-system';
 
-@include ion-color(primary, #3880ff);
+@include color-system.ion-color(primary, #3880ff);
-@include ion-color(secondary, #32db64);
+@include color-system.ion-color(secondary, #32db64);
-@include ion-color(tertiary, #f4a942);
+@include color-system.ion-color(tertiary, #f4a942);
-@include ion-color(success, #10dc60);
+@include color-system.ion-color(success, #10dc60);
-@include ion-color(warning, #ffce00);
+@include color-system.ion-color(warning, #ffce00);
-@include ion-color(danger, #f53d3d);
+@include color-system.ion-color(danger, #f53d3d);
-@include ion-color(light, #f4f4f4, #222);
+@include color-system.ion-color(light, #f4f4f4, #222);
-@include ion-color(medium, #989aa2, #989aa2);
+@include color-system.ion-color(medium, #989aa2, #989aa2);
-@include ion-color(dark, #222, #f4f4f4);
+@include color-system.ion-color(dark, #222, #f4f4f4);
 
-@include ion-background-color(#f5f5f5, #000);
+@include color-system.ion-background-color(#f5f5f5, #000);
-@include ion-item-color(#fff, #0e0e0e);
+@include color-system.ion-item-color(#fff, #0e0e0e);
 
 :root {
   --calender-lecture-card: var(--ion-color-primary-tint);

frontend/app/src/theme/common/_ion-modal.scss

@@ -1,10 +1,10 @@
-@import '../../theme/util/mixins';
+@use '../../theme/util/mixins';
 
 ion-modal {
   &.modal-large {
     --height: 100%;
 
-    @include ion-md-up {
+    @include mixins.ion-md-up {
       --height: 70vh;
       --max-height: 800px;
     }

frontend/app/src/theme/common/_maplibre.scss

@@ -6,13 +6,13 @@
   position: relative;
 
   padding: 0 0 2px;
+  border: none;
 
   font-size: 12px;
   font-weight: bold;
   color: var(--ion-color-dark);
 
   background: none;
-  border: none;
 
   &::after {
     content: '';
@@ -23,7 +23,6 @@
     left: 0;
 
     height: 8px;
-
     border-right: 2px solid var(--ion-color-dark);
     border-bottom: 2px solid var(--ion-color-dark);
   }

frontend/app/src/theme/common/_material-symbols.scss

@@ -16,6 +16,7 @@
   font-family: 'Material Symbols Rounded';
   font-weight: 100 700;
   font-style: normal;
+
   font-display: block;
   src: url('../../assets/icons.min.woff2') format('woff2');
 }
@@ -33,7 +34,7 @@
   text-transform: none;
   text-rendering: optimizelegibility; // Support for Safari and Chrome
   letter-spacing: normal;
-  word-wrap: normal;
+  overflow-wrap: normal;
   white-space: nowrap;
 
   -webkit-font-smoothing: antialiased; // Support for all WebKit browsers

frontend/app/src/theme/common/_swiper.scss

@@ -13,7 +13,7 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../../theme/util/mixins';
+@use '../../theme/util/mixins';
 
 .swiper.card-swiper {
   overflow: visible;
@@ -34,14 +34,14 @@
   .swiper-button-next {
     --swiper-navigation-size: 20px;
 
-    @include ion-md-down {
-      display: none;
-    }
-
     top: calc(-1 * var(--spacing-lg));
     transform: translateY(0%);
     font-weight: var(--font-weight-black);
     color: var(--ion-color-dark);
+
+    @include mixins.ion-md-down {
+      display: none;
+    }
   }
 
   .swiper-button-prev {

frontend/app/src/theme/components/_card.scss

@@ -19,12 +19,13 @@
   height: 100%;
   padding: var(--spacing-md);
 
+  // background-color: var(--ion-item-color);
+  border-radius: var(--border-radius-default);
+
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-bold);
   text-align: left;
 
-  // background-color: var(--ion-item-color);
-  border-radius: var(--border-radius-default);
   box-shadow: var(--shadow-cards);
 
   transition:

frontend/app/src/theme/components/_image-dark.scss

@@ -13,9 +13,9 @@
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 
-@import '../util/dark';
+@use '../util/dark';
 
-@include dark-only {
+@include dark.dark-only {
   .image-dark {
     filter: invert(1);
   }

frontend/app/src/theme/components/_section.scss

@@ -8,6 +8,7 @@
 
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-black);
-  font-stretch: condensed;
   text-transform: uppercase;
+
+  font-stretch: condensed;
 }

frontend/app/src/theme/fonts.scss

@@ -17,35 +17,41 @@
   font-family: Barlow;
   font-weight: 400;
   font-style: normal;
+
   src: url('../assets/fonts/barlow/Barlow-Regular.ttf');
 }
 @font-face {
   font-family: Barlow;
   font-weight: 700;
   font-style: normal;
+
   src: url('../assets/fonts/barlow/Barlow-SemiBold.ttf');
 }
 @font-face {
   font-family: Barlow;
   font-weight: 800;
   font-style: normal;
+
   src: url('../assets/fonts/barlow/Barlow-Bold.ttf');
 }
 @font-face {
   font-family: 'Barlow Condensed';
   font-weight: 400;
   font-style: normal;
+
   src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Regular.ttf');
 }
 @font-face {
   font-family: 'Barlow Condensed';
   font-weight: 700;
   font-style: normal;
+
   src: url('../assets/fonts/barlow_condensed/BarlowCondensed-SemiBold.ttf');
 }
 @font-face {
   font-family: 'Barlow Condensed';
   font-weight: 800;
   font-style: normal;
+
   src: url('../assets/fonts/barlow_condensed/BarlowCondensed-Bold.ttf');
 }

frontend/app/src/theme/util/_color-system.scss

@@ -14,29 +14,34 @@
  */
 @use 'sass:color';
 @use 'sass:math';
-@import '../color-processing';
+@use '../color-processing';
-@import './dark';
+@use 'dark';
 
 @function to-rgb($color) {
-  @return color.red($color) + ',' + color.green($color) + ',' + color.blue($color);
+  @return color.channel($color, 'red', $space: rgb) + ',' + color.channel($color, 'green', $space: rgb) + ',' +
+    color.channel($color, 'blue', $space: rgb);
 }
 
 @function to-shade($color) {
-  @return color.adjust($color, $lightness: -$shade-amount);
+  @return color.adjust($color, $lightness: -(color-processing.$shade-amount));
 }
 
 @function to-tint($color) {
-  @return color.adjust($color, $lightness: $tint-amount);
+  @return color.adjust($color, $lightness: color-processing.$tint-amount);
 }
 
 @function to-contrast($color) {
   $yiq: to-yiq($color);
-  @return if($yiq >= $contrast-threshold, $contrast-dark-color, $contrast-light-color);
+  @return if(
+    $yiq >= color-processing.$contrast-threshold,
+    color-processing.$contrast-dark-color,
+    color-processing.$contrast-light-color
+  );
 }
 
 @function fade($color, $amount) {
   @return if(
-    color.lightness($color) > $fade-threshold,
+    color.channel($color, 'lightness', $space: hsl) > color-processing.$fade-threshold,
     color.adjust($color, $lightness: -$amount),
     color.adjust($color, $lightness: $amount)
   );
@@ -48,9 +53,27 @@
 
 @function interpolate-colors($from, $to, $progress, $progress-min: 0, $progress-max: 100) {
   @return rgb(
-    map-range($progress, $progress-min, $progress-max, color.red($from), color.red($to)),
+    map-range(
-    map-range($progress, $progress-min, $progress-max, color.green($from), color.green($to)),
+      $progress,
-    map-range($progress, $progress-min, $progress-max, color.blue($from), color.blue($to))
+      $progress-min,
+      $progress-max,
+      color.channel($from, 'red', $space: rgb),
+      color.channel($to, 'red', $space: rgb)
+    ),
+    map-range(
+      $progress,
+      $progress-min,
+      $progress-max,
+      color.channel($from, 'green', $space: rgb),
+      color.channel($to, 'green', $space: rgb)
+    ),
+    map-range(
+      $progress,
+      $progress-min,
+      $progress-max,
+      color.channel($from, 'blue', $space: rgb),
+      color.channel($to, 'blue', $space: rgb)
+    )
   );
 }
 
@@ -59,7 +82,8 @@
  */
 @function to-yiq($color) {
   @return math.div(
-    (color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114),
+    (color.channel($color, 'red', $space: rgb) * 299) + (color.channel($color, 'green', $space: rgb) * 587) +
+      (color.channel($color, 'blue', $space: rgb) * 114),
     1000
   );
 }
@@ -72,24 +96,33 @@
 @mixin light-dark-scheme($light, $dark) {
   :root,
   .light {
-    @if $include-theme-independent-colors == true {
+    @if color-processing.$include-theme-independent-colors == true {
       @content ($light, -light);
       @content (if($dark == none, $light, $dark), -dark);
     }
     @content ($light, "");
   }
   @if $dark != none {
-    @include dark-only {
+    @include dark.dark-only {
       @content ($dark, "");
     }
   }
 }
 
 @mixin ion-color-step($name, $from, $to) {
-  @for $i from calc($steps-start / $steps-step) through calc($steps-end / $steps-step) {
+  @for $i
-    $value: $i * $steps-step;
+    from calc(color-processing.$steps-start / color-processing.$steps-step)
+    through calc(color-processing.$steps-end / color-processing.$steps-step)
+  {
+    $value: $i * color-processing.$steps-step;
 
-    #{$name}-#{$value}: #{interpolate-colors($from, $to, $value, $steps-range-start, $steps-range-end)};
+    #{$name}-#{$value}: #{interpolate-colors(
+        $from,
+        $to,
+        $value,
+        color-processing.$steps-range-start,
+        color-processing.$steps-range-end
+      )};
   }
 }
 
@@ -107,8 +140,14 @@
     $text-color: to-contrast($color);
     @include color-rgb(--ion-background-color#{$suffix}, $color);
     @include color-rgb(--ion-text-color#{$suffix}, $text-color);
-    @include color-rgb(--ion-box-shadow-color#{$suffix}, fade($color, $box-shadow-fade-amount));
+    @include color-rgb(
-    @include color-rgb(--ion-placeholder-color#{$suffix}, fade($text-color, $placeholder-fade-amount));
+      --ion-box-shadow-color#{$suffix},
+      fade($color, color-processing.$box-shadow-fade-amount)
+    );
+    @include color-rgb(
+      --ion-placeholder-color#{$suffix},
+      fade($text-color, color-processing.$placeholder-fade-amount)
+    );
 
     @include ion-color-step(--ion-color-step#{$suffix}, $color, $text-color);
   }
@@ -118,8 +157,14 @@
   @include light-dark-scheme($light, $dark) using($color, $suffix) {
     @include color-rgb(--ion-item-background#{$suffix}, $color);
     @include color-rgb(--ion-card-background#{$suffix}, $color);
-    @include color-rgb(--ion-item-border-color#{$suffix}, fade($color, $item-border-color-fade-amount));
+    @include color-rgb(
-    @include color-rgb(--ion-border-color#{$suffix}, fade($color, $item-border-color-fade-amount));
+      --ion-item-border-color#{$suffix},
+      fade($color, color-processing.$item-border-color-fade-amount)
+    );
+    @include color-rgb(
+      --ion-border-color#{$suffix},
+      fade($color, color-processing.$item-border-color-fade-amount)
+    );
     @include color-rgb(--ion-item-color#{$suffix}, to-contrast($color));
   }
 }

frontend/app/src/theme/variables.scss

@@ -14,8 +14,8 @@
  */
 // Ionic Variables and Theming. For more info, please see:
 // http://ionicframework.com/docs/theming/
-@import './colors';
+@use 'colors';
-@import './fonts';
+@use 'fonts';
 
 :root {
   // Fonts