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

package/package.json

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

package/src/components/CButton.vue

@@ -137,7 +137,7 @@ export default class CButton extends Vue {
 .button__icon {
   font-size: $font-size-x-large;
   height: 24px;
-  left: 0;
+  left: -8px;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);

package/src/components/CNotification.vue

@@ -49,7 +49,6 @@ export default class CNotification extends Vue {
   /** Makes the background red, etc. */
   @Prop(Boolean) alert?: boolean;
 
-  @Prop({ type: String, default: '' }) oneTimeMessageName!: string;
   @Prop(Boolean) dismissible?: boolean;
 
   @Prop(String) title?: string;

package/src/styles/_core.scss

@@ -49,13 +49,16 @@ $border-radius: 8px;
 $font-family-object-sans: objectsans;
 $font-family-blitz: blitz;
 
+$font-family-base: $font-family-object-sans, sans-serif;
+$font-family-script: $font-family-blitz, script;
+
 $font-weight-thin: 100;
-$font-weight-light: 300; // Currently unused, but holding its place in case we add it.
+$font-weight-light: 300;
 $font-weight-normal: 400;
 $font-weight-medium: 500; // Currently unused, but holding its place in case we add it. 
 $font-weight-bold: 700;
 $font-weight-heavy: 800;
-$font-weight-black: 900;
+$font-weight-black: 900; // Currently unused, but holding its place in case we add it. 
 
 $font-size-3x-large: 48px;
 $font-size-2x-large: 35px;
@@ -64,81 +67,125 @@ $font-size-large: 21px;
 $font-size-medium: 15px;
 $font-size-small: 12px;
 
-$line-height-balance: 100%;
-$line-height-large-headline: 130%;
-$line-height-large-headline-script: 85%;
-$line-height-headline: 130%;
-$line-height-subheadline: 150%;
-$line-height-body: 150%;
-$line-height-statement: 100%;
-$line-height-caption: 130%;
-$line-height-overline: 100%;
-
-$letter-spacing-overline: 0.5px;
+$balance: (
+  "size": $font-size-2x-large,
+  "weight": $font-weight-thin,
+  "line-height": 100%,
+  "letter-spacing": normal,
+);
+
+$balance-dollar: (
+  "size": $font-size-x-large,
+  "weight": $font-weight-light,
+  "line-height": 100%,
+  "letter-spacing": normal,
+);
+
+$large-headline: (
+  "size": $font-size-x-large,
+  "weight": $font-weight-bold,
+  "line-height": 130%,
+  "letter-spacing": normal,
+);
+
+$large-headline-script: (
+  "size": $font-size-2x-large,
+  "weight": $font-weight-normal,
+  "line-height": 85%,
+  "letter-spacing": normal,
+  "font-family": $font-family-script,
+);
+
+$headline: (
+  "size": $font-size-large,
+  "weight": $font-weight-bold,
+  "line-height": 130%,
+  "letter-spacing": normal,
+);
+
+$subheadline: (
+  "size": $font-size-medium,
+  "weight": $font-weight-bold,
+  "line-height": 150%,
+  "letter-spacing": normal,
+);
+
+$body: (
+  "size": $font-size-medium,
+  "weight": $font-weight-normal,
+  "line-height": 150%,
+  "letter-spacing": normal,
+);
+
+$statement: map-merge(
+  $body, 
+  (
+    "line-height": 100%,
+  )
+);
+
+$caption: (
+  "size": $font-size-small,
+  "weight": $font-weight-normal,
+  "line-height": 130%,
+  "letter-spacing": normal,
+);
+
+$overline: (
+  "size": $font-size-small,
+  "weight": $font-weight-heavy,
+  "line-height": 100%,
+  "letter-spacing": 0.5px,
+  "text-transform": uppercase,
+);
+
+@mixin create-type-mixin($type-style) {
+  font-family: map-get($type-style, "font-family");
+  font-size: map-get($type-style, "size");
+  font-weight: map-get($type-style, "weight");
+  letter-spacing: map-get($type-style, "letter-spacing");
+  line-height: map-get($type-style, "line-height");
+  text-transform: map-get($type-style, "text-transform");
+}
 
 @mixin balance {
-  font-family: $font-family-object-sans;
-  font-size: $font-size-2x-large;
-  font-weight: $font-weight-thin;
-  line-height: $line-height-balance;
+  @include create-type-mixin($balance);
+}
+
+@mixin balance-dollar {
+  @include create-type-mixin($balance-dollar);
 }
 
 @mixin large-headline {
-  font-family: $font-family-object-sans;
-  font-size: $font-size-x-large;
-  font-weight: $font-weight-bold;
-  line-height: $line-height-large-headline;
+  @include create-type-mixin($large-headline);
 }
 
 @mixin large-headline-script {
-  font-family: $font-family-blitz !important;
-  font-size: $font-size-2x-large !important;
-  font-weight: $font-weight-normal;
-  line-height: $line-height-large-headline-script;
+  @include create-type-mixin($large-headline-script);
 }
 
 @mixin headline {
-  font-family: $font-family-object-sans;
-  font-size: $font-size-large;
-  font-weight: $font-weight-bold;
-  line-height: $line-height-headline;
+  @include create-type-mixin($headline);
 }
 
 @mixin subheadline {
-  font-family: $font-family-object-sans;
-  font-size: $font-size-medium;
-  font-weight: $font-weight-medium;
-  line-height: $line-height-subheadline;
+  @include create-type-mixin($subheadline);
 }
 
-@mixin body() {
-  font-family: $font-family-object-sans;
-  font-size: $font-size-medium;
-  font-weight: $font-weight-normal;
-  line-height: $line-height-body;
+@mixin body {
+  @include create-type-mixin($body);
 }
 
-@mixin statement() {
-  @include body();
-
-  line-height: $line-height-statement;
+@mixin statement {
+  @include create-type-mixin($statement);
 }
 
-@mixin caption() {
-  font-family: $font-family-object-sans;
-  font-size: $font-size-small;
-  font-weight: $font-weight-normal;
-  letter-spacing: 0;
-  line-height: $line-height-caption;
+@mixin caption {
+  @include create-type-mixin($caption);
 }
 
-@mixin overline() {
-  font-family: $font-family-object-sans;
-  font-size: $font-size-small ; 
-  font-weight: $font-weight-heavy;
-  letter-spacing: $letter-spacing-overline;
-  line-height: $line-height-overline;
-  text-transform: uppercase;
+@mixin overline {
+  @include create-type-mixin($overline);
 }
 
 // ICONS

package/src/styles/_object-sans.scss

@@ -17,7 +17,7 @@
 }
 
 @include object-sans($font-weight-thin, 'ObjectSans-Thin', 'ObjectSans-ThinSlanted');
+@include object-sans($font-weight-light, 'ObjectSans-Light', 'ObjectSans-LightSlanted');
 @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');

package/src/styles/_typography.scss

@@ -1,36 +1,39 @@
 @import "./core.scss";
 
-.providers.providers-theme {
-  .balance {
-    @include balance;
-  }
-  
-  .large-headline {
-    @include large-headline;
-  }
-  
-  .large-headline-script {
-    @include large-headline-script;
-  }
-  
-  .headline {
-    @include headline;
-  }
-  
-  .subheadline {
-    @include subheadline;
-  }
-
-  p,
-  .body {
-    @include body;
-  }
-
-  .statement {
-    @include statement;
-  }
-  
-  .font-family-blitz {
-    font-family: $font-family-blitz;
-  }
+// NOTE(mohan): The overline and caption classes are generated by Vuetify.
+.balance {
+  @include balance;
 }
+
+.balance-dollar {
+  @include balance-dollar;
+}
+
+.large-headline {
+  @include large-headline;
+}
+
+.large-headline-script {
+  @include large-headline-script;
+}
+
+.headline {
+  @include headline;
+}
+
+.subheadline {
+  @include subheadline;
+}
+
+.body {
+  @include body;
+}
+
+.statement {
+  @include statement;
+}
+
+.font-family-blitz {
+  font-family: $font-family-blitz;
+}
+

package/src/styles/variables.scss

@@ -14,8 +14,8 @@
 // ****************************************************************************
 $font-size-root: 15px;
 
-$body-font-family: $font-family-object-sans;
-$heading-font-family: $font-family-object-sans;
+$body-font-family: $font-family-base;
+$heading-font-family: $font-family-base;
 
 $font-weights: (
   "thin": $font-weight-thin,
@@ -25,46 +25,18 @@ $font-weights: (
   "heavy": $font-weight-heavy,
 );
 
-$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
-  ),
+  "h1": $large-headline,
+  "h2": $headline,
+  "h3": $subheadline,
+  // NOTE(mohan): Vuetify generates a `headline` class using these styles.
+  // This class has a tendency to override our own headline styles.
+  // Remove after upgrading to 2.3.0, since `headline` is renamed to `h5` in that update.
+  "h5": $headline, 
   "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,
-  )
+  "caption": $caption,
+  "overline": $overline
 );
 
 $border-radius-root: 8px;
@@ -83,7 +55,7 @@ $material-light: (
 // ACCORDION
 // ****************************************************************************
 $expansion-panel-active-margin: 0;
-$expansion-panel-header-font-size: 1rem;
+$expansion-panel-header-font-size: map-get($subheadline, "size");
 $expansion-panel-header-padding: 16px;
 $expansion-panel-content-padding: 0 16px 16px;
 $expansion-panel-header-min-height: 0;
@@ -95,13 +67,14 @@ $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-font-size: map-get($body, "size");
 $snackbar-content-padding: 12px 16px;
+$snackbar-font-size: map-get($body, "size");
 
 // ****************************************************************************
 // BUTTON
 // ****************************************************************************
-$btn-font-weight: $font-weight-heavy;
+$btn-font-weight: $font-weight-bold;
 $btn-text-transform: none;
 $btn-letter-spacing: normal;
 $btn-font-sizes: (
@@ -120,20 +93,20 @@ $card-actions-padding: 0 $card-h-spacing 12px;
 $card-border-radius: $border-radius;
 $card-outlined-border-width: $border-width;
 $card-subtitle-padding: $card-v-spacing $card-h-spacing;
-$card-text-font-size: $font-size-medium;
-$card-text-line-height: $line-height-body;
+$card-text-font-size: map-get($body, "size");
+$card-text-line-height: map-get($body, "line-height");
 $card-text-letter-spacing: normal;
-$card-title-font-size: $font-size-medium;	
-$card-title-font-weight: $font-weight-bold;	
-$card-title-letter-spacing: normal;	
-$card-title-line-height: 1;
+$card-title-font-size: map-get($subheadline, "size");	
+$card-title-font-weight: map-get($subheadline, "weight");	
+$card-title-letter-spacing: map-get($subheadline, "letter-spacing");	
+$card-title-line-height: 100%;
 $card-title-word-break: break-word;
 $card-btn-margin-x: 0;
 
 // ****************************************************************************
 // CHECKBOX
 // ****************************************************************************
-$label-font-size: $font-size-medium;
+$label-font-size: map-get($body, "size");
 
 // ****************************************************************************
 // LISTS
@@ -143,14 +116,14 @@ $list-item-action-margin: 16px 0;
 $list-item-child-min-width: 0;
 $list-item-content-padding: 16px 0 12px;
 $list-item-padding: 0 12px 0 16px;
-$list-item-title-subtitle-line-height: $line-height-body;
+$list-item-title-subtitle-line-height: map-get($body, "line-height");
 
 // ****************************************************************************
 // FORM FIELDS
 // (Text fields, text areas, and selects)
 // Source: https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VTextField/_variables.scss
 // ****************************************************************************
-$input-font-size: $font-size-medium;
+$input-font-size: map-get($body, "size");
 
 $text-field-border-radius: $border-radius;
 $text-field-enclosed-details-padding: 0 16px;
@@ -158,7 +131,7 @@ $text-field-enclosed-details-padding: 0 16px;
 // ****************************************************************************
 // MODALS
 // ****************************************************************************
-$dialog-card-title-font-size: $font-size-large;
-$dialog-card-title-font-weight: $font-weight-bold;
-$dialog-card-title-letter-spacing: normal;
+$dialog-card-title-font-size: map-get($headline, "size");
+$dialog-card-title-font-weight: map-get($headline, "weight");
+$dialog-card-title-letter-spacing: map-get($headline, "letter-spacing");
 $dialog-card-text-padding: 0 24px 16px;