Add button style changes

WordPress · Sep 27, 2022 · 89e41c5 · 89e41c5
1 parent 58ab9b1
commit 89e41c5
Showing 1 changed file with 28 additions and 21 deletions.
diff --git a/src/components/VButton.vue b/src/components/VButton.vue
@@ -328,39 +328,46 @@ a.button {
   @apply border border-tx bg-dark-charcoal text-white;
 }
 
-.new-action-menu {
-  @apply border border-tx bg-white text-dark-charcoal hover:border-dark-charcoal-20 focus-visible:ring focus-visible:ring-pink;
-}
-.new-action-menu-pressed {
-  @apply border-tx bg-dark-charcoal text-white hover:border-tx hover:bg-dark-charcoal-90 focus-visible:ring focus-visible:ring-pink focus-visible:ring-offset-1 focus-visible:ring-offset-white;
-}
-.new-action-menu[disabled='disabled'],
-.new-action-menu[aria-disabled='true'] {
-  @apply border-dark-charcoal-10 bg-dark-charcoal-10 text-dark-charcoal-40;
-}
-
 .action-menu {
   @apply border border-tx bg-tx text-dark-charcoal hover:border-dark-charcoal-20;
 }
-
-.action-menu-secondary {
-  @apply border border-tx bg-white text-dark-charcoal hover:border-dark-charcoal-20;
+.action-menu-pressed {
+  @apply border-tx bg-dark-charcoal text-white hover:border-tx hover:bg-dark-charcoal-90;
 }
 
-.action-menu-secondary-pressed {
-  @apply border-tx bg-dark-charcoal text-white;
+/**
+Similar to `action-menu`, but always has a border, not only on hover.
+https://www.figma.com/file/GIIQ4sDbaToCfFQyKMvzr8/Openverse-Design-Library?node-id=1684%3A3678
+ */
+.action-menu-bordered {
+  @apply border border-dark-charcoal-20 bg-white text-dark-charcoal focus-visible:border-tx;
 }
-
-.action-menu-pressed {
-  @apply border-tx bg-dark-charcoal text-white hover:border-tx;
+.action-menu-bordered-pressed {
+  @apply border-dark-charcoal bg-dark-charcoal text-white hover:bg-dark-charcoal-80;
 }
 
 .action-menu-muted {
   @apply border border-tx bg-dark-charcoal-10 text-dark-charcoal hover:border-dark-charcoal-20;
 }
-
 .action-menu-muted-pressed {
-  @apply border border-tx bg-dark-charcoal text-white;
+  @apply border border-tx bg-dark-charcoal text-white hover:border-tx hover:bg-dark-charcoal-90;
+}
+
+.action-menu[disabled='disabled'],
+.action-menu[aria-disabled='true'],
+.action-menu-muted[disabled='disabled'],
+.action-menu-muted[aria-disabled='true'],
+.action-menu-bordered[disabled='disabled'],
+.action-menu-bordered[aria-disabled='true'] {
+  @apply border-dark-charcoal-10 bg-dark-charcoal-10 text-dark-charcoal-40;
+}
+
+.action-menu-secondary {
+  @apply border border-tx bg-white text-dark-charcoal hover:border-dark-charcoal-20;
+}
+
+.action-menu-secondary-pressed {
+  @apply border-tx bg-dark-charcoal text-white;
 }
 
 .full {