Merging vnext to master

en/components/accordion.md

@@ -275,12 +275,13 @@ In order to take advantage of the functions exposed by the theming engine, we ha
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ``` 
 
-Following the simplest approach, we create a new theme that extends the [`expansion-panel-theme`]({environment:sassApiUrl}/index.html#function-expansion-panel-theme) and accepts an `$expanded-margin`, `$body-color` and `$header-focus-background` parameters. 
+Following the simplest approach, we create a new theme that extends the [`expansion-panel-theme`]({environment:sassApiUrl}/index.html#function-expansion-panel-theme) and accepts a `$header-background`, `$body-color` and `$expanded-margin` parameters. The theme automatically assigns foreground colors, either black or white, based on which provides better contrast with the specified backgrounds.
+
 ```scss
 $custom-panel-theme: expansion-panel-theme(
-  $expanded-margin: 10px,
-  $body-color: #282885,
-  $header-focus-background: #efefef
+  $header-background: #011627,
+  $body-background: #f0ece7,
+  $expanded-margin: 10px
 );
 ```
 

en/components/action-strip.md

@@ -174,11 +174,9 @@ Next, we have to create a new theme that extends the `action-strip-theme` and pa
 
 ```scss
 $custom-strip: action-strip-theme(
-  $background: rgba(150, 133, 143, 0.4),
-  $actions-background: rgba(109, 121, 147, 0.6),
-  $icon-color: null,
-  $delete-action: null,
-  $actions-border-radius: 0,
+  $background: rgba(109, 121, 147, 0.2),
+  $actions-background: rgba(#011627, 0.9),
+  $actions-border-radius: 0
 );
 ```
 

en/components/avatar.md

@@ -150,13 +150,13 @@ To get started with styling the avatar, we need to import the `index` file, wher
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ``` 
 
-Following the simplest approach, we create a new theme that extends the [`avatar-theme`]({environment:sassApiUrl}/index.html#function-avatar-theme) and accepts the `$background`, `$color`, and the `$border-radius` parameters.
+Following the simplest approach, we create a new theme that extends the [`avatar-theme`]({environment:sassApiUrl}/index.html#function-avatar-theme) providing values for the `$background` and `$border-radius` parameters. The `$color` (or `$icon-color`) is automatically set to either black or white, depending on which offers better contrast with the specified background. Note that the `$border-radius` property only takes effect when the avatar's `shape` is set to `rounded`.
 
 Given the following markup:
 
 ```html
 <div class="avatar-sample initials">
-  <igx-avatar initials="JS" size="medium"></igx-avatar>
+  <igx-avatar initials="JS" shape="rounded" size="medium"></igx-avatar>
 </div>
 ```
 
@@ -165,7 +165,6 @@ We create the following avatar theme:
 ```scss
 $custom-avatar-theme: avatar-theme(
   $background: #72da67,
-  $color: #000000,
   $border-radius: 16px
 );
 ```

en/components/badge.md

@@ -297,13 +297,12 @@ To get started with styling the badges, we need to import the `index` file, wher
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ``` 
 
-Following the simplest approach, we create a new theme that extends the [`badge-theme`]({environment:sassApiUrl}/index.html#function-badge-theme) and accepts some parameters that style the badge's items.
+Following the simplest approach, we create a new theme that extends the [`badge-theme`]({environment:sassApiUrl}/index.html#function-badge-theme) and accepts some parameters that style the badge's items. When you set the `$background-color`, the `$icon-color` and `$text-color` are automatically assigned based on which offers better contrast—black or white. Note that the `$border-radius` property only takes effect when the badge's `shape` is set to `square`.
 
 ```scss
 $custom-badge-theme: badge-theme(
-  $border-radius: 15px,
-  $icon-color: white,
-  $text-color: black,
+  $background-color: #57a5cd,
+  $border-radius: 4px
 );
 ```
 

en/components/banner.md

@@ -265,13 +265,11 @@ First, in order to use the functions exposed by the theme engine, we need to imp
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ``` 
 
-Following the simplest approach, we create a new theme that extends the [`banner-theme`]({environment:sassApiUrl}/index.html#function-banner-theme) and accepts the `$banner-message-color`, `$banner-background` and the `$banner-illustration-color` parameters.
+Following the simplest approach, we create a new theme that extends the [`banner-theme`]({environment:sassApiUrl}/index.html#function-banner-theme) and specifying just the `$banner-background`. Based on this value, the `$banner-message-color` and `$banner-illustration-color` are automatically set to black or white, depending on which provides better contrast with the background.
 
 ```scss
 $custom-banner-theme: banner-theme(
-  $banner-message-color: #151515,
-  $banner-background: #dedede,
-  $banner-illustration-color: #666666
+  $banner-background: #011627,
 );
 ```
 

en/components/button-group.md

@@ -257,19 +257,11 @@ To get started with styling the button group, we need to import the `index` file
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ```
 
-Following the simplest approach, we create a new theme that extends the [`button-group-theme`]({environment:sassApiUrl}/index.html#function-button-group-theme) and accepts some of the parameters that style the button group's items in their different states.
+Following the simplest approach, we create a new theme that extends the [`button-group-theme`]({environment:sassApiUrl}/index.html#function-button-group-theme) and specifying just the `$item-background`. Based on this value, the theme will automatically compute appropriate state colors, contrast foregrounds, and borders for the button group. Of course, you're still free to override any of the theme parameters with custom values if needed.
 
 ```scss
 $custom-button-group: button-group-theme(
-  $item-text-color: #fdfdfd,
-  $item-background: #2f4d6a,
-  $item-hover-text-color: #fdfdfd,
-  $item-hover-background: #1f3347,
-  $item-selected-text-color: #fdfdfd,
-  $item-selected-background: #1f3347,
-  $item-selected-hover-background: #1f3347,
-  $disabled-text-color: gray,
-  $disabled-background-color: lightgray,
+  $item-background: #57a5cd,
 );
 ```
 

en/components/button.md

@@ -292,6 +292,32 @@ The last step is to pass the custom button theme in our application:
 }
 ```
 
+You can also choose to style only buttons of a specific type - `flat`, `outlined`, `contained`, or `fab`.
+To do this, you can use the new type-specific theme functions: [`flat-button-theme`]({environment:sassApiUrl}/index.html#function-flat-button-theme), [`outlined-button-theme`]({environment:sassApiUrl}/index.html#function-outlined-button-theme), [`contained-button-theme`]({environment:sassApiUrl}/index.html#function-contained-button-theme), and [`fab-button-theme`]({environment:sassApiUrl}/index.html#function-fab-button-theme)
+
+For example, given the following markup:
+
+```html
+<div class="my-contained-btn">
+  <button igxButton="contained">Contained button</button>
+</div>
+<div class="my-flat-btn">
+  <button igxButton="flat">Flat button</button>
+</div>
+```
+
+If you want to style only the `contained` button, you can use the [`contained-button-theme`]({environment:sassApiUrl}/index.html#function-flat-button-theme) function:
+
+```scss
+$custom-contained-theme: contained-button-theme(
+  $background: #348ae0,
+);
+```
+
+With the new type-specific theme functions, styling buttons is now easier. For [`contained-button-theme`]({environment:sassApiUrl}/index.html#function-contained-button-theme) and [`fab-button-theme`]({environment:sassApiUrl}/index.html#function-fab-button-theme) functions (as shown in the example above), you only need to provide a color to the `$background` parameter. All other button state and text colors will then be automatically generated and applied based on that value. The text color is determined by the newly added [`adaptive-contrast`]({environment:sassApiUrl}/index.html#function-adaptive-contrast) function, which calculates whether black or white provides better contrast against the supplied background color.
+
+For [`flat-button-theme`]({environment:sassApiUrl}/index.html#function-flat-button-theme) and [`outlined-button-theme`]({environment:sassApiUrl}/index.html#function-outlined-button-theme) functions, the button state colors are also automatically generated and applied, but they are derived from the supplied `$foreground` parameter instead of `$background`.
+
 ### Demo
 
 <code-view style="height: 100px"

en/components/calendar.md

@@ -465,22 +465,12 @@ To get started with styling the calendar, we need to import the `index` file, wh
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ``` 
 
-Following the simplest approach, we create a new theme that extends the [`calendar-theme`]({environment:sassApiUrl}/index.html#function-calendar-theme) and accepts some of the default theme's parameters.
+Following the simplest approach, we create a new theme that extends the [`calendar-theme`]({environment:sassApiUrl}/index.html#function-calendar-theme) and by specifying just the `$header-background` and `$content-background` parameters, the theme will automatically compute appropriate state colors and contrast foregrounds. Of course, you're still free to override any of the theme parameters with custom values if needed.
 
 ```scss
 $custom-calendar-theme: calendar-theme(
-  $header-background: #345779,
-  $content-background: #fdfdfd,
-  $header-foreground: #ffffff,
-  $date-current-foreground: #2dabe8,
-  $navigation-color: #2dabe8,
-  $date-selected-foreground: #fdfdfd,
-  $date-current-background: #fdfdfd,
-  $navigation-hover-color: #345779,
-  $ym-current-foreground: #2dabe8,
-  $ym-hover-foreground: #2dabe8,
-  $picker-foreground: #2dabe8,
-  $picker-hover-foreground: #345779,
+  $header-background: #ecaa53,
+  $content-background: #011627,
 );
 ```
 

en/components/card.md

@@ -336,14 +336,12 @@ To get started with styling the card, we need to import the `index` file, where
 // IMPORTANT: Prior to Ignite UI for Angular version 13 use:
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ``` 
-Following the simplest approach, we create a new theme that extends the [`card-theme`]({environment:sassApiUrl}/index.html#function-card-theme) and accepts some parameters that style the card's items:
+Following the simplest approach, we create a new theme that extends the [`card-theme`]({environment:sassApiUrl}/index.html#function-card-theme) and providing just a few styling parameters. If you only specify the `$background` parameter, the appropriate foreground colors will be automatically chosen, either black or white, based on which offers better contrast with the background.
 
 ```scss
 $colorful-card: card-theme(
   $background: #011627,
-  $header-text-color: #fefefe,
   $subtitle-text-color: #ecaa53,
-  $content-text-color: #fefefe
 );
 ```
 As seen, the `card-theme` exposes some useful parameters for basic styling of its items. 

en/components/checkbox.md

@@ -220,16 +220,14 @@ To get started with styling the checkbox, we need to import the `index` file, wh
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ```
 
-Then, we create a new theme that extends the [`checkbox-theme`]({environment:sassApiUrl}/index.html#function-checkbox-theme) and use some of its parameters to style the checkbox's items:
+Then, we create a new theme that extends the [`checkbox-theme`]({environment:sassApiUrl}/index.html#function-checkbox-theme) and setting parameters to style the checkbox elements. By specifying the `$empty-color` and `$fill-color`, the theme automatically calculates appropriate state colors and contrast foregrounds. You can still override any other parameter with custom values as needed.
 
 ```scss
 // in styles.scss
 $custom-checkbox-theme: checkbox-theme(
-  $border-radius: 10px,
-  $label-color: #011627,
-  $empty-color: #ECAA53,
-  $fill-color: #ECAA53,
-  $tick-color: #011627,
+  $empty-color: #ecaa53,
+  $fill-color: #ecaa53,
+  $border-radius: 5px
 );
 ```
 

en/components/chip.md

@@ -489,19 +489,13 @@ To get started with styling the chip, we need to import the `index` file, where
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ```
 
-Following the simplest approach, we create a new theme that extends the [`chip-theme`]({environment:sassApiUrl}/index.html#function-chip-theme) and accepts some parameters that style the chip's items:
+Following the simplest approach, we create a new theme that extends the [`chip-theme`]({environment:sassApiUrl}/index.html#function-chip-theme) and accepts some parameters that style the chip's items. By specifying the `$background` or the `$selected-background`, the theme automatically calculates appropriate state colors and contrast foregrounds. You can still override any other parameter with custom values as needed.
 
 ```scss
 $custom-theme: chip-theme(
-  $background: #011627,
-  $hover-background: #011627dc,
-  $focus-background: #0116276c,
+  $background: #57a5cd,
   $selected-background: #ecaa53,
-  $hover-selected-background: #ecaa53,
-  $focus-selected-background: #ecaa53,
-  $text-color: #fefefe,
-  $remove-icon-color: #f14545,
-  $remove-icon-color-focus: #da0000,
+  $remove-icon-color: #d81414,
   $border-radius: 5px,
 );
 ```

en/components/circular-progress.md

@@ -161,15 +161,14 @@ Add some styles:
 
 ```scss
 .custom-size {
-  width: 100px;
-  height: 100px;
+  --diameter: 100px;
 }
 
 .sample-content {
   width: 300px;
   display: flex;
   align-items: center;
-  margin-top: 30px;
+  margin: 30px;
 }
 ```
 
@@ -243,8 +242,8 @@ Following the simplest approach, we create a new theme that extends the [`progre
 
 ```scss
 $custom-theme: progress-circular-theme(
-  $base-circle-color: lightgray,
   $fill-color-default: rgb(32, 192, 17),
+  $diameter: 50px
 );
 ```
 

en/components/combo.md

@@ -286,39 +286,26 @@ Using the [`Ignite UI for Angular Theming`](themes/index.md), we can greatly alt
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ``` 
 
-Following the simplest approach, we create a new theme that extends the [`combo-theme`]({environment:sassApiUrl}/index.html#function-combo-theme) and accepts the `$search-separator-border-color` parameter:
+Following the simplest approach, we create a new theme that extends the [`combo-theme`]({environment:sassApiUrl}/index.html#function-combo-theme). By setting the `$toggle-button-background`, the theme automatically determines suitable state colors and contrast foregrounds for the button. You can also specify additional parameters, such as `$search-separator-border-color`:
 
 ```scss
 $custom-combo-theme: combo-theme(
-  $search-separator-border-color: #1a5214
+  $search-separator-border-color: #1d3743,
+  $toggle-button-background: #57a5cd,
 );
 ```
 
 The [`IgxComboComponent`]({environment:angularApiUrl}/classes/igxcombocomponent.html) uses the [`IgxDropDownComponent`]({environment:angularApiUrl}/classes/igxdropdowncomponent.html) internally as an item container. It also includes the [`IgxInputGroup`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) and the [`IgxCheckbox`]({environment:angularApiUrl}/classes/igxcheckboxcomponent.html) components. Creating new themes, that extend these components' themes, and scoping them under the respective classes will let you change the combobox styles:
 
 ```scss
 $custom-drop-down-theme: drop-down-theme(
-  $background-color: #d9f5d6,
-  $header-text-color: #1a5214,
-  $item-text-color: #1a5214,
-
-  $focused-item-background: #72da67,
-  $focused-item-text-color: #1a5214,
-  $hover-item-background: #a0e698,
-  $hover-item-text-color: #1a5214,
-
-  $selected-item-background: #a0e698,
-  $selected-item-text-color: #1a5214,
-  $selected-hover-item-background: #72da67,
-  $selected-hover-item-text-color: #1a5214,
-  $selected-focus-item-background: #72da67,
-  $selected-focus-item-text-color: #1a5214,
+  $background-color: #57a5cd,
 );
 
 $custom-checkbox-theme: checkbox-theme(
   $border-radius: 10px,
-  $fill-color: #1a5214,
-  $empty-color: #1a5214,
+  $fill-color: #1d3743,
+  $empty-color: #1d3743,
 );
 ```
 

en/components/date-picker.md

@@ -297,22 +297,11 @@ To get started with styling the date picker, we need to import the `index` file,
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ```
 
-The Angular Date Picker uses the calendar's theme, so we have to create a new theme that extends the [`calendar-theme`]({environment:sassApiUrl}/index.html#function-calendar-theme) and use some of its parameters to style the date picker's items:
+The Angular Date Picker uses the calendar's theme, so we have to create a new theme that extends the [`calendar-theme`]({environment:sassApiUrl}/index.html#function-calendar-theme). By setting the `$header-background`, the theme automatically computes the necessary colors for the other properties to ensure a visually balanced and accessible design.
 
 ```scss
 $custom-datepicker-theme: calendar-theme(
-  $header-background: #345779,
-  $content-background: #fdfdfd,
-  $header-foreground: #ffffff,
-  $date-current-foreground: #2dabe8,
-  $navigation-color: #2dabe8,
-  $date-selected-foreground: #fdfdfd,
-  $date-current-background: #fdfdfd,
-  $navigation-hover-color: #345779,
-  $ym-current-foreground: #2dabe8,
-  $ym-hover-foreground: #2dabe8,
-  $picker-foreground: #2dabe8,
-  $picker-hover-foreground: #345779,
+  $header-background: #57a5cd,
 );
 ```
 

en/components/dialog.md

@@ -261,20 +261,26 @@ To get started with styling the dialog window, we need to import the `index` fil
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ``` 
 
-Following the simplest approach, we create a new theme that extends the [`dialog-theme`]({environment:sassApiUrl}/index.html#function-dialog-theme) and accepts parameters that style the dialog.
+Following the simplest approach, we create a new theme that extends the [`dialog-theme`]({environment:sassApiUrl}/index.html#function-dialog-theme) and accepts parameters that style the dialog. By providing the `$background`, the theme automatically selects suitable contrast colors for the foreground properties. However, you can still manually define them if desired.
 
 ```scss
 $my-dialog-theme: dialog-theme(
   $background: #011627,
-  $title-color: #ECAA53,
-  $message-color: #FEFEFE,
-  $border-radius: .3,
+  $title-color: #ecaa53,
+  $border-radius: 5px,
 );
 ```
 
 > [!NOTE]
 > In order to style any additional components that are used as part of the dialog window's content (such as the [`IgxButton`](button.md)), an additional theme should be created that is specific to the respective component and is placed under the dialog window's scope only (so it does not affect the rest of the application).
 
+```scss
+$custom-button: contained-button-theme(
+  $background: #ecaa53,
+  $foreground: #011627,
+);
+```
+
 Since the dialog window uses the [`IgxOverlayService`](overlay.md), in order for our custom theme to reach down the dialog window that we want to style, we will provide a specific outlet where the dialog window will be placed in the DOM when it is visible.
 
 ```html

en/components/drop-down.md

@@ -505,21 +505,14 @@ Using the [Ignite UI for Angular Theming](themes/index.md), we can greatly alter
 // @import '~igniteui-angular/lib/core/styles/themes/index';
 ```
 
-Following the simplest approach, we create a new theme that extends the [`drop-down-theme`]({environment:sassApiUrl}/index.html#function-drop-down-theme) and accepts some of the default theme's parameters.
+Following the simplest approach, we create a new theme that extends the [`drop-down-theme`]({environment:sassApiUrl}/index.html#function-drop-down-theme) and accepts some of the default theme's parameters. When you provide a certain background color, the theme automatically calculates the state colors and appropriate contrasting foregrounds. By setting the `$background` property, you'll get a fully styled dropdown.
 
 ```scss
 $custom-drop-down-theme: drop-down-theme(
-  $background-color: #fdfdfd,
   $header-text-color: #345779,
   $item-text-color: #2dabe8,
-  $selected-item-background: #345779,
-  $selected-item-text-color: #fdfdfd,
-  $selected-hover-item-background: #345779,
-  $selected-hover-item-text-color: #fdfdfd,
-  $selected-focus-item-background: #345779,
-  $selected-focus-item-text-color: #fdfdfd,
-  $hover-item-background: rgba(0, 0, 0, 0.12),
   $hover-item-text-color: #345779,
+  $selected-item-background: #345779,
 );
 ```