Allow color selection for list items

src/components/atoms/AccordionHeader/AccordionHeader.css

@@ -1,8 +1,6 @@
 .li-num-box {
   /* TODO: Dynamically update list numbers to match accordion
     header text styles */
-  background: var(--color-1);
-  color: var(--color-light);
   width: 3rem;
   height: 3rem;
   display: flex;

src/components/atoms/AccordionHeader/AccordionHeader.js

@@ -82,10 +82,11 @@ export default class AccordionHeader extends HTMLElement {
     }
   }
 
-  addListNumber(index) {
+  addListNumber(index, extraClasses) {
     const numberBox = document.createElement('div');
     numberBox.innerText = `${index + 1}`;
-    numberBox.className = ['li-num-box'];
+    extraClasses.push('li-num-box');
+    numberBox.className = extraClasses.join(' ');
     this.accordionBtn.prepend(numberBox);
   }
 }

src/components/atoms/AccordionItem/AccordionItem.js

@@ -37,13 +37,14 @@ export default class AccordionItem extends HTMLElement {
         if (node.tagName == 'COD-ACCORDION-HEADER') {
           if (this.getAttribute('data-li') !== null) {
             node.setAttribute('data-li', '');
-            node.addListNumber(Number(this.getAttribute('data-index')));
+            const extraClasses = this.getHeaderListItemClasses();
+            node.addListNumber(
+              Number(this.getAttribute('data-index')),
+              extraClasses,
+            );
           }
           this.accordionHeader.append(node);
         } else {
-          if (this.getAttribute('data-li') !== null) {
-            node.setAttribute('data-li', '');
-          }
           this.accordionBody.append(node);
         }
       });
@@ -83,17 +84,14 @@ export default class AccordionItem extends HTMLElement {
     let parentID = this.getAttribute('data-parent-id');
     let index = this.getAttribute('data-index');
     let expanded = this.getAttribute('data-expanded');
-    let headerExtraClasses = this.getAttribute('data-header-extra-classes');
-    let bodyExtraClasses = this.getAttribute('data-body-extra-classes');
     let accordionHeaderClasses = ['accordion-header'];
     let accordionBodyClasses = ['accordion-collapse collapse'];
     expanded == 'true' ? accordionBodyClasses.push('show') : 0;
-    headerExtraClasses != undefined && headerExtraClasses != null
-      ? accordionHeaderClasses.push(headerExtraClasses)
-      : 0;
-    bodyExtraClasses != undefined && bodyExtraClasses != null
-      ? accordionBodyClasses.push(bodyExtraClasses)
-      : 0;
+    if (this.getAttribute('data-li') !== null) {
+      accordionBodyClasses = accordionBodyClasses.concat(
+        this.getBodyListItemClasses(),
+      );
+    }
     this.accordionBody.id = `${parentID}-${index}`;
     this.accordionHeader.className = accordionHeaderClasses.join(' ');
     this.accordionBody.className = accordionBodyClasses.join(' ');
@@ -113,6 +111,27 @@ export default class AccordionItem extends HTMLElement {
     this.removeEventListener('click', this._onClick.bind(this));
   }
 
+  getListItemBackgroundColor() {
+    const customColor = this.getAttribute('data-li-bg');
+    return customColor !== null ? customColor : 'primary';
+  }
+
+  getListItemTextColor() {
+    const customColor = this.getAttribute('data-li-text');
+    return customColor !== null ? customColor : 'light';
+  }
+
+  getHeaderListItemClasses() {
+    const bgColor = this.getListItemBackgroundColor();
+    const textColor = this.getListItemTextColor();
+    return ['li-bg-' + bgColor, 'text-' + textColor];
+  }
+
+  getBodyListItemClasses() {
+    const bgColor = this.getListItemBackgroundColor();
+    return ['border-start', 'border-' + bgColor];
+  }
+
   _onClick(e) {
     if (e.target.getAttribute('data-expanded') == 'true') {
       this.getRootNode().host.setAttribute('data-expanded', 'false');

src/scss/_host.scss

@@ -1,3 +1,5 @@
+// Redefine the root bootstrap SASS so it's attached to the
+// Shadow DOM root (using :host), instead of the DOM root.
 :host,
 [data-bs-theme='light'] {
   // Note: Custom variable values only support SassScript inside `#{}`.

src/scss/themed-bootstrap.scss

@@ -1,5 +1,3 @@
-// Custom.scss
-// Option A: Include all of Bootstrap
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700&display=swap');
 $primary: #004445 !default;
 $secondary: #e6e6e6 !default;
@@ -12,7 +10,53 @@ $dark: #000 !default;
 $font-family-sans-serif: 'Montserrat', sans-serif;
 $font-family-monospace: 'Montserrat', sans-serif;
 
+@import '../../node_modules/bootstrap/scss/functions';
+@import '../../node_modules/bootstrap/scss/variables';
+@import '../../node_modules/bootstrap/scss/variables-dark';
+@import '../../node_modules/bootstrap/scss/maps';
+@import '../../node_modules/bootstrap/scss/mixins';
+@import '../../node_modules/bootstrap/scss/utilities';
+
+// See: https://getbootstrap.com/docs/5.0/utilities/api/
+$utilities: map-merge(
+  $utilities,
+  (
+    // Create specific bg classes for stylized list items.
+    'li-background-color':
+      (
+        property: background-color,
+        class: li-bg,
+        local-vars: (
+          'bg-opacity': 1,
+        ),
+        values:
+          map-merge(
+            $utilities-bg-colors,
+            (
+              'transparent': transparent,
+              'body-secondary':
+                rgba(
+                  var(--#{$prefix}secondary-bg-rgb),
+                  var(--#{$prefix}bg-opacity)
+                ),
+              'body-tertiary':
+                rgba(
+                  var(--#{$prefix}tertiary-bg-rgb),
+                  var(--#{$prefix}bg-opacity)
+                ),
+            )
+          ),
+      ),
+    // Create specific subtle bg classes for stylized list items.
+    'li-subtle-background-color':
+      (
+        property: background-color,
+        class: li-bg,
+        values: $utilities-bg-subtle,
+      )
+  )
+);
+
 @import '../../node_modules/bootstrap/scss/bootstrap';
+// Override bootstrap _root.scss.
 @import './host';
-
-// Then add additional custom code here

src/stories/accordion.stories.js

@@ -221,7 +221,7 @@ export const List = () => html`
         </p>
       </cod-accordion-body>
     </cod-accordion-item>
-    <cod-accordion-item>
+    <cod-accordion-item data-li-bg="success" data-li-text="dark">
       <cod-accordion-header>
         <span>Accordion Item</span>
       </cod-accordion-header>
@@ -238,7 +238,7 @@ export const List = () => html`
         </p>
       </cod-accordion-body>
     </cod-accordion-item>
-    <cod-accordion-item>
+    <cod-accordion-item data-li-bg="warning" data-li-text="dark">
       <cod-accordion-header>
         <span>Accordion Item</span>
       </cod-accordion-header>