Edit styling snippets for tabs, checkbox, badge, tree, dateTimeInput

doc/en/components/grids/tree.md

@@ -348,9 +348,9 @@ You can change the appearance of the `TreeItem`, by using some of the exposed CS
 Using these CSS parts we can customize thе appearance of the `Tree` component like this:
 
 ```css
-igc-tree-item::part(active) {
-  background: var(--ig-secondary-500);
-  color: var(--ig-secondary-500-contrast);
+igc-tree-item {
+    --background-active: var(--ig-secondary-500);
+    --foreground-active: var(--ig-secondary-500-contrast);
 }
 ```
 

doc/en/components/inputs/badge.md

@@ -165,9 +165,8 @@ The `Badge` component exposes a `base` CSS part that can be used to change all o
 
 ```css
 igc-badge::part(base) {
-  background: var(--ig-primary-500);
-  color: var(--ig-primary-500-contrast);
-  border-radius: 2px;
+    --background-color: var(--ig-error-A100);
+    --border-radius: 2px;
 }
 ```
 

doc/en/components/inputs/checkbox.md

@@ -269,12 +269,11 @@ With this four CSS parts we have full control over the Checkbox styling.
 
 ```css
 igc-checkbox::part(indicator) {
-  stroke: var(--ig-secondary-500-contrast);
+  --tick-color: var(--ig-secondary-500-contrast); /* check icon color */
 }
 
 igc-checkbox::part(control checked)::after {
-  border-radius: 4px;
-  background: var(--ig-secondary-500);
+  --fill-color: var(--ig-secondary-500); /* checkbox background color */
 }
 ```
 

doc/en/components/inputs/date-time-input.md

@@ -292,17 +292,22 @@ The `DateTimeInput` component exposes CSS parts for almost all of its inner elem
 | `helper-text` | The helper text wrapper. |
 
 ```css
-igc-date-time-input::part(input) {
-  background-color: var(--ig-primary-100);
-  border-color: var(--ig-secondary-500);
-  box-shadow: none;
-}
-
-igc-date-time-input::part(prefix),
-igc-date-time-input::part(suffix) {
-  color: var(--ig-primary-600-contrast);
-  background-color: var(--ig-primary-500);
-  border-color: var(--ig-secondary-500);
+igc-date-time-input {
+    --_background: var(--ig-primary-200);
+    --_foreground: var(--ig-gray-900);
+
+    --input-prefix-color: var(--_foreground);
+    --input-suffix-color: var(--_foreground);
+    --input-prefix-color--filled: var(--_foreground);
+    --input-suffix-color--filled: var(--_foreground);
+    --input-prefix-background: var(--_background);
+    --input-suffix-background: var(--_background);
+    --input-prefix-background--filled: var(--_background);
+    --input-suffix-background--filled: var(--_background);
+    --input-prefix-color--focused: var(--_foreground);
+    --input-suffix-color--focused: var(--_foreground);
+    --input-prefix-background--focused: var(--_background);
+    --input-suffix-background--focused: var(--_background);
 }
 ```
 

doc/en/components/inputs/switch.md

@@ -241,18 +241,13 @@ The `Switch` component exposes several CSS parts to give you full control over i
 | `label` | The switch label. |
 
 ```css
-igc-switch::part(thumb) {
-  background-color: var(--ig-success-500);
-  box-shadow: none;
-}
-
-igc-switch::part(thumb checked) {
-  background-color: var(--ig-gray-50);
-}
-
-igc-switch::part(control checked) {
-  background-color: var(--ig-success-500);
-}
+  igc-switch {
+    --thumb-on-color: white;
+    --thumb-off-color: var(--ig-success-500);
+    --track-on-color: var(--ig-success-500); /* Background color when checked */
+    --track-off-color: white; /* Background color when unchecked */
+    --track-on-hover-color: var(--ig-success-500); /* Background hover color when checked */
+  }
 ```
 
 `sample="/inputs/switches/styling", height="100", alt="{Platform} Switch Styling"`

doc/en/components/layouts/tabs.md

@@ -207,12 +207,39 @@ The `Tab` component exposes the following CSS parts:
 | `tab-body` | Holds the body content of a single tab, only the body of the selected tab is visible. |
 
 ```css
+igc-tab::part(tab-header),
+igc-tabs::part(inner)::after {
+    --item-background: var(--ig-surface-600);
+    --border-color: var(--ig-success-300);
+}
+
+igc-tab::part(tab-body),
+igc-tab[selected] igc-icon {
+    --item-active-icon-color: var(--ig-success-300);
+}
+
+igc-tab:not([selected]) igc-icon {
+    --item-icon-color: var(--ig-gray-500);
+}
+
+igc-tabs::part(start-scroll-button),
+igc-tabs::part(end-scroll-button) {
+    --background: var(--ig-surface-600);
+    --hover-background: var(--ig-surface-700);
+    --active-background: var(--ig-surface-700);
+    --disabled-background: var(--ig-gray-100);
+    --button-color: var(--ig-gray-700);
+    --button-hover-color: var(--ig-gray-800);
+    --button-disabled-color: var(--ig-gray-300);
+    --border-color: var(--ig-surface-600);
+}
+
 igc-tab::part(tab-header) {
-  background-color: var(--ig-surface-600);
+    --item-hover-color: var(--ig-success-500);
 }
 
-igc-tab::part(tab-body) {
-  color: var(--ig-success-300);
+igc-tab::part(tab-header)::before {
+    --border-color--hover: var(--ig-gray-500);
 }
 ```
 <!-- end: WebComponents, React -->
@@ -225,12 +252,39 @@ igc-tab::part(tab-body) {
 | `suffix` | The suffix wrapper. |
 
 ```css
-igc-tabs::part(headers-content) {
-  background-color: var(--ig-gray-200);
+igc-tab::part(tab-header),
+igc-tabs::part(inner)::after {
+    --item-background: var(--ig-surface-600);
+    --border-color: var(--ig-success-300);
+}
+
+igc-tab::part(tab-body),
+igc-tab[selected] igc-icon {
+    --item-active-icon-color: var(--ig-success-300);
+}
+
+igc-tab:not([selected]) igc-icon {
+    --item-icon-color: var(--ig-gray-500);
+}
+
+igc-tabs::part(start-scroll-button),
+igc-tabs::part(end-scroll-button) {
+    --background: var(--ig-surface-600);
+    --hover-background: var(--ig-surface-700);
+    --active-background: var(--ig-surface-700);
+    --disabled-background: var(--ig-gray-100);
+    --button-color: var(--ig-gray-700);
+    --button-hover-color: var(--ig-gray-800);
+    --button-disabled-color: var(--ig-gray-300);
+    --border-color: var(--ig-surface-600);
+}
+
+igc-tab::part(tab-header) {
+    --item-hover-color: var(--ig-success-500);
 }
 
-igc-tab::part(content) {
-  color: var(--ig-success-500);
+igc-tab::part(tab-header)::before {
+    --border-color--hover: var(--ig-gray-500);
 }
 ```
 <!-- end: Blazor -->