refactor(themes): comments fixes

Author: adrianptrv

en/components/action-strip.md

@@ -87,7 +87,6 @@ To initialize and position the Action Strip correctly, it needs to be inside a r
       <igx-icon>format_bold</igx-icon>
     </button>
   </igx-action-strip>
-  <div></div>
 </div>
 ```
 

en/components/banner.md

@@ -275,71 +275,15 @@ $custom-banner-theme: banner-theme(
 );
 ```
 
-The last step is to pass the custom banner theme:
-
-```scss
-@include css-vars($custom-banner-theme);
-```
-
-### Using color palettes
-
-Instead of hardcoding the color values, like we just did, we can achieve greater flexibility in terms of colors by using the [`igx-palette`]({environment:sassApiUrl}/index.html#function-igx-palette) and [`igx-color`]({environment:sassApiUrl}/index.html#function-igx-color) functions.
-
-The `igx-palette` function generates a color palette based on the primary, secondary and surface colors that are passed:
-
-```scss
-$white-color: #dedede;
-$black-color: #151515;
-$light-color: #efefef;
-
-$light-banner-palette: palette($primary: $white-color, $secondary: $black-color, $surface: $light-color);
-```
-
-And then with [`igx-color`]({environment:sassApiUrl}/index.html#function-igx-color) we can easily retrieve color from the palette. 
-
-```scss
-$custom-banner-theme: banner-theme(
-  $banner-message-color: color($light-banner-palette, "secondary", 400),
-  $banner-background: color($light-banner-palette, "primary", 400),
-  $banner-illustration-color: color($light-banner-palette, "secondary", 100)
-);
-```
-
 >[!NOTE]
->The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to the [`Palettes`](themes/palettes.md) topic for detailed guidance on how to use them.
-
-### Using schemas
+>Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the [`palette`]({environment:sassApiUrl}/index.html#function-palette) and [`color`]({environment:sassApiUrl}/index.html#function-color) functions. Please refer to [`Palettes`](/themes/sass/palettes.md) topic for detailed guidance on how to use them.
 
-You can build a robust and flexible structure that benefits from [`schemas`](themes/sass/schemas.md).
-Extend one of the two predefined schemas, that are provided for every component, in this case - [`light-banner`]({environment:sassApiUrl}/index.html#variable-light-banner) schema: 
+The last step is to pass the custom banner theme:
 
 ```scss
-//  Extending the banner schema
-$light-toast-schema: extend(
-  $light-banner,
-  (
-    banner-message-color: (
-      color: ("secondary", 400)
-    ),
-    banner-background: (
-      color: ("primary", 400)
-    ),
-    banner-illustration-color: (
-      color: ("secondary", 100)
-    )
-  )
-);
-
-// Defining banner with the global light schema
-$custom-banner-theme: banner-theme(
-  $palette: $light-banner-palette,
-  $schema: $light-toast-schema
-);
+@include css-vars($custom-banner-theme);
 ```
 
-Don't forget to include the themes in the same way as it was demonstrated above.
-
-
 <code-view style="height: 530px" 
            no-themin
            data-demos-base-url="{environment:demosBaseUrl}" 

en/components/button-group.md

@@ -66,7 +66,7 @@ import { IGX_BUTTON_GROUP_DIRECTIVES, IgxIconComponent } from 'igniteui-angular'
         <button igxButton>
             <igx-icon>format_align_right</igx-icon>
         </button>
-        <button igxButton [selected]="true">
+        <button igxButton selected>
             <igx-icon>format_align_justify</igx-icon>
         </button>
     </igx-buttongroup>
@@ -99,7 +99,7 @@ Use the [`igx-buttongroup`]({environment:angularApiUrl}/classes/igxbuttongroupco
   <button igxButton>
     <igx-icon>format_align_right</igx-icon>
   </button>
-  <button igxButton [selected]="true">
+  <button igxButton selected>
     <igx-icon>format_align_justify</igx-icon>
   </button>
 </igx-buttongroup>
@@ -126,7 +126,7 @@ public alignment = ButtonGroupAlignment.vertical;
 <igx-buttongroup [alignment]="alignment">
   <button igxButton>Sofia</button>
   <button igxButton>London</button>
-  <button igxButton [selected]="true">New York</button>
+  <button igxButton selected>New York</button>
   <button igxButton>Tokyo</button>
 </igx-buttongroup>
 ```

en/components/calendar.md

@@ -360,7 +360,7 @@ If you traverse the page using *Tab key* you should keep in mind that based on [
 - Next month button
 - Selected date, Current date, First focusable (not disabled) date in the days view
 
-In an Angular Calendar that contains more than one selected dates, only the first date will be introduced as a tab stop. For example, when an Angular Calendar multi select is enabled and you have selected the dates: *13/10/2020*, *17/10/2020* and *21/10/2020* only *13/10/2020* will be accessible during tab navigation; in an Angular Calendar Range Picker, only the first date of the selected range will be part of the *page tab sequence*.
+In an Angular Calendar that contains more than one selected dates, only the first date will be introduced as a tab stop. For example, when an Angular Calendar multi-select is enabled and you have selected the dates: *13/10/2020*, *17/10/2020* and *21/10/2020* only *13/10/2020* will be accessible during tab navigation; in an Angular Calendar Range Picker, only the first date of the selected range will be part of the *page tab sequence*.
 
 >[!NOTE]
 > Behavioral change, from *v10.2.0* - Tab key navigation in the *days view* is no longer available. In order to navigate between the dates in the *date view* you should use the *arrow keys*.
@@ -402,7 +402,7 @@ When an `year` inside the decade view is focused, use:
 >Following version 8.2.0, keyboard navigation will not focus days that are outside of current month, but will rather change the month in view.
 
 ## Multi View Calendar
-Multi view calendar supports all three types of selection. Use the [`monthsViewNumber`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#monthsViewNumber) input to set the number of displayed months, which will be shown horizontally in a flex container. There is no limit on the max value set. While using a multi view calendar, you may want to hide the days that do not belong to the current month. You are able to do it with the [`hideOutsideDays`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#hideOutsideDays) property.  Keyboard navigation moves to next/previous months when those are in view.
+Multi-view calendar supports all three types of selection. Use the [`monthsViewNumber`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#monthsViewNumber) input to set the number of displayed months, which will be shown horizontally in a flex container. There is no limit on the max value set. While using a multi view calendar, you may want to hide the days that do not belong to the current month. You are able to do it with the [`hideOutsideDays`]({environment:angularApiUrl}/classes/igxcalendarcomponent.html#hideOutsideDays) property.  Keyboard navigation moves to next/previous months when those are in view.
 
 
 <code-view style="height: 500px" 

en/components/card.md

@@ -341,9 +341,9 @@ Following the simplest approach, we create a new theme that extends the [`card-t
 ```scss
 $colorful-card: card-theme(
   $background: #011627,
-  $header-text-color: #FEFEFE,
-  $subtitle-text-color: #ECAA53,
-  $content-text-color: #FEFEFE
+  $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/combo-templates.md

@@ -135,10 +135,10 @@ Use selector `[igxComboClearIcon]`:
 When used with templates, the `igxComboClearIcon` and the `igxComboToggleIcon` selectors, change how the respective buttons appear in the combobox input. Passing content inside of the `igx-combo` also allows templating of the combobox input similar to the way an `igx-input-group` can be templated (using `igx-prefix`, `igx-suffix` and `igxLabel`). The code snippet below illustrates how to add an appropriate label and prefix to the combobox input:
 
 ```html
-    <igx-combo>
-        <label igxLabel>Locations</label>
-        <igx-prefix><igx-icon>pin_drop</igx-icon></igx-prefix>
-    </igx-combo>
+<igx-combo>
+    <label igxLabel>Locations</label>
+    <igx-prefix><igx-icon>pin_drop</igx-icon></igx-prefix>
+</igx-combo>
 ```
 
 ## API Summary

en/components/combo.md

@@ -352,7 +352,6 @@ The last step is to include the component's theme.
 ## Known Issues
 
 - The combobox input that displays the selected items is not editable. However, due to browser specifics in FireFox, the cursor is visible.
-- The combobox does not have input for sizing its height. In the future, the [`IgxInputGroup`]({environment:angularApiUrl}/classes/igxinputgroupcomponent.html) component will expose an option that allows custom sizing, and then the [`IgxCombo`]({environment:angularApiUrl}/classes/igxcombocomponent.html) will use the same functionality for proper styling and better consistency.
 - When the combobox is bound to an array of primitive data which contains `undefined` (i.e. `[ undefined, ...]`), `undefined` is not displayed in the dropdown. When it is bound to an array of complex data (i.e. objects) and the value used for `valueKey` is `undefined`, the item will be displayed in the dropdown, but cannot be selected.
 - When the combobox is bound to a remote service and there is a predefined selection, its input will remain blank until the requested data is loaded.
 

en/components/date-range-picker.md

@@ -381,7 +381,11 @@ $purple: #9E379F;
 $blue: #61AEDB;
 $light-gray: #efefef;
 
-$custom-palette: palette($primary: $blue, $secondary: $purple, $surface: $light-gray);
+$custom-palette: palette(
+  $primary: $blue, 
+  $secondary: $purple, 
+  $surface: $light-gray
+);
 
 $today-text: color($custom-palette, "primary", 500);
 $text-color: color($custom-palette, "secondary", 200);

en/components/drop-down.md

@@ -51,8 +51,8 @@ Alternatively, as of `16.0.0` you can import the `IgxDropDownComponent` as a sta
 ```typescript
 // home.component.ts
 
-import { NgFor } from "@angular/common";
-import { IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective } from "igniteui-angular";
+import { NgFor } from '@angular/common';
+import { IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective } from 'igniteui-angular';
 // import { IGX_DROP_DOWN_DIRECTIVES, IgxToggleActionDirective, IgxButtonDirective } from '@infragistics/igniteui-angular'; for licensed package
 
 @Component({

en/components/grid/groupby.md

@@ -337,16 +337,16 @@ $custom-theme: grid-theme(
   $group-row-background: #494949,
   $group-row-selected-background: #383838,
   $group-label-column-name-text: #f8f8f8,
-  $group-label-icon: #FFCD0F,
+  $group-label-icon: #ffcd0f,
   $group-label-text: #f8f8f8,
-  $group-count-background: #FFCD0F,
+  $group-count-background: #ffcd0f,
   $group-count-text-color: #000,
-  $expand-icon-color: #FFCD0F,
+  $expand-icon-color: #ffcd0f,
   $expand-icon-hover-color: rgb(223, 181, 13),
-  $cell-active-border-color: #FFCD0F,
+  $cell-active-border-color: #ffcd0f,
   $row-selected-background: #fff6d3,
   $row-selected-text-color: #000,
-  $drop-indicator-color: #FFCD0F
+  $drop-indicator-color: #ffcd0f
 );
 
 /* Chip theme will style the chips in the Group By area */
@@ -359,17 +359,21 @@ $custom-chips-theme: chip-theme(
 
 ### Defining a custom color palette
 
-In the approach that we described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`igx-palette`]({environment:sassApiUrl}/index.html#function-igx-palette) and [`igx-color`]({environment:sassApiUrl}/index.html#function-igx-color) functions.   
-`igx-palette` generates a color palette, based on provided primary, secondary and surface colors.  
+In the approach that we described above, the color values were hardcoded. Alternatively, you can achieve greater flexibility, using the [`palette`]({environment:sassApiUrl}/index.html#function-palette) and [`color`]({environment:sassApiUrl}/index.html#function-color) functions.   
+`palette` generates a color palette, based on provided primary, secondary and surface colors.  
 
 ```scss
 $black-color: #292826;
-$yellow-color: #FFCD0F;
+$yellow-color: #ffcd0f;
 $grey-color: #efefef;
 
-$custom-palette: palette($primary: $black-color, $secondary: $yellow-color, $surface: $grey-color);
+$custom-palette: palette(
+  $primary: $black-color, 
+  $secondary: $yellow-color, 
+  $surface: $grey-color
+);
 ```
-After a custom palette has been generated, the `igx-color` function can be used to obtain different varieties of the primary and the secondary colors. 
+After a custom palette has been generated, the `color` function can be used to obtain different varieties of the primary and the secondary colors. 
 
 ```scss
 $custom-theme: grid-theme(
@@ -399,15 +403,15 @@ Extend one of the two predefined schemas, that are provided for every component.
 $custom-grid-schema: extend(
   $light-grid,
   (
-    group-row-background: (igx-color:('secondary', 100)),
-    group-row-selected-background: (igx-color:('primary', 400)),
-    group-label-column-name-text: (igx-color:('primary', 600)),
-    group-label-icon: (igx-color:('primary', 600)),
-    group-label-text: (igx-color:('secondary', 700)),
-    group-count-background: (igx-color:('primary', 600)),
-    group-count-text-color: (igx-color:('secondary', 400)),
-    expand-icon-color: (igx-color:('primary', 600)),
-    expand-icon-hover-color: (igx-color:('primary', 400))
+    group-row-background: (color:('secondary', 100)),
+    group-row-selected-background: (color:('primary', 400)),
+    group-label-column-name-text: (color:('primary', 600)),
+    group-label-icon: (color:('primary', 600)),
+    group-label-text: (color:('secondary', 700)),
+    group-count-background: (color:('primary', 600)),
+    group-count-text-color: (color:('secondary', 400)),
+    expand-icon-color: (color:('primary', 600)),
+    expand-icon-hover-color: (color:('primary', 400))
   )
 );
 ```
@@ -417,7 +421,7 @@ In order for the custom schema to be applied, either ([`light`]({environment:sas
 $my-custom-schema: extend(
   $light-material-schema, 
   ( 
-    igx-grid: $custom-grid-schema
+    grid: $custom-grid-schema
   )
 );