style(foundation): update line height config

Author: tonghauhive

src/base/button.css

@@ -42,7 +42,7 @@
   gap: var(--sgds-gap-2-xs);
   font-size: var(--sgds-font-size-2);
   font-weight: var(--sgds-btn-font-weight);
-  line-height: var(--sgds-line-height-md);
+  line-height: var(--sgds-line-height-body);
   padding: 0px var(--sgds-padding-lg);
   min-width: var(--sgds-dimension-96);
   height: var(--sgds-dimension-48);

src/base/sgds-element.css

@@ -5,7 +5,7 @@
 :host([density="compact"]) .accordion-btn {
   padding: var(--sgds-padding-sm) var(--sgds-padding-sm);
   font-size: var(--sgds-font-size-2);
-  line-height: var(--sgds-line-height-heading);
+  line-height: var(--sgds-line-height-min);
 }
 
 :host([density="compact"]) .content {
@@ -32,7 +32,7 @@
   text-align: left;
   border: 0;
   color: var(--sgds-default-color);
-  line-height: var(--sgds-line-height-body);
+  line-height: var(--sgds-line-height-heading);
   font-size: var(--sgds-font-size-3);
   overflow-anchor: none;
 }

src/components/Accordion/accordion-item.css

@@ -23,11 +23,10 @@ slot[name="title"]::slotted(*) {
   --sgds-header-color: var(--sgds-default-color-inverse);
   --sgds-font-size-6: var(--sgds-font-size-5);
   --sgds-margin-2-xs: var(--sgds-margin-none);
-  --sgds-line-height-heading: var(--sgds-line-height-body);
   color: var(--sgds-header-color, --sgds-default-color-inverse);
   font-size: var(--sgds-font-size-6, --sgds-font-size-5);
   font-weight: var(--sgds-font-weight-bold);
-  line-height: var(--sgds-line-height-heading, --sgds-line-height-body);
+  line-height: var(--sgds-line-height-heading);
   letter-spacing: var(--sgds-letter-spacing-tight);
   margin-top: var(--sgds-margin-none);
   margin-bottom: var(--sgds-margin-2-xs, --sgds-margin-none);

src/components/Footer/footer.css

@@ -35,7 +35,7 @@
   flex-grow: 1;
   color: var(--sgds-form-color);
   font-size: var(--sgds-font-size-2);
-  line-height: var(--sgds-line-height-heading);
+  line-height: var(--sgds-line-height-body);
 }
 
 .form-control-group > .form-control:focus {

src/components/Input/input.css

@@ -65,23 +65,21 @@
 slot[name="title"]::slotted(*) {
   --sgds-margin-2-xs: var(--sgds-margin-none);
   --sgds-margin-xs: var(--sgds-margin-none);
-  --sgds-line-height-heading: var(--sgds-line-height-body);
   --sgds-font-size-6: var(--sgds-font-size-4);
   display: flex;
   flex: 1 1 auto;
   align-items: center;
   gap: 1rem;
   margin: var(--sgds-margin-none, var(--sgds-margin-xs, --sgds-margin-2-xs));
-  line-height: var(--sgds-line-height-heading, --sgds-line-height-body);
+  line-height: var(--sgds-line-height-heading);
   font-size: var(--sgds-font-size-6, --sgds-font-size-4);
 }
 
 slot[name="description"]::slotted(*) {
   --sgds-paragraph-spacing-xl: var(--sgds-margin-none);
-  --sgds-line-height-body: var(--sgds-line-height-heading);
   margin: var(--sgds-margin-none, --sgds-paragraph-spacing-xl);
   color: var(--sgds-default-color-subtle);
-  line-height: var(--sgds-line-height-body, --sgds-line-height-heading);
+  line-height: var(--sgds-line-height-body);
 }
 
 .modal-close {

src/components/Modal/modal.css

@@ -28,7 +28,7 @@ ul {
   font-family: var(--sgds-font-family-brand);
   font-size: var(--sgds-font-size-2);
   font-weight: var(--sgds-font-weight-regular);
-  line-height: var(--sgds-line-height-heading);
+  line-height: var(--sgds-line-height-body);
   list-style-position: outside;
   padding-left: var(--sgds-padding-2-xl);
   margin-top: var(--sgds-padding-xs);
@@ -38,7 +38,7 @@ li {
   font-family: var(--sgds-font-family-brand);
   font-size: var(--sgds-font-size-2);
   font-weight: var(--sgds-font-weight-regular);
-  line-height: var(--sgds-line-height-heading);
+  line-height: var(--sgds-line-height-body);
   list-style-position: outside;
   margin-top: var(--sgds-padding-xs);
 }
@@ -124,7 +124,7 @@ p {
   font-size: var(--sgds-font-size-2);
   font-weight: var(--sgds-font-weight-regular);
   margin-bottom: var(--sgds-paragraph-spacing-xl);
-  font-family: var(--sgds-font-family-brand); 
+  font-family: var(--sgds-font-family-brand);
   line-height: var(--sgds-line-height-body);
   letter-spacing: var(--sgds-letter-spacing-normal);
   margin-top: var(--sgds-margin-none);

src/css/reboot.css

@@ -2,5 +2,5 @@
   color: var(--sgds-form-color-subtle);
   font-family: var(--sgds-font-family-brand);
   font-weight: var(--sgds-font-weight-light);
-  line-height: var(--sgds-line-height-heading);
+  line-height: var(--sgds-line-height-body);
 }

src/styles/form-placeholder.css

@@ -155,8 +155,8 @@
   --sgds-letter-spacing-wider: 2px;
 
   /* Primitive - Line Height */
-  --sgds-line-height-body: 1.2;
-  --sgds-line-height-heading: 1.5;
+  --sgds-line-height-body: 1.5;
+  --sgds-line-height-heading: 1.2;
   --sgds-line-height-min: 20px;
 
   /* Primitive - Opacity */