💄 Update system

src/utils/system.js

@@ -31,8 +31,8 @@ import {
   ratio,
   right,
   space,
+  style,
   textAlign,
-  textTransform,
   top,
   width,
   zIndex,
@@ -42,6 +42,12 @@ import { calcUnits, getColor, getTheme, getYiq, px, themeGet } from './helpers';
 import { placeholder } from './mixins';
 import { inputTextOptions } from './options';
 
+const textTransform = style({
+  prop: 'textTransform',
+  cssProperty: 'textTransform',
+  transformValue: px,
+});
+
 const base = {
   color: props => {
     const { disabled, outline } = props;
@@ -138,23 +144,17 @@ export const BoxStyles = {
   base() {
     return css`
       width: 100%;
-      ${alignContent};
-      ${alignItems};
       ${alignSelf};
       ${backgroundImage};
       ${borders};
       ${bottom};
       ${color};
       ${display};
       ${flex};
-      ${flexBasis};
-      ${flexDirection};
-      ${flexWrap};
       ${fontFamily};
       ${fontSize};
       ${fontWeight};
       ${height};
-      ${justifyContent};
       ${left};
       ${maxHeight};
       ${maxWidth};
@@ -650,14 +650,18 @@ export const HeadingStyles = {
       font-family: inherit;
       font-weight: ${headingWeight};
       line-height: ${base.lineHeight};
-      margin: 0 0 ${gutterBottom ? px(gutter[2]) : 0};
+      margin: ${px(gutter[2])} 0 ${gutterBottom ? px(gutter[2]) : 0};
       ${borders};
       ${fontSize};
       ${fontWeight};
       ${lineHeight};
       ${space};
       ${textAlign};
       ${textTransform};
+      
+      &:first-child {
+        margin-top: 0;
+      }
     `;
   },
 };