chore: fix when forced colors active svg icons still have colours (#1867

)
momentum-design · Jan 24, 2025 · a6cc562 · a6cc562
1 parent f2d0f63
commit a6cc562
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 32 deletions.
diff --git a/web-components/package.json b/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@momentum-ui/web-components",
-  "version": "2.17.2",
+  "version": "2.17.3",
   "author": "Yana Harris",
   "license": "MIT",
   "repository": "https://github.com/momentum-design/momentum-ui.git",

diff --git a/web-components/src/components/coachmark-popover/scss/coachmark-popover.scss b/web-components/src/components/coachmark-popover/scss/coachmark-popover.scss
@@ -25,7 +25,7 @@
       align-items: center;
 
       &.hide-close {
-        margin-right: constants.$main-padding;;
+        margin-right: constants.$main-padding;
       }
     }
 
@@ -58,27 +58,4 @@
       flex-grow: 1;
     }
   }
-}
-
-@media (forced-colors:active) {
-  .md-coachmark {
-
-    &__popper {  
-      background-color: Canvas;
-      outline: 1px solid CanvasText;
-    }
-  }
-
-  .md-coachmark__popper--top .md-coachmark__arrow,
-  .md-coachmark__popper--bottom .md-coachmark__arrow {
-    border-left: 0.625rem solid Canvas;
-    border-right: 0.625rem solid Canvas;
-  }
-
-  .md-coachmark__popper--right .md-coachmark__arrow,
-  .md-coachmark__popper--left .md-coachmark__arrow {
-    border-top: 0.625rem solid Canvas;
-    border-bottom: 0.625rem solid Canvas;
-  }
-
 }
diff --git a/web-components/src/components/favorite/scss/favorite.scss b/web-components/src/components/favorite/scss/favorite.scss
@@ -20,11 +20,6 @@
     position: absolute;
   }
 
-  md-icon,
-  md-icon::part(icon) {
-    color: var(--button-secondary-text-color);   
-  }
-
   &:hover {
     background-color: var(--button-favorite-hover-bg-color);
   }
@@ -94,6 +89,7 @@
     md-icon,
     md-icon::part(icon) {
       color: ButtonText;
+      fill: ButtonText;
     }
 
     &:focus{
@@ -106,12 +102,14 @@
 
       md-icon::part(icon) {
         color: GrayText;
+        fill: GrayText;
       }
     }
 
     &--active {
       md-icon::part(icon) {
         color: ButtonText;
+        fill: ButtonText;
       }
     }
   }

diff --git a/web-components/src/components/icon/scss/icon.scss b/web-components/src/components/icon/scss/icon.scss
@@ -33,6 +33,6 @@
   }
 
   svg {
-    color: currentColor;
+    fill: currentColor;
   }
 }
diff --git a/web-components/src/components/menu-overlay/scss/menu-overlay.scss b/web-components/src/components/menu-overlay/scss/menu-overlay.scss
@@ -106,4 +106,65 @@
     top: -19px;
     right: -17px;
   }
+
+  @media (forced-colors: active) {
+
+    .overlay-container[data-popper-placement^="top"] > .overlay-arrow {
+      forced-color-adjust: none;
+      border-left: solid $arrow-size transparent;
+      border-right: solid $arrow-size transparent;
+      border-top: solid $arrow-size ButtonBorder;
+      bottom: $arrow-offset;      
+    }
+
+    .overlay-container[data-popper-placement^="bottom"] > .overlay-arrow {
+      forced-color-adjust: none;
+      border-bottom: solid $arrow-size ButtonBorder;
+      border-left: solid $arrow-size transparent;
+      border-right: solid $arrow-size transparent;
+      top: $arrow-offset;
+    }
+
+    .overlay-container[data-popper-placement^="right"] > .overlay-arrow {
+      forced-color-adjust: none;
+      border-bottom: solid $arrow-size transparent;
+      border-right: solid $arrow-size ButtonBorder;
+      border-top: solid $arrow-size transparent;
+      left: $arrow-offset;      
+    }
+
+    .overlay-container[data-popper-placement^="left"] > .overlay-arrow {
+      forced-color-adjust: none;
+      border-bottom: solid $arrow-size transparent;
+      border-left: solid $arrow-size ButtonBorder;
+      border-top: solid $arrow-size transparent;
+      right: $arrow-offset;      
+    }
+
+    .overlay-container > .overlay-arrow:after {
+      forced-color-adjust: none;
+      content: "";
+      position: absolute;
+      border-width: 19px;
+      border-style: solid;
+      border-color: transparent;
+    }
+
+    // styling to create triangle border to match menu for pointer
+    .overlay-container[data-popper-placement^="top"] > .overlay-arrow:after {
+      border-top-color: Canvas;
+    }
+
+    .overlay-container[data-popper-placement^="bottom"] > .overlay-arrow:after {
+      border-bottom-color: Canvas;
+    }
+
+    .overlay-container[data-popper-placement^="right"] > .overlay-arrow:after {
+      border-right-color: Canvas;
+    }
+
+    .overlay-container[data-popper-placement^="left"] > .overlay-arrow:after {
+      border-left-color: Canvas;      
+    }
+  }
 }
diff --git a/web-components/src/components/toggle-switch/scss/toggle-switch.scss b/web-components/src/components/toggle-switch/scss/toggle-switch.scss
@@ -24,7 +24,7 @@
             border: none;
             &::after {
               left: calc(100% - 2px);
-              transform: translateX(-100%) translateY(-50%);              
+              transform: translateX(-100%) translateY(-50%);
             }
           }
         }
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,6 +33,6 @@ @@
       }
       svg {
-        color: currentColor;
+        fill: currentColor;
       }
     }