feat: add stylelint

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

@@ -17,20 +17,20 @@
 @import '../color-processing';
 @import './dark';
 
-@function toRGB($color) {
+@function to-rgb($color) {
   @return red($color) + ',' + green($color) + ',' + blue($color);
 }
 
-@function toShade($color) {
+@function to-shade($color) {
   @return darken($color, $shade-amount);
 }
 
-@function toTint($color) {
+@function to-tint($color) {
   @return lighten($color, $tint-amount);
 }
 
-@function toContrast($color) {
-  $yiq: toYiq($color);
+@function to-contrast($color) {
+  $yiq: to-yiq($color);
   @return if($yiq >= $contrast-threshold, $contrast-dark-color, $contrast-light-color);
 }
 
@@ -53,7 +53,7 @@
 /**
  * Converts a color to the YIQ color system
  */
-@function toYiq($color) {
+@function to-yiq($color) {
   @return math.div(
     (color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114),
     1000
@@ -62,19 +62,19 @@
 
 @mixin color-rgb($name, $color) {
   #{$name}: #{$color};
-  #{$name}-rgb: #{toRGB($color)};
+  #{$name}-rgb: #{to-rgb($color)};
 }
 
 @mixin light-dark-scheme($light, $dark) {
   :root,
   .light {
-    @if ($include-theme-independent-colors == true) {
+    @if $include-theme-independent-colors == true {
       @content ($light, -light);
       @content (if($dark == none, $light, $dark), -dark);
     }
     @content ($light, "");
   }
-  @if ($dark != none) {
+  @if $dark != none {
     @include dark-only {
       @content ($dark, "");
     }
@@ -84,6 +84,7 @@
 @mixin ion-color-step($name, $from, $to) {
   @for $i from calc($steps-start / $steps-step) through calc($steps-end / $steps-step) {
     $value: $i * $steps-step;
+
     #{$name}-#{$value}: #{interpolate-colors($from, $to, $value, $steps-range-start, $steps-range-end)};
   }
 }
@@ -91,15 +92,15 @@
 @mixin ion-color($name, $light, $dark: none) {
   @include light-dark-scheme($light, $dark) using($color, $suffix) {
     @include color-rgb(--ion-color-#{$name}#{$suffix}, $color);
-    @include color-rgb(--ion-color-#{$name}-shade#{$suffix}, toShade($color));
-    @include color-rgb(--ion-color-#{$name}-tint#{$suffix}, toTint($color));
-    @include color-rgb(--ion-color-#{$name}-contrast#{$suffix}, toContrast($color));
+    @include color-rgb(--ion-color-#{$name}-shade#{$suffix}, to-shade($color));
+    @include color-rgb(--ion-color-#{$name}-tint#{$suffix}, to-tint($color));
+    @include color-rgb(--ion-color-#{$name}-contrast#{$suffix}, to-contrast($color));
   }
 }
 
 @mixin ion-background-color($light, $dark: none) {
   @include light-dark-scheme($light, $dark) using($color, $suffix) {
-    $text-color: toContrast($color);
+    $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));
@@ -115,6 +116,6 @@
     @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(--ion-border-color#{$suffix}, fade($color, $item-border-color-fade-amount));
-    @include color-rgb(--ion-item-color#{$suffix}, toContrast($color));
+    @include color-rgb(--ion-item-color#{$suffix}, to-contrast($color));
   }
 }

frontend/app/src/theme/util/_dark.scss

@@ -18,6 +18,7 @@
       @content();
     }
   }
+
   .dark {
     @content();
   }

frontend/app/src/theme/util/_mixins.scss

@@ -18,61 +18,61 @@
  */
 
 @mixin ion-sm-up {
-  @media (min-width: 576px) {
+  @media (width >= 576px) {
     @content;
   }
 }
 
 @mixin ion-sm-down {
-  @media (max-width: 575.98px) {
+  @media (width <= 575.98px) {
     @content;
   }
 }
 
 @mixin ion-md-up {
-  @media (min-width: 768px) {
+  @media (width >= 768px) {
     @content;
   }
 }
 
 @mixin ion-md-down {
-  @media (max-width: 767.98px) {
+  @media (width <= 767.98px) {
     @content;
   }
 }
 
 @mixin ion-lg-up {
-  @media (min-width: 992px) {
+  @media (width >= 992px) {
     @content;
   }
 }
 
 @mixin ion-lg-down {
-  @media (max-width: 991.98px) {
+  @media (width <= 991.98px) {
     @content;
   }
 }
 
 @mixin ion-xl-up {
-  @media (min-width: 1200px) {
+  @media (width >= 1200px) {
     @content;
   }
 }
 
 @mixin ion-xl-down {
-  @media (max-width: 1199.98px) {
+  @media (width <= 1199.98px) {
     @content;
   }
 }
 
-@mixin phoneLandscape {
-  @media (max-height: 500px) and (orientation: landscape) {
+@mixin phone-landscape {
+  @media (height <= 500px) and (orientation: landscape) {
     @content;
   }
 }
 
-@mixin phonePortraitSmall {
-  @media (max-height: 700px) and (orientation: portrait) {
+@mixin phone-portrait-small {
+  @media (height <= 700px) and (orientation: portrait) {
     @content;
   }
 }
@@ -84,11 +84,11 @@
 }
 
 @mixin border-radius-in-parallax($border-radius) {
-  border-radius: $border-radius;
   // explicitly place element in 3D space
   // Safari seems to sometimes get confused
   // and disregard border radius in some cases
   transform: translateZ(0);
+  border-radius: $border-radius;
 }
 
 @mixin content-padding {