feat(button): new color palette specs

Author: badejayayesubabu

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

@@ -86,7 +86,7 @@
 /// ------------------------------------ ///
 
 @mixin hxButton--primary {
-  background-color: $cyan-900;
+  background-color: $blue-500;
   color: $gray-0;
 
   &:hover {
@@ -107,15 +107,15 @@
 }
 
 @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 {
@@ -124,7 +124,7 @@
 }
 
 @mixin hxButton-hover--primary {
-  background-color: $cyan-500;
+  background-color: $blue-700;
   border-color: transparent;
   color: $gray-0;
 }
@@ -134,8 +134,8 @@
 /// -------------------------------------- ///
 
 @mixin hxButton--secondary {
-  border: 1px solid $cyan-900;
-  color: $cyan-900;
+  border: 1px solid $blue-900;
+  color: $blue-900;
 
   &:hover {
     @include hxButton-hover--secondary;
@@ -155,23 +155,23 @@
 }
 
 @mixin hxButton-active--secondary {
-  background-color: $cyan-700;
+  background-color: $blue-900;
   border-color: transparent;
   color: $gray-0;
 }
 
 @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;
 }
 
 @mixin hxButton-hover--secondary {
-  background-color: $cyan-500;
+  background-color: $blue-700;
   border-color: transparent;
   color: $gray-0;
 }
@@ -184,7 +184,7 @@
 @mixin hxButton--tertiary {
   background-color: transparent;
   border: 0;
-  color: $cyan-900;
+  color: $blue-500;
 
   // This class will be removed in HelixUI-v1.0.0.
   &.hxDeprecated {
@@ -212,13 +212,13 @@
 @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 {
@@ -228,5 +228,5 @@
 @mixin hxButton-hover--tertiary {
   background-color: transparent;
   border-color: transparent;
-  color: $cyan-500;
+  color: $blue-700;
 }

src/scss/components/pill/_index.scss

@@ -13,8 +13,6 @@ hx-status {
   color: $gray-750;
   display: inline-block;
   font-size: 0.625rem; // 10px
-  height: 1rem;
-  line-height: 1;
   max-width: 100%;
   overflow: hidden;
   padding: 0.3em 0.8em 0.2em; // 3px 8px 2px

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;
   }