refactor(ui-toolkit): use currentcolor to fallback to color definition

packages/ui-toolkit/src/anchor/index.js

@@ -9,7 +9,7 @@ const BaseLink = styled(({ component, children, ...rest }) =>
   React.createElement(component, rest, children)
 )`
   color: ${props => props.theme.primary};
-  -webkit-text-fill-color: ${props => props.theme.primary};
+  -webkit-text-fill-color: currentcolor;
 
   &:hover {
     text-decoration: none;
@@ -17,12 +17,12 @@ const BaseLink = styled(({ component, children, ...rest }) =>
 
   ${isOr('secondary', 'reversed')`
     color: ${props => props.theme.white};
-    -webkit-text-fill-color: ${props => props.theme.white};
+    -webkit-text-fill-color: currentcolor;
   `};
 
   ${is('disabled')`
     color: ${props => props.theme.grey};
-    -webkit-text-fill-color: ${props => props.theme.grey};
+    -webkit-text-fill-color: currentcolor;
     pointer-events: none;
 
     &:hover {

packages/ui-toolkit/src/button/index.js

@@ -104,7 +104,7 @@ const Button = styled(BaseButton)`
   cursor: pointer;
 
   color: ${props => props.theme.white};
-  -webkit-text-fill-color: ${props => props.theme.white};
+  -webkit-text-fill-color: currentcolor;
   background-image: none;
   background-color: ${props => props.theme.primary};
   border-radius: ${borderRadius};
@@ -138,7 +138,7 @@ const Button = styled(BaseButton)`
 
   ${is('secondary')`
     color: ${props => props.theme.secondary};
-    -webkit-text-fill-color: ${props => props.theme.secondary};
+    -webkit-text-fill-color: currentcolor;
     background-color: ${props => props.theme.white};
     border-color: ${props => props.theme.grey};
 
@@ -162,7 +162,7 @@ const Button = styled(BaseButton)`
 
   ${is('error')`
     color: ${props => props.theme.red};
-    -webkit-text-fill-color: ${props => props.theme.red};
+    -webkit-text-fill-color: currentcolor;
     background-color: ${props => props.theme.white};
     border-color: ${props => props.theme.red};
     font-weight: 600;

packages/ui-toolkit/src/card/header.js

@@ -31,13 +31,13 @@ const BaseHeader = BaseCard.extend`
   ${isNot('secondary', 'tertiary')`
     ${is('transparent')`
       color: ${props => props.theme.text};
-        -webkit-text-fill-color: ${props => props.theme.text};
+       -webkit-text-fill-color: currentcolor;
     `};
   `};
 
   ${is('disabled')`
     color: ${props => props.theme.text};
-    -webkit-text-fill-color: ${props => props.theme.text};
+    -webkit-text-fill-color: currentcolor;
     border-color: ${props => props.theme.grey};
     box-shadow: none;
   `};
@@ -77,7 +77,7 @@ const BaseBox = BaseCard.extend`
 
   ${is('disabled')`
     color: ${props => props.theme.text};
-    -webkit-text-fill-color: ${props => props.theme.text};
+    -webkit-text-fill-color: currentcolor;
     border-color: ${props => props.theme.grey};
     box-shadow: none;
 

packages/ui-toolkit/src/form/meta.js

@@ -14,17 +14,17 @@ const StyledLabel = Label.extend`
 
   ${is('error')`
     color: ${props => props.theme.red};
-    -webkit-text-fill-color: ${props => props.theme.red};
+    -webkit-text-fill-color: currentcolor;
   `};
 
   ${is('warning')`
     color: ${props => props.theme.orange};
-    -webkit-text-fill-color: ${props => props.theme.orange};
+    -webkit-text-fill-color: currentcolor;
   `};
 
   ${is('success')`
     color: ${props => props.theme.green};
-    -webkit-text-fill-color: ${props => props.theme.green};
+    -webkit-text-fill-color: currentcolor;
   `};
 
   font-size: ${remcalc(13)};

packages/ui-toolkit/src/header/item.js

@@ -8,7 +8,7 @@ import P from '../text/p';
 const Text = P.extend`
   text-align: center;
   color: ${props => props.theme.white};
-  -webkit-text-fill-color: ${props => props.theme.white};
+  -webkit-text-fill-color: currentcolor;
   margin: 0;
 `;
 

packages/ui-toolkit/src/header/nav.js

@@ -6,5 +6,5 @@ export default styled.ul`
   display: flex;
   list-style: none;
   color: ${props => props.theme.white};
-  -webkit-text-fill-color: ${props => props.theme.white};
+  -webkit-text-fill-color: currentcolor;
 `;

packages/ui-toolkit/src/styleguide/component.js

@@ -93,16 +93,6 @@ const Content = styled.div`
   margin-top: ${remcalc(40)};
 `;
 
-const HeaderText = styled(H2)`
-  -webkit-text-fill-color: ${props => props.theme.white};
-  color: ${props => props.theme.white};
-`;
-
-const Desc = styled(P)`
-  -webkit-text-fill-color: ${props => props.theme.white};
-  color: ${props => props.theme.white};
-`;
-
 export default ({
   name,
   heading,
@@ -114,9 +104,9 @@ export default ({
   return (
     <CardStyled id={name.toLowerCase()}>
       <Header>
-        <HeaderText>{heading.props.children}</HeaderText>
+        <H2 white>{heading.props.children}</H2>
         {description &&
-          description.props && <Desc>{description.props.text}</Desc>}
+          description.props && <P white>{description.props.text}</P>}
       </Header>
       <Main>
         <Props>{tabButtons}</Props>

packages/ui-toolkit/src/styleguide/section.js

@@ -27,16 +27,6 @@ const Main = styled.div`
   }
 `;
 
-const HeaderText = styled(H2)`
-  -webkit-text-fill-color: ${props => props.theme.white};
-  color: ${props => props.theme.white};
-`;
-
-const Desc = styled(P)`
-  -webkit-text-fill-color: ${props => props.theme.white};
-  color: ${props => props.theme.white};
-`;
-
 export default allProps => {
   const { name, content, components, sections, depth, description } = allProps;
 
@@ -47,8 +37,8 @@ export default allProps => {
       {name &&
         depth !== 1 && (
           <Header>
-            <HeaderText>{name}</HeaderText>
-            {description && <Desc>{description}</Desc>}
+            <H2 white>{name}</H2>
+            {description && <P white>{description}</P>}
           </Header>
         )}
       <TagMain>

packages/ui-toolkit/src/text/headings.js

@@ -17,9 +17,10 @@ export const H1 = NH1.extend`
   `};
 
   ${is('white')`
-    -webkit-text-fill-color: ${props => props.theme.white};
+    -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
+
   & + p,
   & + small,
   & + h1,
@@ -46,7 +47,7 @@ export const H2 = styled.h2`
   `};
 
   ${is('white')`
-    -webkit-text-fill-color: ${props => props.theme.white};
+    -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 
@@ -76,7 +77,7 @@ export const H3 = styled.h3`
   `};
 
   ${is('white')`
-    -webkit-text-fill-color: ${props => props.theme.white};
+    -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 
@@ -107,7 +108,7 @@ export const H4 = styled.h4`
   `};
 
   ${is('white')`
-    -webkit-text-fill-color: ${props => props.theme.white};
+    -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 
@@ -137,7 +138,7 @@ export const H5 = styled.h4`
   `};
 
   ${is('white')`
-    -webkit-text-fill-color: ${props => props.theme.white};
+    -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 
@@ -167,7 +168,7 @@ export const H6 = styled.h6`
   `};
 
   ${is('white')`
-    -webkit-text-fill-color: ${props => props.theme.white};
+    -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 

packages/ui-toolkit/src/text/p.js

@@ -11,7 +11,7 @@ export default styled.p`
   margin: 0;
 
   ${is('white')`
-    -webkit-text-fill-color: ${props => props.theme.white};
+    -webkit-text-fill-color: currentcolor;
     color: ${props => props.theme.white}
   `};
 

packages/ui-toolkit/src/theme/colors.js

@@ -34,13 +34,13 @@ const Paragraph = P.extend`
   margin: 0;
   font-weight: bold;
   color: ${props => props.theme.white};
-  -webkit-text-fill-color: ${props => props.theme.white};
+  -webkit-text-fill-color: currentcolor;
   width: ${remcalc(193)};
   text-align: left;
 
   ${is('dark')`
     color: ${props => props.theme.text};
-    -webkit-text-fill-color: ${props => props.theme.text};
+    -webkit-text-fill-color: currentcolor;
   `};
 `;
 
@@ -48,11 +48,10 @@ const Code = styled.code`
   font-size: ${remcalc(13)};
   margin: 0;
   color: ${props => props.theme.white};
-  -webkit-text-fill-color: ${props => props.theme.white};
 
   ${is('dark')`
     color: ${props => props.theme.text};
-    -webkit-text-fill-color: ${props => props.theme.text};
+    -webkit-text-fill-color: currentcolor;
   `};
 `;
 

packages/ui-toolkit/src/tooltip/style.js

@@ -4,7 +4,7 @@ import remcalc from 'remcalc';
 export default ({ background, color, border, arrow }) => css`
   background: ${props => props.theme[background]};
   color: ${props => props.theme[color]};
-  -webkit-text-fill-color: ${props => props.theme[color]};
+  -webkit-text-fill-color: currentcolor;
   z-index: 999;
 
   border-radius: ${remcalc(4)};