To support CSS vars, add a config like this to e.g. a style tag in your HTMLs head:

Then add a vars mapping to your Sass file, before all formanta/sass imports:

$color-primary: var(--color-primary);
$color-secondary: var(--color-secondary);

$title-font-family: var(--title-font-family);
$title-font-color: var(--title-font-color);
$title-font-weight: var(--title-font-weight);

$font-family: var(--font-family);
$font-color: var(--font-color);

$outlined-border-radius: var(--outlined-border-radius);
$outlined-round-border-radius: var(--outlined-round-border-radius);

// by default the `$input-border-radius`, `$button-border-radius` are using `$base-border-radius`,
// which can't be supplied by css-vars without a lot further changes
$input-border-radius: $outlined-border-radius;
$button-border-radius: $outlined-border-radius;

$bg-paper: var(--bg-paper);
$bg-body: var(--bg-body);
$bg-paper-transparent: rgba(0, 0, 0, 0.5);
$bg-backdrop: rgba(0, 0, 0, 0.75);

$bg-colors: (
    'paper': $bg-paper,
    'paper-transparent': $bg-paper-transparent,
    'body': $bg-body,
    'backdrop': $bg-backdrop,
    'success': var(--bg-success),
    'info': var(--bg-info),
    'warning': var(--bg-warning),
    'danger': var(--bg-danger),
);

What is possible?

Some Sass variables can use CSS vars directly, others must be supplied at build time due to e.g. color calculations in sass.

To fully support variables likecolors-semantic, rewrite the `_meta`/`_var` files, like $text-colors, $outlined-colors, $bg-colors to not use e.g. rgba from Sass.

With custom config mappings nearly all sass variables can be used with CSS variables.

(Some of the) possible variables:

The following reflect the current included default config.

• $title-font-family
• $title-font-color
• $title-font-weight
• $font-family
• $font-color
• $line-height
• $line-height-1
• $line-height-2
• $line-height-3
• $line-height-4
• $outlined-border-radius
• $button-border-radius
• $button-round-radius
• $button-icon-size
• $button-icon-padding
• $button-icon-sm-size
• $button-icon-sm-padding
• $button-icon-lg-size
• $button-icon-lg-padding

Not possible:

The following reflect the current included default config.

• $bg-body, $bg-paper, $bg-*
• $outlined-border-color
• $spacing
• $color-success
• $color-success-dark
• $color-info
• $color-info-dark
• $color-warning
• $color-warning-dark
• $color-danger
• $color-danger-dark
• any variable which contains css selectors
• some base variables - but not their specific counterpart, like not possible for $base-border-radius but possible for $outlined-border-radius, $outlined-round-border-radius