fix: update component styles for changes in @primer/react package
Michael Smith committed
May 12, 2025 at 10:25 UTC
cfd4a6b2637f95f2fe61f07e00de0a0d226f1e7c
2 files changed
+12
-2
src/components/text-input.js
+1
@@ -8,6 +8,7 @@ const TextInput = styled(PrimerTextInput)`
8
*/
9
input {
10
font-size: ${themeGet('fontSizes.2')} !important;
11
+ color: ${themeGet('colors.fg.default')} !important;
12
}
13
14
input::placeholder {
src/components/variant-select.js
+11
-2
@@ -4,6 +4,15 @@ import * as getNav from '../util/get-nav'
4
import usePage from '../hooks/use-page'
5
import {LinkNoUnderline} from './link'
6
import useLocationChange from '../hooks/use-location-change'
7
+import styled from 'styled-components'
8
+
9
+const StyledOverlay = styled(ActionMenu.Overlay)`
10
+ background-color: var(--bgColor-default, #ffffff) !important;
11
+ border-color: var(--borderColor-default, #d0d7de);
12
+ border-width: 1px;
13
+ border-style: solid;
14
+ box-shadow: var(--shadow-resting-medium, 0 3px 6px rgba(140, 149, 159, 0.15));
15
+`
16
17
const VariantItem = ({title, shortName, url, active}) => (
18
<ActionList.Item as={LinkNoUnderline} to={url} state={{scrollUpdate: false}} id={shortName} active={active}>
@@ -38,7 +47,7 @@ const VariantMenu = ({title, latest, current, prerelease, legacy}) => {
47
<ActionMenu.Button aria-describedby={labelId} sx={{width: ['100%', null, 'auto']}}>
48
{title}
49
</ActionMenu.Button>
41
- <ActionMenu.Overlay width="auto" onEscape={() => setOpen(false)}>
50
+ <StyledOverlay width="auto" onEscape={() => setOpen(false)}>
51
<ActionList aria-labelledby={labelId}>
52
<ActionList.Group>
53
<ActionList.GroupHeading>Current</ActionList.GroupHeading>
@@ -53,7 +62,7 @@ const VariantMenu = ({title, latest, current, prerelease, legacy}) => {
62
))}
63
</ActionList.Group>
64
</ActionList>
56
- </ActionMenu.Overlay>
65
+ </StyledOverlay>
66
</ActionMenu>
67
</>
68
)