Use functional color variables in Header

primer · Mar 4, 2021 · d0f38c3 · d0f38c3
1 parent ea21d8e
commit d0f38c3
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 8 deletions.
diff --git a/.changeset/stupid-eagles-guess.md b/.changeset/stupid-eagles-guess.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in Header
diff --git a/src/Flash.tsx b/src/Flash.tsx
@@ -16,7 +16,7 @@ const variants = variant({
     default: {
       color: 'alert.info.text',
       backgroundColor: 'alert.info.bg',
-      borderColor: 'alert.success.border'
+      borderColor: 'alert.info.border'
     },
     success: {
       color: 'alert.success.text',

diff --git a/src/Header.tsx b/src/Header.tsx
@@ -17,8 +17,8 @@ const Header = styled.div<StyledHeaderProps>`
   padding: ${get('space.3')};
   font-size: ${get('fontSizes.1')};
   line-height: ${get('lineHeights.default')};
-  color: ${get('colors.whitefade70')};
-  background-color: ${get('colors.bg.grayDark')};
+  color: ${get('colors.header.text')};
+  background-color: ${get('colors.header.bg')};
   align-items: center;
   flex-wrap: nowrap;
 
@@ -57,7 +57,7 @@ const HeaderLink = styled.a.attrs<StyledHeaderLinkProps>(({to}) => {
   }
 })<StyledHeaderLinkProps>`
   font-weight: ${get('fontWeights.bold')};
-  color: ${get('colors.text.white')};
+  color: ${get('colors.header.logo')};
   white-space: nowrap;
   cursor: pointer;
   text-decoration: none;
@@ -66,7 +66,7 @@ const HeaderLink = styled.a.attrs<StyledHeaderLinkProps>(({to}) => {
 
   &:hover,
   &:focus {
-    color: ${get('colors.whitefade70')};
+    color: ${get('colors.header.text')};
   }
 
   ${COMMON};

diff --git a/src/__tests__/__snapshots__/Flash.tsx.snap b/src/__tests__/__snapshots__/Flash.tsx.snap
@@ -11,7 +11,7 @@ exports[`Flash renders consistently 1`] = `
   margin-top: 0;
   color: #24292e;
   background-color: #dbedff;
-  border-color: rgba(23,111,44,0.2);
+  border-color: rgba(4,66,137,0.2);
 }
 
 .c0 p:last-child {

diff --git a/src/__tests__/__snapshots__/Header.tsx.snap b/src/__tests__/__snapshots__/Header.tsx.snap
@@ -44,7 +44,7 @@ exports[`Header Header.Link renders consistently 1`] = `
 
 .c0:hover,
 .c0:focus {
-  color: rgba(255,255,255,0.70);
+  color: rgba(255,255,255,0.7);
 }
 
 <a
@@ -62,7 +62,7 @@ exports[`Header renders consistently 1`] = `
   padding: 16px;
   font-size: 14px;
   line-height: 1.5;
-  color: rgba(255,255,255,0.70);
+  color: rgba(255,255,255,0.7);
   background-color: #24292e;
   -webkit-align-items: center;
   -webkit-box-align: center;