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

package/src/Timeline.tsx

@@ -42,7 +42,7 @@ const TimelineItem = styled(Box).attrs<StyledTimelineItemProps>(props => ({
     display: block;
     width: 2px;
     content: '';
-    background-color: ${get('colors.border.secondary')};
+    background-color: ${get('colors.border.muted')};
   }
 
   ${props =>
@@ -58,8 +58,8 @@ const TimelineItem = styled(Box).attrs<StyledTimelineItemProps>(props => ({
         height: 16px;
         margin-top: ${get('space.2')};
         margin-bottom: ${get('space.2')};
-        color: ${get('colors.icon.tertiary')};
-        background-color: ${get('colors.bg.canvas')};
+        color: ${get('colors.fg.muted')};
+        background-color: ${get('colors.canvas.default')};
         border: 0;
       }
     `}
@@ -77,12 +77,12 @@ const TimelineBadge = (props: TimelineBadgeProps) => {
         display="flex"
         className={classnames(props.className, 'TimelineItem-Badge')}
         flexShrink={0}
-        css={`
-          border-radius: 50%;
-          border: 2px solid ${get('colors.bg.canvas')};
-        `}
+        borderRadius="50%"
+        borderWidth="2px"
+        borderStyle="solid"
+        borderColor="canvas.default"
         overflow="hidden"
-        color="icon.secondary"
+        color="fg.muted"
         bg="timeline.badgeBg"
         width="32px"
         height="32px"
@@ -102,7 +102,7 @@ const TimelineBody = styled(Box)`
   min-width: 0;
   max-width: 100%;
   margin-top: ${get('space.1')};
-  color: ${get('colors.timeline.text')};
+  color: ${get('colors.fg.muted')};
   flex: auto;
   font-size: ${get('fontSizes.1')};
   ${sx};
@@ -115,9 +115,9 @@ const TimelineBreak = styled(Box)`
   margin: 0;
   margin-bottom: -${get('space.3')};
   margin-left: 0;
-  background-color: ${get('colors.bg.canvas')};
+  background-color: ${get('colors.canvas.default')};
   border: 0;
-  border-top: ${get('space.1')} solid ${get('colors.border.primary')};
+  border-top: ${get('space.1')} solid ${get('colors.border.default')};
   ${sx};
 `
 

package/src/Tooltip.tsx

@@ -14,7 +14,7 @@ const TooltipBase = styled.span<SystemCommonProps & SxProp>`
     display: none;
     width: 0px;
     height: 0px;
-    color: ${get('colors.tooltip.bg')};
+    color: ${get('colors.neutral.emphasisPlus')};
     pointer-events: none;
     content: '';
     border: 6px solid transparent;
@@ -28,7 +28,7 @@ const TooltipBase = styled.span<SystemCommonProps & SxProp>`
     padding: 0.5em 0.75em;
     font: normal normal 11px/1.5 ${get('fonts.normal')};
     -webkit-font-smoothing: subpixel-antialiased;
-    color: ${get('colors.tooltip.text')};
+    color: ${get('colors.fg.onEmphasis')};
     text-align: center;
     text-decoration: none;
     text-shadow: none;
@@ -38,7 +38,7 @@ const TooltipBase = styled.span<SystemCommonProps & SxProp>`
     white-space: pre;
     pointer-events: none;
     content: attr(aria-label);
-    background: ${get('colors.tooltip.bg')};
+    background: ${get('colors.neutral.emphasisPlus')};
     border-radius: ${get('radii.1')};
     opacity: 0;
   }
@@ -101,7 +101,7 @@ const TooltipBase = styled.span<SystemCommonProps & SxProp>`
       right: 50%;
       bottom: -7px;
       margin-right: -6px;
-      border-bottom-color: ${get('colors.tooltip.bg')};
+      border-bottom-color: ${get('colors.neutral.emphasisPlus')};
     }
   }
 
@@ -132,7 +132,7 @@ const TooltipBase = styled.span<SystemCommonProps & SxProp>`
       right: 50%;
       bottom: auto;
       margin-right: -6px;
-      border-top-color: ${get('colors.tooltip.bg')};
+      border-top-color: ${get('colors.neutral.emphasisPlus')};
     }
   }
 
@@ -168,7 +168,7 @@ const TooltipBase = styled.span<SystemCommonProps & SxProp>`
       bottom: 50%;
       left: -7px;
       margin-top: -6px;
-      border-left-color: ${get('colors.tooltip.bg')};
+      border-left-color: ${get('colors.neutral.emphasisPlus')};
     }
   }
 
@@ -186,7 +186,7 @@ const TooltipBase = styled.span<SystemCommonProps & SxProp>`
       right: -7px;
       bottom: 50%;
       margin-top: -6px;
-      border-right-color: ${get('colors.tooltip.bg')};
+      border-right-color: ${get('colors.neutral.emphasisPlus')};
     }
   }
 

package/src/UnderlineNav.tsx

@@ -13,7 +13,7 @@ const SELECTED_CLASS = 'selected'
 const UnderlineNavBase = styled.nav`
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid ${get('colors.border.secondary')};
+  border-bottom: 1px solid ${get('colors.border.muted')};
   &.UnderlineNav--right {
     justify-content: flex-end;
 
@@ -74,29 +74,29 @@ const UnderlineNavLink = styled.a.attrs<StyledUnderlineNavLinkProps>(props => ({
   margin-right: ${get('space.3')};
   font-size: ${get('fontSizes.1')};
   line-height: ${get('lineHeights.default')};
-  color: ${get('colors.underlinenav.text')};
+  color: ${get('colors.fg.default')};
   text-align: center;
   border-bottom: 2px solid transparent;
   text-decoration: none;
 
   &:hover,
   &:focus {
-    color: ${get('colors.underlinenav.textHover')};
+    color: ${get('colors.fg.default')};
     text-decoration: none;
-    border-bottom-color: ${get('colors.border.tertiary')};
+    border-bottom-color: ${get('colors.neutral.muted')};
     transition: 0.2s ease;
 
     .UnderlineNav-octicon {
-      color: ${get('colors.text.tertiary')};
+      color: ${get('colors.fg.muted')};
     }
   }
 
   &.selected {
-    color: ${get('colors.underlinenav.textActive')};
-    border-bottom-color: ${get('colors.underlinenav.borderActive')};
+    color: ${get('colors.fg.default')};
+    border-bottom-color: ${get('colors.primer.border.active')};
 
     .UnderlineNav-octicon {
-      color: ${get('colors.underlinenav.iconActive')};
+      color: ${get('colors.fg.default')};
     }
   }
 

package/src/__tests__/BorderBox.tsx

@@ -23,7 +23,7 @@ describe('BorderBox', () => {
   })
 
   it('renders borders', () => {
-    expect(render(<BorderBox borderColor="border.success" />)).toHaveStyleRule(
+    expect(render(<BorderBox borderColor="success.emphasis" />)).toHaveStyleRule(
       'border-color',
       theme.colorSchemes.light.colors.border?.success
     )

package/src/__tests__/CircleOcticon.tsx

@@ -38,7 +38,7 @@ describe('CircleOcticon', () => {
   })
 
   it('respects the bg prop', () => {
-    expect(render(<CircleOcticon icon={CheckIcon} bg="bg.danger" />)).toHaveStyleRule(
+    expect(render(<CircleOcticon icon={CheckIcon} bg="danger.subtle" />)).toHaveStyleRule(
       'background-color',
       theme.colorSchemes.light.colors.bg?.danger
     )

package/src/__tests__/Link.tsx

@@ -43,6 +43,6 @@ describe('Link', () => {
   })
 
   it('respectes the "color" prop when "muted" prop is also passed', () => {
-    expect(render(<Link muted color="text.inverse" />)).toMatchSnapshot()
+    expect(render(<Link muted color="fg.onEmphasis" />)).toMatchSnapshot()
   })
 })

package/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap

@@ -11,7 +11,7 @@ exports[`Pagination renders consistently 1`] = `
   padding: 5px 10px;
   font-style: normal;
   line-height: 20px;
-  color: #24292e;
+  color: #24292f;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
@@ -37,31 +37,31 @@ exports[`Pagination renders consistently 1`] = `
 .c2:focus {
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-color: #e1e4e8;
+  border-color: #d0d7de;
   outline: 0;
   -webkit-transition-duration: 0.1s;
   transition-duration: 0.1s;
 }
 
 .c2:active {
-  border-color: hsla(214,13%,93%,1);
+  border-color: hsla(210,18%,87%,1);
 }
 
 .c2[rel='prev'],
 .c2[rel='next'] {
-  color: #0366d6;
+  color: #0969da;
 }
 
 .c2[aria-current],
 .c2[aria-current]:hover {
   color: #ffffff;
-  background-color: #0366d6;
+  background-color: #0969da;
   border-color: transparent;
 }
 
 .c2[aria-disabled],
 .c2[aria-disabled]:hover {
-  color: #959da5;
+  color: #57606a;
   cursor: default;
   border-color: transparent;
 }

package/src/__tests__/PointerBox.tsx

@@ -26,10 +26,10 @@ describe('PointerBox', () => {
   })
 
   it('passes the "borderColor" prop to both <BorderBox> and <Caret>', () => {
-    expect(render(<PointerBox borderColor="border.danger" />)).toMatchSnapshot()
+    expect(render(<PointerBox borderColor="danger.emphasis" />)).toMatchSnapshot()
   })
 
   it('passes the "bg" prop to both <BorderBox> and <Caret>', () => {
-    expect(render(<PointerBox bg="bg.danger" />)).toMatchSnapshot()
+    expect(render(<PointerBox bg="danger.subtle" />)).toMatchSnapshot()
   })
 })

package/src/__tests__/Position.tsx

@@ -32,7 +32,7 @@ describe('position components', () => {
 
     it('can render other components with the as prop', () => {
       const result = render(
-        <Absolute as={Box} borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2} />
+        <Absolute as={Box} borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} />
       )
       expect(result).toHaveStyleRule('position', 'absolute')
       expect(result).toHaveStyleRule('border-width', '1px')
@@ -60,7 +60,7 @@ describe('position components', () => {
 
     it('can render other components with the as prop', () => {
       const result = render(
-        <Fixed as={Box} borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2} />
+        <Fixed as={Box} borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} />
       )
       expect(result).toHaveStyleRule('position', 'fixed')
       expect(result).toHaveStyleRule('border-width', '1px')
@@ -84,7 +84,7 @@ describe('position components', () => {
 
     it('can render other components with the as prop', () => {
       const result = render(
-        <Relative as={Box} borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2} />
+        <Relative as={Box} borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} />
       )
       expect(result).toHaveStyleRule('position', 'relative')
       expect(result).toHaveStyleRule('border-width', '1px')
@@ -108,7 +108,7 @@ describe('position components', () => {
 
     it('can render other components with the as prop', () => {
       const result = render(
-        <Sticky as={Box} borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2} />
+        <Sticky as={Box} borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} />
       )
       expect(result).toHaveStyleRule('position', 'sticky')
       expect(result).toHaveStyleRule('border-width', '1px')

package/src/__tests__/ThemeProvider.tsx

@@ -65,7 +65,7 @@ it('respects theme prop', () => {
 it('has default theme', () => {
   render(
     <ThemeProvider>
-      <Text color="text.primary" mb={1}>
+      <Text color="fg.default" mb={1}>
         Hello
       </Text>
     </ThemeProvider>

package/src/__tests__/__snapshots__/ActionList.tsx.snap

@@ -14,7 +14,7 @@ exports[`ActionList renders consistently 1`] = `
 .c0[data-has-active-descendant],
 .c0:focus-within {
   --item-hover-bg-override: none;
-  --item-hover-divider-border-color-override: hsla(214,13%,93%,1);
+  --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
 }
 
 <div

package/src/__tests__/__snapshots__/ActionMenu.tsx.snap

@@ -23,10 +23,10 @@ exports[`ActionMenu renders consistently 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #24292e;
-  background-color: #fafbfc;
-  border: 1px solid rgba(27,31,35,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,35,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c0:hover {
@@ -48,23 +48,23 @@ exports[`ActionMenu renders consistently 1`] = `
 
 .c0:hover {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,35,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c0:focus {
-  border-color: rgba(27,31,35,0.15);
-  box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
 .c0:active {
   background-color: hsla(220,14%,94%,1);
-  box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
 }
 
 .c0:disabled {
-  color: #959da5;
-  background-color: #fafbfc;
-  border-color: rgba(27,31,35,0.15);
+  color: #57606a;
+  background-color: #f6f8fa;
+  border-color: rgba(27,31,36,0.15);
 }
 
 <button

package/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap

@@ -4,7 +4,7 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #24292e;
+  color: #24292f;
 }
 
 .c1 {
@@ -29,10 +29,10 @@ exports[`AnchoredOverlay renders consistently 1`] = `
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #24292e;
-  background-color: #fafbfc;
-  border: 1px solid rgba(27,31,35,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,35,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -54,23 +54,23 @@ exports[`AnchoredOverlay renders consistently 1`] = `
 
 .c1:hover {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,35,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c1:focus {
-  border-color: rgba(27,31,35,0.15);
-  box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
 .c1:active {
   background-color: hsla(220,14%,94%,1);
-  box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
 }
 
 .c1:disabled {
-  color: #959da5;
-  background-color: #fafbfc;
-  border-color: rgba(27,31,35,0.15);
+  color: #57606a;
+  background-color: #f6f8fa;
+  border-color: rgba(27,31,36,0.15);
 }
 
 <div
@@ -99,7 +99,7 @@ Object {
   "baseElement": .c0 {
   font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
   line-height: 1.5;
-  color: #24292e;
+  color: #24292f;
 }
 
 .c1 {
@@ -124,10 +124,10 @@ Object {
   text-decoration: none;
   text-align: center;
   font-size: 14px;
-  color: #24292e;
-  background-color: #fafbfc;
-  border: 1px solid rgba(27,31,35,0.15);
-  box-shadow: 0 1px 0 rgba(27,31,35,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
 }
 
 .c1:hover {
@@ -149,28 +149,28 @@ Object {
 
 .c1:hover {
   background-color: #f3f4f6;
-  border-color: rgba(27,31,35,0.15);
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c1:focus {
-  border-color: rgba(27,31,35,0.15);
-  box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
 .c1:active {
   background-color: hsla(220,14%,94%,1);
-  box-shadow: inset 0 0.15em 0.3em rgba(27,31,35,0.15);
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
 }
 
 .c1:disabled {
-  color: #959da5;
-  background-color: #fafbfc;
-  border-color: rgba(27,31,35,0.15);
+  color: #57606a;
+  background-color: #f6f8fa;
+  border-color: rgba(27,31,36,0.15);
 }
 
 .c2 {
   background-color: #ffffff;
-  box-shadow: 0 1px 3px rgba(27,31,35,0.12),0 8px 24px rgba(68,77,86,0.12);
+  box-shadow: 0 1px 3px rgba(27,31,36,0.12),0 8px 24px rgba(66,74,83,0.12);
   position: absolute;
   min-width: 192px;
   max-width: 640px;
@@ -235,7 +235,7 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="BaseStyles__Base-qvuaww-0 dhupSQ"
+      class="BaseStyles__Base-qvuaww-0 ihFkAM"
       color="text.primary"
       data-portal-root="true"
       font-family="normal"
@@ -243,7 +243,7 @@ Object {
       <button
         aria-haspopup="true"
         aria-labelledby="react-aria-1"
-        class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 jhgDtb"
+        class="ButtonBase-sc-181ps9o-0 Button-xjtz72-0 jPURef"
         id="react-aria-1"
         tabindex="0"
       >
@@ -257,7 +257,7 @@ Object {
           style="position: relative; z-index: 1;"
         >
           <div
-            class="Overlay__StyledOverlay-jhwkzw-0 cWgXnb"
+            class="Overlay__StyledOverlay-jhwkzw-0 jFTKwM"
             data-focus-trap="active"
             height="auto"
             role="none"

package/src/__tests__/__snapshots__/BorderBox.tsx.snap

@@ -4,7 +4,7 @@ exports[`BorderBox renders consistently 1`] = `
 .c0 {
   border-width: 1px;
   border-style: solid;
-  border-color: #e1e4e8;
+  border-color: #d0d7de;
   border-radius: 6px;
 }
 

package/src/__tests__/__snapshots__/BranchName.tsx.snap

@@ -6,8 +6,8 @@ exports[`BranchName renders consistently 1`] = `
   padding: 2px 6px;
   font-size: 12px;
   font-family: SFMono-Regular,Consolas,"Liberation Mono",Menlo,Courier,monospace;
-  color: #586069;
-  background-color: hsla(210,100%,96%,1);
+  color: #57606a;
+  background-color: #ddf4ff;
   border-radius: 6px;
 }
 

package/src/__tests__/__snapshots__/BreadcrumbItem.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Breadcrumb.Item adds activeClassName={SELECTED_CLASS} when it gets a "to" prop 1`] = `
 .c0 {
-  color: #0366d6;
+  color: #0969da;
   display: inline-block;
   font-size: 14px;
   -webkit-text-decoration: none;
@@ -15,7 +15,7 @@ exports[`Breadcrumb.Item adds activeClassName={SELECTED_CLASS} when it gets a "t
 }
 
 .c0.selected {
-  color: #24292e;
+  color: #24292f;
   pointer-events: none;
 }
 
@@ -29,7 +29,7 @@ exports[`Breadcrumb.Item adds activeClassName={SELECTED_CLASS} when it gets a "t
 
 exports[`Breadcrumb.Item renders consistently 1`] = `
 .c0 {
-  color: #0366d6;
+  color: #0969da;
   display: inline-block;
   font-size: 14px;
   -webkit-text-decoration: none;
@@ -42,7 +42,7 @@ exports[`Breadcrumb.Item renders consistently 1`] = `
 }
 
 .c0.selected {
-  color: #24292e;
+  color: #24292f;
   pointer-events: none;
 }
 
@@ -54,7 +54,7 @@ exports[`Breadcrumb.Item renders consistently 1`] = `
 
 exports[`Breadcrumb.Item respects the "selected" prop 1`] = `
 .c0 {
-  color: #0366d6;
+  color: #0969da;
   display: inline-block;
   font-size: 14px;
   -webkit-text-decoration: none;
@@ -67,7 +67,7 @@ exports[`Breadcrumb.Item respects the "selected" prop 1`] = `
 }
 
 .c0.selected {
-  color: #24292e;
+  color: #24292f;
   pointer-events: none;
 }