beathers 5.2.1 → 5.3.0

package/src/scss/style/_grid.scss

@@ -1,10 +1,16 @@
-@use "../functions/mediaQueries" as mQ;
-@use "../settings/configs" as configs;
-@use "../functions/validations" as val;
-@use "../settings/index" as settings;
-@use "../functions/others" as func;
+@use 'sass:meta';
+@use '../functions/mediaQueries' as mQ;
+@use '../settings/configs' as configs;
+@use '../functions/validations' as val;
+@use '../settings/index' as settings;
+@use '../functions/others' as func;
+@use '../variables' as vars;
 
-@if settings.$useGrid {
+// Definitions
+$useGrid: if(meta.variable-exists('vars.$useGrid') and vars.$useGrid, vars.$useGrid, settings.$useGrid);
+$useFlex: if(meta.variable-exists('vars.$useFlex') and vars.$useFlex, vars.$useFlex, settings.$useFlex);
+
+@if $useGrid {
   .grid {
     display: grid;
 
@@ -15,7 +21,7 @@
   }
 }
 
-@if settings.$useFlex {
+@if $useFlex {
   .flex {
     display: flex;
     flex-direction: row;
@@ -24,14 +30,14 @@
     @include mQ.multiSizes() using ($size, $divider) {
       @each $property, $values in configs.$flexProperties {
         // Validate parameters
-        $checkedProperty: val.listItem((flex-wrap, flex-direction), $property, "flex.properties");
+        $checkedProperty: val.listItem((flex-wrap, flex-direction), $property, 'flex.properties');
 
         @each $value in $values {
           // Validate parameters
           $checkedProperty: val.listItem(
             (wrap, nowrap, row, row-reverse, column, column-reverse),
             $value,
-            "flex.properties.values"
+            'flex.properties.values'
           );
 
           $mainClass: if($size, #{$size}#{$divider}#{$value}, $value);
@@ -44,36 +50,28 @@
 
       &.row,
       &.row-reverse {
-        @include func.flexDivision(width, "cols", $size, $divider);
-        @include func.flexDivision(width, "col", $size, $divider);
+        @include func.flexDivision(width, 'cols', $size, $divider);
+        @include func.flexDivision(width, 'col', $size, $divider);
       }
       &.column,
       &.column-reverse {
-        @include func.flexDivision(height, "rows", $size, $divider);
-        @include func.flexDivision(height, "row", $size, $divider);
+        @include func.flexDivision(height, 'rows', $size, $divider);
+        @include func.flexDivision(height, 'row', $size, $divider);
       }
     }
   }
 }
 
-@if settings.$useFlex or settings.$useGrid {
+@if $useFlex or $useGrid {
   @include mQ.multiSizes() using ($size, $divider) {
     @each $way, $selections in configs.$justify {
       @each $selection, $properties in $selections {
         @each $property in $properties {
-          $mainClass: if(
-            $size,
-            "#{$size}#{$divider}#{$way}-#{$selection}#{\:}",
-            "#{$way}-#{$selection}#{\:}"
-          );
+          $mainClass: if($size, '#{$size}#{$divider}#{$way}-#{$selection}#{\:}', '#{$way}-#{$selection}#{\:}');
 
           .#{$mainClass} {
-            $prefix: if(
-              $property == "around" or $property == "between" or $property == "evenly",
-              "space-",
-              ""
-            );
-            $flexPrefix: if($property == "start" or $property == "end", "flex-", "");
+            $prefix: if($property == 'around' or $property == 'between' or $property == 'evenly', 'space-', '');
+            $flexPrefix: if($property == 'start' or $property == 'end', 'flex-', '');
             $value: #{$prefix}#{$property};
             $flexValue: #{$flexPrefix}#{$value};
 

package/src/scss/style/_resets.scss

@@ -0,0 +1,119 @@
+@use 'sass:meta';
+@use '../settings/configs' as configs;
+@use '../variables' as vars;
+@use '../functions/colors' as colors;
+@use '../settings/index' as settings;
+
+// Definitions
+$useColors: if(meta.variable-exists('vars.$useColors') and vars.$useColors, vars.$useColors, settings.$useColors);
+$useColorsLightMode: if(
+  meta.variable-exists('vars.$useColorsLightMode') and vars.$useColorsLightMode,
+  vars.$useColorsLightMode,
+  settings.$useColorsLightMode
+);
+$useColorsDarkMode: if(
+  meta.variable-exists('vars.$useColorsDarkMode') and vars.$useColorsDarkMode,
+  vars.$useColorsDarkMode,
+  settings.$useColorsDarkMode
+);
+
+html {
+  scroll-behavior: smooth;
+  interpolate-size: allow-keywords;
+}
+
+body {
+  position: relative;
+  /* stylelint-disable font-family-no-missing-generic-family-keyword */
+  font-family: 'regular';
+  overflow-x: hidden;
+}
+
+*,
+::before,
+::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+:focus,
+button:focus {
+  outline: unset;
+  box-shadow: unset;
+}
+
+ul {
+  margin: unset;
+  list-style: none;
+  padding: 0;
+
+  li {
+    margin-bottom: unset;
+  }
+}
+
+a {
+  text-decoration: unset;
+}
+
+@if $useColors {
+  @if $useColorsLightMode {
+    .light::selection {
+      background-color: colors.useColorWithMap('custom-2');
+      color: colors.useColorWithMap('white');
+    }
+  }
+  @if $useColorsDarkMode {
+    .dark::selection {
+      background-color: colors.useColorWithMap('custom-2', 'dark');
+      color: colors.useColorWithMap('black');
+    }
+  }
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+
+  &-track {
+    background-color: transparent;
+    border-radius: unset;
+  }
+  &-thumb {
+    border-radius: 100vw;
+  }
+}
+@if $useColors {
+  @if $useColorsLightMode {
+    .light::-webkit-scrollbar-thumb {
+      background: colors.useColorWithMap('third');
+    }
+  }
+  @if $useColorsDarkMode {
+    .dark::-webkit-scrollbar-thumb {
+      background: colors.useColorWithMap('third', 'dark');
+    }
+  }
+}
+
+@each $option, $properties in configs.$clearanceOptions {
+  @each $property, $value in $properties {
+    .i\:#{$option} {
+      /* stylelint-disable declaration-no-important */
+      #{$property}: $value !important;
+    }
+    .#{$option} {
+      #{$property}: $value;
+    }
+  }
+}
+
+@each $cursor in configs.$cursors {
+  .cursor#{\:}#{$cursor} {
+    cursor: #{$cursor};
+  }
+}
+
+.scroll-smooth {
+  scroll-behavior: smooth;
+}

package/src/scss/style/_shaping.scss

@@ -1,21 +1,83 @@
-@use "sass:map";
-@use "sass:list";
-@use "sass:math";
-@use "../functions/mediaQueries" as mQ;
-@use "../settings/configs" as configs;
-@use "../functions/validations" as val;
-@use "../settings/index" as settings;
-@use "../functions/others" as func;
-
-@if settings.$useWrappers {
-  @each $wSize, $properties in configs.$wrappers {
-    $mainWSize: if($wSize, "#{$wSize}#{\:}wrapper", "wrapper");
+@use 'sass:meta';
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:math';
+@use '../functions/mediaQueries' as mQ;
+@use '../settings/configs' as configs;
+@use '../settings/defaults' as defs;
+@use '../functions/validations' as val;
+@use '../settings/index' as settings;
+@use '../functions/others' as func;
+@use '../variables' as vars;
+
+// Definitions
+$useWrappers: if(
+  meta.variable-exists('vars.$useWrappers') and vars.$useWrappers,
+  vars.$useWrappers,
+  settings.$useWrappers
+);
+$wrappers: if(meta.variable-exists('vars.$wrappers') and vars.$wrappers, vars.$wrappers, defs.$wrappers);
+$useShadows: if(meta.variable-exists('vars.$useShadows') and vars.$useShadows, vars.$useShadows, settings.$useShadows);
+$useDisplays: if(
+  meta.variable-exists('vars.$useDisplays') and vars.$useDisplays,
+  vars.$useDisplays,
+  settings.$useDisplays
+);
+$useOverflows: if(
+  meta.variable-exists('vars.$useOverflows') and vars.$useOverflows,
+  vars.$useOverflows,
+  settings.$useOverflows
+);
+$useOpacities: if(
+  meta.variable-exists('vars.$useOpacities') and vars.$useOpacities,
+  vars.$useOpacities,
+  settings.$useOpacities
+);
+$opacities: if(meta.variable-exists('vars.$opacities') and vars.$opacities, vars.$opacities, defs.$opacities);
+$useBlur: if(meta.variable-exists('vars.$useBlur') and vars.$useBlur, vars.$useBlur, settings.$useBlur);
+$blurValues: if(meta.variable-exists('vars.$blurValues') and vars.$blurValues, vars.$blurValues, defs.$blurValues);
+$useObjectFits: if(
+  meta.variable-exists('vars.$useObjectFits') and vars.$useObjectFits,
+  vars.$useObjectFits,
+  settings.$useObjectFits
+);
+$usePositions: if(
+  meta.variable-exists('vars.$usePositions') and vars.$usePositions,
+  vars.$usePositions,
+  settings.$usePositions
+);
+$useInsets: if(meta.variable-exists('vars.$useInsets') and vars.$useInsets, vars.$useInsets, settings.$useInsets);
+$insetValues: if(meta.variable-exists('vars.$insetValues') and vars.$insetValues, vars.$insetValues, defs.$insetValues);
+$useSizes: if(meta.variable-exists('vars.$useSizes') and vars.$useSizes, vars.$useSizes, settings.$useSizes);
+$useGutters: if(meta.variable-exists('vars.$useGutters') and vars.$useGutters, vars.$useGutters, settings.$useGutters);
+$guttersValues: if(
+  meta.variable-exists('vars.$guttersValues') and vars.$guttersValues,
+  vars.$guttersValues,
+  defs.$guttersValues
+);
+$useBorders: if(meta.variable-exists('vars.$useBorders') and vars.$useBorders, vars.$useBorders, settings.$useBorders);
+$bordersValue: if(
+  meta.variable-exists('vars.$bordersValue') and vars.$bordersValue,
+  vars.$bordersValue,
+  defs.$bordersValue
+);
+$useTextBorders: if(
+  meta.variable-exists('vars.$useTextBorders') and vars.$useTextBorders,
+  vars.$useTextBorders,
+  settings.$useTextBorders
+);
+$useRadius: if(meta.variable-exists('vars.$useRadius') and vars.$useRadius, vars.$useRadius, settings.$useRadius);
+$radiuses: if(meta.variable-exists('vars.$radiuses') and vars.$radiuses, vars.$radiuses, defs.$radiuses);
+
+@if $useWrappers {
+  @each $wSize, $properties in $wrappers {
+    $mainWSize: if($wSize, '#{$wSize}#{\:}wrapper', 'wrapper');
 
     $size: list.nth($properties, 1);
     $padding: if(list.nth($properties, 2), list.nth($properties, 2), 0);
 
     // Validate parameters
-    $checkedSize: val.notNull($size, "Wrappers.size");
+    $checkedSize: val.notNull($size, 'Wrappers.size');
 
     .#{$mainWSize} {
       width: 100%;
@@ -31,7 +93,7 @@
   }
 }
 
-@if settings.$useShadows {
+@if $useShadows {
   @include mQ.multiSizes() using ($size, $divider) {
     @each $class, $values in configs.$shadows {
       $x: map.get($values, x);
@@ -41,13 +103,13 @@
       $opacity: map.get($values, opacity);
 
       // Validate parameters
-      $checkedX: val.number($x, "Shadows.x");
-      $checkedY: val.number($y, "Shadows.y");
-      $checkedBlur: val.number($blur, "Shadows.blur");
-      $checkedSpread: val.number($spread, "Shadows.spread");
-      $checkedOpacity: val.opacity($opacity, "Shadows.opacity");
+      $checkedX: val.number($x, 'Shadows.x');
+      $checkedY: val.number($y, 'Shadows.y');
+      $checkedBlur: val.number($blur, 'Shadows.blur');
+      $checkedSpread: val.number($spread, 'Shadows.spread');
+      $checkedOpacity: val.opacity($opacity, 'Shadows.opacity');
 
-      $mainClass: if($size, "#{$size}#{$divider}divider-#{$class}", "divider-#{$class}");
+      $mainClass: if($size, '#{$size}#{$divider}divider-#{$class}', 'divider-#{$class}');
 
       .#{$mainClass} {
         box-shadow: func.shadowValue($x)
@@ -60,13 +122,13 @@
   }
 }
 
-@if settings.$useDisplays {
+@if $useDisplays {
   @include mQ.multiSizes() using ($size, $divider) {
     @each $display in configs.$displays {
       // Validate parameters
-      $checkedDisplay: val.listItem(configs.$displays, $display, "Shaping.displays");
+      $checkedDisplay: val.listItem(configs.$displays, $display, 'Shaping.displays');
 
-      $mainClass: if($size, "#{$size}#{$divider}d-#{$display}", "d-#{$display}");
+      $mainClass: if($size, '#{$size}#{$divider}d-#{$display}', 'd-#{$display}');
 
       .#{$mainClass} {
         display: if($size, $display !important, $display);
@@ -75,22 +137,22 @@
   }
 }
 
-@if settings.$useOverflows {
+@if $useOverflows {
   @include mQ.multiSizes() using ($size, $divider) {
     @each $dir in configs.$overflowsDirections {
       // Validate parameters
       @if $dir {
-        $checkedDir: val.listItem(("x", "y"), $dir, "Shaping.overflow.direction");
+        $checkedDir: val.listItem(('x', 'y'), $dir, 'Shaping.overflow.direction');
       }
 
-      $dirClass: if($dir, "#{$dir}#{\:}overflow", "overflow");
-      $mainClass: if($size, "#{$size}#{$divider}#{$dirClass}", $dirClass);
-      $property: if($dir, "overflow-#{$dir}", "overflow");
+      $dirClass: if($dir, '#{$dir}#{\:}overflow', 'overflow');
+      $mainClass: if($size, '#{$size}#{$divider}#{$dirClass}', $dirClass);
+      $property: if($dir, 'overflow-#{$dir}', 'overflow');
 
       .#{$mainClass} {
         @each $value in configs.$overflows {
           // Validate parameters
-          $checkedClass: val.listItem(configs.$overflows, $value, "Shaping.overflow.value");
+          $checkedClass: val.listItem(configs.$overflows, $value, 'Shaping.overflow.value');
 
           &-#{$value} {
             #{$property}: if($size, $value !important, $value);
@@ -101,12 +163,12 @@
   }
 }
 
-@if settings.$useOpacities {
+@if $useOpacities {
   @include mQ.multiSizes() using ($size, $divider) {
-    @each $value in configs.$opacities {
-      $checkedValue: val.opacity(math.div($value, 100), "Shaping.opacity");
+    @each $value in $opacities {
+      $checkedValue: val.opacity(math.div($value, 100), 'Shaping.opacity');
 
-      $mainClass: if($size, "#{$size}#{$divider}op", "op");
+      $mainClass: if($size, '#{$size}#{$divider}op', 'op');
 
       .#{$mainClass}#{\:}#{$value} {
         opacity: if($size, $checkedValue !important, $checkedValue);
@@ -119,12 +181,12 @@
   }
 }
 
-@if settings.$useBlur {
+@if $useBlur {
   @include mQ.multiSizes() using ($size, $divider) {
-    @each $value in configs.$blurValues {
-      $checkedValue: val.listItem(configs.$blurValues, $value, "Shaping.blur");
+    @each $value in $blurValues {
+      $checkedValue: val.listItem($blurValues, $value, 'Shaping.blur');
 
-      $mainClass: if($size, "#{$size}#{$divider}bg#{\:}blur", "bg#{\:}blur");
+      $mainClass: if($size, '#{$size}#{$divider}bg#{\:}blur', 'bg#{\:}blur');
       $calcValue: blur(#{$checkedValue}#{px});
 
       .#{$mainClass}#{\:}#{$value} {
@@ -138,13 +200,13 @@
   }
 }
 
-@if settings.$useObjectFits {
+@if $useObjectFits {
   @include mQ.multiSizes() using ($size, $divider) {
     @each $fit in configs.$objectsFits {
       // Validate parameters
-      $checkedFit: val.listItem(configs.$objectsFits, $fit, "Shaping.objectFit");
+      $checkedFit: val.listItem(configs.$objectsFits, $fit, 'Shaping.objectFit');
 
-      $mainClass: if($size, "#{$size}#{$divider}object-fit", "object-fit");
+      $mainClass: if($size, '#{$size}#{$divider}object-fit', 'object-fit');
 
       .#{$mainClass}#{\:}#{$fit} {
         object-fit: if($size, $fit !important, $fit);
@@ -153,13 +215,13 @@
   }
 }
 
-@if settings.$usePositions {
+@if $usePositions {
   @include mQ.multiSizes() using ($size, $divider) {
     @each $position in configs.$positions {
       // Validate parameters
-      $checkedPosition: val.listItem(configs.$positions, $position, "Shaping.position");
+      $checkedPosition: val.listItem(configs.$positions, $position, 'Shaping.position');
 
-      $mainClass: if($size, "#{$size}#{$divider}p-", "p-");
+      $mainClass: if($size, '#{$size}#{$divider}p-', 'p-');
 
       .#{$mainClass}#{$position} {
         position: if($size, $position !important, $position);
@@ -168,17 +230,17 @@
   }
 }
 
-@if settings.$useInsets {
+@if $useInsets {
   @include mQ.multiSizes() using ($size, $divider) {
-    @each $value in configs.$insetValues {
+    @each $value in $insetValues {
       @each $position in configs.$insetPositions {
         // Validate parameters
-        $checkedPosition: val.listItem(configs.$insetPositions, $position, "Shaping.inset");
+        $checkedPosition: val.listItem(configs.$insetPositions, $position, 'Shaping.inset');
 
-        $mainClass: if($size, "#{$size}#{$divider}inset", "inset");
-        $posClass: if($position, "#{$mainClass}-#{$position}", "#{$mainClass}");
-        $property: if($position, "inset-#{$position}", "inset");
-        $val: if($value == 0, "full", $value);
+        $mainClass: if($size, '#{$size}#{$divider}inset', 'inset');
+        $posClass: if($position, '#{$mainClass}-#{$position}', '#{$mainClass}');
+        $property: if($position, 'inset-#{$position}', 'inset');
+        $val: if($value == 0, 'full', $value);
 
         .#{$posClass}#{\:}#{$val} {
           #{$property}: $value;
@@ -188,21 +250,21 @@
   }
 }
 
-@if settings.$useSizes {
+@if $useSizes {
   @include mQ.multiSizes() using ($size, $divider) {
     @each $dir, $direction in configs.$spacesDirections {
       // Validate parameters
       $checkedDir: val.listItem(
-        ("w", "min#{\:}w", "max#{\:}w", "h", "min#{\:}h", "max#{\:}h"),
+        ('w', 'min#{\:}w', 'max#{\:}w', 'h', 'min#{\:}h', 'max#{\:}h'),
         $dir,
-        "Shaping.space.direction"
+        'Shaping.space.direction'
       );
       $checkedDirection: val.listItem(
-        ("width", "min-width", "max-width", "height", "min-height", "max-height"),
+        ('width', 'min-width', 'max-width', 'height', 'min-height', 'max-height'),
         $direction,
-        "Shaping.space.direction"
+        'Shaping.space.direction'
       );
-      $checkedStep: val.number(configs.$spacesStep, "Shaping.space.step");
+      $checkedStep: val.number(configs.$spacesStep, 'Shaping.space.step');
 
       $mainClass: if($size, #{$size}#{$divider}#{$dir}, $dir);
 
@@ -212,7 +274,7 @@
 
           @if ($value != 0) and ($value % $checkedStep == 0) and ($value <= 100) {
             &#{\:}#{$value} {
-              #{$direction}: if($size, #{$value}#{"%"} !important, #{$value}#{"%"});
+              #{$direction}: if($size, #{$value}#{'%'} !important, #{$value}#{'%'});
             }
           }
         }
@@ -221,14 +283,14 @@
   }
 }
 
-@if settings.$useGutters {
+@if $useGutters {
   @include mQ.multiSizes() using ($size, $divider) {
     @each $class, $property in configs.$gutters {
       // Validate parameters
       $checkedClass: val.listItem(
         (p, px, py, ps, pe, pt, pb, m, mx, my, ms, me, mt, mb, g, gx, gy),
         $class,
-        "Shaping.gutter.class"
+        'Shaping.gutter.class'
       );
       $checkedProperty: val.listItem(
         (
@@ -251,13 +313,13 @@
           row-gap
         ),
         $property,
-        "Shaping.gutter.property"
+        'Shaping.gutter.property'
       );
 
       $mainClass: if($size, #{$size}#{$divider}#{$class}, $class);
 
       .#{$mainClass} {
-        @each $vClass, $value in configs.$guttersValues {
+        @each $vClass, $value in $guttersValues {
           &-#{$vClass} {
             @if $size {
               #{$property}: if($size, $value !important, $value);
@@ -265,6 +327,7 @@
               #{$property}: $value;
 
               &\:i {
+                /* stylelint-disable declaration-no-important */
                 #{$property}: $value !important;
               }
             }
@@ -275,20 +338,20 @@
   }
 }
 
-@if settings.$useBorders {
+@if $useBorders {
   @include mQ.multiSizes() using ($size, $divider) {
-    @for $i from 1 through configs.$bordersValue {
+    @each $i in $bordersValue {
       @each $dir, $property in configs.$bordersDirections {
         // Validate parameters
-        $checkedDir: val.listItem((null, "top", "bottom", "start", "end"), $dir, "Shaping.borders");
+        $checkedDir: val.listItem((null, 'top', 'bottom', 'start', 'end'), $dir, 'Shaping.borders');
         $checkedProperty: val.listItem(
           (border, border-block-start, border-block-end, border-inline-start, border-inline-end),
           $property,
-          "Shaping.borders"
+          'Shaping.borders'
         );
 
-        $mainClass: if($size, "#{$size}#{$divider}border", "border");
-        $dirClass: if($dir, "#{$dir}#{\:}", $dir);
+        $mainClass: if($size, '#{$size}#{$divider}border', 'border');
+        $dirClass: if($dir, '#{$dir}#{\:}', $dir);
 
         .#{$mainClass}#{\:}#{$dirClass}#{$i} {
           #{$property}-width: if($size, #{$i}#{px} !important, #{$i}#{px});
@@ -302,14 +365,14 @@
   }
 }
 
-@if settings.$useTextBorders {
+@if $useTextBorders {
   @include mQ.multiSizes() using ($size, $divider) {
-    @for $i from 1 through configs.$bordersValue {
-      $mainClass: if($size, "#{$size}#{$divider}stroke", "stroke");
+    @each $i in $bordersValue {
+      $mainClass: if($size, '#{$size}#{$divider}stroke', 'stroke');
       $value: math.div($i, 10);
 
       // Validate parameters
-      $checkedValue: val.number($value, "Shaping.textBorder");
+      $checkedValue: val.number($value, 'Shaping.textBorder');
 
       .#{$mainClass}#{\:}#{$i} {
         -webkit-text-stroke-width: if($size, #{$value}#{px} !important, #{$value}#{px});
@@ -318,28 +381,18 @@
   }
 }
 
-@if settings.$useRadius {
+@if $useRadius {
   @include mQ.multiSizes() using ($size, $divider) {
     @each $dir, $properties in configs.$radiusDirection {
       // Validate parameters
       $checkedDir: val.listItem(
-        (
-          null,
-          "top",
-          "bottom",
-          "start",
-          "end",
-          "top-start",
-          "top-end",
-          "bottom-start",
-          "bottom-end"
-        ),
+        (null, 'top', 'bottom', 'start', 'end', 'top-start', 'top-end', 'bottom-start', 'bottom-end'),
         $dir,
-        "Shaping.radius.direction"
+        'Shaping.radius.direction'
       );
 
-      $mainClass: if($size, "#{$size}#{$divider}radius", "radius");
-      $dirClass: if($dir, "#{$dir}#{\:}", $dir);
+      $mainClass: if($size, '#{$size}#{$divider}radius', 'radius');
+      $dirClass: if($dir, '#{$dir}#{\:}', $dir);
 
       @each $property in $properties {
         .#{$mainClass}#{\:}#{$dirClass} {
@@ -347,7 +400,7 @@
             #{$property}: if($size, 100vw !important, 100vw);
           }
 
-          @each $value in configs.$radiuses {
+          @each $value in $radiuses {
             // Validate parameters
             $checkedProperty: val.listItem(
               (
@@ -358,11 +411,11 @@
                 border-end-end-radius
               ),
               $property,
-              "Shaping.radius.property"
+              'Shaping.radius.property'
             );
 
             &#{$value} {
-              #{$property}: if($size, #{$value}#{px} !important, #{$value}#{"px"});
+              #{$property}: if($size, #{$value}#{px} !important, #{$value}#{'px'});
             }
           }
         }