Gracefully handle themes/color modes in design system

[maxatdetroit]

Is your feature request related to a problem? Please describe.

When we want to nest our design system web components, the parent component colors (background, border, icons, etc.) do not take effect on child components. This forces the user of the design system to explicitly style the child component to match and contrast the parent component.

See CityOfDetroit/detroitmi#1167 as an example where a workaround is needed to make a button standout when nested within a card.

Describe the solution you'd like

Implement themes (i.e. color modes) for various styles of components. Themes / color modes override CSS variables (background, border, icons, etc.) to encapsulate colors that are consistent with one another. These variables bleed through the shadow DOM so they will also take effect on child components.

Work necessary to properly support themes / color modes in design system:

• Customize bootstrap to include custom color modes for the city design system. Options to implement: light (white as primary color), dark (city green as primary color), highlight (accent yellow as primary color).
• Update complex components to support setting themes. E.g., see Fix dark navbar theming #124 where setting a single theme can replace usage of various classes to colorize the navbars.
• Remove custom attributes on complex components (e.g. data-background-color) currently used to colorize components. If users of the components would like to override specific colors (like background) they can use data-extra-classes and typical bootstrap classes to set those.

Describe alternatives you've considered

Alternatives considered:

1. Allow the user of the design-system to explicitly set the borders in these scenarios. Cons: the user may forget, it takes more effort to use the components.
2. Parent components communicate their background color to child components via Javascript, then child component styling is responsible for setting the sensible default colors (borders, background, text). Cons: implementation via Javascript is less desirable than implementation purely via stylesheets per Bootstrap approach.

Pseudocode example:

btnStyles = `
.btn.parent-bg-primary {
  --bs-btn-border-color: $light;
}
`;

class Button extends HTMLElement {
  constructor() {
    ...
    this.shadowDOM.appendChild(btnStyles);
  }

  connectedCallback() {...}

  setParentBackground(parentBackgroundClass) {
    this.btn.classList.add(parentBackgroundClass);
  }
}

class BoxWithButton extends HTMLElement {
  constructor() {...}

  connectedCallback() {
    const bgColor = this.getAttribute('data-bg');
    shadow.addEventListener('slotchange', () => {
      const tempElements = Array.from(this.children);
      tempElements.forEach((node) => {
        node.setParentBackground('parent-bg-' + bgColor);
        this.box.appendChild(node);
    }
  }

  setParentBackground(parentBackgroundClass) {
    this.btn.classList.add(parentBackgroundClass);
  }
}

Additional context
Add any other context or screenshots about the feature request here.

[maxatdetroit]

This is replaced by #198