Theming Updates

[tw15egan]

Epic tracking our theming updates for v11.

Background

Carbon is moving to CSS Custom Properties in v11. As a result, how we approach theming and how we leverage tokens is changing in both Sass and React.

In terms of theming, we are updating our tokens to be more semantic. We're also going to emit CSS Custom Properties instead of direct values for tokens.

Layer tokens

Contextual tokens

Checklist

• @carbon/themes
  • Add the final list of tokens to our theme package Add layer tokens to theme #8832
  • Verify that Sass Variables map to Custom Property for compat/interop
  • Documentation
  • Migration
    • Create mappings for tokens in v10 to tokens in v11
• @carbon/styles
  • Implement contextual tokens
  • Update components to use theme tokens
  • Create compatibility theme in @carbon/styles for v10
  • Documentation
• @carbon/react
  • Add a Theme component to manage themes on a page
    • Support inline theming (or zoning)
    • Support fixed theming
    • Should allow dynamically setting the theme based on a theme preference
  • Add a useThemePreference component to get the user's theme preference
  • Add a Layer component that will be used to stack layers and initialize contextual token values
  • Documentation

Questions

• Do we want to keep using Sass Variables or do we want to use CSS Custom Properties directly?

Previous planning

Epic to track the Inline Theming effort.

Initial convo and outline:

Refactor for the theme mixin

• How do we make it simple to apply a theme to a page and/or a "zone"
• Challenges
  • What should a $token-name variable point to?
  • What happens when a "value" of a token needs to be modified in terms of opacity?
    • Hex code and I want to change the opacity, rgba(#000, 0.5)
• How do you know what "theme" you are in?
  • If I'm in dark mode, render the dark illustration
  • Theme component, useTheme hook, useThemePreference hook
• How do I, in React, make a section of a page a "Zone"
  • https://codesandbox.io/s/eloquent-wing-r9edr?file=/src/App.js

Example
https://github.com/carbon-design-system/carbon/blob/main/packages/themes/scss/modules/_theme.scss