custom theme scss variable $primary not being overridden

[BitShift]

Im using the bootstrap theme, and things seem to be working ok once I switched my app config over to using scss.
Here is my variables.scss file
However, looking at the override variables on this page, I added $primary to be a different color, but it still shows up blue (default)
https://www.telerik.com/kendo-angular-ui/components/styling/theme-bootstrap/customization/

 

$base-theme:Bootstrap;
$skin-name:kendo-dflood-bs4-1;
$accent: #007bff;
$secondary: #e4e7eb;
$info: #17a2b8;
$success: #28a745;
$warning: #ffc107;
$error: #dc3545;
$body-bg: #ffffff;
$body-color: #292b2c;
$component-bg: #ffffff;
$component-color: #292b2c;
$card-cap-bg: #f7f7f9;
$card-cap-color: #292b2c;
$series-a: #0275d8;
$series-b: #5bc0de;
$series-c: #5cb85c;
$series-d: #f0ad4e;
$series-e: #e67d4a;
$series-f: #d9534f;
$button-bg:#dc3545;  //bg should be red
$primary:#28a745;

 

<div class="col-xs-12 col-sm-12 col-lg-12">
  <p class="k-block">
    <kendo-buttongroup>
      <button kendoButton [primary]="true"> test1</button>
      <button kendoButton [primary]="true"> test2</button>
      <button kendoButton [primary]="true"> test3</button>
      <button kendoButton [primary]="true"> test4</button>
      <button kendoButton [primary]="true"> test5</button>
    </kendo-buttongroup>
  </p>
</div>

 

[Alex Gyoshev]

To set the primary color, the Kendo UI Bootstrap theme uses the $accent color internally. The theme should pick up the $primary color and use it as an $accent, as described in the customization help topic, but since the $accent color is already defined, it does not override it.

To resolve the problem, set both the $accent and $primary variables to the same color. An alternative solution would be to remove the line that mentions the $accent color.

Regards,
Alex Gyoshev
Progress Telerik