Merge pull request #831 from HelixDesignSystem/surf-2171-button-update-specs

feat(various): update component specs

Author: 100stacks

src/scss/_vars.scss

@@ -151,12 +151,12 @@ $font-sans-serif: "Open Sans", "Roboto", "Helvetica Neue", "Helvetica", "Arial",
 $font-monospace: "Open Sans Condensed", "Roboto Mono", monospace;
 
 // ==== FOCUS STATE =====
-$focus-glow: 0 0 4px rgba($cyan-700, 0.5);
+$focus-glow: 0 0 4px rgba($blue-700, 0.5);
 $focus-glow-disabled: $focus-glow;
-$focus-glow-invalid: 0 0 4px rgba($red-900, 0.5);
+$focus-glow-invalid: 0 0 4px rgba($red-status-900, 0.5);
 
 $app-nav-width: 15rem;
-$corner-radius: 2px;
+//$corner-radius: 2px;  // Deprecated for Button- v2.0 Specs
 
 // ==== Z-INDEX =====
 $drawer-z-index: 50;

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

@@ -1,5 +1,4 @@
 @mixin hxButton($weight: secondary, $size: medium) {
-  border-radius: $corner-radius;
   display: inline-flex;
   justify-content: center;
 

src/scss/components/button/mixins/_hxButtonBar.scss

@@ -5,11 +5,11 @@
     border-radius: 0;
 
     &:first-child {
-      border-radius: $corner-radius 0 0 $corner-radius;
+      border-radius: 0;  // Removed - v2.0 Specs
     }
 
     &:last-child {
-      border-radius: 0 $corner-radius $corner-radius 0;
+      border-radius: 0; // Removed - v2.0 Specs
     }
 
     + .hxBtn {

src/scss/components/checkbox/_index.scss

@@ -26,6 +26,11 @@ hx-checkbox-control {
   }
 
   > label {
+    // Checkbox v2.0 specs
+    font-size: 1rem;
+    color: $gray-950;
+    font-weight: 400; // normal
+
     // grid child
     -ms-grid-column: 2;
     -ms-grid-row: 1;

src/scss/components/popover/_index.scss

@@ -36,11 +36,13 @@ hx-popover {
   }
 
   > header {
-    color: $gray-900;
+    color: $gray-950;
     flex-shrink: 0;
-    font-size: 1rem;
-    font-weight: 600;
+    line-height: 2rem;
+    font-size: 1.5rem;
+    font-weight: 400;
     padding: map-get($space, md);
+    padding-bottom: 0.5rem;
     text-transform: none;
   }
 

src/scss/components/radio/_index.scss

@@ -45,6 +45,11 @@ hx-radio-control {
 
   // facade + text
   > label {
+    // Radio v2.0 specs
+    font-size: 1rem;
+    color: $gray-950;
+    font-weight: 400; // normal
+
     // grid child
     -ms-grid-column: 2;
     -ms-grid-row: 1;