Update Alerts variables and remove deprecation mentions

diff --git a/scss/_alert.scss b/scss/_alert.scss
index 1003f6a44034afddb8e726e95433b50770aa1a73..3964929283bfda7e252630268331a3cbb472451d 100644 (file)
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -10,13 +10,14 @@
 @layer components {
   .alert {
     // scss-docs-start alert-css-vars
-    --#{$prefix}alert-bg: transparent;
+    --#{$prefix}alert-bg: var(--#{$prefix}theme-bg-subtle, transparent);
     --#{$prefix}alert-padding-x: #{$alert-padding-x};
     --#{$prefix}alert-padding-y: #{$alert-padding-y};
     --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
-    --#{$prefix}alert-color: inherit;
-    --#{$prefix}alert-border-color: transparent;
-    --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
+    --#{$prefix}alert-color: var(--#{$prefix}theme-text, inherit);
+    --#{$prefix}alert-border-color: var(--#{$prefix}theme-border, transparent);
+    --#{$prefix}alert-border-width: #{$alert-border-width};
+    // --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
     --#{$prefix}alert-border-radius: #{$alert-border-radius};
     --#{$prefix}alert-link-color: inherit;
     // scss-docs-end alert-css-vars
@@ -26,7 +27,7 @@
     margin-bottom: var(--#{$prefix}alert-margin-bottom);
     color: var(--#{$prefix}alert-color);
     background-color: var(--#{$prefix}alert-bg);
-    border: var(--#{$prefix}alert-border);
+    border: var(--#{$prefix}alert-border-width) solid var(--#{$prefix}alert-border-color);
     @include border-radius(var(--#{$prefix}alert-border-radius));
   }
 

diff --git a/site/src/content/docs/components/alerts.mdx b/site/src/content/docs/components/alerts.mdx
index e25604462b266499af4a22cb9286843056e4145b..a173cfa895bd1dacdf5f381c452752d5e25c6cb9 100644 (file)
--- a/site/src/content/docs/components/alerts.mdx
+++ b/site/src/content/docs/components/alerts.mdx
@@ -14,9 +14,9 @@ Alerts are available for any length of text, as well as an optional close button
 **Heads up!** As of v5.3.0, the `alert-variant()` Sass mixin is deprecated. Alert variants now have their CSS variables overridden in [a Sass loop](#sass-loops).
 </Callout>
 
-<Example code={getData('theme-colors').map((themeColor) => `<div class="alert alert-${themeColor.name}" role="alert">
-    A simple ${themeColor.name} alert—check it out!
-  </div>`)} />
+<Example code={getData('theme-colors').map((themeColor) => `<div class="alert theme-${themeColor.name}" role="alert">
+  A simple ${themeColor.name} alert—check it out!
+</div>`)} />
 
 <Callout name="warning-color-assistive-technologies" />
 
@@ -136,6 +136,7 @@ As part of Bootstrap’s evolving CSS variables approach, alerts now use local C
 
 <ScssDocs name="alert-variables" file="scss/_variables.scss" />
 
+<<<<<<< HEAD
 ### Sass mixins
 
 <DeprecatedIn version="5.3.0" />
@@ -143,6 +144,9 @@ As part of Bootstrap’s evolving CSS variables approach, alerts now use local C
 <ScssDocs name="alert-variant-mixin" file="scss/mixins/_alert.scss" removeIndentation={false} />
 
 ### Sass loops
+=======
+### Sass loop
+>>>>>>> 29c34e4cd (Update Alerts variables and remove deprecation mentions)
 
 Loop that generates the modifier classes with an overriding of CSS variables.