@primer/components 29.0.0-rc.ae627848 → 29.1.0-rc.4e9b967e

package/src/Overlay.tsx

@@ -52,7 +52,7 @@ function getSlideAnimationStartingVector(anchorSide?: AnchorSide): {x: number; y
 }
 
 const StyledOverlay = styled.div<StyledOverlayProps & SystemCommonProps & SxProp>`
-  background-color: ${get('colors.bg.overlay')};
+  background-color: ${get('colors.canvas.overlay')};
   box-shadow: ${get('shadows.overlay.shadow')};
   position: absolute;
   min-width: 192px;

package/src/Pagehead.tsx

@@ -8,7 +8,7 @@ const Pagehead = styled.div<SystemCommonProps & SxProp>`
   padding-top: ${get('space.4')};
   padding-bottom: ${get('space.4')};
   margin-bottom: ${get('space.4')};
-  border-bottom: 1px solid ${get('colors.border.primary')};
+  border-bottom: 1px solid ${get('colors.border.default')};
   ${COMMON};
   ${sx};
 `

package/src/Pagination/Pagination.tsx

@@ -11,7 +11,7 @@ const Page = styled.a`
   padding: 5px 10px;
   font-style: normal;
   line-height: 20px;
-  color: ${get('colors.text.primary')};
+  color: ${get('colors.fg.default')};
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
@@ -32,30 +32,30 @@ const Page = styled.a`
   &:hover,
   &:focus {
     text-decoration: none;
-    border-color: ${get('colors.border.primary')};
+    border-color: ${get('colors.border.default')};
     outline: 0;
     transition-duration: 0.1s;
   }
 
   &:active {
-    border-color: ${get('colors.border.secondary')};
+    border-color: ${get('colors.border.muted')};
   }
 
   &[rel='prev'],
   &[rel='next'] {
-    color: ${get('colors.text.link')};
+    color: ${get('colors.accent.fg')};
   }
 
   &[aria-current],
   &[aria-current]:hover {
-    color: ${get('colors.state.selected.primaryText')};
-    background-color: ${get('colors.state.selected.primaryBg')};
+    color: ${get('colors.fg.onEmphasis')};
+    background-color: ${get('colors.accent.emphasis')};
     border-color: transparent;
   }
 
   &[aria-disabled],
   &[aria-disabled]:hover {
-    color: ${get('colors.text.disabled')}; // check
+    color: ${get('colors.fg.muted')}; // check
     cursor: default;
     border-color: transparent;
   }

package/src/Popover.tsx

@@ -44,14 +44,14 @@ const Popover = styled.div.attrs<StyledPopoverProps>(({className, caret}) => {
 `
 
 const PopoverContent = styled(Box)`
-  border: 1px solid ${get('colors.border.primary')};
+  border: 1px solid ${get('colors.border.default')};
   border-radius: ${get('radii.2')};
   position: relative;
   width: 232px;
   margin-right: auto;
   margin-left: auto;
   padding: ${get('space.4')};
-  background-color: ${get('colors.bg.overlay')};
+  background-color: ${get('colors.canvas.overlay')};
 
   ${COMMON};
   ${LAYOUT};
@@ -69,14 +69,14 @@ const PopoverContent = styled(Box)`
     top: -${get('space.3')};
     margin-left: -9px;
     border: ${get('space.2')} solid transparent; // TODO: solid?
-    border-bottom-color: ${get('colors.border.overlay')};
+    border-bottom-color: ${get('colors.border.default')};
   }
 
   &::after {
     top: -14px;
     margin-left: -${get('space.2')};
     border: 7px solid transparent; // todo: solid
-    border-bottom-color: ${get('colors.bg.overlay')};
+    border-bottom-color: ${get('colors.canvas.overlay')};
   }
 
   // Bottom-oriented carets
@@ -91,13 +91,13 @@ const PopoverContent = styled(Box)`
 
     &::before {
       bottom: -${get('space.3')};
-      border-top-color: ${get('colors.border.overlay')};
+      border-top-color: ${get('colors.border.default')};
     }
 
     &::after {
       bottom: -14px;
       // stylelint-disable-next-line primer/borders
-      border-top-color: ${get('colors.bg.overlay')};
+      border-top-color: ${get('colors.canvas.overlay')};
     }
   }
 
@@ -170,13 +170,13 @@ const PopoverContent = styled(Box)`
   ${Popover}.caret-pos--right-bottom & {
     &::before {
       right: -${get('space.3')};
-      border-left-color: ${get('colors.border.overlay')};
+      border-left-color: ${get('colors.border.default')};
     }
 
     &::after {
       right: -14px;
       // stylelint-disable-next-line primer/borders
-      border-left-color: ${get('colors.bg.overlay')};
+      border-left-color: ${get('colors.canvas.overlay')};
     }
   }
 
@@ -186,13 +186,13 @@ const PopoverContent = styled(Box)`
   ${Popover}.caret-pos--left-bottom & {
     &::before {
       left: -${get('space.3')};
-      border-right-color: ${get('colors.border.overlay')};
+      border-right-color: ${get('colors.border.default')};
     }
 
     &::after {
       left: -14px;
       // stylelint-disable-next-line primer/borders
-      border-right-color: ${get('colors.bg.overlay')};
+      border-right-color: ${get('colors.canvas.overlay')};
     }
   }
 

package/src/ProgressBar.tsx

@@ -26,7 +26,7 @@ type StyledProgressContainerProps = {
 const ProgressContainer = styled.span<StyledProgressContainerProps>`
   display: ${props => (props.inline ? 'inline-flex' : 'flex')};
   overflow: hidden;
-  background-color: ${get('colors.border.primary')};
+  background-color: ${get('colors.border.default')};
   border-radius: ${get('radii.1')};
   height: ${props => sizeMap[props.barSize || 'default']};
   ${COMMON}

package/src/SelectMenu/SelectMenuDivider.tsx

@@ -8,9 +8,9 @@ const dividerStyles = css`
   margin: 0;
   font-size: ${get('fontSizes.0')};
   font-weight: ${get('fontWeights.bold')};
-  color: ${get('colors.text.tertiary')};
-  background-color: ${get('colors.bg.tertiary')};
-  border-bottom: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')};
+  color: ${get('colors.fg.muted')};
+  background-color: ${get('colors.canvas.subtle')};
+  border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
 `
 
 const SelectMenuDivider = styled.div<SystemCommonProps & SxProp>`

package/src/SelectMenu/SelectMenuFilter.tsx

@@ -9,8 +9,8 @@ import {MenuContext} from './SelectMenuContext'
 const StyledForm = styled.form<SystemCommonProps & SxProp>`
   padding: ${get('space.3')};
   margin: 0;
-  border-bottom: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')};
-  background-color: ${get('colors.bg.overlay')};
+  border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
+  background-color: ${get('colors.canvas.overlay')};
   ${COMMON};
 
   @media (min-width: ${get('breakpoints.0')}) {

package/src/SelectMenu/SelectMenuFooter.tsx

@@ -7,9 +7,9 @@ const footerStyles = css`
   margin-top: -1px;
   padding: ${get('space.2')} ${get('space.3')};
   font-size: ${get('fontSizes.0')};
-  color: ${get('colors.text.tertiary')};
+  color: ${get('colors.fg.muted')};
   text-align: center;
-  border-top: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')};
+  border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
 
   @media (min-width: ${get('breakpoints.0')}) {
     padding: ${get('space.1')} ${get('space.2')};

package/src/SelectMenu/SelectMenuHeader.tsx

@@ -8,7 +8,7 @@ import {ComponentProps} from '../utils/types'
 // SelectMenu.Modal
 
 const SelectMenuTitle = styled.h3`
-  color: ${get('colors.text.primary')};
+  color: ${get('colors.fg.default')};
   flex: auto;
   font-size: ${get('fontSizes.1')};
   font-weight: ${get('fontWeights.bold')};
@@ -23,7 +23,7 @@ const StyledHeader = styled.header<SystemTypographyProps & SystemCommonProps & S
   display: flex;
   flex: none; // fixes header from getting squeezed in Safari iOS
   padding: ${get('space.3')};
-  border-bottom: ${get('borderWidths')} solid ${get('colors.selectMenu.borderSecondary')};
+  border-bottom: ${get('borderWidths')} solid ${get('colors.border.muted')};
   ${COMMON}
   ${TYPOGRAPHY}
 

package/src/SelectMenu/SelectMenuItem.tsx

@@ -14,10 +14,10 @@ export const listItemStyles = css`
   overflow: hidden;
   text-align: left;
   cursor: pointer;
-  background-color: ${get('colors.bg.overlay')};
+  background-color: ${get('colors.canvas.overlay')};
   border: 0;
-  border-bottom: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')};
-  color: ${get('colors.text.secondary')};
+  border-bottom: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
+  color: ${get('colors.fg.muted')};
   text-decoration: none;
   font-size: ${get('fontSizes.0')};
   font-family: inherit; // needed if user uses a "button" tag
@@ -54,7 +54,7 @@ export const listItemStyles = css`
   // selected items
   &[aria-checked='true'] {
     font-weight: 500;
-    color: ${get('colors.text.primary')};
+    color: ${get('colors.fg.default')};
 
     .SelectMenu-selected-icon {
       visibility: visible;
@@ -68,7 +68,7 @@ export const listItemStyles = css`
     &:hover,
     &:active,
     &:focus {
-      background-color: ${get('colors.state.hover.secondaryBg')};
+      background-color: ${get('colors.neutral.subtle')};
     }
   }
 
@@ -80,7 +80,7 @@ export const listItemStyles = css`
     // Android
     &:focus,
     &:active {
-      background-color: ${get('colors.bg.secondary')};
+      background-color: ${get('colors.canvas.subtle')};
     }
 
     // iOS Safari

package/src/SelectMenu/SelectMenuList.tsx

@@ -10,7 +10,7 @@ const listStyles = css`
   flex: auto;
   overflow-x: hidden;
   overflow-y: auto;
-  background-color: ${get('colors.bg.overlay')};
+  background-color: ${get('colors.canvas.overlay')};
   -webkit-overflow-scrolling: touch; // Adds momentum + bouncy scrolling
 
   @media (hover: hover) {
@@ -19,13 +19,13 @@ const listStyles = css`
     }
 
     .SelectMenuTab:not([aria-checked='true']):hover {
-      color: ${get('colors.text.primary')};
-      background-color: ${get('colors.bg.tertiary')};
+      color: ${get('colors.fg.default')};
+      background-color: ${get('colors.canvas.subtle')};
     }
 
     .SelectMenuTab:not([aria-checked='true']):active {
-      color: ${get('colors.text.primary')};
-      background-color: ${get('colors.bg.tertiary')};
+      color: ${get('colors.fg.default')};
+      background-color: ${get('colors.canvas.subtle')};
     }
   }
 `

package/src/SelectMenu/SelectMenuLoadingAnimation.tsx

@@ -7,7 +7,7 @@ import {ComponentProps} from '../utils/types'
 const Animation = styled.div<SystemCommonProps>`
   padding: ${get('space.6')} ${get('space.4')};
   text-align: center;
-  background-color: ${get('colors.bg.overlay')};
+  background-color: ${get('colors.canvas.overlay')};
   ${COMMON}
 `
 

package/src/SelectMenu/SelectMenuModal.tsx

@@ -32,7 +32,7 @@ const modalStyles = css<StyledModalProps>`
   overflow: hidden; // Enables border radius on scrollable child elements
   pointer-events: auto;
   flex-direction: column;
-  background-color: ${get('colors.bg.overlay')};
+  background-color: ${get('colors.canvas.overlay')};
   border-radius: ${get('radii.2')};
   box-shadow: ${get('shadows.shadow.small')};
   animation: ${animateModal} 0.12s cubic-bezier(0, 0.1, 0.1, 1) backwards;
@@ -42,7 +42,7 @@ const modalStyles = css<StyledModalProps>`
     max-height: 350px;
     margin: ${get('space.1')} 0 ${get('space.3')} 0;
     font-size: ${get('fontSizes.0')};
-    border: ${get('borderWidths.1')} solid ${get('colors.border.overlay')};
+    border: ${get('borderWidths.1')} solid ${get('colors.border.default')};
     border-radius: ${get('radii.2')};
     box-shadow: ${get('shadows.shadow.small')};
   }
@@ -68,7 +68,7 @@ const modalWrapperStyles = css<StyledModalWrapperProps>`
     left: 0;
     pointer-events: none;
     content: '';
-    background-color: ${get('colors.selectMenu.backdropBg')};
+    background-color: ${get('colors.primer.canvas.backdrop')};
 
     @media (min-width: ${get('breakpoints.0')}) {
       display: none;

package/src/SelectMenu/SelectMenuTab.tsx

@@ -11,11 +11,11 @@ const tabStyles = css`
   padding: ${get('space.2')} ${get('space.3')};
   font-size: ${get('fontSizes.0')};
   font-weight: 500;
-  color: ${get('colors.text.tertiary')};
+  color: ${get('colors.fg.muted')};
   text-align: center;
   background-color: transparent;
   border: 0;
-  box-shadow: inset 0 -1px 0 ${get('colors.selectMenu.borderSecondary')};
+  box-shadow: inset 0 -1px 0 ${get('colors.border.muted')};
 
   @media (min-width: ${get('breakpoints.0')}) {
     flex: none;
@@ -29,17 +29,17 @@ const tabStyles = css`
   &[aria-selected='true'] {
     z-index: 1; // Keeps box-shadow visible when hovering
     color: ${get('colors.text-primary')};
-    background-color: ${get('colors.bg.overlay')};
-    box-shadow: 0 0 0 1px ${get('colors.selectMenu.borderSecondary')};
+    background-color: ${get('colors.canvas.overlay')};
+    box-shadow: 0 0 0 1px ${get('colors.border.muted')};
 
     @media (min-width: ${get('breakpoints.0')}) {
-      border-color: ${get('colors.selectMenu.borderSecondary')};
+      border-color: ${get('colors.border.muted')};
       box-shadow: none;
     }
   }
 
   &:focus {
-    background-color: ${get('colors.state.hover.secondaryBg')};
+    background-color: ${get('colors.neutral.subtle')};
   }
 `
 

package/src/SelectMenu/SelectMenuTabPanel.tsx

@@ -7,7 +7,7 @@ import {MenuContext} from './SelectMenuContext'
 import SelectMenuList from './SelectMenuList'
 
 const TabPanelBase = styled.div<SystemCommonProps & SxProp>`
-  border-top: ${get('borderWidths.1')} solid ${get('colors.selectMenu.borderSecondary')};
+  border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
   ${COMMON}
   ${sx};
 `

package/src/SideNav.tsx

@@ -28,7 +28,7 @@ function SideNavBase({variant, className, bordered, children, ...props}: SideNav
     <Box
       borderWidth="1px"
       borderStyle="solid"
-      borderColor="border.primary"
+      borderColor="border.default"
       borderRadius={2}
       as="nav"
       className={newClassName}
@@ -40,7 +40,7 @@ function SideNavBase({variant, className, bordered, children, ...props}: SideNav
 }
 
 const SideNav = styled(SideNavBase)`
-  background-color: ${get('colors.bg.secondary')};
+  background-color: ${get('colors.canvas.subtle')};
 
   ${props =>
     props.bordered &&
@@ -64,14 +64,14 @@ type StyledSideNavLinkProps = {
 
 // used for variant normal hover, focus pseudo selectors
 const CommonAccessibilityVariantNormalStyles = css`
-  background-color: ${get('colors.state.hover.secondaryBg')};
+  background-color: ${get('colors.neutral.subtle')};
   outline: none;
   text-decoration: none;
 `
 
 // used for light weight hover, focus pseudo selectors
 const CommonAccessibilityVariantLightWeightStyles = css`
-  color: ${get('colors.text.primary')};
+  color: ${get('colors.fg.default')};
   text-decoration: none;
   outline: none;
 `
@@ -104,10 +104,10 @@ const SideNavLink = styled(Link).attrs<StyledSideNavLinkProps>(props => {
   }
 
   ${SideNav}.variant-normal > & {
-    color: ${get('colors.text.primary')};
+    color: ${get('colors.fg.default')};
     padding: ${get('space.3')};
     border: 0;
-    border-top: ${get('borderWidths.1')} solid ${get('colors.border.secondary')};
+    border-top: ${get('borderWidths.1')} solid ${get('colors.border.muted')};
 
     &:first-child {
       border-top: 0;
@@ -138,7 +138,7 @@ const SideNavLink = styled(Link).attrs<StyledSideNavLinkProps>(props => {
 
     &:focus {
       ${CommonAccessibilityVariantNormalStyles}
-      box-shadow: ${get('shadows.state.focus.shadow')};
+      box-shadow: ${get('shadows.primer.shadow.focus')};
       z-index: 1;
     }
 
@@ -148,14 +148,14 @@ const SideNavLink = styled(Link).attrs<StyledSideNavLinkProps>(props => {
 
       // Bar on the left
       &::before {
-        background-color: ${get('colors.sidenav.borderActive')};
+        background-color: ${get('colors.primer.border.active')};
       }
     }
   }
 
   ${SideNav}.variant-lightweight > & {
     padding: ${get('space.1')} 0;
-    color: ${get('colors.text.link')};
+    color: ${get('colors.accent.fg')};
 
     &:hover {
       ${CommonAccessibilityVariantLightWeightStyles}
@@ -163,13 +163,13 @@ const SideNavLink = styled(Link).attrs<StyledSideNavLinkProps>(props => {
 
     &:focus {
       ${CommonAccessibilityVariantLightWeightStyles}
-      box-shadow: ${get('shadows.state.focus.shadow')};
+      box-shadow: ${get('shadows.primer.shadow.focus')};
       z-index: 1;
     }
 
     &[aria-current='page'],
     &[aria-selected='true'] {
-      color: ${get('colors.text.primary')};
+      color: ${get('colors.fg.default')};
       font-weight: ${get('fontWeights.semibold')};
     }
   }

package/src/StateLabel.tsx

@@ -79,7 +79,7 @@ const StateLabelBase = styled.span<StyledStateLabelBaseProps>`
   align-items: center;
   font-weight: ${get('fontWeights.bold')};
   line-height: 16px;
-  color: ${get('colors.bg.primary')};
+  color: ${get('colors.canvas.default')};
   text-align: center;
   border-radius: ${get('radii.3')};
   border-width: 1px;

package/src/SubNav.tsx

@@ -77,19 +77,19 @@ const SubNavLink = styled.a.attrs<StyledSubNavLinkProps>(props => ({
   font-size: ${get('fontSizes.1')};
   line-height: 20px; //custom value for SubNav
   min-height: 34px; //custom value for SubNav
-  color: ${get('colors.text.primary')};
+  color: ${get('colors.fg.default')};
   text-align: center;
   text-decoration: none;
-  border-top: 1px solid ${get('colors.border.primary')};
-  border-bottom: 1px solid ${get('colors.border.primary')};
-  border-right: 1px solid ${get('colors.border.primary')};
+  border-top: 1px solid ${get('colors.border.default')};
+  border-bottom: 1px solid ${get('colors.border.default')};
+  border-right: 1px solid ${get('colors.border.default')};
   display: flex;
   align-items: center;
 
   &:first-of-type {
     border-top-left-radius: ${get('radii.2')};
     border-bottom-left-radius: ${get('radii.2')};
-    border-left: 1px solid ${get('colors.border.primary')};
+    border-left: 1px solid ${get('colors.border.default')};
   }
 
   &:last-of-type {
@@ -100,20 +100,20 @@ const SubNavLink = styled.a.attrs<StyledSubNavLinkProps>(props => ({
   &:hover,
   &:focus {
     text-decoration: none;
-    background-color: ${get('colors.bg.tertiary')};
+    background-color: ${get('colors.canvas.subtle')};
     transition: 0.2s ease;
 
     .SubNav-octicon {
-      color: ${get('colors.icon.secondary')};
+      color: ${get('colors.fg.muted')};
     }
   }
 
   &.selected {
-    color: ${get('colors.state.selected.primaryText')};
-    background-color: ${get('colors.state.selected.primaryBg')};
-    border-color: ${get('colors.state.selected.primaryBorder')};
+    color: ${get('colors.fg.onEmphasis')};
+    background-color: ${get('colors.accent.emphasis')};
+    border-color: ${get('colors.accent.emphasis')};
     .SubNav-octicon {
-      color: ${get('colors.state.selected.primaryText')};
+      color: ${get('colors.fg.onEmphasis')};
     }
   }
 

package/src/TabNav.tsx

@@ -12,7 +12,7 @@ const SELECTED_CLASS = 'selected'
 
 const TabNavBase = styled.div<SystemCommonProps & SxProp>`
   margin-top: 0;
-  border-bottom: 1px solid ${get('colors.border.primary')};
+  border-bottom: 1px solid ${get('colors.border.default')};
   ${COMMON}
   ${sx}
 `
@@ -47,7 +47,7 @@ const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
   padding: 8px 12px;
   font-size: ${get('fontSizes.1')};
   line-height: 20px;
-  color: ${get('colors.text.primary')};
+  color: ${get('colors.fg.default')};
   text-decoration: none;
   background-color: transparent;
   border: 1px solid transparent;
@@ -55,16 +55,16 @@ const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
 
   &:hover,
   &:focus {
-    color: ${get('colors.text.primary')};
+    color: ${get('colors.fg.default')};
     text-decoration: none;
   }
 
   &.selected {
-    color: ${get('colors.text.primary')};
-    border-color: ${get('colors.border.primary')};
+    color: ${get('colors.fg.default')};
+    border-color: ${get('colors.border.default')};
     border-top-right-radius: ${get('radii.2')};
     border-top-left-radius: ${get('radii.2')};
-    background-color: ${get('colors.bg.canvas')};
+    background-color: ${get('colors.canvas.default')};
   }
 
   ${COMMON};

package/src/TextInput.tsx

@@ -53,14 +53,14 @@ const Wrapper = styled.span<StyledWrapperProps>`
   min-height: 34px;
   font-size: ${get('fontSizes.1')};
   line-height: 20px;
-  color: ${get('colors.text.primary')};
+  color: ${get('colors.fg.default')};
   vertical-align: middle;
   background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
   background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
-  border: 1px solid ${get('colors.border.primary')};
+  border: 1px solid ${get('colors.border.default')};
   border-radius: ${get('radii.2')};
   outline: none;
-  box-shadow: ${get('shadows.shadow.inset')};
+  box-shadow: ${get('shadows.primer.shadow.inset')};
 
   ${props => {
     if (props.hasIcon) {
@@ -76,28 +76,28 @@ const Wrapper = styled.span<StyledWrapperProps>`
 
   .TextInput-icon {
     align-self: center;
-    color: ${get('colors.icon.tertiary')};
+    color: ${get('colors.fg.muted')};
     margin: 0 ${get('space.2')};
     flex-shrink: 0;
   }
 
   &:focus-within {
-    border-color: ${get('colors.state.focus.border')};
-    box-shadow: ${get('shadows.state.focus.shadow')};
+    border-color: ${get('colors.accent.emphasis')};
+    box-shadow: ${get('shadows.primer.shadow.focus')};
   }
 
   ${props =>
     props.contrast &&
     css`
-      background-color: ${get('colors.input.contrastBg')};
+      background-color: ${get('colors.canvas.inset')};
     `}
 
   ${props =>
     props.disabled &&
     css`
-      color: ${get('colors.text.secondary')};
+      color: ${get('colors.fg.muted')};
       background-color: ${get('colors.input.disabledBg')};
-      border-color: ${get('colors.input.disabledBorder')};
+      border-color: ${get('colors.border.default')};
     `}
 
   ${props =>