Skip to content

feat(themes): change placeholder and helper text colors dark themes#9987

Merged
kodiakhq[bot] merged 4 commits into
carbon-design-system:mainfrom
aledavila:layer-placeholder
Oct 29, 2021
Merged

feat(themes): change placeholder and helper text colors dark themes#9987
kodiakhq[bot] merged 4 commits into
carbon-design-system:mainfrom
aledavila:layer-placeholder

Conversation

@aledavila

@aledavila aledavila commented Oct 28, 2021

Copy link
Copy Markdown
Contributor

Closes #9860
Closes #9832

New colors for $text-placeholder and $text-helper in themes g90 and g100
The decision was made not to add them to the layer sets and just change the global token color

Changelog

Changed

g90

  • changed $text-placeholder from Gray 60 to Gray 50
  • changed $text-helper from Gray 50 to Gray 30

g100

  • changed $text-helper from Gray 50 to Gray 40

@aledavila aledavila requested a review from a team as a code owner October 28, 2021 20:16
@joshblack

Copy link
Copy Markdown
Contributor

@aagonzales @aledavila are there any component implications for this change or does the value change here cover everything? 👀

@aagonzales

Copy link
Copy Markdown
Contributor

It should cover everything. To my knowledge placeholder text is only used in inputs. Placeholder text also never passes color contrast so the fact that it does vary across layers is a moot point from the start.

image

@aledavila

aledavila commented Oct 28, 2021

Copy link
Copy Markdown
Contributor Author

@joshblack should cover everything since like anna said we only need to make them a bit more visible so they don't match the input color. Helper text as well

@netlify

netlify Bot commented Oct 28, 2021

Copy link
Copy Markdown

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: a09e621

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/617c454e37c15b00078ed1f6

😎 Browse the preview: https://deploy-preview-9987--carbon-react-next.netlify.app

@netlify

netlify Bot commented Oct 28, 2021

Copy link
Copy Markdown

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: a09e621

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/617c454e09aedc00081d0207

😎 Browse the preview: https://deploy-preview-9987--carbon-elements.netlify.app

@netlify

netlify Bot commented Oct 28, 2021

Copy link
Copy Markdown

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: a09e621

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/617c454e3f8f2d000763e72c

😎 Browse the preview: https://deploy-preview-9987--carbon-components-react.netlify.app

@kodiakhq kodiakhq Bot merged commit adebf80 into carbon-design-system:main Oct 29, 2021
@Eugeno

Eugeno commented Oct 30, 2021

Copy link
Copy Markdown

You've made placeholder visible, but what about textDisabled? =)
Same story: gray100 theme, field-03, gray60 text on the gray60 background.

@aagonzales

Copy link
Copy Markdown
Contributor

@Eugeno I address that in this issue here: #10054

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug]: Layer issues with placeholders on g90 and g100 themes [Bug]: Token "field-disabled" not involved into layering model

7 participants