refactor: move app to monorepo

2026-01-21 00:52:55 +00:00 · 2023-05-24 14:26:54 +02:00
parent 20a336d3c4
commit ac62e621d5
794 changed files with 0 additions and 67 deletions
--- a/frontend/app/src/theme/util/_color-system.scss
+++ b/frontend/app/src/theme/util/_color-system.scss
@@ -0,0 +1,120 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+@use 'sass:color';
+@use 'sass:math';
+@import '../color-processing';
+@import './dark';
+
+@function toRGB($color) {
+  @return red($color) + ',' + green($color) + ',' + blue($color);
+}
+
+@function toShade($color) {
+  @return darken($color, $shade-amount);
+}
+
+@function toTint($color) {
+  @return lighten($color, $tint-amount);
+}
+
+@function toContrast($color) {
+  $yiq: toYiq($color);
+  @return if($yiq >= $contrast-threshold, $contrast-dark-color, $contrast-light-color);
+}
+
+@function fade($color, $amount) {
+  @return if(lightness($color) > $fade-threshold, darken($color, $amount), lighten($color, $amount));
+}
+
+@function map-range($value, $input-min, $input-max, $output-min, $output-max) {
+  @return calc(($value - $input-min) * ($output-max - $output-min) / ($input-max - $input-min) + $output-min);
+}
+
+@function interpolate-colors($from, $to, $progress, $progress-min: 0, $progress-max: 100) {
+  @return rgb(
+    map-range($progress, $progress-min, $progress-max, red($from), red($to)),
+    map-range($progress, $progress-min, $progress-max, green($from), green($to)),
+    map-range($progress, $progress-min, $progress-max, blue($from), blue($to))
+  );
+}
+
+/**
+ * Converts a color to the YIQ color system
+ */
+@function toYiq($color) {
+  @return math.div(
+    (color.red($color) * 299) + (color.green($color) * 587) + (color.blue($color) * 114),
+    1000
+  );
+}
+
+@mixin color-rgb($name, $color) {
+  #{$name}: #{$color};
+  #{$name}-rgb: #{toRGB($color)};
+}
+
+@mixin light-dark-scheme($light, $dark) {
+  :root,
+  .light {
+    @if ($include-theme-independent-colors == true) {
+      @content ($light, -light);
+      @content (if($dark == none, $light, $dark), -dark);
+    }
+    @content ($light, "");
+  }
+  @if ($dark != none) {
+    @include 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) {
+    $value: $i * $steps-step;
+    #{$name}-#{$value}: #{interpolate-colors($from, $to, $value, $steps-range-start, $steps-range-end)};
+  }
+}
+
+@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));
+  }
+}
+
+@mixin ion-background-color($light, $dark: none) {
+  @include light-dark-scheme($light, $dark) using($color, $suffix) {
+    $text-color: toContrast($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(--ion-placeholder-color#{$suffix}, fade($text-color, $placeholder-fade-amount));
+
+    @include ion-color-step(--ion-color-step#{$suffix}, $color, $text-color);
+  }
+}
+
+@mixin ion-item-color($light, $dark: none) {
+  @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(--ion-border-color#{$suffix}, fade($color, $item-border-color-fade-amount));
+    @include color-rgb(--ion-item-color#{$suffix}, toContrast($color));
+  }
+}
--- a/frontend/app/src/theme/util/_dark.scss
+++ b/frontend/app/src/theme/util/_dark.scss
@@ -0,0 +1,24 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+@mixin dark-only {
+  :root {
+    @media (prefers-color-scheme: dark) {
+      @content();
+    }
+  }
+  .dark {
+    @content();
+  }
+}
--- a/frontend/app/src/theme/util/_mixins.scss
+++ b/frontend/app/src/theme/util/_mixins.scss
@@ -0,0 +1,98 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+/**
+ * Breakpoints copied from node_modules/@ionic/angular/css/display.css
+ */
+
+@mixin ion-sm-up {
+  @media (min-width: 576px) {
+    @content;
+  }
+}
+
+@mixin ion-sm-down {
+  @media (max-width: 575.98px) {
+    @content;
+  }
+}
+
+@mixin ion-md-up {
+  @media (min-width: 768px) {
+    @content;
+  }
+}
+
+@mixin ion-md-down {
+  @media (max-width: 767.98px) {
+    @content;
+  }
+}
+
+@mixin ion-lg-up {
+  @media (min-width: 992px) {
+    @content;
+  }
+}
+
+@mixin ion-lg-down {
+  @media (max-width: 991.98px) {
+    @content;
+  }
+}
+
+@mixin ion-xl-up {
+  @media (min-width: 1200px) {
+    @content;
+  }
+}
+
+@mixin ion-xl-down {
+  @media (max-width: 1199.98px) {
+    @content;
+  }
+}
+
+@mixin phoneLandscape {
+  @media (max-height: 500px) and (orientation: landscape) {
+    @content;
+  }
+}
+
+@mixin phonePortraitSmall {
+  @media (max-height: 700px) and (orientation: portrait) {
+    @content;
+  }
+}
+
+@mixin auto-grid($item-width) {
+  // fit as many items on the page while keeping items >$item-width,
+  // but also ensure items get shrunk on small screens
+  grid-template-columns: repeat(auto-fit, minmax(calc(min($item-width, 100%)), 1fr));
+}
+
+@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);
+}
+
+@mixin content-padding {
+  margin-inline-start: calc(
+    clamp(0px, (100% - var(--preferred-content-width)) / 2, var(--content-inline-start-padding-bias))
+  );
+}