calvin-codecov · calvin-codecov · Apr 18, 2025 · Apr 18, 2025 · Apr 18, 2025 · Apr 18, 2025
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,6 +1,6 @@
 version: 2.1
 orbs:
-  aws-cli: circleci/aws-cli@5.2.0
+  aws-cli: circleci/aws-cli@5.3.1
   aws-s3: circleci/[email protected]
 
 parameters:

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -18,13 +18,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - run: echo "${{ github.actor }}"
-      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4.1.7
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
         with:
           fetch-depth: 0
       - name: Set up pnpm
         uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
       - name: Use Node.js 20.x
-        uses: actions/setup-node@1d0ff469b7ec7b3cb9d8673fde0c81c44821de2a # v4.2.0
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
         with:
           node-version: 20
           cache: 'pnpm' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies
@@ -66,3 +66,12 @@ jobs:
         run: |
           git remote -v
           pnpm release:tag --dryRun
+
+  codecov-step:
+    name: Codecov
+    runs-on: ubuntu-latest
+    steps:
+      - name: Upload coverage to Codecov
+        run: pnpm codecov
+        env:
+          CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN || ''}}
diff --git a/apps/bare-next-app/package.json b/apps/bare-next-app/package.json
@@ -25,7 +25,7 @@
   "devDependencies": {
     "@pigment-css/nextjs-plugin": "0.0.30",
     "@types/node": "^20.17.30",
-    "@types/react": "^19.1.1",
+    "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "eslint": "^8.57.1",
     "typescript": "^5.8.3"

diff --git a/apps/pigment-css-next-app/package.json b/apps/pigment-css-next-app/package.json
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@pigment-css/nextjs-plugin": "0.0.30",
     "@types/node": "^20.17.30",
-    "@types/react": "^19.1.1",
+    "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "eslint": "^8.57.1",
     "typescript": "^5.8.3"

diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
@@ -28,10 +28,10 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.27.0",
     "@pigment-css/vite-plugin": "0.0.30",
-    "@types/react": "^19.1.1",
+    "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
     "@types/webfontloader": "^1.6.38",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.4.1",
     "postcss": "^8.5.3",
     "postcss-combine-media-query": "^1.0.1",
     "vite": "5.4.18",

diff --git a/docs/data/material/components/init-color-scheme-script/init-color-scheme-script.md b/docs/data/material/components/init-color-scheme-script/init-color-scheme-script.md
@@ -0,0 +1,137 @@
+---
+productId: material-ui
+title: InitColorSchemeScript component
+components: InitColorSchemeScript
+githubSource: packages/mui-material/src/InitColorSchemeScript
+---
+
+# InitColorSchemeScript
+
+<p class="description">The InitColorSchemeScript component eliminates dark mode flickering in server-side-rendered applications.</p>
+
+## Introduction
+
+The `InitColorSchemeScript` component is used to remove the dark mode flicker that can occur in server-side-rendered (SSR) applications.
+This script runs before React to attach an attribute based on the user preference so that the correct color mode is applied on first render.
+
+For the best user experience, you should implement this component in any server-rendered Material UI app that supports both light and dark modes.
+
+## Basics
+
+First, enable CSS variables with `colorSchemeSelector: 'data'` in your theme.
+
+```js
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  cssVariables: {
+    colorSchemeSelector: 'data',
+  },
+});
+
+function App() {
+  return <ThemeProvider theme={theme}>{/* Your app */}</ThemeProvider>;
+}
+```
+
+Then, render the `InitColorSchemeScript` component as the first child of the `<body>` tag.
+
+The sections below detail where to render the `InitColorSchemeScript` component when working with Next.js.
+
+### Next.js App Router
+
+Place the `InitColorSchemeScript` component in the root `layout` file:
+
+```js title="src/app/layout.tsx"
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+
+export default function RootLayout(props: { children: React.ReactNode }) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body>
+        <InitColorSchemeScript />
+        {props.children}
+      </body>
+    </html>
+  );
+}
+```
+
+### Next.js Pages Router
+
+Place the `InitColorSchemeScript` component in a custom `_document` file:
+
+```js title="pages/_document.tsx"
+import { Html, Head, Main, NextScript } from 'next/document';
+import InitColorSchemeScript from '@mui/material/InitColorSchemeScript';
+
+export default function MyDocument(props) {
+  return (
+    <Html lang="en">
+      <Head>{/* tags */}</Head>
+      <body>
+        <InitColorSchemeScript />
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}
+```
+
+## Customization
+
+### Class attribute
+
+To attach classes to DOM elements, set the `attribute` prop to `"class"`.
+
+```js
+<InitColorSchemeScript attribute="class" />
+```
+
+This sets the class name on the color scheme node (which defaults to `<html>`) according to the user's system preference.
+
+```html
+<html class="dark"></html>
+```
+
+### Arbitrary attribute
+
+To attach arbitrary attributes to DOM elements, use `%s` as a placeholder on the `attribute` prop.
+
+```js
+<InitColorSchemeScript attribute="[data-theme='%s']" /> // <html data-theme="dark">
+<InitColorSchemeScript attribute=".mode-%s" /> // <html class="mode-dark">
+```
+
+### Default mode
+
+Set the `defaultMode` prop to specify the default mode when the user first visits the page.
+
+For example, if you want users to see the dark mode on their first visit, set the `defaultMode` prop to `"dark"`.
+
+```js
+<InitColorSchemeScript defaultMode="dark" />
+```
+
+## Caveats
+
+### Attribute
+
+When customizing the `attribute` prop, make sure to set the `colorSchemeSelector` in the theme to match the attribute you are using.
+
+```js
+const theme = createTheme({
+  cssVariables: {
+    colorSchemeSelector: 'same value as the `attribute` prop',
+  },
+});
+```
+
+### Default mode
+
+When customizing the `defaultMode` prop, make sure to do the same with the `ThemeProvider` component:
+
+```js
+<ThemeProvider theme={theme} defaultMode="dark">
+```
diff --git a/docs/data/material/customization/css-theme-variables/configuration.md b/docs/data/material/customization/css-theme-variables/configuration.md
@@ -26,49 +26,51 @@ createTheme({ cssVariables: { cssVarPrefix: '' } });
 
 To toggle between modes manually, set the `colorSchemeSelector` with one of the following selectors:
 
-<codeblock>
-
-```js class
-createTheme({
-  colorSchemes: { light: true, dark: true },
-  cssVariables: {
-    colorSchemeSelector: 'class'
-  }
-});
-
-// CSS Result
-.light { ... }
-.dark { ... }
-```
-
-```js data
-createTheme({
-  colorSchemes: { light: true, dark: true },
-  cssVariables: {
-    colorSchemeSelector: 'data'
-  }
-});
-
-// CSS Result
-[data-light] { ... }
-[data-dark] { ... }
-```
-
-```js string
-// The value must start with dot (.) for class or square brackets ([]) for data
-createTheme({
-  colorSchemes: { light: true, dark: true },
-  cssVariables: {
-    colorSchemeSelector: '.theme-%s'
-  }
-});
-
-// CSS Result
-.theme-light { ... }
-.theme-dark { ... }
-```
-
-</codeblock>
+- `class`: adds a class to the `<html>` element.
+
+  ```js class
+  createTheme({
+    colorSchemes: { light: true, dark: true },
+    cssVariables: {
+      colorSchemeSelector: 'class'
+    }
+  });
+
+  // CSS Result
+  .light { ... }
+  .dark { ... }
+  ```
+
+- `data`: adds a data attribute to the `<html>` element.
+
+  ```js data
+  createTheme({
+    colorSchemes: { light: true, dark: true },
+    cssVariables: {
+      colorSchemeSelector: 'data'
+    }
+  });
+
+  // CSS Result
+  [data-light] { ... }
+  [data-dark] { ... }
+  ```
+
+- `string`: adds a custom selector to the `<html>` element.
+
+  ```js string
+  // The value must start with dot (.) for class or square brackets ([]) for data
+  createTheme({
+    colorSchemes: { light: true, dark: true },
+    cssVariables: {
+      colorSchemeSelector: '.theme-%s'
+    }
+  });
+
+  // CSS Result
+  .theme-light { ... }
+  .theme-dark { ... }
+  ```
 
 Then, use `useColorScheme` hook to switch between modes:
 
@@ -162,7 +164,7 @@ If you have such a condition, replace it with the [`theme.applyStyles()` functio
  }
 ```
 
-Next, if you have a custom selector that is **not** `media`, add the `InitColorSchemeScript` component based on the framework that you are using:
+Next, if you have a custom selector that is **not** `media`, add the [`InitColorSchemeScript`](/material-ui/react-init-color-scheme-script/) component based on the framework that you are using:
 
 :::success
 The `attribute` has to be the same as the one you set in the `colorSchemeSelector` property:

diff --git a/docs/data/material/integrations/interoperability/interoperability.md b/docs/data/material/integrations/interoperability/interoperability.md
@@ -11,7 +11,7 @@ There are examples for the following styling solutions:
 - [Styled Components](#styled-components)
 - [CSS Modules](#css-modules)
 - [Emotion](#emotion)
-- [Tailwind CSS](#tailwind-css)
+- [Tailwind CSS v3](#tailwind-css-v3)
 - [~~JSS~~ TSS](#jss-tss)
 
 ## Plain CSS
@@ -573,11 +573,15 @@ It works exactly like styled components. You can [use the same guide](/material-
 
 It works exactly like styled components. You can [use the same guide](/material-ui/integrations/interoperability/#styled-components).
 
-## Tailwind CSS
+## Tailwind CSS v3
 
 ![stars](https://img.shields.io/github/stars/tailwindlabs/tailwindcss.svg?style=social&label=Star)
 ![npm](https://img.shields.io/npm/dm/tailwindcss)
 
+:::info
+For Tailwind CSS v4, please refer to the [v4 integration guide](/material-ui/integrations/tailwindcss/tailwindcss-v4/).
+:::
+
 ### Setup
 
 <!-- #repo-reference -->

diff --git a/docs/data/material/integrations/tailwindcss/TextFieldTailwind.js b/docs/data/material/integrations/tailwindcss/TextFieldTailwind.js
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import FormControl from '@mui/material/FormControl';
+import InputLabel from '@mui/material/InputLabel';
+import Input from '@mui/material/Input';
+import FormHelperText from '@mui/material/FormHelperText';
+
+export default function TextFieldTailwind() {
+  return (
+    <FormControl>
+      <InputLabel
+        shrink
+        htmlFor="component-outlined"
+        className="relative top-0 left-0 transform-none text-sm font-medium text-neutral-800 dark:text-neutral-200 pointer-events-auto mb-0.5"
+      >
+        Name
+      </InputLabel>
+      <Input
+        id="component-outlined"
+        placeholder="Type your name"
+        slotProps={{
+          root: {
+            className:
+              'mt-0 -ml-0.5 px-2 h-10 border-1 border-neutral-300 dark:border-neutral-700 rounded-md has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm before:hidden after:hidden',
+          },
+          input: {
+            className:
+              'placeholder:opacity-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500',
+          },
+        }}
+      />
+      <FormHelperText className="ml-0">Some important helper text</FormHelperText>
+    </FormControl>
+  );
+}