@transfermarkt/global-styles 1.7.1 → 1.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transfermarkt/global-styles",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "Shared styles and Global configuration for stylelint rules of the Transfermarkt projects",
   "author": "Transfermarkt",
   "license": "MIT",

package/scss/functions/_rem-calc.scss

@@ -1,4 +1,5 @@
 @use 'sass:list';
+@use 'sass:math';
 @use 'strip-unit' as *;
 @use 'zf-to-rem' as *;
 
@@ -24,12 +25,12 @@ $global-font-size: 16px;
 
   // If the base font size is a %, then multiply it by 16px
   // This is because 100% font size = 16px in most all browsers
-  @if unit($base) == '%' {
+  @if math.unit($base) == '%' {
     $base: ($base / 100%) * 16px;
   }
 
   // Using rem as base allows correct scaling
-  @if unit($base) == 'rem' {
+  @if math.unit($base) == 'rem' {
     $base: strip-unit($base) * 16px;
   }
 

package/scss/functions/_tm-color.scss

@@ -9,5 +9,5 @@
     @error 'Color #{$color-name} does not exist in color map.';
   }
 
-  @return change-color($color-value, $alpha: $opacity);
+  @return color.change($color-value, $alpha: $opacity);
 }

package/scss/mixins/_breakpoint.scss

@@ -7,7 +7,7 @@
 /* stylelint-disable */
 
 @mixin breakpoint($breakpoint, $mode: min) {
-  @if map-has-key($breakpoints, $breakpoint) {
+  @if map.has-key($breakpoints, $breakpoint) {
     // Get the breakpoint value.
     $breakpoint-value: map.get($breakpoints, $breakpoint);
     $breakpoint-next-value: map-get-next($breakpoints, $breakpoint);