Tailwind 3 and Switch UI scaling from a base-10 to base-16

app/assets/stylesheets/tailwind/components/grid.css

@@ -1,9 +1,7 @@
 @layer components {
   /*! purgecss start ignore */
   .grid-row {
-    margin-left: -1.5rem;
-    margin-right: -1.5rem;
-    @apply my-0;
+    @apply my-0 -mx-gutterHalf;
   }
 
   .align-with-heading {

app/assets/stylesheets/tailwind/components/message.css

@@ -92,8 +92,7 @@
   .folder-heading-folder {
     background-size: auto 19px;
     background-position: 0px 4px;
-    min-height: 3rem;
-    @apply inline bg-no-repeat align-top text-smaller;
+    @apply inline bg-no-repeat align-top text-smaller min-h-12;
   }
   .folder-heading-folder {
     @apply p-0 pl-gutter bg-folderBlackPng bg-folderBlack;
@@ -125,8 +124,7 @@
     @apply text-blue-lightblue;
   }
   .folder-heading-manage-link {
-    min-height: 3rem;
-    @apply block text-right;
+    @apply block text-right min-h-12;
   }
 
   .message-name-separator,

app/assets/stylesheets/tailwind/style.css

@@ -57,16 +57,12 @@
 }
 
 html {
-  font-size: 62.5%;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
   background-color: #dee0e2;
   -ms-overflow-style: scrollbar;
 }
 
 body {
   @apply leading-normal font-normal;
-  font-size: 160%;
   background: white;
   color: #0b0c0c;
   -webkit-font-smoothing: antialiased;

app/assets/stylesheets/tailwind/toolkit/wp.css

@@ -94,8 +94,8 @@
   .wp-block-column[style*="3rem"] {
     box-sizing: content-box;
     display: flex;
-    height: 3rem;
     align-items: center;
+    @apply h-12;
   }
 
   /* Hide wp-block-image if only child of a column */
@@ -208,7 +208,7 @@
   }
 
   .wp .page-content.home p + ul {
-    margin-top: -0.5rem;
+    @apply -mt-2;
   }
 
   /** Block
@@ -232,7 +232,7 @@
   }
 
   .wp-block-post-content p + ul {
-    margin-top: -0.5rem;
+    @apply -mt-2;
   }
 
   /*! purgecss end ignore */

app/templates/partials/nav/account_menu_mobile.html

@@ -5,7 +5,7 @@
     aria-expanded="false"
     aria-haspopup="true"
     id="account-icon-mobile"
-    class="p-1 h-14 border-2 border-solid border-gray rounded-lg"
+    class="flex items-center justify-center min-h-target min-w-target border-2 border-solid border-gray rounded-lg"
     data-module="menu-overlay"
     data-menu-overlay-content="account-menu-mobile"
     data-menu-overlay-close="account-close-mobile">

app/templates/partials/nav/gc_header_nav.html

@@ -47,7 +47,7 @@
           </div>
         {% endif %}
         <div class="pl-5">
-          <div class="h-14 p-1 border-2 border-solid border-gray rounded-lg">
+          <div class="flex items-center justify-center min-h-target min-w-target border-2 border-solid border-gray rounded-lg">
             <a
               id="nav-lang"
               class="px-1 block line-under leading-none text-blue visited:text-blue link:text-blue text-smaller underline hover:no-underline"

app/templates/partials/page-content/counter.html

@@ -14,12 +14,12 @@ <h2 class="heading-medium">{{ _("GC Notify by the numbers") }}</h2>
       </div>
       <!-- Box 2-->
       <p class="space-y-gutterHalf">
-        <span class="xs:text-lg md:text-xxl font-bold leading-none font-sans font-bold block">{{ stats.live_services | format_number }}</span>
+        <span data-test-id="count-services" class="text-lg md:text-xxl font-bold leading-none font-sans font-bold block">{{ stats.live_services | format_number }}</span>
         <span class="block">{{ _("services using GC&nbsp;Notify") }}</span>
       </p>
       <!-- Box 3-->
       <p class="space-y-gutterHalf">
-        <span class="xs:text-lg md:text-xxl font-bold leading-none font-sans font-bold block">{{ stats.notifications_total | format_number }}</span>
+        <span data-test-id="count-notifications" class="text-lg md:text-xxl ont-bold leading-none font-sans font-bold block">{{ stats.notifications_total | format_number }}</span>
         <span class="block">{{ _("messages sent") }}</span>
       </p>
       <!-- end -->

app/templates/views/activity.html

@@ -16,14 +16,14 @@ <h1 class="heading-large">{{ _('Activity on GC Notify') }}</h1>
   <div class="flex flex-col lg:flex-row mb-20">
     <div class="w-full lg:w-1/2 bg-gray py-10 px-6 mb-6 lg:mb-0 lg:mr-3">
       <div class="font-bold text-title extra-tight font-sans h-24">{{ _('Total notifications sent') }}</div>
-      <div class="font-sans text-xl lg:text-xxl font-bold mb-4">{{ notifications_total | format_number }}</div>
+      <div data-test-id="totals" class="font-sans text-lg lg:text-xxl font-bold mb-4">{{ notifications_total | format_number }}</div>
       <div class="w-56 h-1 bg-gray-border mb-6"></div>
       <div class="font-sans">{{ _('This includes status updates, appointment reminders, and password resets sent by email and text message.') }}</div>
     </div>
 
     <div class="w-full lg:w-1/2 bg-gray py-10 px-6 lg:ml-3">
       <div class="font-bold text-title extra-tight font-sans h-24">{{ _('Programs and services using GC Notify') }}</div>
-      <div class="font-sans text-xl lg:text-xxl font-bold mb-4">{{ live_services | format_number }}</div>
+      <div data-test-id="services" class="font-sans text-lg lg:text-xxl font-bold mb-4">{{ live_services | format_number }}</div>
       <div class="w-56 h-1 bg-gray-border mb-6"></div>
       <div class="font-sans">{{ _('This includes services offered by federal departments, and provinces and territories.') }}</div>
     </div>
@@ -32,11 +32,11 @@ <h1 class="heading-large">{{ _('Activity on GC Notify') }}</h1>
   <div class="flex flex-col lg:flex-row border-solid border-0 border-b-2 border-gray-border pb-8 lg:px-8 mb-20">
     <div class="w-full lg:w-1/3 mb-6 lg:mb-0">
       <div class="text-title extra-tight font-sans mb-4">{{ _('Emails') }}</div>
-      <div class="font-sans text-xl font-bold">{{ emails_total | format_number }}</div>
+      <div class="font-sans text-lg font-bold">{{ emails_total | format_number }}</div>
     </div>
     <div class="w-full lg:w-1/3">
       <div class="text-title extra-tight font-sans mb-4">{{ _('Text messages') }}</div>
-      <div class="font-sans text-xl font-bold">{{ sms_total | format_number }}</div>
+      <div class="font-sans text-lg font-bold">{{ sms_total | format_number }}</div>
     </div>
   </div>
 

app/templates/views/email-branding/_preview.html

@@ -1,4 +1,4 @@
-<div class="max-w-5xl">
+<div class="max-w-email">
   <div class="py-0 px-0 px-gutterHalf box-border border border-gray-300 overflow-x-auto" id="template_preview">
     {% if '/_email' in request.base_url %}
       <link href="https://fonts.googleapis.com/css?family=Flow+Block&display=swap" rel="stylesheet" />

tailwind.config.js

@@ -23,18 +23,14 @@ module.exports = {
       none: "none",
     },
     fontSize: {
-      xs: "1.3rem",
-      small: "1.6rem",
-      smaller: "1.9rem",
-      base: "2.0rem",
-      title: "2.4rem",
-      titlelarge: "2.7rem",
-      lg: "3.6rem",
-      xl: "3.8rem",
-      48: "4.8rem",
-      xxl: "6.5rem",
-      "3xl": "9rem",
-      brand: "2.6rem",
+      xs: "0.875rem",
+      small: "1rem",
+      smaller: "1.25rem",
+      base: "1.25rem",
+      title: "1.5rem",
+      titlelarge: "1.75rem",
+      lg: "2.25rem",
+      xxl: "3.25rem",
     },
     screens: {
       xs: "320px",
@@ -43,6 +39,26 @@ module.exports = {
       md: "768px",
       lg: "1024px",
     },
+    spacing: {
+      0: "0rem",
+      1: "0.1875rem",
+      2: "0.3125rem",
+      3: "0.5rem",
+      4: "0.625rem",
+      5: "0.75rem",
+      6: "0.9375rem",
+      8: "1.25rem",
+      10: "1.5625rem",
+      12: "1.875rem",
+      16: "2.5rem",
+      20: "3.125rem",
+      24: "3.75rem",
+      56: "8.75rem",
+      gutter: "1.875rem",
+      gutterHalf: "0.9375rem",
+      gutterAndAHalf: "2.8125rem",
+      doubleGutter: "3.75rem",
+    },
     colors: {
       red: {
         default: "#b10e1e",
@@ -63,10 +79,12 @@ module.exports = {
         lightblue: "#0154B0",
         slightlight: "#284162",
         /* trying to slowly implement a more consistent scale below */
-        300: "#71A7F3",
-        500: "#4C8CE6",
-        700: "#24508F",
-        800: "#213045" /* Brand blue (default)*/,
+        200: "#D7E5F5",
+        500: "#004AB2",
+        600: "#6584A6",
+        700: "#425A76",
+        800: "#31455C",
+        900: "#26374A",
       },
       gray: {
         default: "#eee",
@@ -161,12 +179,6 @@ module.exports = {
         white: "1px solid rgba(255, 255, 255, 0.1)",
         black: "1px solid black",
       },
-      spacing: {
-        gutter: "3.0rem",
-        gutterHalf: "1.5rem",
-        gutterAndAHalf: "4.5rem",
-        doubleGutter: "6.0rem",
-      },
       transitionDuration: {
         600: "600ms",
       },
@@ -177,11 +189,15 @@ module.exports = {
         "5/8": "62.5%",
       },
       maxWidth: {
-        "4xl": "53rem",
         "80ch": "80ch",
         "2/3": "66.666667%",
+        email: "600px",
+      },
+      minWidth: {
+        target: "45px",
       },
       minHeight: {
+        12: "1.875rem",
         target: "45px",
       },
       flex: {
@@ -217,6 +233,7 @@ module.exports = {
     }),
   ],
   variants: {
+    backgroundColor: ["responsive", "hover", "focus"],
     borderWidth: ["responsive", "focus"],
     textColor: ["visited", "link", "hover", "focus"],
   },

tests/app/main/views/test_index.py

@@ -178,8 +178,8 @@ def test_activity_page(mocker, client, stats, services):
     response = client.get(url_for("main.activity"))
     page = BeautifulSoup(response.data.decode("utf-8"), "html.parser")
     assert response.status_code == 200
-    assert page.select("div[class~='lg:text-xxl']")[0].text == str(sum(x[2] for x in stats))
-    assert page.select("div[class~='lg:text-xxl']")[1].text == str(len(services))
+    assert page.select("div[data-test-id='totals']")[0].text == str(sum(x[2] for x in stats))
+    assert page.select("div[data-test-id='services']")[0].text == str(len(services))
 
 
 @pytest.mark.parametrize(
@@ -212,8 +212,8 @@ def test_home_page_displays_activity(mocker, client, stats, services):
     response = client.get(url_for("main.index"))
     page = BeautifulSoup(response.data.decode("utf-8"), "html.parser")
     assert response.status_code == 200
-    assert page.select("span[class~='xs:text-lg']")[0].text == str(len(services))
-    assert page.select("span[class~='xs:text-lg']")[1].text == str(sum(x[2] for x in stats))
+    assert page.select("[data-test-id='count-services']")[0].text == str(len(services))
+    assert page.select("[data-test-id='count-notifications']")[0].text == str(sum(x[2] for x in stats))
 
 
 @pytest.mark.parametrize(