chore(wip): surf-1432 css resets

Author: 100stacks

docs/_templates/component.njk

@@ -21,7 +21,7 @@
       {% if page.also %}
         <a href="#see-also">See Also</a>
       {% endif %}
-      <hr />
+      <hr class="hxDivider" />
       <a class="top-link" href="#top">Back to Top</a>
     </nav>
   </aside>

docs/_templates/element.njk

@@ -57,7 +57,7 @@
       {% if page.also %}
         <a href="#see-also">See Also</a>
       {% endif %}
-      <hr />
+      <hr class="hxDivider" />
       <a class="top-link" href="#top">Back to Top</a>
     </nav>
   </aside>

docs/_templates/partials/sidebar.njk

@@ -4,6 +4,6 @@
   {% if page.also %}
     <a href="#see-also">See Also</a>
   {% endif %}
-  <hr />
+  <hr class="hxDivider" />
   <a class="top-link" href="#top">Back to Top</a>
 </nav>

src/helix-ui/styles/components/forms.less

@@ -8,6 +8,19 @@
   // a.k.a. "field name"
   label {
     .FieldName();
+    margin: 0;
+    padding: 0;
+  }
+
+  legend {
+    border: none;
+    color: inherit;
+    display: block;
+    font-weight: 400;
+    line-height: 1;
+    margin-bottom: 0;
+    padding: 0;
+    width: 100%;
   }
 
   input + label { // a.k.a. "option label"
@@ -21,6 +34,9 @@
   }
 
   fieldset {
+    border: none;
+    padding: 0;
+
     > legend {
       .FieldName();
       margin-bottom: 0.25rem; // ~4px

src/helix-ui/styles/components/tables.less

@@ -1,5 +1,44 @@
 @import (reference) "components/typography";
 
+// Table style resets
+.hxTable {
+  background-color: transparent;
+  border-collapse: collapse;
+  border-spacing: 0;
+  border: none;
+  font-size: 1rem; // 16px
+  margin: 1.5rem 0;
+  padding: 0;
+  width: 100%;
+
+  thead,
+  tbody,
+  tfoot {
+    background-color: transparent;
+    border: none;
+    margin: 0;
+    padding: 0;
+
+    tr {
+      background-color: transparent;
+      border: none;
+      margin: 0;
+      padding: 0;
+
+      th,
+      td {
+        background-color: transparent;
+        border: none;
+        font-size: 1rem;
+        line-height: 1;
+        margin: 0;
+        padding: 0;
+        text-align: left;
+      }
+    }
+  }
+}
+
 // ===== States =====
 @state-selected-bg: @cyan-50;
 

src/helix-ui/styles/overrides.less

@@ -24,3 +24,10 @@ p {
 fieldset label {
   font-size: 0.875rem; // NOTE: Edge/IE will truncate to 0.88rem
 }
+
+hr.hxDivider {
+  border-color: currentColor;
+  border-style: solid;
+  border-width: 1px 0 0;
+  margin: 0.75rem 0;
+}

src/helix-ui/styles/reset.less

@@ -27,7 +27,6 @@ html {
 
 @import 'reset/forms';
 @import 'reset/html5';
-@import 'reset/tables';
 
 [hidden] {
   display: none;
@@ -41,22 +40,3 @@ caption {
   padding: 0;
   text-align: left;
 }
-
-// TODO: scope as .hxDivider
-// docs/_templates will need updates
-hr {
-  border-color: currentColor;
-  border-style: solid;
-  border-width: 1px 0 0;
-  margin: 0.75rem 0;
-}
-
-// Remove "X" added by Edge and IE
-input::-ms-clear {
-  display: none;
-}
-
-// Ensure that browsers inherit the proper font settings.
-textarea {
-  font: inherit;
-}

src/helix-ui/styles/reset/forms.less

@@ -1,5 +1,5 @@
 /* ========== FORMS & CONTROLS ========== */
-// TODO: remove file, be aware that this could potentially break styles elsewhere
+// DEPRECATED STYLE RESETS
 button {
   color: inherit;
   font: inherit;
@@ -31,3 +31,13 @@ legend {
   padding: 0;
   width: 100%;
 }
+
+// Remove "X" added by Edge and IE
+input::-ms-clear {
+  display: none;
+}
+
+// Ensure that browsers inherit the proper font settings.
+textarea {
+  font: inherit;
+}