[docs] Use direct palette vars in Tailwind v4 snippet

docs/data/material/integrations/tailwindcss/tailwindcss-v4.md

@@ -184,48 +184,48 @@ If you want to use Material UI theme tokens in your Tailwind CSS classes, copy
   --breakpoint-2xl: 120rem; /* 1920px */
 
   /* Material UI theme colors */
-  --color-primary: rgb(var(--mui-palette-primary-mainChannel));
-  --color-primary-light: rgb(var(--mui-palette-primary-lightChannel));
-  --color-primary-dark: rgb(var(--mui-palette-primary-darkChannel));
-  --color-primary-contrast: rgb(var(--mui-palette-primary-contrastTextChannel));
+  --color-primary: var(--mui-palette-primary-main);
+  --color-primary-light: var(--mui-palette-primary-light);
+  --color-primary-dark: var(--mui-palette-primary-dark);
+  --color-primary-contrast: var(--mui-palette-primary-contrastText);
 
-  --color-secondary: rgb(var(--mui-palette-secondary-mainChannel));
-  --color-secondary-light: rgb(var(--mui-palette-secondary-lightChannel));
-  --color-secondary-dark: rgb(var(--mui-palette-secondary-darkChannel));
-  --color-secondary-contrast: rgb(var(--mui-palette-secondary-contrastTextChannel));
+  --color-secondary: var(--mui-palette-secondary-main);
+  --color-secondary-light: var(--mui-palette-secondary-light);
+  --color-secondary-dark: var(--mui-palette-secondary-dark);
+  --color-secondary-contrast: var(--mui-palette-secondary-contrastText);
 
   /* Material UI status colors */
-  --color-info: rgb(var(--mui-palette-info-mainChannel));
-  --color-info-light: rgb(var(--mui-palette-info-lightChannel));
-  --color-info-dark: rgb(var(--mui-palette-info-darkChannel));
-  --color-info-contrast: rgb(var(--mui-palette-info-contrastTextChannel));
-
-  --color-error: rgb(var(--mui-palette-error-mainChannel));
-  --color-error-light: rgb(var(--mui-palette-error-lightChannel));
-  --color-error-dark: rgb(var(--mui-palette-error-darkChannel));
-  --color-error-contrast: rgb(var(--mui-palette-error-contrastTextChannel));
-
-  --color-success: rgb(var(--mui-palette-success-mainChannel));
-  --color-success-light: rgb(var(--mui-palette-success-lightChannel));
-  --color-success-dark: rgb(var(--mui-palette-success-darkChannel));
-  --color-success-contrast: rgb(var(--mui-palette-success-contrastTextChannel));
-
-  --color-warning: rgb(var(--mui-palette-warning-mainChannel));
-  --color-warning-light: rgb(var(--mui-palette-warning-lightChannel));
-  --color-warning-dark: rgb(var(--mui-palette-warning-darkChannel));
-  --color-warning-contrast: rgb(var(--mui-palette-warning-contrastTextChannel));
+  --color-info: var(--mui-palette-info-main);
+  --color-info-light: var(--mui-palette-info-light);
+  --color-info-dark: var(--mui-palette-info-dark);
+  --color-info-contrast: var(--mui-palette-info-contrastText);
+
+  --color-error: var(--mui-palette-error-main);
+  --color-error-light: var(--mui-palette-error-light);
+  --color-error-dark: var(--mui-palette-error-dark);
+  --color-error-contrast: var(--mui-palette-error-contrastText);
+
+  --color-success: var(--mui-palette-success-main);
+  --color-success-light: var(--mui-palette-success-light);
+  --color-success-dark: var(--mui-palette-success-dark);
+  --color-success-contrast: var(--mui-palette-success-contrastText);
+
+  --color-warning: var(--mui-palette-warning-main);
+  --color-warning-light: var(--mui-palette-warning-light);
+  --color-warning-dark: var(--mui-palette-warning-dark);
+  --color-warning-contrast: var(--mui-palette-warning-contrastText);
 
   /* Material UI text & common colors */
-  --color-text-primary: rgb(var(--mui-palette-text-primaryChannel));
-  --color-text-secondary: rgb(var(--mui-palette-text-secondaryChannel));
+  --color-text-primary: var(--mui-palette-text-primary);
+  --color-text-secondary: var(--mui-palette-text-secondary);
   --color-text-disabled: var(--mui-palette-text-disabled);
   --color-common-background: var(--mui-palette-common-background);
   --color-common-onBackground: var(--mui-palette-common-onBackground);
   --color-divider: var(--mui-palette-divider);
 
   /* Material UI background colors */
-  --color-background-default: rgb(var(--mui-palette-background-defaultChannel));
-  --color-background-paper: rgb(var(--mui-palette-background-paperChannel));
+  --color-background-default: var(--mui-palette-background-default);
+  --color-background-paper: var(--mui-palette-background-paper);
 
   /* Material UI action colors */
   --color-action-active: var(--mui-palette-action-active);
@@ -455,7 +455,7 @@ If you want to use Material UI theme tokens in your Tailwind CSS classes, copy
 Then you can start using the new classes—for example:
 
 - The class `typography-h1` produces `font: var(--mui-font-h1);`
-- The class `text-primary` produces `color: rgb(var(--mui-palette-primary-mainChannel));`
+- The class `text-primary` produces `color: var(--mui-palette-primary-main);`
 
 So when you add these classes to an element…
 
@@ -472,14 +472,14 @@ So when you add these classes to an element…
     letter-spacing: -0.01562em;
   }
   .text-primary {
-    color: rgb(var(--mui-palette-primary-mainChannel));
+    color: var(--mui-palette-primary-main);
   }
 }
 ```
 
 ### Playground
 
-Visit the [Tailwind CSS Playground](https://play.tailwindcss.com/f1ZIr0qSNG) to explore the classes from Material UI theme tokens.
+Visit the [Tailwind CSS Playground](https://play.tailwindcss.com/mh7Ym0mGff) to explore the classes from Material UI theme tokens.
 
 ## Troubleshooting