style: tweak dropdown styles for line-height, proportion, and hover states

addons/rose/addon/styles/rose/components/dropdown/_button.scss

@@ -2,33 +2,35 @@
 @use '../../utilities/type';
 
 .rose-dropdown-button {
-  @include type.type(s, normal);
+  @include type.type(s);
   display: block;
-  // Targeting min-width of 200
-  min-width: (sizing.rems(m) + sizing.rems(xxs)) * 10;
+  box-sizing: border-box;
+  width: 100%;
+  // Targeting min-width of ~200
+  min-width: (sizing.rems(m) + sizing.rems(xs)) * 10;
   border: 0;
-  margin: 0;
   padding: 0 sizing.rems(s);
-  color: var(--stark);
-  background-color: transparent;
-  // target line height is 36, which is not a standard line height for this
-  // font size
-  $lineHeight: 36 / 16;
-  line-height: $lineHeight;
-  text-align: left;
   text-decoration: none;
-  cursor: pointer;
+  text-align: left;
+  $line-height: 36 / 14;
+  line-height: $line-height;
+
+  --background-color: transparent;
+  --color: var(--stark);
+  color: var(--color);
+  background-color: var(--background-color);
+
+  &:hover {
+    --background-color: var(--ui-gray-subtler-5);
+  }
 
   &.rose-dropdown-button-danger {
-    --background: var(--white);
+    --background-color: var(--white);
     --color: var(--failure);
 
-    color: var(--color);
-    background-color: var(--background-color);
-
     &:hover {
       --color: var(--white);
       --background-color: var(--failure);
     }
   }
-}
+}

addons/rose/addon/styles/rose/components/dropdown/_dropdown.scss

@@ -1,6 +1,8 @@
 @use '../../variables/sizing';
 @use '../../utilities/type';
 
+$xs: sizing.rems(xs); // 8
+$xxs: sizing.rems(xxs); // 4
 $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
 
 .rose-dropdown {
@@ -13,11 +15,11 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xm
     overflow: hidden;
     display: flex;
     align-items: center;
-    padding: 0 sizing.rems(xl) 0 sizing.rems(l);
-    $lineHeight: 36 / 13;
-    line-height: $lineHeight;
+    $yPadding: sizing.rems(xxs) + sizing.rems(xxxs);
+    padding: $yPadding sizing.rems(xl) $yPadding sizing.rems(l);
     color: var(--black);
-    background: url($chevron) no-repeat right sizing.rems(s) center;
+    background: url($chevron) no-repeat right sizing.rems(m) center;
+    border-radius: sizing.rems(xxxs);
 
     // Hide default twistie triangle
     // Webkit / Chromium
@@ -33,7 +35,7 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xm
     background-size: sizing.rems(m);
 
     &:hover {
-      background-color: var(--ui-gray-subtler-5);
+      background-color: var(--ui-gray-subtler-4);
     }
 
     &:not(.has-icon-only) .rose-icon:first-child {
@@ -68,14 +70,11 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xm
     }
   }
 
-  .rose-dropdown-trigger:active,
   &[open] > .rose-dropdown-trigger {
     background-color: var(--ui-gray-subtler-4);
   }
 
   .rose-dropdown-content {
-    $xs: sizing.rems(xs); // 8
-    $xxs: sizing.rems(xxs); // 4
     position: absolute;
     padding: $xxs 0;
     border: 1px solid var(--ui-gray-subtler-2);
@@ -96,5 +95,6 @@ $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%231b1f26' xm
     background-color: var(--ui-gray-subtler-3);
     height: sizing.rems(xxxxs);
     border: none;
+    margin: $xxs 0;
   }
 }

addons/rose/addon/styles/rose/components/dropdown/_link.scss

@@ -2,32 +2,35 @@
 @use '../../utilities/type';
 
 .rose-dropdown-link {
-  @include type.type(s, normal);
+  @include type.type(s);
   display: block;
-  // Targeting min-width of 200
-  min-width: (sizing.rems(s) + sizing.rems(xxs)) * 10;
+  box-sizing: border-box;
+  width: 100%;
+  // Targeting min-width of ~200
+  min-width: (sizing.rems(m) + sizing.rems(xs)) * 10;
   border: 0;
   padding: 0 sizing.rems(s);
-  color: var(--stark);
-  background-color: transparent;
-  // target line height is 36, which is not a standard line height for this
-  // font size
-  $lineHeight: 36 / 16;
-  line-height: $lineHeight;
-  text-align: left;
   text-decoration: none;
-  cursor: pointer;
+  text-align: left;
+  $line-height: 36 / 14;
+  line-height: $line-height;
+
+  --background-color: transparent;
+  --color: var(--stark);
+  color: var(--color);
+  background-color: var(--background-color);
+
+  &:hover {
+    --background-color: var(--ui-gray-subtler-5);
+  }
 
   &.rose-dropdown-link-danger {
-    --background: var(--white);
+    --background-color: var(--white);
     --color: var(--failure);
 
-    color: var(--color);
-    background-color: var(--background-color);
-
     &:hover {
       --color: var(--white);
       --background-color: var(--failure);
     }
   }
-}
+}

addons/rose/addon/styles/rose/components/header/_dropdown.scss

@@ -3,36 +3,40 @@
 
 $chevron: "data:image/svg+xml;utf-8,<svg viewBox='0 0 24 24' fill='%23ebeef2' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z'></path></svg>";
 
-.rose-header-utilities,
-.rose-header-nav {
-  margin-right: sizing.rems(s);
+.rose-header  {
+  .rose-dropdown {
+    &,
+    &[open] {
+      .rose-dropdown-trigger {
+        color: var(--white);
+        background: url($chevron) no-repeat right sizing.rems(s) center;
+        background-size: sizing.rems(m);
 
-  .rose-dropdown-trigger {
-    $lineHeight: 48 / 16;
-    line-height: $lineHeight;
-    color: var(--white);
-    background: url($chevron) no-repeat right center;
-    background-size: sizing.rems(m);
+        $yPadding: sizing.rems(xxxs);
+        $rightPadding: sizing.rems(xs) + sizing.rems(l);
+        padding: $yPadding $rightPadding $yPadding sizing.rems(s);
 
-    .rose-icon {
-      --size: #{sizing.rems(l)};
-    }
+        &.has-icon-only {
+          padding-left: sizing.rems(xs);
+        }
 
-    .rose-icon {
-      display: inline-block;
-      height: var(--size);
+        .rose-icon {
+          --size: #{sizing.rems(l)};
+        }
 
-      > svg {
-        vertical-align: top;
+        .rose-icon {
+          display: inline-block;
+          height: var(--size);
+
+          > svg {
+            vertical-align: top;
+          }
+        }
+
+        &:hover, &:focus {
+          background-color: transparent;
+        }
       }
     }
-
-    &:hover, &:focus {
-      background-color: unset;
-    }
   }
 }
-
-.rose-header-nav .rose-dropdown-trigger{
-  padding-right: sizing.rems(l);
-}

addons/rose/addon/styles/rose/components/header/_nav.scss

@@ -6,6 +6,7 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
+  margin-right: sizing.rems(s);
 
   @media (max-width: media.width(small)) {
     padding: 0 20px;

addons/rose/addon/styles/rose/components/header/_utilities.scss

@@ -6,4 +6,5 @@
   flex-wrap: wrap;
   flex-direction: row-reverse;
   align-items: center;
+  margin-right: sizing.rems(s);
 }

addons/rose/tests/dummy/app/templates/index.hbs

@@ -2,7 +2,7 @@
   <header.brand @logo="logo" @text="Product Name" />
 
   <header.nav as |nav|>
-    <nav.dropdown @text="org-name" as |dropdown|>
+    <nav.dropdown @text="org-name" @icon="user-organization" as |dropdown|>
       <dropdown.link @route="index">Menu item</dropdown.link>
       <dropdown.link @route="about" @style="danger">Menu item - danger</dropdown.link>
       <dropdown.separator />