Merge pull request #1090 from primer/cb/functional-vars-2

Update color variable usage (part 2)

.changeset/clever-islands-breathe.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in BaseStyles

.changeset/cuddly-suns-flow.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in BranchName

.changeset/purple-snakes-wait.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in BorderBox

.changeset/warm-dryers-attack.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in AvatarPair

.changeset/wet-dryers-repeat.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in AvatarStack

src/AvatarPair.tsx

@@ -1,23 +1,24 @@
-import React from 'react'
 import PropTypes from 'prop-types'
+import React from 'react'
 import styled from 'styled-components'
-import {Relative, RelativeProps} from './Position'
 import Avatar from './Avatar'
+import {get} from './constants'
+import {Relative, RelativeProps} from './Position'
 import theme from './theme'
 
 const ChildAvatar = styled(Avatar)`
   position: absolute;
   right: -15%;
   bottom: -9%;
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
+  box-shadow: ${get('shadows.avatar.childShadow')};
 `
 
 export type AvatarPairProps = RelativeProps
 
 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="white" {...child.props} size={20} />
+    return i === 0 ? React.cloneElement(child, {size: 40}) : <ChildAvatar bg="bg.canvas" {...child.props} size={20} />
   })
   return (
     <Relative display="inline-flex" {...rest}>

src/AvatarStack.tsx

@@ -23,7 +23,7 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
     flex-shrink: 0;
     height: 20px;
     width: 20px;
-    box-shadow: 0 0 0 1px ${get('colors.white')};
+    box-shadow: 0 0 0 1px ${get('colors.bg.canvas')};
     margin-left: -11px;
     position: relative;
     overflow: hidden;
@@ -120,7 +120,7 @@ const AvatarStackWrapper = styled.span<StyledAvatarStackWrapperProps>`
       margin-left: ${get('space.1')};
       opacity: 100%;
       visibility: visible;
-      box-shadow: 0 0 0 4px ${get('colors.white')};
+      box-shadow: 0 0 0 4px ${get('colors.bg.canvas')};
       &:first-child {
         margin-left: 0;
       }

src/BaseStyles.tsx

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

src/BorderBox.tsx

@@ -15,7 +15,7 @@ BorderBox.defaultProps = {
   theme,
   borderWidth: '1px',
   borderStyle: 'solid',
-  borderColor: 'gray.2',
+  borderColor: 'border.primary',
   borderRadius: 2
 }
 

src/BranchName.tsx

@@ -10,9 +10,9 @@ const BranchName = styled.a<SystemCommonProps & SxProp>`
   padding: 2px 6px;
   font-size: ${get('fontSizes.0')};
   font-family: ${get('fonts.mono')};
-  color: rgba(27, 31, 35, 0.6);
-  background-color: #eaf5ff;
-  border-radius: 3px;
+  color: ${get('colors.branchName.text')};
+  background-color: ${get('colors.branchName.bg')};
+  border-radius: ${get('radii.2')};
   ${COMMON};
   ${sx};
 `

src/__tests__/__snapshots__/BranchName.tsx.snap

@@ -6,9 +6,9 @@ exports[`BranchName renders consistently 1`] = `
   padding: 2px 6px;
   font-size: 12px;
   font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
-  color: rgba(27,31,35,0.6);
+  color: #586069;
   background-color: #eaf5ff;
-  border-radius: 3px;
+  border-radius: 6px;
 }
 
 <a