From 2fc648fb94a9ca7611747e7e1394b707157675ba Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Sat, 15 Aug 2020 13:25:39 +0100
Subject: [PATCH] Fallback to rgb shadow color

---
 sass/components/card.sass             | 65 +++++++++++++++++----------
 sass/components/navbar.sass           | 12 ++---
 sass/themes/default.sass              |  7 ++-
 sass/utilities/derived-variables.scss | 36 ++++++++-------
 sass/utilities/functions.sass         |  6 ++-
 5 files changed, 80 insertions(+), 46 deletions(-)

diff --git a/sass/components/card.sass b/sass/components/card.sass
index ea505879..80449534 100644
--- a/sass/components/card.sass
+++ b/sass/components/card.sass
@@ -1,13 +1,16 @@
-$card-color: $text !default
-$card-background-color: $scheme-main !default
-$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
+$card-color: var(--text, #{$text}) !default
+$card-background-color: var(--scheme-main, #{$scheme-main}) !default
+$card-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
+$card-shadow-color-bis: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.02) !default
+$card-shadow: 0 0.5em 1em -0.125em $card-shadow-color, 0 0px 0 1px $card-shadow-color-bis !default
 $card-radius: 0 !default
 
 $card-header-background-color: transparent !default
-$card-header-color: $text-strong !default
+$card-header-color: var(--text-strong, #{$text-strong}) !default
 $card-header-padding: 0.75rem 1rem !default
-$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
-$card-header-weight: $weight-bold !default
+$card-header-shadow-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.1) !default
+$card-header-shadow: 0 0.125em 0.25em $card-header-shadow-color !default
+$card-header-weight: var(--weight-bold, #{$weight-bold}) !default
 
 $card-content-background-color: transparent !default
 $card-content-padding: 1.5rem !default
@@ -16,30 +19,46 @@ $card-footer-background-color: transparent !default
 $card-footer-border-top: 1px solid $border-light !default
 $card-footer-padding: 0.75rem !default
 
-$card-media-margin: $block-spacing !default
+$card-media-margin: var(--block-spacing, #{$block-spacing}) !default
 
 .card
-  background-color: $card-background-color
-  box-shadow: $card-shadow
-  color: $card-color
+  --card-background-color: #{$card-background-color}
+  --card-shadow: #{$card-shadow}
+  --card-color: #{$card-color}
+  --card-radius: #{$card-radius}
+  --card-header-background-color: #{$card-header-background-color}
+  --card-header-shadow: #{$card-header-shadow}
+  --card-header-color: #{$card-header-color}
+  --card-header-weight: #{$card-header-weight}
+  --card-header-padding: #{$card-header-padding}
+  --card-header-padding: #{$card-header-padding}
+  --card-content-background-color: #{$card-content-background-color}
+  --card-content-padding: #{$card-content-padding}
+  --card-footer-background-color: #{$card-footer-background-color}
+  --card-footer-border-top: #{$card-footer-border-top}
+  --card-footer-padding: #{$card-footer-padding}
+  --card-media-margin: #{$card-media-margin}
+  background-color: var(--card-background-color)
+  box-shadow: var(--card-shadow)
+  color: var(--card-color)
   max-width: 100%
   position: relative
-  border-radius: $card-radius
+  border-radius: var(--card-radius)
   overflow: hidden
 
 .card-header
-  background-color: $card-header-background-color
+  background-color: var(--card-header-background-color)
   align-items: stretch
-  box-shadow: $card-header-shadow
+  box-shadow: var(--card-header-shadow)
   display: flex
 
 .card-header-title
   align-items: center
-  color: $card-header-color
+  color: var(--card-header-color)
   display: flex
   flex-grow: 1
-  font-weight: $card-header-weight
-  padding: $card-header-padding
+  font-weight: var(--card-header-weight)
+  padding: var(--card-header-padding)
   &.is-centered
     justify-content: center
 
@@ -48,19 +67,19 @@ $card-media-margin: $block-spacing !default
   cursor: pointer
   display: flex
   justify-content: center
-  padding: $card-header-padding
+  padding: var(--card-header-padding)
 
 .card-image
   display: block
   position: relative
 
 .card-content
-  background-color: $card-content-background-color
-  padding: $card-content-padding
+  background-color: var(--card-content-background-color)
+  padding: var(--card-content-padding)
 
 .card-footer
-  background-color: $card-footer-background-color
-  border-top: $card-footer-border-top
+  background-color: var(--card-footer-background-color)
+  border-top: var(--card-footer-border-top)
   align-items: stretch
   display: flex
 
@@ -71,7 +90,7 @@ $card-media-margin: $block-spacing !default
   flex-grow: 1
   flex-shrink: 0
   justify-content: center
-  padding: $card-footer-padding
+  padding: var(--card-footer-padding)
   &:not(:last-child)
     +ltr-property("border", $card-footer-border-top)
 
@@ -79,4 +98,4 @@ $card-media-margin: $block-spacing !default
 
 .card
   .media:not(:last-child)
-    margin-bottom: $card-media-margin
+    margin-bottom: var(--card-media-margin)
diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass
index a34718ec..9ccc1c3b 100644
--- a/sass/components/navbar.sass
+++ b/sass/components/navbar.sass
@@ -32,7 +32,7 @@ $navbar-dropdown-radius: $radius-large !default
 $navbar-dropdown-z: 20 !default
 
 $navbar-dropdown-boxed-radius: $radius-large !default
-$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default
+$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba(#{$scheme-invert-rgb}, 0.1,), 0 0 0 1px bulmaRgba(#{$scheme-invert-rgb}, 0.1,) !default
 
 $navbar-dropdown-item-hover-color: $scheme-invert !default
 $navbar-dropdown-item-hover-background-color: $background !default
@@ -244,7 +244,7 @@ a.navbar-item,
       display: none
   .navbar-menu
     background-color: $navbar-background-color
-    box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
+    box-shadow: 0 8px 16px rgba(var(--scheme-invert-rgb), 0.1)
     padding: 0.5rem 0
     &.is-active
       display: block
@@ -256,7 +256,7 @@ a.navbar-item,
     &.is-fixed-bottom-touch
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
+        box-shadow: 0 -2px 3px rgba(var(--scheme-invert-rgb), 0.1)
     &.is-fixed-top-touch
       top: 0
     &.is-fixed-top,
@@ -329,7 +329,7 @@ a.navbar-item,
         border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
         border-top: none
         bottom: 100%
-        box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
+        box-shadow: 0 -8px 8px rgba(var(--scheme-invert-rgb), 0.1)
         top: auto
     &.is-active,
     &.is-hoverable:focus,
@@ -356,7 +356,7 @@ a.navbar-item,
     border-bottom-left-radius: $navbar-dropdown-radius
     border-bottom-right-radius: $navbar-dropdown-radius
     border-top: $navbar-dropdown-border-top
-    box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
+    box-shadow: 0 8px 8px rgba(var(--scheme-invert-rgb), 0.1)
     display: none
     font-size: 0.875rem
     +ltr-position(0, false)
@@ -407,7 +407,7 @@ a.navbar-item,
     &.is-fixed-bottom-desktop
       bottom: 0
       &.has-shadow
-        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
+        box-shadow: 0 -2px 3px rgba(var(--scheme-invert-rgb), 0.1)
     &.is-fixed-top-desktop
       top: 0
   html,
diff --git a/sass/themes/default.sass b/sass/themes/default.sass
index 9de7e762..49044a4f 100644
--- a/sass/themes/default.sass
+++ b/sass/themes/default.sass
@@ -1,7 +1,7 @@
 \:root
   // Initial variables
   --black: #{$black}
-  --black-70: rgba(#000, 0.7)
+  --black-70: rgba(0, 0, 0, 0.7)
   --black-bis: #{$black-bis}
   --black-ter: #{$black-ter}
   --grey-darker: #{$grey-darker}
@@ -75,11 +75,16 @@
   --danger-light: #{$danger-light}
   --danger-dark: #{$danger-dark}
   --light-invert: #{$light-invert}
+  --light-light: #{$light-light}
+  --light-dark: #{$light-dark}
   --dark-invert: #{$dark-invert}
+  --dark-light: #{$dark-light}
+  --dark-dark: #{$dark-dark}
   --scheme-main: #{$scheme-main}
   --scheme-main-bis: #{$scheme-main-bis}
   --scheme-main-ter: #{$scheme-main-ter}
   --scheme-invert: #{$scheme-invert}
+  --scheme-invert-rgb: #{$scheme-invert-rgb}
   --scheme-invert-bis: #{$scheme-invert-bis}
   --scheme-invert-ter: #{$scheme-invert-ter}
   --background: #{$background}
diff --git a/sass/utilities/derived-variables.scss b/sass/utilities/derived-variables.scss
index 0eca6983..9273ab27 100644
--- a/sass/utilities/derived-variables.scss
+++ b/sass/utilities/derived-variables.scss
@@ -22,20 +22,24 @@ $red-invert      : findColorInvert($red) !default;
 $primary-invert  : findColorInvert($primary, $turquoise) !default;
 $primary-light   : findLightColor($primary, $turquoise) !default;
 $primary-dark    : findDarkColor($primary, $turquoise) !default;
-$info-invert     : findColorInvert($info) !default;
-$info-light      : findLightColor($info) !default;
-$info-dark       : findDarkColor($info) !default;
+$info-invert     : findColorInvert($info, $cyan) !default;
+$info-light      : findLightColor($info, $cyan) !default;
+$info-dark       : findDarkColor($info, $cyan) !default;
 $success-invert  : findColorInvert($success, $green) !default;
 $success-light   : findLightColor($success, $green) !default;
 $success-dark    : findDarkColor($success, $green) !default;
-$warning-invert  : findColorInvert($warning) !default;
-$warning-light   : findLightColor($warning) !default;
-$warning-dark    : findDarkColor($warning) !default;
-$danger-invert   : findColorInvert($danger) !default;
-$danger-light    : findLightColor($danger) !default;
-$danger-dark     : findDarkColor($danger) !default;
-$light-invert    : findColorInvert($light) !default;
-$dark-invert     : findColorInvert($dark) !default;
+$warning-invert  : findColorInvert($warning, $yellow) !default;
+$warning-light   : findLightColor($warning, $yellow) !default;
+$warning-dark    : findDarkColor($warning, $yellow) !default;
+$danger-invert   : findColorInvert($danger, $red) !default;
+$danger-light    : findLightColor($danger, $red) !default;
+$danger-dark     : findDarkColor($danger, $red) !default;
+$light-invert    : findColorInvert($light, $white-ter) !default;
+$light-light     : findLightColor($light, $white-ter) !default;
+$light-dark      : findDarkColor($light, $white-ter) !default;
+$dark-invert     : findColorInvert($dark, $grey-darker) !default;
+$dark-light      : findLightColor($dark, $grey-darker) !default;
+$dark-dark       : findDarkColor($dark, $grey-darker) !default;
 
 // General colors
 
@@ -43,6 +47,7 @@ $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-invert-rgb : bulmaToRGB($black) !default;
 $scheme-invert-bis : var(--black-bis, #{$black-bis}) !default;
 $scheme-invert-ter : var(--black-ter, #{$black-ter}) !default;
 
@@ -56,7 +61,7 @@ $border-light-hover: var(--grey-light, #{$grey-light}) !default;
 // Text colors
 
 $text       : var(--grey-dark, #{$grey-dark}) !default;
-$text-invert: findColorInvert($text) !default;
+$text-invert: findColorInvert($text, $grey-dark) !default;
 $text-light : var(--grey, #{$grey}) !default;
 $text-strong: var(--grey-darker, #{$grey-darker}) !default;
 
@@ -71,9 +76,10 @@ $pre-background : var(--background, #{$background}) !default;
 // Link colors
 
 $link              : var(--blue, #{$blue}) !default;
-$link-invert       : findColorInvert($link) !default;
-$link-light        : findLightColor($link) !default;
-$link-dark         : findDarkColor($link) !default;
+$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-hover        : var(--grey-darker, #{$grey-darker}) !default;
diff --git a/sass/utilities/functions.sass b/sass/utilities/functions.sass
index e5182a8c..adc5200c 100644
--- a/sass/utilities/functions.sass
+++ b/sass/utilities/functions.sass
@@ -84,7 +84,7 @@
       @return #fff
   @else if type-of($fallback) == 'color'
     @if (colorLuminance($fallback) > 0.55)
-      @return var(--black-70, rgba(#000, 0.7))
+      @return var(--black-70, rgba(0, 0, 0, 0.7))
     @else
       @return var(--white, #fff)
   @return $color
@@ -117,6 +117,7 @@
   @return $color
 
 @function bulmaRgba($color, $alpha)
+  @debug $color
   @if type-of($color) != 'color'
     @return $color
   @return rgba($color, $alpha)
@@ -130,3 +131,6 @@
   @if type-of($color) != 'color'
     @return $color
   @return lighten($color, $amount)
+
+@function bulmaToRGB($color)
+  @return red($color), green($color), blue($color)