What is best fit to use for theming variables or mixins in sass

I am creating a UI library in which I want to provide the mechanism to theme all the UI components like button, cards, slider and all. I am confused between variables and mixins.

One way is to provide the no. of variables that user can update and based on that variables component classes will be derived. The same concept is used in the materialzecss library. And user will use like

//variables that are used to create component css classes
$primary : "blue";
$btn-primary :"green";
//then include the ui library
@import "_ui-variables";
@import "ui-library";

_ui-variables.scss

$primary : "red" !default;
$btn-primary: $primary !default;
// and other variables

and the _btn.scss will be like

.btn {
  // other rule sets
  color:$btn-primary;
}

Other way could be to use mixins. There will be a theme file for every component that will contain the theme mixin for that component and at the library level, there will be theme mixin that will include all the mixin of the individual component. As the angular-material has done

_btn.scss

@import "_btn-theme.scss";
.btn {
// some rules
}

_btn-theme.scss

@mixin btn-theme($theme) {
  // if user has added the btn-primary then use btn-primary otherwise primary
  @if map-has-key($theme,btn-primary) {
     $btn-primary : map-get($theme,primary);
  } @else {
      $btn-primary : map-get($theme,primary);
  }
  .btn {
     color:$btn-primary;
  }
}

and the ui-library.scss

@import "_btn.scss";
@import "_card.scss";

@mixin ui-theme($theme) {
  @include btn-theme($theme);
  @include card-theme($theme); // include all component theme

}

and the consumer will call this as

consumer-theme.scss

@import "ui-library";

$theme :(primary:"blue",accent:"yellow");

@include ui-theme($theme);

What are the pros and cons of these approaches? Is there any other way to do this?