Merge pull request #15033 from IgniteUI/igniteui-angular-15002-18-2-x

fix(dialog): fix dialog discrepancies whit the UI kit

Author: ChronosSF

projects/igniteui-angular/src/lib/core/styles/components/dialog/_dialog-theme.scss

@@ -87,7 +87,7 @@
     @include css-vars($theme);
 
     $variant: map.get($theme, '_meta', 'variant');
-    $bootstrap-theme: map.get($theme, variant) == 'bootstrap';
+    $bootstrap-theme: map.get($theme, '_meta', 'variant') == 'bootstrap';
 
     $dialog-min-width: map.get((
         'material': rem(280px),
@@ -96,21 +96,21 @@
     ), $variant);
 
     $dialog-title-padding: map.get((
-        'material': rem(24px) rem(24px) rem(12px) rem(24px),
+        'material': rem(16px) rem(24px) rem(0px) rem(24px),
         'fluent': rem(16px) rem(24px) rem(24px) rem(24px),
         'bootstrap': rem(16px),
         'indigo': rem(24px) rem(24px) 0 rem(24px),
     ), $variant);
 
     $dialog-message-padding: map.get((
-        'material': rem(12px) rem(24px),
+        'material': rem(14px) rem(24px),
         'fluent': 0 rem(24px) rem(20px) rem(24px),
         'bootstrap': rem(16px),
         'indigo': rem(16px) rem(24px),
     ), $variant);
 
     $dialog-actions-padding: map.get((
-        'material': rem(8px),
+        'material': 0 rem(8px) rem(8px),
         'fluent': 0 rem(24px) rem(24px) rem(24px),
         'bootstrap': rem(16px),
         'indigo': rem(16px) rem(24px) rem(24px) rem(24px),
@@ -180,23 +180,16 @@
         flex-flow: row nowrap;
         justify-content: flex-end;
         padding: $dialog-actions-padding;
+        gap: if($variant == 'indigo', rem(16px), rem(8px));
 
         @if $bootstrap-theme {
             border-top: rem(1px) solid var-get($theme, 'border-color');
         }
 
-        button + button {
-            margin-inline-start: rem(8px);
-        }
-
         @if $variant == 'indigo' {
             .igx-button {
                 --ig-size: 2;
             }
-
-            button + button {
-                margin-inline-start: rem(16px);
-            }
         }
     }
 }

projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss

@@ -61,7 +61,10 @@
     ));
     @include column-actions-typography();
     @include date-range-typography();
-    @include dialog-typography();
+    @include dialog-typography($categories: (
+        title: 'h6',
+        content: 'body-2'
+    ));
     @include dock-manager-typography();
     @include drop-down-typography($categories: (
         header: 'subtitle-2',