diff --git a/package-lock.json b/package-lock.json
index cf06986f9d4..149fe16d5fe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9748,9 +9748,9 @@
       "license": "MIT"
     },
     "node_modules/@primer/react": {
-      "version": "37.21.0",
-      "resolved": "https://registry.npmjs.org/@primer/react/-/react-37.21.0.tgz",
-      "integrity": "sha512-ZKAAY905Tugdoc+Z6EKwp0jcfdFJ10DCBz3pj8Fbk4Cu9YOdnlpGCnvItgxpsaJwtU8gSFjnWs5C0i/JjO8WIQ==",
+      "version": "37.23.0",
+      "resolved": "https://registry.npmjs.org/@primer/react/-/react-37.23.0.tgz",
+      "integrity": "sha512-SsSzlqnqbGGbE+f5Fa593dZGJHYSQ2X0uqemVdoluBTvJMwGgl1uvdmAAdtZzLhUu82MjMenkztziM9U/3ikEQ==",
       "license": "MIT",
       "dependencies": {
         "@github/relative-time-element": "^4.4.5",
@@ -9760,7 +9760,7 @@
         "@primer/behaviors": "^1.8.0",
         "@primer/live-region-element": "^0.7.1",
         "@primer/octicons-react": "^19.13.0",
-        "@primer/primitives": "9.x || 10.x",
+        "@primer/primitives": "10.x || 11.x",
         "@styled-system/css": "^5.1.5",
         "@styled-system/props": "^5.1.5",
         "@styled-system/theme-get": "^5.1.2",
@@ -9776,7 +9776,7 @@
         "hsluv": "1.0.1",
         "lodash.isempty": "^4.4.0",
         "lodash.isobject": "^3.0.2",
-        "react-intersection-observer": "^9.4.3",
+        "react-intersection-observer": "^9.16.0",
         "react-is": "^18.2.0",
         "styled-system": "^5.1.5",
         "type-check": "0.4.0"
@@ -19074,14 +19074,17 @@
       }
     },
     "node_modules/eslint-config-prettier": {
-      "version": "10.1.2",
-      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.2.tgz",
-      "integrity": "sha512-Epgp/EofAUeEpIdZkW60MHKvPyru1ruQJxPL+WIycnaPApuseK0Zpkrh/FwL9oIpQvIhJwV7ptOy0DWUjTlCiA==",
+      "version": "10.1.5",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.5.tgz",
+      "integrity": "sha512-zc1UmCpNltmVY34vuLRV61r1K27sWuX39E+uyUnY8xS2Bex88VV9cugG+UZbRSRGtGyFboj+D8JODyme1plMpw==",
       "dev": true,
       "license": "MIT",
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
+      "funding": {
+        "url": "https://opencollective.com/eslint-config-prettier"
+      },
       "peerDependencies": {
         "eslint": ">=7.0.0"
       }
@@ -20288,9 +20291,9 @@
       }
     },
     "node_modules/eslint-plugin-prettier": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.3.1.tgz",
-      "integrity": "sha512-vad9VWgEm9xaVXRNmb4aeOt0PWDc61IAdzghkbYQ2wavgax148iKoX1rNJcgkBGCipzLzOnHYVgL7xudM9yccQ==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.4.0.tgz",
+      "integrity": "sha512-BvQOvUhkVQM1i63iMETK9Hjud9QhqBnbtT1Zc642p9ynzBuCe5pybkOnvqZIBypXmMlsGcnU4HZ8sCTPfpAexA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -22712,12 +22715,12 @@
       }
     },
     "node_modules/framer-motion": {
-      "version": "12.9.4",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.9.4.tgz",
-      "integrity": "sha512-yaeGDmGQ3eCQEwZ95/pRQMaSh/Q4E2CK6JYOclG/PdjyQad0MULJ+JFVV8911Fl5a6tF6o0wgW8Dpl5Qx4Adjg==",
+      "version": "12.10.5",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.10.5.tgz",
+      "integrity": "sha512-p6VF1YkwWvNDFzg5IQ5lqPx11Td4TQ6LqDnshV7sWj0Nrp4dwz2/aEzmgh9WA9ridcTIJ625Fr0oiuhgqIoFwQ==",
       "license": "MIT",
       "dependencies": {
-        "motion-dom": "^12.9.4",
+        "motion-dom": "^12.10.5",
         "motion-utils": "^12.9.4",
         "tslib": "^2.4.0"
       },
@@ -34056,9 +34059,9 @@
       }
     },
     "node_modules/motion-dom": {
-      "version": "12.9.4",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.9.4.tgz",
-      "integrity": "sha512-25TWkQPj5I18m+qVjXGtCsxboY11DaRC5HMjd29tHKExazW4Zf4XtAagBdLpyKsVuAxEQ6cx5/E4AB21PFpLnQ==",
+      "version": "12.10.5",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.10.5.tgz",
+      "integrity": "sha512-F7XKmhxXEH/y3aWWf0N2w69wNSN+6PcJ1seqR1WolClmXpPhj+xwzs9j5CpsMFzeHR1D7irl3JcWMToPRwX6Hg==",
       "license": "MIT",
       "dependencies": {
         "motion-utils": "^12.9.4"
@@ -38826,9 +38829,9 @@
       }
     },
     "node_modules/react-intersection-observer": {
-      "version": "9.14.0",
-      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.14.0.tgz",
-      "integrity": "sha512-AYqlmDZn85VUmlODwYym9y5OlqY2cFyIu41dkN0GJWvhdbd19Mh16mz5IH6fO1gp5V4FfQOO4m0zGc04Tj13rQ==",
+      "version": "9.16.0",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.16.0.tgz",
+      "integrity": "sha512-w9nJSEp+DrW9KmQmeWHQyfaP6b03v+TdXynaoA964Wxt7mdR3An11z4NNCQgL4gKSK7y1ver2Fq+JKH6CWEzUA==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
diff --git a/src/components/text-input.js b/src/components/text-input.js
index fe95ad6a34c..869f316562a 100644
--- a/src/components/text-input.js
+++ b/src/components/text-input.js
@@ -8,6 +8,7 @@ const TextInput = styled(PrimerTextInput)`
    */
   input {
     font-size: ${themeGet('fontSizes.2')} !important;
+    color: ${themeGet('colors.fg.default')} !important;
   }
 
   input::placeholder {
diff --git a/src/components/variant-select.js b/src/components/variant-select.js
index 5add23dd59c..b04f0271762 100644
--- a/src/components/variant-select.js
+++ b/src/components/variant-select.js
@@ -4,6 +4,15 @@ import * as getNav from '../util/get-nav'
 import usePage from '../hooks/use-page'
 import {LinkNoUnderline} from './link'
 import useLocationChange from '../hooks/use-location-change'
+import styled from 'styled-components'
+
+const StyledOverlay = styled(ActionMenu.Overlay)`
+  background-color: var(--bgColor-default, #ffffff) !important;
+  border-color: var(--borderColor-default, #d0d7de);
+  border-width: 1px;
+  border-style: solid;
+  box-shadow: var(--shadow-resting-medium, 0 3px 6px rgba(140, 149, 159, 0.15));
+`
 
 const VariantItem = ({title, shortName, url, active}) => (
   <ActionList.Item as={LinkNoUnderline} to={url} state={{scrollUpdate: false}} id={shortName} active={active}>
@@ -38,7 +47,7 @@ const VariantMenu = ({title, latest, current, prerelease, legacy}) => {
         <ActionMenu.Button aria-describedby={labelId} sx={{width: ['100%', null, 'auto']}}>
           {title}
         </ActionMenu.Button>
-        <ActionMenu.Overlay width="auto" onEscape={() => setOpen(false)}>
+        <StyledOverlay width="auto" onEscape={() => setOpen(false)}>
           <ActionList aria-labelledby={labelId}>
             <ActionList.Group>
               <ActionList.GroupHeading>Current</ActionList.GroupHeading>
@@ -53,7 +62,7 @@ const VariantMenu = ({title, latest, current, prerelease, legacy}) => {
               ))}
             </ActionList.Group>
           </ActionList>
-        </ActionMenu.Overlay>
+        </StyledOverlay>
       </ActionMenu>
     </>
   )