search

eslint / config-inspector

A visual tool for inspecting and understanding your ESLint flat configs.
https://www.npmjs.com/package/@eslint/config-inspector
Apache License 2.0
533 stars 15 forks source link

Update branding to match ESLint #13

Closed nzakas closed 3 months ago

nzakas commented 3 months ago

I'd like to see if we can update the visuals to be more in line with the overall branding of the ESLint project.

Here is our color palette: https://github.com/eslint/eslint.org/blob/main/src/assets/scss/tokens/themes.scss

Here is our typography: https://github.com/eslint/eslint.org/blob/main/src/assets/scss/tokens/typography.scss

Also, I'd like to see some of the iconography we use on the rules page incorporated: https://eslint.org/docs/next/rules/

What do you think?

antfu commented 3 months ago

I will try to see how I can align with the colors and fonts.

For the icons, I am not so sure, because:

I agree with the alignment and consistency. But instead, maybe we could change the docs to use some monochrome icons from an icon set that we could align better with good visual hints. If so, we could decide the icons for each concept and I am happy to contribute them back to the docs site if needed.

Currently, the inspector uses Phosphor (https://icones.js.org/collection/ph), the Duetone variant. I am not 100% insistent on using it, but I found it looks quite nice and has a wide range of icons to choose from. Unless you have a strong opinion about the icons, otherwise, I guess we could pick some from it.

nzakas commented 3 months ago
  • In docs, it uses emojis, which will render different on different OS

Right, but it will be consistent to the user -- they'll be viewing the website and config inspector in the same browser. We don't need to worry about consistency across browsers.

  • The recommended uses ✅, which is visually a bit too prominent compared to the other elements. Meanwhile, the "check" seems to have a strong connection with "enabled" to me, which I am a bit worried might cause confusion.

I understand your point. My thought is that because people are already seeing the green checkmark on the docs, then this will be logically consistent from their point of view vs. introducing a new icon.

But instead, maybe we could change the docs to use some monochrome icons from an icon set that we could align better with good visual hints. If so, we could decide the icons for each concept and I am happy to contribute them back to the docs site if needed.

The icons are actually used throughout the ecosystem, for instance typescript-eslint uses the same set as does the ESLint doc generator tool.

I'm not opposed to suggesting a change, but whenever we have something spread throughout the ecosystem, it's a much more of an uphill battle to change and get everything aligned.

antfu commented 3 months ago

Yeah, that's true. We can't have non-emoji icons in the GitHub readme either.

I think the situation in the docs is a bit different from the inspector, as in the docs we don't have the concept of "enabled", and we don't always control how the icons are rendered. I still find the green checkbox would be too visually prominent in the context of the inspector, where the enable/disable rule should be much more important information that users need to care about.

I tried a middle ground as https://github.com/eslint/config-inspector/pull/16 - let me know WDYT

nzakas commented 3 months ago

I think that's a fair compromise -- looks more aligned with the docs, so I'm happy. Thanks!