Passing a Bootstrap Theme to Oikaze

This example illustrates the use of Oikaze with a Bootstrap theme. The theme is defined by Bootstrap's Sass variables, which are passed to Oikaze as a map. The map is then used to generate CSS variables, which can be used outside of Bootstrap.

@use 'oikaze' as tokens;

@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';

@include tokens.add-set(
  'default',
  (
    color: $theme-colors,
  )
);

:root {
  @include tokens.css-definitions();
}

body {
  color: tokens.get('color.primary'); // var(--color-primary, #0d6efd);
  color: tokens.get('$color.secondary'); // #6c757d;
}