Add MDX file icons for VSCode

[remcohaszing]

The icons are based on the icon in the header on https://mdxjs.com for both dark and light mode. The monochrome color scheme matches the default VSCode icon theme.

I followed the vscode-icons contributing guidelines for processing the icons.

[changeset-bot]

🦋 Changeset detected

Latest commit: 257510f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
vscode-mdx	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[wooorm]

I think the logo (color scheme) from https://github.com/mdx-js/.github/blob/main/image/cover.svg should be used if possible. That SVG is dark/light mode aware, so should do the trick in one go?

[wooorm]

Preferably, the background has one color (white in dark mode, black in light mode), the M and the “D” (arrow down) would be cut out of that shape, so transparent (a mask), and the X should be yellow.

[remcohaszing]

I like that icon, but I think it’s good to match the monochrome theme of the default VSCode icons.

Personally I use vscode-icons, which provides the following icon:

Personally I like that icon, but it feels a bit out of touch with the original VSCode icon set.

[remcohaszing]

I kind of like just the characters in yellow:

[wooorm]

Yeah, just the letters in yellow might be good. It’s tiny tho, not sure if it’s visible enough

Is it a VS Code thing that all their own icons use blue? Do we have to do that to?

[wooorm]

Yellow BG and black or white forefront is also similar enough to how VS code themselves display the tsconfig.json, and how the vscode-icons display the .npmrc logo?

[remcohaszing]

Here are some more icons for reference. They use a lot of blue indeed, but also some other colors.

I agree it’s a bit tiny. I could also try just the arrow down, or the arrow down and x, or the arrow down that’s used for the markdown files, but yellow.

[wooorm]

Maybe “MX”, but it feels weird to drop something from our 3 letters.
But then 3 letters is wide...

How do the 2 current logos you have look for you in light mode? Coming back to that in your first screenshot, the yellow pill form with black foreground actually looks okay #330 (comment)
If it isn’t legible enough, try a black background and yellow foreground instead, both in dark and light mode?

[remcohaszing]

Markdown arrow down:

Yellow pill dark:

Yellow pill light:

Blue pill light:

Yellow text light:

[wooorm]

• Down arrow: too fat, not the one we use in the logo I think?; but even with that one, I think it looks too much like a download button (and the cross would look too much like “close”) (EDIT: oooh it’s the one from markdown... interesting...)
• Yellow background / black foreground: i think it’s okay, but I do wonder how inverting that looks?
• blue: fine but just isn’t our color
• no background / yellow foreground: not bad but the yellow disappears a bit on the white background

Can you swap the yellow back / black fore? Or what do you think about it? Also: let me know if you need help with SVG

[remcohaszing]

Down arrow: too fat, not the one we use in the logo I think?; but even with that one, I think it looks too much like a download button (and the cross would look too much like “close”) (EDIT: oooh it’s the one from markdown... interesting...)

Yeah, the idea was to match markdown indeed. Custom icons somehow scale / pad different from the builtin icons though, so I had to make some tweaks for that. Didn’t use math, just some guesstimating.

blue: fine but just isn’t our color

I agree, but it comes from https://mdxjs.com.

no background / yellow foreground: not bad but the yellow disappears a bit on the white background

I agree. Also a light / dark theme doesn’t determine the exact background color. There are both dark and light variations.

We could make it darker for light themes.

Can you swap the yellow back / black fore? Or what do you think about it?

I’m not loving these actually. I really think we should stick with one color to match the builtin icons.

Also: let me know if you need help with SVG

I’m no hero at SVG or graphics tooling, but so far I’m managing. :)

[ChristianMurphy]

Thanks for looking into adding an icon @remcohaszing!
Personally I think the orange pill on dark, and blue pill on light are the most legible and clear. #330 (comment)

re: #330 (comment)

blue: fine but just isn’t our color

As far as I'm aware MDX design have an official color palette or design system yet.
So it very well could be an MDX color. 🙂

and as @remcohaszing mentions:

it comes from https://mdxjs.com/.

It is already used in a number of spots.

[wooorm]

I agree, but it comes from https://mdxjs.com/.

Against blue: only because it’s on the homepage, it is visible on the home page because it is the active page. And blue is the active color. Because our orange is not accessible in light mode at smaller sizes.

The MDX wordmark on the website uses the foreground color of the website: black or white. And the background color (black or white) for the letters. The foreground color changes based on whether a link is currently active, to orange or blue.

I don’t think in any other cases (GitHub) blue should be used relating to MDX: that was never my intention in abstracting the logo to one color and as a marker for a page.

I’m not loving these actually.

I agree that the black background doesn’t work great. This icon will be shown on all kinds of themes, hard blank looks bad on a bunch of them probably.

I really think we should stick with one color to match the builtin icons.

How does the .npmrc icon work then? Red outside, what’s inside? Transparent?
That’s my main gripe with the OG yellow background above: the black looks a bit too dark? Maybe not IRL though

official color palette or design system yet.

The color is now live on GH, see for example the “Languages” item in the bottom right sidebar https://github.com/code-hike/codehike.
Other than the yellow, I picked GHs primer colors, like I basically do everywhere.

[remcohaszing]

I dicided to pick the yellow letters variant. I think this fits best with the rest of the default VSCode icons. This doesn’t have to be definitive. I just want MDX to have an icon by default that’s not the fallback icon.

I also don’t really like the blue icon.