Merge pull request #821 from BY00565233/SURF-2152

feat(button): new component specs

Author: 100stacks

src/scss/components/button/mixins/_hxButton.scss

@@ -35,7 +35,8 @@
   cursor: pointer;
   display: inline-block;
   font: inherit;
-  font-weight: 500;
+  font-size: 0.875rem;
+  font-weight: 700; // bold
   line-height: 1;
   margin: 0;
   padding: 0;
@@ -86,7 +87,8 @@
 /// ------------------------------------ ///
 
 @mixin hxButton--primary {
-  background-color: $cyan-900;
+  background-color: $blue-500;
+  border: none;
   color: $gray-0;
 
   &:hover {
@@ -107,24 +109,24 @@
 }
 
 @mixin hxButton-active--primary {
-  background-color: $cyan-700;
+  background-color: $blue-900;
   border-color: transparent;
   color: $gray-0;
 }
 
 @mixin hxButton-disabled--primary {
-  background-color: $gray-400;
+  background-color: $gray-500;
   border-color: transparent;
-  color: $gray-700;
+  color: $gray-0;
 }
 
 @mixin hxButton-focus--primary {
-  box-shadow: $focus-glow;
+  box-shadow: 0 0 4px rgba($blue-700, 0.5);
   outline: none;
 }
 
 @mixin hxButton-hover--primary {
-  background-color: $cyan-500;
+  background-color: $blue-700;
   border-color: transparent;
   color: $gray-0;
 }
@@ -134,8 +136,9 @@
 /// -------------------------------------- ///
 
 @mixin hxButton--secondary {
-  border: 1px solid $cyan-900;
-  color: $cyan-900;
+  background-color: transparent;
+  border: 1px solid $blue-500;
+  color: $blue-500;
 
   &:hover {
     @include hxButton-hover--secondary;
@@ -155,25 +158,25 @@
 }
 
 @mixin hxButton-active--secondary {
-  background-color: $cyan-700;
-  border-color: transparent;
-  color: $gray-0;
+  background-color: transparent;
+  border: 1px solid $blue-900;
+  color: $blue-900;
 }
 
 @mixin hxButton-disabled--secondary {
   background-color: transparent;
-  border-color: $gray-400;
-  color: $gray-400;
+  border: 1px solid $gray-500;
+  color: $gray-500;
 }
 
 @mixin hxButton-focus--secondary {
-  box-shadow: $focus-glow;
+  box-shadow: 0 0 4px rgba($blue-700, 0.5);
 }
 
 @mixin hxButton-hover--secondary {
-  background-color: $cyan-500;
-  border-color: transparent;
-  color: $gray-0;
+  background-color: transparent;
+  border: 1px solid $blue-700;
+  color: $blue-700;
 }
 
 
@@ -183,10 +186,10 @@
 
 @mixin hxButton--tertiary {
   background-color: transparent;
-  border: 0;
-  color: $cyan-900;
+  border: none;
+  color: $blue-500;
 
-  // This class will be removed in HelixUI-v1.0.0.
+  // TODO: deprecated Button and Button Bar styles
   &.hxDeprecated {
     padding-left: 0;
     padding-right: 0;
@@ -212,21 +215,22 @@
 @mixin hxButton-active--tertiary {
   background-color: transparent;
   border-color: transparent;
-  color: $cyan-700;
+  color: $blue-900;
 }
 
 @mixin hxButton-disabled--tertiary {
   background-color: transparent;
   border-color: transparent;
-  color: $gray-400;
+  color: $gray-500;
 }
 
 @mixin hxButton-focus--tertiary {
-  box-shadow: $focus-glow;
+  box-shadow: 0 0 4px rgba($blue-700, 0.5);
+  outline: none;
 }
 
 @mixin hxButton-hover--tertiary {
   background-color: transparent;
   border-color: transparent;
-  color: $cyan-500;
+  color: $blue-700;
 }

src/scss/components/popover/_index.scss

@@ -39,7 +39,7 @@ hx-popover {
     color: $gray-900;
     flex-shrink: 0;
     font-size: 1rem;
-    font-weight: 500;
+    font-weight: 600;
     padding: map-get($space, md);
     text-transform: none;
   }