This PR adds additional CSS custom properties to our :root in the hopes of improving ease of customization and extensibility.
Approach
In some situations, I'm just adding CSS vars for the sake of adding them. The more we expose here, the more folks can do with Bootstrap. Of course there's a filesize issue to consider, but we'll manage that by keeping things pretty tight for now. Beyond that, I'm creating CSS vars for some situations and replacing their Sass variables with interpolated CSS vars (e.g., instead of $body-bg it's var(--bs-body-bg) which has a computed value of $body-bg).
What's new
- Added all
$grays - Added
$spacers(ideally we could make the CSS var versions powered by--bs-spacer, but unsure how to do that) - Added grid column count and gutter width, and replaced their Sass values in our mixins
- Added body values (font, color, background-color) and replaced their Sass values in Reboot
Still more to think about and fine-tune here.
All CSS variables
--bs-blue: #0d6efd;
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-100: #f8f9fa;
--bs-200: #e9ecef;
--bs-300: #dee2e6;
--bs-400: #ced4da;
--bs-500: #adb5bd;
--bs-600: #6c757d;
--bs-700: #495057;
--bs-800: #343a40;
--bs-900: #212529;
--bs-primary: #0d6efd;
--bs-secondary: #6c757d;
--bs-success: #198754;
--bs-info: #0dcaf0;
--bs-warning: #ffc107;
--bs-danger: #dc3545;
--bs-light: #f8f9fa;
--bs-dark: #212529;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--bs-body-font: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-color: #212529;
--bs-body-bg: #fff;
--bs-grid-columns: 12;
--bs-grid-gutter-width: 1.5rem;
--bs-spacer: 1rem;
--bs-spacer-0: 0;
--bs-spacer-1: 0.25rem;
--bs-spacer-2: 0.5rem;
--bs-spacer-3: 1rem;
--bs-spacer-4: 1.5rem;
--bs-spacer-5: 3rem;