Colors and Themes

[scottdorman]

The improved support for colors (and color modes, background colors, and themes) in BS6 is great, but it raises a few questions.

The docs (and the SCSS/CSS) support CSS variables like --accent-base, which is great, but very few things seem to actually build on that variable.

For example, if we just look at the accent variables, we have this:

--bs-accent-base: var(--bs-indigo-500);
--bs-accent-fg: light-dark(var(--bs-indigo-600), color-mix(in oklch, var(--bs-indigo-400), var(--bs-indigo-300)));
--bs-accent-fg-emphasis: light-dark(var(--bs-indigo-800), var(--bs-indigo-300));
--bs-accent-bg: var(--bs-indigo-500);
--bs-accent-bg-subtle: light-dark(var(--bs-indigo-100), var(--bs-indigo-900));
--bs-accent-bg-muted: light-dark(var(--bs-indigo-200), var(--bs-indigo-800));
--bs-accent-border: light-dark(var(--bs-indigo-300), var(--bs-indigo-600));
--bs-accent-focus-ring: light-dark(color-mix(in oklch, var(--bs-indigo-500) 50%, var(--bs-bg-body)), color-mix(in oklch, var(--bs-indigo-500) 75%, var(--bs-bg-body)));
--bs-accent-contrast: var(--bs-white);

Even the token playground and custom color modes examples don't show the base color being used

.token-demo {
  --bs-radius-5: 0.5rem;
  --bs-spacer: 1rem;
  --bs-primary-base: var(--bs-purple-500);
  --bs-primary-bg: var(--bs-primary-base);
  --bs-primary-bg-subtle: light-dark(var(--bs-purple-100), var(--bs-purple-900));
  --bs-primary-fg: light-dark(var(--bs-purple-600), var(--bs-purple-400));
  --bs-primary-border: light-dark(var(--bs-purple-300), var(--bs-purple-600));
}

[data-bs-theme="blue"] {
  --bs-fg-body: var(--bs-white);
  --bs-bg-body: var(--bs-blue-500);
  --bs-bg-3: var(--bs-blue-600);
  --bs-hr-border-color: var(--bs-blue-400);

  .menu {
    --bs-menu-bg: color-mix(in lab, var(--bs-blue-600), var(--bs-blue-700));
    --bs-menu-item-hover-bg: var(--bs-blue-700);
    --bs-menu-item-active-bg: var(--bs-blue-800);
  }

  .btn-solid {
    --bs-btn-bg: color-mix(in lab, var(--bs-gray-600), var(--bs-blue-400));
    --bs-btn-border-color: color-mix(in lab, var(--bs-fg-body) 25%, transparent);
    --bs-btn-hover-bg: color-mix(in lab, var(--bs-gray-600), var(--bs-blue-400));
    --bs-btn-hover-border-color: color-mix(in lab, var(--bs-fg-body) 25%, transparent);
    --bs-btn-active-bg: color-mix(in lab, color-mix(in lab, var(--bs-gray-600), var(--bs-blue-400)), var(--bs-black) 10%);
    --bs-btn-active-border-color: color-mix(in lab, var(--bs-fg-body), transparent);
    --bs-btn-focus-border-color: color-mix(in lab, var(--bs-fg-body), transparent);
    --bs-btn-focus-box-shadow: 0 0 0 .25rem rgb(255 255 255 / .2);
  }
}

Shouldn't the other color variables (like bg, bg-subtle, etc.) derive from the base color rather than explicitly using "named" color variables? That way, we can set the base color, and everything derives from it.