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

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

@@ -27,14 +27,14 @@ exports[`TextInput renders 1`] = `
   min-height: 34px;
   font-size: 14px;
   line-height: 20px;
-  color: #24292e;
+  color: #24292f;
   vertical-align: middle;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  border: 1px solid #e1e4e8;
+  border: 1px solid #d0d7de;
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(225,228,232,0.2);
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   padding: 6px 12px;
 }
 
@@ -42,7 +42,7 @@ exports[`TextInput renders 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #959da5;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -50,8 +50,8 @@ exports[`TextInput renders 1`] = `
 }
 
 .c0:focus-within {
-  border-color: #0366d6;
-  box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
 @media (min-width:768px) {
@@ -98,14 +98,14 @@ exports[`TextInput renders block 1`] = `
   min-height: 34px;
   font-size: 14px;
   line-height: 20px;
-  color: #24292e;
+  color: #24292f;
   vertical-align: middle;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  border: 1px solid #e1e4e8;
+  border: 1px solid #d0d7de;
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(225,228,232,0.2);
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   padding: 6px 12px;
   display: block;
   width: 100%;
@@ -115,7 +115,7 @@ exports[`TextInput renders block 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #959da5;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -123,8 +123,8 @@ exports[`TextInput renders block 1`] = `
 }
 
 .c0:focus-within {
-  border-color: #0366d6;
-  box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
 @media (min-width:768px) {
@@ -171,14 +171,14 @@ exports[`TextInput renders consistently 1`] = `
   min-height: 34px;
   font-size: 14px;
   line-height: 20px;
-  color: #24292e;
+  color: #24292f;
   vertical-align: middle;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  border: 1px solid #e1e4e8;
+  border: 1px solid #d0d7de;
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(225,228,232,0.2);
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   padding: 6px 12px;
 }
 
@@ -186,7 +186,7 @@ exports[`TextInput renders consistently 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #959da5;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -194,8 +194,8 @@ exports[`TextInput renders consistently 1`] = `
 }
 
 .c0:focus-within {
-  border-color: #0366d6;
-  box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
 @media (min-width:768px) {
@@ -241,14 +241,14 @@ exports[`TextInput renders large 1`] = `
   min-height: 34px;
   font-size: 14px;
   line-height: 20px;
-  color: #24292e;
+  color: #24292f;
   vertical-align: middle;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  border: 1px solid #e1e4e8;
+  border: 1px solid #d0d7de;
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(225,228,232,0.2);
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   padding: 6px 12px;
   padding-left: 8px;
   padding-right: 8px;
@@ -261,7 +261,7 @@ exports[`TextInput renders large 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #959da5;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -269,8 +269,8 @@ exports[`TextInput renders large 1`] = `
 }
 
 .c0:focus-within {
-  border-color: #0366d6;
-  box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
 @media (min-width:768px) {
@@ -317,14 +317,14 @@ exports[`TextInput renders small 1`] = `
   min-height: 34px;
   font-size: 14px;
   line-height: 20px;
-  color: #24292e;
+  color: #24292f;
   vertical-align: middle;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  border: 1px solid #e1e4e8;
+  border: 1px solid #d0d7de;
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(225,228,232,0.2);
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   padding: 6px 12px;
   min-height: 28px;
   padding-left: 8px;
@@ -339,7 +339,7 @@ exports[`TextInput renders small 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #959da5;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -347,8 +347,8 @@ exports[`TextInput renders small 1`] = `
 }
 
 .c0:focus-within {
-  border-color: #0366d6;
-  box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
 @media (min-width:768px) {
@@ -395,14 +395,14 @@ exports[`TextInput should render a password input 1`] = `
   min-height: 34px;
   font-size: 14px;
   line-height: 20px;
-  color: #24292e;
+  color: #24292f;
   vertical-align: middle;
   background-repeat: no-repeat;
   background-position: right 8px center;
-  border: 1px solid #e1e4e8;
+  border: 1px solid #d0d7de;
   border-radius: 6px;
   outline: none;
-  box-shadow: inset 0 1px 0 rgba(225,228,232,0.2);
+  box-shadow: inset 0 1px 0 rgba(208,215,222,0.2);
   padding: 6px 12px;
 }
 
@@ -410,7 +410,7 @@ exports[`TextInput should render a password input 1`] = `
   -webkit-align-self: center;
   -ms-flex-item-align: center;
   align-self: center;
-  color: #959da5;
+  color: #57606a;
   margin: 0 8px;
   -webkit-flex-shrink: 0;
   -ms-flex-negative: 0;
@@ -418,8 +418,8 @@ exports[`TextInput should render a password input 1`] = `
 }
 
 .c0:focus-within {
-  border-color: #0366d6;
-  box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
+  border-color: #0969da;
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
 @media (min-width:768px) {

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

@@ -2,13 +2,13 @@
 
 exports[`has default theme 1`] = `
 .c0 {
-  color: #24292e;
+  color: #24292f;
   margin-bottom: 4px;
 }
 
 <span
   class="c0"
-  color="text.primary"
+  color="fg.default"
 >
   Hello
 </span>

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

@@ -49,8 +49,8 @@ exports[`Timeline.Badge renders consistently 1`] = `
 .c1 {
   margin-right: 8px;
   margin-left: -15px;
-  color: #586069;
-  background-color: #e1e4e8;
+  color: #57606a;
+  background-color: #eaeef2;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -70,7 +70,9 @@ exports[`Timeline.Badge renders consistently 1`] = `
   -ms-flex-pack: center;
   justify-content: center;
   border-radius: 50%;
-  border: 2px solid #ffffff;
+  border-width: 2px;
+  border-style: solid;
+  border-color: #ffffff;
 }
 
 <div
@@ -78,7 +80,7 @@ exports[`Timeline.Badge renders consistently 1`] = `
 >
   <div
     className="c1 TimelineItem-Badge"
-    color="icon.secondary"
+    color="fg.muted"
     display="flex"
     height="32px"
     overflow="hidden"
@@ -106,7 +108,7 @@ exports[`Timeline.Item renders consistently 1`] = `
   display: block;
   width: 2px;
   content: '';
-  background-color: hsla(214,13%,93%,1);
+  background-color: hsla(210,18%,87%,1);
 }
 
 <div
@@ -135,7 +137,7 @@ exports[`Timeline.Item renders with condensed prop 1`] = `
   display: block;
   width: 2px;
   content: '';
-  background-color: hsla(214,13%,93%,1);
+  background-color: hsla(210,18%,87%,1);
 }
 
 .c0:last-child {
@@ -146,7 +148,7 @@ exports[`Timeline.Item renders with condensed prop 1`] = `
   height: 16px;
   margin-top: 8px;
   margin-bottom: 8px;
-  color: #959da5;
+  color: #57606a;
   background-color: #ffffff;
   border: 0;
 }

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

@@ -11,7 +11,7 @@ exports[`Tooltip renders consistently 1`] = `
   display: none;
   width: 0px;
   height: 0px;
-  color: #24292e;
+  color: #24292f;
   pointer-events: none;
   content: '';
   border: 6px solid transparent;
@@ -39,7 +39,7 @@ exports[`Tooltip renders consistently 1`] = `
   white-space: pre;
   pointer-events: none;
   content: attr(aria-label);
-  background: #24292e;
+  background: #24292f;
   border-radius: 3px;
   opacity: 0;
 }
@@ -96,7 +96,7 @@ exports[`Tooltip renders consistently 1`] = `
   right: 50%;
   bottom: -7px;
   margin-right: -6px;
-  border-bottom-color: #24292e;
+  border-bottom-color: #24292f;
 }
 
 .c0.tooltipped-se::after {
@@ -124,7 +124,7 @@ exports[`Tooltip renders consistently 1`] = `
   right: 50%;
   bottom: auto;
   margin-right: -6px;
-  border-top-color: #24292e;
+  border-top-color: #24292f;
 }
 
 .c0.tooltipped-ne::after {
@@ -158,7 +158,7 @@ exports[`Tooltip renders consistently 1`] = `
   bottom: 50%;
   left: -7px;
   margin-top: -6px;
-  border-left-color: #24292e;
+  border-left-color: #24292f;
 }
 
 .c0.tooltipped-e::after {
@@ -175,7 +175,7 @@ exports[`Tooltip renders consistently 1`] = `
   right: -7px;
   bottom: 50%;
   margin-top: -6px;
-  border-right-color: #24292e;
+  border-right-color: #24292f;
 }
 
 .c0.tooltipped-multiline::after {

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

@@ -10,7 +10,7 @@ exports[`UnderlineNav renders consistently 1`] = `
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
   justify-content: space-between;
-  border-bottom: 1px solid hsla(214,13%,93%,1);
+  border-bottom: 1px solid hsla(210,18%,87%,1);
 }
 
 .c0.UnderlineNav--right {

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

@@ -6,7 +6,7 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a
   margin-right: 16px;
   font-size: 14px;
   line-height: 1.5;
-  color: #24292e;
+  color: #24292f;
   text-align: center;
   border-bottom: 2px solid transparent;
   -webkit-text-decoration: none;
@@ -15,26 +15,26 @@ exports[`UnderlineNav.Link adds activeClassName={SELECTED_CLASS} when it gets a
 
 .c0:hover,
 .c0:focus {
-  color: #24292e;
+  color: #24292f;
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-bottom-color: #d1d5da;
+  border-bottom-color: rgba(175,184,193,0.2);
   -webkit-transition: 0.2s ease;
   transition: 0.2s ease;
 }
 
 .c0:hover .UnderlineNav-octicon,
 .c0:focus .UnderlineNav-octicon {
-  color: #6a737d;
+  color: #57606a;
 }
 
 .c0.selected {
-  color: #24292e;
-  border-bottom-color: #f9826c;
+  color: #24292f;
+  border-bottom-color: #FD8C73;
 }
 
 .c0.selected .UnderlineNav-octicon {
-  color: #24292e;
+  color: #24292f;
 }
 
 <div
@@ -50,7 +50,7 @@ exports[`UnderlineNav.Link renders consistently 1`] = `
   margin-right: 16px;
   font-size: 14px;
   line-height: 1.5;
-  color: #24292e;
+  color: #24292f;
   text-align: center;
   border-bottom: 2px solid transparent;
   -webkit-text-decoration: none;
@@ -59,26 +59,26 @@ exports[`UnderlineNav.Link renders consistently 1`] = `
 
 .c0:hover,
 .c0:focus {
-  color: #24292e;
+  color: #24292f;
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-bottom-color: #d1d5da;
+  border-bottom-color: rgba(175,184,193,0.2);
   -webkit-transition: 0.2s ease;
   transition: 0.2s ease;
 }
 
 .c0:hover .UnderlineNav-octicon,
 .c0:focus .UnderlineNav-octicon {
-  color: #6a737d;
+  color: #57606a;
 }
 
 .c0.selected {
-  color: #24292e;
-  border-bottom-color: #f9826c;
+  color: #24292f;
+  border-bottom-color: #FD8C73;
 }
 
 .c0.selected .UnderlineNav-octicon {
-  color: #24292e;
+  color: #24292f;
 }
 
 <a
@@ -92,7 +92,7 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
   margin-right: 16px;
   font-size: 14px;
   line-height: 1.5;
-  color: #24292e;
+  color: #24292f;
   text-align: center;
   border-bottom: 2px solid transparent;
   -webkit-text-decoration: none;
@@ -101,26 +101,26 @@ exports[`UnderlineNav.Link respects the "selected" prop 1`] = `
 
 .c0:hover,
 .c0:focus {
-  color: #24292e;
+  color: #24292f;
   -webkit-text-decoration: none;
   text-decoration: none;
-  border-bottom-color: #d1d5da;
+  border-bottom-color: rgba(175,184,193,0.2);
   -webkit-transition: 0.2s ease;
   transition: 0.2s ease;
 }
 
 .c0:hover .UnderlineNav-octicon,
 .c0:focus .UnderlineNav-octicon {
-  color: #6a737d;
+  color: #57606a;
 }
 
 .c0.selected {
-  color: #24292e;
-  border-bottom-color: #f9826c;
+  color: #24292f;
+  border-bottom-color: #FD8C73;
 }
 
 .c0.selected .UnderlineNav-octicon {
-  color: #24292e;
+  color: #24292f;
 }
 
 <a

package/src/stories/ActionList.stories.tsx

@@ -312,7 +312,7 @@ export function CustomItemChildren(): JSX.Element {
             {
               leadingVisual: ArrowRightIcon,
               children: (
-                <Label outline borderColor="border.success">
+                <Label outline borderColor="success.emphasis">
                   Choose this one
                 </Label>
               ),

package/src/stories/ThemeProvider.stories.tsx

@@ -51,11 +51,11 @@ function NightMode() {
       <Box
         my={3}
         p={3}
-        color="text.primary"
-        bg="bg.canvas"
+        color="fg.default"
+        bg="canvas.default"
         borderWidth="1px"
         borderStyle="solid"
-        borderColor="border.primary"
+        borderColor="border.default"
         borderRadius={2}
       >
         Always night mode (<ActiveColorScheme />)
@@ -71,11 +71,11 @@ function InverseMode() {
       <Box
         my={3}
         p={3}
-        color="text.primary"
-        bg="bg.canvas"
+        color="fg.default"
+        bg="canvas.default"
         borderWidth="1px"
         borderStyle="solid"
-        borderColor="border.primary"
+        borderColor="border.default"
         borderRadius={2}
       >
         Always inverse of parent mode (<ActiveColorScheme />)

package/src/stories/useFocusTrap.stories.tsx

@@ -308,7 +308,7 @@ export const MultipleFocusTraps = () => {
           the most recently-suspended trap will reactivate. Suspended focus traps can be disabled, causing them to be
           removed from the stack of suspended traps.
         </Flash>
-        <Box p={2} mb={3} borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2}>
+        <Box p={2} mb={3} borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2}>
           Legend
           <Box display="flex" flexDirection="row">
             <Box

package/src/theme-preval.js

@@ -51,6 +51,7 @@ const space = ['0', '4px', '8px', '16px', '24px', '32px', '40px', '48px', '64px'
 const light = partitionColors(primitives.colors.light)
 const dark = partitionColors(primitives.colors.dark)
 const darkDimmed = partitionColors(primitives.colors['dark_dimmed'])
+const darkHighContrast = partitionColors(primitives.colors['dark_high_contrast'])
 
 // This file must be in vanilla JS to work with preval
 // but our temporary filter utils make it impossible for
@@ -87,6 +88,16 @@ const darkDimmedColors = omitScale(darkDimmed.colors)
  */
 const darkDimmedShadows = omitScale(darkDimmed.shadows)
 
+/**
+ * @type Partial<typeof primitives.colors.dark_dimmed>
+ */
+const darkHighContrastColors = omitScale(darkHighContrast.colors)
+
+/**
+ * @type Partial<typeof primitives.colors.dark_high_contrast>
+ */
+const darkHighContrastShadows = omitScale(darkHighContrast.shadows)
+
 const theme = {
   // General
   animation,
@@ -111,6 +122,11 @@ const theme = {
     dark_dimmed: {
       colors: darkDimmedColors,
       shadows: darkDimmedShadows
+    },
+    // eslint-disable-next-line camelcase
+    dark_high_contrast: {
+      colors: darkHighContrastColors,
+      shadows: darkHighContrastShadows
     }
   }
 }