buttons should inherit a default theme colour from a t-btn–{theme}class set on body/html ?
Although that’s a messy way fo doing it, better to initialise the mixin with an appropriate color for your site, e.g.
@include button($theme: blue)
or
@include button($theme: #f00ba2)
<!-- Default -->
<button class="c-btn ">Gizza button!</button>
<!-- Themed -->
<button class="c-btn c-btn--purple">Purple button!</button>
<!-- Themed 2 -->
<button class="c-btn c-btn--orange">Orange button with icon!<span class="u-icon"><svg>
<use xlink:href="../../assets/icons/sprite.symbol.svg#arrow-right-bold" />
</svg></button>
<!-- Themed 3 -->
<button class="c-btn c-btn--yellow">yellow icon!<span class="u-icon"><svg>
<use xlink:href="../../assets/icons/sprite.symbol.svg#video" />
</svg></button>
<!-- Primary -->
<button class="c-btn c-btn--primary">Primary button!</button>
<!-- Disabled -->
<button class="c-btn c-btn--disabled">Disabled button</button>
<button class="c-btn {{class}}">{{label}}{{#if icon}}<span class="u-icon"><svg>
<use xlink:href="{{path '/assets/icons/sprite.symbol.svg'}}#{{icon}}" /></svg>{{/if}}</button>