fix compound extensions

palantir · Apr 2, 2022 · 38c7c91 · 38c7c91
1 parent e989607
commit 38c7c91
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 59 deletions.
diff --git a/packages/core/src/components/menu/_common.scss b/packages/core/src/components/menu/_common.scss
@@ -78,10 +78,7 @@ $dark-menu-item-intent-colors: (
   }
 
   &:hover {
-    background-color: $menu-item-color-hover;
-    color: inherit;
-    cursor: pointer;
-    text-decoration: none;
+    @include menu-item-hover();
   }
 
   &:active,
@@ -97,31 +94,7 @@ $dark-menu-item-intent-colors: (
     &,
     &:hover,
     &:active {
-      background-color: rgba(nth(map-get($menu-item-intent-colors, "primary"), 1), 0.1);
-      color: nth(map-get($menu-item-intent-colors, "primary"), 2);
-
-      &::before,
-      .#{$ns}-menu-item-icon,
-      .#{$ns}-submenu-icon {
-        color: nth(map-get($menu-item-intent-colors, "primary"), 2);
-      }
-
-      .#{$ns}-menu-item-label {
-        color: inherit;
-      }
-
-      @each $intent in ("success", "warning", "danger") {
-        &.#{$ns}-intent-#{$intent} {
-          background-color: rgba(nth(map-get($menu-item-intent-colors, $intent), 1), 0.1);
-          color: nth(map-get($menu-item-intent-colors, $intent), 2);
-
-          &::before,
-          .#{$ns}-menu-item-icon,
-          .#{$ns}-submenu-icon {
-            color: inherit;
-          }
-        }
-      }
+      @include menu-item-selected-active(false);
     }
   }
 
@@ -161,13 +134,7 @@ $dark-menu-item-intent-colors: (
   }
 
   &:hover {
-    color: inherit;
-
-    // need to override typography styles here
-    .#{$ns}-menu-item-icon,
-    .#{$ns}-submenu-icon {
-      color: $pt-dark-icon-color;
-    }
+    @include dark-menu-item-hover();
   }
 
   &:active,
@@ -181,27 +148,7 @@ $dark-menu-item-intent-colors: (
     &,
     &:hover,
     &:active {
-      background-color: rgba(nth(map-get($dark-menu-item-intent-colors, "primary"), 1), 0.2);
-      color: nth(map-get($dark-menu-item-intent-colors, "primary"), 2);
-
-      &::before,
-      .#{$ns}-menu-item-icon,
-      .#{$ns}-submenu-icon {
-        color: nth(map-get($dark-menu-item-intent-colors, "primary"), 2);
-      }
-
-      @each $intent in ("success", "warning", "danger") {
-        &.#{$ns}-intent-#{$intent} {
-          background-color: rgba(nth(map-get($dark-menu-item-intent-colors, $intent), 1), 0.2);
-          color: nth(map-get($dark-menu-item-intent-colors, $intent), 2);
-
-          &::before,
-          .#{$ns}-menu-item-icon,
-          .#{$ns}-submenu-icon {
-            color: inherit;
-          }
-        }
-      }
+      @include menu-item-selected-active(true);
     }
   }
 
@@ -223,6 +170,75 @@ $dark-menu-item-intent-colors: (
   /* stylelint-enable declaration-no-important */
 }
 
+@mixin menu-item-hover() {
+  background-color: $menu-item-color-hover;
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+
+  &.#{ns}-selected {
+    @include menu-item-selected-active(false);
+  }
+}
+
+@mixin dark-menu-item-hover() {
+  color: inherit;
+
+  // need to override typography styles here
+  .#{$ns}-menu-item-icon,
+  .#{$ns}-submenu-icon {
+    color: $pt-dark-icon-color;
+  }
+
+  &.#{ns}-selected {
+    @include menu-item-selected-active(true);
+  }
+}
+
+@mixin menu-item-selected-active($is-dark) {
+  background-color: rgba(nth(map-get($menu-item-intent-colors, "primary"), 1), 0.1);
+  color: nth(map-get($menu-item-intent-colors, "primary"), 2);
+
+  @if $is-dark {
+    background-color: rgba(nth(map-get($dark-menu-item-intent-colors, "primary"), 1), 0.2);
+    color: nth(map-get($dark-menu-item-intent-colors, "primary"), 2);
+  }
+
+  &::before,
+  .#{$ns}-menu-item-icon,
+  .#{$ns}-submenu-icon {
+    color: nth(map-get($menu-item-intent-colors, "primary"), 2);
+
+    @if $is-dark {
+      color: nth(map-get($dark-menu-item-intent-colors, "primary"), 2);
+    }
+  }
+
+  .#{$ns}-menu-item-label {
+    @if not $is-dark {
+      color: inherit;
+    }
+  }
+
+  @each $intent in ("success", "warning", "danger") {
+    &.#{$ns}-intent-#{$intent} {
+      background-color: rgba(nth(map-get($menu-item-intent-colors, $intent), 1), 0.1);
+      color: nth(map-get($menu-item-intent-colors, $intent), 2);
+
+      @if $is-dark {
+        background-color: rgba(nth(map-get($dark-menu-item-intent-colors, $intent), 1), 0.2);
+        color: nth(map-get($dark-menu-item-intent-colors, $intent), 2);
+      }
+
+      &::before,
+      .#{$ns}-menu-item-icon,
+      .#{$ns}-submenu-icon {
+        color: inherit;
+      }
+    }
+  }
+}
+
 @mixin menu-item-intent($intent, $is-dark, $bg-color, $fg-color, $fg-color-active) {
   &.#{$ns}-intent-#{$intent} {
     color: $fg-color;

diff --git a/packages/core/src/components/menu/_submenu.scss b/packages/core/src/components/menu/_submenu.scss
@@ -17,11 +17,22 @@
       // keep a trail of hovered items as submenus are opened
       /* stylelint-disable scss/at-extend-no-missing-placeholder */
       &:not([class*="#{$ns}-intent-"]) {
-        @extend .#{$ns}-menu-item, :hover;
+        @include menu-item-hover();
+        .#{$ns}-dark & {
+          @include dark-menu-item-hover();
+        }
       }
 
       &[class*="#{$ns}-intent-"] {
-        @extend .#{$ns}-menu-item, .#{$ns}-selected;
+        &,
+        &:hover,
+        &:active {
+          @include menu-item-selected-active(false);
+
+          .#{$ns}-dark & {
+            @include menu-item-selected-active(true);
+          }
+        }
       }
       /* stylelint-enable scss/at-extend-no-missing-placeholder */
     }