refactor(themes): updating xplat docs

doc/en/components/grids/list.md

@@ -426,30 +426,33 @@ The result of implementing the above code should look like the following:
 
 `sample="/grids/list/overview", height="300", alt="{Platform} List Example"`
 
-
-
 ## Styling
 
-You can change the appearance of our list, by using some of the exposed CSS parts - `title`, `subtitle` and `end`.
+The `List` exposes several CSS parts, giving you full control over its style:
+
+|Name|Description|
+|--|--|
+| `start` | The start container. |
+| `end` | The end container. |
+| `content` | The header and custom content container. |
+| `header` | The title and subtitle container. |
+| `title` | The title container. |
+| `subtitle` | The subtitle container. |
 
 ```css
 igc-list-header {
-    font-size: 20px;
-    font-weight: 700;
-    color: #3f51b5;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--ig-primary-700);
 }
 
 igc-list-item::part(title) {
-    font-size: 18px;
-    color: #3f51b5;
+  font-size: 18px;
+  color: var(--ig-primary-600);
 }
 
 igc-list-item::part(subtitle) {
-    color: #0099ff;
-}
-
-igc-list-item::part(end) {
-    --ig-secondary-500: 230,48%,47%;
+  color: var(--ig-primary-300);
 }
 ```
 
@@ -468,6 +471,7 @@ In this article we covered a lot of ground with the `List` component. First, we
  - `ListHeader`
  - `ListItem`
  - `List`
+ - [`Styling & Themes`](../themes/overview.md)
 
 ## Additional Resources
 

doc/en/components/grids/tree.md

@@ -332,7 +332,7 @@ Loading a greater number of children on demand in the {ProductName} Tree might n
 
 ## Styling
 
-You can change the appearance of the `TreeItem`s, by using some of the exposed CSS parts listed below:
+You can change the appearance of the `TreeItem`, by using some of the exposed CSS parts listed below:
 
 | Part name | Description |
 | ---------|------------ |
@@ -349,27 +349,22 @@ Using these CSS parts we can customize thе appearance of the `Tree` component l
 
 ```css
 igc-tree-item::part(active) {
-    background: #ecaa53;
-}
-
-igc-tree-item::part(selected) {
-    background: #ffe6cc;
-}
-
-igc-tree-item::part(active selected) {
-    background: #ff8c1a;
-    color: white;
+  background: var(--ig-secondary-500);
+  color: var(--ig-secondary-500-contrast);
 }
 ```
 
+`sample="/grids/tree/styling", height="400", alt="Tree Styling Example"`
+
 <div class="divider--half"></div>
 
 ## API References
 
-* `Tree`
-* `TreeItem`
-* `CircularProgress`
-* `Icon`
+- `Tree`
+- `TreeItem`
+- `Icon`
+- `CircularProgress`
+- [`Styling & Themes`](../themes/overview.md)
 
 ## Additional Resources
 

doc/en/components/inputs/badge.md

@@ -143,22 +143,25 @@ The badge component supports `rounded`(default) and `square` shapes. These value
 
 ## Styling
 
-The badge component exposes a `base` part that can be used to change all of its style properties.
+The `Badge` component exposes a `base` CSS part that can be used to change all of its style properties.
 
 ```css
 igc-badge::part(base) {
-  color: olive;
-  background: beige;
+  background: var(--ig-primary-500);
+  color: var(--ig-primary-500-contrast);
   border-radius: 2px;
 }
 ```
 
+`sample="/inputs/badge/styling", height="60", alt="{Platform} Badge Example"`
+
 
 <div class="divider--half"></div>
 
 ## API References
 
  - `Badge`
+ - [`Styling & Themes`](../themes/overview.md)
 
 ## Additional Resources
 

doc/en/components/inputs/button-group.md

@@ -7,7 +7,7 @@ mentionedTypes: ["ToggleButton", "ButtonGroup"]
 
 # {Platform} Button Group Overview
 
-The {Platform} Button Group component is used to organize `ToggleButton`s into styled button groups with horizontal/vertical alignment, single/multiple selection and toggling.
+The {Platform} Button Group component is used to organize `ToggleButton`'s into styled button groups with horizontal/vertical alignment, single/multiple selection and toggling.
 
 ## {Platform} Button Example
 
@@ -223,6 +223,17 @@ The `--ig-size` CSS custom property can be used to control the size of the butto
 The `ButtonGroup` component exposes `group` CSS part that allows us to style the button group container. 
 Also, the `ToggleButton`s provide `toggle` CSS part that could be used to style the button element.
 
+```css
+igc-button-group::part(group) {
+  background-color: var(--ig-primary-500);
+  padding: 8px;
+}
+
+igc-toggle-button::part(toggle) {
+  color: var(--ig-secondary-300);
+}
+```
+
 `sample="/inputs/button-group/styling", height="200", alt="{Platform} Button Group Styling Example"`
 
 ## API Reference
@@ -231,6 +242,7 @@ Also, the `ToggleButton`s provide `toggle` CSS part that could be used to style
 - `ToggleButton`
 - `Ripple`
 - `Icon`
+- [`Styling & Themes`](../themes/overview.md)
 
 
 ## Additional Resources

doc/en/components/inputs/button.md

@@ -323,13 +323,21 @@ Setting the `download` property will prompt the user to save the linked URL inst
 
 ## Styling
 
-The button component exposes `base` CSS part that allows us to style the wrapped element (`<button>` or `<a>`).
+The `Button` component exposes three CSS parts which we can use for styling:
+
+|Name|Description|
+|--|--|
+| `base` | The native button element of the igc-button component. |
+| `prefix` | The prefix container of the igc-button component. |
+| `suffix` | The suffix container of the igc-button component. |
+
+The `base` CSS part allows us to style the wrapped element (`<button>` or `<a>`).
 
 ```css
 igc-button::part(base) {
-    background-color: #e99221;
-    color: #011627;
-    padding: 18px;
+  background-color: var(--ig-primary-500);
+  color: var(--ig-primary-500-contrast);
+  padding: 18px;
 }
 ```
 
@@ -346,7 +354,7 @@ igc-button::part(base) {
  - `Href`
  - `RadioGroup`
  - `Radio`
-
+ - [`Styling & Themes`](../themes/overview.md)
 
 ## Additional Resources
 

doc/en/components/inputs/checkbox.md

@@ -256,32 +256,36 @@ You can use the `name` and `value` attributes when using the checkbox with `Form
 
 ## Styling
 
-The checkbox component exposes several CSS parts (`base`, `control`, `indicator`, and `label`) to give you full control over its styling.
+The `Checkbox` component exposes four CSS parts which we can use for styling:
+
+|Name|Description|
+|--|--|
+| `base` | The base wrapper of the checkbox. |
+| `control` | The checkbox input element. |
+| `indicator` | The checkbox indicator icon. |
+| `label` | The checkbox label. |
+
+With this four CSS parts we have full control over the Checkbox styling.
 
 ```css
 igc-checkbox::part(indicator) {
-  &::after {
-    padding: 12px;
-    border-radius: 14px;
-  }
+  stroke: var(--ig-secondary-500-contrast);
 }
 
-igc-checkbox::part(indicator checked) {
-  border-radius: 0;
-
-  &::after {
-    background: olive;
-    border-color: olive;
-    stroke: beige;
-  }
+igc-checkbox::part(control checked)::after {
+  border-radius: 4px;
+  background: var(--ig-secondary-500);
 }
 ```
+
+`sample="/inputs/checkbox/styling", height="100", alt="{Platform} Checkbox Styling Example"`
+
 ## API References
 
  - `Checkbox`
  - `Checked`
  - `Disabled`
- - `Form`
+ - [`Styling & Themes`](../themes/overview.md)
 
 
 ## Additional Resources

doc/en/components/inputs/chip.md

@@ -194,7 +194,7 @@ We allow the user to choose the size of the `Chip` by utilizing the `--ig-size`
 
 ```css
 igc-chip {
-    --ig-size: var(--ig-size-large);
+  --ig-size: var(--ig-size-large);
 }
 ```
 
@@ -203,27 +203,25 @@ igc-chip {
 
 ## Styling
 
-The chip component exposes a `Base`, `Prefix`, `Sufix` parts and several slots that can be used to change all of its style properties.
+The `Chip` component exposes a `base`, `prefix`, `suffix` CSS parts that can be used to change all of its style properties.
 
 ```css
 igc-chip::part(base) {
-    background: #011627;
-    color: #ECAA53;
+  background: var(--ig-primary-500);
+  color: var(--ig-primary-500-contrast);
 }
 
 igc-chip::part(suffix) {
-    color: #B7B6C2;
+  color: var(--ig-gray-400);
 }
 ```
 
 `sample="/inputs/chip/styling", height="80", alt="{Platform} Chip Styling Example"`
 
-<div class="divider--half"></div>
-
 ## API References
 
  - `Chip`
-
+ - [`Styling & Themes`](../themes/overview.md)
 
 ## Additional Resources
 

doc/en/components/inputs/circular-progress.md

@@ -181,39 +181,54 @@ Customizing the progress bar in order to use a color gradient instead of a solid
 
 ## Styling
 
-The {ProductName} Circular Procress Indicator component exposes CSS parts for almost all of its inner elements.
+The `CircularProgress` component exposes CSS parts for almost all of its inner elements:
 
-`sample="/inputs/circular-progress-indicator/styling", height="150", alt="{Platform} Circular Progress Styling"`
+|Name|Description|
+|--|--|
+| `svg`               | The progress SVG element.                 |
+| `gradient_start`     | The progress linear-gradient start color. |
+| `gradient_end`       | The progress linear-gradient end color.   |
+| `track`              | The progress ring's track area.           |
+| `fill`               | The progress indicator area.              |
+| `label`              | The progress label.                       |
+| `value`              | The progress label value.                 |
+| `indeterminate`      | The progress indeterminate state.         |
+| `primary`            | The progress indicator primary state.     |
+| `danger`             | The progress indicator error state.       |
+| `warning`            | The progress indicator warning state.     |
+| `info`               | The progress indicator info state.        |
+| `success`            | The progress indicator success state.     |
 
+Using this CSS parts we have almost full control over the Circular Progress styling.
 
+```css
 
-The following table lists all CSS parts exposed by the Circular Progress:
+igc-circular-progress {
+  margin: 20px;
+  --diameter: 50px;
+}
+
+igc-circular-progress::part(gradient_end),
+igc-circular-progress::part(gradient_start) {
+  stop-color: var(--ig-success-200);
+}
+
+igc-circular-progress::part(track) {
+  stroke: var(--ig-gray-400);
+}
+
+```
+
+`sample="/inputs/circular-progress-indicator/styling", height="150", alt="{Platform} Circular Progress Styling"`
 
-|Name|Description|
-|--|--|
-| svg                | The progress SVG element.                 |
-| gradient_start     | The progress linear-gradient start color. |
-| gradient_end       | The progress linear-gradient end color.   |
-| track              | The progress ring's track area.           |
-| fill               | The progress indicator area.              |
-| label              | The progress label.                       |
-| value              | The progress label value.                 |
-| indeterminate      | The progress indeterminate state.         |
-| primary            | The progress indicator primary state.     |
-| danger             | The progress indicator error state.       |
-| warning            | The progress indicator warning state.     |
-| info               | The progress indicator info state.        |
-| success            | The progress indicator success state.     |
-
-
-<div class="divider"></div>
 
 ## API References
 
  - `Button`
  - `Calendar`
  - `CircularGradient`
  - `CircularProgress`
+ - [`Styling & Themes`](../themes/overview.md)
 
 
 ## Additional Resources