From 4b9c19c99ea1953ec93c92bcda91f33f63b9994c Mon Sep 17 00:00:00 2001
From: Lauri Eskola <lauri.eskola@acquia.com>
Date: Fri, 5 Aug 2022 16:38:27 +0300
Subject: [PATCH] Issue #3259929 by mherchel, andy-blum: Olivero: Refactor
 dropbutton CSS to make use of modern CSS

---
 .../olivero/css/components/dropbutton.css     | 147 +++++++++---------
 .../css/components/dropbutton.pcss.css        | 138 ++++++++--------
 2 files changed, 139 insertions(+), 146 deletions(-)

diff --git a/core/themes/olivero/css/components/dropbutton.css b/core/themes/olivero/css/components/dropbutton.css
index 94bf523b2e6a..3f53ed7e9222 100644
--- a/core/themes/olivero/css/components/dropbutton.css
+++ b/core/themes/olivero/css/components/dropbutton.css
@@ -10,30 +10,22 @@
  * Dropbutton styles.
  */
 
-/*
- * Media query breakpoints.
- * Processed by postcss/postcss-custom-media.
- */
-
-/* Navigation related breakpoints */
-
-/* Grid related breakpoints */
-
-/* Grid shifts from 6 to 14 columns. */
-
-/* Width of the entire grid maxes out. */
-
-:root {
+.dropbutton-wrapper {
   --dropbutton--height: var(--sp1-5);
-  --dropbutton--bg-color: var(--color--gray-90);
-  --dropbutton--border-color: var(--color--primary-40);
+  --dropbutton--secondary-bg-color: var(--color--white);
+  --dropbutton--active-bg-color: var(--color--gray-90);
+  --dropbutton--outline-color: var(--color--primary-40); /* Minimum 3:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
+  --dropbutton--border-radius: var(--border-radius);
+  --dropbutton--font-size: var(--font-size-s);
+  --dropbutton--text-color: var(--color-text-neutral-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
+  --dropbutton--text-hover-color: var(--color-text-primary-medium) /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
 }
 
 .dropbutton-wrapper.open {
-  position: relative;
-  z-index: 100; /* Ensure this appears above all other dropbuttons. */
-  filter: drop-shadow(0 2px 2px var(--dropbutton--bg-color));
-}
+    position: relative;
+    z-index: 100; /* Ensure this appears above all other dropbuttons. */
+    filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color));
+  }
 
 [dir="ltr"] .dropbutton-widget {
   padding-right: var(--dropbutton--height);
@@ -45,24 +37,21 @@
 
 .dropbutton-widget {
   position: relative;
-  width: 12.5rem;
+  width: max-content;
   height: var(--dropbutton--height);
-  border-radius: var(--border-radius)
+  border-radius: var(--dropbutton--border-radius)
 }
 
-@supports (width: max-content) {
-
-.dropbutton-widget {
-    width: max-content
-}
-  }
-
 [dir="ltr"] .dropbutton-single .dropbutton-widget {
-  padding-right: 0;
+    padding-right: 0;
 }
 
 [dir="rtl"] .dropbutton-single .dropbutton-widget {
-  padding-left: 0;
+    padding-left: 0;
+}
+
+.dropbutton-wrapper.open .dropbutton-widget {
+    border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0
 }
 
 [dir="ltr"] .dropbutton {
@@ -86,9 +75,11 @@
   margin-top: 0;
   margin-bottom: 0;
   list-style: none;
-  font-size: var(--font-size-s);
+  font-size: var(--dropbutton--font-size);
 }
 
+/* This is the button that expands/collapses the secondary options. */
+
 [dir="ltr"] .dropbutton-toggle button {
   right: 0;
 }
@@ -109,11 +100,11 @@
   cursor: pointer;
   border-color: transparent;
   border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
-  background: var(--dropbutton--bg-color)
+  background: var(--dropbutton--active-bg-color)
 }
 
 .dropbutton-toggle button:focus {
-    outline: solid 2px var(--dropbutton--border-color);
+    outline: solid 2px var(--dropbutton--outline-color);
     outline-offset: -2px;
   }
 
@@ -123,13 +114,19 @@
     height: var(--sp0-5);
     content: "";
     transform: translateY(-25%) rotate(45deg);
-    border-right: solid 2px var(--dropbutton--border-color);
-    border-bottom: solid 2px var(--dropbutton--border-color);
+    border-right: solid 2px var(--dropbutton--outline-color);
+    border-bottom: solid 2px var(--dropbutton--outline-color)
+  }
+
+.dropbutton-wrapper.open .dropbutton-toggle button:before {
+      transform: translateY(25%) rotate(225deg)
   }
 
 [dir="rtl"] .dropbutton-toggle button {
-  border-radius: var(--border-radius) 0 0 var(--border-radius);
-}
+    border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius);
+  }
+
+/* This is the first <li> element in the list of actions. */
 
 [dir="ltr"] .dropbutton-action:first-child {
     margin-right: 2px;
@@ -141,74 +138,70 @@
 
 .dropbutton-action:first-child {
     border: solid 1px transparent;
-    border-radius: var(--border-radius) 0 0 var(--border-radius); /* LTR */
-    background: var(--dropbutton--bg-color);
+    border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */
+    background: var(--dropbutton--active-bg-color)
   }
 
+[dir="rtl"] .dropbutton-action:first-child {
+      border: solid 1px transparent;
+      border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0;
+    }
+
 .dropbutton-action a {
     display: flex;
     align-items: center;
     margin-bottom: -2px; /* Account for borders. */
     padding: 0 0.5625rem;
     text-decoration: none;
-    color: var(--color-text-neutral-medium);
+    color: var(--dropbutton--text-color);
     font-weight: 600
   }
 
-.dropbutton-action a:focus {
-      border: solid 2px var(--dropbutton--border-color);
-      outline: 0
-
-      /* Negate specific IE rules. */
+.dropbutton-action a:hover {
+      color: inherit;
     }
 
-@supports (outline-offset: -2px) {
-
 .dropbutton-action a:focus {
-        border: 0;
-        outline: solid 2px var(--dropbutton--border-color);
-        outline-offset: -1px /* Overlap parent container by 1px. */
+      outline: solid 2px var(--dropbutton--outline-color);
+      outline-offset: -1px; /* Overlap parent container by 1px. */
     }
-      }
 
-.dropbutton-single .dropbutton-action:first-child {
-    border-right: solid 1px transparent; /* LTR */
-    border-radius: var(--border-radius);
-  }
+.dropbutton-action {
 
-.dropbutton-single .dropbutton-action a {
-    justify-content: center;
-  }
+  /* Special rules if there is only one action. */
+}
 
-[dir="rtl"] .dropbutton-action:first-child {
-    border: solid 1px transparent;
-    border-radius: 0 var(--border-radius) var(--border-radius) 0;
-  }
+.dropbutton-single .dropbutton-action:first-child {
+      border-right: solid 1px transparent; /* LTR */
+      border-radius: var(--dropbutton--border-radius)
+    }
 
 [dir="rtl"] .dropbutton-single .dropbutton-action:first-child {
-    border: solid 1px transparent;
-  }
+        border: solid 1px transparent;
+      }
+
+.dropbutton-single .dropbutton-action a {
+      justify-content: center;
+    }
+
+/* These are the <li> elements other than the first. */
 
 .secondary-action {
   visibility: hidden;
   width: calc(100% + var(--dropbutton--height));
-  border-right: 1px solid var(--dropbutton--bg-color);
-  border-left: 1px solid var(--dropbutton--bg-color);
-  background: var(--color--white)
+  border-right: 1px solid var(--dropbutton--active-bg-color);
+  border-left: 1px solid var(--dropbutton--active-bg-color);
+  background: var(--dropbutton--secondary-bg-color)
 }
 
 .secondary-action:last-child {
-    border-bottom: 1px solid var(--dropbutton--bg-color);
+    border-bottom: 1px solid var(--dropbutton--active-bg-color);
   }
 
-.dropbutton-wrapper.open .dropbutton-toggle button:before {
-    transform: translateY(25%) rotate(225deg);
-  }
-
-.dropbutton-wrapper.open .dropbutton-widget {
-    border-radius: var(--border-radius) var(--border-radius) 0 0;
+.secondary-action a:hover {
+    color: var(--dropbutton--text-hover-color);
   }
 
 .dropbutton-wrapper.open .secondary-action {
-    visibility: visible;
-  }
+    visibility: visible
+}
diff --git a/core/themes/olivero/css/components/dropbutton.pcss.css b/core/themes/olivero/css/components/dropbutton.pcss.css
index 5a199a3f2503..8b03d5d5d904 100644
--- a/core/themes/olivero/css/components/dropbutton.pcss.css
+++ b/core/themes/olivero/css/components/dropbutton.pcss.css
@@ -3,34 +3,37 @@
  * Dropbutton styles.
  */
 
-@import "../base/media-queries.pcss.css";
-
-:root {
+.dropbutton-wrapper {
   --dropbutton--height: var(--sp1-5);
-  --dropbutton--bg-color: var(--color--gray-90);
-  --dropbutton--border-color: var(--color--primary-40);
-}
-
-.dropbutton-wrapper.open {
-  position: relative;
-  z-index: 100; /* Ensure this appears above all other dropbuttons. */
-  filter: drop-shadow(0 2px 2px var(--dropbutton--bg-color));
+  --dropbutton--secondary-bg-color: var(--color--white);
+  --dropbutton--active-bg-color: var(--color--gray-90);
+  --dropbutton--outline-color: var(--color--primary-40); /* Minimum 3:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
+  --dropbutton--border-radius: var(--border-radius);
+  --dropbutton--font-size: var(--font-size-s);
+  --dropbutton--text-color: var(--color-text-neutral-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
+  --dropbutton--text-hover-color: var(--color-text-primary-medium); /* Minimum 4.5:1 contrast ratio against --dropbutton--active-bg-color and --dropbutton--secondary-bg-color. */
+
+  &.open {
+    position: relative;
+    z-index: 100; /* Ensure this appears above all other dropbuttons. */
+    filter: drop-shadow(0 2px 2px var(--dropbutton--active-bg-color));
+  }
 }
 
 .dropbutton-widget {
   position: relative;
-  width: 200px;
+  width: max-content;
   height: var(--dropbutton--height);
   padding-inline-end: var(--dropbutton--height);
-  border-radius: var(--border-radius);
+  border-radius: var(--dropbutton--border-radius);
 
-  @supports (width: max-content) {
-    width: max-content;
+  @nest .dropbutton-single & {
+    padding-inline-end: 0;
   }
-}
 
-.dropbutton-single .dropbutton-widget {
-  padding-inline-end: 0;
+  @nest .dropbutton-wrapper.open & {
+    border-radius: var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0 0;
+  }
 }
 
 .dropbutton {
@@ -39,9 +42,10 @@
   margin-inline-start: 0;
   padding-inline-start: 0;
   list-style: none;
-  font-size: var(--font-size-s);
+  font-size: var(--dropbutton--font-size);
 }
 
+/* This is the button that expands/collapses the secondary options. */
 .dropbutton-toggle button {
   position: absolute;
   top: 0;
@@ -55,10 +59,10 @@
   cursor: pointer;
   border-color: transparent;
   border-radius: 0 var(--border-radius) var(--border-radius) 0; /* LTR */
-  background: var(--dropbutton--bg-color);
+  background: var(--dropbutton--active-bg-color);
 
   &:focus {
-    outline: solid 2px var(--dropbutton--border-color);
+    outline: solid 2px var(--dropbutton--outline-color);
     outline-offset: -2px;
   }
 
@@ -68,21 +72,31 @@
     height: var(--sp0-5);
     content: "";
     transform: translateY(-25%) rotate(45deg);
-    border-right: solid 2px var(--dropbutton--border-color);
-    border-bottom: solid 2px var(--dropbutton--border-color);
+    border-right: solid 2px var(--dropbutton--outline-color);
+    border-bottom: solid 2px var(--dropbutton--outline-color);
+
+    @nest .dropbutton-wrapper.open & {
+      transform: translateY(25%) rotate(225deg);
+    }
   }
-}
 
-[dir="rtl"] .dropbutton-toggle button {
-  border-radius: var(--border-radius) 0 0 var(--border-radius);
+  &:dir(rtl) {
+    border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius);
+  }
 }
 
+/* This is the first <li> element in the list of actions. */
 .dropbutton-action {
   &:first-child {
     margin-inline-end: 2px;
     border: solid 1px transparent;
-    border-radius: var(--border-radius) 0 0 var(--border-radius); /* LTR */
-    background: var(--dropbutton--bg-color);
+    border-radius: var(--dropbutton--border-radius) 0 0 var(--dropbutton--border-radius); /* LTR */
+    background: var(--dropbutton--active-bg-color);
+
+    &:dir(rtl) {
+      border: solid 1px transparent;
+      border-radius: 0 var(--dropbutton--border-radius) var(--dropbutton--border-radius) 0;
+    }
   }
 
   & a {
@@ -91,67 +105,53 @@
     margin-bottom: -2px; /* Account for borders. */
     padding: 0 9px;
     text-decoration: none;
-    color: var(--color-text-neutral-medium);
+    color: var(--dropbutton--text-color);
     font-weight: 600;
 
-    &:focus {
-      border: solid 2px var(--dropbutton--border-color);
-      outline: 0;
-
-      /* Negate specific IE rules. */
-      @supports (outline-offset: -2px) {
-        border: 0;
-        outline: solid 2px var(--dropbutton--border-color);
-        outline-offset: -1px; /* Overlap parent container by 1px. */
-      }
+    &:hover {
+      color: inherit;
     }
-  }
-}
 
-.dropbutton-single .dropbutton-action {
-  &:first-child {
-    border-right: solid 1px transparent; /* LTR */
-    border-radius: var(--border-radius);
+    &:focus {
+      outline: solid 2px var(--dropbutton--outline-color);
+      outline-offset: -1px; /* Overlap parent container by 1px. */
+    }
   }
 
-  & a {
-    justify-content: center;
-  }
-}
+  /* Special rules if there is only one action. */
+  @nest .dropbutton-single & {
+    &:first-child {
+      border-right: solid 1px transparent; /* LTR */
+      border-radius: var(--dropbutton--border-radius);
 
-[dir="rtl"] {
-  & .dropbutton-action:first-child {
-    border: solid 1px transparent;
-    border-radius: 0 var(--border-radius) var(--border-radius) 0;
-  }
+      &:dir(rtl) {
+        border: solid 1px transparent;
+      }
+    }
 
-  & .dropbutton-single .dropbutton-action:first-child {
-    border: solid 1px transparent;
+    & a {
+      justify-content: center;
+    }
   }
 }
 
+/* These are the <li> elements other than the first. */
 .secondary-action {
   visibility: hidden;
   width: calc(100% + var(--dropbutton--height));
-  border-right: 1px solid var(--dropbutton--bg-color);
-  border-left: 1px solid var(--dropbutton--bg-color);
-  background: var(--color--white);
+  border-right: 1px solid var(--dropbutton--active-bg-color);
+  border-left: 1px solid var(--dropbutton--active-bg-color);
+  background: var(--dropbutton--secondary-bg-color);
 
   &:last-child {
-    border-bottom: 1px solid var(--dropbutton--bg-color);
-  }
-}
-
-.dropbutton-wrapper.open {
-  & .dropbutton-toggle button:before {
-    transform: translateY(25%) rotate(225deg);
+    border-bottom: 1px solid var(--dropbutton--active-bg-color);
   }
 
-  & .dropbutton-widget {
-    border-radius: var(--border-radius) var(--border-radius) 0 0;
+  & a:hover {
+    color: var(--dropbutton--text-hover-color);
   }
 
-  & .secondary-action {
+  @nest .dropbutton-wrapper.open & {
     visibility: visible;
   }
 }
-- 
GitLab