theming.md: automate _root.scss. (#29326)

diff --git a/scss/_root.scss b/scss/_root.scss
index dcad3ee013da170d485924a133cfa7a366670994..055ac32fb091ce5c6eaeb825dbc462db030afbc2 100644 (file)
--- a/scss/_root.scss
+++ b/scss/_root.scss
@@ -1,4 +1,3 @@
-// Do not forget to update getting-started/theming.md!
 :root {
   // Custom variable values only support SassScript inside `#{}`.
   @each $color, $value in $colors {

diff --git a/site/content/docs/4.3/getting-started/theming.md b/site/content/docs/4.3/getting-started/theming.md
index b999e490935bc8a7cef875d54955ef628e30627c..0c8fe306ad01a04bdf0366ca6e63b40acf715919 100644 (file)
--- a/site/content/docs/4.3/getting-started/theming.md
+++ b/site/content/docs/4.3/getting-started/theming.md
@@ -369,31 +369,13 @@ Bootstrap 4 includes around two dozen [CSS custom properties (variables)](https:
 Here are the variables we include (note that the `:root` is required). They're located in our `_root.scss` file.
 
 {{< highlight css >}}
-:root {
-  --blue: #007bff;
-  --indigo: #6610f2;
-  --purple: #6f42c1;
-  --pink: #e83e8c;
-  --red: #dc3545;
-  --orange: #fd7e14;
-  --yellow: #ffc107;
-  --green: #28a745;
-  --teal: #20c997;
-  --cyan: #17a2b8;
-  --white: #fff;
-  --gray: #6c757d;
-  --gray-dark: #343a40;
-  --primary: #007bff;
-  --secondary: #6c757d;
-  --success: #28a745;
-  --info: #17a2b8;
-  --warning: #ffc107;
-  --danger: #dc3545;
-  --light: #f8f9fa;
-  --dark: #343a40;
-  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-}
+{{< root.inline >}}
+{{- $css := readFile "dist/css/bootstrap.css" -}}
+{{- $match := findRE ":root {([^}]*)}" $css 1 -}}
+
+{{- index $match 0 -}}
+
+{{< /root.inline >}}
 {{< /highlight >}}
 
 ### Examples