docs: remove swatches for theme colors. (#29327)

Use the built-in utilities instead.

diff --git a/site/docs/4.3/assets/scss/_colors.scss b/site/docs/4.3/assets/scss/_colors.scss
index 8d2825c5700e860229fa51f2d5b9419549641909..10ad8efdb7d2c51010942a2a04f69e4210bb43cc 100644 (file)
--- a/site/docs/4.3/assets/scss/_colors.scss
+++ b/site/docs/4.3/assets/scss/_colors.scss
@@ -9,13 +9,6 @@
   }
 }
 
-@each $color, $value in $theme-colors {
-  .swatch-#{$color} {
-    color: color-yiq($value);
-    background-color: #{$value};
-  }
-}
-
 @each $color, $value in $grays {
   .swatch-#{$color} {
     color: color-yiq($value);

diff --git a/site/docs/4.3/getting-started/theming.md b/site/docs/4.3/getting-started/theming.md
index c52ca752b62b89427e41ac177a361bf4c7bc6e1e..198a55da3a61594e473cc4c69d7e22ef3b72e3a7 100644 (file)
--- a/site/docs/4.3/getting-started/theming.md
+++ b/site/docs/4.3/getting-started/theming.md
@@ -292,7 +292,7 @@ We use a subset of all colors to create a smaller color palette for generating c
 <div class="row">
   {% for color in site.data.theme-colors %}
     <div class="col-md-4">
-      <div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div>
+      <div class="p-3 mb-3 bg-{{ color.name }} {% if color.name == "light" or color.name == "warning" %}text-dark{% else %}text-white{% endif %}">{{ color.name | capitalize }}</div>
     </div>
   {% endfor %}
 </div>