diff --git a/package-lock.json b/package-lock.json index 138f3c08f7c..f637858911b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,7 +25,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^20.0.0", + "igniteui-theming": "^21.0.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", @@ -70,7 +70,7 @@ "hammerjs": "^2.0.8", "ig-typedoc-theme": "^6.0.0", "igniteui-dockmanager": "^1.17.0", - "igniteui-sassdoc-theme": "^2.0.2", + "igniteui-sassdoc-theme": "^2.1.0", "igniteui-webcomponents": "6.2.1", "jasmine": "^5.6.0", "jasmine-core": "^5.6.0", @@ -13670,9 +13670,9 @@ "license": "Apache-2.0" }, "node_modules/igniteui-sassdoc-theme": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/igniteui-sassdoc-theme/-/igniteui-sassdoc-theme-2.0.2.tgz", - "integrity": "sha512-N+l1wPAYJZou60dE0f6UE5fFwfD4Yr0/LGYZVqfJ5eOvOP9+4Whv9LHT9AROfhJaA0a1+5STab50iL1+R7wgCg==", + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/igniteui-sassdoc-theme/-/igniteui-sassdoc-theme-2.1.0.tgz", + "integrity": "sha512-+g4AIUvyQIxUWI232ntVMFY/FIEjFdERA2sNb2Ls+oesy1CAUMUtIqml8p5n64gSvKpYInI2L4CvyGJihE7Ccg==", "dev": true, "license": "MIT", "dependencies": { @@ -13688,9 +13688,9 @@ } }, "node_modules/igniteui-theming": { - "version": "20.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-20.0.0.tgz", - "integrity": "sha512-g+pxAskmX1g0wlwaO0MPcT8sMTbr3rzSEOJRWg26FBKcVE09cxPEbX2Vl9k7LdbBc5VdDoiAgsI9yvZhAUM0Xg==", + "version": "21.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.0.tgz", + "integrity": "sha512-8yJi2zPUz0rRS5Ii+cB9pVY52uC1AxNlbl8XhCS7o8O/te+LWJnuz+zZw9dpkSHQP4USf8cp+bfpL7V9psX2FQ==", "license": "MIT" }, "node_modules/igniteui-trial-watermark": { diff --git a/package.json b/package.json index db833f8676f..745a86ba320 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^20.0.0", + "igniteui-theming": "^21.0.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", @@ -120,7 +120,7 @@ "hammerjs": "^2.0.8", "ig-typedoc-theme": "^6.0.0", "igniteui-dockmanager": "^1.17.0", - "igniteui-sassdoc-theme": "^2.0.2", + "igniteui-sassdoc-theme": "^2.1.0", "igniteui-webcomponents": "6.2.1", "jasmine": "^5.6.0", "jasmine-core": "^5.6.0", diff --git a/projects/igniteui-angular-elements/src/themes/_util.scss b/projects/igniteui-angular-elements/src/themes/_util.scss index 78b723451de..8668c7dfd4f 100644 --- a/projects/igniteui-angular-elements/src/themes/_util.scss +++ b/projects/igniteui-angular-elements/src/themes/_util.scss @@ -72,9 +72,8 @@ $elements-selector-prefix: 'igc'; /// @return {String} - Updated selector(s) with `igc-` prefixed equivalents @function updateSelectors($selector) { $result: (); - $selectors: string.split($selector, ", "); - @each $sel in $selectors { + @each $sel in $selector { $result: list.append($result, $sel, comma); @if string.index($sel, 'igx-') == 1 { diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index 894e9f0a680..ffd5149cc44 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -73,7 +73,7 @@ "tslib": "^2.3.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", - "igniteui-theming": "^20.0.0", + "igniteui-theming": "^21.0.0", "@igniteui/material-icons-extended": "^3.1.0" }, "peerDependencies": { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss index eb7e5faecc7..c01b4128d44 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/avatar/_avatar-theme.scss @@ -6,7 +6,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin avatar($theme) { - @include css-vars($theme, 'igx-avatar'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss index 02a91673ef0..2e82deb4545 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/badge/_badge-theme.scss @@ -5,7 +5,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin badge($theme) { - @include css-vars($theme, 'igx-badge'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss index 85eab0cc400..dfb88eff7af 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/banner/_banner-theme.scss @@ -5,7 +5,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin banner($theme) { - @include css-vars($theme, 'igx-banner, .igx-banner'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); %igx-banner-host { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss index ab862411b98..6f21583c88e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/bottom-nav/_bottom-nav-theme.scss @@ -6,7 +6,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin bottom-nav($theme) { - @include css-vars($theme, 'igx-bottom-nav'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); $menu-height: rem(56px); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss index 88a1fa99381..b942c0e20a8 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/button-group/_button-group-theme.scss @@ -6,7 +6,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin button-group($theme) { - @include css-vars($theme, 'igx-buttongroup'); + @include css-vars($theme); $group-item-border-thickness: rem(1px); $group-items-margin: rem(10px, 16px); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss index e1dcfd33250..14004190d7e 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/calendar/_calendar-theme.scss @@ -6,7 +6,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin calendar($theme) { - @include css-vars($theme, 'igx-calendar, .igx-days-view--standalone, .igx-calendar-view--standalone, .igx-date-picker, .igx-month-picker'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); $bootstrap-theme: $variant == 'bootstrap'; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss index ad98603220d..75a906b039f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/card/_card-theme.scss @@ -1,12 +1,11 @@ @use 'sass:map'; @use '../../base' as *; -/// Card Component /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin card($theme) { - @include css-vars($theme, 'igx-card'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); $not-material-theme: $variant != 'material'; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss index 47a43cf5d0a..e3b4e109b69 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/carousel/_carousel-theme.scss @@ -6,7 +6,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin carousel($theme) { - @include css-vars($theme, 'igx-carousel'); + @include css-vars($theme); @include scale-in-center(); @include scale-out-center(); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss index 65dbc507c8f..7b4cdd24724 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/checkbox/_checkbox-theme.scss @@ -7,7 +7,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin checkbox($theme) { - @include css-vars($theme, 'igx-checkbox'); + @include css-vars($theme); $theme-variant: map.get($theme, '_meta', 'variant'); $variant: map.get($theme, '_meta', 'theme'); $material-theme: $variant == 'material'; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss index 9eca06c9e60..e17b34ca090 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss @@ -6,7 +6,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin chip($theme) { - @include css-vars($theme, 'igx-chip, .igx-chip__ghost'); + @include css-vars($theme); $chip-max-width: 32ch; $variant: map.get($theme, '_meta', 'theme'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss index e232e7576fd..319f935d6b3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/column-actions/_column-actions-theme.scss @@ -5,7 +5,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin column-actions($theme) { - @include css-vars($theme, 'igx-column-actions'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); %column-actions-display { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss index c247a6c3fff..1eb5c643103 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss @@ -5,7 +5,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin combo($theme) { - @include css-vars($theme, 'igx-combo, igx-simple-combo'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss index f7dc255abdb..988b39fdde9 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/date-picker/_date-picker-theme.scss @@ -2,13 +2,6 @@ @use '../../base' as *; @use '../../themes/schemas' as *; -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The calendar theme used to style the component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss index 84ce5c56f44..5cd16765d30 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/date-range-picker/_date-range-picker-theme.scss @@ -5,7 +5,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin date-range-picker($theme) { - @include css-vars($theme, 'igx-date-range-picker'); + @include css-vars($theme); %igx-date-range-picker { display: flex; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss index c0b2a736f4e..e866e37f92b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/divider/_divider-theme.scss @@ -5,7 +5,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin divider($theme) { - @include css-vars($theme, 'igx-divider'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss index c8adb9e0b5a..de98af72230 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/dock-manager/_dock-manager-theme.scss @@ -5,7 +5,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin dock-manager($theme) { - @include css-vars($theme, 'igc-dockmanager'); + @include css-vars($theme); } /// Adds typography styles for the dock manager component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss index 20797fb7f57..fcc8daa06a4 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/expansion-panel/_expansion-panel-theme.scss @@ -6,7 +6,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin expansion-panel($theme) { - @include css-vars($theme, 'igx-expansion-panel'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); $panel-padding: pad-block(rem(16px)) pad-inline(rem(24px)); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss index d22d4a0ef0a..dcc63f3d22c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss @@ -5,7 +5,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin grid-toolbar($theme) { - @include css-vars($theme, 'igx-grid-toolbar, .igx-grid-toolbar__dd-list'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); $bootstrap-theme: $variant == 'bootstrap'; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss index 8ef846b74bd..44063a0fbaf 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss @@ -4,13 +4,6 @@ @use '../button-group/button-group-theme' as *; @use '../tree/tree-theme' as *; -//// -/// @group themes -/// @access private -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The grid theme used to style the component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss index 9d2b40109e8..d1f9b070cb3 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss @@ -18,8 +18,7 @@ /// @param {Map} $theme - The theme used to style the component. /// @requires {mixin} excel-filtering @mixin grid($theme) { - @include css-vars($theme, 'igx-grid, igx-hierarchical-grid, igx-pivot-grid, igx-tree-grid, igx-advanced-filtering-dialog, igx-grid-excel-style-filtering, .igx-excel-filter__secondary'); - + @include css-vars($theme); @include scale-in-ver-center(); $variant: map.get($theme, '_meta', 'theme'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss index 24389731a1d..25e17d6286b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/grid/_pivot-data-selector-theme.scss @@ -3,12 +3,8 @@ @use '../../base' as *; @use '../../themes/schemas' as *; -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -//// - +/// @deprecated Use the `css-vars` mixin instead. +/// @see {mixin} css-vars /// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. @function pivot-data-selector-theme( $schema: $light-material-schema, @@ -28,6 +24,7 @@ @return extend($theme, ( name: $name, + selector: $selector, )); } @@ -35,7 +32,8 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin pivot-data-selector($theme) { - @include css-vars($theme, 'igx-pivot-data-selector'); + @include css-vars($theme); + $variant: map.get($theme, '_meta', 'theme'); $chip-height-material: ( diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss index f694a84112f..c4181a79271 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/icon/_icon-theme.scss @@ -1,12 +1,12 @@ +// stylelint-disable font-family-no-missing-generic-family-keyword @use 'sass:map'; @use '../../base' as *; -// stylelint-disable font-family-no-missing-generic-family-keyword /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin icon($theme) { - @include css-vars($theme, 'igx-icon'); + @include css-vars($theme); $size: var-get($theme, 'size'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss index b4e35a6ec5e..2f84ee71e3d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss @@ -6,10 +6,10 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin input-group($theme) { + @include css-vars($theme); + // The --variant CSS produced by css-vars is needed also // when dynamically switching between the input `type` attribute. - @include css-vars($theme, 'igx-input-group, igx-date-range-start, igx-date-range-end'); - $variant: map.get($theme, '_meta', 'theme'); $transition-timing: .25s $out-cubic; $material-theme: $variant == 'material'; @@ -323,7 +323,7 @@ box-shadow: inset 0 0 0 var(--_fluent-input-border-size) var-get($theme, 'border-color'); } } - + &%form-group-display--box:not(%form-group-display--disabled) { %form-group-bundle { background: var-get($theme, 'box-background-focus'); @@ -1958,7 +1958,7 @@ } } - %form-group-display--invalid:not(%form-group-display--readonly), + %form-group-display--invalid:not(%form-group-display--readonly), %form-group-display--invalid%form-group-display--file { @if $variant != 'indigo' { %form-group-label--error, diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss index 1f4eda528e9..c439845c70d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss @@ -6,7 +6,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin list($theme) { - @include css-vars($theme, 'igx-list'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); $bootstrap-theme: $variant == 'bootstrap'; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss index 7be6c74e7ca..90bb814dd6d 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss @@ -6,7 +6,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin navbar($theme) { - @include css-vars($theme, 'igx-navbar'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); $navbar-padding: rem(16px); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss index f163450bd97..b3f91966295 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss @@ -6,7 +6,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin navdrawer($theme) { - @include css-vars($theme, 'igx-nav-drawer'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); $drawer-icon-size: rem(24px); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss index e25f6e678bb..5aeb1c6ed8b 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/paginator/_paginator-theme.scss @@ -5,7 +5,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin paginator($theme) { - @include css-vars($theme, 'igx-paginator'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss index fcad5269dc3..17c86b5e262 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/circular/_circular-theme.scss @@ -8,8 +8,7 @@ @mixin progress-circular($theme) { // Include rotate animation @include rotate-center(); - - @include css-vars($theme, 'igx-circular-bar'); + @include css-vars($theme); $animation-direction: normal; $animation-direction-rtl: reverse; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss index 8be3e00f3a0..b5e78dcea58 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/progress/linear/_linear-theme.scss @@ -52,7 +52,7 @@ $easing-curves: ( /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin progress-linear($theme) { - @include css-vars($theme, 'igx-linear-bar'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss index 836a2bd2255..4ca1970f5ee 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss @@ -1,18 +1,11 @@ @use 'sass:map'; @use '../../base' as *; -//// -/// @group themes -/// @access private -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The grid theme used to style the component. @mixin query-builder($theme) { - @include css-vars($theme, 'igx-query-builder'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); $theme-variant: map.get($theme, '_meta', 'variant'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss index 499757b6378..0edfd40c513 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/radio/_radio-theme.scss @@ -7,7 +7,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin radio($theme) { - @include css-vars($theme, 'igx-radio'); + @include css-vars($theme); @include scale-in-out($start-scale: .9); $theme-variant: map.get($theme, '_meta', 'variant'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss index be3cc7086e3..e6c2fa6b836 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss @@ -5,7 +5,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin select($theme) { - @include css-vars($theme, 'igx-select'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); %igx-select { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss index 88e5d624974..64de031b2ec 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/slider/_slider-theme.scss @@ -7,7 +7,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin slider($theme) { - @include css-vars($theme, 'igx-slider'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss index 2650063cb64..5a27bbedd05 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/snackbar/_snackbar-theme.scss @@ -6,7 +6,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin snackbar($theme) { - @include css-vars($theme, 'igx-snackbar'); + @include css-vars($theme); @include fade-in(); $variant: map.get($theme, '_meta', 'theme'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss index 1dc170aff65..b45a2f5b4a0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/splitter/_splitter-theme.scss @@ -7,7 +7,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin splitter($theme) { - @include css-vars($theme, 'igx-splitter'); + @include css-vars($theme); $splitter-color: var-get($theme, 'bar-color'); $hitbox-size: rem(4px); $debug-hitbox: false; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss index 73a0295ee53..329de693b52 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/stepper/_stepper-theme.scss @@ -5,7 +5,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin stepper($theme) { - @include css-vars($theme, 'igx-stepper'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss index 0b319ee3976..5f2285a090c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/switch/_switch-theme.scss @@ -7,7 +7,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin switch($theme) { - @include css-vars($theme, 'igx-switch'); + @include css-vars($theme); @include scale-in-out($start-scale: .9); $variant: map.get($theme, '_meta', 'theme'); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss index 93506cf22be..cf817cbca0c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tabs/_tabs-theme.scss @@ -11,7 +11,7 @@ /// @requires ripple-theme /// @requires {mixin} ripple @mixin tabs($theme) { - @include css-vars($theme, 'igx-tabs'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); $not-bootstrap-theme: $variant != 'bootstrap'; diff --git a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss index 158839435b2..355afdff3fc 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/toast/_toast-theme.scss @@ -1,12 +1,11 @@ @use 'sass:map'; @use '../../base' as *; -/// Toast Component /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin toast($theme) { - @include css-vars($theme, 'igx-toast'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); $width: rem(52px); diff --git a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss index f4025595796..6d4550ba331 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/tree/_tree-theme.scss @@ -5,7 +5,7 @@ /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. @mixin tree($theme) { - @include css-vars($theme, 'igx-tree-node'); + @include css-vars($theme); $variant: map.get($theme, '_meta', 'theme'); $indigo-theme: $variant == 'indigo'; diff --git a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss index 4954d18cfbc..894b2b030e0 100644 --- a/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss +++ b/projects/igniteui-angular/src/lib/core/styles/themes/_core.scss @@ -7,8 +7,7 @@ // Used to configure color accessibility for charts @use 'igniteui-theming/sass/color/functions' as color; -@use 'igniteui-theming/sass/themes/mixins' as theming; -@use 'igniteui-theming/sass/themes/components' as themes; +@use 'igniteui-theming/sass/themes' as theming; // Common components @use '../components/_common/igx-control'; @@ -92,7 +91,6 @@ $enhanced-accessibility: false ) { @include color.configure-colors($enhanced-accessibility); - @include themes.configure-prefix('igx'); // Angular hack for binding to [hidden] property // not working