iBet uBet web content aggregator. Adding the entire web to your favor.
iBet uBet web content aggregator. Adding the entire web to your favor.



Link to original content: http://phabricator.wikimedia.org/T374731
⚓ T374731 [SPIKE]: explore adding sibling project logos/icons in full color
Page MenuHomePhabricator

[SPIKE]: explore adding sibling project logos/icons in full color
Closed, ResolvedPublic3 Estimated Story Points

Assigned To
Authored By
AAlhazwani-WMF
Sep 13 2024, 4:52 PM
Referenced Files
F57572382: image.png
Sep 30 2024, 2:03 PM
F57518241: Isotypes_20px.zip
Sep 17 2024, 9:23 AM
F57514811: Captura de pantalla 2024-09-16 a las 14.00.53.png
Sep 16 2024, 12:02 PM
F57514803: Logos.zip
Sep 16 2024, 11:57 AM
F57505938: image.png
Sep 13 2024, 4:52 PM
Tokens
"Love" token, awarded by AAlhazwani-WMF.

Description

Background goal

would it be possible to also add the full-color icons of the siblings projects beside the monochrome version in our icon set? in our own case, we'd love to give stronger attribution to wikidata.

image.png (1×2 px, 157 KB)

Logos SVG

Note that this task only covers the isotopes in this design file:

Considerations

  • How should these logo isotopes be implemented in Codex?
    • Could we have a single icon for each logo that can be either full-color or monochrome?
  • What about dark mode? Should these change or be the same? What about the ones that don't have enough contrast in dark mode?
  • How would this work with the CSS-only icon mixin?

Acceptance criteria

  • Document whether we can support multicolor logo icons and how we would do it, if possible

New task for this work: T375206

Event Timeline

CCiufo-WMF renamed this task from Icon: add sibling project logos/icons in full color to icons: add sibling project logos/icons in full color.Sep 13 2024, 7:55 PM
CCiufo-WMF added a project: Codex.
CCiufo-WMF moved this task from Inbox to Triaging on the Design-System-Team board.

@DTorsani-WMF @bmartinezcalvo @mwilliams curious to know if there's any controversy over this or if we can just move this task to the design stage.

I don't see any problems with adding the full color version of the project icons, but curious what others think.

@DTorsani-WMF @bmartinezcalvo @mwilliams curious to know if there's any controversy over this or if we can just move this task to the design stage.

The full-color version of these logos was already in Figma, so I've exported all them and include them in the task's description. Now we just need to include these logos in Codex and decide on the best placement for them on the site. What if we include a new "Logos" section within "Toolkit" and place all the logos there?

Captura de pantalla 2024-09-16 a las 14.00.53.png (225×601 px, 28 KB)

CCiufo-WMF triaged this task as Medium priority.Sep 16 2024, 2:23 PM
CCiufo-WMF moved this task from Triaging to Needs Refinement on the Design-System-Team board.
AnneT renamed this task from icons: add sibling project logos/icons in full color to [SPIKE]: explore adding sibling project logos/icons in full color.Sep 16 2024, 5:12 PM
AnneT updated the task description. (Show Details)
AnneT set the point value for this task to 3.
AnneT changed the task status from Open to In Progress.Sep 16 2024, 9:36 PM
AnneT claimed this task.
AnneT subscribed.

I'm claiming this so I can do some experimentation but it'll be a group effort with discussion amongst the rest of the team

hey @bmartinezcalvo, could you export the isotopes at 20x20 px? The files linked in the task are 48x48

El T374731#10151025, @AnneT escribió:

hey @bmartinezcalvo, could you export the isotopes at 20x20 px? The files linked in the task are 48x48

Sure, these are the isotypes in 20px. Adding them in the task's description as well.

Change #1073501 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] [proof of concept] Add multicolor logo icons

https://gerrit.wikimedia.org/r/1073501

I tried making this work and mostly succeeded - the icons with urls pointing to linear gradient elements are broken in the CSS-only version (see demo), but we can probably fix that. Here's what I did:

  • Added the new icons to the @wikimedia/codex-icons package with names containing "Multicolor", e.g. cdxIconMulticolorLogoMediawiki. I did this both to differentiate them from the existing monochromatic logo icons, and to enable me to identify which icons are multicolor via the icon name. The latter part isn't ideal and if we move forward with this, I'd like to define this in the icon definition/types instead. Eric also suggested moving the multicolor icons to a separate directory to more clearly separate them from the monochrome set.
  • Updated the CSS icon mixin to handle these by setting them as a background-image instead of mask-image, since they shouldn't change color. You don't need to do anything special when using one of these icons - you just pass in the icon name as usual.
  • Added documentation on using these with Vue and CSS-only
  • Added a new section to the "all icons" page listing the new icons

Some thoughts/questions:

  • I'm not an svg expert, but the paths and fills are different enough between the monochrome and multicolor logo icons that I don't think we can use the same file for both types
  • The CSS-only implementation depends on the fact that the multicolor logos do not change across color modes. If this is not true, we'll need to rethink this.
  • I've called these "multicolor icons" in the code and docs, but Eric brought up the idea of explicitly limiting this icon set to logos - is that something we want to do? Are there other valid use cases for multicolor icons, or should we limit them to logos? cc @bmartinezcalvo @DTorsani-WMF @Volker_E
El T374731#10154907, @AnneT escribió:
  • I've called these "multicolor icons" in the code and docs, but Eric brought up the idea of explicitly limiting this icon set to logos - is that something we want to do? Are there other valid use cases for multicolor icons, or should we limit them to logos? cc @bmartinezcalvo @DTorsani-WMF @Volker_E

@AnneT thank you for working on this, the new logos included in Codex and the documentation look great. Regarding the name, I agree "multicolor icons" is not the best name since they are actually logos, not icons. When we refer to "icons" we refer to the system icons that we intentionally create following the Icons Guidelines from the Style Guide. So, in order to separate icons from logos, I propose the following navigation:

  1. Icons - Here we could place just the system icons. At the moment, we only have monochrome icons so we will no need to separate them into 2 sections.
  2. Icon Logos - Here we could place all icons related to logos, including the monochromatic and multicolor ones.
    • Monochrome
    • Multicolor

What do you think?

@bmartinezcalvo Should the word "icon" be in the name at all then? Could it just be "logos"?

@bmartinezcalvo Should the word "icon" be in the name at all then? Could it just be "logos"?

@DTorsani-WMF in case we want to include them within Toolkit > Icons, I lean towards including the name "icons" in both them. In case we want to explore other placements such as including one separate Toolkit > Logos section in Codex, we could use just "logos".

It does seem to me that Logos could warrant their own page within the Toolkit section. Curious what @AnneT thinks.

Thanks for the feedback and questions @bmartinezcalvo @DTorsani-WMF!

If we implement this as I have in my proof-of-concept, these are clearly icons, since they are part of the icon set exported by the @wikimedia/codex-icons package and are used the same way as other icons. Because of this, I think we should display these on the icons page.

If we decide not to implement these as icons and export them as svgs (probably in the main @wikimedia/codex package), or if we do implement these as icons but later decide to also export them as svgs and/or include larger non-icon logos, I do think those belong in a separate section of the site ("Logos" or perhaps a more generic "Assets").

While I agree that logos and icons are distinct things, the use case for these logos is as icons. I think we should keep things simple and treat them as icons. Having them be organized separately within icons like @AnneT makes sense since they do behave differently (like in color modes).

Agree with Chris and Anne, that makes sense to me.

While I agree that logos and icons are distinct things, the use case for these logos is as icons. I think we should keep things simple and treat them as icons. Having them be organized separately within icons like @AnneT makes sense since they do behave differently (like in color modes).

It makes sense, go for it!

Thanks all! I've updated my proof-of-concept to rename "multicolor icons" to "color logo icons". I've also moved the color icon svgs into their own directory per Eric's suggestion. TODOs are listed in the commit message of the patch and I won't work on them as part of this task, but if we want to move forward with this work in a new task, we can finalize and complete the patch.

My biggest concern is that some of the icons don't work with the CSS-only icon mixin - there's something happening when we're creating the url that the background-image rule is set to with svgs that have certain features, like urls that point to the IDs of linearGradient definitions, e.g.:

<svg>
    <path fill="url(#a)" d="..." />
    <defs>
        <linearGradient id="a" ... />
    </defs>
</svg>

We'll either need to update the css-icons mixin to make this work, or change the SVG markup.

@CCiufo-WMF it seems like we have consensus that we should move forward with this, at least. Should I create a new task for the work itself? If I have more time this sprint, I'd like to confirm that we can make all the SVGs work with our CSS-only icons system, but I'm going to focus on other priorities for the time being.

@CCiufo-WMF it seems like we have consensus that we should move forward with this, at least. Should I create a new task for the work itself? If I have more time this sprint, I'd like to confirm that we can make all the SVGs work with our CSS-only icons system, but I'm going to focus on other priorities for the time being.

Yes please! Let's put the known implementation details and open questions questions into a new task that we can revisit in an upcoming sprint.

AnneT updated the task description. (Show Details)

Coming later to the party, I've already been sharing some of the concern in a DST meeting before.

  1. Most Wikimedia sibling logos were not made with a use case of this small canvas (20 x 20 dp) in mind. Normally a professional logo design would incorporate the question of the logo at a very small size with lesser details (if necessary) or a simpler logo overall
    1. The example of Wikidata logo might be misleading here, as it scales _ok_ on that canvas size on high definition displays and modern browsers (with latest SVG rendering libraries). A WikiSpecies or Wikisource logo might be completely broken at this size.

Example of logos at 20px width scaled down from wikimedia.org (only Wikiversity makes some sense to me):

image.png (94×1 px, 18 KB)

  1. This ask seems to also not take into account that not everyone is in the place of browsing the project on a high-definition display. If just 30% (no factual data, only for assumption) of users are seeing the interface on a 72 dpi display the downsampling of even the Wikidata logo gets really nasty.

My recommendation would be to not support this use case out of box and tackle this on a per-project base, eventually with a lo-dpi treatment of the logo.
But would love to gather feedback by @AAlhazwani-WMF how to go about above questions. Thanks for the attention :)

Let's move the convo to T375206: icons: Add color logo icons. This task was for an initial technical spike to explore feasibility.