Bump @primer/primitives to v5

.eslintrc.json

@@ -55,7 +55,8 @@
       {
         "allow": ["dark_dimmed"]
       }
-    ]
+    ],
+    "primer-react/no-deprecated-colors": ["warn", {"checkAllStrings": true}]
   },
   "overrides": [
     // rules which apply only to JS

codemods/deprecateUtilityComponents.js

@@ -50,7 +50,7 @@ module.exports = (file, api) => {
       attributes: {
         borderWidth: '1px',
         borderStyle: 'solid',
-        borderColor: 'border.primary',
+        borderColor: 'border.default',
         borderRadius: 2
       }
     }

docs/content/getting-started.md

@@ -90,7 +90,7 @@ import {BaseStyles, Box, Heading} from '@primer/components'
 export default () => (
   <BaseStyles>
     <Box m={4}>
-      <Heading mb={2}>Hello, world!</Heading>
+      <Heading sx={{mb: 2}}>Hello, world!</Heading>
       <p>This will get Primer text styles.</p>
     </Box>
   </BaseStyles>

docs/src/@primer/gatsby-theme-doctocat/components/hero.js

@@ -8,9 +8,7 @@ export default function Hero() {
   return (
     <Box bg="black" py={6}>
       <Container>
-        <Heading color="blue.4" fontSize={7} lineHeight="condensed" pb={3} m={0}>
-          Primer React
-        </Heading>
+        <Heading sx={{color: 'blue.4', fontSize: 7, lineHeight: 'condensed', pb: 3, m: 0}}>Primer React</Heading>
         <Text as="p" fontFamily="mono" mt={0} mb={2} color="blue.3" fontSize={2}>
           v{version}
         </Text>

docs/src/@primer/gatsby-theme-doctocat/components/nav-dropdown.js

@@ -12,7 +12,7 @@ function NavDropdown({title, children}) {
     <Details {...getDetailsProps()}>
       <summary style={{cursor: 'pointer'}}>
         <Text>{title}</Text>
-        <StyledOcticon icon={TriangleDownIcon} ml={1} />
+        <StyledOcticon icon={TriangleDownIcon} sx={{ml: 1}} />
       </summary>
       <Box position="absolute">
         <Box

package.json

@@ -44,7 +44,7 @@
   "license": "MIT",
   "dependencies": {
     "@primer/octicons-react": "^13.0.0",
-    "@primer/primitives": "4.8.1",
+    "@primer/primitives": "5.1.0",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
@@ -113,7 +113,7 @@
     "eslint-plugin-jsx-a11y": "6.4.1",
     "eslint-plugin-mdx": "1.15.1",
     "eslint-plugin-prettier": "3.4.0",
-    "eslint-plugin-primer-react": "0.5.0",
+    "eslint-plugin-primer-react": "0.6.0",
     "eslint-plugin-react": "7.24.0",
     "eslint-plugin-react-hooks": "4.2.0",
     "jest": "27.0.4",

src/BaseStyles.tsx

@@ -45,7 +45,7 @@ function BaseStyles(props: BaseStylesProps) {
 }
 
 BaseStyles.defaultProps = {
-  color: 'text.primary',
+  color: 'fg.default',
   fontFamily: 'normal',
   lineHeight: 'default'
 }

src/BorderBox.tsx

@@ -11,7 +11,7 @@ const BorderBox = styled(Box)``
 BorderBox.defaultProps = {
   borderWidth: '1px',
   borderStyle: 'solid',
-  borderColor: 'border.primary',
+  borderColor: 'border.default',
   borderRadius: 2
 }
 

src/Caret.tsx

@@ -125,8 +125,8 @@ Caret.locations = [
 ]
 
 Caret.defaultProps = {
-  bg: 'bg.canvas',
-  borderColor: 'border.primary',
+  bg: 'canvas.default',
+  borderColor: 'border.default',
   borderWidth: 1
 }
 

src/Dialog.tsx

@@ -135,7 +135,7 @@ const Dialog = forwardRef<HTMLDivElement, InternalDialogProps>(
 )
 
 DialogHeader.defaultProps = {
-  backgroundColor: 'bg.tertiary'
+  backgroundColor: 'canvas.subtle'
 }
 
 DialogHeader.propTypes = {

src/Flash.tsx

@@ -7,35 +7,35 @@ import {ComponentProps} from './utils/types'
 const variants = variant({
   variants: {
     default: {
-      color: 'alert.info.text',
-      backgroundColor: 'alert.info.bg',
-      borderColor: 'alert.info.border',
+      color: 'fg.default',
+      backgroundColor: 'accent.subtle',
+      borderColor: 'accent.muted',
       svg: {
-        color: 'alert.info.icon'
+        color: 'accent.fg'
       }
     },
     success: {
-      color: 'alert.success.text',
-      backgroundColor: 'alert.success.bg',
-      borderColor: 'alert.success.border',
+      color: 'fg.default',
+      backgroundColor: 'success.subtle',
+      borderColor: 'success.muted',
       svg: {
-        color: 'alert.success.icon'
+        color: 'success.fg'
       }
     },
     danger: {
-      color: 'alert.error.text',
-      backgroundColor: 'alert.error.bg',
-      borderColor: 'alert.error.border',
+      color: 'fg.default',
+      backgroundColor: 'danger.subtle',
+      borderColor: 'danger.muted',
       svg: {
-        color: 'alert.error.icon'
+        color: 'danger.fg'
       }
     },
     warning: {
-      color: 'alert.warn.text',
-      backgroundColor: 'alert.warn.bg',
-      borderColor: 'alert.warn.border',
+      color: 'fg.default',
+      backgroundColor: 'attention.subtle',
+      borderColor: 'attention.muted',
       svg: {
-        color: 'alert.warn.icon'
+        color: 'attention.fg'
       }
     }
   }

src/Label.tsx

@@ -67,7 +67,7 @@ const Label = styled.span<
 `
 
 Label.defaultProps = {
-  bg: 'label.primary.border',
+  bg: 'neutral.emphasis',
   variant: 'medium'
 }
 

src/ProgressBar.tsx

@@ -45,7 +45,7 @@ function ProgressBar({progress, bg, theme, ...rest}: ProgressBarProps) {
 }
 
 ProgressBar.defaultProps = {
-  bg: 'bg.successInverse',
+  bg: 'success.emphasis',
   barSize: 'default'
 }
 

src/StateLabel.tsx

@@ -20,34 +20,28 @@ const colorVariants = variant({
   prop: 'status',
   variants: {
     issueClosed: {
-      backgroundColor: 'prState.closed.bg',
-      color: 'prState.closed.text',
-      borderColor: 'prState.closed.border'
+      backgroundColor: 'danger.emphasis',
+      color: 'fg.onEmphasis'
     },
     pullClosed: {
-      backgroundColor: 'prState.closed.bg',
-      color: 'prState.closed.text',
-      borderColor: 'prState.closed.border'
+      backgroundColor: 'danger.emphasis',
+      color: 'fg.onEmphasis'
     },
     pullMerged: {
-      backgroundColor: 'prState.merged.bg',
-      color: 'prState.merged.text',
-      borderColor: 'prState.merged.border'
+      backgroundColor: 'done.emphasis',
+      color: 'fg.onEmphasis'
     },
     issueOpened: {
-      backgroundColor: 'prState.open.bg',
-      color: 'prState.open.text',
-      borderColor: 'prState.open.border'
+      backgroundColor: 'success.emphasis',
+      color: 'fg.onEmphasis'
     },
     pullOpened: {
-      backgroundColor: 'prState.open.bg',
-      color: 'prState.open.text',
-      borderColor: 'prState.open.border'
+      backgroundColor: 'success.emphasis',
+      color: 'fg.onEmphasis'
     },
     draft: {
-      backgroundColor: 'prState.draft.bg',
-      color: 'prState.draft.text',
-      borderColor: 'prState.draft.border'
+      backgroundColor: 'neutral.emphasis',
+      color: 'fg.onEmphasis'
     }
   }
 })
@@ -82,8 +76,6 @@ const StateLabelBase = styled.span<StyledStateLabelBaseProps>`
   color: ${get('colors.canvas.default')};
   text-align: center;
   border-radius: ${get('radii.3')};
-  border-width: 1px;
-  border-style: solid;
   ${colorVariants};
   ${sizeVariants};
   ${COMMON};

src/__tests__/Link.test.tsx

@@ -25,7 +25,7 @@ describe('Link', () => {
   })
 
   it('respects hoverColor prop', () => {
-    expect(render(<Link hoverColor="text.link" />)).toMatchSnapshot()
+    expect(render(<Link hoverColor="accent.fg" />)).toMatchSnapshot()
   })
 
   it('respects the "fontStyle" prop', () => {

src/stories/IssueLabelToken.stories.tsx

@@ -47,7 +47,7 @@ const SingleExampleContainer: React.FC<{label?: string}> = ({children, label}) =
     }}
   >
     {label ? (
-      <Text fontSize={0} color="text.tertiary">
+      <Text fontSize={0} color="fg.muted">
         {label}
       </Text>
     ) : null}

src/stories/ProfileToken.stories.tsx

@@ -44,7 +44,7 @@ const SingleExampleContainer: React.FC<{label?: string}> = ({children, label}) =
     }}
   >
     {label ? (
-      <Text fontSize={0} color="text.tertiary">
+      <Text fontSize={0} color="fg.muted">
         {label}
       </Text>
     ) : null}