Add @primer/react-brand foundation and migrate Pagination (#62080)

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: Ebonsignori

next.config.ts

@@ -12,9 +12,10 @@ const { data } = frontmatter(fs.readFileSync(homepage, 'utf8'))
 const productIds = data.children as string[]
 
 const config: NextConfig = {
-  // Transpile @primer/react so Next's webpack can process its CSS and other assets
-  // This ensures CSS in node_modules/@primer/react is handled by the app's loaders.
-  transpilePackages: ['@primer/react'],
+  // Transpile @primer/react and @primer/react-brand so Next's webpack can process their
+  // CSS and other assets. This ensures CSS from these node_modules packages is handled by
+  // the app's loaders.
+  transpilePackages: ['@primer/react', '@primer/react-brand'],
   // Keep OTel packages out of the Next.js server bundle.
   // They must be loaded via native require() for auto-instrumentation to work.
   serverExternalPackages: [

package-lock.json

@@ -191,6 +191,7 @@
     "@primer/octicons-react": "^19.22.0",
     "@primer/primitives": "^11.3.1",
     "@primer/react": "^38.13.0",
+    "@primer/react-brand": "^0.70.0",
     "accept-language-parser": "^1.5.0",
     "ajv": "^8.18.0",
     "ajv-errors": "^3.0.0",

package.json

@@ -3,6 +3,7 @@ import App from 'next/app'
 import type { AppProps, AppContext } from 'next/app'
 import Head from 'next/head'
 import { ThemeProvider } from '@primer/react'
+import { ThemeProvider as BrandThemeProvider } from '@primer/react-brand'
 import { useRouter } from 'next/router'
 
 import { initializeEvents } from '@/events/components/events'
@@ -111,12 +112,22 @@ const MyApp = ({ Component, pageProps, languagesContext, stagingName }: MyAppPro
         dayScheme={theme.component.dayScheme}
         nightScheme={theme.component.nightScheme}
       >
-        <LanguagesContext.Provider value={languagesContext}>
-          <SharedUIContextProvider>
-            <ClientSideHashFocus />
-            <Component {...pageProps} />
-          </SharedUIContextProvider>
-        </LanguagesContext.Provider>
+        {/*
+          Primer Brand ThemeProvider, nested so migrated @primer/react-brand
+          components receive brand theme context during the Docs 2026 migration
+          (github/docs-engineering#5879). Runs alongside the @primer/react
+          ThemeProvider above while the component-by-component swap is in progress.
+          Brand expects a CSS color mode ('auto' | 'light' | 'dark'), so pass
+          theme.css.colorMode rather than the component ('auto' | 'day' | 'night') mode.
+        */}
+        <BrandThemeProvider colorMode={theme.css.colorMode}>
+          <LanguagesContext.Provider value={languagesContext}>
+            <SharedUIContextProvider>
+              <ClientSideHashFocus />
+              <Component {...pageProps} />
+            </SharedUIContextProvider>
+          </LanguagesContext.Provider>
+        </BrandThemeProvider>
       </ThemeProvider>
     </>
   )

src/frame/pages/app.tsx

@@ -8,6 +8,10 @@
 @import "@primer/css/alerts/index.scss";
 @import "@primer/css/popover/index.scss";
 
+// Primer Brand design system (Docs 2026 migration — github/docs-engineering#5879).
+// Loaded alongside @primer/css during the incremental component-by-component swap.
+@import "@primer/react-brand/lib/css/main.css";
+
 @import "headings.scss";
 @import "scroll-top.scss";
 @import "utilities.scss";

src/frame/stylesheets/index.scss

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect, useMemo } from 'react'
-import { TextInput, ActionMenu, ActionList, Token, Pagination } from '@primer/react'
+import { TextInput, ActionMenu, ActionList, Token } from '@primer/react'
+import { Pagination } from '@primer/react-brand'
 import { SearchIcon } from '@primer/octicons-react'
 import { announce } from '@primer/live-region-element'
 import cx from 'classnames'

src/landings/components/shared/LandingArticleGridWithFilter.tsx

@@ -1,4 +1,4 @@
-import { Pagination } from '@primer/react'
+import { Pagination } from '@primer/react-brand'
 import { SearchIcon } from '@primer/octicons-react'
 import { useRouter } from 'next/router'
 import React, { useEffect, useRef, useState } from 'react'

src/search/components/results/SearchResults.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useMemo, useEffect, useRef, useCallback } from 'react'
 import { DataTable, Table } from '@primer/react/experimental'
-import { TextInput, ActionMenu, ActionList, Pagination, Button } from '@primer/react'
+import { TextInput, ActionMenu, ActionList, Button } from '@primer/react'
+import { Pagination } from '@primer/react-brand'
 import debounce from 'lodash/debounce'
 import { useTranslation } from '@/languages/components/useTranslation'
 import { sendEvent } from '@/events/components/events'