Changing the primary button color

According to the "Themes" documentation, I can change my primary button color by setting the following in my "custom/themes/clients/base/default/variables.php" file.

<?php

$lessdefs = [
    'colors' => [
        'PrimaryButton' => '#0F0',
    ],
];

?>

In theory, doing so should give me bright green buttons. In practice, it gives me a bright green button that is still blue when you hover over it.

This seems like a failed implementation of customization. Not only are we limited to only three variable customizations, they don't even work properly.

At the moment, the only way I've found to cusomize the button more completely has been to put the following in my "custom/themes/custom.less" file.

.btn-primary {
    &:not(.disabled) {
        &:not(.btn-invisible) {
            &:hover {
                background: #0A0;
            }
            &:focus {
                background: #0A0;
            }
            &:active {
                background: #0F0;
            }
        }

    }
}

That code is super ugly, and doesn't feel very upgrade safe. What's the right way to accomplish a primary color change across the application?