Bump @primer/primitives to v5

.changeset/violet-cougars-yawn.md

@@ -0,0 +1,5 @@
+---
+"@primer/components": major
+---
+
+Remove deprecated color variables by upgrading to @primer/primitives [v5](https://github.com/primer/primitives/pull/251)

.eslintrc.json

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

.storybook/preview.js

@@ -26,8 +26,8 @@ const Wrapper = styled.div`
 
 // instead of global theme, only theme wrapper for each story
 const ThemedSectionStyle = styled.div`
-  background-color: ${themeGet('colors.bg.primary')};
-  color: ${themeGet('colors.text.primary')};
+  background-color: ${themeGet('colors.canvas.default')};
+  color: ${themeGet('colors.fg.default')};
   padding: 1rem;
 `
 

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.1",
     "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/Token/_RemoveTokenButton.tsx

@@ -57,11 +57,13 @@ const StyledTokenButton = styled.span<TokenButtonProps & SxProp>`
 
   &:hover,
   &:focus {
-    background-color: ${get('colors.fade.fg10')};
+    // TODO: choose a better functional color variable for this
+    background-color: ${get('colors.neutral.muted')};
   }
 
   &:active {
-    background-color: ${get('colors.fade.fg15')};
+    // TODO: choose a better functional color variable for this
+    background-color: ${get('colors.neutral.subtle')};
   }
 
   ${variants}

src/__tests__/BorderBox.test.tsx

@@ -24,7 +24,7 @@ describe('BorderBox', () => {
   it('renders borders', () => {
     expect(render(<BorderBox borderColor="success.emphasis" />)).toHaveStyleRule(
       'border-color',
-      theme.colorSchemes.light.colors.border?.success
+      theme.colorSchemes.light.colors.success?.emphasis
     )
     expect(render(<BorderBox borderBottom={0} />)).toHaveStyleRule('border-bottom', '0')
   })

src/__tests__/CircleOcticon.test.tsx

@@ -38,7 +38,7 @@ describe('CircleOcticon', () => {
   it('respects the bg prop', () => {
     expect(render(<CircleOcticon icon={CheckIcon} bg="danger.subtle" />)).toHaveStyleRule(
       'background-color',
-      theme.colorSchemes.light.colors.bg?.danger
+      theme.colorSchemes.light.colors.danger?.subtle
     )
   })
 

src/__tests__/CounterLabel.test.tsx

@@ -29,22 +29,22 @@ describe('CounterLabel', () => {
   it('respects the primary "scheme" prop', () => {
     expect(render(<CounterLabel scheme="primary" />)).toHaveStyleRule(
       'color',
-      theme.colorSchemes.light.colors.counter?.primary.text.trim()
+      theme.colorSchemes.light.colors.fg?.onEmphasis.trim()
     )
     expect(render(<CounterLabel scheme="primary" />)).toHaveStyleRule(
       'background-color',
-      theme.colorSchemes.light.colors.counter?.primary.bg.trim()
+      theme.colorSchemes.light.colors.neutral?.emphasis.trim()
     )
   })
 
   it('respects the secondary "scheme" prop', () => {
     expect(render(<CounterLabel scheme="secondary" />)).toHaveStyleRule(
       'color',
-      theme.colorSchemes.light.colors.counter?.text.trim()
+      theme.colorSchemes.light.colors.fg?.default.trim()
     )
     expect(render(<CounterLabel scheme="secondary" />)).toHaveStyleRule(
       'background-color',
-      theme.colorSchemes.light.colors.counter?.bg
+      theme.colorSchemes.light.colors.neutral?.muted
     )
   })
 })

src/__tests__/Flash.test.tsx

@@ -30,16 +30,16 @@ describe('Flash', () => {
   it('respects the "variant" prop', () => {
     expect(render(<Flash variant="warning" />)).toHaveStyleRule(
       'background-color',
-      theme.colorSchemes.light.colors.alert?.warn.bg
+      theme.colorSchemes.light.colors.attention?.subtle
     )
     expect(render(<Flash variant="danger" />)).toHaveStyleRule(
       'background-color',
-      theme.colorSchemes.light.colors.alert?.error.bg
+      theme.colorSchemes.light.colors.danger?.subtle
     )
     expect(render(<Flash variant="success" />)).toHaveStyleRule(
       'background-color',
-      theme.colorSchemes.light.colors.alert?.success.bg
+      theme.colorSchemes.light.colors.success?.subtle
     )
-    expect(render(<Flash />)).toHaveStyleRule('background-color', theme.colorSchemes.light.colors.alert?.info.bg)
+    expect(render(<Flash />)).toHaveStyleRule('background-color', theme.colorSchemes.light.colors.accent?.subtle)
   })
 })

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', () => {