1 files changed, 30 insertions, 26 deletions

diff --git a/toolkit/content/widgets/moz-card/moz-card.css b/toolkit/content/widgets/moz-card/moz-card.css
index 52c0ac0980..da5656e53e 100644
--- a/toolkit/content/widgets/moz-card/moz-card.css
+++ b/toolkit/content/widgets/moz-card/moz-card.css
@@ -7,7 +7,7 @@
   --card-border-radius: var(--border-radius-medium);
   --card-border-width: var(--border-width);
   --card-border: var(--card-border-width) solid var(--card-border-color);
-  --card-background-color: var(--box-background-color);
+  --card-background-color: var(--background-color-box);
   --card-focus-outline: var(--focus-outline);
   --card-box-shadow: var(--box-shadow-10);
   /* Bug 1791816, 1839523: replace with spacing tokens */
@@ -17,9 +17,9 @@
 
   /* Bug 1791816: replace with button tokens */
   @media (prefers-contrast) {
-    --button-border-color: var(--border-interactive-color);
-    --button-border-color-hover: var(--border-interactive-color-hover);
-    --button-border-color-active: var(--border-interactive-color-active);
+    --button-border-color: var(--border-color-interactive);
+    --button-border-color-hover: var(--border-color-interactive-hover);
+    --button-border-color-active: var(--border-color-interactive-active);
     --card-border-color: color-mix(in srgb, currentColor 41%, transparent);
   }
   /* Bug 1791816: replace with button tokens */
@@ -27,9 +27,9 @@
     --button-background-color: ButtonFace;
     --button-background-color-hover: SelectedItemText;
     --button-background-color-active: SelectedItemText;
-    --button-border-color: var(--border-interactive-color);
-    --button-border-color-hover: var(--border-interactive-color-hover);
-    --button-border-color-active: var(--border-interactive-color-active);
+    --button-border-color: var(--border-color-interactive);
+    --button-border-color-hover: var(--border-color-interactive-hover);
+    --button-border-color-active: var(--border-color-interactive-active);
     --button-text-color: ButtonText;
     --button-text-color-hover: SelectedItem;
     --button-text-color-active: SelectedItem;
@@ -81,6 +81,29 @@ summary {
   gap: var(--card-gap);
   padding-inline: var(--card-padding);
   border-radius: var(--card-border-radius);
+
+  .chevron-icon {
+    background-image: url("chrome://global/skin/icons/arrow-down.svg");
+
+    details[open] & {
+      background-image: url("chrome://global/skin/icons/arrow-up.svg");
+    }
+  }
+
+  .chevron-icon,
+  #heading-icon {
+    background-position: center;
+    background-repeat: no-repeat;
+    -moz-context-properties: fill;
+    fill: currentColor;
+    width: 24px;
+    height: 24px;
+    min-width: 24px;
+    min-height: 24px;
+    padding: 0;
+    flex-shrink: 0;
+    align-self: flex-start;
+  }
 }
 
 #heading {
@@ -159,22 +182,3 @@ details  {
     outline: var(--card-focus-outline);
   }
 }
-
-.chevron-icon {
-  background-image: url("chrome://global/skin/icons/arrow-down.svg");
-  background-position: center;
-  background-repeat: no-repeat;
-  -moz-context-properties: fill;
-  fill: currentColor;
-  width: 24px;
-  height: 24px;
-  min-width: 24px;
-  min-height: 24px;
-  padding: 0;
-  flex-shrink: 0;
-  align-self: flex-start;
-
-  details[open] & {
-    background-image: url("chrome://global/skin/icons/arrow-up.svg");
-  }
-}