Investigate Expressive theme + Carbon for IBM.com components: Target 20-25

[oliviaflory]

User Story

As a DDS designer and developer:

I need to:

investigate how the expressive theme might affect the Carbon for IBM.com components

so that I can:

make a plan to resolve any issues.

Additional information

• We'd like to investigate how the changes to the type tokens within the expressive theme might affect some of the Carbon for IBM.com components that were originally hard coded to match the expressive theme
• A developer and designer will meet to audit the components
• Jeff suggested we could do a search of the updated type tokens within the codebase to see which components might be affected
  • Q: Do we need to audit both React and Web Components??

• Possible suspects
  • image with caption
  • video (with caption?)
  • Call out quote
  • Link with icon

Type token list

• $caption-01
• $label-01
• $helper-text-01
• $code-01
• $code-02
• $body-short-01
• $body-short-02
• $heading-01
• $heading-02
• $heading-03
• $productive-heading-01
• $productive-heading-02
• $expressive-heading-01
• $expressive-heading-02

Acceptance criteria

• [x] Designer + dev meet to audit components/type tokens and icon tokens
• [x] Issues created for any work that needs to be done to address changes
  • [x] Issues added to the correct Epic #1615

[RobertaJHahn]

Added to the Nov 23 engineering meeting agenda for review and assignment.

[oliviaflory]

Anna and I reviewed the tokens used within the Carbon for IBM.com components on Monday, Dec 7th. Documented potential tokens and components that would be affected in Box note

Next steps: Anna is going to investigate:

• if the expressive theme is being applied to our React and Web component story books
• why the expressive theme type scales don't seem to be changing visually in the storybook

[oliviaflory]

• if the expressive theme is being applied to our React and Web component story books
• why the expressive theme type scales don't seem to be changing visually in the storybook

Answer from Anna: we do have the expressive theme enabled in storybook

however when developing we used the productive-zoning mixin that we created a couple months ago when we were going through the megamenu design specs

so for the components using body-long-01 we also used the use-carbon-productive-tokens() mixin which reverts the value back to the productive value

.#{$prefix}--content-item-horizontal__item--eyebrow {
    color: $text-05;
    padding-bottom: $spacing-03;
    @include use-carbon-productive-tokens();
    @include carbon--type-style('body-long-01');
  }

even if the adopters apply the expressive theme, the productive value is being used for that instance we apply the mixin to

---

Proposal:

Anna and I agreed that it would be more beneficial to our adopters if we used a single scale and moved everything to use expressive so there aren’t multiple values for one token like $body-short-01 = 14px sometimes and 16px sometimes.

We plan to:

• leave the mega menu as-is with the productive mixin

• convert all other component to one type scale (expressive)

  • swap any productive type tokens for the expressive tokens
  • example: a component using productive body-short-01 (14px) changes to expressive caption-01 (14px)

[oliviaflory]

WIP

Will be updating with pros + cons to each approach and examples of what tokens would look like in specs

Anna and I shared our proposal in Huddle Dec 10th and discussed a few different approaches and the pros and cons associated with them.

Option 1

Change all components to expressive tokens, and add new token to accommodate mega menu heading style need

Option 2

Change all components to expressive tokens, and mega menu gets a hard coded heading style

Option 3

Change all components to expressive tokens, and mega menu maintains productive-mixin

Option 4

Leave components as they are with productive tokens, hard coding productive moments where we need to and using productive-mixin

---

Consolidated list of all approaches

[oliviaflory]

Met with Anna, Jeff and Wonil, we determined that Option 3: Change all components to expressive tokens, and mega menu maintains productive-mixin is the best approach.

I will create a dev story and design story identifying which tokens need to be swapped out in our code and design specs to wrap up this issue.