fix(ui-toolkit): fix disabled popover color in webkit

fixes #1050

packages/my-joy-beta/src/components/create-instance/affinity.js

@@ -26,7 +26,11 @@ export const Rule = rule => (
         The instance
       </H5>
       <FormGroup name="rule-instance-conditional" field={Field}>
-        <Select touched={rule['rule-instance-conditional']} width={remcalc(66)} embedded>
+        <Select
+          touched={rule['rule-instance-conditional']}
+          width={remcalc(66)}
+          embedded
+        >
           <option value="must">must</option>
           <option value="should">should</option>
         </Select>
@@ -35,7 +39,11 @@ export const Rule = rule => (
         be on
       </H5>
       <FormGroup name="rule-instance-placement" field={Field}>
-        <Select touched={rule['rule-instance-placement']} width={remcalc(90)} embedded>
+        <Select
+          touched={rule['rule-instance-placement']}
+          width={remcalc(90)}
+          embedded
+        >
           <option value="same">the same</option>
           <option value="different">a different</option>
         </Select>

packages/ui-toolkit/src/popover/__tests__/__snapshots__/popover.spec.js.snap

@@ -41,6 +41,7 @@ Array [
 
 .c1:hover {
   color: rgb(53,53,53);
+  -webkit-text-fill-color: currentcolor;
 }
 
 .c0 {

packages/ui-toolkit/src/popover/item.js

@@ -17,11 +17,13 @@ const BaseItem = styled.span`
 
     &:hover {
       color: ${props => props.theme.secondaryHover};
+      -webkit-text-fill-color: currentcolor;
     }
   `};
 
   ${is('disabled')`
     color: ${props => props.theme.grey};
+    -webkit-text-fill-color: currentcolor;
   `};
 `;