feat: add new icons for CSS

[aixegorri]

Description

Added the official new logos for CSS to the icon set.

Closes: #2716

Official info at: https://github.com/CSS-Next/logo.css

Contribution Guidelines

• [x] By creating this pull request, I acknowledge that I have read the Contribution Guidelines for this project
• [x] I have read the Code Of Conduct and promise to abide by these rules

[github-actions[bot]]

Preview

Thank you for creating a pull request. This preview shows you how your icons will look on the different themes:

Check how your icons fit in a 16x16 grid with our Pixel Perfect Checker by following this link.

You can find more information on how to contribute in the contribution guidelines.

[okineadev]

These icons go well with the JS and TS icons, but I think it will be difficult to get used to them...

[okineadev]

I also think that they should be lighter, because they are too dark on a dark background, and too contrasting on a light one

[mallowigi]

They are so ugly. In my opinion it will be detrimental to the main purpose of the pack, which is to help visual distinction. We already have JS and TS that look alike, and now css?

[aixegorri]

They are so ugly. In my opinion it will be detrimental to the main purpose of the pack, which is to help visual distinction. We already have JS and TS that look alike, and now css?

We are not arguing whether the new logo is ugly or pretty. This is the new official CSS logo and soon everyone will associate it with the language. It would be nice to use a new icon that connects with the new image.

[okineadev]

They are so ugly. In my opinion it will be detrimental to the main purpose of the pack, which is to help visual distinction. We already have JS and TS that look alike, and now css?

See https://en.m.wikipedia.org/wiki/CSS

[okineadev]

I think it is necessary to create a mass forced vote for the best icon among all users of this extension in order to decide whether it is necessary to add a new icon

[okineadev]

A notification should pop up that cannot even be closed

[itznao]

Im personally loving the new logo! Here it is in a mock Next.js project!

[okineadev]

Im personally loving the new logo! Here it is in a mock Next.js project!

It's actually pretty hard to tell that it's a CSS icon...

[itznao]

Im personally loving the new logo! Here it is in a mock Next.js project!

It's actually pretty hard to tell that it's a CSS icon...

I mean, I personally look at the colours, and I really like the look.

[itznao]

Here is a look at it in tabs:

[okineadev]

Not halal

[okineadev]

Because the letters on the icon are not visible

[lucas-labs]

I opened #2716 a few days ago but didn't create a PR anticipating this change was going to be controversial.

IMO, It's still too early. The icon is just too new and if we merge this, we will have dozens of issues with the title "CSS icon broken". I would wait some time until the icon is more widely adopted and people is more familiar with it.

Also, I agree that the color doesn't play well with dark themes.

[lucas-labs]

I think it is necessary to create a mass forced vote for the best icon among all users of this extension in order to decide whether it is necessary to add a new icon A notification should pop up that cannot even be closed

@okineadev I wouldn't do that. This pack is probably top-20 most installed extensions in vscode (26 million downloads). And not all users of this pack care about a css icon. If your main language is rust or cpp or zig, you don't want an imposible-to-close popup asking about css.

[okineadev]

I think it is necessary to create a mass forced vote for the best icon among all users of this extension in order to decide whether it is necessary to add a new icon A notification should pop up that cannot even be closed

@okineadev I wouldn't do that. This pack is probably top-20 most installed extensions in vscode (26 million downloads). And not all users of this pack care about a css icon. If your main language is rust or cpp or zig, you don't want an imposible-to-close popup asking about css.

I don't care if they are interested in the CSS or not, we need public opinion!

(Actually, I'm writing this to troll Elior 😅)

[mallowigi]

In my plugin whenever there is a huge change like in angular for example, I always provide both icons. Unless the previous icon was ugly (like the previous yaml, the previous perl).

[mi2ebi]

looks a bit too dark to be readable imo

[itznao]

I mean, it is the official logo for CSS now, I personally don't like the SQLite logo but it is still the logo.

[itznao]

In my plugin whenever there is a huge change like in angular for example, I always provide both icons. Unless the previous icon was ugly (like the previous yaml, the previous perl).

You could make an option to change it in the config to the old logo, like css-old or something, making this will enable the project to have alternate logos in the future too! Thumbs up from me 👍

[mi2ebi]

I mean, it is the official logo for CSS now, I personally don't like the SQLite logo but it is still the logo.

accessibility is my point, rather than aesthetics

[rafaroldan93]

Well, I find this elegant and consistent:

I think it could be improved by coloring the text white and enlarging it a bit. Maybe also using more saturated colors to improve the contrast in dark themes.

[mi2ebi]

yep that works :)

[mi2ebi]

that's fine

[JaviRamosLab]

great solution, and is ok in the official site https://github.com/CSS-Next/logo.css

[itsjavi]

Hey thanks for doing this.

I use this extension and as the creator of the logo I was also concerned about its readability in the IDEs in dark mode, but I think it's fine to do some color variation to improve readability, since the logo guidelines allow that.

1st - Original color, rebeccapurple, 663399 2nd - Original color with 10% more lightness, 8040BF 3rd - Material UI Color, Deep Purple 400, 7E57C2

I prefer the 2nd option if possible, at 15% more lightness than the original looks even better: 8C53C5

[PKief]

@lucas-labs shall we proceed with it? I have seen that you already created a pixel perfect version of it. Would you mind adding it to this PR? I think we could get it in now

[lucas-labs]

Hi! Yes, I created a few slightly different variations:

First column uses #8C53C5 (original color at 15% lightness), which is the color the creator of the icon talked about (not a material color), the second column uses #7e57c2 from the material palette which I think it looks similar enough.

Rows are variations of the "CSS" typography. Both are (kinda) pixel perfect at 16px, but the first one is more "rounded".

Here's the same, but at 16px and with dark/light backgrounds

Thoughts?

[itsjavi]

The first option seem to have better contrast, but if you only use material colors then I would choose the second one. They're closer to the logo original design thanks for your work

[PKief]

@lucas-labs they look quite similar, but personally I'd also prefer if we use a material color for that icon. Can we invert the icon on the light themes? I mean can we cut out the white shape from the purple shape instead of having a white shape on top of the purple shape? I mean similar how we did it for the typescript or JS file icons: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/icons/typescript.svg

[lucas-labs]

@lucas-labs they look quite similar, but personally I'd also prefer if we use a material color for that icon. Can we invert the icon on the light themes? I mean can we cut out the white shape from the purple shape instead of having a white shape on top of the purple shape? I mean similar how we did it for the typescript or JS file icons: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/icons/typescript.svg

Hi! If I understood that right, the "CSS" part is already cutted out. The white characters are actually the background, not a white shape on top (that's why it's "black" in the black theme).

[PKief]

@lucas-labs they look quite similar, but personally I'd also prefer if we use a material color for that icon. Can we invert the icon on the light themes? I mean can we cut out the white shape from the purple shape instead of having a white shape on top of the purple shape? I mean similar how we did it for the typescript or JS file icons: https://github.com/material-extensions/vscode-material-icon-theme/blob/main/icons/typescript.svg

Hi! If I understood that right, the "CSS" part is already cutted out. The white characters are actually the background, not a white shape on top (that's why it's "black" in the black theme).

thanks for the reply, you're right. I didn't see it in the first sight. It looks good like that :)

[lucas-labs]

Alright! This is the end result.

Note: the css.map icon is 1px larger than the js.map (has to fit 1 more character 😅).

---

[github-actions[bot]]

Merge Successful

Thanks for your contribution! 🎉

The changes will be part of the upcoming update on the Marketplace.

[anderspk]

I thought the icon was broken and showing artifacts when I was updated today to this version... Why go with lettering that doesn't properly render? Compared to

[faisalnjs]

I thought the icon was broken and showing artifacts when I was updated today to this version... Why go with lettering that doesn't properly render? Compared to

I agree, thought the same when I loaded up my CSS today. The new logo is really unrecognizable as CSS, especially in dark mode, doesn't show the "CSS" text well. 😕

[Sominemo]

I agree, I had no clue what logo I'm looking at as the text is unreadable at that scale, unfortunately.

[ZaneErebos]

I am using dark mode and the text is too small to read. It looks like an sd card or a floppy disk. Could we atleast get an unused "css-classic/old" icon that we can manually assign ourselves?

[lucas-labs]

There's no much we can do about the text, fitting 3 characters in 9 pixels is hard.

Giving it a brighter color for dark-mode might improve visibility... maybe.

Having an unassigned icon might be an option too.

[nnmrts]

Why was this approved with dark letters?

https://github.com/CSS-Next/logo.css?tab=readme-ov-file#logo-usage-guidelines