Update UI Shell to use our theming tokens

[joshblack]

Currently, the UI Shell set of components use their own private theming tokens. We should revisit this component and consider how we could either expose these private theming tokens, or how to retrofit UI Shell to our existing theme tokens.

[aagonzales]

Agreed! We need to decided add more unique shell tokens to allow for each theme to have a default and high contrast version or if like Josh said we just don't allow for the Shell to deviate from the product (is which case we need to define and update to the system tokens).

@joshblack so is it official the we'll not be trying to do inline theming with the UI shell?

[joshblack]

@aagonzales your call! I'm up for either. I think UI Shell is definitely big enough if we want to go down the component token route, but if we wanted to stay systematic and try and do inline theming I think we're setup for that too in the next version.

[cwgormanIBM]

What does "inline theming" mean?

[joshblack]

@cwgormanIBM inline theming is an idea we've been thinking about to allow product teams to change the theme of a portion of a page, or for a component. In this case, it would mean that while the page is on the G100 theme, the UI Shell could be themed to be on the white/g10/g90 theme 👍

[rac0316]

is it possible to add !default flags to these variables for now so we can overwrite them until a long-term solution gets put in place?

[joshblack]

@rac0316 I think the hesitation with !default would be that it would be considered part of the public API and we'd have to maintain it as a result 😞 (at least until we could remove it in the next major version)

@aagonzales would this be something we could scope into February or March? Or is it a larger effort?

[aagonzales]

I think we can scope it in if we see it as a priority, its on the 2020 design priority list to do we just need to figure out when to do it. UI Shell actually has a whole bucket of work.

[aagonzales]

UI Shell themes

Each Carbon theme will have a set of ui shell themes within it which are surfaced as variations within the ui shell component. Not all options are equal across themes but vary based on visual aesthetics. Each Carbon theme will have a default shell theme (tbd).

Sketch file: https://ibm.box.com/s/woz3wthxfoqp0pf1kpl20z3kixsoyqdf

White theme

1. High contrast
2. Mixed contrast
3. Alternate
4. Mono

Gray 10 theme

1. High contrast
2. Mixed contrast
3. Alternate
4. Mixed

Gray 90 theme

1. Alternate
2. Mixed
3. Mono

Gray 100 theme

1. Alternate
2. Mixed
3. Mono

[aagonzales]

Component by theme break down

Header

Left nav

Right panel

[janhassel]

Are there any updates on this issue?

[aagonzales]

UI Shell with new token spec can be found here: #8102