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

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

@@ -5,14 +5,14 @@ exports[`Dialog Dialog.Header renders consistently 1`] = `
   font-size: 14px;
   font-weight: 600;
   font-family: sans-serif;
-  color: #24292e;
+  color: #24292f;
 }
 
 .c0 {
   padding: 16px;
   background-color: #f6f8fa;
   border-radius: 6px 6px 0px 0px;
-  border-bottom: 1px solid #e1e4e8;
+  border-bottom: 1px solid #d0d7de;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -30,7 +30,7 @@ exports[`Dialog Dialog.Header renders consistently 1`] = `
 >
   <span
     className="c1"
-    color="text.primary"
+    color="fg.default"
     fontFamily="sans-serif"
     fontSize={1}
     fontWeight="bold"
@@ -51,7 +51,7 @@ Array [
   content: ' ';
   background: transparent;
   z-index: 99;
-  background: rgba(27,31,35,0.5);
+  background: rgba(27,31,36,0.5);
 }
 
 <span
@@ -68,25 +68,25 @@ Array [
   outline: none;
   cursor: pointer;
   border-radius: 6px;
-  color: #586069;
+  color: #57606a;
   position: absolute;
   top: 16px;
   right: 16px;
 }
 
 .c1:focus {
-  box-shadow: 0 0 0 3px rgba(3,102,214,0.3);
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
 }
 
 .c1:hover {
-  color: #0366d6;
+  color: #0969da;
 }
 
 .c3 {
   font-size: 14px;
   font-weight: 600;
   font-family: sans-serif;
-  color: #24292e;
+  color: #24292f;
 }
 
 .c5 {
@@ -94,7 +94,7 @@ Array [
 }
 
 .c0 {
-  box-shadow: 0 8px 24px rgba(149,157,165,0.2);
+  box-shadow: 0 8px 24px rgba(140,149,159,0.2);
   border-radius: 6px;
   position: fixed;
   top: 0;
@@ -114,7 +114,7 @@ Array [
   padding: 16px;
   background-color: #f6f8fa;
   border-radius: 6px 6px 0px 0px;
-  border-bottom: 1px solid #e1e4e8;
+  border-bottom: 1px solid #d0d7de;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -177,7 +177,7 @@ Array [
     >
       <span
         className="c3"
-        color="text.primary"
+        color="fg.default"
         fontFamily="sans-serif"
         fontSize={1}
         fontWeight="bold"

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

@@ -45,10 +45,10 @@ exports[`Dropdown.Button 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 {
@@ -70,23 +70,23 @@ exports[`Dropdown.Button 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);
 }
 
 .c1 {
@@ -135,18 +135,18 @@ exports[`Dropdown.Item renders consistently 1`] = `
   display: block;
   padding: 4px 10px 4px 15px;
   overflow: hidden;
-  color: #24292e;
+  color: #24292f;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .c0 a {
-  color: #24292e;
+  color: #24292f;
   -webkit-text-decoration: none;
   text-decoration: none;
   display: block;
   overflow: hidden;
-  color: #24292e;
+  color: #24292f;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -156,7 +156,7 @@ exports[`Dropdown.Item renders consistently 1`] = `
   color: #ffffff;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #0366d6;
+  background-color: #0969da;
 }
 
 .c0:hover,
@@ -164,7 +164,7 @@ exports[`Dropdown.Item renders consistently 1`] = `
   color: #ffffff;
   -webkit-text-decoration: none;
   text-decoration: none;
-  background-color: #0366d6;
+  background-color: #0969da;
   outline: none;
 }
 
@@ -179,9 +179,9 @@ exports[`Dropdown.Menu renders consistently 1`] = `
 .c0 {
   background-clip: padding-box;
   background-color: #ffffff;
-  border: 1px solid #e1e4e8;
+  border: 1px solid #d0d7de;
   border-radius: 6px;
-  box-shadow: 0 8px 24px rgba(149,157,165,0.2);
+  box-shadow: 0 8px 24px rgba(140,149,159,0.2);
   left: 0;
   list-style: none;
   margin-top: 2px;

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

@@ -23,10 +23,10 @@ exports[`DropdownMenu 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[`DropdownMenu 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);
 }
 
 .c1 {

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

@@ -8,7 +8,7 @@ exports[`FilterList.Item renders consistently 1`] = `
   margin: 0 0 5px 0;
   overflow: hidden;
   font-size: 14px;
-  color: #586069;
+  color: #57606a;
   background-color: !important;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -26,7 +26,7 @@ exports[`FilterList.Item renders consistently 1`] = `
 
 .c0:active {
   color: #ffffff;
-  background-color: #0366d6;
+  background-color: #0969da;
 }
 
 .c0 .count {
@@ -48,7 +48,7 @@ exports[`FilterList.Item respects the "selected" prop 1`] = `
   overflow: hidden;
   font-size: 14px;
   color: #ffffff;
-  background-color: #0366d6!important;
+  background-color: #0969da!important;
   -webkit-text-decoration: none;
   text-decoration: none;
   text-overflow: ellipsis;
@@ -65,7 +65,7 @@ exports[`FilterList.Item respects the "selected" prop 1`] = `
 
 .c0:active {
   color: #ffffff;
-  background-color: #0366d6;
+  background-color: #0969da;
 }
 
 .c0 .count {

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

@@ -3,15 +3,15 @@
 exports[`Flash renders consistently 1`] = `
 .c0 {
   position: relative;
-  color: #24292e;
+  color: #24292f;
   padding: 16px;
   border-style: solid;
   border-width: 1px;
   border-radius: 6px;
   margin-top: 0;
-  color: #24292e;
-  background-color: #dbedff;
-  border-color: rgba(4,66,137,0.2);
+  color: #24292f;
+  background-color: #ddf4ff;
+  border-color: rgba(84,174,255,0.4);
 }
 
 .c0 p:last-child {
@@ -23,7 +23,7 @@ exports[`Flash renders consistently 1`] = `
 }
 
 .c0 svg {
-  color: rgba(4,66,137,0.6);
+  color: #0969da;
 }
 
 <div

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

@@ -63,7 +63,7 @@ exports[`Header renders consistently 1`] = `
   font-size: 14px;
   line-height: 1.5;
   color: rgba(255,255,255,0.7);
-  background-color: #24292e;
+  background-color: #24292f;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;

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

@@ -9,7 +9,7 @@ exports[`Label renders consistently 1`] = `
   font-size: 12px;
   line-height: 20px;
   padding: 0 8px;
-  background-color: #6a737d;
+  background-color: #6e7781;
 }
 
 .c0:hover {
@@ -31,13 +31,13 @@ exports[`Label respects the "outline" prop 1`] = `
   font-size: 12px;
   line-height: 20px;
   padding: 0 8px;
-  background-color: #6a737d;
+  background-color: #6e7781;
   margin-top: -1px;
   margin-bottom: -1px;
-  color: #586069;
-  border: 1px solid #e1e4e8;
+  color: #57606a;
+  border: 1px solid #d0d7de;
   box-shadow: none;
-  background-color: #6a737d;
+  background-color: #6e7781;
   background-color: transparent;
 }
 
@@ -60,7 +60,7 @@ exports[`Label respects the "variant" prop 1`] = `
   font-size: 14px;
   line-height: 16px;
   padding: 8px 12px;
-  background-color: #6a737d;
+  background-color: #6e7781;
 }
 
 .c0:hover {

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

@@ -2,7 +2,7 @@
 
 exports[`Link applies button styles when rendering a button element 1`] = `
 .c0 {
-  color: #0366d6;
+  color: #0969da;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -36,7 +36,7 @@ exports[`Link applies button styles when rendering a button element 1`] = `
 
 exports[`Link passes href down to link element 1`] = `
 .c0 {
-  color: #0366d6;
+  color: #0969da;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -71,7 +71,7 @@ exports[`Link passes href down to link element 1`] = `
 
 exports[`Link renders consistently 1`] = `
 .c0 {
-  color: #0366d6;
+  color: #0969da;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -105,7 +105,7 @@ exports[`Link renders consistently 1`] = `
 
 exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] = `
 .c0 {
-  color: #586069;
+  color: #57606a;
   -webkit-text-decoration: none;
   text-decoration: none;
   color: #ffffff;
@@ -114,7 +114,7 @@ exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] =
 .c0:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #0366d6;
+  color: #0969da;
 }
 
 .c0:is(button) {
@@ -136,14 +136,14 @@ exports[`Link respectes the "color" prop when "muted" prop is also passed 1`] =
 
 <a
   className="c0"
-  color="text.inverse"
+  color="fg.onEmphasis"
   muted={true}
 />
 `;
 
 exports[`Link respectes the "muted" prop 1`] = `
 .c0 {
-  color: #586069;
+  color: #57606a;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -151,7 +151,7 @@ exports[`Link respectes the "muted" prop 1`] = `
 .c0:hover {
   -webkit-text-decoration: none;
   text-decoration: none;
-  color: #0366d6;
+  color: #0969da;
 }
 
 .c0:is(button) {
@@ -179,7 +179,7 @@ exports[`Link respectes the "muted" prop 1`] = `
 
 exports[`Link respects hoverColor prop 1`] = `
 .c0 {
-  color: #0366d6;
+  color: #0969da;
   -webkit-text-decoration: none;
   text-decoration: none;
 }
@@ -187,7 +187,7 @@ exports[`Link respects hoverColor prop 1`] = `
 .c0:hover {
   -webkit-text-decoration: underline;
   text-decoration: underline;
-  color: #0366d6;
+  color: #0969da;
 }
 
 .c0:is(button) {

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

@@ -6,7 +6,7 @@ exports[`Pagehead renders consistently 1`] = `
   padding-top: 24px;
   padding-bottom: 24px;
   margin-bottom: 24px;
-  border-bottom: 1px solid #e1e4e8;
+  border-bottom: 1px solid #d0d7de;
 }
 
 <div

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

@@ -2,10 +2,10 @@
 
 exports[`PointerBox passes the "bg" prop to both <BorderBox> and <Caret> 1`] = `
 .c0 {
-  background-color: #ffeef0;
+  background-color: #FFEBE9;
   border-width: 1px;
   border-style: solid;
-  border-color: #e1e4e8;
+  border-color: #d0d7de;
   border-radius: 6px;
   position: relative;
 }
@@ -31,12 +31,12 @@ exports[`PointerBox passes the "bg" prop to both <BorderBox> and <Caret> 1`] = `
     >
       <path
         d="M-8,0L0,8L8,0L-8,0Z"
-        fill="#ffeef0"
+        fill="#FFEBE9"
       />
       <path
         d="M-8,0L0,8L8,0"
         fill="none"
-        stroke="#e1e4e8"
+        stroke="#d0d7de"
         strokeWidth="1px"
       />
     </g>
@@ -46,7 +46,7 @@ exports[`PointerBox passes the "bg" prop to both <BorderBox> and <Caret> 1`] = `
 
 exports[`PointerBox passes the "borderColor" prop to both <BorderBox> and <Caret> 1`] = `
 .c0 {
-  border-color: #d73a49;
+  border-color: #cf222e;
   border-width: 1px;
   border-style: solid;
   border-radius: 6px;
@@ -79,7 +79,7 @@ exports[`PointerBox passes the "borderColor" prop to both <BorderBox> and <Caret
       <path
         d="M-8,0L0,8L8,0"
         fill="none"
-        stroke="#d73a49"
+        stroke="#cf222e"
         strokeWidth="1px"
       />
     </g>
@@ -91,7 +91,7 @@ exports[`PointerBox renders a <Caret> in <BorderBox> with relative positioning 1
 .c0 {
   border-width: 1px;
   border-style: solid;
-  border-color: #e1e4e8;
+  border-color: #d0d7de;
   border-radius: 6px;
   position: relative;
 }
@@ -122,7 +122,7 @@ exports[`PointerBox renders a <Caret> in <BorderBox> with relative positioning 1
       <path
         d="M-8,0L0,8L8,0"
         fill="none"
-        stroke="#e1e4e8"
+        stroke="#d0d7de"
         strokeWidth="1px"
       />
     </g>
@@ -134,7 +134,7 @@ exports[`PointerBox renders consistently 1`] = `
 .c0 {
   border-width: 1px;
   border-style: solid;
-  border-color: #e1e4e8;
+  border-color: #d0d7de;
   border-radius: 6px;
   position: relative;
 }
@@ -165,7 +165,7 @@ exports[`PointerBox renders consistently 1`] = `
       <path
         d="M-8,0L0,8L8,0"
         fill="none"
-        stroke="#e1e4e8"
+        stroke="#d0d7de"
         strokeWidth="1px"
       />
     </g>