SVG theme support - Figma plugin exploration

[mattnolting]

TLDR PatterFly designers and developers are in need of SVG theming support. Currently, many in the field are unaware of best practices for SVG theme integration and configuration.

Update: 11/25/24

• 1: Inline SVG support: To support SVG theming, inline svgs must be deliverable via PF-React.
• 2: Current color: - The plugin SVG Export https://www.figma.com/community/plugin/814345141907543603/svg-export supports removal of hard coded colors and applies currentColor where needed. This
• 3: Advanced usage/Figma plugin - For granular color control, we would need to use an extension, whether developed by us or otherwise. This can be done w/CSS, but is not an automated process.

Design management requires plugin approval.

Docs

Goals

• Maintain a single file containing necessary data for presentational theming updates
• Solution should be efficient and easy to use

Possible Programs

Figma
Adobe Illustrator
Free software

Possible plugins

SVG Export https://www.figma.com/community/plugin/814345141907543603/svg-export
SVG Code Copy https://www.figma.com/community/plugin/1254882554691503705/svg-code-copy

VS Code color mapper https://www.figma.com/community/plugin/1218260433851630449/visual-studio-code-color-mapper (VS Code)

[mattnolting]

SVG Export: https://www.figma.com/community/plugin/814345141907543603/svg-export

Update 11/2/24

TLDR: SVG Export fulfills ~ 90% of our needs.

What it lacks is the injection of pf-v6-theme-dark (or any other theme "spooky" namespace)" into the SVG <style> block, based on Color Collection settings (AKA theme switcher) already configured in Figma via the PatternFly Tokens and Styles Library.

---

Example SVG

---

What we need:

1. General file config guidance. Layers and groups need to be organized by designers. Like colors should be grouped or converted to compound paths and logically named.

2. Standard fill colors converted to currentColor. (white/black) fill: #000 / #FFF / black / white etc.

3. Token fill colors mapped to PF tokens library. (grays, etc)

4. Custom colors defined in light/dark theme.

SVG Export does all of these actions with the correct configuration.

These steps need to happen to support custom svg color theming.

• SVG <style> .{theme} {} block injection, updating any necessary custom color updates per theme.

Code example

<svg width="155" height="9" viewBox="0 0 155 9" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="..." fill="#58595B"/>
<path d="..." fill="#58595B"/>
<path d="..." fill="#58595B"/>
<path d="..." fill="#58595B"/>
<path d="..." fill="#58595B"/>
<path d="..." fill="#58595B"/>
<path d="M152.769 1.96518C151.447 1.97354 150.517 2.88513 150.517 4.23186C150.517 5.5702 151.421 6.48184 152.795 6.48184C153.565 6.48184 154.201 6.20585 154.636 5.72907L154.126 5.18548C153.799 5.52006 153.356 5.70406 152.871 5.70406C152.168 5.70406 151.641 5.2775 151.49 4.59172H154.855C154.97 2.98579 154.334 1.96518 152.769 1.96518ZM151.472 3.88893C151.568 3.17797 152.076 2.73459 152.779 2.73459C153.507 2.73459 153.984 3.16957 154.019 3.88893H151.472Z" fill="#58595B"/>
...
...
...
</svg>

Get's converted to

<svg width="175" height="36" viewBox="0 0 175 36" fill="none" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="a" class="a">
      <rect width="175" height="36" fill="white"/>
    </clipPath>
  </defs>
  <g clip-path="url(#a)" class="opendata-hub">
    <rect width="175" height="36" fill="white"/>
    <path d="..." fill="#A586F3" class="path5"/>
    <path d="..." fill="#5ED3EE" class="path4"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="..." fill="#A7D53A" class="path3"/>
    <path fill-rule="evenodd" clip-rule="evenodd" d="..." fill="#8FB045" class="path2"/>
    <g class="datahub" fill="#4D5258">
      <path d="..." class="path81331" fill="currentColor" />
      <path d="..." class="path81333" fill="currentColor"/>
      <path d="..." class="path81335" fill="currentColor"/>
      <path d="..." class="path81337" fill="currentColor"/>
    </g>
    <g class="text" fill="#58595B">
      <path d="..." class="path81346" fill="currentColor"/>
      <path d="..." class="path81348" fill="currentColor"/>
      <path d="..." class="path81350" fill="currentColor"/>
    </g>
    <g class="open" fill="black">
      ...
    </g>
  </g>
</svg>

[mattnolting]

Moving to backlog