Typography Fixes (#2401)

Author: julhoang

core/views.py

@@ -1773,8 +1773,9 @@ def get_context_data(self, **kwargs):
                 {"label": "Visit the FAQ", "url": "https://www.example.com"},
             ],
             "url": "https://www.example.com",
-            "label": "Learn more about Boost",
-            "image_src": "/static/img/v3/examples/Learn Card Image.png",
+            "label": "Get started with Boost",
+            "image_src": f"{settings.STATIC_URL}img/v3/examples/Learn_Card_Image.png",
+            "mobile_image_src": f"{settings.STATIC_URL}img/v3/examples/Cheetah_Mobile.png",
         }
 
         context["testimonial_data"] = {
@@ -1998,7 +1999,7 @@ def get_context_data(self, **kwargs):
                 deps = lv.dependencies.order_by("name")
                 context["dependencies_card_data"] = [
                     {
-                        "name": dep.display_name_short,
+                        "name": dep.name,
                         "url": reverse(
                             "library-detail",
                             kwargs={

static/css/v3/account-connections.css

@@ -46,7 +46,7 @@
 }
 
 .account-connections__platform-name {
-  font-family: var(--font-sans, 'Mona Sans VF'), sans-serif;
+  font-family: var(--font-sans);
   font-size: var(--font-size-base, 16px);
   font-weight: var(--font-weight-medium, 500);
   line-height: var(--line-height-default, 1.2);
@@ -57,7 +57,7 @@
 
 .account-connections__status {
   flex: 1 1 0;
-  font-family: var(--font-sans, 'Mona Sans VF'), sans-serif;
+  font-family: var(--font-sans);
   font-size: var(--font-size-base, 16px);
   font-weight: var(--font-weight-regular, 400);
   line-height: var(--line-height-default, 1.2);

static/css/v3/banner.css

@@ -14,7 +14,7 @@
     color: var(--color-text-on-accent, #050816);
 
     /* Sans/Desktop/Regular/XS/Tight */
-    font-family: var(--font-sans, "Mona Sans VF");
+    font-family: var(--font-sans);
     font-size: var(--font-size-xs, 12px);
     font-weight: var(--font-weight-regular);
     line-height: var(--line-height-tight);

static/css/v3/calendar.css

@@ -12,7 +12,7 @@
     color: var(--color-text-primary, #050816);
 
     /* Sans/Desktop/Regular/2XL */
-    font-family: var(--font-sans, "Mona Sans VF");
+    font-family: var(--font-sans);
     font-size: var(--font-size-2xl, 40px);
     font-style: normal;
     font-weight: var(--font-weight-regular);
@@ -26,7 +26,7 @@
     color: var(--color-text-secondary, #585A64);
 
     /* Sans/Desktop/Regular/M */
-    font-family: var(--font-sans, "Mona Sans VF");
+    font-family: var(--font-sans);
     font-size: var(--font-size-medium, 18px);
     font-style: normal;
     font-weight: var(--font-weight-regular);

static/css/v3/card.css

@@ -52,11 +52,14 @@
 }
 
 .card__column {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--space-large);
-    width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--space-large);
+  width: 100%;
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-medium);
+  letter-spacing: var(--letter-spacing-tight);
 }
 
 .card__header {
@@ -126,7 +129,7 @@
     flex: 1 0 0;
     padding: 0;
     color: var(--color-text-secondary, #585a64);
-    font-family: var(--font-sans, 'Mona Sans VF'), sans-serif;
+    font-family: var(--font-sans);
     font-size: var(--font-size-base, 16px);
     font-weight: var(--font-weight-regular, 400);
     line-height: var(--line-height-default, 1.2);

static/css/v3/carousel-buttons.css

@@ -26,13 +26,13 @@
 }
 
 .carousel-buttons .btn-carousel .btn-icon {
-  width: 12px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
 }
 
 .carousel-buttons .btn-carousel .btn-icon svg {
-  width: 12px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
 }
 
 .carousel-buttons .btn-carousel:hover:not(:disabled) {

static/css/v3/category-tags.css

@@ -5,6 +5,7 @@
   font-family: var(--font-sans);
   font-size: var(--font-size-xs);
   line-height: var(--line-height-tight);
+  letter-spacing: var(--letter-spacing-tight);
   font-weight: var(--font-weight-regular);
   border-radius: var(--border-radius-s);
   text-decoration: none;

static/css/v3/code-block.css

@@ -39,7 +39,7 @@
   border-radius: var(--border-radius-l);
   overflow: auto;
   font-family: var(--font-code);
-  font-size: var(--font-size-small);
+  font-size: var(--font-size-xs);
   line-height: var(--line-height-code);
   color: var(--code-block-text);
   box-sizing: border-box;
@@ -68,6 +68,8 @@
   font-weight: 500;
   color: var(--color-syntax-cpp-text) !important;
   white-space: break-spaces !important;
+  font-size: inherit;
+  line-height: var(--line-height-code);
 }
 
 /* CTA button in card */
@@ -136,19 +138,15 @@ html.dark .code-block-card--grey {
 .code-block-card__heading {
   margin: 0;
   padding: 0 var(--space-card) var(--space-card) var(--space-card);
-  font-size: var(--font-size-large);
-  font-weight: var(--font-weight-medium);
-  line-height: var(--line-height-tight);
-  font-family: var(--font-display);
-  color: var(--color-text-primary);
 }
 
 .code-block-card__description {
   padding: var(--space-card) var(--space-card) var(--space-default)
     var(--space-card);
   margin: 0 0 var(--space-medium);
   font-size: var(--font-size-medium);
-  line-height: var(--line-height-relaxed);
+  line-height: var(--line-height-default);
+  letter-spacing: var(--letter-spacing-tight);
   color: var(--color-text-secondary);
 }
 
@@ -163,12 +161,14 @@ html.dark .code-block-card--grey {
   white-space: pre;
   min-height: 1em;
   overflow: hidden;
+  font-size: inherit;
+  line-height: inherit;
 }
 
 .code-block__copy {
   position: absolute;
-  top: var(--space-default);
-  right: var(--space-default);
+  top: var(--space-card);
+  right: var(--space-card);
   width: var(--code-block-copy-icon-size);
   height: var(--code-block-copy-icon-size);
   padding: 0;

static/css/v3/content.css

@@ -83,6 +83,7 @@ a:hover .content-detail-icon:not(.content-detail-icon--contained) {
   margin: 0;
   font-size: var(--font-size-small);
   line-height: var(--line-height-relaxed);
+  letter-spacing: var(--letter-spacing-tight);
   color: var(--color-text-secondary);
   padding: 0;
 }

static/css/v3/dialog.css

@@ -99,7 +99,7 @@
   font-size: var(--font-size-large);
   font-weight: var(--font-weight-medium);
   line-height: var(--line-height-tight);
-  letter-spacing: var(--letter-spacing-display-regular);
+  letter-spacing: var(--letter-spacing-tight);
   color: var(--color-text-primary);
   display: block !important;
 }