refactor(badge): bundle styles with component

projects/igniteui-angular/src/lib/badge/badge.component.ts

@@ -1,7 +1,9 @@
 import { NgIf } from '@angular/common';
-import { booleanAttribute, Component, ElementRef, HostBinding, Input } from '@angular/core';
+import { booleanAttribute, Component, ElementRef, HostBinding, inject, Input, OnInit } from '@angular/core';
 import { mkenum } from '../core/utils';
 import { IgxIconComponent } from '../icon/icon.component';
+import { ThemeService } from '../services/theme/theme.service';
+import themes from './themes/index';
 
 let NEXT_ID = 0;
 
@@ -43,7 +45,7 @@ export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType];
     templateUrl: 'badge.component.html',
     imports: [NgIf, IgxIconComponent]
 })
-export class IgxBadgeComponent {
+export class IgxBadgeComponent implements OnInit{
 
    /**
     * Sets/gets the `id` of the badge.
@@ -187,6 +189,13 @@ export class IgxBadgeComponent {
     @HostBinding('class.igx-badge--outlined')
     public outlined = false;
 
+    public themeService = inject(ThemeService);
+
+    /** @hidden @internal */
+    public ngOnInit() {
+        this.themeService.adoptStyles(IgxBadgeComponent, themes);
+    }
+
     /**
      * Defines a human-readable, accessor, author-localized description for
      * the `type` and the `icon` or `value` of the element.

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

@@ -0,0 +1,71 @@
+@use 'sass:map';
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/color/functions' as *;
+@use './light/themes' as *;
+
+$theme: $material;
+
+@include b(igx-badge) {
+    @include css-vars-from-theme($base, 'igx-badge');
+
+    --size: #{rem(22px)};
+    --_badge-size: var(--size);
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    min-width: var(--_badge-size);
+    min-height: var(--_badge-size);
+    color: var-get($theme, 'text-color');
+    background: var-get($theme, 'background-color');
+    border-radius: calc(var(--size) / 2);
+    box-shadow: var-get($theme, 'elevation');
+    overflow: hidden;
+
+    @include type-style(caption) {
+        margin: 0;
+    }
+
+    igx-icon {
+        --size: var(--igx-icon-size, calc(var(--_badge-size) / 2)) !important;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        font-weight: 400;
+        color: var-get($theme, 'icon-color');
+    }
+
+    @include e(value) {
+        white-space: nowrap;
+        padding-inline: rem(4px);
+    }
+
+    @include m(info) {
+        background: color($color: 'info');
+    }
+
+    @include m(success) {
+        background: color($color: 'success');
+    }
+
+    @include m(warning) {
+        background: color($color: 'warn');
+    }
+
+    @include m(error) {
+        background: color($color: 'error');
+    }
+
+    @include m(outlined) {
+        box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'border-color');
+    }
+
+    @include m(square) {
+        border-radius: var-get($theme, 'border-radius');
+    }
+
+    @include m(hidden) {
+        visibility: hidden;
+    }
+}

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

@@ -0,0 +1,7 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/dark/badge' as *;
+
+$material: digest-schema($dark-material-badge);
+$bootstrap: digest-schema($dark-bootstrap-badge);
+$fluent: digest-schema($dark-fluent-badge);
+$indigo: digest-schema($dark-indigo-badge);

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

@@ -0,0 +1,13 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils/map' as *;
+@use '../light/themes' as light;
+@use 'themes' as *;
+
+$theme: $bootstrap;
+
+@container style(--theme: bootstrap) {
+    @include b(igx-badge) {
+        @include css-vars-from-theme(diff(light.$base, $theme), 'igx-badge');
+    }
+}

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

@@ -0,0 +1,13 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils/map' as *;
+@use '../light/themes' as light;
+@use 'themes' as *;
+
+$theme: $fluent;
+
+@container style(--theme: fluent) {
+    @include b(igx-badge) {
+        @include css-vars-from-theme(diff(light.$base, $theme), 'igx-badge');
+    }
+}

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

@@ -0,0 +1,13 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils/map' as *;
+@use '../light/themes' as light;
+@use 'themes' as *;
+
+$theme: $indigo;
+
+@container style(--theme: indigo) {
+    @include b(igx-badge) {
+        @include css-vars-from-theme(diff(light.$base, $theme), 'igx-badge');
+    }
+}

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

@@ -0,0 +1,13 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils/map' as *;
+@use '../light/themes' as light;
+@use 'themes' as *;
+
+$theme: $material;
+
+@container style(--theme: material) {
+    @include b(igx-badge) {
+        @include css-vars-from-theme(diff(light.$base, $theme), 'igx-badge');
+   }
+}

projects/igniteui-angular/src/lib/badge/themes/index.ts

@@ -0,0 +1,33 @@
+import base from './base.css';
+import bootstrap from './shared/bootstrap.css';
+import indigo from './shared/indigo.css';
+
+import lightMaterial from './light/material.css';
+import lightBootstrap from './light/bootstrap.css';
+import lightFluent from './light/fluent.css';
+import lightIndigo from './light/indigo.css';
+
+import darkMaterial from './dark/material.css';
+import darkBootstrap from './dark/bootstrap.css';
+import darkFluent from './dark/fluent.css';
+import darkIndigo from './dark/indigo.css';
+
+export default {
+    base: base.css,
+    shared: {
+        bootstrap: bootstrap.css,
+        indigo: indigo.css
+    },
+    light: {
+        material: lightMaterial.css,
+        bootstrap: lightBootstrap.css,
+        fluent: lightFluent.css,
+        indigo: lightIndigo.css
+    },
+    dark: {
+        material: darkMaterial.css,
+        bootstrap: darkBootstrap.css,
+        fluent: darkFluent.css,
+        indigo: darkIndigo.css
+    }
+}

projects/igniteui-angular/src/lib/badge/themes/light/_themes.scss

@@ -0,0 +1,8 @@
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/themes/schemas/components/light/badge' as *;
+
+$base: digest-schema($light-badge);
+$material: digest-schema($material-badge);
+$bootstrap: digest-schema($bootstrap-badge);
+$fluent: digest-schema($fluent-badge);
+$indigo: digest-schema($indigo-badge);

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

@@ -0,0 +1,12 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils/map' as *;
+@use 'themes' as *;
+
+$theme: $bootstrap;
+
+@container style(--theme: bootstrap) {
+    @include b(igx-badge) {
+        @include css-vars-from-theme(diff($base, $theme), 'igx-badge');
+    }
+}

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

@@ -0,0 +1,12 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils/map' as *;
+@use 'themes' as *;
+
+$theme: $fluent;
+
+@container style(--theme: fluent) {
+    @include b(igx-badge) {
+        @include css-vars-from-theme(diff($base, $theme), 'igx-badge');
+    }
+}

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

@@ -0,0 +1,12 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils/map' as *;
+@use 'themes' as *;
+
+$theme: $indigo;
+
+@container style(--theme: indigo) {
+    @include b(igx-badge) {
+        @include css-vars-from-theme(diff($base, $theme), 'igx-badge');
+    }
+}

projects/igniteui-angular/src/lib/badge/themes/light/material.scss

@@ -0,0 +1,12 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/themes' as *;
+@use 'igniteui-theming/sass/utils/map' as *;
+@use 'themes' as *;
+
+$theme: $material;
+
+@container style(--theme: material) {
+    @include b(igx-badge) {
+        @include css-vars-from-theme(diff($base, $theme), 'igx-badge');
+    }
+}

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

@@ -0,0 +1,14 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/themes/functions' as *;
+@use '../light/themes' as *;
+
+$theme: $bootstrap;
+
+@container style(--theme: bootstrap) {
+    @include b(igx-badge) {
+        @include m(outlined) {
+            box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');
+        }
+    }
+}

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

@@ -0,0 +1,20 @@
+@use 'igniteui-theming/sass/bem' as *;
+@use 'igniteui-theming/sass/typography' as *;
+@use 'igniteui-theming/sass/themes/functions' as *;
+@use '../light/themes' as *;
+
+$theme: $indigo;
+
+@container style(--theme: indigo) {
+    @include b(igx-badge) {
+        @include type-style(button) {
+            margin: 0;
+        }
+
+        igx-icon {
+            $icon-size: rem(12px);
+            --ig-icon-size: #{$icon-size};
+            --igx-icon-size: #{$icon-size};
+        }
+    }
+}

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

@@ -152,13 +152,13 @@
         @include action-strip($action-strip-theme-map);
     }
 
-    @if is-used('igx-badge', $exclude) {
-        $badge-theme-map: badge-theme(
-            $schema: $schema,
-        );
-        $badge-theme-map: meta.call($theme-handler, $badge-theme-map);
-        @include badge($badge-theme-map);
-    }
+    // @if is-used('igx-badge', $exclude) {
+    //     $badge-theme-map: badge-theme(
+    //         $schema: $schema,
+    //     );
+    //     $badge-theme-map: meta.call($theme-handler, $badge-theme-map);
+    //     @include badge($badge-theme-map);
+    // }
 
     @if is-used('igx-bottom-nav', $exclude) {
         $bottom-nav-theme-map: bottom-nav-theme(