fix - Update variables, golden ratio and improve the grid rows

Author: sebastienrousseau

src/components/button.styl

@@ -82,7 +82,7 @@ button, .button, [type=submit]
       text-decoration: none
       transition: all 150ms linear
   &.error
-    background: var(--color-error)
+    background: var(--color-danger)
     color: var(--button-color)
     cursor: pointer
     transition: all 150ms linear

src/components/card.styl

@@ -2,7 +2,7 @@
 .card
 	background transparent
   background: 0 0;
-	margin-bottom golden-ratio rem
+	margin-bottom (golden-ratio)rem
 	position relative
   border 1px solid var(--border-color-300)
 	a
@@ -11,14 +11,14 @@
 		&:hover
 			text-decoration none
 .card-content
-	padding 0.01em golden-ratio rem
+	padding (golden-ratio - 1)rem (golden-ratio)rem (golden-ratio - 1)rem (golden-ratio)rem
 .card-body
 	flex 1 1 auto
-	padding golden-ratio rem golden-ratio rem
+	padding (golden-ratio)rem (golden-ratio)rem
 .card-title
-	margin-bottom golden-ratio rem
+	margin-bottom (golden-ratio)rem
 .card-subtitle
-	margin-top -(1-golden-ratio) rem
+	margin-top -(1-golden-ratio)rem
 	margin-bottom 0
 .cards
 	display flex
@@ -29,25 +29,32 @@
 .card
 	box-shadow 0 3px 9px 0 var(--background-color-200)
 	transition .30s
-	border-radius 1rem
-	img
-		margin-bottom 0
+	border-radius (golden-ratio)rem
+.card img
+  margin-bottom 0
+  border-radius (golden-ratio)rem
 .card.primary
   background var(--color-bg-primary)
   border .0625rem solid var(--color-primary)
+  color var(--color-primary)
 .card.secondary
   background var(--color-bg-secondary)
   border .0625rem solid var(--color-secondary)
+  color var(--color-secondary)
 .card.success
   background var(--color-bg-success)
   border .0625rem solid var(--color-success)
+  color var(--color-success)
 .card.info
   background var(--color-bg-info)
   border .0625rem solid var(--color-info)
+  color var(--color-info)
 .card.warning
   background var(--color-bg-warning)
   border .0625rem solid var(--color-warning)
+  color var(--color-warning)
 .card.error
-  background var(--color-bg-error)
-  border .0625rem solid var(--color-error)
+  background var(--color-bg-danger)
+  border .0625rem solid var(--color-danger)
+  color var(--color-danger)
 /* @end */

src/components/code.styl

@@ -14,11 +14,9 @@ code,
 kbd,
 pre,
 samp
-  background var(--background-color-100)
-  color var(--color)
   font-family "Consolas", "Monaco", "Menlo", monospace
   font-size golden-font-size-base rem
-  margin (golden-ratio)rem  0
+  margin (golden-ratio)rem
   padding (golden-ratio)rem
 
 pre
@@ -34,67 +32,67 @@ pre, code
   word-wrap break-word
 
 code
-  border-bottom 0.01rem solid var(--border-color-300)
-  border-left 0.3rem solid var(--border-color-300)
-  border-right 0.01rem solid var(--border-color-300)
-  border-top 0.01rem solid var(--border-color-300)
+  border-bottom 0.1rem solid var(--border-color)
+  border-left: 0.9rem solid var(--border-color)
+  border-right 0.1rem solid var(--border-color)
+  border-top 0.1rem solid var(--border-color)
   box-shadow 0 12px 30px -9px var(--background-color-200)
   &.primary
       background var(--color-bg-primary)
-      border-bottom 0.01rem solid var(--color-primary)
-      border-left 0.3rem solid var(--color-primary)
-      border-right 0.01rem solid var(--color-primary)
-      border-top 0.01rem solid var(--color-primary)
+      border-bottom 0.1rem solid var(--color-primary)
+      border-left 0.9rem solid var(--color-primary)
+      border-right 0.1rem solid var(--color-primary)
+      border-top 0.1rem solid var(--color-primary)
       box-shadow 0 12px 30px -9px var(--background-color-200)
       color var(--color-primary)
   &.secondary
       background var(--color-bg-secondary)
-      border-bottom 0.01rem solid var(--color-secondary)
-      border-left 0.3rem solid var(--color-secondary)
-      border-right 0.01rem solid var(--color-secondary)
-      border-top 0.01rem solid var(--color-secondary)
+      border-bottom 0.1rem solid var(--color-secondary)
+      border-left 0.9rem solid var(--color-secondary)
+      border-right 0.1rem solid var(--color-secondary)
+      border-top 0.1rem solid var(--color-secondary)
       box-shadow 0 12px 30px -9px var(--background-color-200)
       color var(--color-secondary)
   &.tertiary
       background var(--color-bg-tertiary)
-      border-bottom 0.01rem solid var(--color-tertiary)
-      border-left 0.3rem solid var(--color-tertiary)
-      border-right 0.01rem solid var(--color-tertiary)
-      border-top 0.01rem solid var(--color-tertiary)
+      border-bottom 0.1rem solid var(--color-tertiary)
+      border-left 0.9rem solid var(--color-tertiary)
+      border-right 0.1rem solid var(--color-tertiary)
+      border-top 0.1rem solid var(--color-tertiary)
       box-shadow 0 12px 30px -9px var(--background-color-200)
       color var(--color-tertiary)
   &.success
       background var(--color-bg-success)
-      border-bottom 0.01rem solid var(--color-success)
+      border-bottom 0.1rem solid var(--color-success)
       border-color var(--color-success)
-      border-left 0.3rem solid var(--color-success)
-      border-right 0.01rem solid var(--color-success)
-      border-top 0.01rem solid var(--color-success)
+      border-left 0.9rem solid var(--color-success)
+      border-right 0.1rem solid var(--color-success)
+      border-top 0.1rem solid var(--color-success)
       box-shadow 0 12px 30px -9px var(--background-color-200)
       color var(--color-success)
   &.info
       background var(--color-bg-info)
-      border-bottom 0.01rem solid var(--color-info)
-      border-left 0.3rem solid var(--color-info)
-      border-right 0.01rem solid var(--color-info)
-      border-top 0.01rem solid var(--color-info)
+      border-bottom 0.1rem solid var(--color-info)
+      border-left 0.9rem solid var(--color-info)
+      border-right 0.1rem solid var(--color-info)
+      border-top 0.1rem solid var(--color-info)
       box-shadow 0 12px 30px -9px var(--background-color-200)
       color var(--color-info)
   &.warning
       background var(--color-bg-warning)
-      border-bottom 0.01rem solid var(--color-warning)
-      border-left 0.3rem solid var(--color-warning)
-      border-right 0.01rem solid var(--color-warning)
-      border-top 0.01rem solid var(--color-warning)
+      border-bottom 0.1rem solid var(--color-warning)
+      border-left 0.9rem solid var(--color-warning)
+      border-right 0.1rem solid var(--color-warning)
+      border-top 0.1rem solid var(--color-warning)
       box-shadow 0 12px 30px -9px var(--background-color-200)
       color var(--color-warning)
   &.error
       background var(--color-bg-danger)
-      border-bottom 0.01rem solid var(--color-danger)
-      border-left 0.3rem solid var(--color-danger)
-      border-right 0.01rem solid var(--color-danger)
-      border-top 0.01rem solid var(--color-danger)
+      border-bottom 0.1rem solid var(--color-danger)
+      border-left 0.9rem solid var(--color-danger)
+      border-right 0.1rem solid var(--color-danger)
+      border-top 0.1rem solid var(--color-danger)
       box-shadow 0 12px 30px -9px var(--background-color-200)
-      color var(--color-error)
+      color var(--color-danger)
 
 /* @end */

src/core/grid.styl

@@ -1,24 +1,30 @@
 /* @group Grid */
-.container
-  -moz-box-sizing: border-box
-  -webkit-box-sizing: border-box
-  box-sizing: border-box
-  margin: 0 auto
-  padding: 0 (15 * golden-ratio) rem
-  position: relative
-  width: 96%
-
 .grid-flex
     display: -webkit-box
-    align-items: top
     display: flex
     flex-wrap: wrap
-    -ms-flex-wrap: wrap
 
-.row:after
+.row
+  position relative
+  width 100%
+  $:after
     clear: both
     content: ''
     display: table
+  &-wrap
+    padding 0
+  &-top
+    align-items flex-start
+  &-bottom
+    align-items flex-end
+  &-center
+    align-items center
+  &-stretch
+    align-items stretch
+  &-baseline
+    align-items baseline
+  &-no-padding
+    padding 0
 
 for i in (1..12)
   .flex-{i}