[polaris.shopify.com] Dark mode / mobile layout improvements

.changeset/weak-cars-knock.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Improved the layout on mobile

polaris.shopify.com/src/components/Breadcrumbs/Breadcrumbs.module.scss

@@ -5,6 +5,7 @@
 
   ul {
     display: flex;
+    flex-wrap: wrap;
   }
 
   li {

polaris.shopify.com/src/components/ComponentExamples/ComponentExamples.module.scss

@@ -1,3 +1,5 @@
+@import '../../styles/variables.scss';
+
 .ExamplesList {
   margin-top: 2rem;
   display: flex;
@@ -57,6 +59,10 @@
     max-width: 100%;
     min-width: 375px;
     box-shadow: 20px 0 20px -20px rgba(0, 0, 0, 0.125);
+
+    @media screen and (max-width: $breakpointMobile) {
+      min-width: 100%;
+    }
   }
 }
 

polaris.shopify.com/src/components/Frame/Frame.module.scss

@@ -46,7 +46,7 @@ $breakpointNav: $breakpointTablet;
   overflow: scroll;
 
   @media screen and (max-width: $breakpointNav) {
-    padding-top: 4rem;
+    padding-top: 4.75rem;
   }
 
   .newSection {
@@ -88,6 +88,11 @@ $breakpointNav: $breakpointTablet;
         > a {
           padding: 0.033rem 0;
           color: var(--text-strong);
+
+          @media screen and (max-width: $breakpointNav) {
+            padding: 0.4rem 0;
+            font-size: var(--font-size-400);
+          }
         }
 
         &.isCurrent > a {
@@ -189,6 +194,11 @@ $breakpointNav: $breakpointTablet;
     background-size: 12px 12px;
     opacity: 0.66;
 
+    @media screen and (max-width: $breakpointNav) {
+      width: 36px;
+      height: 36px;
+    }
+
     &:hover {
       opacity: 1;
       background-color: var(--surface-subdued);
@@ -209,6 +219,10 @@ $breakpointNav: $breakpointTablet;
 
   svg {
     transform: scale(0.8);
+
+    @include dark-mode {
+      filter: invert(1);
+    }
   }
 
   @media screen and (min-width: $breakpointNav) {
@@ -226,12 +240,20 @@ $breakpointNav: $breakpointTablet;
   @media screen and (max-width: $breakpointNav) {
     display: block;
     position: absolute;
-    top: 10px;
-    right: 10px;
-    width: 24px;
-    height: 24px;
+    top: 20px;
+    right: 20px;
+    width: 36px;
+    height: 36px;
     background-color: transparent;
     border-radius: var(--border-radius-round);
+
+    svg {
+      transform: scale(0.5);
+    }
+  }
+
+  @include dark-mode {
+    filter: invert(1);
   }
 }
 

polaris.shopify.com/src/components/Frame/Frame.tsx

@@ -107,9 +107,7 @@ function Header({darkMode, children}: Props) {
           ref={menuButtonRef}
           className={styles.NavToggle}
         >
-          <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-            <path d="M19 11h-18a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0-7h-18a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0 14h-18a1 1 0 0 1 0-2h18a1 1 0 0 1 0 2z" />
-          </svg>
+          <NavToggleIcon />
         </button>
 
         <Link href="/">
@@ -298,4 +296,12 @@ function CloseIcon() {
   );
 }
 
+function NavToggleIcon() {
+  return (
+    <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+      <path d="M19 11h-18a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0-7h-18a1 1 0 0 1 0-2h18a1 1 0 1 1 0 2zm0 14h-18a1 1 0 0 1 0-2h18a1 1 0 0 1 0 2z" />
+    </svg>
+  );
+}
+
 export default Header;

polaris.shopify.com/src/components/HomePage/HomePage.module.scss

@@ -11,13 +11,20 @@
   background: url(/images/home-hero.png);
   background-size: 56% auto;
   background-repeat: no-repeat;
-  background-position: 65% 33%;
+  background-position: 58.5% 33%;
 
-  @media screen and (max-width: $breakpointTablet) {
+  @media screen and (max-width: $breakpointDesktop) {
     font-size: var(--font-size-1300);
     background-position: right center;
   }
 
+  @media screen and (max-width: $breakpointMobile) {
+    padding: 40vw 0 2rem;
+    background-size: 60% auto;
+    background-repeat: no-repeat;
+    background-position: left 1rem;
+  }
+
   h1 {
     margin-bottom: 1rem;
     color: var(--text-strong);
@@ -40,6 +47,10 @@
     letter-spacing: var(--letter-spacing-600);
     max-width: 20em;
     color: var(--text-strong);
+
+    @media screen and (max-width: $breakpointMobile) {
+      font-size: var(--font-size-600);
+    }
   }
 }
 
@@ -54,7 +65,7 @@
 
   @media screen and (max-width: $breakpointTablet) {
     grid-template-columns: 1fr;
-    gap: 0.5rem;
+    gap: 1.75rem;
   }
 }
 
@@ -85,7 +96,7 @@
   overflow: hidden;
   gap: 1rem;
 
-  @media screen and (max-width: $breakpointDesktop) {
+  @media screen and (max-width: $breakpointTablet) {
     display: flex;
     flex-direction: column;
     gap: 1rem;
@@ -104,14 +115,29 @@
     padding: 3.5rem 7rem;
     text-align: center;
 
-    @media screen and (max-width: $breakpointMobile) {
+    @media screen and (max-width: $breakpointDesktop) {
       padding: 2.5rem 2rem;
     }
   }
 
   h3 {
     @include heading-2;
+    display: flex;
+    justify-content: center;
+    text-align: left;
     margin-bottom: 0.33rem;
+    align-items: center;
+    gap: 0.5rem;
+    text-align: center;
+
+    @media screen and (max-width: $breakpointTablet) {
+      @include heading-3;
+    }
+
+    @media screen and (max-width: $breakpointDesktop) {
+      flex-direction: column;
+      gap: 0.75rem;
+    }
   }
 
   .Text {
@@ -145,10 +171,6 @@
 
   .News {
     h3 {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-
       span {
         background: var(--decorative-4);
         padding: 0.125rem 0.4rem;

polaris.shopify.com/src/components/Page/Page.module.scss

@@ -39,9 +39,14 @@
     display: flex;
     gap: 1rem;
   }
+
   a {
     color: var(--text-subdued);
   }
+
+  @media screen and (max-width: $breakpointMobile) {
+    padding: 1rem 0 1.5rem;
+  }
 }
 
 .TOCWrapper {

polaris.shopify.com/src/components/PropsTable/PropsTable.module.scss

@@ -1,4 +1,5 @@
 @import '../../styles/mixins.scss';
+@import '../../styles/variables.scss';
 
 .UnparsablePropsWarning {
   background: url(/images/CircleAlertMajor.svg) no-repeat left 0.275rem;
@@ -65,7 +66,13 @@
 
   .Key {
     display: flex;
+    flex-direction: column;
     gap: 0.6rem;
+
+    @media screen and (max-width: $breakpointMobile) {
+      flex-direction: column;
+      gap: 0;
+    }
   }
 
   .ExpandableType {

polaris.shopify.com/src/components/WhatsNewListing/WhatsNewListing.module.scss

@@ -1,10 +1,15 @@
 @import '../../styles/fonts.scss';
+@import '../../styles/variables.scss';
 
 .WhatsNewListing {
   margin-top: 2rem;
   display: grid;
   grid-template-columns: 1fr 1fr;
 
+  @media screen and (max-width: $breakpointTablet) {
+    grid-template-columns: 1fr;
+  }
+
   .Post {
     gap: 2rem;
     align-items: center;

polaris.shopify.com/src/styles/globals.scss

@@ -314,7 +314,7 @@ button {
       height: 28px;
       width: 28px;
       margin: 0 auto;
-      background-color: white;
+      background-color: var(--surface);
       background-image: url(/images/icon-do.svg);
       background-repeat: no-repeat;
       background-position: left center;