[WIP] Tweak completion styling

[bryphe]

• Colorize icons based on token colors
• Use letters instead of abstract icons

[akinsho]

@bryphe very cool that you're looking at using TokenThemeProvider just wanted to mention that atm the way its implemented it currently doesn't render children just things passed in as a render prop aka

  <TokenThemeProvider render={({ styles }) =>
    <StyledDiv styles={styles}> //(this likely needs to be a styled component)
		<span className="variable-other-constant">hi</span>
	</StyledDiv> 
  }>
   
	const StyledDiv = styled.div`
		${p => p.styles};
	`       

I'm looking to tweak it down the line so it can take children and/or render prop children, but the idea is that it generates a bunch of style rules and an associated theme and passes it as an arg in the render prop but the consumer has to specifically make use of the styles.

[bryphe]

Ah thanks for the heads up, @Akin909 ! I'll see if I can get that hooked up.

For the completion icons, there's also some different requirements (I want to set the background to the highlight color, and the foreground to editor.background) - I wonder if I should add like an invert class or try and generate the styles myself from what the TokenThemeProvider gives?

[akinsho]

@bryphe that was the sort of functionality I was/am hoping to add to that component as inverting foreground with background would be a case of flipping the way the classes are structured.

In #1705 I've incorporated the methods which were in the file into the react component so for example the construct classNames fn could take a prop called inverse and set fg to bg and bg to fore ground etc.