refactor(themes): use spacing for margin and padding

projects/igniteui-angular/src/lib/core/styles/base/_variables.scss

@@ -131,3 +131,10 @@ $enhanced-accessibility: false !default;
 
 /// Stores a list of dropped component themes.
 $dropped-themes: () !default;
+
+/// A map that stores the default spacing values.
+$spacing: (
+    comfortable: 8px,
+    cosy: 4px,
+    compact: 2px
+);

projects/igniteui-angular/src/lib/core/styles/base/utilities/_functions.scss

@@ -964,6 +964,25 @@ $p-test: palette(#fff, #000);
     @return $used;
 }
 
+/// Returns a value based on the global spacing config for the specified display density.
+/// @access private
+@function spacing($value, $density: 'comfortable') {
+    $space: map.get($spacing, $density);
+    $ratio: 1;
+
+    @if math.compatible($value, $space) {
+        $ratio: math.div($value, $space);
+    } @else {
+        @error 'Spacing must be specified in pixel values.';
+    }
+
+    @if ($ratio == 1) {
+        @return var(--igx-spacing-#{$density});
+    } @else {
+        @return calc(var(--igx-spacing-#{$density}) * #{$ratio});
+    }
+}
+
 @function to-hsl($color) {
     @return (color.hue($color), color.saturation($color), color.lightness($color));
 }

projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss

@@ -69,15 +69,16 @@
 
 /// @param {Map} $theme - The theme used to style the component.
 /// @requires {mixin} css-vars
+/// @requires spacing
 /// @requires rem
 /// @requires var-get
 @mixin action-strip($theme) {
     @include css-vars($theme);
 
     $padding: (
-        comfortable: 0 rem(24px),
-        cosy: 0 rem(16px),
-        compact: 0 rem(12px)
+        comfortable: 0 spacing(24px, 'comfortable'),
+        cosy: 0 spacing(16px, 'cosy'),
+        compact: 0 spacing(12px, 'compact')
     );
 
     $variant: map.get($theme, variant);
@@ -140,18 +141,18 @@
         }
 
         igx-icon + [igxLabel] {
-            margin-inline-start: rem(12px);
+            margin-inline-start: spacing(12px);
         }
 
         &%igx-drop-down__item--cosy {
             igx-icon + [igxLabel] {
-                margin-inline-start: rem(10px);
+                margin-inline-start: spacing(10px);
             }
         }
 
         &%igx-drop-down__item--compact {
             igx-icon + [igxLabel] {
-                margin-inline-start: rem(8px);
+                margin-inline-start: spacing(8px);
             }
         }
     }
@@ -201,7 +202,7 @@
 
     %igx-action-strip__editing-actions {
         > [igxButton] {
-            margin-inline-start: rem(4px);
+            margin-inline-start: spacing(4px);
 
             &:first-of-type {
                 margin-inline-start: 0;

projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss

@@ -111,7 +111,7 @@
 
     $badge-icon-font-size: rem(12px);
 
-    $badge-value-padding: rem(4px);
+    $badge-value-padding: spacing(4px);
     $border-type: solid;
 
     %igx-badge-display {

projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss

@@ -67,13 +67,14 @@
 /// @param {Map} $theme - The theme used to style the component.
 /// @requires {mixin} css-vars
 /// @requires rem
+/// @requires spacing
 /// @requires var-get
 @mixin banner($theme) {
     @include css-vars($theme);
     $banner-padding: (
-        comfortable: rem(8),
-        cosy: rem(8),
-        compact: rem(8)
+        comfortable: spacing(8px, 'comfortable'),
+        cosy: spacing(8px, 'cosy'),
+        compact: spacing(8px, 'compact')
     );
 
     %igx-banner,
@@ -100,7 +101,7 @@
         width: rem(40);
         min-width: rem(40);
         height: rem(40);
-        margin-inline-start: rem(16);
+        margin-inline-start: spacing(16px);
         color: var-get($theme, 'banner-illustration-color');
     }
 
@@ -117,7 +118,7 @@
     %igx-banner__text {
         color: var-get($theme, 'banner-message-color');
         flex: 1 0 0%;
-        margin-inline-start: rem(24);
+        margin-inline-start: spacing(24px);
 
         > * {
             margin-block-start: 0 !important;
@@ -135,7 +136,7 @@
     %igx-banner__message {
         min-width: rem(220);
         flex: 1 0 0%;
-        margin-inline-end: rem(90);
+        margin-inline-end: spacing(90px);
     }
 
     %igx-banner__row {

projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss

@@ -82,6 +82,7 @@
 /// @requires color
 /// @requires extend
 /// @requires rem
+/// @requires spacing
 /// @requires $ease-in-out-quad
 /// @requires var-get
 @mixin bottom-nav($theme) {
@@ -90,7 +91,7 @@
     $menu-height: rem(56px);
     $item-min-width: rem(80px);
     $item-max-width: rem(168px);
-    $item-padding: 0 rem(12px, 16px);
+    $item-margin: 0 spacing(12px);
 
     %igx-bottom-nav-panel {
         display: block;
@@ -143,7 +144,7 @@
         cursor: pointer;
         user-select: none;
         overflow: hidden;
-        padding: $item-padding;
+        margin: $item-margin;
         -webkit-tap-highlight-color: transparent;
         outline-style: none;
     }
@@ -174,7 +175,6 @@
         position: relative;
         justify-content: center;
         height: 24px;
-        padding: 0 8px;
         transform: translateZ(0);
         transition: transform .15s $ease-in-out-quad;
         z-index: 1;

projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss

@@ -170,15 +170,17 @@
 /// @param {Map} $theme - The theme used to style the component.
 /// @requires {mixin} css-vars
 /// @requires color
+/// @requires rem
+/// @requires spacing
+/// @requires border-radius
 /// @requires var-get
 @mixin button-group($theme) {
     @include css-vars($theme);
     $group-item-min-width: 24px;
     $group-item-border-thickness: 1px;
-    $group-items-margin: rem(10px, 16px);
+    $group-items-margin: spacing(10px);
     $transition: all 140ms $ease-in-out-quad;
     $palette: map.get($theme, 'palette');
-
     $variant: map.get($theme, 'variant');
     $bootstrap-theme: $variant == 'bootstrap';
     $indigo-theme: $variant == 'indigo-design';

projects/igniteui-angular/src/lib/core/styles/components/button/_button-theme.scss

@@ -269,39 +269,39 @@
     $button-icon-padding: 0;
 
     $button-padding-material: (
-        comfortable: rem(9px, 16px) rem(16px, 16px),
-        cosy: rem(6px, 16px) rem(16px, 16px),
-        compact: rem(3px, 16px) rem(16px, 16px)
+        comfortable: spacing(9px, 'comfortable') spacing(16px, 'comfortable'),
+        cosy: spacing(6px, 'cosy') spacing(16px, 'cosy'),
+        compact: spacing(3px, 'compact') spacing(16px, 'compact')
     );
 
     $outlined-button-padding-material: (
-        comfortable: rem(7px, 16px) rem(14px, 16px),
-        cosy: rem(4px, 16px) rem(14px, 16px),
-        compact: rem(1px, 16px) rem(14px, 16px)
+        comfortable: spacing(7px, 'comfortable') spacing(14px, 'comfortable'),
+        cosy: spacing(4px, 'cosy') spacing(14px, 'cosy'),
+        compact: spacing(1px, 'compact') spacing(14px, 'compact')
     );
 
     $button-padding-fluent: (
-        comfortable: 0 rem(16px, 16px),
-        cosy: 0 rem(16px, 16px),
-        compact: 0 rem(16px, 16px)
+        comfortable: 0 spacing(16px, 'comfortable'),
+        cosy: 0 spacing(16px, 'cosy'),
+        compact: 0 spacing(16px, 'compact')
     );
 
     $button-padding-bootstrap: (
-        comfortable: rem(6px, 16px) rem(12px, 16px),
-        cosy: rem(4px, 16px) rem(10px, 16px),
-        compact: rem(2px, 16px) rem(8px, 16px)
+        comfortable: spacing(6px, 'comfortable') spacing(12px, 'comfortable'),
+        cosy: spacing(4px, 'cosy') spacing(10px, 'cosy'),
+        compact: spacing(2px, 'compact') spacing(8px, 'compact')
     );
 
     $button-padding-indigo: (
-        comfortable: rem(3px, 16px) rem(12px, 16px),
-        cosy: rem(2px, 16px) rem(12px, 16px),
-        compact: rem(1px, 16px) rem(8px, 16px)
+        comfortable: spacing(3px, 'comfortable') spacing(12px, 'comfortable'),
+        cosy: spacing(2px, 'cosy') spacing(12px, 'cosy'),
+        compact: spacing(1px, 'compact') spacing(8px, 'compact')
     );
 
     $outlined-button-padding-indigo: (
-        comfortable: rem(6px, 16px) rem(14px, 16px),
-        cosy: rem(4px, 16px) rem(10px, 16px),
-        compact: rem(2px, 16px) rem(6px, 16px)
+        comfortable: spacing(6px, 'comfortable') spacing(14px, 'comfortable'),
+        cosy: spacing(4px, 'cosy') spacing(10px, 'cosy'),
+        compact: spacing(2px, 'cosy') spacing(6px, 'cosy')
     );
 
     $icon-button-width-material: (
@@ -381,9 +381,9 @@
     ), $variant);
 
     $button-floating-padding: (
-        comfortable: rem(8px) rem(14px),
-        cosy: rem(4px) rem(10px),
-        compact: 0 rem(6px)
+        comfortable: spacing(8px, 'comfortable') spacing(14px, 'comfortable'),
+        cosy: spacing(4px, 'cosy') spacing(10px, 'cosy'),
+        compact: 0 spacing(6px, 'compact')
     );
 
     $button-floating-size: (
@@ -399,9 +399,9 @@
     );
 
     $icon-in-button-margin: (
-        comfortable: rem(12px),
-        cosy: rem(8px),
-        compact: rem(4px)
+        comfortable: spacing(12px, 'comfortable'),
+        cosy: spacing(8px, 'cosy'),
+        compact: spacing(4px, 'compact')
     );
 
     $icon-sizes: map.get((