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

This commit is contained in:
Sara Vieira 2017-12-18 15:40:31 +00:00 committed by Sérgio Ramos
parent 5d502df2d4
commit 3bef7378e8
12 changed files with 30 additions and 50 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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 => { export default allProps => {
const { name, content, components, sections, depth, description } = allProps; const { name, content, components, sections, depth, description } = allProps;
@ -47,8 +37,8 @@ export default allProps => {
{name && {name &&
depth !== 1 && ( depth !== 1 && (
<Header> <Header>
<HeaderText>{name}</HeaderText> <H2 white>{name}</H2>
{description && <Desc>{description}</Desc>} {description && <P white>{description}</P>}
</Header> </Header>
)} )}
<TagMain> <TagMain>

View File

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

View File

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

View File

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

View File

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