Update Wagtail logo to the latest version (login, userbar, page404, s…

…tyleguide)
albinazs · Jul 9, 2023 · c51a4e3 · c51a4e3
1 parent c7039ed
commit c51a4e3
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 46 deletions.
diff --git a/client/scss/components/_icons.scss b/client/scss/components/_icons.scss
@@ -160,3 +160,8 @@ use[href='#icon-spinner'] {
   height: 1.5em;
   color: theme('colors.critical.200');
 }
+
+.icon-wagtail-logo {
+  width: 100%;
+  height: auto;
+}
diff --git a/client/scss/layouts/_login.scss b/client/scss/layouts/_login.scss
@@ -120,12 +120,10 @@
 
   .login-logo {
     margin: theme('spacing.8') auto 0;
-    width: theme('spacing.8');
+    width: theme('spacing.32');
   }
 
-  @media (forced-colors: active) and (prefers-color-scheme: dark) {
-    .login-logo-img {
-      filter: invert(100%);
-    }
+  .wordmark {
+    fill: theme('colors.text-context');
   }
 }
diff --git a/wagtail/admin/static_src/wagtailadmin/images/wagtail-logo.svg b/wagtail/admin/static_src/wagtailadmin/images/wagtail-logo.svg
diff --git a/wagtail/admin/templates/wagtailadmin/404.html b/wagtail/admin/templates/wagtailadmin/404.html
@@ -7,7 +7,7 @@
         <div class="w-w-full w-h-full w-max-w-6xl w-mx-auto w-flex w-items-center w-justify-center">
             {% block branding_logo %}
                 <div class="page404__logo w-hidden sm:w-block">
-                    <img src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" alt=""/>
+                    {% include "wagtailadmin/wagtail-logo.html" %}
                 </div>
             {% endblock %}
 

diff --git a/wagtail/admin/templates/wagtailadmin/login.html b/wagtail/admin/templates/wagtailadmin/login.html
@@ -68,7 +68,7 @@ <h1>{% block branding_login %}{% trans "Sign in to Wagtail" %}{% endblock %}</h1
 
         {% block branding_logo %}
             <div class="login-logo">
-                <img class="login-logo-img" alt="" src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" />
+                {% include "wagtailadmin/wagtail-logo.html" with wordmark="True" %}
             </div>
         {% endblock %}
     </main>

diff --git a/wagtail/admin/templates/wagtailadmin/userbar/base.html b/wagtail/admin/templates/wagtailadmin/userbar/base.html
@@ -22,10 +22,7 @@
 
             <button aria-controls="wagtail-userbar-items" aria-haspopup="true" class="w-userbar-trigger" id="wagtail-userbar-trigger" data-wagtail-userbar-trigger>
                 {% block branding_logo %}
-                    {% comment %} Intentionally not using the icon template tag to show as SVG only {% endcomment %}
-                    <svg class="w-userbar-icon" aria-hidden="true">
-                        <use href="#icon-wagtail-icon"></use>
-                    </svg>
+                    {% include "wagtailadmin/wagtail-logo.html" with classes="w-userbar-icon" %}
                 {% endblock %}
                 <span class="w-sr-only">{% trans 'View Wagtail quick actions' %}</span>
             </button>

diff --git a/wagtail/admin/templates/wagtailadmin/wagtail-logo.html b/wagtail/admin/templates/wagtailadmin/wagtail-logo.html
@@ -0,0 +1,19 @@
+{% if wordmark %}
+    <svg class="icon-wagtail-logo {% if classes %}{{ classes }}{% endif %}" role="img" aria-label="Wagtail" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 427 182" fill="none">
+        <circle cx="90.455" cy="61.735" r="60" fill="#fff" opacity=".1"/>
+        <path fill="#fff" d="M112.664 70.424c-4.833-7.31-13.017-12.154-22.33-12.154a26.65 26.65 0 0 0-8.822 1.497 17.468 17.468 0 0 1-2.326-8.742c0-9.76 7.674-17.597 17.23-17.597 2.461 0 4.633.444 6.66 1.331 1.005-1.466 2.01-3.223 3.015-5.415 4.094 2.34 11.395 8.565 12.244 19.084l-8.076 11.932 2.405 10.064Z"/>
+        <path fill="#000" d="m28.802 131.528 5.021 10.519-1.004-17.531-4.017 7.012Z"/>
+        <path fill="#000" d="m13.017 135.605 53.466-94.037C70.754 31.772 80.373 25 91.493 25c5.357 0 10.424 1.479 14.623 4.288-1.013 2.218-2.027 3.993-3.04 5.471-2.027-.887-4.199-1.33-6.66-1.33-9.556 0-17.23 7.836-17.23 17.596 0 3.226.861 6.188 2.326 8.742a26.65 26.65 0 0 1 8.823-1.497c14.913 0 26.93 12.421 26.93 27.503 0 .632-.105 1.263-.226 1.987l-.063.38h.144c-.072.517-.181 1.034-.289 1.552a23.508 23.508 0 0 0-.29 1.553v.147c-10.07 52.452-73.03 51.327-82.782 50.875l.064-.22-1.004-17.531-3.957 6.97-15.845 4.119Z"/>
+        <path fill="#fff" d="m57.612 122.445-1.158.887s38.514-6.358 44.595-38.741l-6.081 2.07s-1.593 25.137-37.356 35.784Z"/>
+        <path fill="#000" d="M107.275 49.398c1.919 0 3.475-1.589 3.475-3.549s-1.556-3.549-3.475-3.549-3.475 1.59-3.475 3.55c0 1.96 1.556 3.548 3.475 3.548ZM118.279 48.511l-6.805 10.35h18.388l-11.583-10.35ZM32.819 124.516.687 181.115l24.099-8.014 9.037-31.054-1.004-17.531Z"/>
+        <path class="wordmark" fill="#000" d="M162.242 126.022h-10.791L136 81.451h9.688l11.036 33.673 11.037-33.673h9.687l11.037 33.673 11.036-33.673h9.688l-15.083 44.571h-10.792l-10.546-30.49-10.546 30.49ZM251.884 126.022H243.3v-6c-3.679 4.408-8.584 6.612-14.838 6.612-4.66 0-8.462-1.347-11.527-3.918-3.066-2.572-4.538-6.123-4.538-10.531s1.595-7.714 4.906-9.796c3.188-2.204 7.602-3.306 13.121-3.306h12.14V97.37c0-5.877-3.311-8.939-9.933-8.939-4.169 0-8.461 1.47-12.876 4.53l-4.169-5.877c5.395-4.285 11.527-6.49 18.517-6.49 5.273 0 9.565 1.348 12.875 3.92 3.311 2.693 5.028 6.856 5.028 12.489v29.02h-.122Zm-9.443-16.653v-3.796h-10.546c-6.744 0-10.178 2.082-10.178 6.367 0 2.204.859 3.796 2.575 5.021 1.717 1.102 4.047 1.714 6.99 1.714 2.943 0 5.641-.857 7.848-2.572 2.208-1.591 3.311-3.795 3.311-6.734ZM302.896 81.451v38.816c0 7.836-2.084 13.836-6.376 17.755-4.292 3.918-9.811 5.877-16.432 5.877-6.745 0-12.754-2.082-18.149-6.245l4.414-7.102c4.415 3.306 8.707 4.898 13.244 4.898 4.415 0 7.971-1.102 10.546-3.428 2.575-2.327 3.924-6 3.924-11.021v-5.755a15.492 15.492 0 0 1-6.009 6.245c-2.575 1.592-5.518 2.327-8.706 2.327-5.886 0-10.791-2.082-14.593-6.245-3.801-4.163-5.763-9.306-5.763-15.428 0-6.123 1.962-11.266 5.763-15.429 3.802-4.163 8.707-6.245 14.593-6.245 5.886 0 10.668 2.45 14.347 7.347v-6.612h9.197v.245Zm-34.826 20.571c0 3.674 1.104 6.857 3.434 9.429 2.207 2.693 5.273 3.918 9.197 3.918 3.801 0 6.99-1.225 9.319-3.796 2.33-2.571 3.557-5.755 3.557-9.551 0-3.796-1.227-7.102-3.557-9.673-2.452-2.694-5.518-3.919-9.319-3.919-3.802 0-6.867 1.347-9.075 4.164-2.452 2.571-3.556 5.755-3.556 9.428ZM326.441 88.92v22.653c0 2.082.613 3.796 1.717 5.02 1.103 1.225 2.698 1.837 4.66 1.837 1.962 0 3.924-.98 5.763-2.939l3.802 6.612c-3.311 2.939-6.99 4.408-10.914 4.408-4.047 0-7.358-1.346-10.178-4.163-2.821-2.816-4.292-6.489-4.292-11.142V88.92h-5.641V81.33h5.641V67.492h9.442V81.45h11.772v7.592h-11.772v-.123ZM386.038 126.022h-8.584v-6c-3.679 4.408-8.584 6.612-14.838 6.612-4.66 0-8.461-1.347-11.527-3.918-3.066-2.572-4.537-6.123-4.537-10.531s1.594-7.714 4.905-9.796c3.188-2.204 7.603-3.306 13.121-3.306h12.14V97.37c0-5.877-3.311-8.939-9.933-8.939-4.169 0-8.461 1.47-12.876 4.53l-4.169-5.877c5.396-4.285 11.527-6.49 18.517-6.49 5.273 0 9.565 1.348 12.876 3.92 3.311 2.693 5.028 6.856 5.028 12.489v29.02h-.123Zm-9.442-16.653v-3.796H366.05c-6.745 0-10.179 2.082-10.179 6.367 0 2.204.859 3.796 2.576 5.021 1.716 1.102 4.046 1.714 6.989 1.714 2.944 0 5.641-.857 7.849-2.572 2.207-1.591 3.311-3.795 3.311-6.734ZM398.056 72.512c-1.227-1.224-1.717-2.571-1.717-4.163s.613-3.061 1.717-4.163c1.226-1.225 2.575-1.714 4.169-1.714 1.594 0 3.066.612 4.169 1.714 1.227 1.224 1.717 2.571 1.717 4.163a5.825 5.825 0 0 1-1.717 4.163 5.842 5.842 0 0 1-4.169 1.715c-1.594.122-2.943-.49-4.169-1.715Zm8.829 53.51h-9.442V81.451h9.442v44.571ZM426.505 126.022h-9.442V63.819h9.442v62.203Z"/>
+    </svg>
+{% else %}
+    <svg class="icon-wagtail-logo {% if classes %}{{ classes }}{% endif %}" role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 225 274" fill="none">
+        <path fill="#fff" d="M194.897 79.492c-8.392-12.793-22.602-21.27-38.773-21.27-5.322 0-10.496.915-15.32 2.62a30.755 30.755 0 0 1-4.039-15.3c0-17.078 13.325-30.792 29.918-30.792 4.274 0 8.046.776 11.565 2.328 1.746-2.566 3.491-5.64 5.236-9.476 7.108 4.095 19.786 14.99 21.26 33.397L190.72 61.88l4.177 17.612Z"/>
+        <path fill="#000" d="m49.277 186.425 8.718 18.407-1.743-30.679-6.975 12.272Z"/>
+        <path fill="#000" d="m21.867 193.558 92.839-164.565C122.124 11.853 138.827 0 158.135 0c9.302 0 18.102 2.588 25.393 7.504-1.76 3.882-3.52 6.987-5.28 9.575-3.52-1.553-7.291-2.33-11.565-2.33-16.594 0-29.919 13.716-29.919 30.794 0 5.646 1.496 10.83 4.04 15.3a45.95 45.95 0 0 1 15.319-2.62c25.896 0 46.764 21.736 46.764 48.131 0 1.104-.183 2.209-.394 3.475l-.109.665h.252c-.126.906-.315 1.811-.503 2.717-.189.906-.377 1.811-.503 2.717v.259c-17.487 91.789-126.812 89.821-143.747 89.031l.112-.386-1.743-30.679-6.872 12.197-27.513 7.208Z"/>
+        <path fill="#fff" d="m99.304 170.528-2.012 1.552s66.877-11.127 77.437-67.797l-10.56 3.623s-2.765 43.99-64.865 62.622Z"/>
+        <path fill="#000" d="M185.54 42.697c3.332 0 6.034-2.781 6.034-6.211s-2.702-6.21-6.034-6.21c-3.333 0-6.034 2.78-6.034 6.21s2.701 6.21 6.034 6.21ZM204.648 41.144l-11.817 18.114h31.93l-20.113-18.114ZM56.252 174.153.456 273.202l41.847-14.025 15.692-54.345-1.743-30.679Z"/>
+    </svg>
+{% endif %}
diff --git a/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html b/wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html
@@ -529,12 +529,14 @@ <h3>Loading mask</h3>
             <p>Add the following <code>div</code> around any items you wish to display with a spinner overlay and fading out</p>
             <p>Remove the "loading" class to disable the effect</p>
             <div class="loading-mask loading" style="width:200px">
-                <img src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" width="200" alt="Wagtail" />
+                {% include "wagtailadmin/wagtail-logo.html"%}
             </div>
 
             <h3>Image transparency</h3>
-            <p>It can be useful to show users the transparent areas of images. Add a transparency checkerboard with the <code>.show-transparency</code> on the <code>img</code> tag thus:</p>
-            <img src="{% versioned_static 'wagtailadmin/images/wagtail-logo.svg' %}" width="200" class="show-transparency" alt="Wagtail"/>
+            <p>It can be useful to show users the transparent areas of images. Add a transparency checkerboard with the <code>.show-transparency</code> on the <code>img</code> or <code>svg</code> tag thus:</p>
+            <div style="width:200px">
+                {% include "wagtailadmin/wagtail-logo.html" with classes="show-transparency" %}
+            </div>
         {% endpanel %}
 
         {% panel id="icons" heading="Icons" %}