Drop breakpoint CSS custom properties (#29020)

Media queries do not support CSS custom properties (CSS variables), so we've had some useless variables lying around since shipping v4. This finally removes them and the associated documentation content that explained the situation.

Fixes #29012.

1 files changed, 0 insertions, 27 deletions

diff --git a/site/content/docs/4.3/getting-started/theming.md b/site/content/docs/4.3/getting-started/theming.md
index 227f32bbf..df12851ff 100644
--- a/site/content/docs/4.3/getting-started/theming.md
+++ b/site/content/docs/4.3/getting-started/theming.md
@@ -404,11 +404,6 @@ Here are the variables we include (note that the `:root` is required). They're l
   --danger: #dc3545;
   --light: #f8f9fa;
   --dark: #343a40;
-  --breakpoint-xs: 0;
-  --breakpoint-sm: 576px;
-  --breakpoint-md: 768px;
-  --breakpoint-lg: 992px;
-  --breakpoint-xl: 1200px;
   --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -426,25 +421,3 @@ a {
   color: var(--blue);
 }
 {{< /highlight >}}
-
-### Breakpoint variables
-
-While we originally included breakpoints in our CSS variables (e.g., `--breakpoint-md`), **these are not supported in media queries**, but they can still be used _within_ rulesets in media queries. These breakpoint variables remain in the compiled CSS for backward compatibility given they can be utilized by JavaScript. [Learn more in the spec](https://www.w3.org/TR/css-variables-1/#using-variables).
-
-Here's an example of **what's not supported:**
-
-{{< highlight css >}}
-@media (min-width: var(--breakpoint-sm)) {
-  ...
-}
-{{< /highlight >}}
-
-And here's an example of **what is supported:**
-
-{{< highlight css >}}
-@media (min-width: 768px) {
-  .custom-element {
-    color: var(--primary);
-  }
-}
-{{< /highlight >}}