From be98a873c7426e84d5cc4d989bd33ef432901cf3 Mon Sep 17 00:00:00 2001
From: 12rambau <pierrick.rambaud49@gmail.com>
Date: Tue, 10 May 2022 08:54:39 +0000
Subject: [PATCH] use a function to create rgba colors

---
 .../assets/styles/abstracts/_functions.scss         | 13 +++++++++++++
 .../assets/styles/content/_spans.scss               |  5 +++--
 src/pydata_sphinx_theme/assets/styles/index.scss    |  3 +++
 3 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 src/pydata_sphinx_theme/assets/styles/abstracts/_functions.scss

diff --git a/src/pydata_sphinx_theme/assets/styles/abstracts/_functions.scss b/src/pydata_sphinx_theme/assets/styles/abstracts/_functions.scss
new file mode 100644
index 0000000000..eab0993862
--- /dev/null
+++ b/src/pydata_sphinx_theme/assets/styles/abstracts/_functions.scss
@@ -0,0 +1,13 @@
+/*********************************************
+* SASS Functions
+*********************************************/
+
+/********************************************
+ * generate rgba colors from the rgb defined variables
+ */
+@function colorAlpha($color, $opacity) {
+  $red: red($color);
+  $green: green($color);
+  $blue: blue($color);
+  @return rgba($red, $green, $blue, $opacity);
+}
diff --git a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
index 82a6d2a129..98c7e33315 100644
--- a/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
+++ b/src/pydata_sphinx_theme/assets/styles/content/_spans.scss
@@ -4,6 +4,7 @@
 
 span.guilabel {
   border: 1px solid var(--pst-color-info);
+  background-color: colorAlpha(var(--pst-color-info), 0.1);
   color: var(--pst-color-info);
   font-size: 80%;
   font-weight: 700;
@@ -14,7 +15,7 @@ span.guilabel {
 
   // This is a hack to control the opacity for admonitions with our color variables
   // ref: https://stackoverflow.com/a/56951626/6734243
-  &:before {
+  /*&:before {
     content: "";
     width: 100%;
     height: 100%;
@@ -23,5 +24,5 @@ span.guilabel {
     top: 0;
     background-color: var(--pst-color-info);
     opacity: 0.1;
-  }
+  }*/
 }
diff --git a/src/pydata_sphinx_theme/assets/styles/index.scss b/src/pydata_sphinx_theme/assets/styles/index.scss
index 36b5eeffed..cb257627bb 100644
--- a/src/pydata_sphinx_theme/assets/styles/index.scss
+++ b/src/pydata_sphinx_theme/assets/styles/index.scss
@@ -18,6 +18,9 @@ $grid-breakpoints: (
 );
 @import "~bootstrap/scss/bootstrap";
 
+// Variables and re-usable SCSS functions
+@import "abstracts/functions";
+
 // Basic styling applied throughout site
 @import "./base/base";
 @import "./base/color";