Merge pull request #1579 from Kajabi/SAGE-797_pl-form-element-adjustm…

…ents [SAGE-797]: Form element spacing and color adjustments spec alignment
Kajabi · Sep 8, 2022 · cf8ad09 · cf8ad09
2 parents 97f36ca + 5b34094
commit cf8ad09
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 7 deletions.
diff --git a/packages/sage-assets/lib/stylesheets/components/_form_input.scss b/packages/sage-assets/lib/stylesheets/components/_form_input.scss
@@ -105,7 +105,7 @@ $-input-text-height: sage-font-size(body);
   @include sage-form-field-label;
 
   grid-area: label;
-  margin-bottom: sage-spacing(2xs);
+  margin-bottom: sage-spacing(xs);
 }
 .sage-input__field-wrapper {
   position: relative;

diff --git a/packages/sage-assets/lib/stylesheets/components/_form_select.scss b/packages/sage-assets/lib/stylesheets/components/_form_select.scss
@@ -16,7 +16,7 @@ $-select-color-success: sage-color(primary, 200);
 $-select-filled-top-padding: rem(4.4px);
 $-select-height: rem(40px);
 $-select-padding-x: sage-spacing(sm);
-$-select-margin-label: rem(6px);
+$-select-margin-label: sage-spacing(xs);
 $-select-arrow-font-size: rem(16px);
 $-select-arrow-icon-width: map-get($sage-icon-sizes, md);
 $-select-arrow-position: calc(100% - #{$-select-height});
@@ -79,7 +79,7 @@ $-select-arrow-position-inverse-with-message: calc(100% - #{$-select-height + $-
   }
 
   .sage-select--value-selected & {
-    color: $-select-color-default;
+    color: sage-color(charcoal, 400);
   }
 
   .sage-select--value-selected &:not(:disabled) + .sage-select__arrow::before {

diff --git a/packages/sage-assets/lib/stylesheets/components/_form_textarea.scss b/packages/sage-assets/lib/stylesheets/components/_form_textarea.scss
@@ -8,7 +8,7 @@
 $-textarea-border-width: rem(1px);
 
 // Margin
-$-textarea-label-margin: rem(6px);
+$-textarea-label-margin: sage-spacing(xs);
 
 // Padding
 $-textarea-label-padding: rem(3px);

diff --git a/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss b/packages/sage-assets/lib/stylesheets/core/mixins/_sage.scss
@@ -372,7 +372,7 @@
 
   width: 100%;
   padding: sage-spacing(sm);
-  color: sage-color(charcoal, 200);
+  color: sage-color(charcoal, 400);
   appearance: none;
   box-shadow: sage-border-interactive(default);
   border: 0;
@@ -483,7 +483,6 @@
 ///
 @mixin sage-form-field-label() {
   @extend %t-sage-body-semi;
-
   white-space: nowrap;
 }
 
@@ -514,7 +513,7 @@
 @mixin sage-form-field-message() {
   @extend %t-sage-body-small-med;
 
-  margin-top: rem(6px);
+  margin-top: sage-spacing(xs);
   color: sage-color(charcoal, 200);
 
   .sage-form-field--error & {