From 5bfeb8044e093a052673c341e2e8bf4a606de30a Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Thu, 9 Jan 2025 13:31:31 -0500
Subject: [PATCH] Theme showcase improvements (#480)

* Presentation improvements

* Change `-webkit-text-size-adjust` to supported value (`none` isn't a supported keyword on iOS)

* Try using `text-size-adjust`

* Throwing caution to the wind

* Give up on `text-size-adjust` and add 1-column view
---
 docs/_includes/preset-theme-selector.njk |  2 +-
 docs/docs/themes.md                      | 34 ++++++++++++++----------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/docs/_includes/preset-theme-selector.njk b/docs/_includes/preset-theme-selector.njk
index e4793d6eb..08f2bfa77 100644
--- a/docs/_includes/preset-theme-selector.njk
+++ b/docs/_includes/preset-theme-selector.njk
@@ -9,7 +9,7 @@
     <wa-menu-item type="checkbox" value="classic" data-description="Timeless elegance that never goes out of style.">Classic</wa-menu-item>
     <wa-menu-item type="checkbox" value="awesome" data-description="Punchy and vibrant, the rockstar of themes.">Awesome</wa-menu-item>
     <wa-menu-item type="checkbox" value="active" data-description="Energetic and tactile, always in motion.">Active</wa-menu-item>
-    <wa-menu-item type="checkbox" value="brutalist" data-description="Sharp, raw, and unapologetically bold.">Brutalist</wa-menu-item>
+    <wa-menu-item type="checkbox" value="brutalist" data-description="Sharp, square, and unapologetically bold.">Brutalist</wa-menu-item>
     <wa-menu-item data-alpha="remove" type="checkbox" value="glassy" data-description="TODO">Glassy</wa-menu-item>
     <wa-menu-item type="checkbox" value="mellow" data-description="Soft and soothing, like a lazy Sunday morning.">Mellow</wa-menu-item>
     <wa-menu-item type="checkbox" value="tailspin" data-description="Like a bird in flight, guiding you from there to here.">Tailspin</wa-menu-item>
diff --git a/docs/docs/themes.md b/docs/docs/themes.md
index 7f781a6a6..5236b23f2 100644
--- a/docs/docs/themes.md
+++ b/docs/docs/themes.md
@@ -25,8 +25,8 @@ layout: page-outline
     margin-block-end: var(--wa-space-xl);
 
     &.wa-flank {
-      --content-percentage: 55%;
-      --flank-size: 20ch;
+      --content-percentage: 60%;
+      --flank-size: 25ch;
     }
   }
 
@@ -53,13 +53,13 @@ layout: page-outline
       column-count: 1;
     }
 
-    @container showcase (width > 700px) {
+    @container showcase (width > 750px) {
       .showcase-examples {
         column-count: 2;
       }
     }
 
-    @container showcase (width > 900px) {
+    @container showcase (width > 950px) {
       .showcase-examples {
         column-count: 3;
       }
@@ -68,23 +68,29 @@ layout: page-outline
 
   @supports (zoom: 1) {
     .showcase-examples {
-      column-count: 2;
+      column-count: 1;
       zoom: 40%;
     }
 
-    @container showcase (width > 400px) {
+    @container showcase (width > 350px) {
+      .showcase-examples {
+        column-count: 2;
+      }
+    }
+
+    @container showcase (width > 450px) {
       .showcase-examples {
         zoom: 55%;
       }
     }
 
-    @container showcase (width > 700px) {
+    @container showcase (width > 750px) {
       .showcase-examples {
         zoom: 70%;
       }
     }
 
-    @container showcase (width > 800px) {
+    @container showcase (width > 950px) {
       .showcase-examples {
         column-count: 3;
         zoom: 70%;
@@ -110,12 +116,12 @@ layout: page-outline
             <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-green-60); --text-color: var(--wa-color-green-95);">
               <wa-icon slot="icon" name="sword-laser" family="duotone" style="font-size: 1.5em;"></wa-icon>
             </wa-avatar>
-            <div class="wa-stack wa-gap-xs">
-              <div class="wa-split wa-gap-xs">
+            <div class="wa-stack wa-gap-2xs">
+              <div class="wa-split wa-gap-2xs">
                 <strong>Initiate Saber</strong>
                 <strong>$179.99</strong>
               </div>
-              <div class="wa-split wa-gap-xs wa-caption-m">
+              <div class="wa-split wa-gap-2xs wa-caption-m">
                 <span>Green</span>
                 <a href="#">Remove</a>
               </div>
@@ -126,12 +132,12 @@ layout: page-outline
             <wa-avatar shape="rounded" style="--size: 3em; --background-color: var(--wa-color-teal-60); --text-color: var(--wa-color-teal-95);">
               <wa-icon slot="icon" name="robot-astromech" family="duotone" style="font-size: 1.5em;"></wa-icon>
             </wa-avatar>
-            <div class="wa-stack wa-gap-xs">
-              <div class="wa-split wa-gap-xs">
+            <div class="wa-stack wa-gap-2xs">
+              <div class="wa-split wa-gap-2xs">
                 <strong>Repair Droid</strong>
                 <strong>$3,049.99</strong>
               </div>
-              <div class="wa-split wa-gap-xs wa-caption-m">
+              <div class="wa-split wa-gap-2xs wa-caption-m">
                 <span>R-series</span>
                 <a href="#">Remove</a>
               </div>