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.

diff --git a/scss/_root.scss b/scss/_root.scss
index ad550df3b49b5374b82c0266a00a9c6e416b6155..055ac32fb091ce5c6eaeb825dbc462db030afbc2 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -8,10 +8,6 @@
     --#{$color}: #{$value};
   }
 
-  @each $bp, $value in $grid-breakpoints {
-    --breakpoint-#{$bp}: #{$value};
-  }
-
   // Use `inspect` for lists so that quoted items keep the quotes.
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
   --font-family-sans-serif: #{inspect($font-family-sans-serif)};

diff --git a/site/content/docs/4.3/getting-started/theming.md b/site/content/docs/4.3/getting-started/theming.md
index 227f32bbf6e4d57deac8cf0fa3637557785d9b65..df12851ff626e42463e8d58a66f3f6a1553d2792 100644 (file)
--- 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 >}}