diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts index 655a0320b..0a17de4cf 100644 --- a/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts +++ b/projects/app-lob/src/app/grid-dynamic-chart-data/data-analysis-dock-manager/data-analysis-dock-manager.component.ts @@ -7,7 +7,7 @@ import { FloatingPanesService } from '../../services/floating-panes.service'; import { DockSlotComponent } from './dock-slot/dock-slot.component'; import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IColumnSelectionEventArgs, IgxCellTemplateDirective, IgxColumnComponent } from 'igniteui-angular/grids/core'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; import { IgxBadgeComponent } from 'igniteui-angular/badge'; import { NgClass, DecimalPipe, TitleCasePipe, CurrencyPipe } from '@angular/common'; import { debounceTime } from 'rxjs/operators'; @@ -57,7 +57,7 @@ export class HastDuplicateLayouts implements PipeTransform { templateUrl: './data-analysis-dock-manager.component.html', styleUrls: ['./data-analysis-dock-manager.component.scss'], providers: [FloatingPanesService], - imports: [IgxGridComponent, IgxConditionalFormattingDirective, IgxChartIntegrationDirective, IgxContextMenuDirective, IgxBadgeComponent, IgxColumnComponent, IgxCellTemplateDirective, NgClass, IgxDividerDirective, DockSlotComponent, DecimalPipe, TitleCasePipe, CurrencyPipe, FilterTypePipe, HastDuplicateLayouts], + imports: [IgxGridComponent, IgxConditionalFormattingDirective, IgxChartIntegrationDirective, IgxContextMenuDirective, IgxBadgeComponent, IgxColumnComponent, IgxCellTemplateDirective, NgClass, IgxDividerComponent, DockSlotComponent, DecimalPipe, TitleCasePipe, CurrencyPipe, FilterTypePipe, HastDuplicateLayouts], changeDetection: ChangeDetectionStrategy.Eager, schemas: [CUSTOM_ELEMENTS_SCHEMA] }) diff --git a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts index a95bdcc4e..f9f795f91 100644 --- a/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts +++ b/projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component.ts @@ -4,7 +4,7 @@ import { IgxColumnComponent, IgxGridDetailTemplateDirective } from 'igniteui-ang import { IgxGridComponent } from 'igniteui-angular/grids/grid'; import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabItemComponent, IgxTabsComponent } from 'igniteui-angular/tabs'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; import { IgxLegendComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule } from 'igniteui-angular-charts'; import { employeesData } from '../../data/employeesData'; import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/directives/prevent-scroll.directive'; @@ -14,7 +14,7 @@ import { IgxPreventDocumentScrollDirective } from '../../../../../../src/app/dir styleUrls: ['./grid-master-detail.component.scss'], templateUrl: 'grid-master-detail.component.html', changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerDirective, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule] + imports: [IgxGridComponent, IgxPreventDocumentScrollDirective, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabHeaderLabelDirective, IgxTabContentComponent, IgxAvatarComponent, IgxDividerComponent, IgxPieChartCoreModule, IgxLegendModule, IgxCategoryChartModule] }) export class GridMasterDetailSampleComponent { diff --git a/src/app/data-entries/checkbox/checkbox-styling/layout.scss b/src/app/data-entries/checkbox/checkbox-styling/layout.scss index b3d179bdc..1cff96454 100644 --- a/src/app/data-entries/checkbox/checkbox-styling/layout.scss +++ b/src/app/data-entries/checkbox/checkbox-styling/layout.scss @@ -1,12 +1,10 @@ @use "igniteui-angular/theming" as *; -@use "igniteui-angular/lib/core/styles/components/checkbox/checkbox-component" as checkbox; @use "sass:map"; :host { ::ng-deep { $_checkbox-schema: map.get($light-fluent-schema, checkbox); - @include checkbox(checkbox-theme($schema: $_checkbox-schema)); - @include checkbox.component(); + @include tokens(checkbox-theme($schema: $_checkbox-schema)); // Note: This is not the standard approach for styling the component. // We're using it here solely to mirror the UI5 sample. diff --git a/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.ts b/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.ts index 11686993d..d44454220 100644 --- a/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.ts +++ b/src/app/data-entries/dropdown/dropdown-sample-3/dropdown-sample-3.component.ts @@ -1,5 +1,5 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { IgxButtonDirective, IgxDividerDirective, IgxToggleActionDirective } from 'igniteui-angular/directives'; +import { IgxButtonDirective, IgxDividerComponent, IgxToggleActionDirective } from 'igniteui-angular/directives'; import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from 'igniteui-angular/drop-down'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-group'; @@ -11,7 +11,7 @@ import { IgxPrefixDirective, IgxSuffixDirective } from 'igniteui-angular/input-g styleUrls: ['./dropdown-sample-3.component.scss'], templateUrl: './dropdown-sample-3.component.html', changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxIconComponent, IgxPrefixDirective, IgxSuffixDirective, IgxDividerDirective] + imports: [IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxIconComponent, IgxPrefixDirective, IgxSuffixDirective, IgxDividerComponent] }) export class DropDownSample3Component { diff --git a/src/app/data-entries/input-group/input-group-styling/layout.scss b/src/app/data-entries/input-group/input-group-styling/layout.scss index 74026e1dc..bd93634ab 100644 --- a/src/app/data-entries/input-group/input-group-styling/layout.scss +++ b/src/app/data-entries/input-group/input-group-styling/layout.scss @@ -1,12 +1,10 @@ @use "igniteui-angular/theming" as *; -@use "igniteui-angular/lib/core/styles/components/input/input-group-component" as input; @use "sass:map"; :host { ::ng-deep { $_input-schema: map.get($light-indigo-schema, input-group); - @include input-group(input-group-theme($schema: $_input-schema)); - @include input.component(); + @include tokens(input-group-theme($schema: $_input-schema)); // Note: This is not the standard approach for styling the component. // We're using it here solely to mirror the Carbon sample. diff --git a/src/app/data-entries/radio/radio-styling-sample/layout.scss b/src/app/data-entries/radio/radio-styling-sample/layout.scss index 3c6fc3501..13e08cafd 100644 --- a/src/app/data-entries/radio/radio-styling-sample/layout.scss +++ b/src/app/data-entries/radio/radio-styling-sample/layout.scss @@ -1,12 +1,10 @@ @use "igniteui-angular/theming" as *; -@use "igniteui-angular/lib/core/styles/components/radio/radio-component" as radio; @use "sass:map"; :host { ::ng-deep{ $_radio-schema: map.get($light-fluent-schema, radio); - @include radio(radio-theme($schema: $_radio-schema)); - @include radio.component(); + @include tokens(radio-theme($schema: $_radio-schema)); // Note: This is not the standard approach for styling the component. // We're using it here solely to mirror the UI5 sample. diff --git a/src/app/data-entries/switch/switch-styling/layout.scss b/src/app/data-entries/switch/switch-styling/layout.scss index b248011ce..6e92f5d99 100644 --- a/src/app/data-entries/switch/switch-styling/layout.scss +++ b/src/app/data-entries/switch/switch-styling/layout.scss @@ -1,12 +1,10 @@ @use "igniteui-angular/theming" as *; -@use "igniteui-angular/lib/core/styles/components/switch/switch-component" as switch; @use 'sass:map'; :host { ::ng-deep { $_switch-schema: map.get($light-fluent-schema, switch); - @include switch(switch-theme($schema: $_switch-schema)); - @include switch.component(); + @include tokens(switch-theme($schema: $_switch-schema)); // Note: This is not the standard approach for styling the component. // We're using it here solely to mirror the UI5 sample. diff --git a/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.scss b/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.scss index 350dfb901..0c28471bb 100644 --- a/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.scss +++ b/src/app/grid/grid-keyboardnav-guide-sample/grid-keyboardnav-sample.component.scss @@ -8,7 +8,7 @@ $custom-checkbox-theme: checkbox-theme( ); .list-sample ::ng-deep { - @include checkbox($custom-checkbox-theme); + @include tokens($custom-checkbox-theme); } .sample { diff --git a/src/app/grid/grid-paging-sample/grid-paging-sample.component.scss b/src/app/grid/grid-paging-sample/grid-paging-sample.component.scss index c36c25d40..9c38781b8 100644 --- a/src/app/grid/grid-paging-sample/grid-paging-sample.component.scss +++ b/src/app/grid/grid-paging-sample/grid-paging-sample.component.scss @@ -6,7 +6,7 @@ $progressBar-sample-theme: progress-linear-theme( ); .grid__wrapper { - @include progress-linear($progressBar-sample-theme); + @include tokens($progressBar-sample-theme); --ig-size: var(--ig-size-medium); margin: 0 16px; diff --git a/src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.html b/src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.html index 252f0b2a6..7892df645 100644 --- a/src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.html +++ b/src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.html @@ -1,16 +1,10 @@ -
- drag_indicator - Draggable Dialog +
+ Draggable Dialog + drag_indicator +
Grab the handle icon to drag. -
- - - + diff --git a/src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.scss b/src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.scss index 726fd743c..09dabe364 100644 --- a/src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.scss +++ b/src/app/interactions/drag-drop/dialog-sample/drag-dialog-sample.component.scss @@ -1,37 +1,45 @@ @use '../../../../variables' as *; -@include dialog( - dialog-theme( - $schema: $schema - ) +$theme: dialog-theme( + $schema: $schema ); -@include dialog-typography(); - :host { display: block; margin: 16px; - @include b(dialog) { - @extend %igx-dialog-window; + .dialog { + @include tokens($theme, $mode: 'scoped'); display: flex; flex-direction: column; - max-width: rem(280px); - - @include e(icon) { - position: absolute; - right: rem(24px); - top: rem(24px); - cursor: move; + width: rem(280px); + min-width: rem(280px); + border: rem(1px) solid var-get($theme, 'border-color'); + border-radius: var-get($theme, 'border-radius'); + background: var-get($theme, 'background'); + box-shadow: var-get($theme, 'elevation'); + overflow: hidden; + + header { + display: flex; + align-items: center; + justify-content: space-between; + padding: rem(16px) rem(24px); } - @include e(title) { - @extend %igx-dialog-title; + &__title { + display: inline-block; + color: var-get($theme, 'title-color'); } - @include e(content) { - @extend %igx-dialog-content; + &__icon { + cursor: move; } + + &__content { + color: var-get($theme, 'message-color'); + padding: rem(14px) rem(24px); + } } } diff --git a/src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.scss b/src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.scss index 030f54646..43744adc3 100644 --- a/src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.scss +++ b/src/app/layouts/avatar/avatar-css-variables/avatar-css-variables.component.scss @@ -5,7 +5,7 @@ --teal-dark: #004d40; ::ng-deep { - @include avatar( + @include tokens( avatar-theme( $background: var(--teal-light), $color: var(--teal-dark) diff --git a/src/app/layouts/card/card-sample-1/card-sample-1.component.ts b/src/app/layouts/card/card-sample-1/card-sample-1.component.ts index 1fdd86ad2..f89db82b0 100644 --- a/src/app/layouts/card/card-sample-1/card-sample-1.component.ts +++ b/src/app/layouts/card/card-sample-1/card-sample-1.component.ts @@ -1,7 +1,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; import { Card } from '../card.blueprint'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; -import { IgxDividerDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -11,7 +11,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; styleUrls: ['./card-sample-1.component.scss'], templateUrl: './card-sample-1.component.html', changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxDividerDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] + imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxDividerComponent, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] }) export class CardSample1Component { public card = new Card({ diff --git a/src/app/layouts/card/card-sample-2/card-sample-2.component.ts b/src/app/layouts/card/card-sample-2/card-sample-2.component.ts index 338ffe01c..bf93289a6 100644 --- a/src/app/layouts/card/card-sample-2/card-sample-2.component.ts +++ b/src/app/layouts/card/card-sample-2/card-sample-2.component.ts @@ -1,7 +1,7 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; import { Card } from '../card.blueprint'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; -import { IgxDividerDirective, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @@ -11,7 +11,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; styleUrls: ['./card-sample-2.component.scss'], templateUrl: './card-sample-2.component.html', changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] + imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerComponent, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] }) export class CardSample2Component { public card = new Card({ diff --git a/src/app/layouts/card/card-sample-4/card-sample-4.component.ts b/src/app/layouts/card/card-sample-4/card-sample-4.component.ts index 249776b69..09ac0d43a 100644 --- a/src/app/layouts/card/card-sample-4/card-sample-4.component.ts +++ b/src/app/layouts/card/card-sample-4/card-sample-4.component.ts @@ -4,7 +4,7 @@ import { IgxIconComponent, IgxIconService } from 'igniteui-angular/icon'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; import { IgxSliderComponent } from 'igniteui-angular/slider'; import { IgxListComponent, IgxListItemComponent } from 'igniteui-angular/list'; -import { IgxButtonDirective, IgxDividerDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxButtonDirective, IgxDividerComponent, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxPrefixDirective } from 'igniteui-angular/input-group'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxChipComponent } from 'igniteui-angular/chips'; @@ -23,7 +23,7 @@ import { styleUrls: ['./card-sample-4.component.scss'], templateUrl: './card-sample-4.component.html', changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxChipComponent, IgxIconComponent, IgxSliderComponent, IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxListComponent, IgxListItemComponent, IgxDividerDirective, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective, IgxAvatarComponent] + imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardContentDirective, IgxChipComponent, IgxIconComponent, IgxSliderComponent, IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxListComponent, IgxListItemComponent, IgxDividerComponent, IgxCardActionsComponent, IgxButtonDirective, IgxRippleDirective, IgxPrefixDirective, IgxCardMediaDirective, IgxAvatarComponent] }) export class CardSample4Component implements OnInit { private iconService = inject(IgxIconService); diff --git a/src/app/layouts/divider/dashed/divider-dashed.component.ts b/src/app/layouts/divider/dashed/divider-dashed.component.ts index 26e734b60..6dc2a545e 100644 --- a/src/app/layouts/divider/dashed/divider-dashed.component.ts +++ b/src/app/layouts/divider/dashed/divider-dashed.component.ts @@ -1,12 +1,12 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; @Component({ selector: 'app-divider-dashed', styleUrls: ['./divider-dashed.component.scss'], templateUrl: './divider-dashed.component.html', changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxDividerDirective] + imports: [IgxDividerComponent] }) export class DividerDashedComponent { diff --git a/src/app/layouts/divider/default/divider-default.component.ts b/src/app/layouts/divider/default/divider-default.component.ts index fbd3fb688..73cd8d57d 100644 --- a/src/app/layouts/divider/default/divider-default.component.ts +++ b/src/app/layouts/divider/default/divider-default.component.ts @@ -1,12 +1,12 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; @Component({ selector: 'app-divider-default', styleUrls: ['./divider-default.component.scss'], templateUrl: './divider-default.component.html', changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxDividerDirective] + imports: [IgxDividerComponent] }) export class DividerDefaultComponent { diff --git a/src/app/layouts/divider/inset/divider-inset.component.ts b/src/app/layouts/divider/inset/divider-inset.component.ts index 5f7d3459f..fe5f1b204 100644 --- a/src/app/layouts/divider/inset/divider-inset.component.ts +++ b/src/app/layouts/divider/inset/divider-inset.component.ts @@ -1,12 +1,12 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; @Component({ selector: 'app-divider-inset', styleUrls: ['./divider-inset.component.scss'], templateUrl: './divider-inset.component.html', changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxDividerDirective] + imports: [IgxDividerComponent] }) export class DividerInsetComponent { diff --git a/src/app/layouts/divider/vertical/divider-vertical.component.ts b/src/app/layouts/divider/vertical/divider-vertical.component.ts index 8363a6e5a..8fab148ec 100644 --- a/src/app/layouts/divider/vertical/divider-vertical.component.ts +++ b/src/app/layouts/divider/vertical/divider-vertical.component.ts @@ -1,12 +1,12 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { IgxDividerDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent } from 'igniteui-angular/directives'; @Component({ selector: 'app-divider-vertical', styleUrls: ['./divider-vertical.component.scss'], templateUrl: './divider-vertical.component.html', changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxDividerDirective] + imports: [IgxDividerComponent] }) export class DividerVerticalComponent { diff --git a/src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.scss b/src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.scss index 355981ca4..e9cf6ab8e 100644 --- a/src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.scss +++ b/src/app/layouts/stepper/stepper-overview-sample/stepper-overview-sample.component.scss @@ -45,7 +45,7 @@ $my-card: card-theme( $content-text-color: color($default-palette, 'gray', 900), ); -@include card($my-card); +@include tokens($my-card); .selected-card { border: 2px solid color($default-palette, 'primary', 400); diff --git a/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.scss b/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.scss index 355981ca4..e9cf6ab8e 100644 --- a/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.scss +++ b/src/app/layouts/stepper/stepper-sample-reactive-forms/stepper-sample-reactive-forms.component.scss @@ -45,7 +45,7 @@ $my-card: card-theme( $content-text-color: color($default-palette, 'gray', 900), ); -@include card($my-card); +@include tokens($my-card); .selected-card { border: 2px solid color($default-palette, 'primary', 400); diff --git a/src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.scss b/src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.scss index 223f7133d..e3557ec03 100644 --- a/src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.scss +++ b/src/app/menus/action-strip/action-strip-paragraph/action-strip-paragraph.component.scss @@ -5,7 +5,7 @@ $custom-strip: action-strip-theme( ); .my-action-strip { - @include action-strip($custom-strip); + @include tokens($custom-strip); display: flex; align-items: flex-start; justify-content: center; diff --git a/src/app/theming/angular/angular-sample.component.ts b/src/app/theming/angular/angular-sample.component.ts index d3c7e4d22..d61a02599 100644 --- a/src/app/theming/angular/angular-sample.component.ts +++ b/src/app/theming/angular/angular-sample.component.ts @@ -1,7 +1,7 @@ import { Component, HostBinding, OnInit, ViewChild, inject, ChangeDetectionStrategy } from '@angular/core'; import { IgxDialogActionsDirective, IgxDialogComponent } from 'igniteui-angular/dialog'; import { IgxOverlayOutletDirective } from 'igniteui-angular/core'; -import { IgxButtonDirective, IgxDividerDirective, IgxIconButtonDirective, IgxLayoutDirective } from 'igniteui-angular/directives'; +import { IgxButtonDirective, IgxDividerComponent, IgxIconButtonDirective, IgxLayoutDirective } from 'igniteui-angular/directives'; import { IgxIconComponent } from 'igniteui-angular/icon'; import { IgxAvatarComponent } from 'igniteui-angular/avatar'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderSubtitleDirective, IgxCardHeaderTitleDirective, IgxCardMediaDirective } from 'igniteui-angular/card'; @@ -22,7 +22,7 @@ import { MatInput } from '@angular/material/input'; styleUrls: ['./angular-sample.component.scss'], templateUrl: './angular-sample.component.html', changeDetection: ChangeDetectionStrategy.Eager, - imports: [MatToolbar, IgxButtonDirective, MatMenuTrigger, IgxIconComponent, MatMenu, MatMenuItem, IgxLayoutDirective, IgxAvatarComponent, IgxIconButtonDirective, IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardActionsComponent, MatButton, IgxDialogComponent, IgxDialogActionsDirective, IgxSuffixDirective, IgxOverlayOutletDirective, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, MatSlider, MatSliderThumb, IgxDividerDirective, MatStepper, MatStep, FormsModule, ReactiveFormsModule, MatStepLabel, MatFormField, MatLabel, MatInput, MatStepperNext, MatStepperPrevious] + imports: [MatToolbar, IgxButtonDirective, MatMenuTrigger, IgxIconComponent, MatMenu, MatMenuItem, IgxLayoutDirective, IgxAvatarComponent, IgxIconButtonDirective, IgxCardComponent, IgxCardMediaDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardHeaderSubtitleDirective, IgxCardActionsComponent, MatButton, IgxDialogComponent, IgxDialogActionsDirective, IgxSuffixDirective, IgxOverlayOutletDirective, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelBodyComponent, MatSlider, MatSliderThumb, IgxDividerComponent, MatStepper, MatStep, FormsModule, ReactiveFormsModule, MatStepLabel, MatFormField, MatLabel, MatInput, MatStepperNext, MatStepperPrevious] }) export class AngularMaterialComponent implements OnInit { diff --git a/src/app/theming/animations/animations-sample-2/animations-sample-2.component.ts b/src/app/theming/animations/animations-sample-2/animations-sample-2.component.ts index 71a7d86ce..2e8f84866 100644 --- a/src/app/theming/animations/animations-sample-2/animations-sample-2.component.ts +++ b/src/app/theming/animations/animations-sample-2/animations-sample-2.component.ts @@ -1,6 +1,6 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; import { IgxCardActionsComponent, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardMediaDirective } from 'igniteui-angular/card'; -import { IgxDividerDirective, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; +import { IgxDividerComponent, IgxFlexDirective, IgxIconButtonDirective, IgxLayoutDirective, IgxRippleDirective } from 'igniteui-angular/directives'; import { IgxSuffixDirective } from 'igniteui-angular/input-group'; import { IgxIconComponent } from 'igniteui-angular/icon'; @Component({ @@ -8,7 +8,7 @@ import { IgxIconComponent } from 'igniteui-angular/icon'; styleUrls: ['./animations-sample-2.component.scss'], templateUrl: './animations-sample-2.component.html', changeDetection: ChangeDetectionStrategy.Eager, - imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerDirective, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] + imports: [IgxCardComponent, IgxLayoutDirective, IgxFlexDirective, IgxCardHeaderComponent, IgxCardMediaDirective, IgxCardContentDirective, IgxDividerComponent, IgxCardActionsComponent, IgxIconButtonDirective, IgxRippleDirective, IgxSuffixDirective, IgxIconComponent] }) export class AnimationsSample2Component { public horizontal = true; diff --git a/src/app/theming/styles/dark-theme.scss b/src/app/theming/styles/dark-theme.scss index 0464750d5..e226d14f5 100644 --- a/src/app/theming/styles/dark-theme.scss +++ b/src/app/theming/styles/dark-theme.scss @@ -1,23 +1,18 @@ @use 'igniteui-angular/theming' as *; // Import grid component and theme styles -@use 'igniteui-angular/lib/core/styles/components/grid/grid-component'; @use 'igniteui-angular/lib/core/styles/components/grid/grid-theme'; // Import paginator component and theme styles -@use 'igniteui-angular/lib/core/styles/components/paginator/paginator-component'; @use 'igniteui-angular/lib/core/styles/components/paginator/paginator-theme'; // Import dialog-group component and theme styles -@use 'igniteui-angular/lib/core/styles/components/dialog/dialog-component'; @use 'igniteui-angular/lib/core/styles/components/dialog/dialog-theme'; // Import input-group component and theme styles -@use 'igniteui-angular/lib/core/styles/components/input/input-group-component'; @use 'igniteui-angular/lib/core/styles/components/input/input-group-theme'; // Import grid snackbar and theme styles -@use 'igniteui-angular/lib/core/styles/components/snackbar/snackbar-component'; @use 'igniteui-angular/lib/core/styles/components/snackbar/snackbar-theme'; // Import button component and theme styles @@ -25,15 +20,12 @@ @use 'igniteui-angular/lib/core/styles/components/button/button-theme'; // Import button-group component and theme styles -@use 'igniteui-angular/lib/core/styles/components/button-group/button-group-component'; @use 'igniteui-angular/lib/core/styles/components/button-group/button-group-theme'; // Import chip component and theme styles -@use 'igniteui-angular/lib/core/styles/components/chip/chip-component'; @use 'igniteui-angular/lib/core/styles/components/chip/chip-theme'; // Import badge component and theme styles -@use 'igniteui-angular/lib/core/styles/components/badge/badge-component'; @use 'igniteui-angular/lib/core/styles/components/badge/badge-theme'; // Define the primary colors diff --git a/src/app/theming/styles/themes.scss b/src/app/theming/styles/themes.scss index 9ab35163a..91311664d 100644 --- a/src/app/theming/styles/themes.scss +++ b/src/app/theming/styles/themes.scss @@ -1,7 +1,6 @@ @use 'schemas'; // Import grid component and theme styles -@use 'igniteui-angular/lib/core/styles/components/grid/grid-component'; @use 'igniteui-angular/lib/core/styles//components/grid/grid-theme'; // Import grid snackbar and theme styles @@ -33,23 +32,18 @@ @use 'igniteui-angular/lib/core/styles//components/drop-down/drop-down-theme'; // Import calendar component and theme styles -@use 'igniteui-angular/lib/core/styles/components/calendar/calendar-component'; @use 'igniteui-angular/lib/core/styles/components/calendar/calendar-theme'; // Import chip component and theme styles -@use 'igniteui-angular/lib/core/styles/components/chip/chip-component'; @use 'igniteui-angular/lib/core/styles/components/chip/chip-theme'; // Import icon component and theme styles -@use 'igniteui-angular/lib/core/styles/components/icon/icon-component'; @use 'igniteui-angular/lib/core/styles/components/icon/icon-theme'; // Import drop-down component and theme styles -@use 'igniteui-angular/lib/core/styles/components/drop-down/drop-down-component'; @use 'igniteui-angular/lib/core/styles/components/drop-down/drop-down-theme'; // Import badge component and theme styles -@use 'igniteui-angular/lib/core/styles/components/badge/badge-component'; @use 'igniteui-angular/lib/core/styles/components/badge/badge-theme'; diff --git a/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.scss b/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.scss index d15b41309..0532c5af1 100644 --- a/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.scss +++ b/src/app/tree-grid/tgrid-keyboard-guide/tgrid-keyboardnav-guide.component.scss @@ -8,7 +8,7 @@ $custom-checkbox-theme: checkbox-theme( ); .list-sample ::ng-deep { - @include checkbox($custom-checkbox-theme); + @include tokens($custom-checkbox-theme); } .sample { diff --git a/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.scss b/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.scss index c36c25d40..9c38781b8 100644 --- a/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.scss +++ b/src/app/tree-grid/tree-grid-paging-sample/tree-grid-paging-sample.component.scss @@ -6,7 +6,7 @@ $progressBar-sample-theme: progress-linear-theme( ); .grid__wrapper { - @include progress-linear($progressBar-sample-theme); + @include tokens($progressBar-sample-theme); --ig-size: var(--ig-size-medium); margin: 0 16px;