@propelinc/citrus-ui 0.5.0 → 0.5.1-dev.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@propelinc/citrus-ui",
-  "version": "0.5.0",
+  "version": "0.5.1-dev.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/propelinc/citrus-ui"

package/src/components/CBanner.vue

@@ -8,11 +8,12 @@
 </template>
 
 <script lang="ts">
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
 type Type = 'error' | 'info';
 
-@Component({ name: 'CBanner' })
+@Component({ name: 'CBanner', components: { FontAwesomeIcon } })
 export default class CBanner extends Vue {
   @Prop(String) icon?: string;
   @Prop({ type: String, required: true }) message!: string;

package/src/components/CListItemAction.vue

@@ -9,9 +9,10 @@
 <script lang="ts">
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { faChevronRight } from '@fortawesome/pro-light-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
-@Component({ name: 'CListItemAction' })
+@Component({ name: 'CListItemAction', components: { FontAwesomeIcon } })
 export default class CListItemAction extends Vue {
   @Prop({ type: [String, Array, Object], default: () => faChevronRight }) icon!: IconDefinition;
 }

package/src/components/CListItemIcon.vue

@@ -16,9 +16,10 @@
 
 <script lang="ts">
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
-@Component({ name: 'CListItemIcon' })
+@Component({ name: 'CListItemIcon', components: { FontAwesomeIcon } })
 export default class CListItemIcon extends Vue {
   @Prop({ type: [String, Array, Object] }) icon?: IconDefinition;
   @Prop({ type: Boolean, default: true }) fixedSize!: boolean;

package/src/components/CModal.vue

@@ -45,6 +45,7 @@
 
 <script lang="ts">
 import { faSync, faTimes } from '@fortawesome/pro-light-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import CCard from '@/components/CCard.vue';
@@ -52,7 +53,10 @@ import CCardHeader from '@/components/CCardHeader.vue';
 import CCardSection from '@/components/CCardSection.vue';
 import CIconButton from '@/components/CIconButton.vue';
 
-@Component({ name: 'CModal', components: { CCard, CCardSection, CCardHeader, CIconButton } })
+@Component({
+  name: 'CModal',
+  components: { CCard, CCardSection, CCardHeader, CIconButton, FontAwesomeIcon },
+})
 export default class CModal extends Vue {
   faSync = faSync;
   faTimes = faTimes;

package/src/components/CNotification.vue

@@ -35,13 +35,14 @@
 <script lang="ts">
 import { IconDefinition } from '@fortawesome/fontawesome-common-types';
 import { faTimes } from '@fortawesome/pro-light-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 import { RawLocation } from 'vue-router';
 
 import CButton from '@/components/CButton.vue';
 import CIconButton from '@/components/CIconButton.vue';
 
-@Component({ name: 'CNotification', components: { CButton, CIconButton } })
+@Component({ name: 'CNotification', components: { CButton, CIconButton, FontAwesomeIcon } })
 export default class CNotification extends Vue {
   faTimes = faTimes;
 

package/src/components/CSelect.vue

@@ -43,13 +43,18 @@
 
 <script lang="ts">
 import { faChevronDown, faSpinner } from '@fortawesome/pro-light-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import { Component, Vue, Prop } from 'vue-property-decorator';
 
 import FormField from '@/components/helpers/FormField.vue';
 import SelectInput from '@/components/helpers/SelectInput.vue';
 
 // @ts-ignore
-@Component({ name: 'CSelect', inheritAttrs: false, components: { FormField, SelectInput } })
+@Component({
+  name: 'CSelect',
+  inheritAttrs: false,
+  components: { FormField, SelectInput, FontAwesomeIcon },
+})
 export default class CSelect extends Vue {
   faChevronDown = faChevronDown;
   faSpinner = faSpinner;

package/src/components/helpers/FormField.vue

@@ -37,8 +37,9 @@ export default class FormField extends Vue {
 }
 
 .form-field__label {
+  display: inline-block;
   font-weight: $font-weight-bold;
-  margin: 0 0 8px 2px;
+  margin: 0 0 4px 2px;
 }
 
 .form-field__label--disabled {

package/src/styles/_core.scss

@@ -57,83 +57,86 @@ $font-weight-bold: 700;
 $font-weight-heavy: 800;
 $font-weight-black: 900;
 
-$font-size-3x-large: 44px;
-$font-size-2x-large: 32px;
-$font-size-x-large: 23px;
-$font-size-large: 18px;
-$font-size-medium: 14px;
+$font-size-3x-large: 48px;
+$font-size-2x-large: 35px;
+$font-size-x-large: 26px;
+$font-size-large: 21px;
+$font-size-medium: 15px;
 $font-size-small: 12px;
 
 $line-height-balance: 100%;
-$line-height-large-headline: 85%;
+$line-height-large-headline: 130%;
+$line-height-large-headline-script: 85%;
 $line-height-headline: 130%;
-$line-height-subheadline: 130%;
+$line-height-subheadline: 150%;
 $line-height-body: 150%;
-$line-height-caption: 150%;
+$line-height-statement: 100%;
+$line-height-caption: 130%;
 $line-height-overline: 100%;
 
+$letter-spacing-overline: 0.5px;
+
 @mixin balance {
-  font-family: $font-family-object-sans !important;
-  font-size: $font-size-2x-large !important;
+  font-family: $font-family-object-sans;
+  font-size: $font-size-2x-large;
   font-weight: $font-weight-thin;
   line-height: $line-height-balance;
 }
 
 @mixin large-headline {
-  font-family: $font-family-object-sans !important;
-  font-size: $font-size-2x-large !important;
-  font-weight: $font-weight-black;
+  font-family: $font-family-object-sans;
+  font-size: $font-size-x-large;
+  font-weight: $font-weight-bold;
   line-height: $line-height-large-headline;
-  text-transform: uppercase;
 }
 
 @mixin large-headline-script {
   font-family: $font-family-blitz !important;
-  font-size: $font-size-3x-large !important;
+  font-size: $font-size-2x-large !important;
   font-weight: $font-weight-normal;
-  line-height: $line-height-large-headline;
+  line-height: $line-height-large-headline-script;
 }
 
 @mixin headline {
-  font-family: $font-family-object-sans !important;
-  font-size: $font-size-x-large !important;
-  font-weight: $font-weight-heavy;
+  font-family: $font-family-object-sans;
+  font-size: $font-size-large;
+  font-weight: $font-weight-bold;
   line-height: $line-height-headline;
 }
 
 @mixin subheadline {
-  font-family: $font-family-object-sans !important;
-  font-size: $font-size-large !important;
-  font-weight: $font-weight-heavy;
+  font-family: $font-family-object-sans;
+  font-size: $font-size-medium;
+  font-weight: $font-weight-medium;
   line-height: $line-height-subheadline;
 }
 
-@mixin title {
-  @include body;
-
-  font-weight: $font-weight-bold;
-}
-
 @mixin body() {
-  font-family: $font-family-object-sans !important;
-  font-size: $font-size-medium !important;
+  font-family: $font-family-object-sans;
+  font-size: $font-size-medium;
   font-weight: $font-weight-normal;
   line-height: $line-height-body;
 }
 
+@mixin statement() {
+  @include body();
+
+  line-height: $line-height-statement;
+}
+
 @mixin caption() {
-  font-family: $font-family-object-sans !important;
-  font-size: $font-size-small !important;
+  font-family: $font-family-object-sans;
+  font-size: $font-size-small;
   font-weight: $font-weight-normal;
-  letter-spacing: 0 !important;
+  letter-spacing: 0;
   line-height: $line-height-caption;
 }
 
 @mixin overline() {
-  font-family: $font-family-object-sans !important;
-  font-size: $font-size-small !important ; 
+  font-family: $font-family-object-sans;
+  font-size: $font-size-small ; 
   font-weight: $font-weight-heavy;
-  letter-spacing: 0 !important;
+  letter-spacing: $letter-spacing-overline;
   line-height: $line-height-overline;
   text-transform: uppercase;
 }

package/src/styles/_object-sans.scss

@@ -18,6 +18,6 @@
 
 @include object-sans($font-weight-thin, 'ObjectSans-Thin', 'ObjectSans-ThinSlanted');
 @include object-sans($font-weight-normal, 'ObjectSans-Regular', 'ObjectSans-Slanted');
+@include object-sans($font-weight-medium, 'ObjectSans-Medium', 'ObjectSans-MediumSlanted');
 @include object-sans($font-weight-bold, 'ObjectSans-Bold', 'ObjectSans-BoldSlanted');
 @include object-sans($font-weight-heavy, 'ObjectSans-Heavy', 'ObjectSans-HeavySlanted');
-@include object-sans($font-weight-black, 'ObjectSans-Black', 'ObjectSans-BlackSlanted');

package/src/styles/_typography.scss

@@ -1,8 +1,6 @@
 @import "./core.scss";
 
 .providers.providers-theme {
-  @include body;
-
   .balance {
     @include balance;
   }
@@ -22,22 +20,14 @@
   .subheadline {
     @include subheadline;
   }
-  
-  .title {
-    @include title;
-  }
-  
+
   p,
   .body {
     @include body;
   }
-  
-  .caption {
-    @include caption;
-  }
-  
-  .overline {
-    @include overline;
+
+  .statement {
+    @include statement;
   }
   
   .font-family-blitz {

package/src/styles/variables.scss

@@ -12,7 +12,7 @@
 // ****************************************************************************
 // GLOBAL OVERRIDES
 // ****************************************************************************
-$font-size-root: 14px;
+$font-size-root: 15px;
 
 $body-font-family: $font-family-object-sans;
 $heading-font-family: $font-family-object-sans;
@@ -20,9 +20,51 @@ $heading-font-family: $font-family-object-sans;
 $font-weights: (
   "thin": $font-weight-thin,
   "normal": $font-weight-normal,
+  "medium": $font-weight-medium,
   "bold": $font-weight-bold,
   "heavy": $font-weight-heavy,
-  "black": $font-weight-black,
+);
+
+$body: (
+  "size": $font-size-medium,
+  "weight": $font-weight-normal,
+  "line-height": $line-height-body,
+  "letter-spacing": normal
+);
+
+$headings: (
+  "h1": (
+    "size": $font-size-x-large,
+    "weight": $font-weight-bold,
+    "line-height": $line-height-large-headline,
+    "letter-spacing": normal
+  ),
+  "h2": (
+    "size": $font-size-large,
+    "weight": $font-weight-bold,
+    "line-height": $line-height-headline,
+    "letter-spacing": normal
+  ),
+  "h3": (
+    "size": $font-size-medium,
+    "weight": $font-weight-medium,
+    "line-height": $line-height-subheadline,
+    "letter-spacing": normal
+  ),
+  "body-1": $body,
+  "body-2": $body,
+  "caption": (
+    "size": $font-size-small,
+    "weight": $font-weight-normal,
+    "line-height": $line-height-caption,
+    "letter-spacing": normal
+  ),
+  "overline": (
+    "size": $font-size-small,
+    "weight": $font-weight-heavy,
+    "line-height": $line-height-overline,
+    "letter-spacing": $letter-spacing-overline,
+  )
 );
 
 $border-radius-root: 8px;
@@ -53,6 +95,7 @@ $expansion-panel-active-header-min-height: 0;
 $snackbar-left: 16px;
 $snackbar-right: 16px;
 $snackbar-top: 24px;
+$snackbar-content-font-size: $font-size-medium;
 $snackbar-content-padding: 12px 16px;
 
 // ****************************************************************************
@@ -66,8 +109,8 @@ $btn-font-sizes: (
   'large': $font-size-large
 );
 $btn-sizes: (
-  'default': 34,
-  'large': 54
+  'default': 36,
+  'large': 58
 );
 
 // ****************************************************************************
@@ -116,6 +159,6 @@ $text-field-enclosed-details-padding: 0 16px;
 // MODALS
 // ****************************************************************************
 $dialog-card-title-font-size: $font-size-large;
-$dialog-card-title-font-weight: $font-weight-heavy;
+$dialog-card-title-font-weight: $font-weight-bold;
 $dialog-card-title-letter-spacing: normal;
 $dialog-card-text-padding: 0 24px 16px;