Bump @primer/primitives to v5 (#1514)

* Install latest primitives and eslint plugin

* Configure eslint plugin to check all strings for deprecated colors

* Fix lint errors

* Update tests

* Remove auto colors from Dialog

* Update storybook preview

* Don't use fade variables

* Bump eslint plugin

* Update snapshots

* Create violet-cougars-yawn.md

* Update violet-cougars-yawn.md

* Update colors in storybook preview

* Update more color variables

* Update more color variables

Author: colebemis

.changeset/violet-cougars-yawn.md

@@ -0,0 +1,7 @@
+---
+"@primer/components": major
+---
+
+Remove deprecated color variables by upgrading to @primer/primitives [v5](https://github.com/primer/primitives/pull/251)
+
+**Note:** Install [`eslint-plugin-primer-react`](https://primer.style/react/linting) to ensure that you're not using any deprecated or removed color variables.

.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

@@ -5,8 +5,8 @@ import styled, {createGlobalStyle} from 'styled-components'
 // set global theme styles for each story
 const GlobalStyle = createGlobalStyle`
   body {
-    background-color: ${themeGet('colors.bg.primary')};
-    color: ${themeGet('colors.text.primary')};
+    background-color: ${themeGet('colors.canvas.default')};
+    color: ${themeGet('colors.fg.default')};
   }
 `
 
@@ -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/content/overriding-styles.mdx

@@ -25,10 +25,11 @@ This example demonstrates applying a bottom border to `Heading`, a component tha
     pb={2}
     sx={{
       borderBottomWidth: 1,
-      borderBottomColor: 'border.primary',
+      borderBottomColor: 'border.default',
       borderBottomStyle: 'solid'
-    }}>
-      Heading with bottom border
+    }}
+  >
+    Heading with bottom border
   </Heading>
 </>
 ```
@@ -45,7 +46,7 @@ Just like [values passed to system props](https://styled-system.com/responsive-s
   borderRadius={2}
   p={2}
   sx={{
-    bg: ['bg.primary', 'bg.info', 'bg.success', 'bg.warning', 'bg.danger']
+    bg: ['neutral.subtle', 'accent.subtle', 'success.subtle', 'attention.subtle', 'danger.subtle']
   }}
 >
   Responsive background color
@@ -61,15 +62,15 @@ The `sx` prop also allows for declaring styles based on media queries, psueudo-c
   sx={{
     '> *': {
       borderWidth: 1,
-      borderColor: "border.default",
+      borderColor: 'border.default',
       borderStyle: 'solid',
       borderBottomWidth: 0,
       padding: 2,
       ':last-child': {
         borderBottomWidth: 1
       },
       ':hover': {
-        bg: "neutral.muted"
+        bg: 'neutral.muted'
       }
     }
   }}

docs/content/theming.md

@@ -57,8 +57,8 @@ Some [system props](/system-props) and [`sx` prop](/overriding-styles) keys are
 ```jsx
 const theme = {
   colors: {
-    bg: {
-      primary: '#fff'
+    canvas: {
+      default: '#fff'
     }
   }
 }
@@ -67,7 +67,7 @@ function App() {
   return (
     <ThemeProvider theme={theme}>
       <Box bg="canvas.default"></Box>
-      <Box sx={{bg: "canvas.default"}}></Box>
+      <Box sx={{bg: 'canvas.default'}}></Box>
     </ThemeProvider>
   )
 }
@@ -84,7 +84,7 @@ import {themeGet} from '@primer/components'
 import styled from 'styled-components'
 
 const Example = styled.div`
-  background-color: ${themeGet("colors.canvas.default")};
+  background-color: ${themeGet('colors.canvas.default')};
 `
 ```
 
@@ -97,7 +97,7 @@ import {ThemeProvider, useTheme} from '@primer/components'
 
 function Example() {
   const {theme} = useTheme()
-  // theme.colors.bg.primary
+  // theme.colors.canvas.default
 }
 
 function App() {

package-lock.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",

package.json

@@ -432,7 +432,7 @@ export const Item = React.forwardRef((itemProps, ref) => {
               />
             </>
           ) : (
-            selected && <CheckIcon fill={theme?.colors.text.primary} />
+            selected && <CheckIcon fill={theme?.colors.fg.default} />
           )}
         </BaseVisualContainer>
       )}

src/ActionList/Item.tsx

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

src/BaseStyles.tsx

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

src/BorderBox.tsx

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

src/Caret.tsx

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

src/Dialog.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/Flash.tsx

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

src/Label.tsx

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

src/ProgressBar.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/StateLabel.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/Token/_RemoveTokenButton.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')
   })