Replace bulmaDarken and bulmaLighten instances

sass/elements/button.sass

@@ -14,6 +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-hsla: hsla(var(--link-h), var(--link-s), var(--link-l), 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
@@ -21,7 +22,7 @@ $button-active-border-color: var(--link-active-border, #{$link-active-border}) !
 
 $button-text-color: var(--text, #{$text}) !default
 $button-text-decoration: underline !default
-$button-text-hover-background-color: var(--background, #{$background}) !default
+$button-text-hover-background-color: $background !default
 $button-text-hover-color: var(--text-strong, #{$text-strong}) !default
 
 $button-disabled-background-color: var(--scheme-main, #{$scheme-main}) !default
@@ -58,7 +59,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-hsla: #{$button-focus-box-shadow-color-hsla}
   --button-focus-box-shadow-color: #{$button-focus-box-shadow-color}
   --button-focus-color: #{$button-focus-color}
   --button-active-border-color: #{$button-active-border-color}
@@ -119,7 +120,7 @@ $button-colors: $colors !default
     border-color: var(--button-focus-border-color)
     color: var(--button-focus-color)
     &:not(:active)
-      box-shadow: var(--button-focus-box-shadow-size, #{$button-focus-box-shadow-size}) var(--button-focus-box-shadow-color, #{$button-focus-box-shadow-color})
+      box-shadow: var(--button-focus-box-shadow-size) var(--button-focus-box-shadow-color, #{$button-focus-box-shadow-color})
   &:active,
   &.is-active
     border-color: var(--button-active-border-color)
@@ -149,18 +150,20 @@ $button-colors: $colors !default
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
-      --button-hover-background-l-delta: -2.5%
-      --button-hover-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--button-hover-background-l-delta)})
-      --button-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-hover-background-#{$name}-l), var(--#{$name}-a))
-      --button-active-background-l-delta: -5%
-      --button-active-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--button-active-background-l-delta)})
-      --button-active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-active-background-#{$name}-l), var(--#{$name}-a))
+      --hover-background-l-delta: -2.5%
+      --hover-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--hover-background-l-delta)})
+      --hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--hover-background-#{$name}-l), var(--#{$name}-a))
+      --focus-box-shadow-color-hsla: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-l), 0.25)
+      --focus-box-shadow-color: var(--focus-box-shadow-color-hsla, #{bulmaRgba($color, 0.25)})
+      --active-background-l-delta: -5%
+      --active-background-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--active-background-l-delta)})
+      --active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--active-background-#{$name}-l), var(--#{$name}-a))
       background-color: var(--#{$name}, #{$color})
       border-color: transparent
       color: var(--#{$name}-invert, #{$color-invert})
       &:hover,
       &.is-hovered
-        background-color: var(--button-hover-background-color, #{bulmaDarken($color, 2.5%)})
+        background-color: var(--hover-background-color, #{bulmaDarken($color, 2.5%)})
         border-color: transparent
         color: var(--#{$name}-invert, #{$color-invert})
       &:focus,
@@ -168,10 +171,10 @@ $button-colors: $colors !default
         border-color: transparent
         color: var(--#{$name}-invert, #{$color-invert})
         &:not(:active)
-          box-shadow: var(--button-focus-box-shadow-size, #{$button-focus-box-shadow-size}) bulmaRgba($color, 0.25)
+          box-shadow: var(--button-focus-box-shadow-size) var(--focus-box-shadow-color)
       &:active,
       &.is-active
-        background-color: var(--button-active-background-color, #{bulmaDarken($color, 5%)})
+        background-color: var(--active-background-color, #{bulmaDarken($color, 5%)})
         border-color: transparent
         color: var(--#{$name}-invert, #{$color-invert})
       &[disabled],
@@ -248,22 +251,22 @@ $button-colors: $colors !default
         $color-light: nth($pair, 3)
         $color-dark: nth($pair, 4)
         &.is-light
-          --button-light-hover-background-l-delta: -2.5%
-          --button-light-hover-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--button-light-hover-background-l-delta)})
-          --button-light-hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-light-hover-background-#{$name}-l), var(--#{$name}-a))
-          --button-light-active-background-l-delta: -5%
-          --button-light-active-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--button-light-active-background-l-delta)})
-          --button-light-active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--button-light-active-background-#{$name}-l), var(--#{$name}-a))
+          --hover-background-l-delta: -2.5%
+          --hover-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--hover-background-l-delta)})
+          --hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--hover-background-#{$name}-l), var(--#{$name}-a))
+          --active-background-l-delta: -5%
+          --active-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--active-background-l-delta)})
+          --active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--active-background-#{$name}-l), var(--#{$name}-a))
           background-color: var(--#{$name}-light, #{$color-light})
           color: var(--#{$name}-dark, #{$color-dark})
           &:hover,
           &.is-hovered
-            background-color: var(--button-light-hover-background-color, #{bulmaDarken($color-light, 2.5%)})
+            background-color: var(--hover-background-color, #{bulmaDarken($color-light, 2.5%)})
             border-color: transparent
             color: var(--#{$name}-dark, #{$color-dark})
           &:active,
           &.is-active
-            background-color: var(--button-light-active-background-color, #{bulmaDarken($color-light, 5%)})
+            background-color: var(--active-background-color, #{bulmaDarken($color-light, 5%)})
             border-color: transparent
             color: var(--#{$name}-dark, #{$color-dark})
   // Sizes

sass/elements/tag.sass

@@ -1,4 +1,4 @@
-$tag-background-color: var(--background, #{$background}) !default
+$tag-background-color: $background !default
 $tag-color: var(--text, #{$text}) !default
 $tag-radius: var(--radius, #{$radius}) !default
 $tag-delete-margin: 1px !default

sass/form/file.sass

@@ -1,12 +1,12 @@
 $file-border-color: var(--border, #{$border}) !default
 $file-radius: var(--radius, #{$radius}) !default
 
-$file-cta-background-color: var(--scheme-main-ter, #{$scheme-main-ter}) !default
+$file-cta-background-color: $scheme-main-ter !default
 $file-cta-color: var(--text, #{$text}) !default
 $file-cta-hover-color: var(--text-strong, #{$text-strong}) !default
 $file-cta-active-color: var(--text-strong, #{$text-strong}) !default
 
-$file-name-border-color: var(--border, #{$border}) !default
+$file-name-border-color: $border !default
 $file-name-border-style: solid !default
 $file-name-border-width: 1px 1px 1px 0 !default
 $file-name-max-width: 16em !default
@@ -35,6 +35,14 @@ $file-colors: $form-colors !default
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
+      --hover-background-l-delta: -2.5%
+      --hover-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--hover-background-l-delta)})
+      --hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--hover-background-#{$name}-l), var(--#{$name}-a))
+      --focus-box-shadow-color-hsla: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-l), 0.25)
+      --focus-box-shadow-color: var(--focus-box-shadow-color-hsla, #{bulmaRgba($color, 0.25)})
+      --active-background-l-delta: -5%
+      --active-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--active-background-l-delta)})
+      --active-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--active-background-#{$name}-l), var(--#{$name}-a))
       .file-cta
         background-color: var(--#{$name} #{$color})
         border-color: transparent
@@ -42,19 +50,19 @@ $file-colors: $form-colors !default
       &:hover,
       &.is-hovered
         .file-cta
-          background-color: bulmaDarken($color, 2.5%)
+          background-color: var(--hover-background-color, #{bulmaDarken($color, 2.5%)})
           border-color: transparent
           color: var(--#{$name}-invert, #{$color-invert})
       &:focus,
       &.is-focused
         .file-cta
           border-color: transparent
-          box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
+          box-shadow: 0 0 0.5em var(--focus-box-shadow-color)
           color: var(--#{$name}-invert, #{$color-invert})
       &:active,
       &.is-active
         .file-cta
-          background-color: bulmaDarken($color, 5%)
+          background-color: var(--active-background-color, #{bulmaDarken($color, 5%)})
           border-color: transparent
           color: var(--#{$name}-invert, #{$color-invert})
   // Sizes

sass/form/input-textarea.sass

@@ -15,12 +15,14 @@ $textarea-colors: $form-colors !default
   @each $name, $pair in $textarea-colors
     $color: nth($pair, 1)
     &.is-#{$name}
+      --focus-box-shadow-color-hsla: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--#{$name}-l), 0.25)
+      --focus-box-shadow-color: var(--focus-box-shadow-color-hsla, #{bulmaRgba($color, 0.25)})
       border-color: var(--#{$name}, #{$color})
       &:focus,
       &.is-focused,
       &:active,
       &.is-active
-        box-shadow: var(--input-focus-box-shadow-size, #{$input-focus-box-shadow-size}) bulmaRgba($color, 0.25)
+        box-shadow: var(--input-focus-box-shadow-size, #{$input-focus-box-shadow-size}) var(--focus-box-shadow-color)
   // Sizes
   &.is-small
     +control-small

sass/form/shared.sass

@@ -6,7 +6,7 @@ $input-border-color: var(--border, #{$border}) !default
 $input-height: var(--control-height, #{$control-height}) !default
 $input-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.05) !default
 $input-shadow: inset 0 0.0625em 0.125em $input-shadow-color !default
-$input-placeholder-color: bulmaRgba($input-color, 0.3) !default
+$input-placeholder-color: bulmaRgba($text-strong, 0.3) !default
 
 $input-hover-color: var(--text-strong, #{$text-strong}) !default
 $input-hover-border-color: var(--border-hover, #{$border-hover}) !default
@@ -19,7 +19,7 @@ $input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default
 $input-disabled-color: var(--text-light, #{$text-light}) !default
 $input-disabled-background-color: var(--background, #{$background}) !default
 $input-disabled-border-color: var(--background, #{$background}) !default
-$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default
+$input-disabled-placeholder-color: bulmaRgba($text-light, 0.3) !default
 
 $input-arrow: var(--link, #{$link}) !default
 

sass/helpers/color.sass

@@ -5,7 +5,6 @@
     --has-text-hover-#{$name}-l: calc(#{var(--#{$name}-l)} + #{var(--has-text-hover-delta)})
     --has-text-hover-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--has-text-hover-#{$name}-l), var(--#{$name}-a))
     color: var(--#{$name}, #{$color}) !important
-  .has-text-#{$name}
     &:hover,
     &:focus
       color: var(--has-text-hover-color, #{bulmaDarken($color, 10%)}) !important
@@ -16,20 +15,26 @@
     $color-dark: nth($pair, 4)
     // Light
     .has-text-#{$name}-light
+      --has-text-light-hover-delta: -10%
+      --has-text-light-hover-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--has-text-light-hover-delta)})
+      --has-text-light-hover-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--has-text-light-hover-#{$name}-l), var(--#{$name}-a))
       color: var(--#{$name}-light, #{$color-light}) !important
     a.has-text-#{$name}-light
       &:hover,
       &:focus
-        color: bulmaDarken($color-light, 10%) !important
+        color: var(--has-text-light-hover-color, #{bulmaDarken($color-light, 10%)}) !important
     .has-background-#{$name}-light
       background-color: var(--#{$name}-light, #{$color-light}) !important
     // Dark
     .has-text-#{$name}-dark
+      --has-text-dark-hover-delta: 10%
+      --has-text-dark-hover-#{$name}-l: calc(#{var(--#{$name}-dark-l)} + #{var(--has-text-dark-hover-delta)})
+      --has-text-dark-hover-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--has-text-dark-hover-#{$name}-l), var(--#{$name}-a))
       color: var(--#{$name}-dark, #{$color-dark}) !important
     a.has-text-#{$name}-dark
       &:hover,
       &:focus
-        color: bulmaLighten($color-dark, 10%) !important
+        color: var(--has-text-dark-hover-color, #{bulmaLighten($color-dark, 10%)}) !important
     .has-background-#{$name}-dark
       background-color: var(--#{$name}-dark, #{$color-dark}) !important
 

sass/layout/hero.sass

@@ -25,6 +25,9 @@ $hero-colors: $colors !default
     $color: nth($pair, 1)
     $color-invert: nth($pair, 2)
     &.is-#{$name}
+      --hover-background-l-delta: -5%
+      --hover-background-#{$name}-l: calc(#{var(--#{$name}-light-l)} + #{var(--hover-background-l-delta)})
+      --hover-background-color: hsla(var(--#{$name}-h), var(--#{$name}-s), var(--hover-background-#{$name}-l), var(--#{$name}-a))
       background-color: var(--#{$name}, #{$color})
       color: var(--#{$name}-invert, #{$color-invert})
       a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
@@ -47,7 +50,7 @@ $hero-colors: $colors !default
       .navbar-link
         &:hover,
         &.is-active
-          background-color: bulmaDarken($color, 5%)
+          background-color: var(--hover-background-color, #{bulmaDarken($color, 5%)})
           color: var(--#{$name}-invert, #{$color-invert})
       .tabs
         a
@@ -63,7 +66,7 @@ $hero-colors: $colors !default
           a
             color: var(--#{$name}-invert, #{$color-invert})
             &:hover
-              background-color: bulmaRgba($scheme-invert, 0.1)
+              background-color: rgba(0, 0, 0, 0.1)
           li.is-active a
             &,
             &:hover

sass/themes/basic.sass

@@ -1,36 +1,7 @@
 \:root
   // Initial variables
-  --black: #{$black}
-  --black-70: rgba(0, 0, 0, 0.7)
-  --black-bis: #{$black-bis}
-  --black-ter: #{$black-ter}
-  --grey-darker: #{$grey-darker}
-  --grey-dark: #{$grey-dark}
-  --grey: #{$grey}
-  --grey-light: #{$grey-light}
-  --grey-lighter: #{$grey-lighter}
-  --grey-lightest: #{$grey-lightest}
-  --white-ter: #{$white-ter}
-  --white-bis: #{$white-bis}
-  --white: #{$white}
-  --orange: #{$orange}
-  --yellow: #{$yellow}
-  --green: #{$green}
-  --turquoise: #{$turquoise}
-  --cyan: #{$cyan}
-  --blue: #{$blue}
-  --purple: #{$purple}
-  --red: #{$red}
   --family-sans-serif: #{$family-sans-serif}
   --family-monospace: #{$family-monospace}
-  --render-mode: #{$render-mode}
-  --size-1: #{$size-1}
-  --size-2: #{$size-2}
-  --size-3: #{$size-3}
-  --size-4: #{$size-4}
-  --size-5: #{$size-5}
-  --size-6: #{$size-6}
-  --size-7: #{$size-7}
   --weight-light: #{$weight-light}
   --weight-normal: #{$weight-normal}
   --weight-medium: #{$weight-medium}

sass/utilities/derived-variables.sass

@@ -43,32 +43,32 @@ $dark-dark: findDarkColor($dark, $grey-darker) !default
 
 // General colors
 
-$scheme-main: var(--white, #{$white}) !default
-$scheme-main-bis: var(--white-bis, #{$white-bis}) !default
-$scheme-main-ter: var(--white-ter, #{$white-ter}) !default
-$scheme-invert: var(--black, #{$black}) !default
+$scheme-main: $white !default
+$scheme-main-bis: $white-bis !default
+$scheme-main-ter: $white-ter !default
+$scheme-invert: $black !default
 $scheme-invert-rgb: bulmaToRGB($black) !default
-$scheme-invert-bis: var(--black-bis, #{$black-bis}) !default
-$scheme-invert-ter: var(--black-ter, #{$black-ter}) !default
+$scheme-invert-bis: $black-bis !default
+$scheme-invert-ter: $black-ter !default
 
-$background: var(--white-ter, #{$white-ter}) !default
+$background: $white-ter !default
 
-$border: var(--grey-lighter, #{$grey-lighter}) !default
+$border: $grey-lighter !default
 $border-rgb: bulmaToRGB($grey-lighter) !default
-$border-hover: var(--grey-light, #{$grey-light}) !default
-$border-light: var(--grey-lightest, #{$grey-lightest}) !default
-$border-light-hover: var(--grey-light, #{$grey-light}) !default
+$border-hover: $grey-light !default
+$border-light: $grey-lightest !default
+$border-light-hover: $grey-light !default
 
 // Text colors
 
-$text: var(--grey-dark, #{$grey-dark}) !default
+$text: $grey-dark !default
 $text-invert: findColorInvert($text, $grey-dark) !default
-$text-light: var(--grey, #{$grey}) !default
-$text-strong: var(--grey-darker, #{$grey-darker}) !default
+$text-light: $grey !default
+$text-strong: $grey-darker !default
 
 // Code colors
 
-$code: var(--red, #{darken($red, 15%)}) !default
+$code: darken($red, 15%) !default
 $code-background: var(--background, #{$background}) !default
 
 $pre: var(--text, #{$text}) !default
@@ -81,27 +81,27 @@ $link-rgb: bulmaToRGB($blue) !default
 $link-invert: findColorInvert($link, $blue) !default
 $link-light: findLightColor($link, $blue) !default
 $link-dark: findDarkColor($link, $blue) !default
-$link-visited: var(--purple, #{$purple}) !default
+$link-visited: $purple !default
 
-$link-hover: var(--grey-darker, #{$grey-darker}) !default
-$link-hover-border: var(--grey-light, #{$grey-light}) !default
+$link-hover: $grey-darker !default
+$link-hover-border: $grey-light !default
 
-$link-focus: var(--grey-darker, #{$grey-darker}) !default
+$link-focus: $grey-darker !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
+$link-active: $grey-darker !default
+$link-active-border: $grey-dark !default
 
 // Typography
 
-$family-primary: var(--family-sans-serif, #{$family-sans-serif}) !default
-$family-secondary: var(--family-sans-serif, #{$family-sans-serif}) !default
-$family-code: var(--family-monospace, #{$family-monospace}) !default
+$family-primary: $family-sans-serif !default
+$family-secondary: $family-sans-serif !default
+$family-code: $family-monospace !default
 
-$size-small: var(--size-7, #{size-7}) !default
-$size-normal: var(--size-6, #{size-6}) !default
-$size-medium: var(--size-5, #{size-5}) !default
-$size-large: var(--size-4, #{size-4}) !default
+$size-small: $size-7 !default
+$size-normal: $size-6 !default
+$size-medium: $size-5 !default
+$size-large: $size-4 !default
 
 // Lists and maps
 $custom-colors: null !default

sass/utilities/functions.sass

@@ -150,17 +150,17 @@
     @each $name, $value in $list
       --#{$name}: #{$value}
 
-// bulmaDarken($color, 5%)
-// bulmaDarken($color, 10%)
-// bulmaDarken($color, 2.5%)
-// bulmaRgba($color, 0.25)
-// bulmaDarken($color-light, 10%)
-// bulmaDarken($color-light, 2.5%)
-// bulmaDarken($color-light, 5%)
-// bulmaLighten($color-dark, 10%)
-// bulmaDarken($color-invert, 5%)
-// bulmaRgba($color-invert, 0.9)
-// bulmaRgba($color-invert, 0.7)
+// bulmaDarken => $color, 5%)
+// bulmaDarken => $color, 10%)
+// bulmaDarken => $color, 2.5%)
+// bulmaRgba => $color, 0.25)
+// bulmaDarken => $color-light, 10%)
+// bulmaDarken => $color-light, 2.5%)
+// bulmaDarken => $color-light, 5%)
+// bulmaLighten => $color-dark, 10%)
+// bulmaDarken => $color-invert, 5%)
+// bulmaRgba => $color-invert, 0.9)
+// bulmaRgba => $color-invert, 0.7)
 =registerCSSVarColor($name, $components, $prefix: '')
   $color: nth($components, 1)
   $base: $prefix + $name

sass/utilities/mixins.sass

@@ -51,7 +51,7 @@
     &:nth-child(3)
       top: calc(50% + 4px)
   &:hover
-    background-color: bulmaRgba(black, 0.05)
+    background-color: rgba(0, 0, 0, 0.05)
   // Modifers
   &.is-active
     span