Polyfill / Addon for overriding colors through CSS variables

[justin-oh]

This is a work in progress. I don't know enough about color theory to manipulate the -bs-primary-lighten-* and -bs-primary-darken-* in order to mimic what happens in Bootstrap when a color is tinted/shaded.

I started this based on finding the word "primary" in https://github.com/twbs/bootstrap/blob/main/dist/css/bootstrap.css. All other classes including the word "primary" would need to be reviewed but for the most part, they all seem to already utilize CSS variables. "light" and "dark" are outliers and likely could be excluded from this.

The goal is to create something that makes it easier to override the Bootstrap colors when not compiling from Sass. Obviously this implementation is using Sass, but it could be compiled and the raw CSS copied for a pure CSS implementation.

@mixin color-variables($color, $value) {
  $color-prefix: #{$prefix}#{$color};

  :root {
    // Attempting to reduce the minimum number of variables to override.
    // So far, only these 3 would absolutely need to be overridden
    --#{$color-prefix}: #{$value};
    --#{$color-prefix}-contrast: #{color-contrast($value)};
    --#{$color-prefix}-rgb: #{map-get($theme-colors-rgb, $color)};

    // Lighten and Darken

    // Creates variables -bs-primary-lighten-5 through -bs-primary-lighten-95,
    // and -bs-primary-darken-5 through -bs-primary-darken-95.
    // More robust/readable than -bs-primary-100 through -bs-primary-900
    @for $i from 1 to 20 {
      $l: $i * 0.05;
      $suffix: $l * 100;
      --#{$color-prefix}-lighten-#{$suffix}: hwb(
        from var(--#{$color-prefix}) h calc(w / #{1 - $l}) b
      );
      --#{$color-prefix}-darken-#{$suffix}: hwb(
        from var(--#{$color-prefix}) h w calc(b / #{1 - $l})
      );
    }

    // override existing root variables so they reference back to the minimal overrides
    --#{$color-prefix}-text-emphasis: var(--#{$color-prefix}-lighten-20);
    --#{$color-prefix}-bg-subtle: var(--#{$color-prefix}-darken-40);
    --#{$color-prefix}-border-subtle: var(--#{$color-prefix}-darken-20);
  }

  // override button styles
  .btn-#{$color} {
    --bs-btn-color: var(--#{$color-prefix}-contrast);
    --bs-btn-bg: var(--#{$color-prefix});
    --bs-btn-border-color: var(--#{$color-prefix});
    --bs-btn-hover-color: var(--#{$color-prefix}-contrast);
    --bs-btn-hover-bg: var(--#{$color-prefix}-darken-10);
    --bs-btn-hover-border-color: var(--#{$color-prefix}-darken-20);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: var(--#{$color-prefix}-contrast);
    --bs-btn-active-bg: var(--#{$color-prefix}-darken-20);
    --bs-btn-active-border-color: var(--#{$color-prefix}-darken-25);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--#{$color-prefix}-contrast);
    --bs-btn-disabled-bg: var(--#{$color-prefix});
    --bs-btn-disabled-border-color: var(--#{$color-prefix});
  }

  .btn-#{$color}-outline {
    // ...
  }

  // override table styles
  .table-#{$color} {
    // ...
  }
}

@each $color, $value in $theme-colors {
  @include color-variables($color, $value);
}

Certain variables under the table styles would be overridden using the new -lighten-* variables. Since the background color of a table style is being lightened drastically, the font color could remain black and not have to be based off of the color pallete.

Some sensible dark mode defaults would be nice for each color. Or perhaps it would be up to the developer to simply do this:

[data-bs-theme=dark] {
    --bs-primary: lightblue;
    --bs-primary-contrast: black;
    --bs-primary-rgb: 173, 216, 230;
}

Again I don't know enough about color theory to get too deep into color manipulation for dark mode.

[felixKessler]

Looks like a good approach to me! Currently the btn-/color/ classes don't respect their respective color-variables which is a known issue.
I tried something similar where I pass a reference to the variable (--bs-primary) instead of the interpreted hex-code so I can calculate the lighter/darker nuances in realtime by using a relative-HSL-format.

It looks like this on the rendered page:

The biggest challenge in this approach is color-contrast. I don't think you can calculate that in realtime with native CSS right now so we need a preprocessor, or Javasript, or have the developer manually set a contrast-color.

I hope some variant of this makes it into Bootstrap 6 :)