From 3674479673a83594b676d87a2c825408fd7bea17 Mon Sep 17 00:00:00 2001
From: Issermann Hannah <hannah.issermann@orange.com>
Date: Mon, 9 Oct 2023 14:59:16 +0200
Subject: [PATCH] bg not transparent and add css vars for color and bg + rm
 blank line + data-bs-theme on class .tag

---
 scss/_tags.scss                    |  6 ++--
 scss/_variables.scss               |  4 ++-
 site/content/docs/5.3/dark-mode.md | 48 +++++++++++++++---------------
 3 files changed, 31 insertions(+), 27 deletions(-)

diff --git a/scss/_tags.scss b/scss/_tags.scss
index 45fe86e481..642c740274 100644
--- a/scss/_tags.scss
+++ b/scss/_tags.scss
@@ -2,6 +2,8 @@
 
 .tag {
   // scss-docs-start tag-css-vars
+  --#{$prefix}tag-color: #{$tag-color};
+  --#{$prefix}tag-bg: #{$tag-bg};
   --#{$prefix}tag-gap: #{$tag-gap};
   --#{$prefix}tag-padding-x: #{$tag-padding-x};
   --#{$prefix}tag-padding-y: #{$tag-padding-y};
@@ -28,8 +30,8 @@
   @include font-size(var(--#{$prefix}tag-font-size));
   font-weight: var(--#{$prefix}tag-font-weight);
   line-height: add(var(--#{$prefix}tag-font-size), .125rem);
-  color: var(--#{$prefix}body-color);
-  background-color: transparent;
+  color: var(--#{$prefix}tag-color);
+  background-color: var(--#{$prefix}tag-bg);
   border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color);
   @include border-radius(var(--#{$prefix}tag-border-radius), var(--#{$prefix}tag-border-radius));
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 95f0f85283..e1074aa953 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -2325,6 +2325,9 @@ $footer-gap-xl:                           $spacer * 1.7 !default;
 // Tags
 
 // scss-docs-start tag-variables
+$tag-color:                         var(--#{$prefix}body-color) !default;
+$tag-bg:                            var(--#{$prefix}body-bg) !default;
+
 $tag-gap:                           map-get($spacers, 1) !default;
 $tag-font-shift:                    $spacer * .1 !default;
 $tag-font-weight:                   $font-weight-bold !default;
@@ -2343,7 +2346,6 @@ $tag-active-color:                  var(--#{$prefix}highlight-color) !default;
 $tag-disabled-color:                var(--#{$prefix}disabled-color) !default;
 $tag-border-color:                  var(--#{$prefix}border-color-translucent) !default;
 $tag-active-decoration-color:       var(--#{$prefix}highlight-bg) !default;
-
 // scss-docs-end tag-variables
 
 // scss-docs-start tag-sm-variables
diff --git a/site/content/docs/5.3/dark-mode.md b/site/content/docs/5.3/dark-mode.md
index a51b1a02c4..cf0abfaf6e 100644
--- a/site/content/docs/5.3/dark-mode.md
+++ b/site/content/docs/5.3/dark-mode.md
@@ -672,7 +672,7 @@ Additional variables for dark-mode (temporary)
     </li>
     <li><span class="tag tag-sm" id="labelTag21">
       <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
-        <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
       </svg>
       Dismissible tag
       <button class="close" aria-labelledby="labelTag21"><span class="visually-hidden">Close</span></button>
@@ -680,7 +680,7 @@ Additional variables for dark-mode (temporary)
     <li>
       <p><span class="tag disabled" id="labelTag51" aria-disabled="true">
         <svg fill="currentColor" width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
-          <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
+          <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
         </svg>
         Input
         <button class="close" aria-labelledby="labelTag51" disabled><span class="visually-hidden">Close</span></button>
@@ -715,7 +715,7 @@ Additional variables for dark-mode (temporary)
     </li>
     <li><span class="tag tag-sm" id="labelTag22">
       <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
-        <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
       </svg>
       Dismissible tag
       <button class="close" aria-labelledby="labelTag22"><span class="visually-hidden">Close</span></button>
@@ -723,7 +723,7 @@ Additional variables for dark-mode (temporary)
     <li>
       <p><span class="tag disabled" id="labelTag52" aria-disabled="true">
         <svg fill="currentColor" width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
-          <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
+          <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
         </svg>
         Input
         <button class="close" aria-labelledby="labelTag52" disabled><span class="visually-hidden">Close</span></button>
@@ -758,7 +758,7 @@ Additional variables for dark-mode (temporary)
     </li>
     <li><span class="tag tag-sm" id="labelTag23">
       <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
-        <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
       </svg>
       Dismissible tag
       <button class="close" aria-labelledby="labelTag23"><span class="visually-hidden">Close</span></button>
@@ -766,7 +766,7 @@ Additional variables for dark-mode (temporary)
     <li>
       <p><span class="tag disabled" id="labelTag53" aria-disabled="true">
         <svg fill="currentColor" width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
-          <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
+          <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
         </svg>
         Input
         <button class="close" aria-labelledby="labelTag53" disabled><span class="visually-hidden">Close</span></button>
@@ -778,38 +778,38 @@ Additional variables for dark-mode (temporary)
 <h4 class="mt-3">Dark theme on component</h4>
 
 <div class="border border-tertiary p-3" style="background-color: #282d55">
-  <ul class="list-unstyled d-flex gap-2 flex-wrap m-0" data-bs-theme="dark">
+  <ul class="list-unstyled d-flex gap-2 flex-wrap m-0">
     <li>
       <input type="checkbox" class="btn-check" id="btncheck-mobile4" autocomplete="off">
-      <label class="tag" for="btncheck-mobile4"><span class="visually-hidden">Filter by</span>Mobile</label>
+      <label class="tag" for="btncheck-mobile4" data-bs-theme="dark"><span class="visually-hidden">Filter by</span>Mobile</label>
     </li>
     <li>
       <input type="checkbox" class="btn-check" id="btncheck-tv4" autocomplete="off" checked>
-      <label class="tag" for="btncheck-tv4">
+      <label class="tag" for="btncheck-tv4" data-bs-theme="dark">
         <svg width="1.5rem" height="1.5rem" viewBox="0 0 1000 1000" aria-hidden="true" focusable="false">
           <path fill="currentColor" d="M75,200V720H225v80H775V720H925V200H75ZM500,755a30,30,0,1,1,30-30A30,30,0,0,1,500,755Zm365-95H135V260H865V660Z"></path>
         </svg>
         <span class="visually-hidden">Filter by</span>TV
       </label>
     </li>
-    <li><a class="tag" href="#">1. Introduction</a></li>
+    <li><a class="tag" href="#" data-bs-theme="dark">1. Introduction</a></li>
     <li>
-      <span class="tag" id="labelTag14">
+      <span class="tag" id="labelTag14" data-bs-theme="dark">
         Dismissible tag
         <button class="close" aria-labelledby="labelTag14"><span class="visually-hidden">Close</span></button>
       </span>
     </li>
-    <li><span class="tag tag-sm" id="labelTag24">
+    <li><span class="tag tag-sm" id="labelTag24" data-bs-theme="dark">
       <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
-        <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
       </svg>
       Dismissible tag
       <button class="close" aria-labelledby="labelTag24"><span class="visually-hidden">Close</span></button>
     </span></li>
     <li>
-      <p><span class="tag disabled" id="labelTag54" aria-disabled="true">
+      <p><span class="tag disabled" id="labelTag54" aria-disabled="true" data-bs-theme="dark">
         <svg fill="currentColor" width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
-          <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
+          <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
         </svg>
         Input
         <button class="close" aria-labelledby="labelTag54" disabled><span class="visually-hidden">Close</span></button>
@@ -821,38 +821,38 @@ Additional variables for dark-mode (temporary)
 <h4 class="mt-3">Light theme on component</h4>
 
 <div class="border border-tertiary p-3" style="background-color: #b5e8f7">
-  <ul class="list-unstyled d-flex gap-2 flex-wrap m-0" data-bs-theme="light">
+  <ul class="list-unstyled d-flex gap-2 flex-wrap m-0">
     <li>
       <input type="checkbox" class="btn-check" id="btncheck-mobile5" autocomplete="off">
-      <label class="tag" for="btncheck-mobile4"><span class="visually-hidden">Filter by</span>Mobile</label>
+      <label class="tag" for="btncheck-mobile5" data-bs-theme="light"><span class="visually-hidden">Filter by</span>Mobile</label>
     </li>
     <li>
       <input type="checkbox" class="btn-check" id="btncheck-tv5" autocomplete="off" checked>
-      <label class="tag" for="btncheck-tv4">
+      <label class="tag" for="btncheck-tv5" data-bs-theme="light">
         <svg width="1.5rem" height="1.5rem" viewBox="0 0 1000 1000" aria-hidden="true" focusable="false">
           <path fill="currentColor" d="M75,200V720H225v80H775V720H925V200H75ZM500,755a30,30,0,1,1,30-30A30,30,0,0,1,500,755Zm365-95H135V260H865V660Z"></path>
         </svg>
         <span class="visually-hidden">Filter by</span>TV
       </label>
     </li>
-    <li><a class="tag" href="#">1. Introduction</a></li>
+    <li><a class="tag" href="#" data-bs-theme="light">1. Introduction</a></li>
     <li>
-      <span class="tag" id="labelTag15">
+      <span class="tag" id="labelTag15" data-bs-theme="light">
         Dismissible tag
         <button class="close" aria-labelledby="labelTag15"><span class="visually-hidden">Close</span></button>
       </span>
     </li>
-    <li><span class="tag tag-sm" id="labelTag25">
+    <li><span class="tag tag-sm" id="labelTag25" data-bs-theme="light">
       <svg width="1rem" height="1rem" fill="currentColor" aria-hidden="true" focusable="false">
-        <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
+        <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
       </svg>
       Dismissible tag
       <button class="close" aria-labelledby="labelTag25"><span class="visually-hidden">Close</span></button>
     </span></li>
     <li>
-      <p><span class="tag disabled" id="labelTag55" aria-disabled="true">
+      <p><span class="tag disabled" id="labelTag55" aria-disabled="true" data-bs-theme="light">
         <svg fill="currentColor" width="1.5rem" height="1.5rem" aria-hidden="true" focusable="false">
-          <use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#buy"/>
+          <use xlink:href="/docs/{{< param docs_version >}}/assets/img/boosted-sprite.svg#buy"/>
         </svg>
         Input
         <button class="close" aria-labelledby="labelTag55" disabled><span class="visually-hidden">Close</span></button>