From 9fe09e89f7b1e8ed45dfa48215dd2c32c41ab5fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABl=20Poupard?= <gael+github@ffoodd.fr>
Date: Tue, 7 Dec 2021 11:09:24 +0100
Subject: [PATCH] feat(CSS vars)[WIP]: using fallback values insteead of
 explicit declarations

---
 scss/_popover.scss | 32 ++++++++++++++++----------------
 scss/_tooltip.scss | 28 ++++++++++++++--------------
 2 files changed, 30 insertions(+), 30 deletions(-)

diff --git a/scss/_popover.scss b/scss/_popover.scss
index b4453e9b2..d77628b5c 100644
--- a/scss/_popover.scss
+++ b/scss/_popover.scss
@@ -2,19 +2,19 @@
 
 .popover {
   // scss-docs-start popover-css-vars
-  --#{$variable-prefix}popover-zindex: #{$zindex-popover};
-  --#{$variable-prefix}popover-max-width: #{$popover-max-width};
+  // --#{$variable-prefix}popover-zindex: #{$zindex-popover};
+  // --#{$variable-prefix}popover-max-width: #{$popover-max-width};
   @include rfs($popover-font-size, --#{$variable-prefix}popover-font-size);
   --#{$variable-prefix}popover-bg: #{$popover-bg};
   --#{$variable-prefix}popover-border-width: #{$popover-border-width};
   --#{$variable-prefix}popover-border-color: #{$popover-border-color};
-  --#{$variable-prefix}popover-border-radius: #{$popover-border-radius};
-  --#{$variable-prefix}popover-box-shadow: #{$popover-box-shadow};
-  --#{$variable-prefix}popover-header-padding: #{$popover-header-padding-y $popover-header-padding-x};
-  --#{$variable-prefix}popover-header-color: #{$popover-header-color};
+  // --#{$variable-prefix}popover-border-radius: #{$popover-border-radius};
+  // --#{$variable-prefix}popover-box-shadow: #{$popover-box-shadow}; // Unused?
+  // --#{$variable-prefix}popover-header-padding: #{$popover-header-padding-y $popover-header-padding-x};
+  // --#{$variable-prefix}popover-header-color: #{$popover-header-color};
   --#{$variable-prefix}popover-header-bg: #{$popover-header-bg};
-  --#{$variable-prefix}popover-body-padding: #{$popover-body-padding-y $popover-body-padding-x};
-  --#{$variable-prefix}popover-body-color: #{$popover-body-color};
+  // --#{$variable-prefix}popover-body-padding: #{$popover-body-padding-y $popover-body-padding-x};
+  // --#{$variable-prefix}popover-body-color: #{$popover-body-color};
   --#{$variable-prefix}popover-arrow-width: #{$popover-arrow-width};
   --#{$variable-prefix}popover-arrow-height: #{$popover-arrow-height};
   --#{$variable-prefix}popover-arrow-border: var(--#{$variable-prefix}popover-border-color);
@@ -23,9 +23,9 @@
   position: absolute;
   top: 0;
   left: 0 #{"/* rtl:ignore */"};
-  z-index: var(--#{$variable-prefix}popover-zindex);
+  z-index: var(--#{$variable-prefix}popover-zindex, #{$zindex-popover});
   display: block;
-  max-width: var(--#{$variable-prefix}popover-max-width);
+  max-width: var(--#{$variable-prefix}popover-max-width, #{$popover-max-width});
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
@@ -35,8 +35,8 @@
   background-color: var(--#{$variable-prefix}popover-bg);
   background-clip: padding-box;
   border: var(--#{$variable-prefix}popover-border-width) solid var(--#{$variable-prefix}popover-border-color);
-  // border-radius: var(--#{$variable-prefix}popover-border-radius);
-  @include border-radius(var(--#{$variable-prefix}popover-border-radius));
+  // border-radius: var(--#{$variable-prefix}popover-border-radius, #{$popover-border-radius});
+  @include border-radius(var(--#{$variable-prefix}popover-border-radius, #{$popover-border-radius}));
   @include box-shadow(var(--#{$variable-prefix}popover-bg));
 
   .popover-arrow {
@@ -171,10 +171,10 @@
 
 // Offset the popover to account for the popover arrow
 .popover-header {
-  padding: var(--#{$variable-prefix}popover-header-padding);
+  padding: var(--#{$variable-prefix}popover-header-padding, #{$popover-header-padding-y $popover-header-padding-x});
   margin-bottom: 0; // Reset the default from Reboot
   @include font-size($font-size-base);
-  color: var(--#{$variable-prefix}popover-header-color);
+  color: var(--#{$variable-prefix}popover-header-color), #{$popover-header-color};
   background-color: var(--#{$variable-prefix}popover-header-bg);
   border-bottom: var(--#{$variable-prefix}popover-border-width) solid var(--#{$variable-prefix}popover-border-color);
   @include border-top-radius($popover-inner-border-radius);
@@ -185,6 +185,6 @@
 }
 
 .popover-body {
-  padding: var(--#{$variable-prefix}popover-body-padding);
-  color: var(--#{$variable-prefix}popover-body-color);
+  padding: var(--#{$variable-prefix}popover-body-padding, #{$popover-body-padding-y $popover-body-padding-x});
+  color: var(--#{$variable-prefix}popover-body-color, #{$popover-body-color});
 }
diff --git a/scss/_tooltip.scss b/scss/_tooltip.scss
index bcae2eb00..872818605 100644
--- a/scss/_tooltip.scss
+++ b/scss/_tooltip.scss
@@ -3,23 +3,23 @@
 // Base class
 .tooltip {
   // scss-docs-start tooltip-css-vars
-  --#{$variable-prefix}tooltip-zindex: #{$zindex-tooltip};
-  --#{$variable-prefix}tooltip-max-width: #{$tooltip-max-width};
-  --#{$variable-prefix}tooltip-padding: #{$tooltip-padding-y} #{$tooltip-padding-x};
-  --#{$variable-prefix}tooltip-margin: #{$tooltip-margin};
+  // --#{$variable-prefix}tooltip-zindex: #{$zindex-tooltip};
+  // --#{$variable-prefix}tooltip-max-width: #{$tooltip-max-width};
+  // --#{$variable-prefix}tooltip-padding: #{$tooltip-padding-y} #{$tooltip-padding-x};
+  // --#{$variable-prefix}tooltip-margin: #{$tooltip-margin};
   @include rfs($tooltip-font-size, --#{$variable-prefix}tooltip-font-size);
-  --#{$variable-prefix}tooltip-color: #{$tooltip-color};
+  // --#{$variable-prefix}tooltip-color: #{$tooltip-color};
   --#{$variable-prefix}tooltip-bg: #{$tooltip-bg};
-  --#{$variable-prefix}tooltip-border-radius: #{$tooltip-border-radius};
-  --#{$variable-prefix}tooltip-opacity: #{$tooltip-opacity};
+  // --#{$variable-prefix}tooltip-border-radius: #{$tooltip-border-radius};
+  // --#{$variable-prefix}tooltip-opacity: #{$tooltip-opacity};
   --#{$variable-prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
   --#{$variable-prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
   // scss-docs-end tooltip-css-vars
 
   position: absolute;
-  z-index: var(--#{$variable-prefix}tooltip-zindex);
+  z-index: var(--#{$variable-prefix}tooltip-zindex, #{$zindex-tooltip});
   display: block;
-  margin: var(--#{$variable-prefix}tooltip-margin);
+  margin: var(--#{$variable-prefix}tooltip-margin, #{$tooltip-margin});
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
@@ -28,7 +28,7 @@
   word-wrap: break-word;
   opacity: 0;
 
-  &.show { opacity: var(--#{$variable-prefix}tooltip-opacity); }
+  &.show { opacity: var(--#{$variable-prefix}tooltip-opacity, #{$tooltip-opacity}); }
 
   .tooltip-arrow {
     position: absolute;
@@ -122,10 +122,10 @@
 
 // Wrapper for the tooltip content
 .tooltip-inner {
-  max-width: var(--#{$variable-prefix}tooltip-max-width);
-  padding: var(--#{$variable-prefix}tooltip-padding);
-  color: var(--#{$variable-prefix}tooltip-color);
+  max-width: var(--#{$variable-prefix}tooltip-max-width, #{$tooltip-max-width});
+  padding: var(--#{$variable-prefix}tooltip-padding, #{$tooltip-padding-y} #{$tooltip-padding-x});
+  color: var(--#{$variable-prefix}tooltip-color, #{$tooltip-color});
   text-align: center;
   background-color: var(--#{$variable-prefix}tooltip-bg);
-  border-radius: var(--#{$variable-prefix}tooltip-border-radius, 0); // stylelint-disable-line property-disallowed-list
+  border-radius: var(--#{$variable-prefix}tooltip-border-radius, #{$tooltip-border-radius}); // stylelint-disable-line property-disallowed-list
 }