Fix select and button rgba

diff --git a/sass/elements/button.sass b/sass/elements/button.sass
index c61ef66c86a7a8daf8f5b2a73b0c287b87860758..45f2ac039c950cb2c5aec744622f733e4bfb52de 100644 (file)
--- 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 f57a073c04b6329e8f5e37c2ba4687b2d7bb3d30..6b818520cae94da361161bd8d6fcf1edadbca0f2 100644 (file)
--- 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 bb22124dcc24edc64eefee3a7007683aa0606f0a..1169bc9e48dcd550aa4fda54723a37e86a1d164c 100644 (file)
--- 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 7d95ed2731b95d0f3d81e59b041ea6c8222cb19b..ef05d55287196eb1cfcd97f4c5bf7a8f6dfaeeb7 100644 (file)
--- 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`);