Discuss SVG for Umami Theme

Hi,

Based on the problem ticket, an approach has been devised to address the issue of setting the background color for SVG images using CSS.

1. The proposed solution ensures that the background color of all icons is not conflicting with each other. This can be achieved by utilizing CSS variables to modify the background image color.

file path : core/profiles/demo_umami/themes/umami/css/components/content-types/recipe/recipe.css

remove code this:

.node--type-recipe.node--view-mode-full .field--name-field-number-of-servings {
  background-image: url(../../../../images/svg/serves.svg);
}

replaces by this:

.node--type-recipe.node--view-mode-full .field--name-field-number-of-servings {
  position: relative;
}

.node--type-recipe.node--view-mode-full .field--name-field-number-of-servings::before {
   -webkit-mask: url(../../../../images/svg/serves.svg) no-repeat;
  mask: url(../../../../images/svg/serves.svg) no-repeat;
  background-color: var(--color-primary);
  position: absolute;
  content: "";
  width: 56px;
  height: 56px;
  top: 30%; 
  left: 50%;
  transform: translate(-50%,-50%);
}

summary update, now moved to needs review.

FYI, we're using the mask property in a similar way in Claro to make sure the icons support forced-colors mode.

The method above works in all of Drupal's supported browsers. If we do this, we can also add a forced-colors media query to make sure it works properly there. So if we have something like

.node--type-recipe.node--view-mode-full .field--name-field-number-of-servings::before {
   -webkit-mask: url(../../../../images/svg/serves.svg) no-repeat;
  mask: url(../../../../images/svg/serves.svg) no-repeat;
  background-color: var(--color-primary);
  position: absolute;
  content: "";
  width: 56px;
  height: 56px;
  top: 30%; 
  left: 50%;
  transform: translate(-50%,-50%);
}

We'd just need to add

@media (forced-colors: active) {
  .node--type-recipe.node--view-mode-full .field--name-field-number-of-servings::before {
    background-color: canvasText;
  }
}

Interesting approach @mherchel.

I'm not fully sure if we need to "fix" this issue since Umami has a set design and the colours are set in the SVGs. It only became an issue because one of the people working on the MR wanted to declare the CSS variables inside the SVG - which would mean the same variables declared in CSS and then multiple times in SVGs, which doesn't look very DRY to me. Instead, I decided we'd leave the Umami SVGs as they were and create this follow-up IF we needed it.

My preference would probably be to inline the SVGs instead of working with CSS workarounds, and then we could use whatever CSS we wanted to to add the colours for them.

Moving this to "Needs work" instead of "Needs review" since there is no actual code to review.

Updating issue summary to remove

1. Steps to reproduce - these steps do not reproduce the issue, since the issue is RTBC and the SVGs are not presenting a problem and not changed at all in that MR.
2. Proposed resolutions - we have not agreed to proceed with the resolution in [#3]