Fix CSS validation errors

[danielfdickinson]

Summary

Fixes W3 CSS validation errors and styles not being applied as expected.

Each commit explains its purpose in its message.

Basic example

Only one user-facing change (or rather addition, since previously what was there didn't work):

Instead of

--bs-table-bg: $body-bg-dark;

setting the background color for tables in dark mode, we use

--bs-table-bg: var(--table-bg-dark);

which means one can set the table background colour with:

:root {
   --table-bg-dark: hsl(224, 10%, 10%);
}

We cannot use a Sass variable on the right has side of this property setting as it will not be substituted and will end up as invalid CSS.

Motivation

Fixes #122 in which some Sass variables end up on rendered CSS, causing validation errors with W3 validator (and the styles not being applied as expected).

Checks

• Read Creating a pull request
• Supports all screen sizes (if relevant)
• Supports both light and dark mode (if relevant)
• Passes npm run test (if relevant) (not relevant)

[changeset-bot]

⚠️ No Changeset found

Latest commit: 80f55ea

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[h-enk]

I want to dig into this further — for instance, how Sass is handled in Bootstrap and how to best support Dart Sass. To be continued.

[danielfdickinson]

I'll look forward to it! (And help out where I can).