Expressive theme mixin "use-carbon-productive-tokens" does not work without CSS custom properties enabled

[jeffchew]

Detailed description

Describe in detail the issue you're having.

With CSS static builds, non-CSS custom properties tokens appear to be overwritten by the expressive token values when using use-carbon-productive-tokens. The way around this is to have enable-css-custom-properties set as true, but we would hopefully find a way for the theme to work without enabling CSS custom properties.

Is this a feature request (new component, new icon), a bug, or a general issue?

Bug

Is this issue related to a specific component?

Expressive Theme

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

Expressive theme mixin use-carbon-productive-tokens works in production builds without the use of CSS Custom Properties in Carbon

Steps to reproduce the issue

1. Go to https://github.com/carbon-design-system/ibm-dotcom-library-nextjs-test
2. Run yarn upgrade then yarn dev
3. See that the local deployment works by viewing the mega menu (rendering with the productive tokens)
4. Run yarn build-export
5. Deploy ./out/index.html on a local server
6. See that the local static build has expressive tokens applied to the mega menu

Additional information

Local dev (yarn dev):

Static deploy (yarn build-static):

• Find out from Carbon team when they plan to release this capability from behind a feature flag.
• This issue is about doing the leg work and then documenting our guidance.
• Engineering and web site documentation is needed.

[RobertaJHahn]

Added to Aug 31 engineering meeting agenda.

[jeffchew]

@RobertaJHahn Pushing this one out further.

[RobertaJHahn]

Closing. There have not been any complaints from Adopter teams. Carbon will be adopting custom properties by default. No need for this feature.