Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update colors to follow upstream #42

Merged
merged 1 commit into from
Sep 8, 2024
Merged

Update colors to follow upstream #42

merged 1 commit into from
Sep 8, 2024

Conversation

echasnovski
Copy link
Contributor

This is a follow up as per this comment. There proved to be much more differences than I anticipated. Probably because palette changed several times.

Details:

  • https://github.com/ayu-theme/ayu-colors was used as reference (the https://github.com/ayu-theme/ayu-colors/blob/master/colors.svg in particular).
  • Colors which are defined with alpha channel are converted to not have it (because Neovim/Vim support only three channel hex) by mixing with correct normal background. Example for comment: - #787B8099 is a color for "light" style. - It corresponds to rgba(120, 123, 128, 0.6). - Mixing it with rgb(248, 249, 250) for light background (#F8F9FA) gives the rgb(1200.6+2480.4, 1230.6+2490.4, 1280.6+2500.4), which is rgb(171.2, 173.4, 176.8) = rgb(171, 173, 177) = #ABADB1
  • There are no reference for the following colors (left as is): - colors.panel_border - colors.selection_border - colors.warning
  • There are two choices for 'selection_bg': 'editor.selection.active' and 'ui.selection.normal'. As current ones have blue-ish hue, the 'editor.selection.active' was used.
  • For 'colors.fg_idle' used the 'ui.fg'.

Notes:

  • All changes were done by hand, so there might be errors.
  • The most visible changes are in "ui" portion. For example, in selections and "line" (which is arguably more usable in the new version for the "dark" style).

Reference:

Raw 'colors.svg' used for this (somewhat big) 
<?xml version="1.0" standalone="no" ?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  <svg width="100%" height="108em" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" font-family="monospace" text-anchor="middle">
    <g>
      <rect height="108em" width="25%" x="25%" fill="#f8f9fa" />
      <rect height="108em" width="25%" x="50%" fill="#1f2430" />
      <rect height="108em" width="25%" x="75%" fill="#0b0e14" />
    </g>
    <g font-weight="bold">
      <text font-family="sans-serif" font-size="13" y="3em" x="12.5%" fill="#333333">Path</text>
      <text font-family="sans-serif" font-size="13" y="3em" x="37.5%" fill="#8a9199">Light</text>
      <text font-family="sans-serif" font-size="13" y="3em" x="62.5%" fill="#707a8c">Mirage</text>
      <text font-family="sans-serif" font-size="13" y="3em" x="87.5%" fill="#565b66">Dark</text>
    </g>

    
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="4.8em" rx="2" ry="2" fill="#55b4d4" />
				<rect height="1.8em" width="20%" x="52.5%" y="4.8em" rx="2" ry="2" fill="#5ccfe6" />
				<rect height="1.8em" width="20%" x="77.5%" y="4.8em" rx="2" ry="2" fill="#39bae6" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="6.5em" x="12.5%" fill="333333">syntax.tag</text>
				<text y="6.5em" x="37.5%" fill="#000000">#55B4D4</text>
				<text y="6.5em" x="62.5%" fill="#000000">#5CCFE6</text>
				<text y="6.5em" x="87.5%" fill="#000000">#39BAE6</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="7.8em" rx="2" ry="2" fill="#f2ae49" />
				<rect height="1.8em" width="20%" x="52.5%" y="7.8em" rx="2" ry="2" fill="#ffd173" />
				<rect height="1.8em" width="20%" x="77.5%" y="7.8em" rx="2" ry="2" fill="#ffb454" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="9.75em" x="12.5%" fill="333333">syntax.func</text>
				<text y="9.75em" x="37.5%" fill="#000000">#F2AE49</text>
				<text y="9.75em" x="62.5%" fill="#000000">#FFD173</text>
				<text y="9.75em" x="87.5%" fill="#000000">#FFB454</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="10.8em" rx="2" ry="2" fill="#399ee6" />
				<rect height="1.8em" width="20%" x="52.5%" y="10.8em" rx="2" ry="2" fill="#73d0ff" />
				<rect height="1.8em" width="20%" x="77.5%" y="10.8em" rx="2" ry="2" fill="#59c2ff" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="13em" x="12.5%" fill="333333">syntax.entity</text>
				<text y="13em" x="37.5%" fill="#000000">#399EE6</text>
				<text y="13em" x="62.5%" fill="#000000">#73D0FF</text>
				<text y="13em" x="87.5%" fill="#000000">#59C2FF</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="13.8em" rx="2" ry="2" fill="#86b300" />
				<rect height="1.8em" width="20%" x="52.5%" y="13.8em" rx="2" ry="2" fill="#d5ff80" />
				<rect height="1.8em" width="20%" x="77.5%" y="13.8em" rx="2" ry="2" fill="#aad94c" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="16.25em" x="12.5%" fill="333333">syntax.string</text>
				<text y="16.25em" x="37.5%" fill="#000000">#86B300</text>
				<text y="16.25em" x="62.5%" fill="#000000">#D5FF80</text>
				<text y="16.25em" x="87.5%" fill="#000000">#AAD94C</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="16.8em" rx="2" ry="2" fill="#4cbf99" />
				<rect height="1.8em" width="20%" x="52.5%" y="16.8em" rx="2" ry="2" fill="#95e6cb" />
				<rect height="1.8em" width="20%" x="77.5%" y="16.8em" rx="2" ry="2" fill="#95e6cb" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="19.5em" x="12.5%" fill="333333">syntax.regexp</text>
				<text y="19.5em" x="37.5%" fill="#000000">#4CBF99</text>
				<text y="19.5em" x="62.5%" fill="#000000">#95E6CB</text>
				<text y="19.5em" x="87.5%" fill="#000000">#95E6CB</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="19.8em" rx="2" ry="2" fill="#f07171" />
				<rect height="1.8em" width="20%" x="52.5%" y="19.8em" rx="2" ry="2" fill="#f28779" />
				<rect height="1.8em" width="20%" x="77.5%" y="19.8em" rx="2" ry="2" fill="#f07178" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="22.75em" x="12.5%" fill="333333">syntax.markup</text>
				<text y="22.75em" x="37.5%" fill="#000000">#F07171</text>
				<text y="22.75em" x="62.5%" fill="#000000">#F28779</text>
				<text y="22.75em" x="87.5%" fill="#000000">#F07178</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="22.8em" rx="2" ry="2" fill="#fa8d3e" />
				<rect height="1.8em" width="20%" x="52.5%" y="22.8em" rx="2" ry="2" fill="#ffad66" />
				<rect height="1.8em" width="20%" x="77.5%" y="22.8em" rx="2" ry="2" fill="#ff8f40" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="26em" x="12.5%" fill="333333">syntax.keyword</text>
				<text y="26em" x="37.5%" fill="#000000">#FA8D3E</text>
				<text y="26em" x="62.5%" fill="#000000">#FFAD66</text>
				<text y="26em" x="87.5%" fill="#000000">#FF8F40</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="25.8em" rx="2" ry="2" fill="#e6ba7e" />
				<rect height="1.8em" width="20%" x="52.5%" y="25.8em" rx="2" ry="2" fill="#ffdfb3" />
				<rect height="1.8em" width="20%" x="77.5%" y="25.8em" rx="2" ry="2" fill="#e6b673" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="29.25em" x="12.5%" fill="333333">syntax.special</text>
				<text y="29.25em" x="37.5%" fill="#000000">#E6BA7E</text>
				<text y="29.25em" x="62.5%" fill="#000000">#FFDFB3</text>
				<text y="29.25em" x="87.5%" fill="#000000">#E6B673</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="28.8em" rx="2" ry="2" fill="#787b8099" />
				<rect height="1.8em" width="20%" x="52.5%" y="28.8em" rx="2" ry="2" fill="#b8cfe680" />
				<rect height="1.8em" width="20%" x="77.5%" y="28.8em" rx="2" ry="2" fill="#acb6bf8c" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="32.5em" x="12.5%" fill="333333">syntax.comment</text>
				<text y="32.5em" x="37.5%" fill="#ffffff">#787B8099</text>
				<text y="32.5em" x="62.5%" fill="#000000">#B8CFE680</text>
				<text y="32.5em" x="87.5%" fill="#000000">#ACB6BF8C</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="31.8em" rx="2" ry="2" fill="#a37acc" />
				<rect height="1.8em" width="20%" x="52.5%" y="31.8em" rx="2" ry="2" fill="#dfbfff" />
				<rect height="1.8em" width="20%" x="77.5%" y="31.8em" rx="2" ry="2" fill="#d2a6ff" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="35.75em" x="12.5%" fill="333333">syntax.constant</text>
				<text y="35.75em" x="37.5%" fill="#000000">#A37ACC</text>
				<text y="35.75em" x="62.5%" fill="#000000">#DFBFFF</text>
				<text y="35.75em" x="87.5%" fill="#000000">#D2A6FF</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="34.8em" rx="2" ry="2" fill="#ed9366" />
				<rect height="1.8em" width="20%" x="52.5%" y="34.8em" rx="2" ry="2" fill="#f29e74" />
				<rect height="1.8em" width="20%" x="77.5%" y="34.8em" rx="2" ry="2" fill="#f29668" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="39em" x="12.5%" fill="333333">syntax.operator</text>
				<text y="39em" x="37.5%" fill="#000000">#ED9366</text>
				<text y="39em" x="62.5%" fill="#000000">#F29E74</text>
				<text y="39em" x="87.5%" fill="#000000">#F29668</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="37.8em" rx="2" ry="2" fill="#6cbf43" />
				<rect height="1.8em" width="20%" x="52.5%" y="37.8em" rx="2" ry="2" fill="#87d96c" />
				<rect height="1.8em" width="20%" x="77.5%" y="37.8em" rx="2" ry="2" fill="#7fd962" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="42.25em" x="12.5%" fill="333333">vcs.added</text>
				<text y="42.25em" x="37.5%" fill="#000000">#6CBF43</text>
				<text y="42.25em" x="62.5%" fill="#000000">#87D96C</text>
				<text y="42.25em" x="87.5%" fill="#000000">#7FD962</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="40.8em" rx="2" ry="2" fill="#478acc" />
				<rect height="1.8em" width="20%" x="52.5%" y="40.8em" rx="2" ry="2" fill="#80bfff" />
				<rect height="1.8em" width="20%" x="77.5%" y="40.8em" rx="2" ry="2" fill="#73b8ff" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="45.5em" x="12.5%" fill="333333">vcs.modified</text>
				<text y="45.5em" x="37.5%" fill="#000000">#478ACC</text>
				<text y="45.5em" x="62.5%" fill="#000000">#80BFFF</text>
				<text y="45.5em" x="87.5%" fill="#000000">#73B8FF</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="43.8em" rx="2" ry="2" fill="#ff7383" />
				<rect height="1.8em" width="20%" x="52.5%" y="43.8em" rx="2" ry="2" fill="#f27983" />
				<rect height="1.8em" width="20%" x="77.5%" y="43.8em" rx="2" ry="2" fill="#f26d78" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="48.75em" x="12.5%" fill="333333">vcs.removed</text>
				<text y="48.75em" x="37.5%" fill="#000000">#FF7383</text>
				<text y="48.75em" x="62.5%" fill="#000000">#F27983</text>
				<text y="48.75em" x="87.5%" fill="#000000">#F26D78</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="46.8em" rx="2" ry="2" fill="#5c6166" />
				<rect height="1.8em" width="20%" x="52.5%" y="46.8em" rx="2" ry="2" fill="#cccac2" />
				<rect height="1.8em" width="20%" x="77.5%" y="46.8em" rx="2" ry="2" fill="#bfbdb6" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="52em" x="12.5%" fill="333333">editor.fg</text>
				<text y="52em" x="37.5%" fill="#ffffff">#5C6166</text>
				<text y="52em" x="62.5%" fill="#000000">#CCCAC2</text>
				<text y="52em" x="87.5%" fill="#000000">#BFBDB6</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="49.8em" rx="2" ry="2" fill="#fcfcfc" />
				<rect height="1.8em" width="20%" x="52.5%" y="49.8em" rx="2" ry="2" fill="#242936" />
				<rect height="1.8em" width="20%" x="77.5%" y="49.8em" rx="2" ry="2" fill="#0d1017" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="55.25em" x="12.5%" fill="333333">editor.bg</text>
				<text y="55.25em" x="37.5%" fill="#000000">#FCFCFC</text>
				<text y="55.25em" x="62.5%" fill="#ffffff">#242936</text>
				<text y="55.25em" x="87.5%" fill="#ffffff">#0D1017</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="52.8em" rx="2" ry="2" fill="#8a91991a" />
				<rect height="1.8em" width="20%" x="52.5%" y="52.8em" rx="2" ry="2" fill="#1a1f29" />
				<rect height="1.8em" width="20%" x="77.5%" y="52.8em" rx="2" ry="2" fill="#131721" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="58.5em" x="12.5%" fill="333333">editor.line</text>
				<text y="58.5em" x="37.5%" fill="#000000">#8A91991A</text>
				<text y="58.5em" x="62.5%" fill="#ffffff">#1A1F29</text>
				<text y="58.5em" x="87.5%" fill="#ffffff">#131721</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="55.8em" rx="2" ry="2" fill="#035bd626" />
				<rect height="1.8em" width="20%" x="52.5%" y="55.8em" rx="2" ry="2" fill="#409fff40" />
				<rect height="1.8em" width="20%" x="77.5%" y="55.8em" rx="2" ry="2" fill="#409fff4d" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="61.75em" x="12.5%" fill="333333">editor.selection.active</text>
				<text y="61.75em" x="37.5%" fill="#ffffff">#035BD626</text>
				<text y="61.75em" x="62.5%" fill="#000000">#409FFF40</text>
				<text y="61.75em" x="87.5%" fill="#000000">#409FFF4D</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="58.8em" rx="2" ry="2" fill="#035bd612" />
				<rect height="1.8em" width="20%" x="52.5%" y="58.8em" rx="2" ry="2" fill="#409fff21" />
				<rect height="1.8em" width="20%" x="77.5%" y="58.8em" rx="2" ry="2" fill="#409fff21" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="65em" x="12.5%" fill="333333">editor.selection.inactive</text>
				<text y="65em" x="37.5%" fill="#ffffff">#035BD612</text>
				<text y="65em" x="62.5%" fill="#000000">#409FFF21</text>
				<text y="65em" x="87.5%" fill="#000000">#409FFF21</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="61.8em" rx="2" ry="2" fill="#9f40ff2b" />
				<rect height="1.8em" width="20%" x="52.5%" y="61.8em" rx="2" ry="2" fill="#695380" />
				<rect height="1.8em" width="20%" x="77.5%" y="61.8em" rx="2" ry="2" fill="#6c5980" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="68.25em" x="12.5%" fill="333333">editor.findMatch.active</text>
				<text y="68.25em" x="37.5%" fill="#ffffff">#9F40FF2B</text>
				<text y="68.25em" x="62.5%" fill="#ffffff">#695380</text>
				<text y="68.25em" x="87.5%" fill="#ffffff">#6C5980</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="64.8em" rx="2" ry="2" fill="#9f40ffcc" />
				<rect height="1.8em" width="20%" x="52.5%" y="64.8em" rx="2" ry="2" fill="#69538066" />
				<rect height="1.8em" width="20%" x="77.5%" y="64.8em" rx="2" ry="2" fill="#6c598066" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="71.5em" x="12.5%" fill="333333">editor.findMatch.inactive</text>
				<text y="71.5em" x="37.5%" fill="#ffffff">#9F40FFCC</text>
				<text y="71.5em" x="62.5%" fill="#ffffff">#69538066</text>
				<text y="71.5em" x="87.5%" fill="#ffffff">#6C598066</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="67.8em" rx="2" ry="2" fill="#8a9199cc" />
				<rect height="1.8em" width="20%" x="52.5%" y="67.8em" rx="2" ry="2" fill="#8a9199cc" />
				<rect height="1.8em" width="20%" x="77.5%" y="67.8em" rx="2" ry="2" fill="#6c7380e6" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="74.75em" x="12.5%" fill="333333">editor.gutter.active</text>
				<text y="74.75em" x="37.5%" fill="#000000">#8A9199CC</text>
				<text y="74.75em" x="62.5%" fill="#000000">#8A9199CC</text>
				<text y="74.75em" x="87.5%" fill="#ffffff">#6C7380E6</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="70.8em" rx="2" ry="2" fill="#8a919966" />
				<rect height="1.8em" width="20%" x="52.5%" y="70.8em" rx="2" ry="2" fill="#8a919966" />
				<rect height="1.8em" width="20%" x="77.5%" y="70.8em" rx="2" ry="2" fill="#6c738099" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="78em" x="12.5%" fill="333333">editor.gutter.normal</text>
				<text y="78em" x="37.5%" fill="#000000">#8A919966</text>
				<text y="78em" x="62.5%" fill="#000000">#8A919966</text>
				<text y="78em" x="87.5%" fill="#ffffff">#6C738099</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="73.8em" rx="2" ry="2" fill="#8a919959" />
				<rect height="1.8em" width="20%" x="52.5%" y="73.8em" rx="2" ry="2" fill="#8a919959" />
				<rect height="1.8em" width="20%" x="77.5%" y="73.8em" rx="2" ry="2" fill="#6c738080" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="81.25em" x="12.5%" fill="333333">editor.indentGuide.active</text>
				<text y="81.25em" x="37.5%" fill="#000000">#8A919959</text>
				<text y="81.25em" x="62.5%" fill="#000000">#8A919959</text>
				<text y="81.25em" x="87.5%" fill="#ffffff">#6C738080</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="76.8em" rx="2" ry="2" fill="#8a91992e" />
				<rect height="1.8em" width="20%" x="52.5%" y="76.8em" rx="2" ry="2" fill="#8a91992e" />
				<rect height="1.8em" width="20%" x="77.5%" y="76.8em" rx="2" ry="2" fill="#6c738033" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="84.5em" x="12.5%" fill="333333">editor.indentGuide.normal</text>
				<text y="84.5em" x="37.5%" fill="#000000">#8A91992E</text>
				<text y="84.5em" x="62.5%" fill="#000000">#8A91992E</text>
				<text y="84.5em" x="87.5%" fill="#ffffff">#6C738033</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="79.8em" rx="2" ry="2" fill="#8a9199" />
				<rect height="1.8em" width="20%" x="52.5%" y="79.8em" rx="2" ry="2" fill="#707a8c" />
				<rect height="1.8em" width="20%" x="77.5%" y="79.8em" rx="2" ry="2" fill="#565b66" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="87.75em" x="12.5%" fill="333333">ui.fg</text>
				<text y="87.75em" x="37.5%" fill="#000000">#8A9199</text>
				<text y="87.75em" x="62.5%" fill="#ffffff">#707A8C</text>
				<text y="87.75em" x="87.5%" fill="#ffffff">#565B66</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="82.8em" rx="2" ry="2" fill="#f8f9fa" />
				<rect height="1.8em" width="20%" x="52.5%" y="82.8em" rx="2" ry="2" fill="#1f2430" />
				<rect height="1.8em" width="20%" x="77.5%" y="82.8em" rx="2" ry="2" fill="#0b0e14" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="91em" x="12.5%" fill="333333">ui.bg</text>
				<text y="91em" x="37.5%" fill="#000000">#F8F9FA</text>
				<text y="91em" x="62.5%" fill="#ffffff">#1F2430</text>
				<text y="91em" x="87.5%" fill="#ffffff">#0B0E14</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="85.8em" rx="2" ry="2" fill="#6b7d8f1f" />
				<rect height="1.8em" width="20%" x="52.5%" y="85.8em" rx="2" ry="2" fill="#171b24" />
				<rect height="1.8em" width="20%" x="77.5%" y="85.8em" rx="2" ry="2" fill="#11151c" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="94.25em" x="12.5%" fill="333333">ui.line</text>
				<text y="94.25em" x="37.5%" fill="#ffffff">#6B7D8F1F</text>
				<text y="94.25em" x="62.5%" fill="#ffffff">#171B24</text>
				<text y="94.25em" x="87.5%" fill="#ffffff">#11151C</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="88.8em" rx="2" ry="2" fill="#56728f1f" />
				<rect height="1.8em" width="20%" x="52.5%" y="88.8em" rx="2" ry="2" fill="#63759926" />
				<rect height="1.8em" width="20%" x="77.5%" y="88.8em" rx="2" ry="2" fill="#47526640" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="97.5em" x="12.5%" fill="333333">ui.selection.active</text>
				<text y="97.5em" x="37.5%" fill="#ffffff">#56728F1F</text>
				<text y="97.5em" x="62.5%" fill="#ffffff">#63759926</text>
				<text y="97.5em" x="87.5%" fill="#ffffff">#47526640</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="91.8em" rx="2" ry="2" fill="#6b7d8f1f" />
				<rect height="1.8em" width="20%" x="52.5%" y="91.8em" rx="2" ry="2" fill="#69758c1f" />
				<rect height="1.8em" width="20%" x="77.5%" y="91.8em" rx="2" ry="2" fill="#47526633" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="100.75em" x="12.5%" fill="333333">ui.selection.normal</text>
				<text y="100.75em" x="37.5%" fill="#ffffff">#6B7D8F1F</text>
				<text y="100.75em" x="62.5%" fill="#ffffff">#69758C1F</text>
				<text y="100.75em" x="87.5%" fill="#ffffff">#47526633</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="94.8em" rx="2" ry="2" fill="#f3f4f5" />
				<rect height="1.8em" width="20%" x="52.5%" y="94.8em" rx="2" ry="2" fill="#1c212b" />
				<rect height="1.8em" width="20%" x="77.5%" y="94.8em" rx="2" ry="2" fill="#0f131a" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="104em" x="12.5%" fill="333333">ui.panel.bg</text>
				<text y="104em" x="37.5%" fill="#000000">#F3F4F5</text>
				<text y="104em" x="62.5%" fill="#ffffff">#1C212B</text>
				<text y="104em" x="87.5%" fill="#ffffff">#0F131A</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="97.8em" rx="2" ry="2" fill="#00000026" />
				<rect height="1.8em" width="20%" x="52.5%" y="97.8em" rx="2" ry="2" fill="#12151cb3" />
				<rect height="1.8em" width="20%" x="77.5%" y="97.8em" rx="2" ry="2" fill="#00000080" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="107.25em" x="12.5%" fill="333333">ui.panel.shadow</text>
				<text y="107.25em" x="37.5%" fill="#ffffff">#00000026</text>
				<text y="107.25em" x="62.5%" fill="#ffffff">#12151CB3</text>
				<text y="107.25em" x="87.5%" fill="#ffffff">#00000080</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="100.8em" rx="2" ry="2" fill="#ffaa33" />
				<rect height="1.8em" width="20%" x="52.5%" y="100.8em" rx="2" ry="2" fill="#ffcc66" />
				<rect height="1.8em" width="20%" x="77.5%" y="100.8em" rx="2" ry="2" fill="#e6b450" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="110.5em" x="12.5%" fill="333333">common.accent</text>
				<text y="110.5em" x="37.5%" fill="#000000">#FFAA33</text>
				<text y="110.5em" x="62.5%" fill="#000000">#FFCC66</text>
				<text y="110.5em" x="87.5%" fill="#000000">#E6B450</text>
			</g>
		
			<g>
				<rect height="1.8em" width="20%" x="27.5%" y="103.8em" rx="2" ry="2" fill="#e65050" />
				<rect height="1.8em" width="20%" x="52.5%" y="103.8em" rx="2" ry="2" fill="#ff6666" />
				<rect height="1.8em" width="20%" x="77.5%" y="103.8em" rx="2" ry="2" fill="#d95757" />
			</g>

			<g font-family="sans-serif" font-size="12">
				<text y="113.75em" x="12.5%" fill="333333">common.error</text>
				<text y="113.75em" x="37.5%" fill="#000000">#E65050</text>
				<text y="113.75em" x="62.5%" fill="#000000">#FF6666</text>
				<text y="113.75em" x="87.5%" fill="#000000">#D95757</text>
			</g>
		

</svg>
Lua script used to convert #RRGGBBAA to #RRGGBB 
local bg_map = {
  light = { 248, 249, 250 },
  mirage = { 31, 36, 48 },
  dark = { 11, 14, 20 },
}

local round = function(x) return math.floor(x + 0.5) end

_G.convert_from_rgba = function(hex, style)
  local rgb = { hex:match('#(%x%x)(%x%x)(%x%x)(%x%x)') }
  rgb = vim.tbl_map(function(x) return tonumber(x, 16) end, rgb)
  local alpha, bg = rgb[4] / 255, bg_map[style]
  local res = {
    round(rgb[1] * alpha + bg[1] * (1 - alpha)),
    round(rgb[2] * alpha + bg[2] * (1 - alpha)),
    round(rgb[3] * alpha + bg[3] * (1 - alpha)),
  }
  return string.format('#%02x%02x%02x', res[1], res[2], res[3]):upper()
end

-- Execute `:source` for this script and use something like this:
-- _G.convert_from_rgba('#787B8099', 'light')
-- _G.convert_from_rgba('#B8CFE680', 'mirage')
-- _G.convert_from_rgba('#ACB6BF8C', 'dark')

@echasnovski
Update colors to follow upstream
4432276 
Details:
- https://github.com/ayu-theme/ayu-colors was used as reference
  (the https://github.com/ayu-theme/ayu-colors/blob/master/colors.svg
  in particular).
- Colors which are defined with alpha channel are converted to not have
  it (because Neovim/Vim support only three channel hex) by mixing with
  correct normal background. Example for `comment`:
    - #787B8099 is a color for "light" style.
    - It corresponds to rgba(120, 123, 128, 0.6).
    - Mixing it with rgb(248, 249, 250) for light background (#F8F9FA)
      gives the rgb(120*0.6+248*0.4, 123*0.6+249*0.4, 128*0.6+250*0.4),
      which is rgb(171.2, 173.4, 176.8) = rgb(171, 173, 177) = #ABADB1
- There are no reference for the following colors (left as is):
    - colors.panel_border
    - colors.selection_border
    - colors.warning
- There are two choices for 'selection_bg': 'editor.selection.active'
  and 'ui.selection.normal'. As current ones have blue-ish hue, the
  'editor.selection.active' was used.
- For 'colors.fg_idle' used the 'ui.fg'.
@Shatur
Copy link
Owner

Shatur commented Sep 8, 2024

This is huge, thank you a lot!

There are no reference for the following colors (left as is): - colors.panel_border - colors.selection_border - colors.warning

Maybe we could you use some color from the upstream for it that fits? Anyway, merging!

@Shatur Shatur merged commit 2839c88 into Shatur:master Sep 8, 2024
2 checks passed
@echasnovski
Copy link
Contributor Author

This is huge, thank you a lot!

I'd rather you double check everything, but as you wish :)

There are no reference for the following colors (left as is): - colors.panel_border - colors.selection_border - colors.warning

Maybe we could you use some color from the upstream for it that fits? Anyway, merging!

I'd rather leave this choice to you :)

@Shatur
Copy link
Owner

Shatur commented Sep 8, 2024 •
edited
Loading

I'd rather you double check everything, but as you wish :)

I like the result, it's definitely more correct then the current one. So I trusted you here :)

I'd rather leave this choice to you :)

I'm a little bit busy right now. But maybe I will get to it.

@MrRoiz
Copy link

MrRoiz commented Sep 9, 2024

I just updated the plugin today morning, and it looks great! 🚀 didn't expect to see this color update when I turned on my pc.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@echasnovski @Shatur @MrRoiz