2 files changed, 101 insertions, 0 deletions
diff --git a/htdocs/src/scss/abstracts/mixins/_css-vars.scss b/htdocs/src/scss/abstracts/mixins/_css-vars.scss
new file mode 100644
index 0000000..8e31c96
--- /dev/null
+++ b/htdocs/src/scss/abstracts/mixins/_css-vars.scss
@@ -0,0 +1,20 @@
+/// Declare a set of CSS variables properly prefixed.
+///
+/// @see https://dev.to/felipperegazio/css-custom-properties-vars-with-sass-scss-a-practical-architecture-strategy-1m88
+///
+/// @param {List} $variables - A list of variable name and value.
+/// @param {Bool} $root - Set vars at root.
+/// @param {String} $prefix - The variables prefix.
+@mixin set-vars($variables, $root: true, $prefix: "dap") {
+  @if $root {
+    :root {
+      @each $name, $value in $variables {
+        --#{$prefix}-#{$name}: #{$value};
+      }
+    }
+  } @else {
+    @each $name, $value in $variables {
+      --#{$prefix}-#{$name}: #{$value};
+    }
+  }
+}
diff --git a/htdocs/src/scss/abstracts/mixins/_media-queries.scss b/htdocs/src/scss/abstracts/mixins/_media-queries.scss
new file mode 100644
index 0000000..fcaea4b
--- /dev/null
+++ b/htdocs/src/scss/abstracts/mixins/_media-queries.scss
@@ -0,0 +1,81 @@
+@use "../variables" as var;
+
+/// Media query: media type
+/// @param {String} $type - Media type: all, screen, print, retina.
+/// @example scss - `@media only screen` equivalent is:
+/// @include media("screen");
+@mixin media($type) {
+  @if $type == "retina" {
+    $type: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
+  } @else if $type == "screen" or $type == "print" {
+    $type: "only #{$type}";
+  }
+
+  @media #{$type} {
+    @content;
+  }
+}
+
+/// Media query: min-width / max-width
+/// @param {String} $from - min-width breakpoint.
+/// @param {String} $until - max-width breakpoint.
+/// @example scss - `@media (min-width: "md")` equivalent is:
+/// @include dimensions("md");
+@mixin dimensions($from: null, $until: null) {
+  $query: "";
+
+  @if $from {
+    @if type-of($from) == "string" {
+      $size: map-get(var.$breakpoints, $from);
+      $query: "(min-width: #{$size})";
+    } @else {
+      @error "`$from` must be a string.";
+    }
+  }
+
+  @if $from and $until {
+    $query: $query + " and ";
+  }
+
+  @if $until {
+    @if type-of($until) == "string" {
+      $size: map-get(var.$breakpoints, $until);
+      $size: calc(#{$size} - 1px);
+      $query: $query + "(max-width: #{$size})";
+    } @else {
+      @error "`$until` must be a string.";
+    }
+  }
+
+  @media #{$query} {
+    @content;
+  }
+}
+
+/// Media query: prefers-reduced-motion
+/// @param {String} $value - Media query value: `no-preference` or `reduce`.
+/// @example scss - @media (prefers-reduced-motion: "reduce") equivalent is:
+/// @include motion("reduce");
+@mixin motion($value) {
+  @if $value == "no-preference" or $value == "reduce" {
+    @media (prefers-reduced-motion: #{$value}) {
+      @content;
+    }
+  } @else {
+    @error "Allowed values are `no-preference` and `reduce`.";
+  }
+}
+
+/// Media query: any-pointer
+/// @param {String} $value - Media query value: `fine`, `coarse` or `none`.
+/// @example scss - @media (any-pointer: "fine") equivalent is:
+/// @include pointer("fine");
+@mixin pointer($value) {
+  @if $value == "fine" or $value == "coarse" or $value == "none" {
+    @media (any-pointer: #{$value}) {
+      @content;
+    }
+  } @else {
+    @error "Allowed values are `fine`, `coarse` and `none`.";
+  }
+}