improved ds-space and ds-flex-item, added gentium webfont for quotes

styleguide/src/system/components/layout/Flex/FlexItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <component 
+  <component
     :is="tag"
     :style="styles"
     class="ds-flex-item">
@@ -39,6 +39,14 @@ export default {
     tag: {
       type: String,
       default: 'div'
+    },
+
+    /**
+     * Center content vertical and horizontal
+     */
+    center: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -50,9 +58,16 @@ export default {
       const gutter = this.mediaQuery(this.gutter)
       const widthStyle = this.parseWidth(width)
       const gutterStyle = this.parseGutter(gutter)
+      const centerStyle = this.center
+        ? {
+            'align-self': 'center',
+            'jusify-self': 'center'
+          }
+        : {}
       return {
         ...widthStyle,
-        ...gutterStyle
+        ...gutterStyle,
+        ...centerStyle
       }
     }
   },

styleguide/src/system/components/layout/Space/Space.vue

@@ -45,6 +45,11 @@ export default {
       type: [String, Object],
       default: null
     },
+
+    align: {
+      type: Boolean,
+      default: false
+    },
     /**
      * The html element name used for this space.
      */
@@ -62,9 +67,19 @@ export default {
       const marginBottom = this.mediaQuery(bottom)
       const marginTopStyle = this.parseMargin('Top')(marginTop)
       const marginBottomStyle = this.parseMargin('Bottom')(marginBottom)
+      const centerStyle = this.center
+        ? {
+            'text-align': 'center',
+            flex: 1,
+            'align-content': 'center',
+            'jusify-content': 'center'
+          }
+        : {}
+
       return {
         ...marginTopStyle,
-        ...marginBottomStyle
+        ...marginBottomStyle,
+        ...centerStyle
       }
     }
   },

styleguide/src/system/styles/fonts/gentium-basic.scss

@@ -0,0 +1,15 @@
+@font-face {
+  font-family: 'Gentium Basic';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Gentium Basic'), local('GentiumBasic'), url('~@@/assets/fonts/gentium-basic/GentiumBasic.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'Gentium Basic';
+  font-style: italic;
+  font-weight: 400;
+  src: local('Gentium Basic Italic'), local('GentiumBasic-Italic'), url('~@@/assets/fonts/gentium-basic/GentiumBasic-Italic.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

styleguide/src/system/styles/main.scss

@@ -6,4 +6,5 @@
 
 @import "./shared";
 @import "./fonts/lato";
+@import "./fonts/gentium-basic";
 @import "./core/reset";

styleguide/src/system/tokens/font.yml

@@ -10,6 +10,9 @@ props:
   - name: font-family-text
     value: "'LatoWeb', sans-serif"
     category: "font-family"
+  - name: font-family-serif
+    value: "'Gentium Basic', serif"
+    category: "font-family"
   - name: font-family-code
     value: "inconsolata, monospace"
     category: "font-family"