allow color transitions on tab text with fade

app/renderer/components/tabs/content/tabTitle.js

@@ -21,6 +21,7 @@ const isDarwin = platformUtil.isDarwin()
 
 // Styles
 const globalStyles = require('../../styles/global')
+const {theme} = require('../../styles/theme')
 
 class TabTitle extends React.Component {
   mergeProps (state, ownProps) {
@@ -73,9 +74,13 @@ const styles = StyleSheet.create({
     minWidth: 0, // see https://stackoverflow.com/a/36247448/4902448
     marginLeft: '6px',
     overflow: 'hidden',
+    // relative position is required for background-clip
     position: 'relative',
-    WebkitBackgroundClip: 'text',
-    backgroundImage: `linear-gradient(to left, transparent 0, var(--tab-color) 9px)`,
+    transition: `background ${theme.tab.transitionDurationOut} ${theme.tab.transitionEasingOut}`,
+    // fade text color to transparent if it's too long,
+    // whilst preserving ability to animate the color with a second background layer
+    background: `linear-gradient(to left, var(--tab-background) 0, var(--tab-color) 9px) right top / 9px 100% no-repeat, var(--tab-color)`,
+    WebkitBackgroundClip: 'text !important', // !important is neccessary because aphrodite will put this at top of ruleset :-(
     color: 'transparent'
   },