UX for LG/LU syntax highlight

[hibrenda]

need to be consistent for lu/lg all up view and also for inline editor

[cwhitten]

ping @DesignPolice :)

[DesignPolice]

got it

[cwhitten]

ping @DesignPolice do we have a decision on colors?

[DesignPolice]

I had made one, but got some different feedback, let me circle back and see if one of the new options can get approved.

[DesignPolice]

I worked with Dong before he left town on this, things were looking a bit too orange for me, the cardinal was long standing color, my intention was just to make something that was a traditional VS color styling that used our colors when possible - but open to thoughts.

orange and cardinal are pretty similar hues

Here is the current linked Figma file
https://www.figma.com/file/Ux0vucOvaLL2xH22WpFgV65X/MarcB_Composer-UI?node-id=3270%3A231

It can be a change next week, or CW and Vish can just make the tweaks. - M

[DesignPolice]

@cwhitten @boydc2014

This looks like this was backlogged, not a big deal - This was the last we looked at. v13 - My hope was to just get colors to be as familiar as we could get using VS "traditional" colors that were close to our color palettes -

https://www.figma.com/file/Ux0vucOvaLL2xH22WpFgV65X/MarcB_Composer-UI?node-id=3707%3A27305

[zhixzhan]

Current color theme references vscode's recommend, use not more than 5 color (most-used by other languages) highlighting the document.

The color customization is written in this file:

BotFramework-Composer/Composer/packages/lib/code-editor/src/languages/lg.ts

Lines 112 to 124 in fc61812

	monaco.editor.defineTheme('lgtheme', {
	base: 'vs',
	inherit: false,
	colors: {},
	rules: [
	{ token: 'template-name', foreground: '0000FF' },
	{ token: 'function-name', foreground: '79571E' },
	{ token: 'keywords', foreground: '0000FF' },
	{ token: 'comments', foreground: '7A7574' },
	{ token: 'number', foreground: '00A32B' },
	{ token: 'string', foreground: 'DF2C2C' },
	{ token: 'structure-name', foreground: '00B7C3' },
	],

preview with color:

[hibrenda]

@DesignPolice need your suggestions

[DesignPolice]

Thanks @hibrenda and @zhixzhan we will discuss it this morning -

[hibrenda]

Need discussion for syntax highlighting (template vs func) @DesignPolice @cwhitten

[DesignPolice]

Thanks Brenda, I will touchbase with Chris and Vish on this to get some feedback - thanks M

[DesignPolice]

Attached are the colors that Dong and I looked at - I don't use code editors - so my thought was that we should use Fabric colors that align with the default colors in Visual Studio. There are a couple of options on a few of them.

Making it as consistent as possible. If @cwhitten or @vishwacsena can help me verify that.

[DesignPolice]

I talked to @tdurnford and he pulled up the default Visual Studio coloring - they have a variety of themes which would be a nice add for us in the future. Here is their base color on white. So maybe I can just sample colors from this in the Fabric palette - does anyone have issues with that? I don't think it is beautiful, but with only one option I think it should be familiar to start with.

[boydc2014]

I talked to @tdurnford and he pulled up the default Visual Studio coloring - they have a variety of themes which would be a nice add for us in the future. Here is their base color on white. So maybe I can just sample colors from this in the Fabric palette - does anyone have issues with that? I don't think it is beautiful, but with only one option I think it should be familiar to start with.

No problem at all with keyword as blue, and string literal as dark red (right?), it's just we have more stuff, like template-name, and function(template-ref), we also need some color for that

[boydc2014]

This is a good example our colors today

[DesignPolice]

okay. After some frustration, I went through and checked colors on Visual Studio default colors, that hit contrast numbers. These descriptions came from @boydc2014 chatting about the different options.

so looking at the two attachments these are Composer colors, that hit contrast numbers, that are pretty similar to this VS default. There are lots of options built in to the Monaco editor that help with Accessibility

https://github.com/Microsoft/monaco-editor/wiki/Monaco-Editor-Accessibility-Guide

So lets try plugging these colors in and see how v14 looks in reality

thanks

[cwhitten]

addressed in #1706