Carbon: Add skeleton-ui token

Created on 14 Feb 2019  路  8Comments  路  Source: carbon-design-system/carbon

Ref: https://github.com/IBM/carbon-components/pull/1797

Current skeleton color calls for token that has a value of #e5e5e5 (i.e. $hover-ui), and #bebebe (i.e. $ibm-colors__gray-30, or $active-ui). Neither of those tokens seem semantically correct. It seems like we need a $skeleton-ui and $skeleton-text token.

low enhancement 馃挕

Most helpful comment

Theme Gray 100 -02 should be gray-80
Theme Gray 90 -02 should be gray-70

All 8 comments

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

Just to see if there is @carbon-design-system/design's interest in this topic.

Yes, I think adding skeleton tokens would be a good idea. Except I would name them simply $skeleton-01 and $skeleton-02.

Side note: our interactive token names are inconsistent with how we do our core token names ... we should probably figure out and finalize what naming convention we want to use for tokens going forward and to be consistent. Maybe that can be a part of the inline theming work @mattrosno is working on.

Cool thank you for your feedback @aagonzales!

This issue makes sense. Perhaps we can aim to get it done in the next release, 10.4.

@aagonzales I'm not sure about dark themes' values. Could you confirm? (Edited based on https://github.com/carbon-design-system/carbon/issues/1824#issuecomment-496571332)

| Token | White | Gray 10 | Gray 90 | Gray 100 |
| --- | --- | --- | --- | --- |
| $skeleton-01 | #e5e5e5 | #e5e5e5 | #353535 | #353535 |
| $skeleton-02 | Gray30 #bebebe | Gray30 #bebebe | gray-70 | gray-80 |

Theme Gray 100 -02 should be gray-80
Theme Gray 90 -02 should be gray-70

Was this page helpful?
0 / 5 - 0 ratings