Design review updates - Remove tab animation, adjust tab spacing and high contrast support, sidebar alignment (#8452)

client/scss/components/_tabs.scss

@@ -11,7 +11,7 @@
 
 .w-tabs {
   &__wrapper {
-    @apply w-mb-10 w-overflow-x-auto w-scrollbar-thin w-flex w-items-center w-justify-between w-flex-wrap w-gap-4;
+    @apply w-mb-8 w-overflow-x-auto w-scrollbar-thin w-flex w-items-center w-justify-between w-flex-wrap w-gap-4;
   }
 
   &__list {
@@ -37,11 +37,14 @@
     after:w-left-0
     after:-w-bottom-px
     after:w-transition-all
-    motion-reduce:after:w-transition-none
-    hover:after:w-w-full;
+    after:forced-colors:w-h-1
+    after:forced-colors:w-bg-LinkText
+    hover:after:w-w-full
+    hover:after:forced-colors:w-w-full
+    motion-reduce:after:w-transition-none;
 
     &[aria-selected='true'] {
-      @apply after:w-w-full w-text-primary;
+      @apply after:w-w-full w-text-primary after:forced-colors:w-w-full;
     }
   }
 

client/src/components/Sidebar/menu/MenuItem.scss

@@ -5,7 +5,7 @@
   position: relative;
 
   &__link {
-    @apply w-text-14 w-leading-none;
+    @apply w-text-14 w-leading-none w-transition;
     @include transition(
       border-color $menu-transition-duration ease,
       background-color $menu-transition-duration ease
@@ -61,8 +61,6 @@
   }
 
   &--in-sub-menu {
-    @apply hover:w-bg-primary;
-
     #{$root}__link,
     .menuitem-label {
       @apply w-leading-tight;

client/src/components/Sidebar/menu/SubMenuItem.scss

@@ -41,7 +41,7 @@
 
   > h2 {
     // w-min-h-[160px] and w-mt-[35px] classes are to vertically align the title and icon combination to the search input on the left
-    @apply w-min-h-[160px] w-mt-[45px] w-px-4 w-box-border w-text-center w-text-white w-mb-0 w-inline-flex w-flex-col w-justify-center w-items-center w-transition-sidebar;
+    @apply w-min-h-[180px] w-px-4 w-box-border w-text-center w-text-white w-mb-0 w-inline-flex w-flex-col w-justify-center w-items-center w-transition-sidebar;
 
     &:before {
       font-size: 4em;
@@ -51,10 +51,6 @@
       width: 100%;
       opacity: 0.15;
     }
-
-    @at-root .sidebar--slim & {
-      @apply w-min-h-[150px];
-    }
   }
 
   ul > li {

client/src/components/Sidebar/modules/WagtailBranding.scss

@@ -30,15 +30,14 @@ $logo-size: 110px;
   border-radius: 100%;
 
   @include media-breakpoint-up(sm) {
-    margin: 0 auto 4rem;
+    margin: 1.25rem auto;
   }
 
   // Reduce overall size when in slim mode
   .sidebar--slim & {
     @include show-focus-outline-inside();
-    margin: 1.125em auto 4em;
     width: 40px;
-    height: 40px;
+    height: 110px;
   }
 
   // Remove background on 404 page

client/src/entrypoints/admin/comments.js

@@ -343,7 +343,7 @@ window.comments = (() => {
 
     const commentCounter = document.createElement('div');
     commentCounter.className =
-      '-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] w-translate-x-[-6px] w-text-[0.5625rem] w-font-bold w-bg-teal-100 w-text-white w-border w-border-white w-rounded-[1rem]';
+      '-w-mr-3 w-py-0.5 w-px-[0.325rem] w-translate-y-[-8px] w-translate-x-[-4px] w-text-[0.5625rem] w-font-bold w-bg-teal-100 w-text-white w-border w-border-white w-rounded-[1rem]';
     commentToggle.className =
       'w-h-[50px] w-bg-transparent w-box-border w-py-3 w-px-3 w-flex w-justify-center w-items-center w-outline-offset-inside w-text-grey-400 w-transition hover:w-transform hover:w-scale-110 hover:w-text-primary focus:w-text-primary';
     commentToggle.appendChild(commentCounter);

client/src/tokens/objectStyles.js

@@ -10,6 +10,7 @@ const borderRadius = {
 const borderWidth = {
   DEFAULT: '0.0625rem', // 1px
   0: '0',
+  5: '0.3125rem',
 };
 
 // If adding new values, use T-shirt sizing naming.

client/tailwind.config.js

@@ -118,4 +118,11 @@ module.exports = {
     // Disable text-transform so we don’t rely on uppercasing text.
     textTransform: false,
   },
+  variants: {
+    extend: {
+      backgroundColor: ['forced-colors'],
+      width: ['forced-colors'],
+      height: ['forced-colors'],
+    },
+  },
 };

wagtail/admin/templates/wagtailadmin/account/account.html

@@ -6,7 +6,7 @@
     {% trans "Account" as account_str %}
     {% include "wagtailadmin/shared/header.html" with title=account_str icon="user" merged=1 %}
 
-    <div class="w-tabs" data-tabs data-tabs-animate>
+    <div class="w-tabs" data-tabs>
         <div class="w-tabs__wrapper">
             <div role="tablist" class="w-tabs__list nice-padding">
                 {% for tab in panels_by_tab.keys %}

wagtail/admin/templates/wagtailadmin/panels/tabbed_interface.html

@@ -1,8 +1,8 @@
 {% load wagtailadmin_tags i18n %}
 
-<div class="w-tabs" data-tabs data-tabs-animate>
+<div class="w-tabs" data-tabs>
     <div class="w-tabs__wrapper">
-        <div role="tablist" class="w-tabs__list w-px-5 sm:w-px-[4.5rem]">
+        <div role="tablist" class="w-tabs__list">
             {% for child in self.children %}
                 {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id=child.heading title=child.heading classes=child.classes|join:" " %}
             {% endfor %}

wagtail/admin/templates/wagtailadmin/shared/breadcrumb-next.html

@@ -12,7 +12,7 @@
         <button
             type="button"
             data-toggle-breadcrumbs
-            class="w-flex w-items-center w-justify-center w-box-border w-ml-0 w-p-4 w-w-[70px] w-h-full w-bg-transparent w-text-grey-400 w-transition hover:w-scale-110 hover:w-text-primary w-outline-offset-inside"
+            class="w-flex w-items-center w-justify-center w-box-border w-ml-0 w-p-4 w-w-[50px] w-h-full w-bg-transparent w-text-grey-400 w-transition hover:w-scale-110 hover:w-text-primary w-outline-offset-inside"
             aria-label="{% trans 'Toggle breadcrumbs' %}"
             aria-expanded="false"
         >

wagtail/contrib/styleguide/templates/wagtailstyleguide/base.html

@@ -685,7 +685,7 @@
         <section id="tabs">
             <h2>Tabs</h2>
 
-            <div class="w-tabs" data-tabs data-tabs-animate>
+            <div class="w-tabs" data-tabs>
                 <div role="tablist" class="w-tabs__list">
                     {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-1' title='Tab 1' %}
                     {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-2' title='Tab 2' %}
@@ -694,7 +694,7 @@
 
             <p>Tabs can also indicate errors:</p>
 
-            <div class="w-tabs" data-tabs data-tabs-animate>
+            <div class="w-tabs" data-tabs>
                 <div role="tablist" class="w-tabs__list">
                     {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-errors-1' title='Tab 1' errors_count='5' %}
                     {% include 'wagtailadmin/shared/tabs/tab_nav_link.html' with tab_id='tab-errors-2' title='Tab 2' errors_count='55' %}

wagtail/users/templates/wagtailusers/users/create.html

@@ -7,7 +7,7 @@
     {% trans "Add user" as add_user_str %}
     {% include "wagtailadmin/shared/header.html" with title=add_user_str merged=1 icon="user" %}
 
-    <div class="w-tabs" data-tabs data-tabs-animate>
+    <div class="w-tabs" data-tabs>
         <div class="w-tabs__wrapper">
             <div role="tablist" class="w-tabs__list nice-padding">
                 {% trans "Account" as account_text %}

wagtail/users/templates/wagtailusers/users/edit.html

@@ -7,7 +7,7 @@
     {% trans "Editing" as editing_str %}
     {% include "wagtailadmin/shared/header.html" with title=editing_str subtitle=user.get_username merged=1 icon="user" %}
 
-    <div class="w-tabs" data-tabs data-tabs-animate>
+    <div class="w-tabs" data-tabs>
         <div class="w-tabs__wrapper">
             <div role="tablist" class="w-tabs__list nice-padding">
                 {% trans "Account" as account_text %}