From efeecdcb3ad5fb16c1cdfa151e9237ada02163ba Mon Sep 17 00:00:00 2001
From: akcodez <ariakesh@yahoo.com>
Date: Mon, 5 Jan 2026 12:44:14 -0800
Subject: [PATCH] Refactor button typography for responsiveness and consistency

- Updated Button component styles to use responsive typography mixins for better adaptability across devices.
- Removed redundant media queries and adjusted font sizes and line heights for both button types.
- Ensured margin resets to maintain consistent spacing in various contexts.
- Enhanced CSS for improved readability and maintainability.
---
 shared/components/Button/Button.scss | 33 +++++----------
 static/css/devportal2024-v1.css      | 63 +++++++++++++++++++++-------
 2 files changed, 58 insertions(+), 38 deletions(-)

diff --git a/shared/components/Button/Button.scss b/shared/components/Button/Button.scss
index 45abfca658..43f3725103 100644
--- a/shared/components/Button/Button.scss
+++ b/shared/components/Button/Button.scss
@@ -616,13 +616,12 @@ html.dark {
   justify-content: center;
   max-height: 40px;
   
-  // Typography - Label R token
-  font-family: 'Booton', sans-serif;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 23.2px;
-  letter-spacing: 0px;
+  // Typography - Label R token (responsive)
+  // - Desktop (lg+): 16px / 23.2px
+  // - Mobile/Tablet: 14px / 20.1px
+  @include type(label-r);
   white-space: nowrap;
+  margin-bottom: 0; // Reset paragraph spacing from type mixin
   
   // Border
   border: none;
@@ -715,14 +714,6 @@ html.dark {
     }
   }
 
-  // ---------------------------------------------------------------------------
-  // Responsive Typography (<xl breakpoint)
-  // ---------------------------------------------------------------------------
-  @include media-breakpoint-down(xl) {
-    // Typography - Label R token (smaller screens)
-    font-size: 14px;
-    line-height: 20.1px;
-  }
 }
 
 // =============================================================================
@@ -1132,10 +1123,11 @@ html.dark {
   border: none;
   text-decoration: none;
 
-  // Typography - Body R token (different from Primary/Secondary)
-  font-size: 18px;
-  line-height: 26.1px;
-  letter-spacing: -0.5px;
+  // Typography - Body R token (responsive)
+  // - Desktop (lg+): 18px / 26.1px / -0.5px letter-spacing
+  // - Mobile/Tablet: 16px / 23.2px / 0px letter-spacing
+  @include type(body-r);
+  margin-bottom: 0; // Reset paragraph spacing from type mixin
 
   // Desktop padding and gap (≥1024px)
   padding: 8px 20px;
@@ -1220,11 +1212,6 @@ html.dark {
   // Tablet & Mobile Responsive Styles (<xl breakpoint)
   // ---------------------------------------------------------------------------
   @include media-breakpoint-down(xl) {
-    // Typography - Body R token (smaller screens)
-    font-size: 16px;
-    line-height: 23.2px;
-    letter-spacing: 0px;
-
     padding: 8px 16px;
     gap: 16px;
 
diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css
index 4793b69fc1..1021ff7d9e 100644
--- a/static/css/devportal2024-v1.css
+++ b/static/css/devportal2024-v1.css
@@ -11500,12 +11500,32 @@ html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bd
   align-items: center;
   justify-content: center;
   max-height: 40px;
-  font-family: "Booton", sans-serif;
-  font-size: 16px;
+  font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   font-weight: 400;
-  line-height: 23.2px;
+  font-size: 14px;
+  line-height: 20.1px;
   letter-spacing: 0px;
+  margin-bottom: 18px;
+}
+@media (min-width: 576px) {
+  .bds-btn {
+    font-size: 14px;
+    line-height: 20.1px;
+    letter-spacing: 0px;
+    margin-bottom: 18px;
+  }
+}
+@media (min-width: 992px) {
+  .bds-btn {
+    font-size: 16px;
+    line-height: 23.2px;
+    letter-spacing: 0px;
+    margin-bottom: 18px;
+  }
+}
+.bds-btn {
   white-space: nowrap;
+  margin-bottom: 0;
   border: none;
   border-radius: 100px;
   cursor: pointer;
@@ -11559,12 +11579,6 @@ html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bd
 .bds-btn:hover:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line, .bds-btn:focus-visible:not(:disabled):not(.bds-btn--disabled) .bds-btn__icon-line {
   transform: scaleX(0);
 }
-@media (max-width: 1279.98px) {
-  .bds-btn {
-    font-size: 14px;
-    line-height: 20.1px;
-  }
-}
 
 .bds-btn--primary {
   color: #141414;
@@ -11811,9 +11825,31 @@ html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bd
   background-color: transparent;
   border: none;
   text-decoration: none;
-  font-size: 18px;
-  line-height: 26.1px;
-  letter-spacing: -0.5px;
+  font-family: "Booton", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 23.2px;
+  letter-spacing: 0px;
+  margin-bottom: 16px;
+}
+@media (min-width: 576px) {
+  .bds-btn--tertiary {
+    font-size: 16px;
+    line-height: 23.2px;
+    letter-spacing: 0px;
+    margin-bottom: 16px;
+  }
+}
+@media (min-width: 992px) {
+  .bds-btn--tertiary {
+    font-size: 18px;
+    line-height: 26.1px;
+    letter-spacing: -0.5px;
+    margin-bottom: 16px;
+  }
+}
+.bds-btn--tertiary {
+  margin-bottom: 0;
   padding: 8px 20px;
   gap: 16px;
 }
@@ -11868,9 +11904,6 @@ html.dark .bds-btn.bds-btn.bds-btn--tertiary.bds-btn--tertiary.bds-btn--black.bd
 }
 @media (max-width: 1279.98px) {
   .bds-btn--tertiary {
-    font-size: 16px;
-    line-height: 23.2px;
-    letter-spacing: 0px;
     padding: 8px 16px;
     gap: 16px;
   }