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

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "28.5.0",
+  "version": "29.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -4041,9 +4041,9 @@
       "integrity": "sha512-j5XppNRCvgaMZLPsVvvmp6GSh7P5pq6PUbsfLNBWi2Kz3KYDeoGDWbPr5MjoxFOGUn6Hjnt6qjHPRxahd11vLQ=="
     },
     "@primer/primitives": {
-      "version": "4.6.4",
-      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.6.4.tgz",
-      "integrity": "sha512-KKlP7m+94pbuFl3BYycQrmtNhX5+0gK3ftAh5L4a73Ov4FHbgMyVto3Cr0C5tlpvg0760Nisu+e/4T+/uvx8tA=="
+      "version": "4.7.1",
+      "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-4.7.1.tgz",
+      "integrity": "sha512-kttAUcP3QgT5UbYLeMTKDxPvnAVzywX0xnKPcLkmEVQyhmEBlTO4LSlYIzL5YcKyklHcFRf1426UcGOY9wdWDQ=="
     },
     "@reach/router": {
       "version": "1.3.4",
@@ -14756,6 +14756,11 @@
         "prettier-linter-helpers": "^1.0.0"
       }
     },
+    "eslint-plugin-primer-react": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-primer-react/-/eslint-plugin-primer-react-0.4.1.tgz",
+      "integrity": "sha512-FMYe8ZQvyApHIXOhGUMhfiWTVlanWxuW75WBCnWjlr4hvtOz77GTUo0U/1IStk02zXMUzC37FLbNClbnip3fxw=="
+    },
     "eslint-plugin-react": {
       "version": "7.24.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.24.0.tgz",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "29.0.0-rc.ae627848",
+  "version": "29.1.0-rc.4e9b967e",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -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"
   },

package/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')};
 `

package/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;

package/src/ActionList/Item.tsx

@@ -129,9 +129,9 @@ 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'
     }
   }
@@ -139,16 +139,16 @@ const getItemVariant = (variant = 'default', disabled?: boolean) => {
   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')}'.

package/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')};
   }
 `
 

package/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}>

package/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;
       }

package/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};

package/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,7 +64,7 @@ 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;
@@ -72,7 +72,7 @@ const BreadcrumbItem = styled.a.attrs<StyledBreadcrumbItemProps>(props => ({
     text-decoration: underline;
   }
   &.selected {
-    color: ${get('colors.text.primary')};
+    color: ${get('colors.fg.default')};
     pointer-events: none;
   }
   ${COMMON}

package/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')};
   }

package/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};

package/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 {

package/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;
     }
   }

package/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};

package/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} />

package/src/CounterLabel.tsx

@@ -12,10 +12,10 @@ 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)
   }
 }
 
@@ -23,10 +23,10 @@ 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)
   }
 }
 

package/src/Dialog/ConfirmationDialog.tsx

@@ -65,7 +65,7 @@ const ConfirmationHeader: React.FC<DialogHeaderProps> = ({title, onClose, dialog
 const StyledConfirmationBody = styled(Box)`
   font-size: ${get('fontSizes.1')};
   padding: 0 ${get('space.3')} ${get('space.3')} ${get('space.3')};
-  color: ${get('colors.text.tertiary')};
+  color: ${get('colors.fg.muted')};
   flex-grow: 1;
 `
 const ConfirmationBody: React.FC<DialogProps> = ({children}) => {

package/src/Dialog/Dialog.tsx

@@ -182,7 +182,7 @@ interface StyledDialogProps {
 const StyledDialog = styled.div<StyledDialogProps & SystemCommonProps & SystemPositionProps & SxProp>`
   display: flex;
   flex-direction: column;
-  background-color: ${get('colors.bg.overlay')};
+  background-color: ${get('colors.canvas.overlay')};
   box-shadow: ${get('shadows.overlay.shadow')};
   min-width: 296px;
   max-width: calc(100vw - 64px);
@@ -297,7 +297,7 @@ const _Dialog = React.forwardRef<HTMLDivElement, React.PropsWithChildren<DialogP
 _Dialog.displayName = 'Dialog'
 
 const Header = styled(Box).attrs({as: 'header'})`
-  box-shadow: 0 1px 0 ${get('colors.border.overlay')};
+  box-shadow: 0 1px 0 ${get('colors.border.default')};
   padding: ${get('space.2')};
   z-index: 1;
   flex-shrink: 0;
@@ -309,7 +309,7 @@ const Title = styled(Box)`
 const Subtitle = styled(Box)`
   font-size: ${get('fontSizes.0')};
   margin-top: ${get('space.1')};
-  color: ${get('colors.text.tertiary')};
+  color: ${get('colors.fg.muted')};
 `
 const Body = styled(Box)`
   flex-grow: 1;
@@ -317,7 +317,7 @@ const Body = styled(Box)`
   padding: ${get('space.3')};
 `
 const Footer = styled(Box).attrs({as: 'footer'})`
-  box-shadow: 0 -1px 0 ${get('colors.border.overlay')};
+  box-shadow: 0 -1px 0 ${get('colors.border.default')};
   padding: ${get('space.3')};
   display: flex;
   flex-flow: wrap;
@@ -373,7 +373,7 @@ const DialogCloseButton = styled(Button)`
   background: transparent;
   border: 0;
   vertical-align: middle;
-  color: ${get('colors.text.secondary')};
+  color: ${get('colors.fg.muted')};
   padding: ${get('space.2')};
   align-self: flex-start;
   line-height: normal;

package/src/Dialog.tsx

@@ -28,7 +28,7 @@ const DialogBase = styled.div<StyledDialogBaseProps>`
   max-height: 80vh;
   z-index: 999;
   margin: 10vh auto;
-  background-color: ${get('colors.bg.primary')};
+  background-color: ${get('colors.canvas.default')};
   width: ${props => (props.narrow ? '320px' : props.wide ? '640px' : '440px')};
   outline: none;
 
@@ -46,7 +46,7 @@ const DialogBase = styled.div<StyledDialogBaseProps>`
 
 const DialogHeaderBase = styled(Box)<SxProp>`
   border-radius: ${get('radii.2')} ${get('radii.2')} 0px 0px;
-  border-bottom: 1px solid ${get('colors.border.primary')};
+  border-bottom: 1px solid ${get('colors.border.default')};
   display: flex;
 
   @media screen and (max-width: 750px) {
@@ -60,7 +60,7 @@ export type DialogHeaderProps = ComponentProps<typeof DialogHeaderBase>
 function DialogHeader({theme, children, backgroundColor = 'gray.1', ...rest}: DialogHeaderProps) {
   if (React.Children.toArray(children).every(ch => typeof ch === 'string')) {
     children = (
-      <Text theme={theme} color="text.primary" fontSize={1} fontWeight="bold" fontFamily="sans-serif">
+      <Text theme={theme} color="fg.default" fontSize={1} fontWeight="bold" fontFamily="sans-serif">
         {children}
       </Text>
     )
@@ -85,7 +85,7 @@ const Overlay = styled.span`
     content: ' ';
     background: transparent;
     z-index: 99;
-    background: ${get('colors.fade.black50')};
+    background: ${get('colors.primer.canvas.backdrop')};
   }
 `
 

package/src/Dropdown.tsx

@@ -56,10 +56,10 @@ type StyledDropdownMenuProps = {
 
 const DropdownMenu = styled.ul<StyledDropdownMenuProps>`
   background-clip: padding-box;
-  background-color: ${get('colors.bg.overlay')};
-  border: 1px solid ${get('colors.border.overlay')};
+  background-color: ${get('colors.canvas.overlay')};
+  border: 1px solid ${get('colors.border.default')};
   border-radius: ${get('radii.2')};
-  box-shadow: ${get('shadows.dropdown.shadow')};
+  box-shadow: ${get('shadows.shadow.large')};
   left: 0;
   list-style: none;
   margin-top: 2px;
@@ -83,12 +83,12 @@ const DropdownMenu = styled.ul<StyledDropdownMenuProps>`
 
   &::before {
     border: 8px solid transparent;
-    border-bottom-color: ${get('colors.bg.overlay')};
+    border-bottom-color: ${get('colors.canvas.overlay')};
   }
 
   &::after {
     border: 7px solid transparent;
-    border-bottom-color: ${get('colors.bg.overlay')};
+    border-bottom-color: ${get('colors.canvas.overlay')};
   }
 
   // stylelint-disable-next-line selector-max-type
@@ -104,31 +104,31 @@ const DropdownItem = styled.li`
   display: block;
   padding: ${get('space.1')} 10px ${get('space.1')} 15px;
   overflow: hidden;
-  color: ${get('colors.text.primary')};
+  color: ${get('colors.fg.default')};
   text-overflow: ellipsis;
   white-space: nowrap;
   a {
-    color: ${get('colors.text.primary')};
+    color: ${get('colors.fg.default')};
     text-decoration: none;
     display: block;
     overflow: hidden;
-    color: ${get('colors.text.primary')};
+    color: ${get('colors.fg.default')};
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
   &:focus,
   a:focus {
-    color: ${get('colors.state.hover.primaryText')};
+    color: ${get('colors.fg.onEmphasis')};
     text-decoration: none;
-    background-color: ${get('colors.state.hover.primaryBg')};
+    background-color: ${get('colors.accent.emphasis')};
   }
 
   &:hover,
   &:hover a {
-    color: ${get('colors.state.hover.primaryText')};
+    color: ${get('colors.fg.onEmphasis')};
     text-decoration: none;
-    background-color: ${get('colors.state.hover.primaryBg')};
+    background-color: ${get('colors.accent.emphasis')};
     outline: none;
   }
   ${COMMON};

package/src/DropdownStyles.ts

@@ -16,7 +16,7 @@ const getDirectionStyles = (theme: Theme, direction: 'ne' | 'e' | 'se' | 's' | '
         right: -16px;
         left: auto;
         border-color: transparent;
-        border-left-color: ${get('colors.border.overlay')(theme)};
+        border-left-color: ${get('colors.border.default')(theme)};
       }
 
       &::after {
@@ -24,7 +24,7 @@ const getDirectionStyles = (theme: Theme, direction: 'ne' | 'e' | 'se' | 's' | '
         right: -14px;
         left: auto;
         border-color: transparent;
-        border-left-color: ${get('colors.border.overlay')(theme)};
+        border-left-color: ${get('colors.border.default')(theme)};
       }
     `,
     e: `
@@ -38,14 +38,14 @@ const getDirectionStyles = (theme: Theme, direction: 'ne' | 'e' | 'se' | 's' | '
         top: 10px;
         left: -16px;
         border-color: transparent;
-        border-right-color: ${get('colors.border.overlay')(theme)};
+        border-right-color: ${get('colors.border.default')(theme)};
       }
 
       &::after {
         top: 11px;
         left: -14px;
         border-color: transparent;
-        border-right-color: ${get('colors.border.overlay')(theme)};
+        border-right-color: ${get('colors.border.default')(theme)};
       }
     `,
     ne: `
@@ -63,7 +63,7 @@ const getDirectionStyles = (theme: Theme, direction: 'ne' | 'e' | 'se' | 's' | '
       &::before {
         bottom: -8px;
         left: 9px;
-        border-top: 8px solid ${get('colors.border.overlay')(theme)};
+        border-top: 8px solid ${get('colors.border.default')(theme)};
         border-bottom: 0;
         border-left: 8px solid transparent;
       }
@@ -71,7 +71,7 @@ const getDirectionStyles = (theme: Theme, direction: 'ne' | 'e' | 'se' | 's' | '
       &::after {
         bottom: -7px;
         left: 10px;
-        border-top: 7px solid ${get('colors.border.overlay')(theme)};
+        border-top: 7px solid ${get('colors.border.default')(theme)};
         border-right: 7px solid transparent;
         border-bottom: 0;
         border-left: 7px solid transparent;

package/src/FilterList.tsx

@@ -33,8 +33,8 @@ const FilterListItemBase = styled.a<StyledFilterListItemBaseProps>`
   margin: ${props => (props.small ? '0 0 2px' : '0 0 5px 0')};
   overflow: hidden;
   font-size: ${get('fontSizes.1')};
-  color: ${props => (props.selected ? get('colors.state.selected.primaryText') : get('colors.text.secondary'))};
-  background-color: ${props => (props.selected ? get('colors.state.selected.primaryBg') : '')}!important;
+  color: ${props => (props.selected ? get('colors.fg.onEmphasis') : get('colors.fg.muted'))};
+  background-color: ${props => (props.selected ? get('colors.accent.emphasis') : '')}!important;
   text-decoration: none;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -42,11 +42,11 @@ const FilterListItemBase = styled.a<StyledFilterListItemBaseProps>`
   border-radius: ${get('radii.1')};
   &:hover {
     text-decoration: none;
-    background-color: ${get('colors.bg.tertiary')};
+    background-color: ${get('colors.canvas.subtle')};
   }
   &:active {
-    color: ${get('colors.state.selected.primaryText')};
-    background-color: ${get('colors.state.selected.primaryBg')};
+    color: ${get('colors.fg.onEmphasis')};
+    background-color: ${get('colors.accent.emphasis')};
   }
   .count {
     float: right;

package/src/FilteredActionList/FilteredActionList.tsx

@@ -45,7 +45,7 @@ function scrollIntoViewingArea(
 }
 
 const StyledHeader = styled.div`
-  box-shadow: 0 1px 0 ${get('colors.border.primary')};
+  box-shadow: 0 1px 0 ${get('colors.border.default')};
   z-index: 1;
 `
 
@@ -126,7 +126,7 @@ export function FilteredActionList({
           ref={inputRef}
           block
           width="auto"
-          color="text.primary"
+          color="fg.default"
           value={filterValue}
           onChange={onInputChange}
           onKeyPress={onInputKeyPress}

package/src/Flash.tsx

@@ -49,7 +49,7 @@ const Flash = styled.div<
     SxProp
 >`
   position: relative;
-  color: ${get('colors.text.primary')};
+  color: ${get('colors.fg.default')};
   padding: ${get('space.3')};
   border-style: solid;
   border-width: ${props => (props.full ? '1px 0px' : '1px')};

package/src/Label.tsx

@@ -7,8 +7,8 @@ import {ComponentProps} from './utils/types'
 const outlineStyles = css`
   margin-top: -1px; // offsets the 1px border
   margin-bottom: -1px; // offsets the 1px border
-  color: ${get('colors.label.secondary.text')};
-  border: ${get('borderWidths.1')} solid ${get('colors.label.border')};
+  color: ${get('colors.fg.muted')};
+  border: ${get('borderWidths.1')} solid ${get('colors.border.default')};
   box-shadow: none;
   ${borderColor};
   ${COMMON};
@@ -52,7 +52,7 @@ const Label = styled.span<
 >`
   display: inline-block;
   font-weight: ${get('fontWeights.semibold')};
-  color: ${get('colors.text.inverse')};
+  color: ${get('colors.fg.onEmphasis')};
   border-radius: ${get('radii.3')};
 
   &:hover {

package/src/Link.tsx

@@ -20,11 +20,11 @@ const hoverColor = system({
 })
 
 const Link = styled.a<StyledLinkProps>`
-  color: ${props => (props.muted ? get('colors.text.secondary')(props) : get('colors.text.link')(props))};
+  color: ${props => (props.muted ? get('colors.fg.muted')(props) : get('colors.accent.fg')(props))};
   text-decoration: ${props => (props.underline ? 'underline' : 'none')};
   &:hover {
     text-decoration: ${props => (props.muted ? 'none' : 'underline')};
-    ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.text.link')(props)}` : '')};
+    ${props => (props.hoverColor ? hoverColor : props.muted ? `color: ${get('colors.accent.fg')(props)}` : '')};
   }
   &:is(button) {
     display: inline-block;