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

This commit is contained in:
Sara Vieira 2017-12-18 14:31:35 +00:00 committed by Sérgio Ramos
parent f6c2802b32
commit 5d502df2d4
13 changed files with 90 additions and 17 deletions

View File

@ -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 {

View File

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

View File

@ -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>

View File

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

View File

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

View File

@ -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;
`;

View File

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

View File

@ -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 && (
<P style={{ color: 'white' }}>{description.props.text}</P>
)}
description.props && <Desc>{description.props.text}</Desc>}
</Header>
<Main>
<Props>{tabButtons}</Props>

View File

@ -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>
{description && <P style={{ color: 'white' }}>{description}</P>}
<HeaderText>{name}</HeaderText>
{description && <Desc>{description}</Desc>}
</Header>
)}
<TagMain>

View File

@ -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,

View File

@ -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,

View File

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

View File

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