carousel: light-dark variants

vanda · Feb 21, 2025 · 175cb57 · 175cb57
1 parent 5aafcaf
commit 175cb57
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 9 deletions.
diff --git a/src/components/blocks/carousel/carousel.config.js b/src/components/blocks/carousel/carousel.config.js
@@ -5,6 +5,14 @@ module.exports = {
     previewClass: 'fr-content-wrapper',
   },
   variants: [
+    {
+      name: 'On Dark',
+      label: 'On Dark',
+      context: {
+        previewClass: 'fr-content-wrapper fr-bg--dark',
+        lightDarkTheme: 'light-dark-theme--dark'
+      }
+    },
     {
       name: 'Unclipped',
       label: 'Unclipped',

diff --git a/src/components/blocks/carousel/carousel.html b/src/components/blocks/carousel/carousel.html
@@ -1,4 +1,4 @@
-<div class="b-carousel {% for m in modifiers %}b-carousel--{{ m }}{% endfor %}" data-tracking-id="Example Carousel">
+<div class="b-carousel {% for m in modifiers %}b-carousel--{{ m }}{% endfor %} {% if lightDarkTheme %}{{ lightDarkTheme }}{% endif %}" data-tracking-id="Example Carousel">
   <div class="b-carousel__viewport">
     <div class="b-carousel__list">
       {% for n in [1, 2, 3, 4] %}
@@ -14,7 +14,7 @@
   </div>
 
   <div class="b-carousel__ctrls">
-    <button class="js-carousel__ctrl--prev u-btn-icon u-btn-icon--light u-btn-icon--point-left" disabled title="Previous">Previous</button>
-    <button class="js-carousel__ctrl--next u-btn-icon u-btn-icon--light u-btn-icon--point-right" title="Next">Next</button>
+    <button class="js-carousel__ctrl--prev u-btn-icon u-btn-icon--point-left" disabled title="Previous">Previous</button>
+    <button class="js-carousel__ctrl--next u-btn-icon u-btn-icon--point-right" title="Next">Next</button>
   </div>
 </div>
diff --git a/src/components/units/button-icon/_button-icon.scss b/src/components/units/button-icon/_button-icon.scss
@@ -19,7 +19,8 @@
     --btn-size: 32px;
   }
 
-  .lightdark-theme--light {
+  // react to any light-dark-theme modifying class on a parent element
+  .light-dark-theme--dark {
     --btn-bg: var(--btn-light-bg);
     --btn-color: var(--btn-light-color);
     --btn-border: var(--btn-light-border);

diff --git a/src/components/units/button-icon/button-icon.config.js b/src/components/units/button-icon/button-icon.config.js
@@ -1,7 +1,6 @@
 module.exports = {
   title: 'Icon Buttons',
   context: {
-    previewClass: 'fr-bg--dark',
     label: 'Button label',
     icons: [
       'close',
@@ -13,10 +12,11 @@ module.exports = {
   },
   variants: [
     {
-      name: 'light',
-      label: 'Light',
+      name: 'On Dark',
+      label: 'On Dark',
       context: {
-        modifiers: ['light']
+        previewClass: 'fr-bg--dark',
+        lightDarkTheme: 'light-dark-theme--dark'
       }
     },
     {

diff --git a/src/components/units/button-icon/button-icon.html b/src/components/units/button-icon/button-icon.html
@@ -3,7 +3,7 @@
 <div class="fr-button-icon">
 
   {% for icon in icons %}
-  <button class="u-btn-icon{% for m in modifiers %} u-btn-icon--{{ m }}{% endfor %} u-btn-icon--{{ icon }}" title="{{ label }}">
+  <button class="u-btn-icon{% for m in modifiers %} u-btn-icon--{{ m }}{% endfor %} u-btn-icon--{{ icon }} {% if lightDarkTheme %}{{ lightDarkTheme }}{% endif %}" title="{{ label }}">
     {{ label }}
   </button>
   {% endfor %}