diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index c61ef66c..45f2ac03 100644
--- a/sass/elements/button.sass
+++ b/sass/elements/button.sass
@@ -14,7 +14,7 @@ $button-hover-border-color: var(--link-hover-border, #{$link-hover-border}) !def
 $button-focus-color: var(--link-focus, #{$link-focus}) !default
 $button-focus-border-color: var(--link-focus-border, #{$link-focus-border}) !default
 $button-focus-box-shadow-size: 0 0 0 0.125em !default
-$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
+$button-focus-box-shadow-color: var(--button-focus-box-shadow-color-hsla, #{bulmaRgba($link, 0.25)}) !default
 
 $button-active-color: var(--link-active, #{$link-active}) !default
 $button-active-border-color: var(--link-active-border, #{$link-active-border}) !default
@@ -58,6 +58,7 @@ $button-colors: $colors !default
   --button-hover-color: #{$button-hover-color}
   --button-focus-border-color: #{$button-focus-border-color}
   --button-focus-box-shadow-size: #{$button-focus-box-shadow-size}
+  --button-focus-box-shadow-color-hsla: hsla(var(--link-h), var(--link-s), var(--link-l), 0.25)
   --button-focus-box-shadow-color: #{$button-focus-box-shadow-color}
   --button-focus-color: #{$button-focus-color}
   --button-active-border-color: #{$button-active-border-color}
diff --git a/sass/form/select.sass b/sass/form/select.sass
index f57a073c..6b818520 100644
--- a/sass/form/select.sass
+++ b/sass/form/select.sass
@@ -47,20 +47,25 @@ $select-colors: $form-colors !default
       border-color: var(--select-hover-color)
   // Colors
   @each $name, $pair in $select-colors
+    @debug $select-colors
     $color: nth($pair, 1)
     &.is-#{$name}
+      --hover-border-delta: -5%
+      --hover-border-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--hover-border-delta)})
+      --hover-border-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--hover-border-#{$name}-l), var(--#{$name}-a))
+      --focus-box-shadow-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-l), 0.25)
       &:not(:hover)::after
         border-color: var(--#{$name}, #{$color})
       select
         border-color: var(--#{$name}, #{$color})
         &:hover,
         &.is-hovered
-          border-color: bulmaDarken($color, 5%)
+          border-color: var(--hover-border-color, #{bulmaDarken($color, 5%)})
         &:focus,
         &.is-focused,
         &:active,
         &.is-active
-          box-shadow: var(--select-focus-box-shadow-size) bulmaRgba($color, 0.25)
+          box-shadow: var(--select-focus-box-shadow-size) var(--focus-box-shadow-color, #{bulmaRgba($color, 0.25)})
   // Sizes
   &.is-small
     +control-small
diff --git a/sass/utilities/derived-variables.sass b/sass/utilities/derived-variables.sass
index bb22124d..1169bc9e 100644
--- a/sass/utilities/derived-variables.sass
+++ b/sass/utilities/derived-variables.sass
@@ -87,7 +87,7 @@ $link-hover: var(--grey-darker, #{$grey-darker}) !default
 $link-hover-border: var(--grey-light, #{$grey-light}) !default
 
 $link-focus: var(--grey-darker, #{$grey-darker}) !default
-$link-focus-border: var(--blue, #{$blue}) !default
+$link-focus-border: var(--link, #{$blue}) !default
 
 $link-active: var(--grey-darker, #{$grey-darker}) !default
 $link-active-border: var(--grey-dark, #{$grey-dark}) !default
diff --git a/test/plugins/check-css-variables-exist.js b/test/plugins/check-css-variables-exist.js
index 7d95ed27..ef05d552 100644
--- a/test/plugins/check-css-variables-exist.js
+++ b/test/plugins/check-css-variables-exist.js
@@ -43,6 +43,10 @@ function plugin() {
         if (mapName in COLOR_MAPS) {
           const colors = COLOR_MAPS[mapName].map(colorName => {
             defaultAssignments.push(`--${colorName}`);
+            defaultAssignments.push(`--${colorName}-h`);
+            defaultAssignments.push(`--${colorName}-s`);
+            defaultAssignments.push(`--${colorName}-l`);
+            defaultAssignments.push(`--${colorName}-a`);
             defaultAssignments.push(`--${colorName}-invert`);
             defaultAssignments.push(`--${colorName}-light`);
             defaultAssignments.push(`--${colorName}-dark`);