Merge pull request #1102 from primer/VanAnderson/implement-functional-color-vars-5

Implement functional color variables part 5 [Flash, Header]

Author: colebemis

.changeset/shy-experts-lay.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in Flash

.changeset/stupid-eagles-guess.md

@@ -0,0 +1,5 @@
+---
+'@primer/components': patch
+---
+
+Use functional color variables in Header

src/Flash.tsx

@@ -4,7 +4,40 @@ import {COMMON, get, SystemCommonProps} from './constants'
 import sx, {SxProp} from './sx'
 
 const variants = variant({
-  scale: 'flash'
+  variants: {
+    default: {
+      color: 'alert.info.text',
+      backgroundColor: 'alert.info.bg',
+      borderColor: 'alert.info.border',
+      svg: {
+        color: 'alert.info.icon'
+      }
+    },
+    success: {
+      color: 'alert.success.text',
+      backgroundColor: 'alert.success.bg',
+      borderColor: 'alert.success.border',
+      svg: {
+        color: 'alert.success.icon'
+      }
+    },
+    danger: {
+      color: 'alert.error.text',
+      backgroundColor: 'alert.error.bg',
+      borderColor: 'alert.error.border',
+      svg: {
+        color: 'alert.error.icon'
+      }
+    },
+    warning: {
+      color: 'alert.warn.text',
+      backgroundColor: 'alert.warn.bg',
+      borderColor: 'alert.warn.border',
+      svg: {
+        color: 'alert.warn.icon'
+      }
+    }
+  }
 })
 
 const Flash = styled.div<
@@ -15,7 +48,7 @@ const Flash = styled.div<
     SxProp
 >`
   position: relative;
-  color: ${get('colors.text.grayDark')};
+  color: ${get('colors.text.primary')};
   padding: ${get('space.3')};
   border-style: solid;
   border-width: ${props => (props.full ? '1px 0px' : '1px')};
@@ -27,7 +60,6 @@ const Flash = styled.div<
   }
 
   svg {
-    color: ${props => get(`flashIcon.${props.variant}`)(props.theme)};
     margin-right: ${get('space.2')};
   }
 

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

src/__tests__/Flash.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {Flash} from '..'
 import {COMMON} from '../constants'
-import theme, {colors} from '../theme'
+import theme from '../theme'
 import {render, behavesAsComponent, checkExports} from '../utils/testing'
 import {render as HTMLRender, cleanup} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
@@ -29,9 +29,18 @@ describe('Flash', () => {
   })
 
   it('respects the "variant" prop', () => {
-    expect(render(<Flash variant="warning" theme={theme} />)).toHaveStyleRule('background-color', colors.yellow[1])
-    expect(render(<Flash variant="danger" theme={theme} />)).toHaveStyleRule('background-color', '#FFE3E6')
-    expect(render(<Flash variant="success" theme={theme} />)).toHaveStyleRule('background-color', colors.green[1])
-    expect(render(<Flash theme={theme} />)).toHaveStyleRule('background-color', colors.blue[1])
+    expect(render(<Flash variant="warning" theme={theme} />)).toHaveStyleRule(
+      'background-color',
+      theme.colors.alert.warn.bg
+    )
+    expect(render(<Flash variant="danger" theme={theme} />)).toHaveStyleRule(
+      'background-color',
+      theme.colors.alert.error.bg
+    )
+    expect(render(<Flash variant="success" theme={theme} />)).toHaveStyleRule(
+      'background-color',
+      theme.colors.alert.success.bg
+    )
+    expect(render(<Flash theme={theme} />)).toHaveStyleRule('background-color', theme.colors.alert.info.bg)
   })
 })

src/__tests__/__snapshots__/Flash.tsx.snap

@@ -9,6 +9,7 @@ exports[`Flash renders consistently 1`] = `
   border-width: 1px;
   border-radius: 6px;
   margin-top: 0;
+  color: #24292e;
   background-color: #dbedff;
   border-color: rgba(4,66,137,0.2);
 }
@@ -18,10 +19,13 @@ exports[`Flash renders consistently 1`] = `
 }
 
 .c0 svg {
-  color: rgba(4,66,137,0.6);
   margin-right: 8px;
 }
 
+.c0 svg {
+  color: rgba(4,66,137,0.6);
+}
+
 <div
   className="c0"
 />

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;