From fb7064556352c496c1f3e86c3574735cb09c2822 Mon Sep 17 00:00:00 2001
From: Arturo Silva <artmsilva@gmail.com>
Date: Tue, 10 Dec 2024 10:35:08 -0500
Subject: [PATCH] feat: themed logos [CFE-75] (#220)

* feat: themed logos

* Update README.md

Co-authored-by: Maria Eguiluz <atomictangerine@users.noreply.github.com>

* feat: add fallback hex code

* Update README.md

---------

Co-authored-by: Maria Eguiluz <atomictangerine@users.noreply.github.com>
---
 README.md               | 8 +++++++-
 app/app.jsx             | 4 ++--
 src/washington-post.svg | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 5fbf3ad..f062ff9 100644
--- a/README.md
+++ b/README.md
@@ -9,4 +9,10 @@
 3. Click the "Upload" button
 4. Visit Github to see your changes
 
-.
+## Theming
+
+Branded logos will use WPDS Theme Colors like so where a CSS property/variable is used with a fallback hex code.
+
+```html
+fill="var(--wpds-colors-primary, #111)"
+```
diff --git a/app/app.jsx b/app/app.jsx
index ec3ca83..39a37d0 100644
--- a/app/app.jsx
+++ b/app/app.jsx
@@ -35,8 +35,8 @@ const App = () => {
       {Object.keys(AllAssets).map((Asset) => {
         const Component = AllAssets[Asset];
         return (
-          <article key={Asset}>
-            <h2>{Asset}</h2>
+          <article key={Asset} href={`#${Asset}`}>
+            <h2 id={`#${Asset}`}>{Asset}</h2>
             <AssetContainer>
               <Component />
             </AssetContainer>
diff --git a/src/washington-post.svg b/src/washington-post.svg
index 86258be..a74e919 100644
--- a/src/washington-post.svg
+++ b/src/washington-post.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 697.01 104.61"><path fill="#111" d="M39.2 32v36.6c4.7-2.8 7-6.8 8.7-12.1l1.2.6c-1.1 13.2-10.3 26-24.3 26S0 72.6 0 55.8C0 43 7.7 35.1 18.7 28.2a16.11 16.11 0 0 0-4.4-.6c-7.2 0-11.4 4.9-11.4 9.9H1.5a14.77 14.77 0 0 1-.1-2.1c0-9.3 5.5-19.7 16.9-19.7 7.3 0 12.9 6.7 21.4 6.7 4.3 0 6.7-1.6 8.4-5.3h1.2c-.1 6.5-2 12.8-10.1 14.9zm-19-3.3C15.1 34 10.1 39.6 10.1 50.9c0 6.2 1.9 12.4 6.6 16.4l3.1-1.7V40.3L16.6 42l-1-1.6 15-8.4c-3.8-.8-6.9-2.3-10.4-3.3zm17.1 3.7a17 17 0 0 1-2.3.1 17.52 17.52 0 0 1-4-.4v29.5l-12.8 7a15.57 15.57 0 0 0 9.9 3 22.58 22.58 0 0 0 9.2-2zm44 9.2v34.3c0 9.6-8.51 16.11-18 18l-.6-1c4.7-2.3 7.8-6.41 7.8-11.41V45.7l-4.9-4.5-2.6 2.6v27.1l3 2.8v.4l-8.1 8.61-9.3-8.51v-.4l3.6-3.8V25.8l10.6-11.3.2.1v26.6l8.7-9.2 8.7 7.9 2.7-2.6 1.31 1.3zM97.91 62v4.5l9 7.1 7-7.3 1.3 1.3L101 82.8 88.21 72.6l-2.8 2.8-1.2-1.3 3.1-3.2V45.8l18.9-13.8 10.5 16.3zm.2-22.6-.2.1v20.1l8.7-6.4zM180 82.71l-13.9-12-10.6 12-14.4-12.41V50.7h-2.8a3.89 3.89 0 0 0-4.1 3.5h-1a15.87 15.87 0 0 1-.5-3.8c0-2.6 1.1-9.4 8.4-9.4V25.8c0-5.9-3.9-6.2-3.9-11.3 0-5.7 5.4-11 15.3-14.5l.9.8c-3.3 1.6-6 3.6-6 7.9 0 6.6 6.4 4.9 6.4 15.3v4l11.7-12.3 12.3 12.1 11.6-12.1 11.2 11v37zM165.4 32.8l-7-6.9-4.6 4.7v34.3l8.5 7.3 3.1-3.5zm22.6-1.3-5.6-5.6-4.3 4.3v34.6l9.8 8.6.1-.1zm44.8 51.21-9.4-8.61h-.2l-8.3 8.61-10.1-8.91-2.3 2.3-1.3-1.3 2.9-3V45.5l19-13.6 10.4 8.2 2.8-2.8 1.5 1.3-3.6 3.4v27.1l4.6 4.2 2.9-3 1.5 1.4zm-9.4-37.41-8.3-6.5-.2.2v29.2l6.1 5.4 2.4-2.3zm40.6 4.8h9.4v21.4l-15.9 11.21a11.52 11.52 0 0 0-8.8-4.11c-3 0-5.4 1.4-7.8 4l-1.4-.5 13.8-19.8h-8.5V43.7L261.4 32c2 1.6 3.6 2.6 6.2 2.6a11.35 11.35 0 0 0 7.1-2.2l1 .7zm-1.4 8.8h-4.7l-11.1 15.9.1.2a12.36 12.36 0 0 1 7.6-2.5 10.4 10.4 0 0 1 8 3.8l.1-.09zm6.4-19.6a9.73 9.73 0 0 1-6.9 2.3 8.92 8.92 0 0 1-6.3-2.9l-.2.1v14.6h3.8l9.7-14zm40 2.3v34.3c0 9.6-8.51 16.11-18 18l-.6-1c4.7-2.3 7.8-6.41 7.8-11.41V45.7l-4.9-4.5-2.6 2.6v27.1l3 2.8v.4l-8.1 8.61-9.3-8.51v-.4l3.6-3.8V25.8l10.6-11.3.2.1v26.6l8.7-9.2 8.71 7.9 2.7-2.6 1.3 1.3zm19.6 41.11-8.3-7.61-2.8 2.8-1.3-1.3 3.3-3.4V44.7l-3.6-3.3-2.7 2.6-1.3-1.3L322 32l7.6 6.9 2.7-2.8 1.4 1.4-3.4 3.4v28.6l4.2 3.9 3-3.1 1.3 1.4zm-2.9-51.61-8.2-7.5 7.5-8 8.2 7.5zm46.1 51.61-8.7-7.91V45.6l-4.7-4.4-3.4 3.5v26.1l3.1 2.9v.4l-8.2 8.61-9.3-8.51v-.3l3.6-3.8V44.9l-4.1-3.7-3 3-1.4-1.3L345.9 32l9.1 8.1v2l9.5-10.1 8.7 7.8 2.9-2.9 1.3 1.4-3.5 3.5v28l3.9 3.7 3.3-3.4 1.2 1.3zm43-41V75.6c0 5.2 2.9 5 2.9 8.9 0 4.51-6.5 8.71-16.5 16.21-3.3-3.6-5.6-5.1-8.7-5.1a19.85 19.85 0 0 0-10.7 3.6l-1-.8 13.7-16.11-9-7.09-2.9 2.89-1.3-1.3 3.4-3.5V45.5l19-13.6 10.2 8 3-2.9 1.3 1.3zm-7.7 41.71c-2.5-1.61-3.1-3.31-3.1-7.61V74.3L387.9 93l.1.1c3.2-1.9 5.6-3.1 10.3-3.1 4 0 6.9 1.7 9.5 4 1.9-1.6 3.3-3.2 3.3-5.7 0-1.99-1.5-3.3-4-4.89zM404 45.3l-8.3-6.5-.2.2v30.7l5.9 4.6 2.6-3zm31.5 37.41-8.8-6.91-2.7 2.7-1.3-1.29 3.1-3.21V39.4H420l-.2-.2 3.5-5.2h2.5v-6.7L436.4 16l.2.2V34h8l.2.2-3.5 5.2h-4.7v30.3l4.8 3.7 3.3-3.4 1.3 1.4zm43.71-40.11v27.7l-16.9 12.5L450 73.5l-2.8 2.8-1.3-1.3 3.2-3.3v-27L466.81 32l11.4 8.9 2.9-2.9 1.3 1.4zm-10.8 3L460 39l-.09.1v29.8l8.5 6.4zm50.4 37-8.7-7.9V45.5l-4.7-4.4-3.41 3.5v26.1l3.1 2.9v.4l-8.2 8.61-9.3-8.51v-.3l3.6-3.8V44.8l-4.1-3.7-3 3-1.4-1.3 10.2-10.9L502 40v2l9.5-10.1 8.7 7.8 2.9-2.9 1.3 1.4-3.5 3.5v28l3.9 3.7 3.3-3.4 1.2 1.3zm61.39.11a12.91 12.91 0 0 0-6.3-4.61v20.81l-.2.1-5.5-5.1-11.6 10.7-.2-.1V77.6a18.83 18.83 0 0 0-10.2 6.61l-.8-.5c.7-7.71 4.5-13.41 11-15.61V48.6h-2.1a5.25 5.25 0 0 0-5.3 4.2h-1.2a12.28 12.28 0 0 1-.7-4.6c0-4.9 3.3-8.6 8.7-8.6h.6V28.8l-3.6-3.2-2.8 2.8-1.4-1.3 11.1-11.4 9.4 8.6v9.8L572 31V19.5h1.9V29l12.5-13.3L597.7 26v43.5zM572 32.9l-2.9 3v56.31l2.9 2.7zm13.1-2.3-5.9-5.4-5.3 5.6v36.3c4.7.6 8.2 2.2 11.1 5.3l.1-.1zm48.7 12v27.7l-16.9 12.5-12.3-9.3-2.8 2.8-1.3-1.3 3.2-3.3v-27L621.4 32l11.4 8.9 2.9-2.9 1.3 1.4zm-10.8 3-8.4-6.6-.1.1v29.8l8.5 6.4zm35.6 4.5h9.4v21.4l-15.9 11.21a11.52 11.52 0 0 0-8.8-4.11c-3 0-5.4 1.4-7.8 4l-1.4-.5 13.8-19.8h-8.5V43.7L656 32c2 1.6 3.6 2.6 6.2 2.6a11.38 11.38 0 0 0 7.11-2.2l1 .7zm-1.4 8.8h-4.7l-11.1 15.9.1.2a12.36 12.36 0 0 1 7.6-2.5 10.4 10.4 0 0 1 8 3.8l.1-.09zm6.41-19.6a9.78 9.78 0 0 1-6.91 2.3 8.92 8.92 0 0 1-6.3-2.9l-.2.1v14.6h3.8l9.7-14zm22.9 43.41-8.8-6.91-2.71 2.7-1.3-1.29 3.1-3.21V39.4H671l-.2-.2 3.5-5.2h2.5v-6.7L687.41 16l.2.2V34h8l.2.2-3.5 5.2h-4.7v30.3l4.8 3.7 3.3-3.4 1.3 1.4z"/></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 697.01 104.61"><path fill="var(--wpds-colors-primary, #111)" d="M39.2 32v36.6c4.7-2.8 7-6.8 8.7-12.1l1.2.6c-1.1 13.2-10.3 26-24.3 26S0 72.6 0 55.8C0 43 7.7 35.1 18.7 28.2a16.11 16.11 0 0 0-4.4-.6c-7.2 0-11.4 4.9-11.4 9.9H1.5a14.77 14.77 0 0 1-.1-2.1c0-9.3 5.5-19.7 16.9-19.7 7.3 0 12.9 6.7 21.4 6.7 4.3 0 6.7-1.6 8.4-5.3h1.2c-.1 6.5-2 12.8-10.1 14.9zm-19-3.3C15.1 34 10.1 39.6 10.1 50.9c0 6.2 1.9 12.4 6.6 16.4l3.1-1.7V40.3L16.6 42l-1-1.6 15-8.4c-3.8-.8-6.9-2.3-10.4-3.3zm17.1 3.7a17 17 0 0 1-2.3.1 17.52 17.52 0 0 1-4-.4v29.5l-12.8 7a15.57 15.57 0 0 0 9.9 3 22.58 22.58 0 0 0 9.2-2zm44 9.2v34.3c0 9.6-8.51 16.11-18 18l-.6-1c4.7-2.3 7.8-6.41 7.8-11.41V45.7l-4.9-4.5-2.6 2.6v27.1l3 2.8v.4l-8.1 8.61-9.3-8.51v-.4l3.6-3.8V25.8l10.6-11.3.2.1v26.6l8.7-9.2 8.7 7.9 2.7-2.6 1.31 1.3zM97.91 62v4.5l9 7.1 7-7.3 1.3 1.3L101 82.8 88.21 72.6l-2.8 2.8-1.2-1.3 3.1-3.2V45.8l18.9-13.8 10.5 16.3zm.2-22.6-.2.1v20.1l8.7-6.4zM180 82.71l-13.9-12-10.6 12-14.4-12.41V50.7h-2.8a3.89 3.89 0 0 0-4.1 3.5h-1a15.87 15.87 0 0 1-.5-3.8c0-2.6 1.1-9.4 8.4-9.4V25.8c0-5.9-3.9-6.2-3.9-11.3 0-5.7 5.4-11 15.3-14.5l.9.8c-3.3 1.6-6 3.6-6 7.9 0 6.6 6.4 4.9 6.4 15.3v4l11.7-12.3 12.3 12.1 11.6-12.1 11.2 11v37zM165.4 32.8l-7-6.9-4.6 4.7v34.3l8.5 7.3 3.1-3.5zm22.6-1.3-5.6-5.6-4.3 4.3v34.6l9.8 8.6.1-.1zm44.8 51.21-9.4-8.61h-.2l-8.3 8.61-10.1-8.91-2.3 2.3-1.3-1.3 2.9-3V45.5l19-13.6 10.4 8.2 2.8-2.8 1.5 1.3-3.6 3.4v27.1l4.6 4.2 2.9-3 1.5 1.4zm-9.4-37.41-8.3-6.5-.2.2v29.2l6.1 5.4 2.4-2.3zm40.6 4.8h9.4v21.4l-15.9 11.21a11.52 11.52 0 0 0-8.8-4.11c-3 0-5.4 1.4-7.8 4l-1.4-.5 13.8-19.8h-8.5V43.7L261.4 32c2 1.6 3.6 2.6 6.2 2.6a11.35 11.35 0 0 0 7.1-2.2l1 .7zm-1.4 8.8h-4.7l-11.1 15.9.1.2a12.36 12.36 0 0 1 7.6-2.5 10.4 10.4 0 0 1 8 3.8l.1-.09zm6.4-19.6a9.73 9.73 0 0 1-6.9 2.3 8.92 8.92 0 0 1-6.3-2.9l-.2.1v14.6h3.8l9.7-14zm40 2.3v34.3c0 9.6-8.51 16.11-18 18l-.6-1c4.7-2.3 7.8-6.41 7.8-11.41V45.7l-4.9-4.5-2.6 2.6v27.1l3 2.8v.4l-8.1 8.61-9.3-8.51v-.4l3.6-3.8V25.8l10.6-11.3.2.1v26.6l8.7-9.2 8.71 7.9 2.7-2.6 1.3 1.3zm19.6 41.11-8.3-7.61-2.8 2.8-1.3-1.3 3.3-3.4V44.7l-3.6-3.3-2.7 2.6-1.3-1.3L322 32l7.6 6.9 2.7-2.8 1.4 1.4-3.4 3.4v28.6l4.2 3.9 3-3.1 1.3 1.4zm-2.9-51.61-8.2-7.5 7.5-8 8.2 7.5zm46.1 51.61-8.7-7.91V45.6l-4.7-4.4-3.4 3.5v26.1l3.1 2.9v.4l-8.2 8.61-9.3-8.51v-.3l3.6-3.8V44.9l-4.1-3.7-3 3-1.4-1.3L345.9 32l9.1 8.1v2l9.5-10.1 8.7 7.8 2.9-2.9 1.3 1.4-3.5 3.5v28l3.9 3.7 3.3-3.4 1.2 1.3zm43-41V75.6c0 5.2 2.9 5 2.9 8.9 0 4.51-6.5 8.71-16.5 16.21-3.3-3.6-5.6-5.1-8.7-5.1a19.85 19.85 0 0 0-10.7 3.6l-1-.8 13.7-16.11-9-7.09-2.9 2.89-1.3-1.3 3.4-3.5V45.5l19-13.6 10.2 8 3-2.9 1.3 1.3zm-7.7 41.71c-2.5-1.61-3.1-3.31-3.1-7.61V74.3L387.9 93l.1.1c3.2-1.9 5.6-3.1 10.3-3.1 4 0 6.9 1.7 9.5 4 1.9-1.6 3.3-3.2 3.3-5.7 0-1.99-1.5-3.3-4-4.89zM404 45.3l-8.3-6.5-.2.2v30.7l5.9 4.6 2.6-3zm31.5 37.41-8.8-6.91-2.7 2.7-1.3-1.29 3.1-3.21V39.4H420l-.2-.2 3.5-5.2h2.5v-6.7L436.4 16l.2.2V34h8l.2.2-3.5 5.2h-4.7v30.3l4.8 3.7 3.3-3.4 1.3 1.4zm43.71-40.11v27.7l-16.9 12.5L450 73.5l-2.8 2.8-1.3-1.3 3.2-3.3v-27L466.81 32l11.4 8.9 2.9-2.9 1.3 1.4zm-10.8 3L460 39l-.09.1v29.8l8.5 6.4zm50.4 37-8.7-7.9V45.5l-4.7-4.4-3.41 3.5v26.1l3.1 2.9v.4l-8.2 8.61-9.3-8.51v-.3l3.6-3.8V44.8l-4.1-3.7-3 3-1.4-1.3 10.2-10.9L502 40v2l9.5-10.1 8.7 7.8 2.9-2.9 1.3 1.4-3.5 3.5v28l3.9 3.7 3.3-3.4 1.2 1.3zm61.39.11a12.91 12.91 0 0 0-6.3-4.61v20.81l-.2.1-5.5-5.1-11.6 10.7-.2-.1V77.6a18.83 18.83 0 0 0-10.2 6.61l-.8-.5c.7-7.71 4.5-13.41 11-15.61V48.6h-2.1a5.25 5.25 0 0 0-5.3 4.2h-1.2a12.28 12.28 0 0 1-.7-4.6c0-4.9 3.3-8.6 8.7-8.6h.6V28.8l-3.6-3.2-2.8 2.8-1.4-1.3 11.1-11.4 9.4 8.6v9.8L572 31V19.5h1.9V29l12.5-13.3L597.7 26v43.5zM572 32.9l-2.9 3v56.31l2.9 2.7zm13.1-2.3-5.9-5.4-5.3 5.6v36.3c4.7.6 8.2 2.2 11.1 5.3l.1-.1zm48.7 12v27.7l-16.9 12.5-12.3-9.3-2.8 2.8-1.3-1.3 3.2-3.3v-27L621.4 32l11.4 8.9 2.9-2.9 1.3 1.4zm-10.8 3-8.4-6.6-.1.1v29.8l8.5 6.4zm35.6 4.5h9.4v21.4l-15.9 11.21a11.52 11.52 0 0 0-8.8-4.11c-3 0-5.4 1.4-7.8 4l-1.4-.5 13.8-19.8h-8.5V43.7L656 32c2 1.6 3.6 2.6 6.2 2.6a11.38 11.38 0 0 0 7.11-2.2l1 .7zm-1.4 8.8h-4.7l-11.1 15.9.1.2a12.36 12.36 0 0 1 7.6-2.5 10.4 10.4 0 0 1 8 3.8l.1-.09zm6.41-19.6a9.78 9.78 0 0 1-6.91 2.3 8.92 8.92 0 0 1-6.3-2.9l-.2.1v14.6h3.8l9.7-14zm22.9 43.41-8.8-6.91-2.71 2.7-1.3-1.29 3.1-3.21V39.4H671l-.2-.2 3.5-5.2h2.5v-6.7L687.41 16l.2.2V34h8l.2.2-3.5 5.2h-4.7v30.3l4.8 3.7 3.3-3.4 1.3 1.4z"/></svg>