From 71f1418fea54e79a6aada1eb735e9728d4d521b4 Mon Sep 17 00:00:00 2001
From: Jesse Borden <jesseaborden@gmail.com>
Date: Fri, 21 Nov 2025 06:02:08 -0800
Subject: [PATCH 1/2] feat(): create utility classes. Refactor landing and blog
 styles with new classes. Remove unused blog styles.

---
 .../new-includes/components/callout.html      |   6 +-
 assets/javascripts/new-javascripts/blog.js    |  10 +-
 assets/stylesheets/application.scss           |   1 +
 .../stylesheets/new-stylesheets/_themes.scss  |   1 +
 .../new-stylesheets/_typography.scss          |  31 +++++
 .../includes/callout/_base.scss               |   4 -
 .../includes/footer/_base.scss                |   2 +-
 .../includes/navigation/_base.scss            |   1 +
 .../new-stylesheets/pages/_blog.scss          | 127 ------------------
 .../new-stylesheets/pages/_get-started.scss   |  39 +-----
 blog/index.md                                 |  31 +++--
 index.md                                      |   2 +-
 12 files changed, 60 insertions(+), 195 deletions(-)
 create mode 100644 assets/stylesheets/new-stylesheets/_typography.scss

diff --git a/_includes/new-includes/components/callout.html b/_includes/new-includes/components/callout.html
index e055e754e..0945253c7 100644
--- a/_includes/new-includes/components/callout.html
+++ b/_includes/new-includes/components/callout.html
@@ -5,11 +5,11 @@
 >
   <div class="text">
     {% if include.title %}
-    <h3 class="callout-title">{{ include.title }}</h3>
+    <h3 class="callout-title title-1">{{ include.title }}</h3>
     {% endif %} {% if include.subtitle %}
-    <p class="callout-subtitle">{{ include.subtitle }}</p>
+    <p class="callout-subtitle title-2">{{ include.subtitle }}</p>
     {% endif %} {% if include.text %}
-    <p class="callout-text body-copy">{{ include.text }}</p>
+    <p class="callout-text body">{{ include.text }}</p>
     {% endif %}
   </div>
   {% if include.code %}
diff --git a/assets/javascripts/new-javascripts/blog.js b/assets/javascripts/new-javascripts/blog.js
index b5310638d..967f072e2 100644
--- a/assets/javascripts/new-javascripts/blog.js
+++ b/assets/javascripts/new-javascripts/blog.js
@@ -13,11 +13,11 @@ const createAnchor = (postData) => {
   anchor.href = postData.url
   anchor.classList = 'post-link'
   anchor.innerHTML = `
-    <h3 class="title">${postData.title}</h3>
-    <time pubdate datetime="${postData.date}" class="blog-date">${postData.date}</time>
-    <p class="body-copy">${postData.excerpt}</p>
+    <h3 class="title-4">${postData.title}</h3>
+    <time pubdate datetime="${postData.date}" class="blog-date body">${postData.date}</time>
+    <p class="body">${postData.excerpt}</p>
     ${postData.categories.reduce((markup, category) => {
-      return markup + ` <span class="category body-copy">${category}</span>`
+      return markup + ` <span class="category body">${category}</span>`
     }, '')}
     `
   return anchor
@@ -83,7 +83,7 @@ window.addEventListener('click', (evt) => {
 
 // Select all category filters
 selectAllBox.addEventListener('click', () =>
-  selectAllCategories(selectAllBox, filters)
+  selectAllCategories(selectAllBox, filters),
 )
 
 filters.forEach((checkbox) => {
diff --git a/assets/stylesheets/application.scss b/assets/stylesheets/application.scss
index 1b21ff66b..d80608997 100644
--- a/assets/stylesheets/application.scss
+++ b/assets/stylesheets/application.scss
@@ -11,6 +11,7 @@ layout: source
 @use "pages";
 @use "print";
 @use "new-stylesheets/themes" as *;
+@use 'new-stylesheets/typography';
 @use 'new-stylesheets/includes/header';
 @use 'new-stylesheets/includes/navigation';
 @use 'new-stylesheets/includes/footer';
diff --git a/assets/stylesheets/new-stylesheets/_themes.scss b/assets/stylesheets/new-stylesheets/_themes.scss
index b1f1e5704..ebec01049 100644
--- a/assets/stylesheets/new-stylesheets/_themes.scss
+++ b/assets/stylesheets/new-stylesheets/_themes.scss
@@ -136,6 +136,7 @@
   --site-navigation-box-shadow: none;
   --site-navigation-background: rgba(0, 0, 0, 0.3);
   --site-navigation-text-color: #ffffff;
+  --site-navigation-text-color-selected: #1e162e;
   --site-navigation-item-background: rgba(0, 0, 0, 0.4);
   --site-tabs-background: rgba(35, 52, 74, 1);
   --site-tabs-active-background: #505f83;
diff --git a/assets/stylesheets/new-stylesheets/_typography.scss b/assets/stylesheets/new-stylesheets/_typography.scss
new file mode 100644
index 000000000..8ed33c26f
--- /dev/null
+++ b/assets/stylesheets/new-stylesheets/_typography.scss
@@ -0,0 +1,31 @@
+// Typography utility classes
+
+.title-1 {
+  font-size: 48px;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.title-2 {
+  font-size: 42px;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.title-3 {
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.title-4 {
+  font-size: 22px;
+  font-weight: 500;
+  line-height: 1.2;
+}
+
+.body {
+  line-height: 1.53;
+  font-weight: 400;
+  font-size: 17px;
+}
diff --git a/assets/stylesheets/new-stylesheets/includes/callout/_base.scss b/assets/stylesheets/new-stylesheets/includes/callout/_base.scss
index 542fdc1df..7b00f6726 100644
--- a/assets/stylesheets/new-stylesheets/includes/callout/_base.scss
+++ b/assets/stylesheets/new-stylesheets/includes/callout/_base.scss
@@ -57,13 +57,9 @@
 
 .callout-title {
   margin: -4px 0 3px;
-  font-size: 48px;
-  font-weight: 600;
-  line-height: 1.2;
 }
 
 .callout-subtitle {
-  line-height: 1.25;
   margin-bottom: 4px;
   font-size: 24px;
 }
diff --git a/assets/stylesheets/new-stylesheets/includes/footer/_base.scss b/assets/stylesheets/new-stylesheets/includes/footer/_base.scss
index a199674f4..9eb0f0281 100644
--- a/assets/stylesheets/new-stylesheets/includes/footer/_base.scss
+++ b/assets/stylesheets/new-stylesheets/includes/footer/_base.scss
@@ -131,7 +131,7 @@ footer.global-footer {
         }
 
         input:checked + .color-scheme-toggle-label {
-          background: #fca76c;
+          background: var(--site-navigation-selected-background);
           color: #1e162e;
         }
       }
diff --git a/assets/stylesheets/new-stylesheets/includes/navigation/_base.scss b/assets/stylesheets/new-stylesheets/includes/navigation/_base.scss
index 6f8c2dcd0..1a4402826 100644
--- a/assets/stylesheets/new-stylesheets/includes/navigation/_base.scss
+++ b/assets/stylesheets/new-stylesheets/includes/navigation/_base.scss
@@ -82,6 +82,7 @@
 
           & > span {
             background-color: var(--site-navigation-selected-background);
+            color: var(--site-navigation-text-color-selected);
           }
         }
       }
diff --git a/assets/stylesheets/new-stylesheets/pages/_blog.scss b/assets/stylesheets/new-stylesheets/pages/_blog.scss
index fd9430c68..d565b0c28 100644
--- a/assets/stylesheets/new-stylesheets/pages/_blog.scss
+++ b/assets/stylesheets/new-stylesheets/pages/_blog.scss
@@ -71,15 +71,11 @@
     display: block;
     color: var(--blog-muted-color);
     margin-bottom: 10px;
-    font-weight: 500;
   }
 
   .blog-title {
     display: block;
-    font-size: 22px;
-    line-height: 1.2;
     margin: 0 0 5px;
-    font-weight: 500;
   }
 
   .blog-excerpt {
@@ -95,7 +91,6 @@
   // featured grid styles
   .blog-featured-grid {
     margin-top: 146px;
-    line-height: 1.53;
     margin-bottom: 50px;
 
     .content {
@@ -112,15 +107,11 @@
       }
 
       .blog-featured-grid-headline {
-        font-size: 48px;
-        font-weight: 500;
         margin-bottom: 16px;
         color: var(--site-text-color);
         text-align: left;
 
         @media only screen and (max-width: 768px) {
-          font-size: 32px;
-          line-height: 1.33;
           margin-bottom: 22px;
         }
       }
@@ -146,15 +137,7 @@
       }
 
       .blog-featured-grid-category-headline {
-        font-size: 24px;
-        font-weight: 600;
         margin-bottom: 13px;
-        line-height: 1.2;
-      }
-
-      .section-icon {
-        width: 60px;
-        margin: 40px 0 0;
       }
 
       .blog-featured-category-posts {
@@ -182,80 +165,6 @@
           border-radius: 22px;
           padding: 20px 30px 20px 20px;
           flex-grow: 1;
-
-          // @media only screen and (max-width: 768px) {
-          //   flex-direction: column;
-          // }
-
-          img {
-            width: 168px;
-            height: 180px;
-            object-fit: cover;
-            flex-shrink: 0;
-            background-color: #f6f6f6;
-
-            @media only screen and (max-width: 768px) {
-              width: 100%;
-              height: auto;
-            }
-          }
-
-          div {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-            min-height: 140px;
-            position: relative;
-            padding: 20px;
-
-            .name {
-              font-size: 24px;
-              line-height: 1.25;
-              margin-bottom: 10px;
-            }
-
-            .text {
-              font-size: 17px;
-              flex-grow: 1;
-            }
-          }
-        }
-      }
-
-      .tertiary-cards,
-      .primary-cards {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        gap: 20px;
-        // padding: 0 0 40px;
-
-        .news-item {
-          background-color: var(--get-started-card-secondary-bg);
-          padding: 20px 30px 20px 20px;
-          display: flex;
-          text-align: left;
-
-          div {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-            position: relative;
-
-            .name {
-              font-size: 24px;
-              line-height: 1.25;
-              margin-bottom: 10px;
-            }
-
-            .text {
-              font-size: 17px;
-              flex-grow: 1;
-            }
-          }
-        }
-
-        @media only screen and (max-width: 768px) {
-          grid-template-columns: 1fr;
         }
       }
     }
@@ -270,20 +179,6 @@
       border: 1px solid var(--blog-dropdown-toggle-inset-outline-color-active);
     }
 
-    .dropdown-close {
-      background: var(--dropdown-close-icon);
-      position: absolute;
-      top: 12px;
-      right: 12px;
-      background-size: cover;
-      border: none;
-      width: 20px;
-      height: 20px;
-      padding: 0;
-      color: var(--blog-muted-color);
-      cursor: pointer;
-    }
-
     .dropdown-toggle {
       display: flex;
       align-items: center;
@@ -436,29 +331,7 @@
     text-decoration: none;
     display: block;
 
-    &-with-image {
-      display: flex;
-      gap: 36px;
-
-      img {
-        width: 120px;
-        height: 120px;
-        background-size: cover;
-      }
-
-      @media only screen and (max-width: 1024px) {
-        display: block;
-
-        img {
-          width: 100%;
-          height: auto;
-        }
-      }
-    }
-
     h3 {
-      font-size: 22px;
-      font-weight: 600;
       color: var(--site-text-color);
     }
 
diff --git a/assets/stylesheets/new-stylesheets/pages/_get-started.scss b/assets/stylesheets/new-stylesheets/pages/_get-started.scss
index e2ca9a69a..9a8a42e89 100644
--- a/assets/stylesheets/new-stylesheets/pages/_get-started.scss
+++ b/assets/stylesheets/new-stylesheets/pages/_get-started.scss
@@ -246,43 +246,6 @@
       }
     }
 
-    .tertiary-cards,
-    .primary-cards {
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-      gap: 20px;
-      // padding: 0 0 40px;
-
-      li {
-        background-color: var(--get-started-card-secondary-bg);
-        padding: 20px 30px 20px 20px;
-        display: flex;
-        text-align: left;
-
-        div {
-          display: flex;
-          flex-direction: column;
-          flex: 1;
-          position: relative;
-
-          .name {
-            font-size: 24px;
-            line-height: 1.25;
-            margin-bottom: 10px;
-          }
-
-          .text {
-            font-size: 17px;
-            flex-grow: 1;
-          }
-        }
-      }
-
-      @media only screen and (max-width: 768px) {
-        grid-template-columns: 1fr;
-      }
-    }
-
     .tertiary-cards {
       img {
         width: 45px;
@@ -553,7 +516,7 @@
 
   @media only screen and (max-width: 768px) {
     nav {
-     width: 100%;
+      width: 100%;
 
       ul {
         white-space: nowrap;
diff --git a/blog/index.md b/blog/index.md
index dfae2966e..a89adcdec 100644
--- a/blog/index.md
+++ b/blog/index.md
@@ -7,12 +7,12 @@ title: Blog
   <div class="blog-swoop"></div>
   <div class="section blog-featured-grid">
     <div class="content">
-      <h2 class="blog-featured-grid-headline">{{site.data.new-data.blog.page-data.headline}}</h2>
+      <h2 class="blog-featured-grid-headline title-1">{{site.data.new-data.blog.page-data.headline}}</h2>
       {% assign hero_card_title = site.data.new-data.blog.page-data.category_titles[0] %}
       {% assign hero_card_post = site.categories[hero_card_title][0] %}
       {% assign hero_card_thumbnail = hero_card_post.featured-image %}
       {% assign hero_card_thumbnail_dark = hero_card_post.featured-image-dark %}
-      <h3 class="blog-featured-grid-category-headline">{{hero_card_title}}</h3>
+      <h3 class="blog-featured-grid-category-headline title-3">{{hero_card_title}}</h3>
       <div class="blog-featured-hero-card {% if hero_card_thumbnail.url %} blog-featured-hero-card-with-image {% endif %}">
         {% if hero_card_thumbnail.url %}
           <img class="blog-featured-hero-card-image {% if hero_card_thumbnail_dark.url %}hide-dark{% endif %}" src="{{ hero_card_thumbnail.url }}" alt="{{hero_card_thumbnail.alt}}" />
@@ -20,23 +20,23 @@ title: Blog
         {% if hero_card_thumbnail_dark.url %}
           <img class="blog-featured-hero-card-image hide-light" src="{{ hero_card_thumbnail_dark.url }}" alt="{{hero_card_thumbnail_dark.alt}}" />
         {% endif %}
-        <span class="blog-title">{{ hero_card_post.title }}</span>
-        <time class="blog-date body-copy" pubdate datetime="{{ hero_card_post.date | date_to_xmlschema }}">{{ hero_card_post.date | date: "%B %-d, %Y" }}</time>
-        <span class="blog-excerpt body-copy">{{ hero_card_post.excerpt | strip_html }}</span>
-        <a class="blog-post-cta body-copy" href="{{ hero_card_post.url }}">{{site.data.new-data.blog.page-data.read-more}}</a>
+        <span class="blog-title title-4">{{ hero_card_post.title }}</span>
+        <time class="blog-date body" pubdate datetime="{{ hero_card_post.date | date_to_xmlschema }}">{{ hero_card_post.date | date: "%B %-d, %Y" }}</time>
+        <span class="blog-excerpt body">{{ hero_card_post.excerpt | strip_html }}</span>
+        <a class="blog-post-cta body" href="{{ hero_card_post.url }}">{{site.data.new-data.blog.page-data.read-more}}</a>
       </div>
       <ul class="blog-featured-category-posts">
         {% for category_title in site.data.new-data.blog.page-data.category_titles %}
           {% if forloop.index0 > 0 %}
             {% assign latest_post = site.categories[category_title][0] %}
               <li>
-                <h3 class="blog-featured-grid-category-headline">{{ category_title }}</h3>
+                <h3 class="blog-featured-grid-category-headline title-3">{{ category_title }}</h3>
                   <!-- <a class="news-item-link" href="{{ latest_post.url }}"> -->
                     <div class="blog-featured-category-post">
-                        <span class="blog-title">{{ latest_post.title }}</span>
-                        <time  class="blog-date body-copy" pubdate datetime="{{ latest_post.date | date_to_xmlschema }}">{{ latest_post.date | date: "%B %-d, %Y" }}</time>
-                        <p class="blog-excerpt body-copy">{{ latest_post.excerpt | strip_html}}</p>
-                        <a class="blog-post-cta" href="{{ latest_post.url }}">{{site.data.new-data.blog.page-data.read-more}}</a>
+                        <span class="blog-title title-4">{{ latest_post.title }}</span>
+                        <time  class="blog-date body" pubdate datetime="{{ latest_post.date | date_to_xmlschema }}">{{ latest_post.date | date: "%B %-d, %Y" }}</time>
+                        <p class="blog-excerpt body">{{ latest_post.excerpt | strip_html}}</p>
+                        <a class="blog-post-cta body" href="{{ latest_post.url }}">{{site.data.new-data.blog.page-data.read-more}}</a>
                     </div>
                   <!-- </a> -->
               </li>
@@ -48,23 +48,22 @@ title: Blog
   <section class="blogs-and-filter-wrapper content">
     <div class="dropdown blogs-filter">
       <button class="dropdown-toggle" aria-haspopup="true" aria-expanded="false" aria-controls="dropdown-menu">
-        <span class="body-copy>">Categories</span>
+        <span class="body">Categories</span>
         <span class="dropdown-toggle-arrow"></span>
       </button>
       <div class="dropdown-menu" role="menu">
         <div class="dropdown-header">
            <label>
             <input disabled name="select-all" class="select-all" type="checkbox" value="select-all" checked="true">
-            <span class="checkbox-symbol"></span> <span class="dropdown-filter-text">All Categories</span>
+            <span class="checkbox-symbol"></span> <span>All Categories</span>
           </label>
         </div>
         <hr>
         {% for category in site.data.new-data.blog.page-data.category_titles %}
           <label 
-          class="dropdown-filters" 
             >
-          <input name="{{category}}" class="category-filter" type="checkbox" value="{{category}}" checked>
-           <span class="check-symbol"></span> <span class="checkbox-symbol"></span> <span class="dropdown-filter-text">{{category}}</span>
+          <input name="{{category}}" class="category-filter body" type="checkbox" value="{{category}}" checked>
+           <span></span> <span class="checkbox-symbol"></span> <span>{{category}}</span>
           </label>
         {% endfor %}
     </div>
diff --git a/index.md b/index.md
index 714f25b4d..24e891519 100644
--- a/index.md
+++ b/index.md
@@ -13,7 +13,7 @@ title: Swift Programming Language
 </div>
 <section id="what-is-swift" class="section">
     <div class="hero-content">
-        <h1>Swift is the powerful, flexible,<br /> multiplatform programming language.</h1>
+        <h1 class="title-1">Swift is the powerful, flexible,<br /> multiplatform programming language.</h1>
         <div class="sub-text"><h2>Fast. Expressive. Safe.</h2></div>
         <a href="/install/" data-text="Install">Install</a>
         <p>Tools for Linux, macOS, and Windows</p>

From 0a45224111e67a4368ba046e4b7b34557272600b Mon Sep 17 00:00:00 2001
From: Jesse Borden <jesseaborden@gmail.com>
Date: Fri, 21 Nov 2025 11:06:08 -0800
Subject: [PATCH 2/2] chor(blog): Add missing scss import.

---
 assets/stylesheets/new-stylesheets/application.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/assets/stylesheets/new-stylesheets/application.scss b/assets/stylesheets/new-stylesheets/application.scss
index 8b867eb16..a0b40a286 100644
--- a/assets/stylesheets/new-stylesheets/application.scss
+++ b/assets/stylesheets/new-stylesheets/application.scss
@@ -3,6 +3,7 @@ layout: source
 ---
 
 @use 'core';
+@use 'typography';
 @use 'syntax';
 @use 'includes';
 @use 'pages';