style: correct dropdown select size and fonts (#2009)

* style: correct dropdown select size and fonts * style: add font-family * style: lint errors
Kajabi · Oct 17, 2024 · 05555d5 · 05555d5
1 parent 9449c8b
commit 05555d5
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss
@@ -245,7 +245,9 @@ $-btn-loading-min-height: rem(36px);
   }
 
   .sage-dropdown__trigger--select & {
-    font-weight: sage-font-weight(regular);
+    height: rem(40px);
+    font-family: $-body-font-stack;
+    font-weight: sage-font-weight(medium);
     border-width: 0;
     box-shadow: sage-border-interactive(default);
     &:hover {

diff --git a/packages/sage-assets/lib/stylesheets/components/_dropdown.scss b/packages/sage-assets/lib/stylesheets/components/_dropdown.scss
@@ -438,6 +438,10 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
   }
 }
 
+.sage-dropdown__trigger--select {
+  font-family: $-body-font-stack;
+}
+
 .sage-dropdown__trigger--select,
 .sage-dropdown__trigger--select-labeled {
   :not(.sage-dropdown--customized) > & {
@@ -452,10 +456,11 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 .sage-dropdown__trigger-selected-value {
   justify-content: space-between;
   width: 100%;
+  font-weight: sage-font-weight(medium);
 }
 
 .sage-dropdown__trigger-label {
-  @extend %t-sage-body;
+  @extend %t-sage-body-med;
 
   position: absolute;
   z-index: sage-z-index(default, 1);
@@ -471,9 +476,9 @@ $-dropdown-trigger-dropdown-offset: rem(16px) + sage-spacing(xs);
 
   .sage-dropdown--value-selected & {
     @extend %t-sage-body-xsmall-semi;
-
     transform: translateY(calc(#{-$-dropdown-height} + 50%));
     width: auto;
+    font-weight: sage-font-weight(medium);
     background-color: $-dropdown-trigger-label-color-label-background;
     transition: transform 0.15s ease-in-out, color 0.15s ease-out;
   }

diff --git a/packages/sage-assets/lib/stylesheets/components/_form_select.scss b/packages/sage-assets/lib/stylesheets/components/_form_select.scss
@@ -96,7 +96,7 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $-
   }
 
   .sage-select--value-selected & {
-    color: sage-color(grey, 900);
+    color: map-get($sage-field-colors, default);
   }
 
   .sage-select--value-selected &:not(:disabled) + .sage-select__arrow::before {