Issue #3056372: Primary dropbutton style update.

Closes #3056372

core/themes/claro/css/components/dropbutton.css

@@ -72,6 +72,14 @@
   list-style: none;
 }
 
+.dropbutton--primary .dropbutton__toggle {
+  background: var(--button-bg-color--primary);
+}
+
+.dropbutton--primary .dropbutton__toggle::before {
+  background: url("data:image/svg+xml,%3csvg width='14' height='9' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M.238 1.938L1.647.517 7 5.819 12.354.517l1.408 1.421L7 8.636z' fill='%23ffffff'/%3e%3c/svg%3e") no-repeat center;
+}
+
 .dropbutton-widget {
   border-radius: var(--button-border-radius-size);
   background-color: var(--button-bg-color);
@@ -178,6 +186,14 @@
   background-color: var(--button--active-bg-color);
 }
 
+.dropbutton--primary .dropbutton__toggle:hover {
+  background-color: var(--button--hover-bg-color--primary);
+}
+
+.dropbutton--primary .dropbutton__toggle:active {
+  background-color: var(--button--active-bg-color--primary);
+}
+
 .dropbutton-wrapper.open .dropbutton__toggle::before {
   transform: translate(50%, -50%) rotate(180deg);
 }
@@ -203,6 +219,12 @@
   width: 0.75rem; /* 12px */
 }
 
+.dropbutton--primary .dropbutton__item:first-of-type > *:hover,
+.dropbutton--primary .dropbutton__item:first-of-type > .button:hover {
+  color: var(--button-fg-color--primary);
+  background-color: var(--button--hover-bg-color--primary);
+}
+
 /* High contrast. */
 
 @media (forced-colors: active) {
@@ -238,6 +260,11 @@
   }
 }
 
+.dropbutton--primary .dropbutton__item:first-of-type > * {
+  color: var(--button-fg-color--primary);
+  background-color: var(--button-bg-color--primary);
+}
+
 /**
  * Item in the first dropbutton list item (that looks like a button).
  *
@@ -325,6 +352,11 @@
   border-radius: 0 var(--button-border-radius-size) var(--button-border-radius-size) 0;
 }
 
+.dropbutton--primary .dropbutton__item:first-of-type > *:active {
+  color: var(--button-fg-color--primary);
+  background-color: var(--button--active-bg-color--primary);
+}
+
 .dropbutton > .dropbutton__item > a,
 .dropbutton > .dropbutton__item > .button {
   display: block;