Merge pull request #1595 from hypothesis/consolidate-forms-scss

Consolidate some form and button styles

src/sidebar/templates/annotation.html

@@ -37,14 +37,14 @@
       h-branding="accentColor">mire</a>
   </div>
   <!-- Tags -->
-  <div class="annotation-body form-field" ng-if="vm.editing()">
+  <div class="annotation-body" ng-if="vm.editing()">
     <tag-editor tags="vm.state().tags"
                 on-edit-tags="vm.setTags(tags)"></tag-editor>
   </div>
 
   <tag-list
     annotation="vm.annotation"
-    tags="vm.state().tags" 
+    tags="vm.state().tags"
   ></tag-list>
   <!-- / Tags -->
 

src/styles/forms.scss

 @use "mixins/forms";
 @use "variables" as var;
 
-// Common form styles.
-
-.form-field {
-  @include forms.pie-clearfix;
-  clear: both;
-  margin-bottom: 0.75em;
-}
-
 .form-input {
+  @include forms.form-input;
   width: 100%;
   display: block;
-}
-
-.form-input {
-  @include forms.form-input;
 
   &:focus,
   &.js-focus {
@@ -28,62 +17,3 @@
   max-width: 100%;
   resize: vertical;
 }
-
-.form-actions {
-  @include forms.pie-clearfix;
-  margin-top: 0.75em;
-}
-
-.btn {
-  @include forms.btn;
-
-  &:hover,
-  &:focus,
-  &:active {
-    @include forms.btn-hover;
-  }
-
-  &:focus {
-    @include forms.focus-outline;
-  }
-
-  &:active {
-    @include forms.btn-active;
-  }
-
-  &[disabled] {
-    @include forms.btn-disabled;
-  }
-}
-
-.btn-clean {
-  border: none;
-
-  &,
-  &:focus,
-  &:hover,
-  &:active,
-  &[disabled] {
-    box-shadow: none;
-    background: none;
-  }
-
-  &:focus,
-  &:hover,
-  &:active {
-    color: var.$link-color;
-  }
-
-  &:active {
-    color: var.$link-color-hover;
-  }
-
-  &[disabled] {
-    color: var.$text-color;
-  }
-}
-
-.btn-icon {
-  display: inline-block;
-  font-size: 16px;
-}

src/styles/mixins/forms.scss

@@ -23,9 +23,9 @@
 }
 
 @mixin focus-outline {
-  border-color: #51a7e8;
+  border-color: var.$color-focus-outline;
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.075) inset,
-    0px 0px 5px rgba(81, 167, 232, 0.5);
+    0px 0px 5px var.$color-focus-shadow;
 }
 
 @mixin form-input {
@@ -35,12 +35,12 @@
   padding: 0.5em 0.75em;
   font-weight: normal;
   color: var.$grey-5;
-  background-color: #fafafa;
+  background-color: var.$grey-0;
 }
 
 @mixin form-input-focus {
   outline: none;
-  background-color: #fff;
+  background-color: var.$white;
 
   @include focus-outline;
   @include placeholder {
@@ -48,50 +48,12 @@
   }
 }
 
-@mixin form-input-error {
-  color: var.$error-color;
-  border-color: var.color-weight(var.$error-color, 300);
-  background-color: var.color-weight(var.$error-color, 50);
-
-  @include placeholder {
-    color: var.tint(var.$error-color, 5%);
-  }
-}
-
-@mixin btn {
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
-
-  background: linear-gradient(var.$button-background-gradient);
-  display: inline-block;
-  font-weight: bold;
-  color: var.$button-text-color;
-  text-shadow: 0 1px 0 #fff;
-  border-radius: 2px;
-  border: 1px solid var.$grey-semi;
-  padding: 0.5em 0.9em;
-}
-
 @mixin btn-hover {
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
   outline: none;
   color: var.$button-text-color;
   background: var.$button-background-start;
-  border-color: #bababa;
-}
-
-@mixin btn-active {
-  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.1);
-  background: var.$button-background-end;
-  color: #424242;
-  border-color: #bababa;
-}
-
-@mixin btn-disabled {
-  box-shadow: none;
-  cursor: default;
-  background: #f0f0f0;
-  border-color: #cecece;
-  color: var.$grey-semi;
+  border-color: var.$grey-4;
 }
 
 @mixin primary-action-btn {

src/styles/sidebar/components/annotation-publish-control.scss

-@use "../../mixins/buttons";
 @use "../../mixins/forms";
 @use "../../variables" as var;
 

src/styles/variables.scss

@@ -4,6 +4,10 @@
 
 $white: #fff !default;
 
+// Interim color variable for migration purposes.
+// Used as very-subtle background color for form fields. $grey-1 is too dark.
+$grey-0: #fafafa;
+
 $grey-1: #f2f2f2;
 $grey-2: #ececec;
 
@@ -34,6 +38,9 @@ $black: #000 !default;
 $brand: #bd1c2b;
 $highlight: #58cef4;
 
+$color-focus-outline: #51a7e8;
+$color-focus-shadow: color.scale($color-focus-outline, $alpha: -50%);
+
 $button-text-color: $grey-mid !default;
 $button-background-start: $white !default;
 $button-background-end: #f0f0f0 !default;