Quarto Logo Colors?

[loganjohnson0]

Description

I was slightly confused about quarto icons in Positron (see this issue). That led me to see what the "true color" of quarto file icons was, as I was going to see if I could "fix" (probably not the right word choice) the coloring in the Material Icon Theme Extension. I then realized the logo colors were slightly different depending on where one looked.

#82b1ff Materials Icon Theme
#80A8D7 Quarto Website Header Icon and Image Path
#4E97B4 quarto-dev/quarto
#74AADB quarto-dev/quarto-web

The colors are all quite close, so if thats not a worry, then feel free to ignore! It's quite indistinguishable anyway. Thanks!

[mcanouil]

I don't know who submitted the Quarto logo to Materials Icon, but this one is clearly wrong on the shape and colour.

• edit: feat: add icon for quarto material-extensions/vscode-material-icon-theme#3151

The colour is #74AADB.

I'll PR to update and make things consistent on Quarto side.

These are the correct SVGs to my knowledge (the current icon SVG on quarto-web is slightly different in which it uses style to set fill instead of duplicating the fill attribute on the four path elements)

quarto-icon.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 121.8 118.8" enable-background="new 0 0 121.8 118.8" xml:space="preserve">
<g>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#74AADB" d="M56,54.4V1.5C27.9,3.5,5.6,26.2,4.1,54.4H56z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#74AADB" d="M63,54.4h52.9C114.4,25.9,91.5,3,63,1.5V54.4z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#74AADB" d="M56,61.4H4.2c2,27.7,24.1,49.9,51.8,51.8V61.4z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#74AADB" d="M63,61.4v51.9c28.2-1.5,50.9-23.8,52.8-51.9H63z"/>
</g>
</svg>

quarto-logo-trademark

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 599 125.4" enable-background="new 0 0 599 125.4" xml:space="preserve">
<g>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#74AADB" d="M56,54.4V1.5C27.9,3.5,5.6,26.2,4.1,54.4H56z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#74AADB" d="M63,54.4h52.9C114.4,25.9,91.5,3,63,1.5V54.4z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#74AADB" d="M56,61.4H4.2c2,27.7,24.1,49.9,51.8,51.8V61.4z"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#74AADB" d="M63,61.4v51.9c28.2-1.5,50.9-23.8,52.8-51.9H63z"/>
</g>
<path fill="#4F789E" d="M586.1,23h2v-4.4h1.4l2.6,4.4h2.1l-2.8-4.5c0.7-0.1,1.3-0.4,1.8-0.8c0.5-0.5,0.7-1.2,0.7-2.1
	c0-1-0.3-1.8-0.9-2.4c-0.6-0.6-1.6-0.8-2.8-0.8h-4.1V23z M588,14.1h1.4c0.3,0,0.6,0,0.9,0c0.3,0,0.6,0.1,0.8,0.2
	c0.2,0.1,0.4,0.2,0.6,0.5c0.2,0.2,0.2,0.5,0.2,0.8c0,0.3-0.1,0.6-0.2,0.8c-0.2,0.2-0.3,0.4-0.6,0.5c-0.2,0.1-0.5,0.2-0.8,0.2
	c-0.3,0-0.6,0-0.9,0H588V14.1z M581.1,21.4c0.5,1.1,1.2,2.1,2,3c0.8,0.8,1.8,1.5,2.9,2s2.3,0.7,3.6,0.7c1.3,0,2.5-0.2,3.6-0.7
	s2.1-1.2,3-2c0.8-0.8,1.5-1.8,2-3c0.5-1.1,0.7-2.3,0.7-3.6c0-1.3-0.2-2.5-0.7-3.6c-0.5-1.1-1.2-2.1-2-2.9c-0.8-0.8-1.8-1.5-3-2
	c-1.1-0.5-2.3-0.7-3.6-0.7c-1.3,0-2.5,0.2-3.6,0.7c-1.1,0.5-2.1,1.2-2.9,2c-0.8,0.8-1.5,1.8-2,2.9c-0.5,1.1-0.7,2.3-0.7,3.6
	C580.4,19.1,580.6,20.3,581.1,21.4z M582.6,14.8c0.4-0.9,0.9-1.7,1.6-2.4c0.7-0.7,1.5-1.2,2.4-1.6c0.9-0.4,1.9-0.6,3-0.6
	c1,0,2,0.2,3,0.6c0.9,0.4,1.7,0.9,2.4,1.6c0.7,0.7,1.2,1.5,1.6,2.4c0.4,0.9,0.6,1.9,0.6,3c0,1-0.2,2-0.6,3c-0.4,0.9-0.9,1.7-1.6,2.4
	c-0.7,0.7-1.5,1.2-2.4,1.6c-0.9,0.4-1.9,0.6-3,0.6c-1.1,0-2-0.2-3-0.6c-0.9-0.4-1.7-0.9-2.4-1.6c-0.7-0.7-1.2-1.5-1.6-2.4
	c-0.4-0.9-0.6-1.9-0.6-3C582,16.7,582.2,15.7,582.6,14.8z"/>
<path fill="#4F789E" d="M214.6,24.8v13.1c-5.8-10.1-16-16.6-29.4-16.6c-21.3,0-36.2,16.2-36.2,38.1c0,22.1,14.9,37.9,36.2,37.9
	c13.4,0,23.7-6.4,29.4-16.5V123c0,1.4,1,2.4,2.4,2.4h4c1.4,0,2.4-1,2.4-2.4V24.8c0-1.4-1-2.4-2.4-2.4h-4
	C215.6,22.4,214.6,23.4,214.6,24.8z M186.1,88.8c-17.1,0-28.6-12.2-28.6-29.4s11.5-29.8,28.6-29.8c17.3,0,28.5,12.5,28.5,29.8
	S203.4,88.8,186.1,88.8z"/>
<path fill="#4F789E" d="M298.4,24.8v42.1c0,14.6-9.9,22.7-22.7,22.7c-12.6,0-22.7-8.2-22.7-22.7V24.8c0-1.4-1-2.4-2.4-2.4h-4
	c-1.4,0-2.4,1-2.4,2.4V68c0,20.2,14.4,29.3,29.6,29.3c9.8,0,19.2-3.8,24.6-12.2v8.5c0,1.4,1,2.4,2.4,2.4h4c1.4,0,2.4-1,2.4-2.4V24.8
	c0-1.4-1-2.4-2.4-2.4h-4C299.4,22.4,298.4,23.4,298.4,24.8z"/>
<path fill="#4F789E" d="M391.7,24.8v13c-5.8-10.1-16-16.5-29.4-16.5c-21.3,0-36.2,15.8-36.2,37.9c0,21.9,14.9,38.1,36.2,38.1
	c13.4,0,23.7-6.6,29.4-16.6v13c0,1.4,1,2.4,2.4,2.4h4c1.4,0,2.4-1,2.4-2.4V24.8c0-1.4-1-2.4-2.4-2.4h-4
	C392.7,22.4,391.7,23.4,391.7,24.8z M363.2,88.8c-17.1,0-28.6-12.3-28.6-29.6s11.5-29.6,28.6-29.6c17.3,0,28.5,12.3,28.5,29.6
	S380.5,88.8,363.2,88.8z"/>
<path fill="#4F789E" d="M430.1,36V24.8c0-1.4-1-2.4-2.4-2.4h-4c-1.4,0-2.4,1-2.4,2.4v68.8c0,1.4,1,2.4,2.4,2.4h4
	c1.4,0,2.4-1,2.4-2.4V54.4c0-16,11.5-23.5,23.7-24.6c1.4-0.2,2.2-1.1,2.2-2.6v-3.5c0-1.6-0.8-2.4-2.4-2.2
	C443.9,22.2,435.1,27,430.1,36z"/>
<path fill="#4F789E" d="M505,27v-2.2c0-1.4-1-2.4-2.4-2.4h-16v-20c0-1.4-1-2.4-2.4-2.4h-4c-1.4,0-2.4,1-2.4,2.4v20h-8.2
	c-1.4,0-2.4,1-2.4,2.4V27c0,1.4,1,2.4,2.4,2.4h8.2v50.2c0,10.4,6.4,16.3,16.5,16.3h7.5c1.4,0,2.4-1,2.4-2.4V91c0-1.4-1-2.4-2.4-2.4
	H497c-5.6,0-10.4-2.6-10.4-10.1V29.4h16C504,29.4,505,28.5,505,27z"/>
<path fill="#4F789E" d="M552.7,97.4c22.1,0,37.1-16.3,37.1-38.2c0-22.1-15-38.1-37.1-38.1s-37.3,16-37.3,38.1
	C515.4,81.1,530.6,97.4,552.7,97.4z M552.7,88.8c-17,0-28.5-12.6-28.5-29.6s11.5-29.6,28.5-29.6c17,0,28.2,12.6,28.2,29.6
	S569.6,88.8,552.7,88.8z"/>
</svg>

[mcanouil]

• chore(logo): add Quarto trademark logo and recompile PNG image quarto-web#2099
• fix(logo): use correct Quarto logo colour #74AADB quarto#1055

[mcanouil]

Material Icon seems to require the use of a special colour palette but from what I've seen, the current version does use one but without checking out if it was close to the original colour (they provide a tool in their contributing guidelines), the "material colour" would be #64B5F6 for #74AADB (true original colour)

• https://github.com/material-extensions/vscode-material-icon-theme/blob/main/CONTRIBUTING.md#use-material-design-colors

[loganjohnson0]

Thanks for that background! I made an attempt at changing the logo in their repository. I used Inkscape to help me adjust the svg to match their desired file structure.

I made each of the quarters of the Quarto logo to be 6.5px by 6.5px in height/width with 1px margins all around considering a total width/height of the svg of 16px. Looking at their workflow, things look mostly aligned and well. I couldn't figure out how to maintain the simple file structure that they wanted, per their contributing guidelines, which is why I didn't use one of the svg files mentioned above. The svg files shared above had a more complex file structure and I couldn't figure out how to make those match their expected/desired structure. I hope that makes sense, and let me know if there are changes I should make!