diff --git a/package-lock.json b/package-lock.json index 95f69ce683b..b6008d830d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "express": "^5.2.1", "fflate": "^0.8.1", "igniteui-i18n-core": "^1.0.2", - "igniteui-theming": "^25.0.3", + "igniteui-theming": "^25.2.0", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", @@ -3814,6 +3814,7 @@ "version": "1.26.0", "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.26.0.tgz", "integrity": "sha512-Y5RmPncpiDtTXDbLKswIJzTqu2hyBKxTNsgKqKclDbhIgg1wgtf1fRuvxgTnRfcnxtvvgbIEcqUOzZrJ6iSReg==", + "dev": true, "license": "MIT", "dependencies": { "@hono/node-server": "^1.19.9", @@ -3854,6 +3855,7 @@ "version": "3.0.7", "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz", "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==", + "dev": true, "license": "MIT", "dependencies": { "eventsource-parser": "^3.0.1" @@ -14053,12 +14055,12 @@ } }, "node_modules/igniteui-theming": { - "version": "25.0.3", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-25.0.3.tgz", - "integrity": "sha512-Lq6NusLS6zOjL1E/5942+UNrvf4goeQlVb9XcCSzk7rMyA9Q6ybf9ltLHAag8O/vsIjMsr9FxJaJV3mTYErXzg==", + "version": "25.2.0", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-25.2.0.tgz", + "integrity": "sha512-bXRN379/vL05cDQl12jLABXALo+cXdD9zeYTlwURoEq1GrCkriYQnSqgwWmD/UdN/9Jc2MaMbsuXuYRZq5F71w==", "license": "MIT", "dependencies": { - "@modelcontextprotocol/sdk": "^1.25.0", + "@modelcontextprotocol/sdk": "^1.28.0", "sass-embedded": "~1.92.1", "zod": "^3.25.76" }, @@ -14066,6 +14068,46 @@ "igniteui-theming-mcp": "dist/mcp/index.js" } }, + "node_modules/igniteui-theming/node_modules/@modelcontextprotocol/sdk": { + "version": "1.29.0", + "resolved": "https://registry.npmjs.org/@modelcontextprotocol/sdk/-/sdk-1.29.0.tgz", + "integrity": "sha512-zo37mZA9hJWpULgkRpowewez1y6ML5GsXJPY8FI0tBBCd77HEvza4jDqRKOXgHNn867PVGCyTdzqpz0izu5ZjQ==", + "license": "MIT", + "dependencies": { + "@hono/node-server": "^1.19.9", + "ajv": "^8.17.1", + "ajv-formats": "^3.0.1", + "content-type": "^1.0.5", + "cors": "^2.8.5", + "cross-spawn": "^7.0.5", + "eventsource": "^3.0.2", + "eventsource-parser": "^3.0.0", + "express": "^5.2.1", + "express-rate-limit": "^8.2.1", + "hono": "^4.11.4", + "jose": "^6.1.3", + "json-schema-typed": "^8.0.2", + "pkce-challenge": "^5.0.0", + "raw-body": "^3.0.0", + "zod": "^3.25 || ^4.0", + "zod-to-json-schema": "^3.25.1" + }, + "engines": { + "node": ">=18" + }, + "peerDependencies": { + "@cfworker/json-schema": "^4.1.1", + "zod": "^3.25 || ^4.0" + }, + "peerDependenciesMeta": { + "@cfworker/json-schema": { + "optional": true + }, + "zod": { + "optional": false + } + } + }, "node_modules/igniteui-theming/node_modules/chokidar": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz", @@ -14082,6 +14124,18 @@ "url": "https://paulmillr.com/funding/" } }, + "node_modules/igniteui-theming/node_modules/eventsource": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-3.0.7.tgz", + "integrity": "sha512-CRT1WTyuQoD771GW56XEZFQ/ZoSfWid1alKGDYMmkt2yl8UXrVR4pspqWNEcqKvVIzg6PAltWjxcSSPrboA4iA==", + "license": "MIT", + "dependencies": { + "eventsource-parser": "^3.0.1" + }, + "engines": { + "node": ">=18.0.0" + } + }, "node_modules/igniteui-theming/node_modules/readdirp": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz", diff --git a/package.json b/package.json index ea5b4c84fe6..0fb8e27299a 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "express": "^5.2.1", "fflate": "^0.8.1", "igniteui-i18n-core": "^1.0.2", - "igniteui-theming": "^25.0.3", + "igniteui-theming": "^25.2.0", "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", diff --git a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss index 1cd13a4877e..dfeab6925fd 100644 --- a/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss +++ b/projects/igniteui-angular/core/src/core/styles/components/button-group/_button-group-theme.scss @@ -13,8 +13,6 @@ $outline-btn-indent: rem(2px); $variant: map.get($theme, '_meta', 'theme'); - $bootstrap-theme: $variant == 'bootstrap'; - $indigo-theme: $variant == 'indigo'; $group-item-min-width: map.get(( 'material': rem(42px), 'fluent': rem(42px), @@ -22,18 +20,6 @@ 'indigo': rem(32px), ), $variant); - %item-overlay { - &::before { - content: ''; - z-index: -1; - position: absolute; - pointer-events: none; - width: 100%; - height: 100%; - background: var-get($theme, 'item-focused-background'); - } - } - %igx-group-display { display: flex; box-shadow: var-get($theme, 'elevation'); @@ -72,7 +58,11 @@ } &:not(:nth-child(1)) { - margin-inline-start: rem(-1px); + @if $variant != 'fluent' { + margin-inline-start: rem(-1px); + } @else { + border-inline-start: 0; + } } &:first-of-type { @@ -95,47 +85,25 @@ } } - &:hover { + &:hover, + &:active { color: var-get($theme, 'item-hover-text-color'); - background: var-get($theme, 'item-hover-background'); - border-color: var-get($theme, 'item-hover-border-color'); igx-icon { color: var-get($theme, 'item-hover-icon-color'); } } - @if $variant != 'fluent' { - &:active { - color: var-get($theme, 'item-hover-text-color'); - background: var-get($theme, 'item-hover-background'); - border-color: var-get($theme, 'item-hover-border-color'); - - igx-icon { - color: var-get($theme, 'item-hover-icon-color'); - } - } + &:hover { + z-index: 1; + background: var-get($theme, 'item-hover-background'); + border-color: var-get($theme, 'item-hover-border-color'); } - @if $variant == 'material' { - &:hover, - &:active { - @extend %item-overlay; - - background: var-get($theme, 'item-background'); - } - - &:hover { - &::before { - background: var-get($theme, 'item-hover-background'); - } - } - } - - @if $variant == 'bootstrap' { - &:active { - @extend %item-overlay; - } + &:active { + z-index: 2; + background: var-get($theme, 'item-active-background'); + border-color: var-get($theme, 'item-active-border-color'); } @if $variant == 'fluent' { @@ -144,11 +112,6 @@ --ig-icon-size: #{$icon-size}; } - - &:active { - background: var-get($theme, 'item-focused-background'); - color: var-get($theme, 'item-text-color'); - } } @if $variant == 'indigo' { @@ -159,93 +122,28 @@ --ig-icon-size: #{$icon-size}; } - - &:hover { - border-color: var-get($theme, 'item-hover-border-color'); - z-index: 1; - } - - &:active { - color: var-get($theme, 'item-hover-text-color'); - background: var-get($theme, 'item-hover-background'); - border-color: var-get($theme, 'item-hover-border-color'); - z-index: 2; - } } &[igxButton].igx-button--focused { - &:hover { - color: var-get($theme, 'item-hover-text-color'); - background: var-get($theme, 'item-hover-background'); - - igx-icon { - color: var-get($theme, 'item-hover-icon-color'); - } - } - - @if $variant != 'fluent' { - color: var-get($theme, 'item-hover-text-color'); - background: var-get($theme, 'item-hover-background'); - border-color: var-get($theme, 'item-hover-border-color'); - - igx-icon { - color: var-get($theme, 'item-hover-icon-color'); - } - } - - @if $variant == 'material' { - @extend %item-overlay; - - background: var-get($theme, 'item-background'); - - &::before { - background: var-get($theme, 'item-hover-background'); - } - - &:hover { - background: var-get($theme, 'item-background'); - - &::before { - background: var-get($theme, 'item-focused-hover-background'); - } - } - - &:active { - background: var-get($theme, 'item-background'); - color: var-get($theme, 'item-hover-text-color'); - - igx-icon { - color: var-get($theme, 'item-hover-icon-color'); - } + z-index: 2; + color: var-get($theme, 'item-focused-text-color'); + background: var-get($theme, 'item-focused-background'); + border-color: var-get($theme, 'item-focused-border-color'); - &::before { - background: var-get($theme, 'item-focused-background'); - } + igx-icon { + @if $variant == 'indigo' { + color: var-get($theme, 'item-icon-color'); + } @else { + color: var-get($theme, 'item-focused-text-color'); } } @if $variant == 'bootstrap' { - background: var-get($theme, 'item-background'); - z-index: 1; box-shadow: 0 0 0 rem(4px) var-get($theme, 'idle-shadow-color'); - - &:active { - background: var-get($theme, 'item-hover-background'); - color: var-get($theme, 'item-hover-text-color'); - - igx-icon { - color: var-get($theme, 'item-hover-icon-color'); - } - } } @if $variant == 'fluent' { - background: var-get($theme, 'item-background'); - color: var-get($theme, 'item-text-color'); - - igx-icon { - color: var-get($theme, 'item-icon-color'); - } + border-color: var-get($theme, 'item-border-color'); &::after { content: ''; @@ -257,37 +155,36 @@ height: calc(100% - (#{$outline-btn-indent} * 2)); box-shadow: 0 0 0 rem(1px) var-get($theme, 'item-focused-border-color'); } - - &:active { - background: var-get($theme, 'item-focused-background'); - } } @if $variant == 'indigo' { - color: var-get($theme, 'item-focused-text-color'); - background: var-get($theme, 'item-focused-background'); - border-color: var-get($theme, 'item-focused-border-color'); box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color'); - z-index: 2; + } - igx-icon { - color: var-get($theme, 'item-icon-color'); - } + &:hover, + &:active { + color: var-get($theme, 'item-focused-hover-text-color'); - &:hover { - border-color: var-get($theme, 'item-hover-border-color'); + igx-icon { + color: var-get($theme, 'item-focused-hover-text-color'); } - &:active { - color: var-get($theme, 'item-hover-text-color'); - background: var-get($theme, 'item-hover-background'); - border-color: var-get($theme, 'item-hover-border-color'); - + @if $variant == 'indigo' { igx-icon { color: var-get($theme, 'item-hover-icon-color'); } } } + + &:hover { + background: var-get($theme, 'item-focused-hover-background'); + border-color: var-get($theme, 'item-focused-hover-border-color'); + } + + &:active { + background: var-get($theme, 'item-active-background'); + border-color: var-get($theme, 'item-active-border-color'); + } } } @@ -313,11 +210,11 @@ } %igx-group-item-selected { + z-index: 2; color: var-get($theme, 'item-selected-text-color'); background: var-get($theme, 'item-selected-background'); border-color: var-get($theme, 'item-selected-border-color'); position: relative; - z-index: 1; &[igxButton] { border-color: var-get($theme, 'item-selected-border-color'); @@ -327,229 +224,86 @@ color: var-get($theme, 'item-selected-icon-color'); } - &:hover { - border-color: var-get($theme, 'item-selected-hover-border-color'); + &:hover, + &:active { color: var-get($theme, 'item-selected-hover-text-color'); - background: var-get($theme, 'item-selected-hover-background'); igx-icon { color: var-get($theme, 'item-selected-hover-icon-color'); } } - @if $variant == 'material' { - &:hover { - @extend %item-overlay; - - background: var-get($theme, 'item-selected-background'); - - &::before { - background: var-get($theme, 'item-selected-hover-background'); - } - } - - &:active { - @extend %item-overlay; - - color: var-get($theme, 'item-selected-hover-text-color'); - background: var-get($theme, 'item-selected-background'); - border-color: var-get($theme, 'item-selected-border-color'); - - igx-icon { - color: var-get($theme, 'item-selected-hover-icon-color'); - } - - &::before { - background: var-get($theme, 'item-selected-focus-background'); - } - } - } - - @if $variant == 'bootstrap' { - &:active { - @extend %item-overlay; - - color: var-get($theme, 'item-selected-text-color'); - border-color: var-get($theme, 'item-selected-border-color'); - background: var-get($theme, 'item-selected-hover-background'); - - &::before { - background: var-get($theme, 'item-selected-focus-background'); - } - } - } - - @if $variant == 'fluent' { - &:hover { - background: var-get($theme, 'item-selected-background'); - color: var-get($theme, 'item-selected-text-color'); - - @extend %item-overlay; - - &::before { - background: var-get($theme, 'item-selected-hover-background'); - } - } - - &:active { - background: var-get($theme, 'item-selected-focus-background'); - color: var-get($theme, 'item-selected-text-color'); - - igx-icon { - color: var-get($theme, 'item-selected-icon-color'); - } - } + &:hover { + border-color: var-get($theme, 'item-selected-hover-border-color'); + background: var-get($theme, 'item-selected-hover-background'); } - @if $variant == 'indigo' { - &:active { - background: var-get($theme, 'item-selected-hover-background'); - color: var-get($theme, 'item-selected-hover-text-color'); - border-color: var-get($theme, 'item-selected-hover-border-color'); - - igx-icon { - color: var-get($theme, 'item-selected-hover-icon-color'); - } - } + &:active { + border-color: var-get($theme, 'item-selected-active-border-color'); + background: var-get($theme, 'item-selected-active-background'); } &[igxButton].igx-button--focused { - @if $variant != 'fluent' { - &:hover { - color: var-get($theme, 'item-selected-hover-text-color'); - background: var-get($theme, 'item-selected-hover-background'); - border-color: var-get($theme, 'item-selected-hover-border-color'); - } - - &:active { - background: var-get($theme, 'item-selected-hover-background'); - color: var-get($theme, 'item-selected-hover-text-color'); - - &::before { - background: var-get($theme, 'item-selected-focus-background'); - } - - igx-icon { - color: var-get($theme, 'item-selected-hover-icon-color'); - } - } - } - - @if $variant == 'material' or $variant == 'fluent' { - &:hover { - @extend %item-overlay; + background: var-get($theme, 'item-selected-focus-background'); + border-color: var-get($theme, 'item-selected-hover-border-color'); + color: var-get($theme, 'item-selected-text-color'); - &::before { - background: var-get($theme, 'item-selected-focus-hover-background'); - } - } + igx-icon { + color: var-get($theme, 'item-selected-icon-color'); } @if $variant == 'material' { - background: var-get($theme, 'item-selected-background'); color: var-get($theme, 'item-selected-hover-text-color'); - border-color: var-get($theme, 'item-selected-hover-border-color'); - - &::before { - background: var-get($theme, 'item-selected-hover-background'); - } igx-icon { color: var-get($theme, 'item-selected-hover-icon-color'); } + } - &:hover { - background: var-get($theme, 'item-selected-background'); - - igx-icon { - color: var-get($theme, 'item-selected-hover-icon-color'); - } - } - - &:active { - background: var-get($theme, 'item-selected-background'); - } + @if $variant == 'indigo' { + border-color: var-get($theme, 'item-selected-border-color'); + box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color'); } @if $variant == 'bootstrap' { - color: var-get($theme, 'item-selected-text-color'); - border-color: var-get($theme, 'item-selected-border-color'); - background: var-get($theme, 'item-selected-background'); box-shadow: 0 0 0 rem(4px) var-get($theme, 'selected-shadow-color'); - - igx-icon { - color: var-get($theme, 'item-selected-icon-color'); - } } - @if $variant == 'fluent' { - background: var-get($theme, 'item-selected-background'); - color: var-get($theme, 'item-selected-text-color'); + &:hover, + &:active { + color: var-get($theme, 'item-selected-hover-text-color'); igx-icon { - color: var-get($theme, 'item-selected-icon-color'); - } - - &:hover { - background: var-get($theme, 'item-selected-background'); - color: var-get($theme, 'item-selected-text-color'); - - igx-icon { - color: var-get($theme, 'item-selected-hover-icon-color'); - } + color: var-get($theme, 'item-selected-hover-icon-color'); } - &:active { - background: var-get($theme, 'item-selected-focus-background'); + @if $variant == 'indigo' { + border-color: var-get($theme, 'item-selected-hover-border-color'); } } - @if $variant == 'indigo' { - box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color'); + &:hover { + background: var-get($theme, 'item-selected-focus-hover-background'); border-color: var-get($theme, 'item-selected-border-color'); - background: var-get($theme, 'item-selected-background'); - color: var-get($theme, 'item-selected-text-color'); - - igx-icon { - color: var-get($theme, 'item-selected-icon-color'); - } - - &:hover, - &:active { - border-color: var-get($theme, 'item-selected-hover-border-color'); + } - igx-icon { - color: var-get($theme, 'item-selected-hover-icon-color'); - } - } + &:active { + border-color: var-get($theme, 'item-selected-active-border-color'); + background: var-get($theme, 'item-selected-active-background'); } } &[igxButton][disabled='true'] { - position: relative; - - &::before { - position: absolute; - content: ''; - top: 0; - bottom: 0; - inset-inline-end: 0; - inset-inline-start: 0; - background: var-get($theme, 'disabled-selected-background'); + color: var-get($theme, 'disabled-selected-text-color'); + background: var-get($theme, 'disabled-selected-background'); + border-color: var-get($theme, 'disabled-selected-border-color'); + + igx-icon { + color: var-get($theme, 'disabled-selected-icon-color'); } @if $variant == 'indigo' { - color: var-get($theme, 'disabled-selected-text-color'); - background: var-get($theme, 'disabled-selected-background'); border: none; - - igx-icon { - color: var-get($theme, 'disabled-selected-icon-color'); - } - - &::before { - display: none; - } } } } diff --git a/projects/igniteui-angular/package.json b/projects/igniteui-angular/package.json index c6cb25e48fe..14bc9be87cb 100644 --- a/projects/igniteui-angular/package.json +++ b/projects/igniteui-angular/package.json @@ -75,7 +75,7 @@ "igniteui-trial-watermark": "^3.1.0", "jspdf": "^4.2.1", "lodash-es": "^4.17.21", - "igniteui-theming": "^25.0.0", + "igniteui-theming": "^25.2.0", "igniteui-i18n-core": "^1.0.2", "@igniteui/material-icons-extended": "^3.1.0" },