diff --git a/package-lock.json b/package-lock.json index 5849e3ed253..58f2d088c33 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": "^21.0.2", + "igniteui-theming": "^22.0.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", @@ -13403,9 +13403,9 @@ } }, "node_modules/igniteui-theming": { - "version": "21.0.2", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-21.0.2.tgz", - "integrity": "sha512-RXs8b3PThVlS1FhLeUT9TlLMcPoNAiwJm/L+jHU7jrwsgZU7gGjipjEbQQRe97AURyTxgXKiC4M8CAuUilWQ2A==", + "version": "22.0.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-22.0.0.tgz", + "integrity": "sha512-usKRq5+XkChbcALOpAzfBMC5Bt8hYkkCVVrtNhnQqa3G7sjj2+Le2wTOHDRMIM8l6HbEoWR/XE7RiQuuMFBVKA==", "license": "MIT" }, "node_modules/igniteui-trial-watermark": { diff --git a/package.json b/package.json index 37449a322a4..169ead2725f 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": "^21.0.2", + "igniteui-theming": "^22.0.0", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index c051bc13e2e..c19d48e0eba 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": "^21.0.2", + "igniteui-theming": "^22.0.0", "@igniteui/material-icons-extended": "^3.1.0" }, "peerDependencies": { diff --git a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss index 78d97b80462..26c2c7dd010 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/action-strip/_action-strip-theme.scss @@ -2,64 +2,6 @@ @use '../../base' as *; @use '../../themes/schemas' as *; -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -/// @author Marin Popov -//// - -/// If only background color is specified, text/icon color will be assigned automatically to a contrasting color. -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// -/// @param {Color} $icon-color [null] - The color used for the actions icons. -/// @param {Color} $background [null] - The color used for the action strip component content background. -/// @param {Color} $actions-background [null] - The color used for the actions background. -/// @param {Color} $delete-action [null] - The color used for the delete icon in action strip component. -/// @param {List} $actions-border-radius [null] - The border radius used for actions container inside action strip component. -/// -/// @example scss Change the background and icon colors in action strip -/// $my-action-strip-theme: action-strip-theme($background: black); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-action-strip-theme); -@function action-strip-theme( - $schema: $light-material-schema, - - $background: null, - $actions-background: null, - $icon-color: null, - $delete-action: null, - $actions-border-radius: null, -) { - $name: 'igx-action-strip'; - $action-strip-schema: (); - - @if map.has-key($schema, 'action-strip') { - $action-strip-schema: map.get($schema, 'action-strip'); - } @else { - $action-strip-schema: $schema; - } - - $theme: digest-schema($action-strip-schema); - - @if not($icon-color) and $actions-background { - $icon-color: adaptive-contrast(var(--actions-background)); - } - - @if not($actions-border-radius) { - $actions-border-radius: map.get($theme, 'actions-border-radius'); - } - - @return extend($theme, ( - name: $name, - background: $background, - actions-background: $actions-background, - icon-color: $icon-color, - delete-action: $delete-action, - actions-border-radius: $actions-border-radius, - )); -} - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. 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 25e17d6286b..52d94dffac7 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,31 +3,6 @@ @use '../../base' as *; @use '../../themes/schemas' as *; -/// @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, - $background: null -) { - $name: 'igx-pivot-data-selector'; - $selector: '.igx-pivot-data-selector'; - $pivot-data-selector-schema: (); - - @if map.has-key($schema, 'pivot-data-selector') { - $pivot-data-selector-schema: map.get($schema, 'pivot-data-selector'); - } @else { - $pivot-data-selector-schema: $schema; - } - - $theme: digest-schema($pivot-data-selector-schema); - - @return extend($theme, ( - name: $name, - selector: $selector, - )); -} - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component. diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss index c722e7a819c..6c692aaf588 100644 --- a/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss +++ b/projects/igniteui-angular/src/lib/core/styles/components/input/_file-input-theme.scss @@ -4,88 +4,6 @@ @use '../../themes/schemas' as *; @use 'igniteui-theming/sass/animations/easings' as *; -//// -/// @group themes -/// @access public -//// - -/// @param {Map} $schema [$light-material-schema] - The schema used as basis for styling the component. -/// @param {Color} $file-names-background [null] - The file names container background color. -/// @param {Color} $file-names-background--focused [null] - The file names container background color when the file input is focused. -/// @param {Color} $file-names-background--filled [null] - The file names container background color when the file input is filled. -/// @param {Color} $file-names-background--disabled [null] - The file names container background color when the file input is disabled. -/// @param {Color} $file-names-foreground [null] - The file names color. -/// @param {Color} $file-names-foreground--focused [null] - The file names color when the file input is focused. -/// @param {Color} $file-names-foreground--filled [null] - The file names color when the file input is filled. -/// @param {Color} $file-names-foreground--disabled [null] - The file names color when the file input is disabled. -/// @param {Color} $file-selector-button-background [null] - The file input selector button background color. -/// @param {Color} $file-selector-button-background--focused [null] - The selector button background color when the file input is focused. -/// @param {Color} $file-selector-button-background--filled [null] - The selector button background color when the file input is filled. -/// @param {Color} $file-selector-button-background--disabled [null] - The selector button background color when the file input is disabled. -/// @param {Color} $file-selector-button-foreground [null] - The file input selector button foreground color. -/// @param {Color} $file-selector-button-foreground--focused [null] - The selector button foreground color when the file input is focused. -/// @param {Color} $file-selector-button-foreground--filled [null] - The selector button foreground color when the file input is filled. -/// @param {Color} $file-selector-button-foreground--disabled [null] - The selector button foreground color when the file input is disabled. -/// @example scss Change the focused border and label colors -/// $my-file-input-theme: file-input-theme($file-names-foreground: #09f); -/// // Pass the theme to the css-vars() mixin -/// @include css-vars($my-file-input-theme); -@function file-input-theme( - $schema: $light-material-schema, - $file-names-background: null, - $file-names-background--focused: null, - $file-names-background--filled: null, - $file-names-background--disabled: null, - $file-names-foreground: null, - $file-names-foreground--focused: null, - $file-names-foreground--filled: null, - $file-names-foreground--disabled: null, - - $file-selector-button-background: null, - $file-selector-button-background--focused: null, - $file-selector-button-background--filled: null, - $file-selector-button-background--disabled: null, - $file-selector-button-foreground: null, - $file-selector-button-foreground--focused: null, - $file-selector-button-foreground--filled: null, - $file-selector-button-foreground--disabled: null, -) { - $name: 'igx-file-input'; - $file-input-schema: (); - - @if map.has-key($schema, 'file-input') { - $file-input-schema: map.get($schema, 'file-input'); - } @else { - $file-input-schema: $schema; - } - - $theme: digest-schema($file-input-schema); - - @return extend( - $theme, - ( - name: $name, - file-names-background: $file-names-background, - file-names-background--focused: $file-names-background--focused, - file-names-background--filled: $file-names-background--filled, - file-names-background--disabled: $file-names-background--disabled, - file-names-foreground: $file-names-foreground, - file-names-foreground--focused: $file-names-foreground--focused, - file-names-foreground--filled: $file-names-foreground--filled, - file-names-foreground--disabled: $file-names-foreground--disabled, - - file-selector-button-background: $file-selector-button-background, - file-selector-button-background--focused: $file-selector-button-background--focused, - file-selector-button-background--filled: $file-selector-button-background--filled, - file-selector-button-background--disabled: $file-selector-button-background--disabled, - file-selector-button-foreground: $file-selector-button-foreground, - file-selector-button-foreground--focused: $file-selector-button-foreground--focused, - file-selector-button-foreground--filled: $file-selector-button-foreground--filled, - file-selector-button-foreground--disabled: $file-selector-button-foreground--disabled, - ), - ); -} - /// @deprecated Use the `css-vars` mixin instead. /// @see {mixin} css-vars /// @param {Map} $theme - The theme used to style the component.