refactor(badge, button): use spacing for margin and padding

Author: simeonoff

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

@@ -961,3 +961,22 @@ $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});
+    }
+}

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

@@ -107,7 +107,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/button/_button-theme.scss

@@ -264,39 +264,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: (
@@ -376,9 +376,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: (
@@ -394,9 +394,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((

projects/igniteui-angular/src/lib/core/styles/themes/_index.scss

@@ -5,6 +5,7 @@
 
 @use 'sass:list';
 @use 'sass:string';
+@use 'sass:map';
 @use '../base' as *;
 @use 'schemas' as *;
 @use 'palettes' as *;
@@ -70,6 +71,18 @@
 
     $theme-palette: $palette !global;
 
+    :root {
+        --igx-spacing-comfortable: #{rem(map.get($spacing, 'comfortable'))};
+        --igx-spacing-cosy: #{rem(map.get($spacing, 'cosy'))};
+        --igx-spacing-compact: #{rem(map.get($spacing, 'compact'))};
+
+        @if $wc {
+            --igc-spacing-large: var(--igx-spacing-comfortable);
+            --igc-spacing-medium: var(--igx-spacing-cosy);
+            --igc-spacing-small: var(--igx-spacing-compact);
+        }
+    }
+
     @if list.length($exclude) > 0 {
         $excluded: is-component($exclude);
     }