fix(ui-toolkit): workaround color bug in safari

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

@@ -9,6 +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};
 
   &:hover {
     text-decoration: none;
@@ -16,10 +17,12 @@ const BaseLink = styled(({ component, children, ...rest }) =>
 
   ${isOr('secondary', 'reversed')`
     color: ${props => props.theme.white};
+    -webkit-text-fill-color: ${props => props.theme.white};
   `};
 
   ${is('disabled')`
     color: ${props => props.theme.grey};
+    -webkit-text-fill-color: ${props => props.theme.grey};
     pointer-events: none;
 
     &:hover {

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

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

packages/ui-toolkit/src/card/demo.md

@@ -29,10 +29,10 @@ const { Instances, Actions } = require('../icons');
     <HeaderMeta>
       <Row between="xs" middle="xs">
         <Col xs={4} sm={8}>
-          <H4>Nginx</H4>
+          <H4 white>Nginx</H4>
         </Col>
         <Col xs={8} sm={4}>
-          <P>
+          <P white>
             <Instances marginRight="0.5" light /> 4 of 4 instances
           </P>
         </Col>
@@ -60,10 +60,10 @@ const { Instances, Health, Actions } = require('../icons');
     <HeaderMeta>
       <Row between="xs" middle="xs">
         <Col xs={4} sm={8}>
-          <H4>Nginx</H4>
+          <H4 white>Nginx</H4>
         </Col>
         <Col xs={8} sm={4}>
-          <P>
+          <P white>
             <Instances marginRight="0.5" light /> 4 of 4 instances
           </P>
         </Col>
@@ -108,10 +108,10 @@ const { Instances, Actions } = require('../icons');
     <HeaderMeta>
       <Row between="xs" middle="xs">
         <Col xs={4} sm={8}>
-          <H4>Nginx</H4>
+          <H4 white>Nginx</H4>
         </Col>
         <Col xs={8} sm={4}>
-          <P>
+          <P white>
             <Instances marginRight="0.5" light /> 4 of 4 instances
           </P>
         </Col>
@@ -148,7 +148,7 @@ const { Actions, Instances, Health } = require('../icons');
           <HeaderMeta>
             <Row middle="xs">
               <Col xs={2} sm={3}>
-                <H4>Nginx</H4>
+                <H4 white>Nginx</H4>
               </Col>
               <Col xs={8} sm={4}>
                 <StatusLoader marginLeft="0" inline row msg="Provisioning" />
@@ -170,10 +170,10 @@ const { Actions, Instances, Health } = require('../icons');
           <HeaderMeta>
             <Row between="xs" middle="xs">
               <Col xs={4} sm={8}>
-                <H4>Nginx</H4>
+                <H4 white>Nginx</H4>
               </Col>
               <Col xs={8} sm={4}>
-                <P>
+                <P white>
                   <Instances marginRight="0.5" light /> 4 of 4 instances
                 </P>
               </Col>
@@ -228,10 +228,10 @@ const { Actions } = require('../icons');
     <HeaderMeta>
       <Row between="xs" middle="xs">
         <Col xs={2} sm={9} md={9}>
-          <H4>Nginx</H4>
+          <H4 white>Nginx</H4>
         </Col>
         <Col xs={5} sm={2} md={3}>
-          <P>1 Instance</P>
+          <P white>1 Instance</P>
         </Col>
       </Row>
     </HeaderMeta>

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

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

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

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

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

@@ -8,6 +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};
   margin: 0;
 `;
 

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

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

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

@@ -93,6 +93,16 @@ 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,
@@ -104,11 +114,9 @@ export default ({
   return (
     <CardStyled id={name.toLowerCase()}>
       <Header>
-        <H2 style={{ color: 'white' }}>{heading.props.children}</H2>
+        <HeaderText>{heading.props.children}</HeaderText>
         {description &&
-          description.props && (
+          description.props && <Desc>{description.props.text}</Desc>}
-            <P style={{ color: 'white' }}>{description.props.text}</P>
-          )}
       </Header>
       <Main>
         <Props>{tabButtons}</Props>

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

@@ -27,6 +27,16 @@ 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;
 
@@ -37,8 +47,8 @@ export default allProps => {
       {name &&
         depth !== 1 && (
           <Header>
-            <H2 style={{ color: 'white' }}>{name}</H2>
+            <HeaderText>{name}</HeaderText>
-            {description && <P style={{ color: 'white' }}>{description}</P>}
+            {description && <Desc>{description}</Desc>}
           </Header>
         )}
       <TagMain>

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

@@ -16,6 +16,10 @@ export const H1 = NH1.extend`
     display: inline-block;
   `};
 
+  ${is('white')`
+    -webkit-text-fill-color: ${props => props.theme.white};
+    color: ${props => props.theme.white}
+  `};
   & + p,
   & + small,
   & + h1,
@@ -41,6 +45,11 @@ export const H2 = styled.h2`
     display: inline-block;
   `};
 
+  ${is('white')`
+    -webkit-text-fill-color: ${props => props.theme.white};
+    color: ${props => props.theme.white}
+  `};
+
   & + p,
   & + small,
   & + h1,
@@ -66,6 +75,11 @@ export const H3 = styled.h3`
     display: inline-block;
   `};
 
+  ${is('white')`
+    -webkit-text-fill-color: ${props => props.theme.white};
+    color: ${props => props.theme.white}
+  `};
+
   & + p,
   & + small,
   & + h1,
@@ -92,6 +106,11 @@ export const H4 = styled.h4`
     display: inline-block;
   `};
 
+  ${is('white')`
+    -webkit-text-fill-color: ${props => props.theme.white};
+    color: ${props => props.theme.white}
+  `};
+
   & + p,
   & + small,
   & + h1,
@@ -117,6 +136,11 @@ export const H5 = styled.h4`
     display: inline-block;
   `};
 
+  ${is('white')`
+    -webkit-text-fill-color: ${props => props.theme.white};
+    color: ${props => props.theme.white}
+  `};
+
   & + p,
   & + small,
   & + h1,
@@ -142,6 +166,11 @@ export const H6 = styled.h6`
     display: inline-block;
   `};
 
+  ${is('white')`
+    -webkit-text-fill-color: ${props => props.theme.white};
+    color: ${props => props.theme.white}
+  `};
+
   & + p,
   & + small,
   & + h1,

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

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 import remcalc from 'remcalc';
 
+import is from 'styled-is';
+
 export default styled.p`
   color: ${props => props.theme.text};
 
@@ -8,6 +10,11 @@ export default styled.p`
   font-size: ${remcalc(15)};
   margin: 0;
 
+  ${is('white')`
+    -webkit-text-fill-color: ${props => props.theme.white};
+    color: ${props => props.theme.white}
+  `};
+
   + p,
   + small,
   + h1,

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

@@ -34,11 +34,13 @@ const Paragraph = P.extend`
   margin: 0;
   font-weight: bold;
   color: ${props => props.theme.white};
+  -webkit-text-fill-color: ${props => props.theme.white};
   width: ${remcalc(193)};
   text-align: left;
 
   ${is('dark')`
     color: ${props => props.theme.text};
+    -webkit-text-fill-color: ${props => props.theme.text};
   `};
 `;
 
@@ -46,9 +48,11 @@ 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};
   `};
 `;
 

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

@@ -4,6 +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]};
   z-index: 999;
 
   border-radius: ${remcalc(4)};