feat(badge): design enhancement

projects/igniteui-angular/src/lib/badge/themes/_base.scss

@@ -9,9 +9,13 @@ $theme: $material;
 
 @include layer(base) {
     @include b(igx-badge) {
-        --size: #{rem(22px)};
-        --_badge-size: var(--size);
-        --igx-icon-size: calc(var(--_badge-size) / 2);
+        @include sizable();
+
+        --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+        --badge-size: var(--component-size);
+        --_badge-size: #{var-get($theme, 'size')};
+
+        --igx-icon-size: #{sizable(rem(12px), rem(14px), rem(16px))};
         --igx-icon-color: #{var-get($theme, 'icon-color')};
 
         display: inline-flex;
@@ -24,40 +28,60 @@ $theme: $material;
         border-radius: calc(var(--size) / 2);
         box-shadow: var-get($theme, 'elevation');
         overflow: hidden;
-
-        @include type-style(caption) {
-            margin: 0;
-        }
+        font-size: sizable(var(--ig-caption-font-size), var(--ig-body-2-font-size), var(--ig-body-2-font-size));
+        font-weight: sizable(var(--ig-caption-font-weight), var(--ig-body-2-font-weight), var(--ig-body-2-font-weight));
+        line-height: sizable(var(--ig-caption-line-height), var(--ig-body-2-line-height), var(--ig-body-2-line-height));
+        letter-spacing: sizable(var(--ig-caption-letter-spacing), var(--ig-body-2-letter-spacing), var(--ig-body-2-letter-spacing));
+        text-transform: sizable(var(--ig-caption-text-transform), var(--ig-body-2-text-transform), var(--ig-body-2-text-transform));
 
         @include e(value) {
             white-space: nowrap;
-            padding-inline: rem(4px);
+            padding-inline: pad-inline(rem(4px), rem(6px), rem(8px));
         }
 
         @include m(info) {
-            background: color($color: 'info');
+            background: color($color: 'info', $variant: 800);
         }
 
         @include m(success) {
-            background: color($color: 'success');
+            background: color($color: 'success', $variant: 900);
         }
 
         @include m(warning) {
             background: color($color: 'warn');
+            color: contrast-color($color: 'warn', $variant: 500);
+
+            igx-icon {
+                color: contrast-color($color: 'warn', $variant: 500);
+            }
         }
 
         @include m(error) {
-            background: color($color: 'error');
+            background: color($color: 'error', $variant: 700);
+            color: contrast-color($color: 'error', $variant: 900);
         }
 
         @include m(outlined) {
-            box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'border-color');
+            box-shadow: 0 0 0 rem(2px) var-get($theme, 'border-color');
         }
 
         @include m(square) {
             border-radius: var-get($theme, 'border-radius');
         }
 
+        @include m(dot) {
+            --_dot-size: #{var-get($theme, 'dot-size')};
+
+            min-width: var(--_dot-size);
+            min-height: var(--_dot-size);
+            padding: 0;
+
+            igx-icon,
+            > * {
+                display: none;
+            }
+        }
+
         @include m(hidden) {
             visibility: hidden;
         }

projects/igniteui-angular/src/lib/badge/themes/dark/_index.scss

@@ -1,6 +1,7 @@
 @use 'sass:meta';
 @use 'tokens';
 @use 'styles/themes/standalone' as *;
+@use 'indigo';
 
 $tokens: meta.module-variables(tokens);
 @include themes(igx-badge, $tokens, dark);

projects/igniteui-angular/src/lib/badge/themes/dark/_indigo.scss

@@ -0,0 +1,14 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+@include themed-block(igx-badge, indigo, dark) {
+    @include m(warning) {
+        color: color($color: 'gray', $variant: 50);
+
+        igx-icon {
+            color: color($color: 'gray', $variant: 50);
+        }
+    }
+}

projects/igniteui-angular/src/lib/badge/themes/shared/_index.scss

@@ -1,2 +1,3 @@
 @forward 'bootstrap';
 @forward 'indigo';
+@forward 'fluent';

projects/igniteui-angular/src/lib/badge/themes/shared/bootstrap.scss

@@ -1,13 +1,23 @@
 @use 'igniteui-theming/sass/bem' as *;
 @use 'igniteui-theming/sass/typography' as *;
 @use 'igniteui-theming/sass/themes/functions' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
 @use 'styles/themes/standalone' as *;
 @use '../light/tokens' as *;
 
 $_theme: $bootstrap;
 
 @include themed-block(igx-badge, bootstrap) {
-    @include m(outlined) {
-        box-shadow: inset 0 0 0 rem(1px) var-get($_theme, 'border-color');
+    @include m(success) {
+        background: color($color: 'success', $variant: 500);
+    }
+
+    @include m(info) {
+        background: color($color: 'info', $variant: 500);
+    }
+
+    @include m(error) {
+        background: color($color: 'error', $variant: 500);
+        color: contrast-color($color: 'error', $variant: 100);
     }
 }

projects/igniteui-angular/src/lib/badge/themes/shared/fluent.scss

@@ -0,0 +1,22 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/themes/functions' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use 'styles/themes/standalone' as *;
+@use '../light/tokens' as *;
+
+$_theme: $fluent;
+
+@include themed-block(igx-badge, fluent) {
+    @include m(success) {
+        background: color($color: 'success', $variant: 500);
+    }
+
+    @include m(info) {
+        background: color($color: 'info', $variant: 700);
+    }
+
+    @include m(error) {
+        background: color($color: 'error', $variant: 500);
+    }
+}

projects/igniteui-angular/src/lib/badge/themes/shared/indigo.scss

@@ -1,13 +1,39 @@
 @use 'igniteui-theming/sass/bem' as *;
 @use 'igniteui-theming/sass/typography' as *;
 @use 'igniteui-theming/sass/themes/functions' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
 @use 'styles/themes/standalone' as *;
 @use '../light/tokens' as *;
 
 @include themed-block(igx-badge, indigo) {
-    --igx-icon-size: #{rem(12px)};
+    --igx-icon-size: #{sizable(rem(8px), rem(10px), rem(12px))};
 
-    @include type-style(button) {
-        margin: 0;
+    @include type-style('button', false) {
+        font-size: sizable(rem(9px), rem(10px), var(--ig-button-font-size));
+        line-height: sizable(rem(12px), rem(14px), var(--ig-button-line-height));
+    }
+
+    @include e(value) {
+        padding-inline: pad-inline(rem(4px), rem(6px), rem(6px));
+    }
+
+    @include m(success) {
+        background: color($color: 'success', $variant: 700);
+    }
+
+    @include m(info) {
+        background: color($color: 'info', $variant: 500);
+    }
+
+    @include m(error) {
+        background: color($color: 'error', $variant: 500);
+    }
+
+    @include m(warning) {
+        color: color($color: 'gray', $variant: 900);
+
+        igx-icon {
+            color: color($color: 'gray', $variant: 900);
+        }
     }
 }