Border opacity hover colors

<!-- Source -->
<div class="border-hover-primary-10"></div>
<div class="border-hover-primary-20"></div>
<div class="border-hover-primary-30"></div>
<div class="border-hover-primary-40"></div>
<div class="border-hover-primary-50"></div>
<div class="border-hover-primary-60"></div>
<div class="border-hover-primary-70"></div>
<div class="border-hover-primary-80"></div>
<div class="border-hover-primary-90"></div>

<div class="border-hover-secondary-10"></div>
<div class="border-hover-secondary-20"></div>
<div class="border-hover-secondary-30"></div>
<div class="border-hover-secondary-40"></div>
<div class="border-hover-secondary-50"></div>
<div class="border-hover-secondary-60"></div>
<div class="border-hover-secondary-70"></div>
<div class="border-hover-secondary-80"></div>
<div class="border-hover-secondary-90"></div>

<div class="border-hover-success-10"></div>
<div class="border-hover-success-20"></div>
<div class="border-hover-success-30"></div>
<div class="border-hover-success-40"></div>
<div class="border-hover-success-50"></div>
<div class="border-hover-success-60"></div>
<div class="border-hover-success-70"></div>
<div class="border-hover-success-80"></div>
<div class="border-hover-success-90"></div>

<div class="border-hover-info-10"></div>
<div class="border-hover-info-20"></div>
<div class="border-hover-info-30"></div>
<div class="border-hover-info-40"></div>
<div class="border-hover-info-50"></div>
<div class="border-hover-info-60"></div>
<div class="border-hover-info-70"></div>
<div class="border-hover-info-80"></div>
<div class="border-hover-info-90"></div>

<div class="border-hover-warning-10"></div>
<div class="border-hover-warning-20"></div>
<div class="border-hover-warning-30"></div>
<div class="border-hover-warning-40"></div>
<div class="border-hover-warning-50"></div>
<div class="border-hover-warning-60"></div>
<div class="border-hover-warning-70"></div>
<div class="border-hover-warning-80"></div>
<div class="border-hover-warning-90"></div>

<div class="border-hover-danger-10"></div>
<div class="border-hover-danger-20"></div>
<div class="border-hover-danger-30"></div>
<div class="border-hover-danger-40"></div>
<div class="border-hover-danger-50"></div>
<div class="border-hover-danger-60"></div>
<div class="border-hover-danger-70"></div>
<div class="border-hover-danger-80"></div>
<div class="border-hover-danger-90"></div>

<div class="border-hover-light-10"></div>
<div class="border-hover-light-20"></div>
<div class="border-hover-light-30"></div>
<div class="border-hover-light-40"></div>
<div class="border-hover-light-50"></div>
<div class="border-hover-light-60"></div>
<div class="border-hover-light-70"></div>
<div class="border-hover-light-80"></div>
<div class="border-hover-light-90"></div>

<div class="border-hover-dark-10"></div>
<div class="border-hover-dark-20"></div>
<div class="border-hover-dark-30"></div>
<div class="border-hover-dark-40"></div>
<div class="border-hover-dark-50"></div>
<div class="border-hover-dark-60"></div>
<div class="border-hover-dark-70"></div>
<div class="border-hover-dark-80"></div>
<div class="border-hover-dark-90"></div>

<div class="border-hover-black-10"></div>
<div class="border-hover-black-20"></div>
<div class="border-hover-black-30"></div>
<div class="border-hover-black-40"></div>
<div class="border-hover-black-50"></div>
<div class="border-hover-black-60"></div>
<div class="border-hover-black-70"></div>
<div class="border-hover-black-80"></div>
<div class="border-hover-black-90"></div>

<div class="border-hover-indigo-10"></div>
<div class="border-hover-indigo-20"></div>
<div class="border-hover-indigo-30"></div>
<div class="border-hover-indigo-40"></div>
<div class="border-hover-indigo-50"></div>
<div class="border-hover-indigo-60"></div>
<div class="border-hover-indigo-70"></div>
<div class="border-hover-indigo-80"></div>
<div class="border-hover-indigo-90"></div>

<div class="border-hover-orange-10"></div>
<div class="border-hover-orange-20"></div>
<div class="border-hover-orange-30"></div>
<div class="border-hover-orange-40"></div>
<div class="border-hover-orange-50"></div>
<div class="border-hover-orange-60"></div>
<div class="border-hover-orange-70"></div>
<div class="border-hover-orange-80"></div>
<div class="border-hover-orange-90"></div>

<div class="border-hover-pink-10"></div>
<div class="border-hover-pink-20"></div>
<div class="border-hover-pink-30"></div>
<div class="border-hover-pink-40"></div>
<div class="border-hover-pink-50"></div>
<div class="border-hover-pink-60"></div>
<div class="border-hover-pink-70"></div>
<div class="border-hover-pink-80"></div>
<div class="border-hover-pink-90"></div>

<div class="border-hover-purple-10"></div>
<div class="border-hover-purple-20"></div>
<div class="border-hover-purple-30"></div>
<div class="border-hover-purple-40"></div>
<div class="border-hover-purple-50"></div>
<div class="border-hover-purple-60"></div>
<div class="border-hover-purple-70"></div>
<div class="border-hover-purple-80"></div>
<div class="border-hover-purple-90"></div>

<div class="border-hover-teal-10"></div>
<div class="border-hover-teal-20"></div>
<div class="border-hover-teal-30"></div>
<div class="border-hover-teal-40"></div>
<div class="border-hover-teal-50"></div>
<div class="border-hover-teal-60"></div>
<div class="border-hover-teal-70"></div>
<div class="border-hover-teal-80"></div>
<div class="border-hover-teal-90"></div>

<div class="border-hover-white-10"></div>
<div class="border-hover-white-20"></div>
<div class="border-hover-white-30"></div>
<div class="border-hover-white-40"></div>
<div class="border-hover-white-50"></div>
<div class="border-hover-white-60"></div>
<div class="border-hover-white-70"></div>
<div class="border-hover-white-80"></div>
<div class="border-hover-white-90"></div>