diff --git a/package-lock.json b/package-lock.json index eafaf2b2a5e..653db7f05ea 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": "^23.0.0", + "igniteui-theming": "^24.0.1", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", @@ -13567,9 +13567,9 @@ } }, "node_modules/igniteui-theming": { - "version": "23.0.0", - "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-23.0.0.tgz", - "integrity": "sha512-r3R06q0pK/P32lEIgjcml4t4ppfy80RVIl8VSnyCIg1WOEhAQmaPOioJJhID6K7iAwz4zlOGJXsP6SFeDb+gyA==", + "version": "24.0.1", + "resolved": "https://registry.npmjs.org/igniteui-theming/-/igniteui-theming-24.0.1.tgz", + "integrity": "sha512-unpW2kFk9EV6NNqDJZmIjuPtkZwA/OakKb7gGcxZyxoTRAAQc9FbuZ7j0Am1xdAd5MjIEyThuOAcHNhJVcY0QQ==", "license": "MIT" }, "node_modules/igniteui-trial-watermark": { diff --git a/package.json b/package.json index 26a20299fe4..529941e3518 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "@types/source-map": "0.5.2", "express": "^5.1.0", "fflate": "^0.8.1", - "igniteui-theming": "^23.0.0", + "igniteui-theming": "^24.0.1", "igniteui-trial-watermark": "^3.1.0", "lodash-es": "^4.17.21", "rxjs": "^7.8.2", diff --git a/projects/igniteui-angular/src/lib/card/themes/_base.scss b/projects/igniteui-angular/src/lib/card/themes/_base.scss index e2be0465e76..6f21514ff78 100644 --- a/projects/igniteui-angular/src/lib/card/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/card/themes/_base.scss @@ -90,9 +90,9 @@ $theme: $material; @include b(igx-card-header) { display: flex; flex-flow: row wrap; - align-content: flex-start; + align-items: center; width: 100%; - padding: rem(16px, 16px); + padding: rem(16px); color: var-get($theme, 'header-text-color'); &:empty { @@ -101,7 +101,6 @@ $theme: $material; } @include e(thumbnail) { - align-self: flex-start; margin-inline-end: rem(16px); &:empty { @@ -155,7 +154,7 @@ $theme: $material; flex-flow: row wrap; justify-content: space-between; align-items: center; - padding: rem(8px); + padding: rem(8px) rem(16px); &:first-child { margin-block-end: auto; diff --git a/projects/igniteui-angular/src/lib/card/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/card/themes/shared/_bootstrap.scss index 5cf634d55ce..2a3e9aab81f 100644 --- a/projects/igniteui-angular/src/lib/card/themes/shared/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/card/themes/shared/_bootstrap.scss @@ -24,7 +24,7 @@ @include themed-block(igx-card-content, bootstrap) { padding-block: rem(16px) rem(24px); - padding-inline: rem(24px); + padding-inline: rem(16px); > *:not(igx-icon) { @include type-style(body-1) { diff --git a/projects/igniteui-angular/src/lib/card/themes/shared/_fluent.scss b/projects/igniteui-angular/src/lib/card/themes/shared/_fluent.scss index 1cc72e08300..8c1652d0a18 100644 --- a/projects/igniteui-angular/src/lib/card/themes/shared/_fluent.scss +++ b/projects/igniteui-angular/src/lib/card/themes/shared/_fluent.scss @@ -3,8 +3,6 @@ @use 'styles/themes/standalone' as *; @include themed-block(igx-card-header, fluent) { - padding: rem(16px) rem(8px); - @include e(title) { @include type-style(subtitle-1) { margin: 0; diff --git a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss index 584fe3b047e..a06541ad757 100644 --- a/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss +++ b/projects/igniteui-angular/src/lib/checkbox/themes/shared/_indigo.scss @@ -31,16 +31,13 @@ $_theme: $indigo; } } - @include e(label) { - @include type-style(body-2); - transition: color 0.2s $ease-out-quad; - transition-delay: var(--_transition-delay); - } - @include e(label) { @include type-style(body-2) { margin-block: 0; } + + transition: color 0.2s $ease-out-quad; + transition-delay: var(--_transition-delay); } @include m(checked) { diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss index 13e6931d3be..a914c15ea23 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_bootstrap.scss @@ -54,18 +54,18 @@ // subtitle: 'body-1', // content: 'body-1', // )); - @include checkbox-typography($categories: ( - label: 'body-1', - )); + // @include checkbox-typography($categories: ( + // label: 'body-1', + // )); // @include chip-typography(); // @include column-actions-typography(); // @include date-range-typography($categories: ( // label: 'body-1', // )); - @include dialog-typography($categories: ( - title: 'h5', - content: 'body-1' - )); + // @include dialog-typography($categories: ( + // title: 'h5', + // content: 'body-1' + // )); @include dock-manager-typography(); // @include drop-down-typography($categories: ( // header: 'overline', @@ -79,35 +79,35 @@ // )); @include excel-filtering-typography(); @include icon-button-typography(); - //@include input-group-typography($categories: ( + // @include input-group-typography($categories: ( // helper-text: 'body-2', // input-text: 'body-1' - //)); + // )); @include file-input-typography($categories: ( file-text: 'body-1' )); - @include linear-bar-typography(); + // @include linear-bar-typography(); // @include list-typography($categories: ( // item: 'body-2', // title: 'body-1', // subtitle: 'body-2', // header: 'overline', // )); - @include navbar-typography($categories: ( - title: 'h5' - )); + // @include navbar-typography($categories: ( + // title: 'h5' + // )); // @include navdrawer-typography($categories: ( // item: 'body-2', // header: 'caption' // )); - @include radio-typography($categories: ( - label: 'body-1' - )); + // @include radio-typography($categories: ( + // label: 'body-1' + // )); // @include slider-typography(); - @include snackbar-typography(); - @include switch-typography($categories: ( - label: 'body-1' - )); + // @include snackbar-typography(); + // @include switch-typography($categories: ( + // label: 'body-1' + // )); //@include tabs-typography(); // @include time-picker-typography($categories: ( // header-hour: 'h4', diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss index c31af39384b..2406ef46d3c 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_fluent.scss @@ -42,31 +42,31 @@ // @include bottom-nav-typography(); @include button-typography(); // @include button-group-typography(); - //@include calendar-typography($categories: ( + // @include calendar-typography($categories: ( // header-year: 'overline', // header-date: 'h4', // weekday-label: 'body-1', // picker-date: 'subtitle-2', // content: 'body-1', - //)); + // )); // @include card-typography($categories: ( // title: 'subtitle-1', // title-small: 'subtitle-2', // subtitle: 'body-2', // content: 'body-2' // )); - @include checkbox-typography($categories: ( - label: 'body-2' - )); + // @include checkbox-typography($categories: ( + // label: 'body-2' + // )); // @include chip-typography($categories: ( // text: 'subtitle-2' // )); // @include column-actions-typography(); // @include date-range-typography(); - @include dialog-typography($categories: ( - title: 'h6', - content: 'body-2' - )); + // @include dialog-typography($categories: ( + // title: 'h6', + // content: 'body-2' + // )); @include dock-manager-typography(); // @include drop-down-typography($categories: ( // header: 'subtitle-2', @@ -80,42 +80,42 @@ // )); @include excel-filtering-typography(); @include icon-button-typography(); - //@include input-group-typography($categories: ( + // @include input-group-typography($categories: ( // helper-text: 'caption', // input-text: 'body-2' - //)); + // )); @include file-input-typography($categories: ( file-text: 'body-2' )); - @include linear-bar-typography(); + // @include linear-bar-typography(); // @include list-typography($categories: ( // header: 'overline', // item: 'caption', // title: 'caption', // subtitle: 'caption' // )); - @include navbar-typography($categories: ( - title: 'subtitle-2' - )); + // @include navbar-typography($categories: ( + // title: 'subtitle-2' + // )); // @include navdrawer-typography($categories: ( // item: 'body-2', // header: 'subtitle-1' // )); - @include radio-typography($categories: ( - label: 'body-2' - )); + // @include radio-typography($categories: ( + // label: 'body-2' + // )); // @include slider-typography(); // @include snackbar-typography($categories: ( // text: 'caption' // )); - @include switch-typography($categories: ( - label: 'body-2' - )); - //@include tabs-typography($categories: ( + // @include switch-typography($categories: ( + // label: 'body-2' + // )); + // @include tabs-typography($categories: ( // label: 'body-2' - //)); + // )); // @include time-picker-typography(); - //@include stepper-typography(); + // @include stepper-typography(); // @include toast-typography($categories: ( // text: 'caption' // )); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss index b6b40739d73..2978e22e39f 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_indigo.scss @@ -42,28 +42,28 @@ // @include button-group-typography($categories: ( // text: 'body-2', // )); - //@include calendar-typography($categories: ( + // @include calendar-typography($categories: ( // header-year: 'body-2', // header-date: 'h5', // weekday-label: 'body-2', // picker-date: 'subtitle-2', - //)); + // )); // @include card-typography($categories: ( // title: 'h6', // title-small: 'body-2', // subtitle: 'body-2', // content: 'body-2' // )); - @include checkbox-typography($categories: ( - label: 'body-2', - )); + // @include checkbox-typography($categories: ( + // label: 'body-2', + // )); // @include chip-typography(); // @include column-actions-typography(); // @include date-range-typography(); - @include dialog-typography($categories: ( - title: 'h5', - content: 'body-1', - )); + // @include dialog-typography($categories: ( + // title: 'h5', + // content: 'body-1', + // )); @include dock-manager-typography(); // @include drop-down-typography(); // @include expansion-panel-typography($categories: ( @@ -80,52 +80,51 @@ @include file-input-typography($categories: ( file-text: 'body-2' )); - - @include linear-bar-typography(); + // @include linear-bar-typography(); // @include list-typography($categories: ( // header: 'overline', // item: 'body-2', // title: 'body-2', // subtitle: 'body-2' // )); - @include navbar-typography($categories: ( - title: 'h5', - )); + // @include navbar-typography($categories: ( + // title: 'h5', + // )); // @include navdrawer-typography($categories: ( // item: 'subtitle-2', // header: 'overline' // )); - @include radio-typography($categories: ( - label: 'body-2' - )); + // @include radio-typography($categories: ( + // label: 'body-2' + // )); // @include slider-typography($categories: ( // ticks-label: 'body-2', // thumb-label: 'subtitle-2', // )); // @include snackbar-typography(); - @include switch-typography($categories: ( - label: 'body-2' - )); - //@include tabs-typography($categories: ( + // @include switch-typography($categories: ( + // label: 'body-2' + // )); + // @include tabs-typography($categories: ( // label: 'subtitle-2', - //)) { + // )) { // --ig-subtitle-2-text-transform: uppercase; - //}; + // }; // @include time-picker-typography($categories: ( // header-hour: 'h5', // selected-time: 'h6' // )); - //@include stepper-typography($categories: ( + // @include stepper-typography($categories: ( // title: 'body-2', // subtitle: 'caption', // indicator: 'button', // body-content: 'body-2' - //)); + // )); // @include toast-typography(); @include tooltip-typography($categories: ( tooltip-text: 'subtitle-2' )); - //@include tree-typography(); + // @include tree-typography(); @include label-typography($categories: ( label: 'caption' )); diff --git a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss index 98020dd09bd..0135d721a77 100644 --- a/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss +++ b/projects/igniteui-angular/src/lib/core/styles/typography/_material.scss @@ -40,33 +40,33 @@ // @include bottom-nav-typography(); @include button-typography(); // @include button-group-typography(); - //@include calendar-typography(); + // @include calendar-typography(); // @include card-typography(); - @include checkbox-typography(); + // @include checkbox-typography(); // @include chip-typography(); // @include column-actions-typography(); // @include date-range-typography(); - @include dialog-typography(); + // @include dialog-typography(); @include dock-manager-typography(); // @include drop-down-typography(); // @include expansion-panel-typography(); @include excel-filtering-typography(); @include icon-button-typography(); - //@include input-group-typography(); - @include linear-bar-typography(); + // @include input-group-typography(); + // @include linear-bar-typography(); // @include list-typography(); - @include navbar-typography(); + // @include navbar-typography(); // @include navdrawer-typography(); - @include radio-typography(); + // @include radio-typography(); // @include slider-typography(); // @include snackbar-typography(); - @include switch-typography(); - //@include tabs-typography(); + // @include switch-typography(); + // @include tabs-typography(); // @include time-picker-typography(); - //@include stepper-typography(); + // @include stepper-typography(); // @include toast-typography(); @include tooltip-typography(); - //@include tree-typography(); + // @include tree-typography(); @include label-typography(); @include query-builder-typography(); @include file-input-typography(); diff --git a/projects/igniteui-angular/src/lib/dialog/themes/_base.scss b/projects/igniteui-angular/src/lib/dialog/themes/_base.scss index f97a4dc8786..3cb37bcb5f2 100644 --- a/projects/igniteui-angular/src/lib/dialog/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/dialog/themes/_base.scss @@ -31,12 +31,20 @@ $_theme: $material; } @include e(window-title) { + @include type-style(h6) { + margin: 0; + }; + display: flex; color: var-get($_theme, 'title-color'); padding: var(--title-padding); } @include e(window-content) { + @include type-style(body-1) { + margin: 0; + }; + color: var-get($_theme, 'message-color'); padding: var(--message-padding); // The 2 rules below are related to https://github.com/IgniteUI/igniteui-angular/issues/11300 diff --git a/projects/igniteui-angular/src/lib/dialog/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/dialog/themes/shared/bootstrap.scss index 9bc466812b2..cc4a2a12348 100644 --- a/projects/igniteui-angular/src/lib/dialog/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/dialog/themes/shared/bootstrap.scss @@ -12,6 +12,10 @@ $_theme: $bootstrap; --actions-padding: #{rem(16px)}; @include e(window-title) { + @include type-style(h5) { + margin: 0; + }; + border-bottom: rem(1px) solid var-get($_theme, 'border-color'); } diff --git a/projects/igniteui-angular/src/lib/dialog/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/dialog/themes/shared/fluent.scss index 2dcb0396a4b..69f441a2207 100644 --- a/projects/igniteui-angular/src/lib/dialog/themes/shared/fluent.scss +++ b/projects/igniteui-angular/src/lib/dialog/themes/shared/fluent.scss @@ -7,4 +7,8 @@ --title-padding: #{rem(16px) rem(24px) rem(24px) rem(24px)}; --message-padding: #{0 rem(24px) rem(20px) rem(24px)}; --actions-padding: #{0 rem(24px) rem(24px) rem(24px)}; + + @include e(window-content) { + @include type-style(body-2); + } } diff --git a/projects/igniteui-angular/src/lib/dialog/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/dialog/themes/shared/indigo.scss index fd046b996c9..09a4f6e23b0 100644 --- a/projects/igniteui-angular/src/lib/dialog/themes/shared/indigo.scss +++ b/projects/igniteui-angular/src/lib/dialog/themes/shared/indigo.scss @@ -7,6 +7,10 @@ --message-padding: #{rem(16px) rem(24px)}; --actions-padding: #{rem(16px) rem(24px) rem(24px) rem(24px)}; + @include e(window-title) { + @include type-style(h5); + } + @include e(window-actions) { gap: rem(16px); } diff --git a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss index a4e14859750..2026e6c1fcb 100644 --- a/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss +++ b/projects/igniteui-angular/src/lib/input-group/themes/shared/bootstrap.scss @@ -312,7 +312,7 @@ $border-radius: var-get($_theme, 'border-border-radius'); } @include e(bundle-main) { - border-color: var-get($_theme, 'warning-secondary-color'); + border-color: var-get($_theme, 'success-secondary-color'); } } diff --git a/projects/igniteui-angular/src/lib/navbar/themes/_base.scss b/projects/igniteui-angular/src/lib/navbar/themes/_base.scss index 33e50991005..efbf69e94bf 100644 --- a/projects/igniteui-angular/src/lib/navbar/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/navbar/themes/_base.scss @@ -58,9 +58,6 @@ $_theme: $material; @include b(igx-navbar) { display: block; width: 100%; - background: var-get($_theme, 'background'); - color: var-get($_theme, 'text-color'); - box-shadow: var-get($_theme, 'elevation'); nav { display: flex; @@ -73,6 +70,9 @@ $_theme: $material; max-height: rem(128px); z-index: 4; overflow: hidden; + background: var-get($_theme, 'background'); + color: var-get($_theme, 'text-color'); + box-shadow: var-get($_theme, 'elevation'); border-bottom: rem(1px) solid var-get($_theme, 'border-color'); } diff --git a/projects/igniteui-angular/src/lib/slider/themes/_base.scss b/projects/igniteui-angular/src/lib/slider/themes/_base.scss index 526a81716aa..c09f70821e2 100644 --- a/projects/igniteui-angular/src/lib/slider/themes/_base.scss +++ b/projects/igniteui-angular/src/lib/slider/themes/_base.scss @@ -19,7 +19,6 @@ $_theme: $material; // https://github.com/IgniteUI/igniteui-angular/issues/11597 z-index: 0; height: rem(48px); - flex-grow: 1; align-items: center; transition: all .2s $out-quad; touch-action: pan-y pinch-zoom; @@ -267,7 +266,7 @@ $_theme: $material; &:focus div::before { box-shadow: none; } - + &:focus div::after { transform: scale(0); } diff --git a/projects/igniteui-angular/src/lib/stepper/stepper.component.scss b/projects/igniteui-angular/src/lib/stepper/stepper.component.scss index dd684163cd7..c7019d1c431 100644 --- a/projects/igniteui-angular/src/lib/stepper/stepper.component.scss +++ b/projects/igniteui-angular/src/lib/stepper/stepper.component.scss @@ -1,4 +1,3 @@ @use 'themes/base'; -@use 'themes/shared'; @use 'themes/light'; @use 'themes/dark'; diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss deleted file mode 100644 index 0ca60c75786..00000000000 --- a/projects/igniteui-angular/src/lib/stepper/themes/shared/_index.scss +++ /dev/null @@ -1,4 +0,0 @@ -@forward 'material'; -@forward 'bootstrap'; -@forward 'fluent'; -@forward 'indigo'; diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss deleted file mode 100644 index 86f61b7bbce..00000000000 --- a/projects/igniteui-angular/src/lib/stepper/themes/shared/bootstrap.scss +++ /dev/null @@ -1,10 +0,0 @@ -@use 'igniteui-theming/sass/typography' as *; -@use 'igniteui-theming/sass/bem' as *; -@use 'styles/themes/standalone' as *; -@use '../light/tokens' as *; - -$_theme: $bootstrap; - -@include themed-block(igx-stepper, bootstrap) { - -} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss deleted file mode 100644 index 8d56a722db4..00000000000 --- a/projects/igniteui-angular/src/lib/stepper/themes/shared/fluent.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'igniteui-theming/sass/typography' as *; -@use 'igniteui-theming/sass/bem' as *; -@use 'styles/themes/standalone' as *; - -@include themed-block(igx-stepper, fluent) { - -} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss deleted file mode 100644 index 1dd5b995d6a..00000000000 --- a/projects/igniteui-angular/src/lib/stepper/themes/shared/indigo.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'igniteui-theming/sass/typography' as *; -@use 'igniteui-theming/sass/bem' as *; -@use 'styles/themes/standalone' as *; - -@include themed-block(igx-stepper, indigo) { - -} diff --git a/projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss b/projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss deleted file mode 100644 index 6988a8e224a..00000000000 --- a/projects/igniteui-angular/src/lib/stepper/themes/shared/material.scss +++ /dev/null @@ -1,7 +0,0 @@ -@use 'igniteui-theming/sass/typography' as *; -@use 'igniteui-theming/sass/bem' as *; -@use 'styles/themes/standalone' as *; - -@include themed-block(igx-stepper, material) { - -}