update svg fill to use currentcolor so svg defaults to text color, ch…

…ange some currentColor to currentcolor
microsoft · Jan 5, 2021 · 6dc07e3 · 6dc07e3
1 parent d0d59e6
commit 6dc07e3
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 22 deletions.
diff --git a/packages/web-components/src/flipper/flipper.styles.ts b/packages/web-components/src/flipper/flipper.styles.ts
@@ -21,7 +21,7 @@ export const FlipperStyles = css`
         align-items: center;
         margin: 0;
         position: relative;
-        fill: ${neutralForegroundRestBehavior.var};
+        fill: currentcolor;
         color: ${neutralForegroundRestBehavior.var};
         background: transparent;
         border: none;
@@ -47,7 +47,7 @@ export const FlipperStyles = css`
     .previous {
         position: relative;
         ${
-          /* Glyph size and margin-left is temporary - 
+          /* Glyph size and margin-left is temporary -
             replace when adaptive typography is figured out */ ''
         } width: 16px;
         height: 16px;
@@ -101,7 +101,7 @@ export const FlipperStyles = css`
             :host .next,
             :host .previous {
                 color: ${SystemColors.ButtonText};
-                fill: ${SystemColors.ButtonText};
+                fill: currentcolor;
             }
             :host::before {
                 background: ${SystemColors.Canvas};
@@ -117,7 +117,7 @@ export const FlipperStyles = css`
             :host(:hover) .previous {
                 forced-color-adjust: none;
                 color: ${SystemColors.HighlightText};
-                fill: ${SystemColors.HighlightText};
+                fill: currentcolor;
             }
             :host(.disabled) {
                 opacity: 1;

diff --git a/packages/web-components/src/menu-item/menu-item.styles.ts b/packages/web-components/src/menu-item/menu-item.styles.ts
@@ -24,7 +24,7 @@ export const MenuItemStyles = css`
         white-space: nowrap;
         overflow: hidden;
         color: ${neutralForegroundRestBehavior.var};
-        fill: ${neutralForegroundRestBehavior.var};
+        fill: currentcolor;
         cursor: pointer;
         font-family: var(--body-font);
         font-size: var(--type-ramp-base-font-size);
@@ -54,7 +54,7 @@ export const MenuItemStyles = css`
     :host(.disabled:hover) .start,
     :host(.disabled:hover) .end,
     :host(.disabled:hover)::slotted(svg) {
-        fill: ${neutralForegroundRestBehavior.var};
+        fill: currentcolor;
     }
 
     .content {
@@ -114,7 +114,7 @@ export const MenuItemStyles = css`
                 border-color: ${SystemColors.ButtonText};
                 box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${SystemColors.HighlightText};
                 color: ${SystemColors.HighlightText};
-                fill: ${SystemColors.HighlightText};
+                fill: currentcolor;
             }
             :host(.disabled),
             :host(.disabled:hover),
@@ -123,7 +123,7 @@ export const MenuItemStyles = css`
             :host(.disabled:hover)::slotted(svg) {
                 background: ${SystemColors.Canvas};
                 color: ${SystemColors.GrayText};
-                fill: ${SystemColors.GrayText};
+                fill: currentcolor;
                 opacity: 1;
             }
         `,

diff --git a/packages/web-components/src/styles/patterns/button.ts b/packages/web-components/src/styles/patterns/button.ts
@@ -38,7 +38,7 @@ export const BaseButtonStyles: ElementStyles = css`
         background-color: ${neutralFillRestBehavior.var};
         color: ${neutralForegroundRestBehavior.var};
         border-radius: calc(var(--corner-radius) * 1px);
-        fill: currentColor;
+        fill: currentcolor;
         cursor: pointer;
     }
 
@@ -125,7 +125,7 @@ export const BaseButtonStyles: ElementStyles = css`
           background-color: ${SystemColors.ButtonFace};
           border-color: ${SystemColors.ButtonText};
           color: ${SystemColors.ButtonText};
-          fill: currentColor;
+          fill: currentcolor;
         }
 
         :host(:hover) {
@@ -171,7 +171,7 @@ export const BaseButtonStyles: ElementStyles = css`
           border-color: ${SystemColors.LinkText};
           box-shadow: 0 0 0 1px ${SystemColors.LinkText} inset;
           color: ${SystemColors.LinkText};
-          fill: currentColor;
+          fill: currentcolor;
         }
     `,
   ),
@@ -243,7 +243,7 @@ export const AccentButtonStyles = css`
             border-color: ${SystemColors.LinkText};
             box-shadow: none;
             color: ${SystemColors.LinkText};
-            fill: currentColor;
+            fill: currentcolor;
         }
 
         :host(.accent[href]) .control:${focusVisible} {
@@ -478,20 +478,20 @@ export const StealthButtonStyles = css`
             background-color: none;
             border-color: transparent;
             color: ${SystemColors.ButtonText};
-            fill: currentColor;
+            fill: currentcolor;
         }
 
         :host(.stealth:hover) .control {
             background-color: ${SystemColors.Highlight};
             border-color: ${SystemColors.Highlight};
             color: ${SystemColors.HighlightText};
-            fill: currentColor;
+            fill: currentcolor;
         }
 
         :host(.stealth:${focusVisible}) .control {
             box-shadow: 0 0 0 1px ${SystemColors.Highlight};
             color: ${SystemColors.HighlightText};
-            fill: currentColor;
+            fill: currentcolor;
         }
 
         :host(.stealth.disabled) {
@@ -512,13 +512,13 @@ export const StealthButtonStyles = css`
             background-color: ${SystemColors.LinkText};
             border-color: ${SystemColors.LinkText};
             color: ${SystemColors.HighlightText};
-            fill: currentColor;
+            fill: currentcolor;
         }
 
       :host(.stealth:${focusVisible}[href]) .control {
           box-shadow: 0 0 0 1px ${SystemColors.LinkText};
           color: ${SystemColors.LinkText};
-          fill: currentColor;
+          fill: currentcolor;
       }
     `,
   ),

diff --git a/packages/web-components/src/tabs/tab/tab.styles.ts b/packages/web-components/src/tabs/tab/tab.styles.ts
@@ -83,19 +83,19 @@ export const TabStyles = css`
                 forced-color-adjust: none;
                 border-color: transparent;
                 color: ${SystemColors.ButtonText};
-                fill: ${SystemColors.ButtonText};
+                fill: currentcolor;
             }
             :host(:hover),
             :host(.vertical:hover),
             :host([aria-selected="true"]:hover) {
                 background: ${SystemColors.Highlight};
                 color: ${SystemColors.HighlightText};
-                fill: ${SystemColors.HighlightText};
+                fill: currentcolor;
             }
             :host([aria-selected="true"]) {
                 background: ${SystemColors.HighlightText};
                 color: ${SystemColors.Highlight};
-                fill: ${SystemColors.Highlight};
+                fill: currentcolor;
             }
             :host(:${focusVisible}) {
                 border-color: ${SystemColors.ButtonText};

diff --git a/packages/web-components/src/text-field/text-field.styles.ts b/packages/web-components/src/text-field/text-field.styles.ts
@@ -63,7 +63,7 @@ export const TextFieldStyles = css`
         line-height: var(--type-ramp-base-line-height);
         margin-bottom: 4px;
     }
-   
+
     .label__hidden {
       display: none;
       visibility: hidden;
@@ -74,7 +74,7 @@ export const TextFieldStyles = css`
         margin: auto;
         fill: currentcolor;
     }
-    
+
     ::slotted(svg) {      ${
       /* Glyph size and margin-left is temporary -
             replace when adaptive typography is figured out */ ''