search

carbon-design-system / carbon-design-kit

A versioned, comprehensive kit of the Carbon Design System visual assets (components, icons, pictograms, text styles, color styles, grid templates).
Apache License 2.0
1.07k stars 153 forks source link

v11: (type styles) add new expressive styles label-02, caption-02, helper-text-02 #439

Closed oliviaflory closed 2 years ago

oliviaflory commented 3 years ago

Detailed description

Describe in detail the issue you're having. Please include whether or not this is part of Sketch Libraries or the larger Sketch Kit file.

The Carbon for IBM.com team and all dotcom designers will be transitioning to use the Carbon design kits as we integrate the Expressive variants needed into Carbon. The designers will need access to the new styles added to accommodate expressive experience needs, which were previously provided through the Carbon Expressive kits maintained by Carbon for IBM.com team.

Add the new expressive type styles to the Carbon design kits. I figure it would be good to have the color tokens match between the corresponding productive/expressive styles, but open to feedback.

caption-02

token font size line height letter spacing font weight
caption-02 14 18 .16 regular

Color tokens:

Screen Shot 2021-06-24 at 2 16 45 PM

label-02

token font size line height letter spacing font weight
label-02 14 18 .16 regular

Color tokens:

Screen Shot 2021-06-24 at 2 17 07 PM

helper-text-02

token font size line height letter spacing font weight
helper-text-02 14 18 .16 regular

Color tokens:

Screen Shot 2021-06-24 at 2 16 59 PM

Add in all themes

What version of the Carbon Design System Kit are you using?

v10 kit

Carbon for IBM.com will use the v10 kit until we have a migration plan for v11

Is this issue related to a specific component? If so please give the page, artboard, and layer/symbol name.

New type styles added to enable expressive experiences

What did you expect to happen? What happened instead? What would you like to see changed?

Is this issue being filed based on a discrepancy between the website/code and the kit? If so what is the inconsistency?

The type styles were added to the Type package

What offering/product do you work on? Any pressing ship or release dates we should be aware of?

Carbon for IBM.com

Additional information

Add labels

Please choose the appropriate label(s) from our existing label list to ensure that your issue is properly categorized (i.e.use the libraries label for any issue relating to the Carbon Sketch Library). This will help us to better understand and address your issue.

mariuszmickiewicz commented 3 years ago

@laurenmrice @oliviaflory

I'm working on Gray 10 theme now and this is how the structure looks like (image below). All styles colors are linked to V2 library. Expressive styles are in a separate folder, but inside of it there is no distinction between fluid (lg, max, etc.) and regular expressive styles (the new ones we just added). Luckily the names of the styles make the fluid ones being "grouped" (by alphabetical order) together. Should it stay this way?

image
mariuszmickiewicz commented 3 years ago

I figure it would be good to have the color tokens match between the corresponding productive/expressive styles, but open to feedback.

I did add it, let me know what's the best approach here.

oliviaflory commented 3 years ago

All styles colors are linked to V2 library.

Does V2 library mean the Carbon v11 Sketch library or the IDL v2 sketch library? Carbon for IBM.com won't be able to move to Carbon v11 this year, so just confirming we'd still be able to use the v10 kit.

Expressive styles are in a separate folder, but inside of it there is no distinction between fluid (lg, max, etc.) and regular expressive styles (the new ones we just added). Luckily the names of the styles make the fluid ones being "grouped" (by alphabetical order) together. Should it stay this way?

That's a good question.. I had origininally imagined label-02 caption-02 and helper-text-02 outside of the Expressive folder with the other fixed type styles. We do try to distinguish between the fluid and fixed now and I wonder if it would be slightly confusing if they were in the expressive folder. Technically Expressive experiences use the body-short-02 and body-long-02 tokens as well, so I worry if those aren't grouped in with expressive too teams could miss them?

In looking at the structure image above, I'm realizing the expressive-heading-01 and expressive-heading-02 tokens are not included in the Carbon kit either 🙈 Is it possible to add those as well?

@laurenmrice would love to hear your thoughts!

mariuszmickiewicz commented 3 years ago

Does V2 library mean the Carbon v11 Sketch library or the IDL v2 sketch library? Carbon for IBM.com won't be able to move to Carbon v11 this year, so just confirming we'd still be able to use the v10 kit.

It means IDL v2

expressive-heading-01 and expressive-heading-02

Sure, I will add it.

Expressive vs Productive

Regarding current structure (on the image above) additional grouping fluid styles isn't necessary I think and doing so would just add another level in Sketch to go through — we all know this is not the best experience :)

Regarding expressive / productive vs fluid / fixed — it all depends what's most important to emphasise. If we choose the latter then designers working with Carbon for product might have the wrong impression that it is ok to use these expressive new styles in product UIs. I'm curious what you do think on how to approach this.

laurenmrice commented 3 years ago

@mariuszmickiewicz @oliviaflory I just got on a call with dotcom peeps to talk this through. We have landed on the following structure:

● First level

-All body type styles with suffix -01 and -02 for both productive and expressive will be on the same level. On that same level there will also be Productive headings andExpressive headings bucket titles.

⃝ Second level

-Productive headings --> 1-7 headings will be listed out. -Expressive headings --> expressive-heading-01 and expressive-heading-02, max, xlg, lg, md,sm . (Keeping headings 01 and 02 separated out from breakpoint buckets because they are not fluid and we would need to duplicate them for every breakpoint bucket.)

▪️Third level

-Each breakpoint bucket will include fluid displays, headings, paragraph and quotation type styles.

mariuszmickiewicz commented 3 years ago

productive-heading-01 apart from text-01 and text-02 also has inverse-01 version. Does expressive-heading-01 also need it?

Here is the updated structure.

image
mariuszmickiewicz commented 3 years ago

All themes done.

laurenmrice commented 3 years ago

productive-heading-01 apart from text-01 and text-02 also has inverse-01 version. Does expressive-heading-01 also need it?

I believe productive-heading-01 has the inverse-01 color option because of the UI shell header. So expressive-heading-01 should not need this color.

All themes done.

Thank you so much 💯 🙏. I am going to keep this open for now still because we are going to talk about this again as a larger group today to discuss the placement of expressive-headings-01 and -02 as well as the names of the productive and expressive buckets. Will let you know what the outcome is.

stale[bot] commented 3 years ago

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.

laurenmrice commented 3 years ago

@mariuszmickiewicz Ok! After further discussion, we have made additional changes to the text styles. The changes include new tokens, removal of some tokens and name changes of existing tokens.

Here is the list:

New tokens

label-02 Size: 14px Line height: 18px Weight: 400 / Regular Letter spacing: .16px

legal-01 Size: 12px Line height: 16px Weight: 400 / Regular Letter spacing: .32px

legal-02 Size: 14px Line height: 18px Weight: 400 / Regular Letter spacing: .16px

Deleted tokens

caption-01 caption-02 ~helper-text-01~ ~helper-text-02~

Deleting caption tokens in favor of label-01 and label-02. We have decided not to delete helper text tokens and we are bringing them back into our token set.

Name changes

New name Old name
body-compact-01 body-short-01
body-compact-02 body-short-02
body-01 body-long-01
body-02 body-long-02
heading-compact-01 productive-heading-01
heading-compact-02 productive-heading-02
heading-01 expressive-heading-01
heading-02 expressive-heading-02
heading-03 productive-heading-03
heading-04 productive-heading-04
heading-05 productive-heading-05
heading-06 productive-heading-06
heading-07 productive-heading-07
fluid-heading-03 expressive-heading-03
fluid-heading-04 expressive-heading-04
fluid-heading-05 expressive-heading-05
fluid-heading-06 expressive-heading-06
fluid-paragraph-01 expressive-paragraph-01
fluid-quotation-01 quotation-01
fluid-quotation-02 quotation-02
fluid-display-01 display-01
fluid-display-02 display-02
fluid-display-03 display-03
fluid-display-04 display-04

Structure in kit

This is the folder/bucket structure they should be in:

mariuszmickiewicz commented 3 years ago

Seems like

are in both expressive and productive groups. I'm just making sure this is intentional?

If so I will try to make the duplicates in such a way, that currently used styles of each type are untouched - stay connected to peoples' documents. For example current heading-01 goes to expressive, and only its copy goes to the productive group and the opposite is true for heading-compact-01.

Deleted styles Temporarily I would put it in a "depreciated" folder, until it is swapped in all of the symbols around the libraries. This can be done by changing the old style to big red letters and them select all visible instances and swap it to the new style. Perhaps some plugin could be used too.

mariuszmickiewicz commented 3 years ago

Deleted tokens

caption-01 helper-text-01

(in favor of label-01)

Is the same true for respective -02 styles (which we originally added in this thread)? I don't see them on the newest list so I assume caption-02 and helper-text-02 also need to be removed?

mariuszmickiewicz commented 3 years ago

Which color tokens are required for legal- styles?

Seems like legal- styles share the same properties as label- styles, same as deleted caption- and helper-text- did. Should for example caption- become legal- or we start fresh here (so nothing on existing layouts people created should become legal- ?

laurenmrice commented 3 years ago

Are in both expressive and productive groups. I'm just making sure this is intentional?

  • Yes, it is intentional to have duplicates of the fixed headings in productive and expressive.

Is the same true for respective -02 styles (which we originally added in this thread)? I don't see them on the newest list so I assume caption-02 and helper-text-02 also need to be removed?

Which color tokens are required for legal- styles?

  • For legal-, we could just start with text-01 and text-02 color token options.

Should for example caption- become legal- or we start fresh here (so nothing on existing layouts people created should become legal- ?

oliviaflory commented 3 years ago

are in both expressive and productive groups. I'm just making sure this is intentional?

I believe it's intentional because Product uses both, and expressive will likely utilize both.

mariuszmickiewicz commented 3 years ago

This is the current state of things. I hope the hierarchy is ok. caption- and helper-text- are kept for now until we manage to switch it everywhere in the files to label-

image image
laurenmrice commented 2 years ago

Final list of type tokens

*All values for type tokens match the updated type guidance for v11

Utility styles

Body styles

Fixed heading styles

Fluid heading styles

Fluid display styles

Deprecated styles

In favor of label-01 and label-02 Deleted caption-01 out of the Sketch kit after replacing it with helper-text-01 in symbols. It was being used in the following components:

Added and updated! Will be available in the next Sketch kit update. 🎉