When following themeing docs, notice that clicking on a primary button ripple effect is blue not the purple expected by setting primary color.

@import 'mdb-ui-kit/src/mdb/scss/mdb.pro.scss';

$my-theme-primary: #9c27b0; // theme primary color, change this value to customize theme
$my-theme-secondary: #69f0ae; // theme secondary color, change this value to customize theme

$my-theme: mdb-light-theme($my-theme-primary, $my-theme-secondary); // create the new theme using primary and secondary colors

// include theme styles
@include mdb-theme($my-theme);

Now add 2 buttons to page:

<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-outline-primary">Primary Button</button>

NOTE: primary button is purple, but click on it and the ripple effect is blue. Also the outline button is purple but click on it and the outline changes to blue.

How to properly apply primary and secondary colors so that all shades are applied as per material ui spec?