From 61f67ba2fca4b63c6ee437e0c35420e81a935061 Mon Sep 17 00:00:00 2001 From: didimmova Date: Mon, 6 Oct 2025 12:23:42 +0300 Subject: [PATCH 1/4] refactor(themes): move component themes to theming package --- .../action-strip/_action-strip-theme.scss | 58 ------------- .../grid/_pivot-data-selector-theme.scss | 28 ------- .../components/input/_file-input-theme.scss | 82 ------------------- 3 files changed, 168 deletions(-) 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 24389731a1d..962ca190429 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,34 +3,6 @@ @use '../../base' as *; @use '../../themes/schemas' as *; -//// -/// @group themes -/// @access public -/// @author Simeon Simeonoff -//// - -/// @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, - )); -} - /// @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. From 6145d4ebe73c8bd3413905c6206909287a527061 Mon Sep 17 00:00:00 2001 From: didimmova Date: Wed, 22 Oct 2025 09:43:05 +0300 Subject: [PATCH 2/4] chore(theming): bump theming version --- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 745a86ba320..bc6b6d7260e 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.0", + "igniteui-theming": "^22.0.0-beta.1", "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 ffd5149cc44..418edb6ee79 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.0", + "igniteui-theming": "^22.0.0-beta.1", "@igniteui/material-icons-extended": "^3.1.0" }, "peerDependencies": { From 54b15006169e0c0513491328ef2dcd49f9cdb191 Mon Sep 17 00:00:00 2001 From: didimmova Date: Wed, 22 Oct 2025 09:48:29 +0300 Subject: [PATCH 3/4] chore(theming): bump version --- package-lock.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5849e3ed253..6ef83711baa 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-beta.1", "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-beta.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-22.0.0-beta.1.tgz", + "integrity": "sha512-9+itoHayUT2h029KTxPqI8lG+JG6u2IgcrIbbml+4MWLzF8bRbPQQkGy9JAsOaRp2+FZUspSLh9kyyZCs3gr/g==", "license": "MIT" }, "node_modules/igniteui-trial-watermark": { From feace3b838218f8e9355fe11f8fdadfc8b6e372a Mon Sep 17 00:00:00 2001 From: Simeon Simeonoff Date: Thu, 23 Oct 2025 10:26:40 +0300 Subject: [PATCH 4/4] deps(theming): bump to latest version --- package-lock.json | 8 ++++---- package.json | 2 +- projects/igniteui-angular/package.json | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6ef83711baa..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": "^22.0.0-beta.1", + "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": "22.0.0-beta.1", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-22.0.0-beta.1.tgz", - "integrity": "sha512-9+itoHayUT2h029KTxPqI8lG+JG6u2IgcrIbbml+4MWLzF8bRbPQQkGy9JAsOaRp2+FZUspSLh9kyyZCs3gr/g==", + "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 a941b44f90f..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": "^22.0.0-beta.1", + "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 418edb6ee79..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": "^22.0.0-beta.1", + "igniteui-theming": "^22.0.0", "@igniteui/material-icons-extended": "^3.1.0" }, "peerDependencies": {