From 547f218145977b63e33df8089d424ea0d4f95416 Mon Sep 17 00:00:00 2001
From: Randall Morey <randall@randallmorey.com>
Date: Wed, 5 Aug 2020 12:27:34 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20make=20input=20and?=
 =?UTF-8?q?=20select=20field=20styles=20independent?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../rose/addon/styles/rose/_typography.scss   |  5 ++
 .../styles/rose/components/form/_input.scss   | 71 ++++++++--------
 .../styles/rose/components/form/_select.scss  | 82 ++++++++++---------
 3 files changed, 83 insertions(+), 75 deletions(-)

diff --git a/addons/rose/addon/styles/rose/_typography.scss b/addons/rose/addon/styles/rose/_typography.scss
index fffc00843..b44914ce8 100644
--- a/addons/rose/addon/styles/rose/_typography.scss
+++ b/addons/rose/addon/styles/rose/_typography.scss
@@ -16,6 +16,11 @@ body {
   background-color: var(--subtle);
 }
 
+input,
+textarea {
+  font-family: typography.$family-primary;
+}
+
 pre,
 code {
   font-family: typography.$family-monospace;
diff --git a/addons/rose/addon/styles/rose/components/form/_input.scss b/addons/rose/addon/styles/rose/components/form/_input.scss
index 08e7cc167..45329943f 100644
--- a/addons/rose/addon/styles/rose/components/form/_input.scss
+++ b/addons/rose/addon/styles/rose/components/form/_input.scss
@@ -4,40 +4,6 @@
 .rose-form-input {
   margin-bottom: sizing.rems(m);
 
-  .rose-form-input-field {
-    @include type.type(m);
-    box-sizing: border-box;
-    margin-bottom: sizing.rems(xs);
-    padding: sizing.rems(xs);
-    color: var(--stark);
-    background-color: var(--subtle);
-    border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
-    border-radius: sizing.rems(xxxs);
-    box-shadow: inset 0px 3px 1px
-      rgba(var(--stark-components), var(--opacity-4));
-
-    &:not(:disabled):not([readonly]) {
-      &:hover {
-        border-color: var(--ui-gray);
-      }
-
-      &:focus {
-        border-color: var(--info);
-      }
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      color: var(--ui-gray);
-      background-color: var(--ui-gray-subtler-6);
-    }
-
-    &[readonly] {
-      border-color: transparent;
-      box-shadow: none;
-    }
-  }
-
   &.error {
     color: var(--failure);
 
@@ -46,8 +12,43 @@
     }
 
     .rose-form-input-field {
-      color: var(--failure);
+      color: currentColor;
       border-color: currentColor;
     }
   }
 }
+
+.rose-form-input-field {
+  @include type.type(m);
+  display: inline-block;
+  box-sizing: border-box;
+  margin-bottom: sizing.rems(xs);
+  padding: sizing.rems(xs);
+  color: var(--stark);
+  background-color: var(--subtle);
+  border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
+  border-radius: sizing.rems(xxxs);
+  box-shadow: inset 0px 3px 1px
+    rgba(var(--stark-components), var(--opacity-4));
+
+  &:not(:disabled):not([readonly]) {
+    &:hover {
+      border-color: var(--ui-gray);
+    }
+
+    &:focus {
+      border-color: var(--info);
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--ui-gray);
+    background-color: var(--ui-gray-subtler-6);
+  }
+
+  &[readonly] {
+    border-color: transparent;
+    box-shadow: none;
+  }
+}
diff --git a/addons/rose/addon/styles/rose/components/form/_select.scss b/addons/rose/addon/styles/rose/components/form/_select.scss
index e937ba80c..be867c493 100644
--- a/addons/rose/addon/styles/rose/components/form/_select.scss
+++ b/addons/rose/addon/styles/rose/components/form/_select.scss
@@ -4,45 +4,6 @@
 .rose-form-select {
   margin-bottom: sizing.rems(m);
 
-  .rose-form-select-field {
-    @include type.type(s);
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    vertical-align: middle;
-    display: inline-block;
-    margin-bottom: sizing.rems(xs);
-    padding: sizing.rems(xs) sizing.rems(xxl) sizing.rems(xs) sizing.rems(xs);
-    border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
-    border-radius: sizing.rems(xxxs);
-    box-shadow: 0 $size-xxs $size-xxs
-      rgba(var(--stark-components), var(--opacity-2));
-    background: var(--ui-gray-subtler-5)
-      url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%205.83L15.17%209l1.41-1.41L12%203%207.41%207.59%208.83%209%2012%205.83zm0%2012.34L8.83%2015l-1.41%201.41L12%2021l4.59-4.59L15.17%2015%2012%2018.17z%22%20fill%3D%22%23525761%22%2F%3E%3C%2Fsvg%3E')
-      no-repeat right sizing.rems(xs) center;
-    background-size: sizing.rems(l);
-
-    &:not(:disabled) {
-      &:hover {
-        border-color: var(--ui-gray-subtler-1);
-        background-color: transparent;
-        box-shadow: none;
-      }
-
-      &:focus {
-        border-color: var(--info);
-        background-color: var(--ui-gray-subtler-5);
-        box-shadow: none;
-      }
-    }
-
-    &:disabled {
-      cursor: not-allowed;
-      color: var(--ui-gray-subtler-1);
-      background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%205.83L15.17%209l1.41-1.41L12%203%207.41%207.59%208.83%209%2012%205.83zm0%2012.34L8.83%2015l-1.41%201.41L12%2021l4.59-4.59L15.17%2015%2012%2018.17z%22%20fill%3D%22%238E96A3%22%2F%3E%3C%2Fsvg%3E');
-    }
-  }
-
   &.error {
     color: var(--failure);
 
@@ -51,7 +12,48 @@
     }
 
     .rose-form-select-field {
-      border-color: var(--failure);
+      color: currentColor;
+      border-color: currentColor;
     }
   }
 }
+
+.rose-form-select-field {
+  @include type.type(m);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  vertical-align: middle;
+  display: inline-block;
+  box-sizing: border-box;
+  margin-bottom: sizing.rems(xs);
+  padding: sizing.rems(xs) sizing.rems(xxl) sizing.rems(xs) sizing.rems(xs);
+  border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
+  border-radius: sizing.rems(xxxs);
+  box-shadow: 0 $size-xxs $size-xxs
+    rgba(var(--stark-components), var(--opacity-2));
+  background: var(--ui-gray-subtler-5)
+    url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%205.83L15.17%209l1.41-1.41L12%203%207.41%207.59%208.83%209%2012%205.83zm0%2012.34L8.83%2015l-1.41%201.41L12%2021l4.59-4.59L15.17%2015%2012%2018.17z%22%20fill%3D%22%23525761%22%2F%3E%3C%2Fsvg%3E')
+    no-repeat right sizing.rems(xs) center;
+  background-size: sizing.rems(l);
+
+  &:not(:disabled) {
+    &:hover {
+      border-color: var(--ui-gray-subtler-1);
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    &:focus {
+      border-color: var(--info);
+      background-color: var(--ui-gray-subtler-5);
+      box-shadow: none;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--ui-gray-subtler-1);
+    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M12%205.83L15.17%209l1.41-1.41L12%203%207.41%207.59%208.83%209%2012%205.83zm0%2012.34L8.83%2015l-1.41%201.41L12%2021l4.59-4.59L15.17%2015%2012%2018.17z%22%20fill%3D%22%238E96A3%22%2F%3E%3C%2Fsvg%3E');
+  }
+}