Migrate to new functional color system (#1412)

* Bump @primer/primitives * Install Primer React ESLint plugin * Migrate to new functional color variables * Export dark high contrast theme * Disable camelcase eslint rule * Update snapshots * Update theming docs * Remove extra whitespace * Create rotten-dodos-complain.md * Create wise-apes-brake.md * Update wise-apes-brake.md * Update snapshot * Update package-lock.json * Replace fade.black50 with primer.canvas.backdrop
primer · Sep 16, 2021 · 627cd3e · 627cd3e
1 parent dd12ba3
commit 627cd3e
Show file tree

Hide file tree

Showing 103 changed files with 769 additions and 723 deletions.
diff --git a/.changeset/rotten-dodos-complain.md b/.changeset/rotten-dodos-complain.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": minor
+---
+
+Add `dark_high_contrast` color scheme
diff --git a/.changeset/wise-apes-brake.md b/.changeset/wise-apes-brake.md
@@ -0,0 +1,7 @@
+---
+"@primer/components": minor
+---
+
+Add new [functional color variables](https://primer.style/primitives/colors) to the theme object.
+
+ **Tip:** Install [`eslint-plugin-primer-react`](https://primer.style/react/linting) to ensure that you're not using any deprecated color variables.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -11,7 +11,8 @@
     "plugin:react-hooks/recommended",
     "plugin:prettier/recommended",
     "plugin:github/recommended",
-    "plugin:github/browser"
+    "plugin:github/browser",
+    "plugin:primer-react/recommended"
   ],
   "ignorePatterns": [
     "node_modules",

diff --git a/docs/content/theme-reference.md b/docs/content/theme-reference.md
@@ -5,4 +5,12 @@ description: The default theme object for Primer React components
 
 import {theme} from '@primer/components'
 
+<Note>
+
+See [Theming](/theming) to learn how theming works in Primer React.
+
+</Note>
+
+Colors in this theme object are imported from [Primer Primitives](https://primer.style/primitives/colors).
+
 <pre><code class="language-json">{JSON.stringify(theme, null, 2)}</code></pre>
diff --git a/docs/content/theming.md b/docs/content/theming.md
@@ -1,9 +1,8 @@
 ---
 title: Theming
+description: Theming in Primer React is made possible by a theme object that defines your application's colors, spacing, fonts, and more.
 ---
 
-Theming in Primer React is made possible by a theme object that defines your application's colors, spacing, fonts, and more.
-
 ## ThemeProvider
 
 To give components access to the theme object, you must add `ThemeProvider` to the root of your application:

diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js b/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js
@@ -49,7 +49,7 @@ function LiveCode({code, language, noinline}) {
         <Box
           sx={{
             border: '1px solid',
-            borderColor: 'border.primary',
+            borderColor: 'border.default',
             borderTopRightRadius: 2,
             borderTopLeftRadius: 2
           }}

diff --git a/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js b/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js
@@ -29,7 +29,7 @@ function ThemeSwitcher({children}) {
 function LivePreviewWrapper({children}) {
   return (
     <ThemeSwitcher>
-      <Box width="100%" p={3} bg="bg.canvas" sx={{borderTopLeftRadius: 2, borderTopRightRadius: 2}}>
+      <Box width="100%" p={3} bg="canvas.default" sx={{borderTopLeftRadius: 2, borderTopRightRadius: 2}}>
         <BaseStyles>{children}</BaseStyles>
       </Box>
     </ThemeSwitcher>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,7 +44,7 @@
   "license": "MIT",
   "dependencies": {
     "@primer/octicons-react": "^13.0.0",
-    "@primer/primitives": "4.6.4",
+    "@primer/primitives": "4.7.1",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
     "@styled-system/props": "5.1.5",
@@ -56,6 +56,7 @@
     "@types/styled-system__theme-get": "5.0.1",
     "classnames": "2.3.1",
     "deepmerge": "4.2.2",
+    "eslint-plugin-primer-react": "0.4.1",
     "focus-visible": "5.2.0",
     "styled-system": "5.1.5"
   },

diff --git a/src/ActionList/Divider.tsx b/src/ActionList/Divider.tsx
@@ -4,7 +4,7 @@ import {get} from '../constants'
 
 export const StyledDivider = styled.div`
   height: 1px;
-  background: ${get('colors.selectMenu.borderSecondary')};
+  background: ${get('colors.border.muted')};
   margin-top: calc(${get('space.2')} - 1px);
   margin-bottom: ${get('space.2')};
 `

diff --git a/src/ActionList/Header.tsx b/src/ActionList/Header.tsx
@@ -37,15 +37,15 @@ export const StyledHeader = styled.div<{variant: HeaderProps['variant']} & SxPro
   padding: 6px ${get('space.3')};
   font-size: ${get('fontSizes.0')};
   font-weight: ${get('fontWeights.bold')};
-  color: ${get('colors.text.secondary')};
+  color: ${get('colors.fg.muted')};
 
   ${({variant}) =>
     variant === 'filled' &&
     css`
-      background: ${get('colors.bg.tertiary')};
+      background: ${get('colors.canvas.subtle')};
       margin: ${get('space.2')} 0;
-      border-top: 1px solid ${get('colors.border.tertiary')};
-      border-bottom: 1px solid ${get('colors.border.tertiary')};
+      border-top: 1px solid ${get('colors.neutral.muted')};
+      border-bottom: 1px solid ${get('colors.neutral.muted')};
 
       &:first-child {
         margin-top: 0;

diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
@@ -129,26 +129,26 @@ export interface ItemProps extends Omit<React.ComponentPropsWithoutRef<'div'>, '
 const getItemVariant = (variant = 'default', disabled?: boolean) => {
   if (disabled) {
     return {
-      color: get('colors.text.disabled'),
-      iconColor: get('colors.text.disabled'),
-      annotationColor: get('colors.text.disabled'),
+      color: get('colors.fg.muted'),
+      iconColor: get('colors.fg.muted'),
+      annotationColor: get('colors.fg.muted'),
       hoverCursor: 'default'
     }
   }
 
   switch (variant) {
     case 'danger':
       return {
-        color: get('colors.text.danger'),
-        iconColor: get('colors.icon.danger'),
-        annotationColor: get('colors.text.disabled'),
+        color: get('colors.danger.fg'),
+        iconColor: get('colors.danger.fg'),
+        annotationColor: get('colors.fg.muted'),
         hoverCursor: 'pointer'
       }
     default:
       return {
         color: 'inherit',
-        iconColor: get('colors.text.secondary'),
-        annotationColor: get('colors.text.secondary'),
+        iconColor: get('colors.fg.muted'),
+        annotationColor: get('colors.fg.muted'),
         hoverCursor: 'pointer'
       }
   }
@@ -211,7 +211,7 @@ const StyledItem = styled.div<
       width: 100%;
       top: -7px;
       // NB: This 'get' won’t execute if it’s moved into the arrow function below.
-      border: 0 solid ${get('colors.selectMenu.borderSecondary')};
+      border: 0 solid ${get('colors.border.muted')};
       border-top-width: ${({showDivider}) => (showDivider ? `1px` : '0')};
     }
   }
@@ -297,7 +297,7 @@ const TrailingContent = styled(ColoredVisualContainer)`
 `
 
 const DescriptionContainer = styled.span`
-  color: ${get('colors.text.secondary')};
+  color: ${get('colors.fg.muted')};
   font-size: ${get('fontSizes.0')};
   // TODO: When rem-based spacing on a 4px scale lands, replace
   // hardcoded '16px' with '${get('lh-12')}'.

diff --git a/src/ActionList/List.tsx b/src/ActionList/List.tsx
@@ -106,7 +106,7 @@ const StyledList = styled.div`
 
   &[${hasActiveDescendantAttribute}], &:focus-within {
     --item-hover-bg-override: none;
-    --item-hover-divider-border-color-override: ${get('colors.selectMenu.borderSecondary')};
+    --item-hover-divider-border-color-override: ${get('colors.border.muted')};
   }
 `
 

diff --git a/src/AvatarPair.tsx b/src/AvatarPair.tsx
@@ -16,7 +16,11 @@ export type AvatarPairProps = BoxProps
 const AvatarPair = ({children, ...rest}: AvatarPairProps) => {
   const avatars = React.Children.map(children, (child, i) => {
     if (!React.isValidElement(child)) return child
-    return i === 0 ? React.cloneElement(child, {size: 40}) : <ChildAvatar bg="bg.canvas" {...child.props} size={20} />
+    return i === 0 ? (
+      React.cloneElement(child, {size: 40})
+    ) : (
+      <ChildAvatar bg="canvas.default" {...child.props} size={20} />
+    )
   })
   return (
     <Box position="relative" display="inline-flex" {...rest}>

diff --git a/src/AvatarStack.tsx b/src/AvatarStack.tsx
@@ -21,7 +21,7 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
     flex-shrink: 0;
     height: 20px;
     width: 20px;
-    box-shadow: 0 0 0 1px ${get('colors.bg.canvas')};
+    box-shadow: 0 0 0 1px ${get('colors.canvas.default')};
     margin-left: -11px;
     position: relative;
     overflow: hidden;
@@ -118,7 +118,7 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
       margin-left: ${get('space.1')};
       opacity: 100%;
       visibility: visible;
-      box-shadow: 0 0 0 4px ${get('colors.bg.canvas')};
+      box-shadow: 0 0 0 4px ${get('colors.canvas.default')};
       &:first-child {
         margin-left: 0;
       }

diff --git a/src/BranchName.tsx b/src/BranchName.tsx
@@ -8,8 +8,8 @@ const BranchName = styled.a<SystemCommonProps & SxProp>`
   padding: 2px 6px;
   font-size: ${get('fontSizes.0')};
   font-family: ${get('fonts.mono')};
-  color: ${get('colors.branchName.text')};
-  background-color: ${get('colors.branchName.bg')};
+  color: ${get('colors.fg.muted')};
+  background-color: ${get('colors.accent.subtle')};
   border-radius: ${get('radii.2')};
   ${COMMON};
   ${sx};

diff --git a/src/Breadcrumb.tsx b/src/Breadcrumb.tsx
@@ -17,7 +17,7 @@ const Wrapper = styled.li`
   &::after {
     padding-right: 0.5em;
     padding-left: 0.5em;
-    color: ${get('colors.text.disabled')};
+    color: ${get('colors.fg.muted')};
     font-size: ${get('fontSizes.1')};
     content: '/';
   }
@@ -64,15 +64,15 @@ const BreadcrumbItem = styled.a.attrs<StyledBreadcrumbItemProps>(props => ({
   className: classnames(props.selected && SELECTED_CLASS, props.className),
   'aria-current': props.selected ? 'page' : null
 }))<StyledBreadcrumbItemProps>`
-  color: ${get('colors.text.link')};
+  color: ${get('colors.accent.fg')};
   display: inline-block;
   font-size: ${get('fontSizes.1')};
   text-decoration: none;
   &:hover {
     text-decoration: underline;
   }
   &.selected {
-    color: ${get('colors.text.primary')};
+    color: ${get('colors.fg.default')};
     pointer-events: none;
   }
   ${COMMON}

diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -27,7 +27,7 @@ const Button = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
   }
 
   &:disabled {
-    color: ${get('colors.text.disabled')};
+    color: ${get('colors.fg.muted')};
     background-color: ${get('colors.btn.bg')};
     border-color: ${get('colors.btn.border')};
   }

diff --git a/src/Button/ButtonClose.tsx b/src/Button/ButtonClose.tsx
@@ -14,14 +14,14 @@ const StyledButton = styled.button<StyledButtonProps>`
   outline: none;
   cursor: pointer;
   border-radius: ${get('radii.2')};
-  color: ${get('colors.text.secondary')};
+  color: ${get('colors.fg.muted')};
 
   &:focus {
     box-shadow: ${get('shadows.btn.focusShadow')};
   }
 
   &:hover {
-    color: ${get('colors.text.link')};
+    color: ${get('colors.accent.fg')};
   }
   ${COMMON};
   ${LAYOUT};

diff --git a/src/Button/ButtonInvisible.tsx b/src/Button/ButtonInvisible.tsx
@@ -5,14 +5,14 @@ import {ComponentProps} from '../utils/types'
 import ButtonBase, {ButtonBaseProps, ButtonSystemProps, buttonSystemProps} from './ButtonBase'
 
 const ButtonInvisible = styled(ButtonBase)<ButtonBaseProps & ButtonSystemProps & SxProp>`
-  color: ${get('colors.text.link')};
+  color: ${get('colors.accent.fg')};
   background-color: transparent;
   border: 0;
   border-radius: ${get('radii.2')};
   box-shadow: none;
 
   &:disabled {
-    color: ${get('colors.text.disabled')};
+    color: ${get('colors.fg.muted')};
   }
 
   &:focus {

diff --git a/src/Button/ButtonTableList.tsx b/src/Button/ButtonTableList.tsx
@@ -17,7 +17,7 @@ const ButtonTableList = styled.summary<StyledButtonTableListProps>`
   display: inline-block;
   padding: 0;
   font-size: ${get('fontSizes.1')};
-  color: ${get('colors.text.secondary')};
+  color: ${get('colors.fg.muted')};
   text-decoration: none;
   white-space: nowrap;
   cursor: pointer;
@@ -33,7 +33,7 @@ const ButtonTableList = styled.summary<StyledButtonTableListProps>`
   &:disabled {
     &,
     &:hover {
-      color: rgba(${get('colors.text.secondary')}, 0.5);
+      color: rgba(${get('colors.fg.muted')}, 0.5);
       cursor: default;
     }
   }

diff --git a/src/CircleBadge.tsx b/src/CircleBadge.tsx
@@ -30,7 +30,7 @@ const CircleBadge = styled.div<StyledCircleBadgeProps>`
   display: ${props => (props.inline ? 'inline-flex' : 'flex')};
   align-items: center;
   justify-content: center;
-  background-color: ${get('colors.bg.canvas')};
+  background-color: ${get('colors.canvas.default')};
   border-radius: 50%;
   box-shadow: ${get('shadows.shadow.medium')};
   ${COMMON};

diff --git a/src/CircleOcticon.tsx b/src/CircleOcticon.tsx
@@ -20,7 +20,7 @@ function CircleOcticon(props: CircleOcticonProps) {
       size={size}
       borderRadius="50%"
       borderStyle="solid"
-      borderColor="border.primary"
+      borderColor="border.default"
     >
       <Box display="flex" {...rest} alignItems="center" justifyContent="center">
         <IconComponent size={size} />

diff --git a/src/CounterLabel.tsx b/src/CounterLabel.tsx
@@ -12,21 +12,21 @@ const colorStyles = ({scheme, ...props}: StyledCounterLabelProps) => {
   return {
     color:
       scheme === 'secondary'
-        ? get('colors.counter.text')(props)
+        ? get('colors.fg.default')(props)
         : scheme === 'primary'
-        ? get('colors.counter.primary.text')(props)
-        : get('colors.counter.text')(props)
+        ? get('colors.fg.onEmphasis')(props)
+        : get('colors.fg.default')(props)
   }
 }
 
 const bgStyles = ({scheme, ...props}: StyledCounterLabelProps) => {
   return {
     backgroundColor:
       scheme === 'secondary'
-        ? get('colors.counter.bg')(props)
+        ? get('colors.neutral.muted')(props)
         : scheme === 'primary'
-        ? get('colors.counter.primary.bg')(props)
-        : get('colors.counter.bg')(props)
+        ? get('colors.neutral.emphasis')(props)
+        : get('colors.neutral.muted')(props)
   }
 }