Merge pull request #6163 from IgniteUI/apetrov/new-desing-system-samples

docs(styling): add text for new bespoke design system samples

Author: simeonoff

en/components/button.md

@@ -249,7 +249,25 @@ If all went well, you should see something like the following in the browser:
 
 ## Styling
 
-To get started with styling the button, we need to import the `index` file, where all the theme functions and component mixins live:
+Following the simplest approach, you can use CSS variables to customize the appearance of the button:
+
+```css
+[igxButton] {
+    --background: #ff4d4f;
+    --hover-background: #ff7875;
+    --active-background: #d9363e;
+    --focus-visible-background: #ff4d4f;
+    --focus-visible-foreground: #fff;
+}
+```
+
+By changing the values of these CSS variables, you can alter the entire look of the button.
+
+<div class="divider--half"></div>
+
+Another way to style the button is by using **Sass**, along with our [`button-theme`]({environment:sassApiUrl}/index.html#function-button-theme) function.
+
+To start styling the button using **Sass**, first import the `index` file, which includes all theme functions and component mixins:
 
 ```scss
 @use "igniteui-angular/theming" as *;
@@ -268,27 +286,27 @@ Given the following markup:
 </div>
 ```
 
-We need to create a theme:
+We need to create the following theme:
 
 ```scss
 $custom-button-theme: button-theme(
-  $foreground: #fdfdfd,
-  $hover-foreground: #fdfdfd,
-  $focus-foreground: #fdfdfd,
-  $background: #345779,
-  $hover-background: #2e4d6b,
-  $focus-background: #2e4d6b,
-  $disabled-foreground: #2e4d6b,
+    $foreground: #fdfdfd,
+    $hover-foreground: #fdfdfd,
+    $focus-foreground: #fdfdfd,
+    $background: #345779,
+    $hover-background: #2e4d6b,
+    $focus-background: #2e4d6b,
+    $disabled-foreground: #2e4d6b,
 );
 ```
 
 Take a look at the [`button-theme`]({environment:sassApiUrl}/themes#function-button-theme) section for a complete list of available parameters for styling any type of button.
 
-The last step is to pass the custom button theme in our application:
+Finally, **include** the custom theme in your application:
 
 ```scss
 .button-sample {
-  @include css-vars($custom-button-theme);
+    @include css-vars($custom-button-theme);
 }
 ```
 
@@ -310,22 +328,25 @@ If you want to style only the `contained` button, you can use the [`contained-bu
 
 ```scss
 $custom-contained-theme: contained-button-theme(
-  $background: #348ae0,
+    $background: #348ae0,
 );
 ```
 
 With the new type-specific theme functions, styling buttons is now easier. For [`contained-button-theme`]({environment:sassApiUrl}/themes#function-contained-button-theme) and [`fab-button-theme`]({environment:sassApiUrl}/themes#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}/color#function-adaptive-contrast) function, which calculates whether black or white provides better contrast against the supplied background color.
 
 For [`flat-button-theme`]({environment:sassApiUrl}/themes#function-flat-button-theme) and [`outlined-button-theme`]({environment:sassApiUrl}/themes#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
+In the sample below, you can see how using the button component with customized CSS variables allows you to create a design that visually resembles the button used in the [`Ant`](https://ant.design/components/button?theme=light#button-demo-color-variant) design system. 
 
-<code-view style="height: 100px"
+<code-view style="height: 260px"
            no-theming
            data-demos-base-url="{environment:demosBaseUrl}"
            iframe-src="{environment:demosBaseUrl}/data-entries/buttons-style/" >
 </code-view>
 
+> [!NOTE]
+> The sample uses the [Bootstrap Light](themes/sass/schemas.md#predefined-schemas) schema.
+
 ### Custom sizing
 
 You can change the button height either by using the `--size` variable, targeting the `button` directly:

en/components/calendar.md

@@ -480,13 +480,14 @@ The last step is to pass the custom calendar theme:
  @include css-vars($custom-calendar-theme);
 ```
 
-<code-view style="height:500px" 
+In the sample below, you can see how using the calendar with customized CSS variables allows you to create a design that visually resembles the calendar used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.ui.unified.Calendar/sample/sap.ui.unified.sample.CalendarSingleDaySelection) design system. 
+
+<code-view style="height:350px" 
            no-theming
            data-demos-base-url="{environment:demosBaseUrl}" 
            iframe-src="{environment:demosBaseUrl}/scheduling/calendar-styling-sample/" >
 </code-view>
 
-
 ## API References
 <div class="divider--half"></div>
 

en/components/card.md

@@ -328,41 +328,58 @@ You can justify the buttons so that they are laid out across the entire axis, no
 ```
 
 ## Styling
-To get started with styling the card, we need to import the `index` file, where all the theme functions and component mixins live:
+
+Following the simplest approach, you can use CSS variables to customize the appearance of the card:
+
+```css
+igx-card {
+    --border-radius: 8px;
+    --outline-color: #f0f0f0;
+    --background: #bfbfbf;
+    --header-text-color: #000;
+}
+```
+
+By changing the values of these CSS variables, you can alter the entire look of the card component.
+
+<div class="divider--half"></div>
+
+Another way to style the card is by using **Sass**, along with our [`card-theme`]({environment:sassApiUrl}/index.html#function-card-theme) function.
+
+To start styling the card using **Sass**, first import the `index` file, which includes all theme functions and component mixins:
 
 ```scss
 @use "igniteui-angular/theming" as *;
 
 // 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}/themes#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,
-  $subtitle-text-color: #ecaa53,
+$custom-card-theme: card-theme(
+    $background: #011627,
+    $subtitle-text-color: #ecaa53,
 );
 ```
-As seen, the `card-theme` exposes some useful parameters for basic styling of its items. 
 
-The last step is to **include** the component theme in our application.
+Finally, **include** the custom theme in your application:
 
 ```scss
-@include css-vars($colorful-card);
+@include css-vars($custom-card-theme);
 ```
 
-### Angular Card Demo
+In the sample below, you can see how using the card component with customized CSS variables allows you to create a design that visually resembles the card used in the [`Ant`](https://ant.design/components/card?theme=light#card-demo-meta) design system. 
 
-
-<code-view style="height: 486px" 
+<code-view style="height: 400px" 
            no-theming
            data-demos-base-url="{environment:demosBaseUrl}" 
            iframe-src="{environment:demosBaseUrl}/layouts/card-styling-sample/" >
 </code-view>
 
-
 ### Summary
+
 In this article we covered a lot of ground with the card component. First, we created a very simple card with text content only. Then added some images to make the card a bit more appealing. We used some additional Ignite UI for Angular components inside our card, avatar, buttons and icons, to enrich the experience and add some functionality. And finally, we changed the card's theme by setting some exposed theme colors, creating custom palettes and extending schemas. 
 The card component is capable of displaying more different layouts worth exploring in the Card Demo in the beginning of this article.
 

en/components/checkbox.md

@@ -211,7 +211,31 @@ After all that is done, our application should look like this:
 
 ## Styling
 
-To get started with styling the checkbox, we need to import the `index` file, where all the theme functions and component mixins live:
+Following the simplest approach, you can use CSS variables to customize the appearance of the checkbox:
+
+```css
+igx-checkbox {
+    --tick-color: #0064d9;
+    --tick-color-hover: #e3f0ff;
+    --fill-color: transparent;
+    --fill-color-hover: #e3f0ff;
+    --label-color: #131e29;
+    --focus-outline-color: #0032a5;
+    --border-radius: 0.25rem;
+}
+
+igx-checkbox:hover {
+    --empty-fill-color: #e3f0ff;
+}
+```
+
+By changing the values of these CSS variables, you can alter the entire look of the checkbox component.
+
+<div class="divider--half"></div>
+
+Another way to style the checkbox is by using **Sass**, along with our [`checkbox-theme`]({environment:sassApiUrl}/index.html#function-checkbox-theme) function.
+
+To start styling the checkbox using **Sass**, first import the `index` file, which includes all theme functions and component mixins:
 
 ```scss
 @use "igniteui-angular/theming" as *;
@@ -225,27 +249,28 @@ Then, we create a new theme that extends the [`checkbox-theme`]({environment:sas
 ```scss
 // in styles.scss
 $custom-checkbox-theme: checkbox-theme(
-  $empty-color: #ecaa53,
-  $fill-color: #ecaa53,
-  $border-radius: 5px
+    $empty-color: #ecaa53,
+    $fill-color: #ecaa53,
+    $border-radius: 5px
 );
 ```
 
-The last step is to **include** the component theme in our application.
+Finally, **include** the custom theme in your application:
 
 ```scss
 @include css-vars($custom-checkbox-theme);
 ```
 
-### Demo
-
+In the sample below, you can see how using the checkbox component with customized CSS variables allows you to create a design that visually resembles the checkbox used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.CheckBox/sample/sap.m.sample.CheckBox) design system. 
 
 <code-view style="height: 100px"
            no-theming
            data-demos-base-url="{environment:demosBaseUrl}"
            iframe-src="{environment:demosBaseUrl}/data-entries/checkbox-styling/" >
 </code-view>
 
+> [!NOTE]
+> The sample uses the [Fluent Light](themes/sass/schemas.md#predefined-schemas) schema.
 
 <div class="divider--half"></div>
 

en/components/chip.md

@@ -480,7 +480,23 @@ If everything's set up correctly, you should see this in your browser:
 
 ## Styling
 
-To get started with styling the chip, we need to import the `index` file, where all the theme functions and component mixins live:
+Following the simplest approach, you can use CSS variables to customize the appearance of the chip:
+
+```css
+igx-chip {
+    --background: #cd201f;
+    --hover-background: #cd201f;
+    --focus-background: #9f1717;
+    --text-color: #fff;
+}
+```
+By changing the values of these CSS variables, you can alter the entire look of the chip component.
+
+<div class="divider--half"></div>
+
+Another way to style the chip is by using **Sass**, along with our [`chip-theme`]({environment:sassApiUrl}/index.html#function-chip-theme) function.
+
+To start styling the chip using **Sass**, first import the `index` file, which includes all theme functions and component mixins:
 
 ```scss
 @use "igniteui-angular/theming" as *;
@@ -492,21 +508,21 @@ To get started with styling the chip, we need to import the `index` file, where
 Following the simplest approach, we create a new theme that extends the [`chip-theme`]({environment:sassApiUrl}/themes#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: #57a5cd,
-  $selected-background: #ecaa53,
-  $remove-icon-color: #d81414,
-  $border-radius: 5px,
+$custom-chip-theme: chip-theme(
+    $background: #57a5cd,
+    $selected-background: #ecaa53,
+    $remove-icon-color: #d81414,
+    $border-radius: 5px,
 );
 ```
 
-The last step is to **include** the component theme in our application.
+Finally, **include** the custom theme in your application:
 
 ```scss
-@include css-vars($custom-theme);
+@include css-vars($custom-chip-theme);
 ```
 
-### Demo
+In the sample below, you can see how using the chip component with customized CSS variables allows you to create a design that visually resembles the chip used in the [`Ant`](https://ant.design/components/tag?theme=light#tag-demo-icon) design system. 
 
 <code-view style="height:100px" 
            no-theming

en/components/input-group.md

@@ -452,7 +452,7 @@ To customize the appearance of input groups, you can create a new theme by exten
 Even by specifying just a few core parameters—like colors for the border or background—you'll get a fully styled input group with consistent state-based styles (hover, focus, etc.) applied for you.
 
 Here’s a simple example:
-
+ 
 ```scss
 $custom-input-group: input-group-theme(
     $box-background: #57a5cd,
@@ -466,14 +466,17 @@ The last step is to include the newly created theme:
 @include css-vars($custom-input-group);
 ```
 
-### Demo
+In the sample below, you can see how using the input group with customized CSS variables allows you to create a design that visually resembles the one used in the [`Carbon`](https://carbondesignsystem.com/components/text-input/usage/#live-demo) design system. 
 
 <code-view style="height:230px"
            no-theming
            data-demos-base-url="{environment:demosBaseUrl}"
            iframe-src="{environment:demosBaseUrl}/data-entries/input-group-style/" >
 </code-view>
 
+> [!NOTE]
+> The sample uses the [Indigo Light](themes/sass/schemas.md#predefined-schemas) schema.
+
 >[!NOTE]
 >If your page includes multiple types of input groups — such as `box`, `border`, `line`, or `search` — it's best to scope your theme variables to the specific input group type.
 <br>For example:<br>

en/components/radio-button.md

@@ -146,7 +146,30 @@ The final result would be something like that:
 
 ## Styling
 
-To get started with styling the radio buttons, we need to import the `index` file, where all the theme functions and component mixins live:
+Following the simplest approach, you can use CSS variables to customize the appearance of the radio button:
+
+```css
+igx-radio {
+    --empty-color: #556b81;
+    --label-color: #131e29;
+    --fill-color: #0064d9;
+    --focus-outline-color: #0032a5;
+}
+
+igx-radio:hover {
+    --empty-fill-color: #e3f0ff;
+    --empty-color: #0064d9;
+    --hover-color: transparent;
+}
+```
+
+By changing the values of these CSS variables, you can alter the entire look of the component.
+
+<div class="divider--half"></div>
+
+Another way to style the radio button is by using **Sass**, along with our [`radio-theme`]({environment:sassApiUrl}/index.html#function-radio-theme) function.
+
+To start styling the radio button using **Sass**, first import the `index` file, which includes all theme functions and component mixins:
 
 ```scss
 @use "igniteui-angular/theming" as *;
@@ -159,22 +182,27 @@ Following the simplest approach, we create a new theme that extends the [`radio-
 
 ```scss
 $custom-radio-theme: radio-theme(
-  $empty-color:  #345779,
-  $fill-color: #2dabe8,
+    $empty-color:  #345779,
+    $fill-color: #2dabe8,
 );
 ```
 
-The last step is to pass the custom radio theme in our application:
+Finally, **include** the custom theme in your application:
 
 ```scss
 @include css-vars($custom-radio-theme);
 ```
 
+In the sample below, you can see how using the radio button with customized CSS variables allows you to create a design that visually resembles the radio button used in the [`SAP UI5`](https://ui5.sap.com/#/entity/sap.m.RadioButton/sample/sap.m.sample.RadioButton) design system. 
+
 <code-view style="height: 300px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
            iframe-src="{environment:demosBaseUrl}/data-entries/radio-styling-sample/" >
 </code-view>
 
+> [!NOTE]
+> The sample uses the [Fluent Light](themes/sass/schemas.md#predefined-schemas) schema.
+
 <div class="divider--half"></div>
 
 ## Radio Group