Carbon: css variables

[ahoyahoy]

Hi there! 👋

What package(s) are you using?

• [x] carbon-components
• [x] carbon-components-vue

Summary

How can I build css with custom variables.

Sample component in documentations use css variables.
here: https://www.carbondesignsystem.com/components/button/code

.bx--btn--primary {
    background-color: var(--cds-interactive-01,#0f62fe);
}

How do I use this (above) instead of this what I get when I compile my project

.bx--btn--primary {
    background-color: #0f62fe;
}

In Vue I use this

<style lang="scss">
@import '@carbon/themes/scss/themes';

$carbon--theme: $carbon--theme--g90;
@include carbon--theme();

@import 'carbon-components/scss/globals/scss/styles.scss';
</style>

[tw15egan]

I believe you just need to add this _before_ you import the Carbon styles

$feature-flags: (
  enable-css-custom-properties: true,
);

[joshblack]

Just as a quick disclaimer, the CSS Custom Properties functionality is considered experimental (which is why it's behind the feature flag) and is going to change before going to stable! Definitely use at your own risk ⚠️

[tw15egan]

Closing as this seems to be resolved, let us know if you need anything else 👍