Merge pull request #14001 from IgniteUI/sivanova/badge-typography

feat(badge): implement typography

Author: kdinev

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

@@ -103,10 +103,7 @@
         align-items: center;
         min-width: var(--_badge-size);
         min-height: var(--_badge-size);
-        font-size: calc(var(--_badge-size) / 2);
-        font-weight: $badge-font-weight;
         color: var-get($theme, 'text-color');
-        line-height: 1;
         background: var-get($theme, 'background-color');
         border-radius: calc(var(--size) / 2);
         box-shadow: var-get($theme, 'shadow');
@@ -126,10 +123,6 @@
         }
 
         @if $variant == 'indigo-design' {
-            font-size: rem(11px);
-            line-height: rem(15px);
-            font-weight: 700;
-
             igx-icon {
                 $icon-size: rem(12px);
 
@@ -168,3 +161,17 @@
         visibility: hidden;
     }
 }
+
+/// Adds typography styles for the igx-badge component.
+/// Uses the 'caption' category from the typographic scale.
+/// @group typography
+/// @param {Map} $categories [(text: 'caption')] - The categories from the typographic scale used for type styles.
+@mixin badge-typography($categories: (text: 'caption')) {
+    $text: map.get($categories, 'text');
+
+    %igx-badge-display {
+        @include type-style($text) {
+            margin: 0;
+        }
+    }
+}

projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss

@@ -1454,8 +1454,10 @@
         padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
     }
 
-    %form-group-input--search {
-        padding-inline: pad-inline(rem(6px), rem(8px), rem(10px));
+    @if $variant == 'indigo-design' {
+        %form-group-input--search {
+            padding-inline: pad-inline(rem(6px), rem(8px), rem(10px));
+        }
     }
 
     %indigo--box-focused {

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

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use '../components/badge/badge-theme' as *;
 @use '../components/banner/banner-theme' as *;
 @use '../components/bottom-nav/bottom-nav-theme' as *;
 @use '../components/button/button-theme' as *;
@@ -33,6 +34,7 @@
 @mixin typography($type-scale) {
     $calendar-labels: map.get($type-scale, 'calendar-labels');
 
+    @include badge-typography();
     @include banner-typography();
     @include bottom-nav-typography();
     @include button-typography();

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

@@ -1,3 +1,4 @@
+@use '../components/badge/badge-theme' as *;
 @use '../components/banner/banner-theme' as *;
 @use '../components/bottom-nav/bottom-nav-theme' as *;
 @use '../components/button/button-theme' as *;
@@ -30,6 +31,7 @@
 @use '../components/tree/tree-theme' as *;
 
 @mixin typography() {
+    @include badge-typography();
     @include banner-typography($categories: (
         message: 'caption'
     ));

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

@@ -1,3 +1,4 @@
+@use '../components/badge/badge-theme' as *;
 @use '../components/banner/banner-theme' as *;
 @use '../components/bottom-nav/bottom-nav-theme' as *;
 @use '../components/button/button-theme' as *;
@@ -30,6 +31,9 @@
 @use '../components/tree/tree-theme' as *;
 
 @mixin typography() {
+    @include badge-typography($categories: (
+        text: 'button',
+    ));
     @include banner-typography();
     @include bottom-nav-typography();
     @include button-typography();

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

@@ -1,3 +1,4 @@
+@use '../components/badge/badge-theme' as *;
 @use '../components/banner/banner-theme' as *;
 @use '../components/bottom-nav/bottom-nav-theme' as *;
 @use '../components/button/button-theme' as *;
@@ -30,6 +31,7 @@
 @use '../components/tree/tree-theme' as *;
 
 @mixin typography() {
+    @include badge-typography();
     @include banner-typography();
     @include bottom-nav-typography();
     @include button-typography();