Theme tokens not populated

[gcattan]

Hi,
I am using the component to set up the theme for my page.
But when I look at the css, I see that some tokens (like --cds-label-02, or --cds-heading-01) are not populated.

Not sure what I am doing wrong.

[adamalston]

Could you recreate your environment or a simplified version of the issue in one of the sandboxes available at https://github.com/carbon-design-system/sandboxes?

[alishanawer]

This usually happens if the theme provider or styles package isn’t set up correctly, so the CSS custom properties don’t get injected. A few things to check:

1. Import the CSS reset and theme tokens
   Make sure you’ve imported the core styles in your entry point (e.g. index.js or App.js):

   import '@carbon/styles/css/styles.css';

   or if you’re using Sass:

   @use '@carbon/styles';

   Without this, the --cds-* tokens (like --cds-label-02 or --cds-heading-01) won’t be defined.

2. Use the Theme component (React)
   Wrap your app or a section of it with the Carbon Theme component to ensure the right theme context is applied:

   import { Theme } from '@carbon/react';
   
   function App() {
     return (
       <Theme theme="g100">
         {/* your components here */}
       </Theme>
     );
   }

   Supported values are "white", "g10", "g90", "g100".

3. Check CSS cascade
   If you see empty or unset tokens in DevTools, it may be because the theme is being applied at a different DOM scope than where your components are rendered. Verify that the Theme wrapper is actually in the DOM hierarchy above your component.

4. Version mismatch
   In some cases, tokens won’t populate if you’re mixing old Carbon packages (carbon-components / carbon-components-react) with the new ones (@carbon/react, @carbon/styles). Make sure you’re using the same version across:

   "@carbon/react": "1.x",
   "@carbon/styles": "1.x"

   and that you don’t still have carbon-components lingering.

If you’ve done the above, you should see the tokens populated in DevTools (e.g. --cds-label-02 will resolve to a specific font size/line-height).

Hope that helps! 😊