diff --git a/packages/ui-toolkit/src/anchor/index.js b/packages/ui-toolkit/src/anchor/index.js index 8071c8e5..eb3ca5a8 100644 --- a/packages/ui-toolkit/src/anchor/index.js +++ b/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 { diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js index 51742231..6a9bb637 100644 --- a/packages/ui-toolkit/src/button/index.js +++ b/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; diff --git a/packages/ui-toolkit/src/card/demo.md b/packages/ui-toolkit/src/card/demo.md index c900df20..8f5c12f4 100644 --- a/packages/ui-toolkit/src/card/demo.md +++ b/packages/ui-toolkit/src/card/demo.md @@ -29,10 +29,10 @@ const { Instances, Actions } = require('../icons'); -

Nginx

+

Nginx

-

+

4 of 4 instances

@@ -60,10 +60,10 @@ const { Instances, Health, Actions } = require('../icons'); -

Nginx

+

Nginx

-

+

4 of 4 instances

@@ -108,10 +108,10 @@ const { Instances, Actions } = require('../icons'); -

Nginx

+

Nginx

-

+

4 of 4 instances

@@ -148,7 +148,7 @@ const { Actions, Instances, Health } = require('../icons'); -

Nginx

+

Nginx

@@ -170,10 +170,10 @@ const { Actions, Instances, Health } = require('../icons'); -

Nginx

+

Nginx

-

+

4 of 4 instances

@@ -228,10 +228,10 @@ const { Actions } = require('../icons'); -

Nginx

+

Nginx

-

1 Instance

+

1 Instance

diff --git a/packages/ui-toolkit/src/card/header.js b/packages/ui-toolkit/src/card/header.js index a882c387..d25ad74b 100644 --- a/packages/ui-toolkit/src/card/header.js +++ b/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; diff --git a/packages/ui-toolkit/src/form/meta.js b/packages/ui-toolkit/src/form/meta.js index 89f32b35..23921d71 100644 --- a/packages/ui-toolkit/src/form/meta.js +++ b/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)}; diff --git a/packages/ui-toolkit/src/header/item.js b/packages/ui-toolkit/src/header/item.js index 630797d3..c28633e3 100644 --- a/packages/ui-toolkit/src/header/item.js +++ b/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; `; diff --git a/packages/ui-toolkit/src/header/nav.js b/packages/ui-toolkit/src/header/nav.js index 3f33f69d..5bbec1be 100644 --- a/packages/ui-toolkit/src/header/nav.js +++ b/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}; `; diff --git a/packages/ui-toolkit/src/styleguide/component.js b/packages/ui-toolkit/src/styleguide/component.js index 81d5dc85..0cf3c7eb 100644 --- a/packages/ui-toolkit/src/styleguide/component.js +++ b/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 (
-

{heading.props.children}

+ {heading.props.children} {description && - description.props && ( -

{description.props.text}

- )} + description.props && {description.props.text}}
{tabButtons} diff --git a/packages/ui-toolkit/src/styleguide/section.js b/packages/ui-toolkit/src/styleguide/section.js index 833b47fe..5276cc58 100644 --- a/packages/ui-toolkit/src/styleguide/section.js +++ b/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 && (
-

{name}

- {description &&

{description}

} + {name} + {description && {description}}
)} diff --git a/packages/ui-toolkit/src/text/headings.js b/packages/ui-toolkit/src/text/headings.js index a0064114..a93cf2ab 100644 --- a/packages/ui-toolkit/src/text/headings.js +++ b/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, diff --git a/packages/ui-toolkit/src/text/p.js b/packages/ui-toolkit/src/text/p.js index dc3b3989..39dbbd7d 100644 --- a/packages/ui-toolkit/src/text/p.js +++ b/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, diff --git a/packages/ui-toolkit/src/theme/colors.js b/packages/ui-toolkit/src/theme/colors.js index 01b4a5ef..febd5a93 100644 --- a/packages/ui-toolkit/src/theme/colors.js +++ b/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}; `}; `; diff --git a/packages/ui-toolkit/src/tooltip/style.js b/packages/ui-toolkit/src/tooltip/style.js index 0eb80ad1..8a6e9fc2 100644 --- a/packages/ui-toolkit/src/tooltip/style.js +++ b/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)};