☠️ RESET for v2

src/style/tools/_functions.scss

@@ -1,34 +1,43 @@
+@use "sass:math";
+
 /* PX to REM
 ========================================================================== */
-@function rem ($target, $context: $base-font-size) {
+@function rem($target, $context: $base-font-size) {
     @if $target == 0 { @return 0 }
-    $size: $target / $context;
-    @return round($size * 1000) / 1000 + rem;
+    $size: math.div($target, $context);
+    @return math.div(round($size * 1000), 1000) + rem;
 }
 
 
 /* PX to VW
 ========================================================================== */
-@function pxVW ($value, $base: $base-width) {
-    @if $value == 0 { @return 0; }
-    @return ($value / $base) * 100 + vw;
+@function pxVW($value, $base: $base-width) {
+    @if $value == 0 { @return 0 }
+    @return math.div($value, $base) * 100 + vw;
 }
 
 
 /* VW to PX
 ========================================================================== */
-@function vwPX ($value, $base: $base-width) {
+@function vwPX($value, $base: $base-width) {
     @if $value == 0 { @return 0; }
-    @return ($value * $base) / 100 + px;
+    @return math.div(($value * $base), 100) + px;
 }
 
 
 /* Headings
 ========================================================================== */
-@function headings ($from: 1, $to: 6) {
+@function headings($from: 1, $to: 6) {
     @if $from == $to {
         @return "h#{$from}";
     } @else {
         @return "h#{$from}," + headings($from + 1, $to);
     }
 }
+
+
+/* HEX color to RGB
+========================================================================== */
+@function hexToRGB($color) {
+    @return red($color), green($color), blue($color);
+}

src/style/tools/_helpers.scss

@@ -27,13 +27,13 @@
     margin: 0 auto;
     padding: 0 16px;
 
-    @include breakpoint (mob) {
+    @include bp (mob) {
         padding: 0 24px;
     }
-    @include breakpoint (sm) {
+    @include bp (sm) {
         padding: 0 60px;
     }
-    @include breakpoint (md) {
+    @include bp (md) {
         padding: 0 128px;
     }
 }
@@ -44,10 +44,10 @@
     margin: 0 auto;
     padding: 0 pxVW(128);
 
-    @include breakpoint (sm) {
+    @include bp (sm) {
         padding: 0 pxVW(224);
     }
-    @include breakpoint (xxl) {
+    @include bp (xxl) {
         padding: 0 224px;
     }
 }

src/style/tools/_mixins.scss

@@ -1,3 +1,5 @@
+@use "sass:math";
+
 // Hide text
 %hide-text {
     overflow: hidden;
@@ -16,8 +18,8 @@
 
 // Get REM font-size and line-height
 @mixin fs-lh ($fontSize, $lineHeight) {
-    line-height: round(($fontSize / $lineHeight) * 1000) / 1000;
     font-size: rem($fontSize);
+    line-height: math.div(round(math.div($lineHeight, $fontSize) * 1000), 1000);
 }
 
 // Top-right-bottom-left
@@ -25,67 +27,60 @@
     top: $value; right: $value; bottom: $value; left: $value;
 }
 
-// Center vertically
-@mixin center-y {
-    top: 50%;
-    transform: translate(0, -50%);
-}
-
-// Center horizontally
-@mixin center-x {
-    left: 50%;
-    transform: translate(-50%, 0);
-}
-
-// Center vertically and horizontally
-@mixin center-xy {
-    top: 50%; left: 50%;
-    transform: translate(-50%, -50%);
-}
-
 // Smooth fonts
 @mixin font-smooth {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
-// Reponsive breakpoints
-@mixin breakpoint ($size) {
-    @if ($size == mob) {
-        @media (min-width: $screen-mob) { @content; }
+// Font-face
+@mixin font-face ($family, $variant, $weight: normal, $style: normal, $display: swap) {
+    @font-face {
+        font-family: "#{$family}";
+        font-style: $style;
+        font-weight: $weight;
+        font-display: $display;
+        src: local("#{$variant}"),
+             url("#{$dir-fonts}/#{$variant}.woff2") format("woff2"),
+             url("#{$dir-fonts}/#{$variant}.woff") format("woff");
     }
-    @else if ($size == xs) {
-        @media (max-width: $screen-xs) { @content; }
-    }
-    @else if ($size == sm) {
-        @media (min-width: $screen-sm) { @content; }
-    }
-    @else if ($size == md) {
-        @media (min-width: $screen-md) { @content; }
-    }
-    @else if ($size == lg) {
-        @media (min-width: $screen-lg) { @content; }
-    }
-    @else if ($size == xl) {
-        @media (min-width: $screen-xl) { @content; }
-    }
-    @else if ($size == xxl) {
-        @media (min-width: $screen-xxl) { @content; }
+}
+
+
+/*
+** Reponsive breakpoint
+*/
+// Based on Width
+@mixin bp ($size, $to: min, $sizes: $breakpoints) {
+    // Size is in map
+    @if map-has-key($sizes, $size) {
+        $size: map-get($sizes, $size);
+
+        @if ($to == max) {
+            @media (max-width: #{$size}) {
+                @content;
+            }
+        } @else {
+            @media (min-width: #{$size}) {
+                @content;
+            }
+        }
     }
+    // Not in the map
     @else {
         @media (min-width: $size) { @content; }
     }
 }
 
-// Font-face
-@mixin font-face ($family) {
-    @font-face {
-        font-family: "#{$family}";
-        font-style: normal;
-        font-weight: normal;
-        font-display: swap;
-        src: local("#{$family}"),
-             url("#{$dir-fonts}/#{$family}.woff2") format("woff2"),
-             url("#{$dir-fonts}/#{$family}.woff") format("woff");
+// Based on Height
+@mixin bph ($size, $to: min, $sizes: $breakpoints) {
+    @if ($to == max) {
+        @media (max-height: #{$size}) {
+            @content;
+        }
+    } @else {
+        @media (min-height: #{$size}) {
+            @content;
+        }
     }
 }