Change primary selection color...

[goyalyashpal]

Fix #5314
in continuation (or maybe now in precession) of #5309

Please squash the commits

Sample text

(for myself as i don't have latest tutor)

=================================================================
=             10.1 CYCLING AND REMOVING SELECTIONS              =
=================================================================

 Type ) and ( to cycle the primary selection forward and backward
 through selections respectively.

 Type Alt-, to remove the primary selection.

 1. Move the cursor to the line marked '-->' below.
 2. Select both lines with xx or 2x.
 3. Type s to select, type "would" and enter.
 4. Use ( and ) to cycle the primary selection and remove the
    very second "would" with Alt-, .
 5. Type c "wood" to change the remaining "would"s to "wood".

 --> How much would would a wouldchuck chuck
 --> if a wouldchuck could chuck would?

Screenshots:

wezterm-gui_dczOYB1t3h.mp4

The colors in this pr are

key = value	color (hsl)	comment	contrast
"ui.background" = { bg = "midnight" }	#3b224c = hsl(276, 38%, 22%)	default
"ui.text" = { fg = "lavender" }	#a4a0e8 = hsl(243, 61%, 77%)	default	5.77
"ui.selection" = { bg = " #540099 " }	hsl(273, 100%, 30%)	default	4.77
"ui.cursor" = { fg = " #8E89E6 ", modifiers = ["reversed"] }	hsl(243, 65%, 72%)	proposed	4.52
"ui.selection.primary" = { bg = " #1313BE " }	hsl(240, 82%, 41%)	proposed	4.71
"ui.cursor.primary" = { modifiers = ["reversed"] }		default-ish	5.77

vivaldi_GdJI9jxNMp.mp4

Constrast scale used

• Higher is better
• It is a ratio of some sorts between the two colors,
• so, naturally, 1:1 means both are equal i.e. same color, i.e. no contrast
• it measures 21:1 for black on white
• WCAG 2.0 level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. ref: WebAIM

Contrast Constraints

• So many constraints, oh god. Selection should contrast with background, with other selections, and most importantly with text while matching the color scheme harmonically.
• I wanted to keep the currently used selection/cursor colors, and add only two more (rather than tweaking all 4).
• I preferred to maintain contrast with text and background; while sacrificing inter-element contrast (i.e. with other selections).

This was the best i could do. It's noticeable when you know it, and when cycling between; may not be so in a new static screenshot - i ain't sure.

Following colors (now rejected) were chosen before this readability consideration:

• #1212CE = hsl(240, 84%, 44%) or #8700F5 = hsl(273, 100%, 48%) for selection.primary
• #8984E1 = hsl(243, 61%, 70%) or #756FDC = hsl(243, 61%, 65%) for ui.cursor

How this color is obtained:

• "The default theme.toml can be found here, ..."
  - https://docs.helix-editor.com/themes.html

• Inspired from paletton site's preview widget, I made a small local browser page (html/css) for live testing how t'd look.
• Contrast with text was maximised manually in hsl space using this cool contrast-checker from coolors. It wouldn't have been possible without it, as the WebAIM were too limited with their color picking sliders.

[gibbz00]

See also #5130

[goyalyashpal]

sorry i mistook, please ignore that

[gibbz00]

Ahh ok, was just about to send this write-up:

Almost!

There is no secondary cursor, only primary and "normal". Currently ui.cursor sets both, unless ui.cursor.primary exists. The PR I sent adds the ability to set the primary cursor for each mode (normal, select, insert).

[goyalyashpal]

hey!
i am pretty content with the colors after this last commit,
however, " there's just one problem "

For the ui.selection.primary, i want to use the specified color only when there are multiple selections, and fallback to the ui.selection otherwise when there's single selection.

Is there a way to do that?

As otherwise, ...

It looks like this (the "after" part) for single selections, whereas "before" is what's wanted

[goyalyashpal]

• both the suggested colors are final from my side,
• I've marked this as ready to indicate that as separator

i wanted to cleanup the commit history a bit too, but don't have skills and time to do it

remaining is:

• the above mentioned issue, which i think is possible to resolve, but don't know how
• ... as i ain't any familiar with toml or helix configs
• but that can be handled in the commit review suggestions and it doesn't need my intervention

... so, I will not mark this as draft now, as that may deter any reviewer from thinking that i am still working on it (while any further, I will not as (hopefully) my work is done

[archseer]

The blue is too strong and doesn't fit with the rest of the theme. The current selection color should be made primary and a different tint chosen for secondary selections -- I had some ideas but it didn't work well in all modes, requires #5130 first

[goyalyashpal]

The blue is too strong

i agree with that... that's why i wanted to keep it to minimum... but i see your point. I will try suggesting other colors, but it won't be untill a month later.

[goyalyashpal]

Suggested change

	"ui.selection" = { bg = "#540099" }
	"ui.selection.primary" = { bg = "#540099" }
	"ui.selection.primary" = { bg = "#1313BE" }
	# TODO: namespace ui.cursor as ui.selection.cursor?
	"ui.cursor" = { fg = "#8E89E6", modifiers = ["reversed"] }
	"ui.cursor.primary" = { modifiers = ["reversed"] }
	"ui.selection" = { bg = "#5F005C" }
	"ui.selection.primary" = { bg = "#540099" }
	# TODO: namespace ui.cursor as ui.selection.cursor?
	"ui.cursor" = { fg = "#B081CC", modifiers = ["reversed"] }
	"ui.cursor.primary" = { modifiers = ["reversed"] }

how's this looking? @archseer

pretty muted, fits well with theme. overall seems nicely distinguishable as well, decent contrast ratio as well (5.34, 4.51). some tweaking can be done but this ain't bad either imo.

[goyalyashpal]

"ui.selection" = { bg = "#64005c" } is also looking a bit more distinct from background,

[goyalyashpal]

I was just watching the video at this comment @ 0:14: texstudio-org/texstudio#2467 (comment)

and, the primary/secondary color felt similar .... but yeah, the background being one extrema (dark or ligh) leaves many other contrasting color options for other stuff, as compared to it being relatively in between-ish.

[goyalyashpal]

Making it work with reverse will be easier once we land #5130
- @ archseer at #5281 (comment)

I had some ideas but it didn't work well in all modes, requires #5130 first

hey @archseer , now that's done, can u share your ideas?

[goyalyashpal]

one more thing - i don't know if possible; can be to set the cursorcolumn (and cursorline too) to ON when in multiple selection - this would save this hassle with theming and such.