This adds sets of CSS button variables that can be overridden in themes. This won't change any default styles, but just provides a less problematic method of customization.

The current suggested way of doing this is with SCSS like so:

.btn-default {
  @include btn(
    $text-color: var(--tertiary),
    $bg-color: var(--secondary),
    $icon-color: var(--tertiary-high),
    $hover-text-color: var(--tertiary),
    $hover-bg-color: var(--tertiary-very-low),
    $hover-icon-color: var(--tertiary)
  );
}

The trouble with this is that it brings along all the btn mixin styles, so you also end up re-setting things like this, in addition to changing colors:

.btn-default {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  // and also the colors 
}

That can problematic because it can override existing button styles (e.g., if you already altered a single instance of margin). With these new CSS custom properties, you can avoid this by doing:

:root {
  --d-button-default-text-color: var(--tertiary);
  --d-button-default-text-color--hover: var(--tertiary);
  --d-button-default-bg-color: var(--secondary);
  --d-button-default-bg-color--hover: var(--tertiary-very-low);
  --d-button-default-icon-color: var(--tertiary-high);
  --d-button-default-icon-color--hover: var(--tertiary);
}

So now you can override the button colors without bringing along other styles from the btn mixin.

I also removed an old .btn.hidden style, as we already apply !important to the .hidden class elsewhere. Comments have also been updated to pass our new linting rules.