let dropdown-item use theme colors

diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss
index 6a918d66e26ab53f2e7075cbe5819d2f460d9502..3d277c9b3578f87bc2a95a523c5911ee7df41dee 100644 (file)
--- a/scss/_dropdown.scss
+++ b/scss/_dropdown.scss
@@ -96,7 +96,7 @@ $dropdown-tokens: defaults(
     width: 100%; // For `<button>`s
     padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
     font-weight: $font-weight-normal;
-    color: var(--dropdown-link-color);
+    color: var(--theme-text, var(--dropdown-link-color));
     text-align: inherit; // For `<button>`s
     text-decoration: none;
     white-space: nowrap; // prevent links from randomly breaking onto new lines
@@ -106,14 +106,14 @@ $dropdown-tokens: defaults(
 
     &:hover,
     &:focus {
-      color: var(--dropdown-link-hover-color);
-      @include gradient-bg(var(--dropdown-link-hover-bg));
+      color: var(--theme-text, var(--dropdown-link-hover-color));
+      @include gradient-bg(var(--theme-bg-subtle, var(--dropdown-link-hover-bg)));
     }
 
     &.active,
     &:active {
-      color: var(--dropdown-link-active-color);
-      @include gradient-bg(var(--dropdown-link-active-bg));
+      color: var(--theme-contrast, var(--dropdown-link-active-color));
+      @include gradient-bg(var(--theme-bg, var(--dropdown-link-active-bg)));
     }
 
     &.disabled,

diff --git a/site/src/content/docs/components/dropdown.mdx b/site/src/content/docs/components/dropdown.mdx
index 787bf27b603ba82fb8dbf9a327133e8e5eeebdf3..01222c5d010c24dcc28612b785c01a4e8222022b 100644 (file)
--- a/site/src/content/docs/components/dropdown.mdx
+++ b/site/src/content/docs/components/dropdown.mdx
@@ -219,6 +219,23 @@ Add `.disabled` to items in the dropdown to style them as disabled.
     <li><a class="dropdown-item" href="#">Another link</a></li>
   </ul>`} />
 
+### Variants
+
+You can use the `theme-` prefix to apply a theme color to a dropdown item.
+
+<Example class="hstack gap-3" code={`<ul class="dropdown-menu show position-static">
+    <li><a class="dropdown-item theme-primary" href="#">Primary link</a></li>
+    <li><a class="dropdown-item theme-secondary" href="#">Secondary link</a></li>
+    <li><a class="dropdown-item theme-success" href="#">Success link</a></li>
+    <li><a class="dropdown-item theme-danger" href="#">Danger link</a></li>
+  </ul>
+  <ul class="dropdown-menu show position-static">
+    <li><a class="dropdown-item active theme-primary" href="#">Primary link</a></li>
+    <li><a class="dropdown-item active theme-secondary" href="#">Secondary link</a></li>
+    <li><a class="dropdown-item active theme-success" href="#">Success link</a></li>
+    <li><a class="dropdown-item active theme-danger" href="#">Danger link</a></li>
+  </ul>`} />
+
 ## Menu content
 
 ### Headers