Merge pull request #116 from viljamis/3.3.0

3.3.0
arielsalminen · Sep 28, 2018 · b6f3f7f · b6f3f7f
2 parents 7008547 + 50cc5b2
commit b6f3f7f
Show file tree

Hide file tree

Showing 39 changed files with 1,261 additions and 650 deletions.
diff --git a/README.md b/README.md
@@ -50,7 +50,7 @@ The tool is built on top of [Vue.js](https://vuejs.org), [Vue Styleguidist](http
 
 ## Changelog
 
-- `3.2.0` is the latest release.
+- `3.5.0` is the latest release.
 - See [Releases page](https://github.com/viljamis/vue-design-system/releases) for the full changelog.
 
 ## Need more help?

diff --git a/build/utils.js b/build/utils.js
@@ -76,7 +76,7 @@ exports.cssLoaders = function(options) {
     outputStyle: "compressed",
   }
 
-  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  // https://vue-loader.vuejs.org/guide/extract-css.html
   return {
     css: generateLoaders(),
     postcss: generateLoaders(),

diff --git a/config/docs.config.js b/config/docs.config.js
@@ -153,7 +153,7 @@ module.exports = {
     module: {
       rules: [
         {
-          test: /\.(css?|scss)(\?.*)?$/,
+          test: /\.(css?|scss|sass)(\?.*)?$/,
           use: [
             "style-loader",
             "css-loader",

diff --git a/docs/components/status/Components.vue b/docs/components/status/Components.vue
@@ -2,19 +2,19 @@
   <div class="component-status">
     <ul class="status-list">
       <li>
-        <svg-icon name="ready" fill="#7cb518" size="16px" />
+        <Icon name="ready" fill="#7cb518" size="small" />
         <p>Ready</p>
       </li>
       <li>
-        <svg-icon name="review" :fill="tokens.color_ucla_gold.value" size="16px" />
+        <Icon name="review" :fill="tokens.color_ucla_gold.value" size="small" />
         <p>Under review</p>
       </li>
       <li>
-        <svg-icon name="deprecated" :fill="tokens.color_vermilion.value" size="16px" />
+        <Icon name="deprecated" :fill="tokens.color_vermilion.value" size="small" />
       <p>Deprecated</p>
       </li>
       <li>
-        <svg-icon name="prototype" :fill="tokens.color_bleu_de_france.value" size="16px" />
+        <Icon name="prototype" :fill="tokens.color_bleu_de_france.value" size="small" />
         <p>Prototype</p>
       </li>
       <li>
@@ -46,29 +46,29 @@
           </td>
           <td v-else>N/A</td>
           <td v-if="component.status">
-            <svg-icon
+            <Icon
               v-if="component.status === 'ready'"
               name="ready"
               fill="#7cb518"
-              size="16px"
+              size="small"
             />
-            <svg-icon
+            <Icon
               v-if="component.status === 'under-review' || component.status === 'review'"
               name="review"
               :fill="tokens.color_ucla_gold.value"
-              size="16px"
+              size="small"
             />
-            <svg-icon
+            <Icon
               v-if="component.status === 'prototype'"
               name="prototype"
               :fill="tokens.color_bleu_de_france.value"
-              size="16px"
+              size="small"
             />
-            <svg-icon
+            <Icon
               v-if="component.status === 'deprecated'"
               name="deprecated"
               :fill="tokens.color_vermilion.value"
-              size="16px"
+              size="small"
             />
           </td>
           <td v-else>—</td>
@@ -139,11 +139,11 @@ export default {
 
 .component-status {
   @include reset;
-  font-family: $font-family-heading;
-  font-weight: $font-weight-regular;
-  line-height: $line-height-heading;
+  font-family: $font-heading;
+  font-weight: $weight-normal;
+  line-height: $line-height-xs;
   color: $color-rich-black;
-  margin-bottom: $space-small;
+  margin-bottom: $space-s;
   font-style: normal;
   @media (max-width: 1000px) {
     overflow-x: auto;
@@ -154,14 +154,14 @@ export default {
     width: 100%;
   }
   thead th {
-    padding: $space-small;
+    padding: $space-s;
     background: $color-cloud;
-    font-size: $font-size-small;
-    font-weight: $font-weight-bold;
+    font-size: $size-s;
+    font-weight: $weight-bold;
     color: $color-oxford-blue;
     text-transform: uppercase;
     letter-spacing: 1px;
-    font-weight: $font-weight-semi-bold;
+    font-weight: $weight-semi-bold;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: left;
@@ -170,12 +170,12 @@ export default {
     position: sticky;
     top: -1px;
     &:first-child {
-      border-top-left-radius: $border-radius-default;
-      border-bottom-left-radius: $border-radius-default;
+      border-top-left-radius: $radius-default;
+      border-bottom-left-radius: $radius-default;
     }
     &:last-child {
-      border-top-right-radius: $border-radius-default;
-      border-bottom-right-radius: $border-radius-default;
+      border-top-right-radius: $radius-default;
+      border-bottom-right-radius: $radius-default;
     }
   }
   tr {
@@ -185,15 +185,15 @@ export default {
     }
   }
   td {
-    font-size: $font-size-small;
-    padding: $space-small;
+    font-size: $size-s;
+    padding: $space-s;
     &:first-child {
-      font-weight: $font-weight-bold;
+      font-weight: $weight-bold;
       white-space: nowrap;
     }
   }
   .status-list {
-    margin: 0 0 $space-small;
+    margin: 0 0 $space-m;
     overflow: hidden;
     padding: 0;
     list-style: none;
@@ -204,9 +204,9 @@ export default {
       display: block;
     }
     li {
-      margin: 0 $space-base 0 0;
+      margin: 0 $space-m 0 0;
       color: $color-silver;
-      font-size: $font-size-small;
+      font-size: $size-s;
       align-items: center;
       display: flex;
       @media (max-width: 1000px) {
@@ -216,11 +216,11 @@ export default {
       }
       svg,
       span {
-        margin: -2px calc(#{$space-small} / 2) 0 0;
+        margin: -2px calc(#{$space-s} / 2) 0 0;
       }
       p {
         @media (max-width: 1000px) {
-          margin: $space-x-small;
+          margin: $space-xs;
         }
       }
     }

diff --git a/docs/components/tokens/All.vue b/docs/components/tokens/All.vue
@@ -68,11 +68,12 @@ export default {
 
 .all-tokens {
   @include reset;
-  font-family: $font-family-heading;
-  font-weight: $font-weight-regular;
-  line-height: $line-height-heading;
+  margin-top: $space-l;
+  font-family: $font-heading;
+  font-weight: $weight-normal;
+  line-height: $line-height-xs;
   color: $color-rich-black;
-  margin-bottom: $space-small;
+  margin-bottom: $space-s;
   font-style: normal;
   @media (max-width: 1000px) {
     overflow-x: auto;
@@ -83,14 +84,14 @@ export default {
     width: 100%;
   }
   thead th {
-    padding: $space-small $space-large $space-small $space-small;
+    padding: $space-s $space-l $space-s $space-s;
     background: $color-cloud;
-    font-size: $font-size-small;
-    font-weight: $font-weight-bold;
+    font-size: $size-s;
+    font-weight: $weight-bold;
     color: $color-oxford-blue;
     text-transform: uppercase;
     letter-spacing: 1px;
-    font-weight: $font-weight-semi-bold;
+    font-weight: $weight-semi-bold;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     text-align: left;
@@ -99,12 +100,12 @@ export default {
     position: sticky;
     top: -1px;
     &:first-child {
-      border-top-left-radius: $border-radius-default;
-      border-bottom-left-radius: $border-radius-default;
+      border-top-left-radius: $radius-default;
+      border-bottom-left-radius: $radius-default;
     }
     &:last-child {
-      border-top-right-radius: $border-radius-default;
-      border-bottom-right-radius: $border-radius-default;
+      border-top-right-radius: $radius-default;
+      border-bottom-right-radius: $radius-default;
     }
   }
   tr {
@@ -114,26 +115,26 @@ export default {
     }
   }
   td {
-    font-size: $font-size-small;
-    padding: $space-small $space-large $space-small $space-small;
+    font-size: $size-s;
+    padding: $space-s $space-l $space-s $space-s;
     &:first-child {
-      font-weight: $font-weight-bold;
+      font-weight: $weight-bold;
       white-space: nowrap;
     }
   }
   .type {
-    line-height: $line-height-small;
-    max-width: calc(100% - #{$space-base});
+    line-height: $line-height-s;
+    max-width: calc(100% - #{$space-m});
     float: left;
   }
   .example {
-    @include inline-space($space-x-small);
-    border-radius: $border-radius-default;
+    @include inline-space($space-xs);
+    border-radius: $radius-default;
     background: $color-white;
-    box-shadow: $box-shadow-small-inset, $box-shadow-small-inset, $box-shadow-small-inset;
+    box-shadow: $shadow-s-inset, $shadow-s-inset, $shadow-s-inset;
     margin-top: $space-xx-small;
-    width: $space-small;
-    height: $space-small;
+    width: $space-s;
+    height: $space-s;
     float: left;
   }
 }

diff --git a/docs/components/tokens/Color.vue b/docs/components/tokens/Color.vue
@@ -50,6 +50,7 @@ export default {
 --------------------------------------------- */
 
 .colors {
+  margin-top: $space-l;
   display: block;
   width: 100%;
   @supports (display: grid) {
@@ -58,74 +59,72 @@ export default {
     align-content: stretch;
     justify-content: left;
     grid-template-columns:
-      calc(20% - #{$space-base}) calc(20% - #{$space-base}) calc(20% - #{$space-base}) calc(20% - #{$space-base})
-      calc(20% - #{$space-base});
-    grid-column-gap: $space-base;
+      calc(20% - #{$space-m}) calc(20% - #{$space-m}) calc(20% - #{$space-m}) calc(20% - #{$space-m})
+      calc(20% - #{$space-m});
+    grid-column-gap: $space-m;
     @media (max-width: 1300px) {
-      grid-template-columns: calc(25% - #{$space-base}) calc(25% - #{$space-base}) calc(25% - #{$space-base}) calc(
-          25% - #{$space-base}
+      grid-template-columns: calc(25% - #{$space-m}) calc(25% - #{$space-m}) calc(25% - #{$space-m}) calc(
+          25% - #{$space-m}
         );
     }
     @media (max-width: 1100px) {
-      grid-template-columns: calc(33.333% - #{$space-base}) calc(33.333% - #{$space-base}) calc(
-          33.333% - #{$space-base}
-        );
+      grid-template-columns: calc(33.333% - #{$space-m}) calc(33.333% - #{$space-m}) calc(33.333% - #{$space-m});
     }
     @media (max-width: 900px) {
-      grid-template-columns: calc(50% - #{$space-base}) calc(50% - #{$space-base});
+      grid-template-columns: calc(50% - #{$space-m}) calc(50% - #{$space-m});
     }
     @media (max-width: 400px) {
       grid-template-columns: 100%;
     }
   }
 }
 .swatch {
-  @include stack-space($space-small);
+  @include stack-space($space-s);
   border-bottom: 1px solid rgba(0, 0, 0, 0.08);
-  height: $space-xx-large;
-  margin-left: -#{$space-small};
-  margin-top: -#{$space-small};
-  width: calc(100% + #{$space-large});
+  height: $space-xxl;
+  margin-left: -#{$space-s};
+  margin-top: -#{$space-s};
+  width: calc(100% + #{$space-l});
   float: left;
 }
 h3 {
   @include reset;
-  @include stack-space($space-x-small);
+  @include stack-space($space-xs);
   text-transform: capitalize;
   line-height: 1.2;
   width: 100%;
   float: left;
 }
 .color {
   @include reset;
-  @include inset-space($space-small);
+  @include inset-space($space-s);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  margin-bottom: $space-large;
+  margin-bottom: $space-m;
   box-shadow: 0 0 0 1px rgba(63, 63, 68, 0.05), 0 1px 3px 0 rgba(63, 63, 68, 0.15);
-  font-size: $font-size-small;
-  font-family: $font-family-text;
+  font-size: $size-s;
+  font-family: $font-text;
   color: $color-rich-black;
-  border-radius: $border-radius-default;
+  border-radius: $radius-default;
   overflow: hidden;
   text-align: left;
   @supports (display: grid) {
     width: 100%;
     float: left;
   }
   @media (max-width: 400px) {
-    margin-bottom: $space-base;
+    margin-bottom: $space-m;
   }
   &:hover {
     span {
       color: shade($color-silver, 40%);
     }
   }
   span {
-    margin-bottom: $space-x-small;
+    margin-bottom: $space-xs;
     line-height: 1.3;
     color: $color-silver;
-    font-size: $font-size-small;
+    font-size: $size-s;
     width: 100%;
     float: left;
   }